Difference between revisions of "Team:TJUSLS China/Design"
| Line 4: | Line 4: | ||
<head> | <head> | ||
| − | + | <meta charset="UTF-8"> | |
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| − | + | <link rel="stylesheet" href="https://2019.igem.org/Team:TJUSLS_China/bootstrapmin400css?action=raw&ctype=text/css" | |
| − | + | type="text/css"> | |
| − | + | <link rel="stylesheet" href="https://2019.igem.org/Team:TJUSLS_China/designstylecss?action=raw&ctype=text/css"> | |
| − | + | <title>Design</title> | |
| − | + | <style> | |
| − | + | body, | |
| − | + | html { | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; | |
| − | + | } | |
| − | + | /* 消除平台引起的 bug */ | |
| − | + | #home_logo, | |
| − | + | #sideMenu, | |
| − | + | #bars_item, | |
| − | + | #top_title { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | #sideMenu, | |
| − | + | #top_title, | |
| − | + | .patrollink { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | #top_title { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | #content { | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | width: 100%; | |
| − | + | } | |
| − | + | img { | |
| − | + | margin: 0 auto; | |
| − | + | } | |
| − | + | .menuHolder * { | |
| − | + | box-sizing: content-box !important; | |
| − | + | } | |
| − | + | .menuHolder { | |
| − | + | width: 100px; | |
| − | + | height: 100px; | |
| − | + | margin: 0 0 250px 0; | |
| − | + | position: relative; | |
| − | + | z-index: 9; | |
| − | + | } | |
| − | + | .menuHolder { | |
| − | + | position: fixed; | |
| − | + | top: 16px; | |
| − | + | /* top: 0; */ | |
| − | + | } | |
| − | + | .menuHolder ul { | |
| − | + | padding: 0px; | |
| − | + | margin: 0; | |
| − | + | list-style: none; | |
| − | + | position: absolute; | |
| − | + | left: 0; | |
| − | + | top: 0; | |
| − | + | width: 0; | |
| − | + | height: 0; | |
| − | + | } | |
| − | + | /*.menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}*/ | |
| − | + | .menuHolder ul.p1>li.s1>a { | |
| − | + | background-color: #11253b !important; | |
| − | + | } | |
| − | + | .menuHolder ul li a { | |
| − | + | color: #000; | |
| − | + | text-decoration: none; | |
| − | + | font: bold 13px/30px arial, sans-serif; | |
| − | + | text-align: center; | |
| − | + | box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4); | |
| − | + | transform-origin: 0 0; | |
| − | + | } | |
| − | + | .menuHolder ul.p1 li { | |
| − | + | position: absolute; | |
| − | + | left: 0; | |
| − | + | top: 0; | |
| − | + | } | |
| − | + | .menuHolder ul.p2 { | |
| − | + | z-index: -1; | |
| − | + | transform: rotate(0deg) !important; | |
| − | + | } | |
| − | + | .menuHolder ul.p3 { | |
| − | + | z-index: -1; | |
| − | + | } | |
| − | + | /*画第一个圆圈*/ | |
| − | + | .menuHolder li.s1>a { | |
| − | + | position: absolute; | |
| − | + | display: block; | |
| − | + | width: 100px; | |
| − | + | height: 100px; | |
| − | + | background: #11253b; | |
| − | + | border-radius: 0 0 100px 0; | |
| − | + | } | |
| − | + | /*画第二个圆圈*/ | |
| − | + | .menuHolder li.s2>a { | |
| − | + | position: absolute; | |
| − | + | display: block; | |
| − | + | width: 100px; | |
| − | + | padding-left: 100px; | |
| − | + | height: 200px; | |
| − | + | background: #ddd; | |
| − | + | border-radius: 0 0 200px 0; | |
| − | + | } | |
| − | + | /*画第三个圆圈*/ | |
| − | + | .menuHolder ul.p3 li a { | |
| − | + | position: absolute; | |
| − | + | display: block; | |
| − | + | width: 100px; | |
| − | + | padding-left: 200px; | |
| − | + | height: 300px; | |
| − | + | background: #999; | |
| − | + | border-radius: 0 0 300px 0; | |
| − | + | } | |
| − | + | /*把第二第三个圆隐藏到角落里去，让视角看不到*/ | |
| − | + | .menuHolder ul ul { | |
| − | + | transform-origin: 0 0; | |
| − | + | transform: rotate(90deg); | |
| − | + | transition: 1s; | |
| − | + | } | |
| − | + | /*绘制第二层的菜单*/ | |
| − | + | .menuHolder li.s2:nth-of-type(8)>a { | |
| − | + | background: #888; | |
| − | + | transform: rotate(78.25deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(7)>a { | |
| − | + | background: #999; | |
| − | + | transform: rotate(67.5deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(6)>a { | |
| − | + | background: #aaa; | |
| − | + | transform: rotate(56.25deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(5)>a { | |
| − | + | background: #bbb; | |
| − | + | transform: rotate(45deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(4)>a { | |
| − | + | background: #ccc; | |
| − | + | transform: rotate(33.75deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(3)>a { | |
| − | + | background: #ddd; | |
| − | + | transform: rotate(22.5deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(2)>a { | |
| − | + | background: #eee; | |
| − | + | transform: rotate(11.25deg); | |
| − | + | } | |
| − | + | .menuHolder li.s2:nth-of-type(1)>a { | |
| − | + | background: #fff; | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | /*绘制Parts的子菜单*/ | |
| − | + | .menuHolder .a6 li:nth-of-type(4)>a { | |
| − | + | background: #999; | |
| − | + | transform: rotate(67.5deg); | |
| − | + | } | |
| − | + | .menuHolder .a6 li:nth-of-type(3)>a { | |
| − | + | background: #bbb; | |
| − | + | transform: rotate(45deg); | |
| − | + | } | |
| − | + | .menuHolder .a6 li:nth-of-type(2)>a { | |
| − | + | background: #ddd; | |
| − | + | transform: rotate(22.5deg); | |
| − | + | } | |
| − | + | .menuHolder .a6 li:nth-of-type(1)>a { | |
| − | + | background: #fff; | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | /*绘制Team的子菜单*/ | |
| − | + | .menuHolder .a5 li:nth-of-type(3)>a { | |
| − | + | background: #aaa; | |
| − | + | transform: rotate(60deg); | |
| − | + | } | |
| − | + | .menuHolder .a5 li:nth-of-type(2)>a { | |
| − | + | background: #ccc; | |
| − | + | transform: rotate(30deg); | |
| − | + | } | |
| − | + | .menuHolder .a5 li:nth-of-type(1)>a { | |
| − | + | background: #fff; | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | /*绘制Project的子菜单*/ | |
| − | + | .menuHolder .a3 li:nth-of-type(1)>a { | |
| − | + | background: #fff; | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(8)>a { | |
| − | + | background: #888; | |
| − | + | transform: rotate(78.75deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(7)>a { | |
| − | + | background: #999; | |
| − | + | transform: rotate(67.5deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(6)>a { | |
| − | + | background: #aaa; | |
| − | + | transform: rotate(56.25deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(5)>a { | |
| − | + | background: #bbb; | |
| − | + | transform: rotate(45deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(4)>a { | |
| − | + | background: #ccc; | |
| − | + | transform: rotate(33.75deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(3)>a { | |
| − | + | background: #ddd; | |
| − | + | transform: rotate(22.5deg); | |
| − | + | } | |
| − | + | .menuHolder .a3 li:nth-of-type(2)>a { | |
| − | + | background: #eee; | |
| − | + | transform: rotate(11.25deg); | |
| − | + | } | |
| − | + | .menuHolder .a7 li:nth-of-type(2)>a { | |
| − | + | background: #aaa; | |
| − | + | transform: rotate(45deg); | |
| − | + | } | |
| − | + | .menuHolder .a7 li:nth-of-type(1)>a { | |
| − | + | background: #fff; | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | /*鼠标滑过第一层菜单展开第二层菜单*/ | |
| − | + | .menuHolder li.s1:hover ul.p2 { | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | /*鼠标滑过第二层菜单展开第三层菜单*/ | |
| − | + | .menuHolder li.s2:hover ul.p3 { | |
| − | + | transform: rotate(0deg); | |
| − | + | } | |
| − | + | /*鼠标滑过改变背景颜色和文字颜色*/ | |
| − | + | .menuHolder ul li:hover>a { | |
| − | + | background: #11253b; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | .menuHolder li.s2:hover>a { | |
| − | + | background: #11253b; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | .menuHolder .a6 li:hover>a { | |
| − | + | background: #11253b; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | .menuHolder .a5 li:hover>a { | |
| − | + | background: #11253b; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | .menuHolder .a3 li:hover>a { | |
| − | + | background: #11253b; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | .menuHolder .a7 li:hover>a { | |
| − | + | background: #11253b; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | #navbar-logo { | |
| − | + | height: 50px; | |
| − | + | margin-top: 8px; | |
| − | + | margin-left: -20px; | |
| − | + | } | |
| − | + | /* footer */ | |
| − | + | /*下面contactus*/ | |
| − | + | .footer { | |
| − | + | background-color: #222222; | |
| − | + | color: #fff; | |
| − | + | font-family: verdana; | |
| − | + | width: 100%; | |
| − | + | overflow: hidden; | |
| − | + | margin: 0; | |
| − | + | padding: 1.5% 0 3% 0; | |
| − | + | text-align: center; | |
| − | + | position: relative; | |
| − | + | z-index: 100; | |
| − | + | } | |
| − | + | .footer * { | |
| − | + | color: white !important; | |
| − | + | } | |
| − | + | #hui1 { | |
| − | + | position: absolute; | |
| − | + | right: 0; | |
| − | + | top: 20%; | |
| − | + | width: 30%; | |
| − | + | z-index: 999; | |
| − | + | } | |
| − | + | #xiaohui { | |
| − | + | width: 40%; | |
| − | + | } | |
| − | + | #yuanhui { | |
| − | + | width: 34%; | |
| − | + | } | |
| − | + | #hui2 { | |
| − | + | position: absolute; | |
| − | + | left: 0; | |
| − | + | top: 25%; | |
| − | + | width: 30%; | |
| − | + | z-index: 999; | |
| − | + | } | |
| − | + | .ctus { | |
| − | + | width: 25%; | |
| − | + | margin: 5px; | |
| − | + | float: left; | |
| − | + | } | |
| − | + | .ctus img { | |
| − | + | width: 10%; | |
| − | + | height: 10%; | |
| − | + | border-radius: 0; | |
| − | + | margin: 5px auto; | |
| − | + | } | |
| − | + | .ctus img:hover { | |
| − | + | transform: scale(1.2, 1.2); | |
| − | + | } | |
| − | + | /* 23. footer | |
| − | + | --------------------------------------------------------------------------------*/ | |
| − | + | #totop { | |
| − | + | width: 40px; | |
| − | + | height: 40px; | |
| − | + | line-height: 40px; | |
| − | + | background-color: #353535; | |
| − | + | text-align: center; | |
| − | + | position: fixed; | |
| − | + | border-radius: 50%; | |
| − | + | padding: 0; | |
| − | + | right: 15px; | |
| − | + | bottom: 10px; | |
| − | + | z-index: 9999; | |
| − | + | display: block; | |
| − | + | cursor: pointer; | |
| − | + | } | |
| − | + | #btn2 { | |
| − | + | font-size: large; | |
| − | + | font-weight: 900; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | #totop:hover { | |
| − | + | transform: scale(1.1); | |
| − | + | } | |
| − | + | /* 正式 */ | |
| − | + | .navbar-brand { | |
| − | + | margin-left: 64px; | |
| − | + | } | |
| − | + | .ts-title h2 { | |
| − | + | font-weight: 700; | |
| − | + | font-size: 38px; | |
| − | + | } | |
| − | + | .ts-title h4 { | |
| − | + | margin-bottom: 10px !important; | |
| − | + | } | |
| − | + | .container p { | |
| − | + | font-size: 18px; | |
| − | + | line-height: 1.8; | |
| + | } | ||
| − | + | .container h3 { | |
| − | + | font-size: 24px; | |
| − | + | margin-bottom: 12px; | |
| − | + | } | |
| − | + | .container h5 { | |
| − | + | font-size: 20px; | |
| − | + | } | |
| − | + | #ts-hero { | |
| − | + | background: url("https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--headpic-design.jpg") no-repeat center center; | |
| − | + | background-size: cover; | |
| − | + | } | |
| − | + | #top_menu_inside ul { | |
| − | + | line-height: 16px; | |
| − | + | } | |
| − | + | #mw-content-text>p { | |
| − | + | display: none !important; | |
| − | + | } | |
| − | + | #top_menu_inside #user_item { | |
| − | + | padding-top: 0 !important; | |
| − | + | line-height: 16px; | |
| − | + | } | |
| − | + | h1 { | |
| − | + | border: none !important; | |
| − | + | } | |
| − | + | .navbar.navbar-expand-lg .ts-background { | |
| − | + | opacity: 1 !important; | |
| − | + | } | |
| − | + | #navbar { | |
| − | + | height: 80px; | |
| − | + | position: fixed; | |
| − | + | top: 0; | |
| − | + | margin-top: 16px; | |
| − | + | background-color: #11253b; | |
| − | + | width: 100%; | |
| − | + | z-index: 100; | |
| − | + | left: 0; | |
| − | + | } | |
| − | + | #navbar-logo { | |
| − | + | height: 50px; | |
| − | + | margin-top: 8px; | |
| − | + | margin-left: -20px; | |
| − | + | } | |
| − | + | #links { | |
| − | + | float: right; | |
| − | + | height: 60px; | |
| − | + | } | |
| − | + | #links a { | |
| − | + | cursor: pointer; | |
| − | + | float: right; | |
| − | + | padding-right: 20px; | |
| − | + | line-height: 60px; | |
| − | + | color: white; | |
| − | + | font-size: 18px; | |
| − | + | text-decoration: none; | |
| − | + | transition: 0.4s; | |
| − | + | text-align: center; | |
| − | + | } | |
| − | + | #links a:hover { | |
| − | + | color: rgb(172, 172, 172); | |
| − | + | } | |
| − | + | /*头部图片的css*/ | |
| − | + | .py-7 { | |
| − | + | padding: 7.5rem 0; | |
| − | + | } | |
| − | + | .py-md-0 { | |
| − | + | padding-top: 0 !important; | |
| − | + | padding-bottom: 0 !important | |
| − | + | } | |
| − | + | .bg-hero { | |
| − | + | background-color: #000000; | |
| − | + | background-size: cover; | |
| − | + | background-position: center center; | |
| − | + | position: relative; | |
| − | + | } | |
| − | + | .bg-hero:before { | |
| − | + | position: absolute; | |
| − | + | z-index: 1; | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | display: block; | |
| − | + | left: 0; | |
| − | + | top: 0; | |
| − | + | content: ""; | |
| − | + | background-color: rgba(0, 0, 0, 0.6); | |
| − | + | } | |
| − | + | .bg-hero .container { | |
| − | + | z-index: 2; | |
| − | + | position: relative; | |
| − | + | } | |
| − | + | .container { | |
| − | + | width: 100%; | |
| − | + | padding-right: 15px; | |
| − | + | padding-left: 15px; | |
| − | + | margin-right: auto; | |
| − | + | margin-left: auto; | |
| − | + | } | |
| − | + | @media (min-width: 576px) { | |
| − | + | .container { | |
| − | + | max-width: 540px; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 768px) { | |
| − | + | .container { | |
| − | + | max-width: 720px; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 992px) { | |
| − | + | .container { | |
| − | + | max-width: 960px; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 1200px) { | |
| − | + | .container { | |
| − | + | max-width: 1140px; | |
| − | + | } | |
| − | + | } | |
| − | + | .row { | |
| − | + | display: -ms-flexbox; | |
| − | + | display: flex; | |
| − | + | -ms-flex-wrap: wrap; | |
| − | + | flex-wrap: wrap; | |
| − | + | margin-right: -15px; | |
| − | + | margin-left: -15px; | |
| − | + | } | |
| − | + | /*vertical heights */ | |
| − | + | .vh-100 { | |
| − | + | height: 100vh; | |
| − | + | } | |
| − | + | @media (min-width: 576px) { | |
| − | + | .vh-sm-100 { | |
| − | + | height: 100vh; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 768px) { | |
| − | + | .vh-md-100 { | |
| − | + | height: 100vh; | |
| − | + | } | |
| − | + | } | |
| − | + | .my-auto { | |
| − | + | margin-bottom: auto !important | |
| − | + | } | |
| − | + | .mx-auto { | |
| − | + | margin-right: auto !important | |
| − | + | } | |
| − | + | .d-none { | |
| − | + | display: none !important | |
| − | + | } | |
| − | + | .d-md-block { | |
| − | + | display: block !important | |
| − | + | } | |
| − | + | .cover-arrow { | |
| − | + | position: absolute; | |
| − | + | z-index: 6; | |
| − | + | bottom: 60px; | |
| − | + | right: 0; | |
| − | + | left: 0; | |
| − | + | text-align: center; | |
| − | + | } | |
| − | + | .bounce { | |
| − | + | -webkit-animation: bounce 3s infinite; | |
| − | + | animation: bounce 3s infinite; | |
| − | + | } | |
| − | + | @-webkit-keyframes bounce { | |
| − | + | 0%, | |
| − | + | 20%, | |
| − | + | 50%, | |
| − | + | 80%, | |
| − | + | 100% { | |
| − | + | -webkit-transform: translateY(0); | |
| − | + | transform: translateY(0); | |
| − | + | } | |
| − | + | 40% { | |
| − | + | -webkit-transform: translateY(-30px); | |
| − | + | transform: translateY(-30px); | |
| − | + | } | |
| − | + | 60% { | |
| − | + | -webkit-transform: translateY(-15px); | |
| − | + | transform: translateY(-15px); | |
| − | + | } | |
| − | + | } | |
| − | + | @keyframes bounce { | |
| − | + | 0%, | |
| − | + | 20%, | |
| − | + | 50%, | |
| − | + | 80%, | |
| − | + | 100% { | |
| − | + | -webkit-transform: translateY(0); | |
| − | + | transform: translateY(0); | |
| − | + | } | |
| − | + | 40% { | |
| − | + | -webkit-transform: translateY(-30px); | |
| − | + | transform: translateY(-30px); | |
| − | + | } | |
| − | + | 60% { | |
| − | + | -webkit-transform: translateY(-15px); | |
| − | + | transform: translateY(-15px); | |
| − | + | } | |
| − | + | } | |
| − | + | .text-center { | |
| − | + | text-align: center !important; | |
| − | + | } | |
| − | + | @media (min-width: 576px) { | |
| − | + | .text-sm-left { | |
| − | + | text-align: left !important; | |
| − | + | } | |
| − | + | .text-sm-right { | |
| − | + | text-align: right !important; | |
| − | + | } | |
| − | + | .text-sm-center { | |
| − | + | text-align: center !important; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 768px) { | |
| − | + | .text-md-left { | |
| − | + | text-align: left !important; | |
| − | + | } | |
| − | + | .text-md-right { | |
| − | + | text-align: right !important; | |
| − | + | } | |
| − | + | .text-md-center { | |
| − | + | text-align: center !important; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 992px) { | |
| − | + | .text-lg-left { | |
| − | + | text-align: left !important; | |
| − | + | } | |
| − | + | .text-lg-right { | |
| − | + | text-align: right !important; | |
| − | + | } | |
| − | + | .text-lg-center { | |
| − | + | text-align: center !important; | |
| − | + | } | |
| − | + | } | |
| − | + | @media (min-width: 1200px) { | |
| − | + | .text-xl-left { | |
| − | + | text-align: left !important; | |
| − | + | } | |
| − | + | .text-xl-right { | |
| − | + | text-align: right !important; | |
| − | + | } | |
| − | + | .text-xl-center { | |
| − | + | text-align: center !important; | |
| − | + | } | |
| − | + | } | |
| − | + | .col-md-7 { | |
| − | + | position: relative; | |
| − | + | width: 100%; | |
| − | + | min-height: 1px; | |
| − | + | padding-right: 15px; | |
| − | + | padding-left: 15px; | |
| − | + | } | |
| − | + | .text-white { | |
| − | + | color: #fff !important; | |
| − | + | } | |
| − | + | .scroll-top { | |
| − | + | width: 40px; | |
| − | + | height: 40px; | |
| − | + | line-height: 40px; | |
| − | + | background-color: #353535; | |
| − | + | text-align: center; | |
| − | + | position: fixed; | |
| − | + | border-radius: 50%; | |
| − | + | padding: 0; | |
| − | + | right: 15px; | |
| − | + | bottom: 10px; | |
| − | + | z-index: 9999; | |
| − | + | display: block; | |
| − | + | cursor: pointer; | |
| − | + | } | |
| − | + | .scroll-top:hover { | |
| − | + | background-color: #353535; | |
| − | + | transform: scale(1.1); | |
| − | + | } | |
| − | + | #Overview { | |
| − | + | padding-bottom: 0 !important; | |
| − | + | } | |
| − | + | #G-C-D { | |
| − | + | padding-top: 40px; | |
| − | + | padding-bottom: 0 !important; | |
| − | + | } | |
| − | + | #E-F-H-S { | |
| − | + | padding-top: 40px; | |
| − | + | padding-bottom: 0 !important; | |
| − | + | } | |
| − | + | #References { | |
| − | + | padding-top: 40px; | |
| − | + | } | |
| − | </style> | + | |
| + | .ts-title { | ||
| + | margin-bottom: 1rem !important; | ||
| + | } | ||
| + | |||
| + | table th { | ||
| + | background-color: #11253B; | ||
| + | color: #ffffff; | ||
| + | } | ||
| + | |||
| + | table, | ||
| + | table th, | ||
| + | table td { | ||
| + | font-size: 16px; | ||
| + | text-align: center; | ||
| + | letter-spacing: 1px; | ||
| + | padding: 10px; | ||
| + | border: 2px solid #555555; | ||
| + | border-collapse: collapse; | ||
| + | line-height: 180%; | ||
| + | } | ||
| + | |||
| + | table tr:nth-child(odd) { | ||
| + | background-color: #eee; | ||
| + | } | ||
| + | |||
| + | table tr:nth-child(even) { | ||
| + | background-color: #ffffff; | ||
| + | } | ||
| + | |||
| + | table { | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | </style> | ||
</head> | </head> | ||
<div id="navbar" style="padding-top: 6px;"> | <div id="navbar" style="padding-top: 6px;"> | ||
| − | + | <div id="links"> | |
| − | + | <a id="toReferences">Reference</a> | |
| − | + | <a id="toMETE">Methods to evaluate therapeutic effects</a> | |
| − | + | <a id="toEFHS">Establishment of Fluorescent HTS system</a> | |
| − | + | <a id="toGCD">Genetic Circuit Design</a> | |
| − | + | <a id="toOverview">Overview</a> | |
| − | + | </div> | |
| − | + | <div class="menuHolder"> | |
<div class="menuHolder"> | <div class="menuHolder"> | ||
| − | + | <div class="menuWindow"> | |
| − | + | <ul class="p1"> | |
| − | + | <li class="s1"> | |
| − | + | <a href="http://2019.igem.org/Team:TJUSLS_China"> | |
| − | + | <img src="https://2019.igem.org/wiki/images/4/48/T--TJUSLS_China--logo.svg" alt="TJUSLS" id="navbar-logo"> | |
| − | + | </a> | |
| − | + | <ul class="p2" style="transform: rotate(0deg);"> | |
| − | + | <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China"><span>HOME</span></a></li> | |
| − | + | <li class="s2"><a href=""><span>PROJECT</span></a> | |
| − | + | <ul class="p3 a3"> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Description">Description</a> | |
| − | + | </li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Design">Design</a></li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Experiments">Experiments</a> | |
| − | + | </li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Notebook">Notebook</a></li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Demonstrate">Demonstrate</a> | |
| − | + | </li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Improve">Improve</a></li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Characterization">Characterization</a> | |
| − | + | </li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Results">Results</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China/Safety"><span>SAFETY</span></a> | |
| − | + | ||
| − | + | </li> | |
| − | + | <li class="s2"> <a href="http://2019.igem.org/Team:TJUSLS_China/Parts"><span>PARTS</span></a> | |
| − | + | <ul class="p3 a6"> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Parts">Overview</a></li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Basic_Part">Basic parts</a> | |
| − | + | </li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Composite_Part">Composite | |
| − | + | parts</a></li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Part_Collection">Part | |
| − | + | collection</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China/Model"><span>MODEL</span></a> | |
| − | + | </li> | |
| − | + | <li class="s2"><a href=""><span>HP</span></a> | |
| − | + | <ul class="p3 a7"> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Human_Practices">Human | |
| − | + | practices</a></li> | |
| − | + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Public_Engagement">Education | |
| − | + | and engagement</a></li> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</ul> | </ul> | ||
| − | </ | + | </li> |
| − | </div> | + | <li class="s2"><a href=""><span>JUDGING FORM</span></a> |
| + | <ul class="p3 a5"> | ||
| + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Medal">Medal requirements</a> | ||
| + | </li> | ||
| + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Measurement">Measurement</a> | ||
| + | </li> | ||
| + | <li><a href="http://igem.org/2019_Judging_Form?team=TJUSLS_China">Judging Form</a> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | <li class="s2 b6"><a href=""><span>TEAM</span></a> | ||
| + | <ul class="p3 a5"> | ||
| + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Team">Team members</a></li> | ||
| + | <li> | ||
| + | <a href="http://2019.igem.org/Team:TJUSLS_China/Collaborations">Collaborations</a> | ||
| + | </li> | ||
| + | <li><a href="http://2019.igem.org/Team:TJUSLS_China/Attributions">Attributions</a> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </div> | ||
</div> | </div> | ||
| + | </div> | ||
</div> | </div> | ||
<div id="outerdiv" | <div id="outerdiv" | ||
| − | + | style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.9);"> | |
| − | + | <div>Close</div> | |
| − | + | <img id="bigimg" | |
| − | + | style="height: auto;width: 90%;border: 0;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" | |
| − | + | src="" /> | |
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<body data-spy="scroll" data-target=".navbar" class="has-loading-screen" data-bg-parallax="scroll" | <body data-spy="scroll" data-target=".navbar" class="has-loading-screen" data-bg-parallax="scroll" | ||
| − | + | data-bg-parallax-speed="3"> | |
| − | <section class="ts-page-wrapper" id="page-top" style="margin-top: -2px;"> | + | <section class="ts-page-wrapper" id="page-top" style="margin-top: -2px;"> |
<section class="py-7 py-md-0 bg-hero" | <section class="py-7 py-md-0 bg-hero" | ||
| − | + | style="background-image: url('https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--headpic-design.jpg')" | |
| − | + | id="home"> | |
| − | + | <div class="container"> | |
| − | + | <div class="row vh-md-100"> | |
| − | + | <div class="col-md-7 mx-auto my-auto text-center" style="text-align: center"> | |
| − | + | <h1 style="color: white;border:none;font-size: 5.75rem;font-weight: 700;height:100%;padding-top: 15%">Design | |
| − | + | </h1> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | </div> | ||
| + | <div class="cover-arrow bounce d-none d-md-block"> | ||
| + | <a href="#Overview" class="page-scroll"><em class="text-white" data-feather="chevrons-down"></em></a> | ||
| + | </div> | ||
</section> | </section> | ||
<main id="ts-content"> | <main id="ts-content"> | ||
| − | + | <!--OVERVIEW ****************************************************************************************--> | |
| − | + | <section id="Overview" class="ts-block text-center"> | |
| − | + | <div class="container"> | |
| − | + | <div class="ts-title"> | |
| − | + | <h2>Overview</h2> | |
| − | + | </div> | |
| − | + | <div class="row"> | |
| − | + | <div class="col-sm-6 col-md-6 col-xl-6"> | |
| − | + | <figure data-animate="ts-fadeInUp" data-delay="0.1s"> | |
| − | + | <figure class="icon mb-5 p-2"> | |
| − | + | <img src="https://2019.igem.org/wiki/images/b/b9/T--TJUSLS_China--icon-lcd-chart.png" alt=""> | |
| − | + | <div class="ts-svg ts-svg__organic-shape-02" data-animate="ts-zoomInShort"></div> | |
| − | + | </figure> | |
| − | + | <h4>Issues</h4> | |
| − | + | <p> | |
| − | + | Since antibiotic-resistant bacteria producing beta-lactamases spread widely around the world, it is | |
| − | + | urgently needed to find novel therapies against diseases related to beta-lactamases. Compared with | |
| − | + | design and synthesis from beginning of new compounds which can be used in beta-lactam/beta-lactamase | |
| − | + | inhibitors antibiotic-resistant drugs, to find naturally existing inhibitors is a faster way. | |
| − | + | </p> | |
| − | + | </figure> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <!--end col-xl-4--> | |
| − | + | <div class="col-sm-6 offset-sm-6 col-md-6 offset-md-0 col-xl-6"> | |
| − | + | <figure data-animate="ts-fadeInUp" data-delay="0.2s"> | |
| − | <div class=" | + | <figure class="icon mb-5 p-2"> |
| − | + | <img src="https://2019.igem.org/wiki/images/0/0a/T--TJUSLS_China--icon-cup-winner.png" alt=""> | |
| − | + | <div class="ts-svg ts-svg__organic-shape-03" data-animate="ts-zoomInShort"></div> | |
| − | + | </figure> | |
| − | + | <h4>Solutions</h4> | |
| − | + | <p> | |
| − | + | Some new-type fluorescent probes have been reported in assays detecting beta-lactamases. Now that it | |
| − | + | can reflect the activity of beta-lactamases, fluorescent intensity would decrease as soon as extent | |
| − | + | inhibitors compounds play roles. Thus it performs a direct way to high-throughput screen potential | |
| − | + | inhibitors of metallo-beta-lactamases. Based on synthetic biology methods, we design our parts to | |
| − | + | realize our project goals, including inhibitors screening and assessment. | |
| − | + | </p> | |
| − | + | </figure> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | </section> | + | </div> |
| − | + | </div> | |
| − | <div class=" | + | </section> |
| − | + | <!--END OVERVIEW ************************************************************************************--> | |
| − | + | <section id="G-C-D" class="ts-block"> | |
| − | + | <div class="container"> | |
| + | <div class="ts-title"> | ||
| + | <h4>How to obtain our target metallo-beta-lactamases</h4> | ||
| + | <h2>Genetic Circuit Design</h2> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100"> | ||
| + | <div style="margin-bottom: 20px" class="row"> | ||
| + | <img src="https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--Circuit.jpg" style="padding: 0;" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3"> | ||
| + | </div> | ||
| + | <h4>Principles</h4> | ||
| + | <p> | ||
| + | The very first step of our project is to attain the protein, that is to say, to build gene expression | ||
| + | circuits, consisting of promoter, tag, target sequence, and other necessary parts. | ||
| + | <br> | ||
| + | <div style="margin-bottom: 20px" class="row"> | ||
| + | <img src="https://2019.igem.org/wiki/images/b/b4/T--TJUSLS_China--Circuit2.jpg" style="padding: 0;" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3"> | ||
</div> | </div> | ||
| − | + | </p> | |
| − | + | <p> | |
| − | + | After conducting a series of permutation and combination, we used our expression system engineering | |
| − | + | bacteria E.coli to assess fitness of circuits on whether the circuit can express the protein smoothly, | |
| − | + | whether the protein form an inclusion body, whether the protein has considerable enzyme activity and | |
| − | + | so | |
| − | + | on. In this way we can find the most adaptive circuit. | |
| − | + | </p> | |
| − | + | <h4>Iterations</h4> | |
| − | + | <p> | |
| − | + | After we tested circuits made up of only T7 promotor, His tag and beta-lactamase, we disappointedly | |
| − | + | found | |
| − | + | the effect unsatisfactory. The expression quantity is too low to take further purification or the | |
| − | + | protein all become inclusion body. Through our analysis, we discover we probably need a tag which | |
| − | + | improves dissolution or stimulates expression quantity. | |
| − | + | <br> | |
| − | + | <div style="margin-bottom: 20px" class="row"> | |
| − | + | <img src="https://2019.igem.org/wiki/images/6/69/T--TJUSLS_China--Circuit3.jpg" style="padding: 0;" | |
| − | + | class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | </p> | |
| − | + | <h4>Test</h4> | |
| − | + | <p> | |
| − | + | The way to test circuits is to transform them into E.coli engineering bacteria to find out if it can | |
| − | + | work appropriately. A successful circuit can perform and provide soluble target protein to us, | |
| − | + | however, | |
| − | + | most circuits and expression system mismatch so they are not able to produce useful protein then | |
| − | + | iterations exist. The “proteinality” matters. | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div | + | </section> |
| − | < | + | <section id="E-F-H-S" class="ts-block" style="padding-bottom: 0; background-color: #eee;"> |
| − | + | <div class="container"> | |
| − | + | <div class="ts-title"> | |
| − | + | <h4>How to find arrows targeting MBLs</h4> | |
| − | + | <h2>Establishment of Fluorescent HTS system</h2> | |
| − | + | </div> | |
| − | + | <div class="row"> | |
| − | + | <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100"> | |
| − | + | <h3>Principles</h3> | |
| + | <h5>Mechanism of Fluorescent Probe CDC-1<sup>[1]</sup></h5> | ||
| + | <div style="margin-bottom: 20px" class="row"> | ||
| + | <img src="https://2019.igem.org/wiki/images/5/5c/T--TJUSLS_China--Probe.jpg" style="padding: 0;" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-8 col-md-8 offset-md-2" id="Probe"> | ||
| + | </div> | ||
| + | <p> | ||
| + | Consisting of three parts, CDC-1 is a extend-spectrum fluorescent probe which can be used for | ||
| + | reflecting | ||
| + | the role of beta-lactamases. A lactam ring is designed as the hydrolyze site, a --CH2 plays the role | ||
| + | as | ||
| + | a bridge and an umbelliferone as the activatable fluorophore when hydrolyzing based on FRET. | ||
| + | <br> | ||
| + | According to reports[2], there are several detecting substrate that have been designed, specifically | ||
| + | and | ||
| + | extend-spectrally. Due to what we’ve chosen to express are subclass B1 and B3 beta-lactamases, CDC-1 | ||
| + | is | ||
| + | suitable to detect in HTS system. | ||
| + | <br> | ||
| + | </p> | ||
| + | <h5>Pre-experiment</h5> | ||
| + | <p> | ||
| + | The very first thing in the process of HTS system establishment is to determine suitable enzyme | ||
| + | concentration. When screening, a 96-well plate is used so that the reaction speed should not be fast | ||
| + | in | ||
| + | order to guarantee reaction holds on after mixing all wells. Also, in order to calculate the initial | ||
| + | velocity, the relationship of fluorescent intensity and time should be linear. Last but not least, | ||
| + | values of fluorescent intensity should not be very small to provide more accurate results. | ||
| + | <br> | ||
| + | So in order to explore the proper concentration of enzyme, we set 3 dilute gradients for large span. | ||
| + | Then around the most fit one set more gradients for smaller span and plot the fluorescent | ||
| + | intensity–time | ||
| + | curve. All assays are repeated in triplicate at room temperature(around 25°C) and the baseline of | ||
| + | blank | ||
| + | controls is subtracted. | ||
| + | </p> | ||
</div> | </div> | ||
| − | <div class=" | + | </div> |
| + | </div> | ||
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100"> | ||
| + | <h5>N+N-1 Principle</h5> | ||
| + | <p>Buffer condition is also a key component in HTS system, owing to its huge effect on enzyme activity. | ||
| + | After collecting and reading articles about purification of beta-lactamases, we choose PBS as MBLs’ | ||
| + | reaction circumstance. Also, we added Zn2+ into system as MBLs depends on it. | ||
| + | However, the concentration of each component should be optimized. | ||
| + | Therefore, this is a multivariate experiment. All the experimental test groups are designed following | ||
| + | the “N+N-1” rule, avoiding setting unnecessary groups.<sup>[1]</sup> | ||
| + | <br> | ||
| + | </p> | ||
| + | <div class="row" style="margin-bottom: 20px"> | ||
| + | <img | ||
| + | src="https://2019.igem.org/wiki/images/e/e1/T--TJUSLS_China--chart.png" style="padding: 0;" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3"> | ||
| + | </div> | ||
| + | <p style="text-align: center"> | ||
| + | Chart 1 Experimental groups of buffer conditions | ||
| + | <br> | ||
| + | *means standard value, the concentration of NDM-23 is relevant to EC80 value(see this part in Test), | ||
| + | NaCl and pH value | ||
| + | is relevant to PBS solution and Zn2+ is relevant to reports. | ||
| + | </p> | ||
| + | <h3>Test</h3> | ||
| + | <h5>Index for determination of enzyme concentration: R<sup>2</sup>, EC<sub>80</sub></h5> | ||
| + | <p> | ||
| + | In order to calculate the initial velocity, the relationship of fluorescent intensity and time should | ||
| + | be | ||
| + | linear fit. <strong>R<sup>2</sup></strong> (Coefficient of determination) is computed as a value | ||
| + | between | ||
| + | 0 and 1. The higher the | ||
| + | value, the better the linear fit. | ||
| + | <br> | ||
| + | Values of fluorescent intensity should not be very small to provide more accurate results. | ||
| + | When testing in different enzyme concentrations, calculate fluorescent rE (rate of Emission), plot rE | ||
| + | with log[E] then get the value of EC<sub>80</sub>. Choose the concentration which is most close to | ||
| + | EC<sub>80</sub> value. | ||
| + | <br> | ||
| + | <h5>Index for determination of substrate concentration: Km, kcat</h5> | ||
<p> | <p> | ||
| − | + | With CDC-1 as a substrate, we will measure the kinetic parameters of metallo-beta-lactamases by | |
| − | + | Michaelis-Menten plots and Lineweaver-Burk plots and the Michaelis-constant (Km) and catalytic | |
| − | + | constants (kcat) are determined. The catalytic efficiency (kcat/Km) of MBLs will be calculated. | |
| + | These | ||
| + | data confirm the high efficiency of these enzymes in promoting the hydrolysis of CDC-1, which | ||
| + | guarantees a high detection sensitivity of CDC-1. | ||
| + | <br> | ||
| + | Additionally, when testing Km constants the concentration of substrate is 8.5μM due to storage | ||
| + | necessity. And its value should less than or equal to Km value in HTS system to ensure a mixed order | ||
| + | reaction. | ||
</p> | </p> | ||
| − | + | <h5>Index for entire screening system: Z'-factor<sup>[4]</sup></h5> | |
| − | + | ||
<p> | <p> | ||
| − | + | In order to validate the stability and reliability of this HTS system, a factor called Z’-factor is | |
| − | + | introduced to assess. It is a relative index to distinguish the target signal with background | |
| − | + | groups. | |
| − | + | The range of Z’-factor can be less than zero to 1. If it is more than 0.5, it indicates that this | |
| + | model can be applied in high-throughput screening. <sup>[5]</sup> | ||
| + | <br> | ||
| + | Equation 1. How to calculate Z’-factor<sup>[4]</sup> | ||
</p> | </p> | ||
| + | <div class="row" style="margin-bottom: 20px"><img | ||
| + | src="https://2019.igem.org/wiki/images/b/b2/T--TJUSLS_China--equation1.png" style="padding: 0;" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3"></div> | ||
</div> | </div> | ||
| + | </div> | ||
</div> | </div> | ||
| + | </section> | ||
| + | <section id="M-I-C" class="ts-block" style="padding-bottom: 0; background-color: #fff;"> | ||
| + | <div class="container"> | ||
| + | <div class="ts-title"> | ||
| + | <h4>How to evaluate the role of arrows</h4> | ||
| + | <h2>Methods to evaluate therapeutic effects</h2> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100"> | ||
| + | <p> | ||
| + | We will examine whether the antibiotic is hydrolyzed by beta-lactamase by UV-vis spectroscopy. According | ||
| + | to the degree of decomposition of cefazolin, the inhibition rate of the corresponding inhibitor was | ||
| + | calculated, and the IC<sub>50</sub> of the inhibitor combined with cefazolin in the condition of live | ||
| + | bacteria was | ||
| + | obtained through the inhibition rate, so as to evaluate the therapeutic effect of dual drug combination. | ||
| + | </p> | ||
| + | <h3>Principles</h3> | ||
| + | <h5> | ||
| + | UV-vis spectroscopy | ||
| + | </h5> | ||
| + | <p> | ||
| + | Beta-lactam antibiotics inhibit bacterial cell wall formation by binding to the bacterial transpeptidase | ||
| + | via the c-n bond on the beta-lactam ring. beta-lactamase hydrolyzes the C-N bond of the beta-lactam ring | ||
| + | causing antibiotics to fail. The result of hydrolyzing cephalosporins is a decrease of the absorption | ||
| + | characteristic of the C–N bond (typically at ~260 nm), which can be observed by UV-Vis spectroscopy. We | ||
| + | take advantage of this spectroscopic change to determine if the antibiotic is broken down. | ||
| + | <sup>[6]</sup> | ||
| + | </p> | ||
| + | <div class="row"> | ||
| + | <img src="https://2019.igem.org/wiki/images/6/65/T--TJUSLS_China--UV-visspectroscopy.jpg" alt="" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-md-6 col-lg-6" style="margin-bottom: 20px"> | ||
| + | </div> | ||
| + | <h5>Determination of antibiotic concentration and bacterial solution concentration in the reaction system | ||
| + | </h5> | ||
| + | <p> | ||
| + | We chose 250 μM of cefazolin, because the peak concentration of cefazolin in human serum is 250 μM, and | ||
| + | using this value | ||
| + | can make our evaluation of therapeutic effect closer to human condition. <sup>[7]</sup> the same time, | ||
| + | we conducted orthogonal | ||
| + | experiments on the induction time and concentration of bacterial strain, used EDTA as a positive control | ||
| + | to test the | ||
| + | decomposition capacity of bacterial strain, measured the IC<sub>50</sub> value of EDTA<sup>[8]</sup>, | ||
| + | and compared it with the literature | ||
| + | value of the drug-resistant strain producing beta-lactamase naturally, and selected the determination | ||
| + | condition closer | ||
| + | to the literature value as the standard for the preparation of bacterial solution. | ||
| + | </p> | ||
| + | <div class="row"> | ||
| + | <img src="https://2019.igem.org/wiki/images/f/f8/T--TJUSLS_China--design-add.jpg" alt="" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-md-5 col-lg-5" style="margin-bottom: 20px"> | ||
| + | </div> | ||
| + | |||
| + | <h5>Negative and Blank Controls</h5> | ||
| + | <p> | ||
| + | To ensure the accuracy, we designed the following experiment as controls. | ||
| + | <br> | ||
| + | 1. The extracted beta-lactamase protein was mixed with antibiotics, and the absorbance value of the | ||
| + | specific absorption peak obtained by the antibiotics was continuously measured to see whether there was | ||
| + | a trend of decrease. | ||
| + | <br> | ||
| + | 2. E. coli with the MBL gene was mixed with antibiotics and specific absorption peaks of antibiotics | ||
| + | were determined to demonstrate the expression and function of beta-lactamase in E. coli. | ||
| + | <br> | ||
| + | 3. E. coli without the beta-lactamase gene and the buffer used to prepare Escherichia coli suspension | ||
| + | was mixed with the antibiotics separately and specific absorption peaks of the antibiotics were | ||
| + | continuously determined to prove that beta-lactamase broke down the antibiotics. | ||
| + | <br> | ||
| + | 4. We mixed several lactam and non-lactam kinds of antibiotics with E. coli strains that had transferred | ||
| + | with beta-lactamase separately, and determined the specific absorption peaks of each antibiotic to prove | ||
| + | that our enzyme was indeed beta-lactamase. | ||
| + | </p> | ||
| + | <h3>Test</h3> | ||
| + | <h5>Index for assessment of inhibitory ability: IC<sub>50</sub></h5> | ||
| + | <p> | ||
| + | Different concentrations of inhibitors were added into system to plot the curve of inhibitory rate to | ||
| + | log[I]. In vitro, substrate CDC-1 was still used in system to demonstrate the change of fluorescent | ||
| + | intensity. However, the initial value and final value of absorbance displayed by antibiotics were | ||
| + | calculated to show the change of absorbance value using Nanodrop microspectrophotometer in vivo. | ||
| + | <sup>[9]</sup> | ||
| + | </p> | ||
| + | <div class="row"> | ||
| + | <img src="https://2019.igem.org/wiki/images/f/f5/T--TJUSLS_China--equation2.png" | ||
| + | class="mw-100 ts-shadow__lg ts-border-radius__md col-md-6 col-lg-6" style="margin-bottom: 20px"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </section> | ||
| + | <!-- end mic --> | ||
| + | |||
| + | <!-- REFERENCE *******************************************************************************************--> | ||
| + | <section id="References" class="ts-block ts-separate-bg-element"> | ||
| + | <div class="container"> | ||
| + | <div class="ts-title"> | ||
| + | <h2>Reference</h2> | ||
| + | </div> | ||
| + | <p> | ||
| + | [1] Assay Platform for Clinically Relevant Metallo-beta-lactamases. Sander S. van Berkel, Jürgen Brem, Anna | ||
| + | M. | ||
| + | Rydzik, Ramya Salimraj, Ricky Cain, Anil Verma, Raymond J. Owens, Colin W. G. Fishwick, James Spencer, and | ||
| + | Christopher J. Schofield. Journal of Medicinal Chemistry 2013 56 (17), 6945-6953 | ||
| + | <br> | ||
| + | [2] Xiana Qian, Shuangzhan Zhang, Shuyuan Xue, Wuyu Mao, Minqiu Xu, Weipan Xu, Hexin Xie. A | ||
| + | carbapenem-based | ||
| + | fluorescence assay for the screening of metallo-beta-lactamase inhibitors. Bioorganic & Medicinal Chemistry | ||
| + | Letters. Volume 29, Issue 2, 2019:322-325. | ||
| + | <br> | ||
| + | [3] Sun, & Tung-Tien. (2004). Opinion: excessive trust in authorities and its influence on experimental | ||
| + | design. Nature Reviews Molecular Cell Biology, 5(7), 577-581. | ||
| + | <br> | ||
| + | [4] Zhang, J.-H., Chung, T. D. Y., & Oldenburg, K. R. (1999). A Simple Statistical Parameter for Use in | ||
| + | Evaluation and Validation of High Throughput Screening Assays. Journal of Biomolecular Screening, 4(2), | ||
| + | 67–73. | ||
| + | <br> | ||
| + | [5] Wang Si-wen, Chen Xiang-dong, Wang Hui et al. Establishment of high-throughput screening model for | ||
| + | β-lactamase inhibitor. Chinese Journal of Antibiotics. 2013, 38(2):102-105. | ||
| + | <br> | ||
| + | [6] Ke-Wu Yang, Yajun Zhou, Ying Ge and Yuejuan Zhang, Real-time activity monitoring of New Delhi | ||
| + | metallo-b-lactamase-1 in living bacterial cells by UV-Vis spectroscopy,Chem. Commun., 2017, 53, 8014--8017 | ||
| + | <br> | ||
| + | [7] T.Li,Q.Wang,F.Chen,X.Li,S.Luo,H.Fang,D.Wang,Z.Li,X.Hou and H. Wang, PLoS One, 2013, 8, e61914. | ||
| + | <br> | ||
| + | [8] J. Ma, S. McLeod, K. MacCormack, S. Sriram, N. Gao, A. L. Breeze and J. Hu, Angew. Chem., Int. Ed., | ||
| + | 2014, 53, 2130. | ||
| + | <br> | ||
| + | [9] C. Dalvit, E. Ardini, G. P. Fogliatto, N. Mongelli and M. Veronesi, Drug Discov. Today, 2004, 9, | ||
| + | 595−602. | ||
| + | </p> | ||
| + | </div> | ||
| + | </section> | ||
| + | </main> | ||
| + | <div class="footer"> | ||
| + | <div id="hui1"> | ||
| + | <img id="xiaohui" src="https://2019.igem.org/wiki/images/f/f6/T--TJUSLS_China--Attr-5%282%29.png" alt=""> | ||
| + | </div> | ||
| + | <div id="hui2"> | ||
| + | <img id="yuanhui" src="https://2019.igem.org/wiki/images/9/98/T--TJUSLS_China--Attr-6_3.png" alt=""> | ||
| + | </div> | ||
| + | <div class="ctu" align="center"> | ||
| + | <h5 style="font-weight: bold;">CONTACT US</h5> | ||
| + | <hr width="50%"> | ||
| + | </div> | ||
| + | <div style="margin: 0 auto;"> | ||
| + | <div class="ctus" style="text-align: center"> | ||
| + | |||
| + | </div> | ||
| + | <div class="ctus" style="text-align: center"> | ||
| + | <p> | ||
| + | <img src="https://2019.igem.org/wiki/images/b/b8/T--TJUSLS_China--Attr-email.png" alt=""> EMAIL | ||
| + | <br /> | ||
| + | tju2019igem@163.com | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="ctus" style="text-align: center"> | ||
| + | <p> | ||
| + | <img src="https://2019.igem.org/wiki/images/4/4c/T--TJUSLS_China--Attr-addressl.png" | ||
| + | alt=""> ADDRESS | ||
| + | <br /> | ||
| + | No.92 Weijin Road, Nankai District, Tianjin, China | ||
| + | </p> | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
<!--end #footer--> | <!--end #footer--> | ||
| − | </section> | + | </section> |
| − | <!--end page--> | + | <!--end page--> |
| − | <div id="totop" style="text-decoration: none"> | + | <div id="totop" style="text-decoration: none"> |
| − | <a href="javascript:;" id="btn2"style="font-size: 25px;color: white;text-decoration: none">↑</a> | + | <a href="javascript:;" id="btn2" style="font-size: 25px;color: white;text-decoration: none">↑</a> |
| − | </div> | + | </div> |
| − | <script type="text/javascript"> | + | <script type="text/javascript"> |
// 1.找到页面中的按钮 | // 1.找到页面中的按钮 | ||
var totop = document.getElementById("totop"); | var totop = document.getElementById("totop"); | ||
| Line 1,313: | Line 1,318: | ||
// 2.给按钮绑定点击事件 | // 2.给按钮绑定点击事件 | ||
totop.onclick = function () { | totop.onclick = function () { | ||
| − | + | // 周期性定时器 | |
| − | + | timer = setInterval(function () { | |
| − | + | // 3.获取滚动条距离浏览器顶端的距离 | |
| − | + | var backTop = document.documentElement.scrollTop || document.body.scrollTop; | |
| − | + | // 越滚越慢 | |
| − | + | var speedTop = backTop / 5; | |
| − | + | document.documentElement.scrollTop = backTop - speedTop; | |
| − | + | if (backTop == 0) { | |
| − | + | clearInterval(timer); | |
| − | + | } | |
| − | + | }, 30); | |
} | } | ||
| − | </script> | + | </script> |
| − | <script> | + | <script> |
if (document.getElementsByClassName("ts-full-screen").length) { | if (document.getElementsByClassName("ts-full-screen").length) { | ||
| − | + | document.getElementsByClassName("ts-full-screen")[0].style.height = window.innerHeight + "px"; | |
} | } | ||
| − | </script> | + | </script> |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/assets/js/jqueryminjs?action=raw&ctype=text/javascript"></script> | |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/bootstrapmin400js?action=raw&ctype=text/javascript"></script> | |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/imagesloadedpkgdminjs?action=raw&ctype=text/javascript"></script> | |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/isinviewportjqueryjs?action=raw&ctype=text/javascript"></script> | |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/scrollajqueryminjs?action=raw&ctype=text/javascript"></script> | |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/jqueryvalidateminjs?action=raw&ctype=text/javascript"></script> | |
| − | <script type="text/javascript" | + | <script type="text/javascript" |
| − | + | src="https://2019.igem.org/Team:TJUSLS_China/designcustomjs?action=raw&ctype=text/javascript"></script> | |
| − | <script> | + | <script> |
$(document).ready(function () { | $(document).ready(function () { | ||
| − | + | $(window).scrollTop(0); | |
| − | + | $('#toOverview').click(function () { | |
| − | + | $("html,body").animate({ scrollTop: $("#Overview").offset().top - 80 }, 400); | |
| − | + | }) | |
| − | + | $('#toGCD').click(function () { | |
| − | + | $("html,body").animate({ scrollTop: $("#G-C-D").offset().top - 80 }, 400); | |
| − | + | }) | |
| − | + | $('#toEFHS').click(function () { | |
| − | + | $("html,body").animate({ scrollTop: $("#E-F-H-S").offset().top - 80 }, 400); | |
| − | + | }) | |
| − | + | $('#toMETE').click(function () { | |
| − | + | $("html,body").animate({ scrollTop: $("#M-I-C").offset().top - 80 }, 400); | |
| − | + | }) | |
| − | + | $('#toReferences').click(function () { | |
| − | + | $("html,body").animate({ scrollTop: $("#References").offset().top - 80 }, 400); | |
| − | + | }) | |
}); | }); | ||
| − | </script> | + | </script> |
| + | <script> | ||
| + | //图片放大 | ||
| + | $("#outerdiv").hide(); | ||
| + | $(function () { | ||
| + | $("img").each(function () { | ||
| + | var id = $(this).attr("id"); | ||
| + | if (id === "Probe") { | ||
| + | $(this).mouseover(function () { | ||
| + | $(this).css("cursor", "pointer"); | ||
| + | }); | ||
| + | $(this).click(function () { | ||
| + | var _this = $(this);//将当前的pimg元素作为_this传入函数 | ||
| + | imgShow("#outerdiv", "#bigimg", _this); | ||
| + | }); | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | function imgShow(outerdiv, bigimg, _this) { | ||
| + | var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 | ||
| + | $("#outerdiv").attr("display", "block"); | ||
| + | $("#bigimg").attr("src", src);//设置#bigimg元素的src属性 | ||
| + | $("#outerdiv").fadeIn("fast"); | ||
| + | $("#outerdiv").click(function () {//再次点击淡出消失弹出层 | ||
| + | $(this).fadeOut("fast"); | ||
| + | }); | ||
| + | } | ||
| + | </script> | ||
</body> | </body> | ||
<script src="https://2019.igem.org/Team:TJUSLS_China/improve/jquery321js?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Team:TJUSLS_China/improve/jquery321js?action=raw&ctype=text/javascript"></script> | ||
| − | |||
<script src="https://2019.igem.org/Team:TJUSLS_China/improve/featherjs?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Team:TJUSLS_China/improve/featherjs?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2019.igem.org/Team:TJUSLS_China/improve/bootstrapjs?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Team:TJUSLS_China/improve/bootstrapjs?action=raw&ctype=text/javascript"></script> | ||
Revision as of 16:21, 21 October 2019
Reference
Methods to evaluate therapeutic effects
Establishment of Fluorescent HTS system
Genetic Circuit Design
Overview
Close
Design
Overview
Issues
Since antibiotic-resistant bacteria producing beta-lactamases spread widely around the world, it is urgently needed to find novel therapies against diseases related to beta-lactamases. Compared with design and synthesis from beginning of new compounds which can be used in beta-lactam/beta-lactamase inhibitors antibiotic-resistant drugs, to find naturally existing inhibitors is a faster way.
Solutions
Some new-type fluorescent probes have been reported in assays detecting beta-lactamases. Now that it can reflect the activity of beta-lactamases, fluorescent intensity would decrease as soon as extent inhibitors compounds play roles. Thus it performs a direct way to high-throughput screen potential inhibitors of metallo-beta-lactamases. Based on synthetic biology methods, we design our parts to realize our project goals, including inhibitors screening and assessment.
How to obtain our target metallo-beta-lactamases
Genetic Circuit Design
Principles
The very first step of our project is to attain the protein, that is to say, to build gene expression
circuits, consisting of promoter, tag, target sequence, and other necessary parts.
After conducting a series of permutation and combination, we used our expression system engineering bacteria E.coli to assess fitness of circuits on whether the circuit can express the protein smoothly, whether the protein form an inclusion body, whether the protein has considerable enzyme activity and so on. In this way we can find the most adaptive circuit.
Iterations
After we tested circuits made up of only T7 promotor, His tag and beta-lactamase, we disappointedly
found
the effect unsatisfactory. The expression quantity is too low to take further purification or the
protein all become inclusion body. Through our analysis, we discover we probably need a tag which
improves dissolution or stimulates expression quantity.
Test
The way to test circuits is to transform them into E.coli engineering bacteria to find out if it can work appropriately. A successful circuit can perform and provide soluble target protein to us, however, most circuits and expression system mismatch so they are not able to produce useful protein then iterations exist. The “proteinality” matters.
How to find arrows targeting MBLs
Establishment of Fluorescent HTS system
Principles
Mechanism of Fluorescent Probe CDC-1[1]
Consisting of three parts, CDC-1 is a extend-spectrum fluorescent probe which can be used for
reflecting
the role of beta-lactamases. A lactam ring is designed as the hydrolyze site, a --CH2 plays the role
as
a bridge and an umbelliferone as the activatable fluorophore when hydrolyzing based on FRET.
According to reports[2], there are several detecting substrate that have been designed, specifically
and
extend-spectrally. Due to what we’ve chosen to express are subclass B1 and B3 beta-lactamases, CDC-1
is
suitable to detect in HTS system.
Pre-experiment
The very first thing in the process of HTS system establishment is to determine suitable enzyme
concentration. When screening, a 96-well plate is used so that the reaction speed should not be fast
in
order to guarantee reaction holds on after mixing all wells. Also, in order to calculate the initial
velocity, the relationship of fluorescent intensity and time should be linear. Last but not least,
values of fluorescent intensity should not be very small to provide more accurate results.
So in order to explore the proper concentration of enzyme, we set 3 dilute gradients for large span.
Then around the most fit one set more gradients for smaller span and plot the fluorescent
intensity–time
curve. All assays are repeated in triplicate at room temperature(around 25°C) and the baseline of
blank
controls is subtracted.
N+N-1 Principle
Buffer condition is also a key component in HTS system, owing to its huge effect on enzyme activity.
After collecting and reading articles about purification of beta-lactamases, we choose PBS as MBLs’
reaction circumstance. Also, we added Zn2+ into system as MBLs depends on it.
However, the concentration of each component should be optimized.
Therefore, this is a multivariate experiment. All the experimental test groups are designed following
the “N+N-1” rule, avoiding setting unnecessary groups.[1]
Chart 1 Experimental groups of buffer conditions
*means standard value, the concentration of NDM-23 is relevant to EC80 value(see this part in Test),
NaCl and pH value
is relevant to PBS solution and Zn2+ is relevant to reports.
Test
Index for determination of enzyme concentration: R2, EC80
In order to calculate the initial velocity, the relationship of fluorescent intensity and time should
be
linear fit. R2 (Coefficient of determination) is computed as a value
between
0 and 1. The higher the
value, the better the linear fit.
Values of fluorescent intensity should not be very small to provide more accurate results.
When testing in different enzyme concentrations, calculate fluorescent rE (rate of Emission), plot rE
with log[E] then get the value of EC80. Choose the concentration which is most close to
EC80 value.
Index for determination of substrate concentration: Km, kcat
With CDC-1 as a substrate, we will measure the kinetic parameters of metallo-beta-lactamases by
Michaelis-Menten plots and Lineweaver-Burk plots and the Michaelis-constant (Km) and catalytic
constants (kcat) are determined. The catalytic efficiency (kcat/Km) of MBLs will be calculated.
These
data confirm the high efficiency of these enzymes in promoting the hydrolysis of CDC-1, which
guarantees a high detection sensitivity of CDC-1.
Additionally, when testing Km constants the concentration of substrate is 8.5μM due to storage
necessity. And its value should less than or equal to Km value in HTS system to ensure a mixed order
reaction.
Index for entire screening system: Z'-factor[4]
In order to validate the stability and reliability of this HTS system, a factor called Z’-factor is
introduced to assess. It is a relative index to distinguish the target signal with background
groups.
The range of Z’-factor can be less than zero to 1. If it is more than 0.5, it indicates that this
model can be applied in high-throughput screening. [5]
Equation 1. How to calculate Z’-factor[4]
How to evaluate the role of arrows
Methods to evaluate therapeutic effects
We will examine whether the antibiotic is hydrolyzed by beta-lactamase by UV-vis spectroscopy. According to the degree of decomposition of cefazolin, the inhibition rate of the corresponding inhibitor was calculated, and the IC50 of the inhibitor combined with cefazolin in the condition of live bacteria was obtained through the inhibition rate, so as to evaluate the therapeutic effect of dual drug combination.
Principles
UV-vis spectroscopy
Beta-lactam antibiotics inhibit bacterial cell wall formation by binding to the bacterial transpeptidase via the c-n bond on the beta-lactam ring. beta-lactamase hydrolyzes the C-N bond of the beta-lactam ring causing antibiotics to fail. The result of hydrolyzing cephalosporins is a decrease of the absorption characteristic of the C–N bond (typically at ~260 nm), which can be observed by UV-Vis spectroscopy. We take advantage of this spectroscopic change to determine if the antibiotic is broken down. [6]
Determination of antibiotic concentration and bacterial solution concentration in the reaction system
We chose 250 μM of cefazolin, because the peak concentration of cefazolin in human serum is 250 μM, and using this value can make our evaluation of therapeutic effect closer to human condition. [7] the same time, we conducted orthogonal experiments on the induction time and concentration of bacterial strain, used EDTA as a positive control to test the decomposition capacity of bacterial strain, measured the IC50 value of EDTA[8], and compared it with the literature value of the drug-resistant strain producing beta-lactamase naturally, and selected the determination condition closer to the literature value as the standard for the preparation of bacterial solution.
Negative and Blank Controls
To ensure the accuracy, we designed the following experiment as controls.
1. The extracted beta-lactamase protein was mixed with antibiotics, and the absorbance value of the
specific absorption peak obtained by the antibiotics was continuously measured to see whether there was
a trend of decrease.
2. E. coli with the MBL gene was mixed with antibiotics and specific absorption peaks of antibiotics
were determined to demonstrate the expression and function of beta-lactamase in E. coli.
3. E. coli without the beta-lactamase gene and the buffer used to prepare Escherichia coli suspension
was mixed with the antibiotics separately and specific absorption peaks of the antibiotics were
continuously determined to prove that beta-lactamase broke down the antibiotics.
4. We mixed several lactam and non-lactam kinds of antibiotics with E. coli strains that had transferred
with beta-lactamase separately, and determined the specific absorption peaks of each antibiotic to prove
that our enzyme was indeed beta-lactamase.
Test
Index for assessment of inhibitory ability: IC50
Different concentrations of inhibitors were added into system to plot the curve of inhibitory rate to log[I]. In vitro, substrate CDC-1 was still used in system to demonstrate the change of fluorescent intensity. However, the initial value and final value of absorbance displayed by antibiotics were calculated to show the change of absorbance value using Nanodrop microspectrophotometer in vivo. [9]
Reference
[1] Assay Platform for Clinically Relevant Metallo-beta-lactamases. Sander S. van Berkel, Jürgen Brem, Anna
M.
Rydzik, Ramya Salimraj, Ricky Cain, Anil Verma, Raymond J. Owens, Colin W. G. Fishwick, James Spencer, and
Christopher J. Schofield. Journal of Medicinal Chemistry 2013 56 (17), 6945-6953
[2] Xiana Qian, Shuangzhan Zhang, Shuyuan Xue, Wuyu Mao, Minqiu Xu, Weipan Xu, Hexin Xie. A
carbapenem-based
fluorescence assay for the screening of metallo-beta-lactamase inhibitors. Bioorganic & Medicinal Chemistry
Letters. Volume 29, Issue 2, 2019:322-325.
[3] Sun, & Tung-Tien. (2004). Opinion: excessive trust in authorities and its influence on experimental
design. Nature Reviews Molecular Cell Biology, 5(7), 577-581.
[4] Zhang, J.-H., Chung, T. D. Y., & Oldenburg, K. R. (1999). A Simple Statistical Parameter for Use in
Evaluation and Validation of High Throughput Screening Assays. Journal of Biomolecular Screening, 4(2),
67–73.
[5] Wang Si-wen, Chen Xiang-dong, Wang Hui et al. Establishment of high-throughput screening model for
β-lactamase inhibitor. Chinese Journal of Antibiotics. 2013, 38(2):102-105.
[6] Ke-Wu Yang, Yajun Zhou, Ying Ge and Yuejuan Zhang, Real-time activity monitoring of New Delhi
metallo-b-lactamase-1 in living bacterial cells by UV-Vis spectroscopy,Chem. Commun., 2017, 53, 8014--8017
[7] T.Li,Q.Wang,F.Chen,X.Li,S.Luo,H.Fang,D.Wang,Z.Li,X.Hou and H. Wang, PLoS One, 2013, 8, e61914.
[8] J. Ma, S. McLeod, K. MacCormack, S. Sriram, N. Gao, A. L. Breeze and J. Hu, Angew. Chem., Int. Ed.,
2014, 53, 2130.
[9] C. Dalvit, E. Ardini, G. P. Fogliatto, N. Mongelli and M. Veronesi, Drug Discov. Today, 2004, 9,
595−602.
CONTACT US
EMAIL
tju2019igem@163.com
ADDRESS
No.92 Weijin Road, Nankai District, Tianjin, China