Difference between revisions of "Team:CPU CHINA/Team"

(Prototype team page)
 
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
<html lang="en">
−
{{CPU_CHINA}}
+
−
<html>
+
  
−
<div class="column two_thirds_size" >
+
<head>
 +
    <meta charset="UTF-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <link rel="stylesheet"
 +
        href="https://2017.igem.org/wiki/index.php?title= Template:SCU_China/default_CSS &action=raw&ctype=text/css">
 +
    <link rel="stylesheet"
 +
        href="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/reset_CSS &action=raw&ctype=text/css">
 +
    <link rel="stylesheet"
 +
        href="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/common_CSS &action=raw&ctype=text/css">
 +
    <style>
 +
        #header #title {
 +
            left: 30%;
 +
        }
  
−
<h1>Team</h1>
+
        #contain .label {
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
            margin: 0;
 +
        }
  
 +
        #contain .label .line {
 +
            display: block;
 +
            padding: 1%;
 +
            text-align: center;
 +
            white-space: nowrap;
 +
            overflow-x: scroll;
 +
        }
  
−
<h3>What should this page contain?</h3>
+
        /* 滚动条宽度 */
−
<ul>
+
        #contain .label .line::-webkit-scrollbar {
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
            height: 3px;
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
        }
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
  
−
<p><b>Important:</b> Your wiki pages will be archived at the end of the iGEM season and this content will remain online. Please keep this in mind as you post photos and personal information on this page.</p> 
+
        /* 滚动条轨道 */
−
</div>
+
        #contain .label .line::-webkit-scrollbar-track {
 +
            background: #FFFFFF;
 +
            border-radius: 10px;
 +
        }
  
 +
        /* 小滑块 */
 +
        #contain .label .line::-webkit-scrollbar-thumb {
 +
            background: #c5daee49;
 +
            border-radius: 10px;
 +
            width: 5px;
 +
        }
  
 +
        #contain .label .line::-webkit-scrollbar-thumb:hover {
 +
            background: #41a0ff;
 +
        }
  
−
<div class="column third_size" >
+
        /* 选择圈 */
−
<div class="highlight decoration_A_full">
+
        #contain .label li {
−
<h3>Inspiration</h3>
+
            margin: 0 2px;
−
<p>You can look at what other teams did to get some inspiration! <br />
+
            display: inline-block;
−
Here are a few examples:</p>
+
            width: 12vmin;
−
<ul>
+
            height: 12vmin;
 +
            border: 3px solid #C6C6C6;
 +
            border-radius: 50%;
 +
            line-height: 12vmin;
 +
            font-family: "MONTSERRAT-BLACKITALIC2";
 +
            font-size: 1.2em;
 +
            font-weight: bolder;
 +
            -webkit-text-fill-color: #FFFFFF;
 +
            -webkit-text-stroke: 0.6px #5f5f5f;
 +
        }
  
−
<li><a href="https://2019.igem.org/Team:CU/Team">2019 CU</a></li>
+
        #contain .label .addClass {
−
<li><a href="https://2019.igem.org/Team:UANL/Team">2019 UANL</a></li>
+
            background-color: #0072FE;
−
<li><a href="https://2019.igem.org/Team:William_and_Mary/Team">2019 William and Mary</a></li>
+
            -webkit-text-stroke: 0.3px #FFFFFF;
 +
        }
  
−
<li><a href="https://2020.igem.org/Team:BOKU-Vienna/Team">2020 BOKU Vienna </a></li>
+
        #contain .card {
−
<li><a href="https://2020.igem.org/Team:CAU_China/Team_Member">2020 CAU China</a></li>
+
            position: relative;
−
<li><a href="https://2020.igem.org/Team:Lethbridge/Members">2020 Lethbridge</a></li>
+
            display: block;
 +
            margin: 1% 0;
 +
        }
 +
 
 +
        #contain .card .presentation {
 +
            position: absolute;
 +
            padding: 2%;
 +
            left: 17%;
 +
            background-color: #fcfdffd9;
 +
            border: 2.5px solid #EDEDED;
 +
            border-radius: 50px;
 +
            width: 65%;
 +
            z-index: 2;
 +
        }
 +
 
 +
        /* 头像 */
 +
        #contain .card .presentation .head-portrait {
 +
            float: left;
 +
            margin: 2%;
 +
            width: 45vmin;
 +
            height: 45vmin;
 +
            border-radius: 50%;
 +
            background-color: #FFFFFF;
 +
        }
 +
 
 +
        #contain .card .presentation .head-portrait img {
 +
            width: 45vmin;
 +
            height: 45vmin;
 +
            border: 2px solid #D9D9D9;
 +
            border-radius: 50%;
 +
        }
 +
 
 +
        /* 文字介绍 */
 +
        #contain .card .presentation .describe {
 +
            float: left;
 +
            width: 55%;
 +
        }
 +
 
 +
        /* 名字 */
 +
        #contain .card .presentation #name {
 +
            margin: 3% 0;
 +
            line-height: normal;
 +
            font-family: "MONTSERRAT-BLACKITALIC2";
 +
            font-size: 3em;
 +
            font-weight: bolder;
 +
            color: #212121;
 +
            overflow: visible;
 +
        }
 +
 
 +
        /* 职位 */
 +
        #contain .card .presentation #post {
 +
            padding: 0;
 +
            line-height: normal;
 +
            font-family: CABIN-ITALIC;
 +
            font-size: 2em;
 +
            color: #0072FE;
 +
            overflow: visible;
 +
        }
 +
 
 +
        /* 专业 */
 +
        #contain .card .presentation #major {
 +
            padding: 0;
 +
            line-height: normal;
 +
            text-align: left;
 +
            font-family: CABIN-ITALIC;
 +
            font-size: 2em;
 +
            color: #424242;
 +
            overflow: visible;
 +
        }
 +
 
 +
        /* 宣言 */
 +
        #contain .card .presentation #declaration {
 +
            margin-top: 15%;
 +
            line-height: 1.2em;
 +
            font-size: 1.2em;
 +
            font-family: "CABIN-REGULAR";
 +
        }
 +
 
 +
        #contain .card .drug1 {
 +
            position: absolute;
 +
            top: 1.2in;
 +
            width: 54%;
 +
            z-index: 3;
 +
        }
 +
 
 +
        #contain .card .drug2 {
 +
            position: absolute;
 +
            left: 45%;
 +
            top: 1.2in;
 +
            width: 54%;
 +
            z-index: 1;
 +
        }
 +
 
 +
        #contain #instructor {
 +
            margin-top: 40%;
 +
            display: flex;
 +
            flex-wrap: wrap;
 +
            align-items: center;
 +
            justify-content: center;
 +
        }
 +
 
 +
        #contain .card2 {
 +
            float: left;
 +
            margin: 2%;
 +
            padding: 10px;
 +
            width: 300px;
 +
            height: 170px;
 +
            background-color: #F6F6F6;
 +
            border-radius: 20px;
 +
        }
 +
 
 +
        #contain .card2 .head-portrait2 {
 +
            float: left;
 +
            margin-right: 10px;
 +
            width: 100px;
 +
            height: 100px;
 +
        }
 +
 
 +
        #contain .card2 .head-portrait2 img {
 +
            width: 100px;
 +
            height: 100px;
 +
            border: 2px solid #D9D9D9;
 +
            border-radius: 50%;
 +
        }
 +
 
 +
        #contain .card2 .describe2 {
 +
            float: left;
 +
            width: 160px;
 +
        }
 +
 
 +
        /* 名字 */
 +
        #contain .card2 #name2 {
 +
            margin: 3% 0;
 +
            font-family: "MONTSERRAT-BLACKITALIC2";
 +
            font-size: 1.2em;
 +
            font-weight: bolder;
 +
            color: #212121;
 +
            overflow: visible;
 +
        }
 +
 
 +
        /* 职位 */
 +
        #contain .card2 #post2 {
 +
            padding: 0;
 +
            font-family: CABIN-ITALIC;
 +
            font-size: 1em;
 +
            color: #0072FE;
 +
            overflow: visible;
 +
        }
 +
 
 +
        /* 专业 */
 +
        #contain .card2 #major2 {
 +
            padding: 0;
 +
            text-align: left;
 +
            font-family: CABIN-ITALIC;
 +
            font-size: 1em;
 +
            color: #424242;
 +
            overflow: visible;
 +
        }
 +
 
 +
        /* 宣言 */
 +
        #contain .card2 #declaration2 {
 +
            margin-top: 5%;
 +
            font-size: 0.8em;
 +
            line-height: 1em;
 +
            text-align: left;
 +
            font-family: "CABIN-REGULAR";
 +
        }
 +
 
 +
        #contain #attributions {
 +
            margin-top: 5%;
 +
            text-align: center;
 +
        }
 +
 
 +
        #contain #attributions a {
 +
            width: 45vmin;
 +
            height: 13vmin;
 +
            padding: 1.5% 2%;
 +
            background-color: #0072FE;
 +
            border: none;
 +
            border-radius: 50px;
 +
            font-size: 1.5em;
 +
            color: #FFFFFF;
 +
            font-family: "MONTSERRAT-BLACK1", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
 +
            -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
            -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
            -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
        }
 +
 
 +
        @media screen and (max-width:1200px) {
 +
 
 +
            #contain #instructor {
 +
                margin-top: 90%;
 +
            }
 +
            #contain .card .presentation{
 +
                display: flex;
 +
                justify-content: center;
 +
                align-items: center;
 +
                flex-wrap: wrap;
 +
               
 +
            }
 +
            #contain .card .presentation .describe {
 +
                width: 100%;
 +
            }
 +
 
 +
            #contain .card .presentation #name {
 +
                text-align: center;
 +
            }
 +
 
 +
            #contain .card .presentation #post {
 +
                text-align: center;
 +
            }
 +
 
 +
            #contain .card .presentation #major {
 +
                text-align: center;
 +
            }
 +
 
 +
            #contain .card .presentation #declaration {
 +
                text-align: center;
 +
            }
 +
        }
 +
        @media screen and (max-width:840px){
 +
            #contain #instructor {
 +
                margin-top: 115%;
 +
            }
 +
        }
 +
        @media screen and (max-width:630px) {
 +
            #contain #instructor {
 +
                margin-top: 150%;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width:550px) {
 +
            #contain .label li {
 +
                font-size: 1.2em;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width:450px) {
 +
            #contain .label li {
 +
                width: 13vmin;
 +
                height: 13vmin;
 +
                font-size: 1em;
 +
            }
 +
 
 +
            #contain .card .presentation {
 +
                width: 80%;
 +
                left: 8%;
 +
                padding-bottom: 5%;
 +
                border-radius: 30Px;
 +
            }
 +
 
 +
            #contain .card .presentation .head-portrait {
 +
                margin: 5% 18%;
 +
            }
 +
 
 +
            #contain .card .presentation #name {
 +
                font-size: 2em;
 +
            }
 +
 
 +
            #contain .card .presentation #post {
 +
                font-size: 1.5em;
 +
            }
 +
 
 +
            #contain .card .presentation #major {
 +
                font-size: 1.5em;
 +
            }
 +
 
 +
            #contain .card .presentation #declaration {
 +
                font-size: 1em;
 +
                line-height: 1em;
 +
            }
 +
 
 +
            #contain #attributions a {
 +
                font-size: 1em;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width:350px) {
 +
            #contain .label li {
 +
                width: 14vmin;
 +
                height: 14vmin;
 +
                font-size: smaller;
 +
            }
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <header id="header">
 +
        <div id="load" v-show="loading"><img src="https://static.igem.org/mediawiki/2021/c/c4/T--CPU_CHINA--loading.gif"
 +
                alt=""></div>
 +
        <div id="menu">
 +
            <div id="menuBack" v-show="isOpen" :class="isActive" @click="ifclick"></div>
 +
            <a href="https://2021.igem.org/Team:CPU_CHINA"><img id="logo"
 +
                    src="https://static.igem.org/mediawiki/2021/d/d5/T--CPU_CHINA--ProjectLogo.png" alt="项目logo"></a>
 +
            <div id="select" @mouseleave="leave" @mouseover="on">
 +
                <img id="menuImg" :src="menu" alt="这是菜单图片" @mouseover="mouseover" @click="click">
 +
                <ul id="class-a" class="class" v-show="classA">
 +
                    <li v-for="(item,index) in classList" :class="isActiveA == index? 'class-a' : ''"
 +
                        @click="classAClick(index)">{{item}}</li>
 +
                </ul>
 +
                <ul id="class-b" class="class" v-show="classB">
 +
                    <li v-for="item in classList2[isActiveA]" :class="isActiveB == item.num? 'class-b' : ''"
 +
                        @mouseover="classBOver(item.num)" @mouseleave="classBLeave(item.num)"><a :href="item.url">
 +
                            {{item.text}}</a></li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
        <img class="background" src="https://static.igem.org/mediawiki/2021/a/a5/T--CPU_CHINA--members--Top.png" alt="">
 +
        <h1 id="title">PORTRAIT</h1>
 +
        <svg width="100%" height="100%" viewBox="0 0 1920 600" version="1.1"
 +
            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 +
            <g transform="matrix(1.16285,0,0,1.38837,253.426,-231.748)">
 +
                <g id="AD1">
 +
                    <path id="凹形遮罩"
 +
                        d="M1433.18,439.801C1433.18,439.801 1001.08,524.071 607.621,524.374C219.99,524.673 -217.935,439.801 -217.935,439.801L-217.935,944.811L1433.18,944.811L1433.18,439.801Z"
 +
                        style="fill:#FFFFFF;" />
 +
                </g>
 +
            </g>
 +
        </svg>
 +
    </header>
 +
    <div id="contain" class=" clearfix">
 +
        <div id="members">
 +
            <ul class="label">
 +
                <span class="line">
 +
                    <li v-for="item in leader" @mouseover="overLable(item)"
 +
                        :class="isActive == item.num? 'addClass' : ''">{{item.lab}}
 +
                    </li>
 +
                </span>
 +
                <span class="line">
 +
                    <li v-for="item in ordMem" @mouseover="overLable(item)"
 +
                        :class="isActive == item.num? 'addClass' : ''">
 +
                        {{item.lab}}
 +
                    </li>
 +
                </span>
 +
            </ul>
 +
            <div class="card clearfix">
 +
                <div class="presentation">
 +
                    <span class="head-portrait"><img :src="head" alt=""></span>
 +
                    <div class="describe">
 +
                        <p id="name">{{name}}</p>
 +
                        <p id="post">{{post}}</p>
 +
                        <p id="major">{{major}}</p>
 +
                        <p id="declaration">{{declaration}}</p>
 +
                    </div>
 +
                </div>
 +
                <img class="drug1" src="https://static.igem.org/mediawiki/2021/8/84/T--CPU_CHINA--members--Drug1.png" alt="">
 +
                <img class="drug2" src="https://static.igem.org/mediawiki/2021/1/16/T--CPU_CHINA--members--Drug2.png" alt="">
 +
            </div>
 +
        </div>
 +
        <div id="instructor" class="clearfix">
 +
            <div v-for="item in members" class="card2">
 +
                <span class="head-portrait2"><img :src="item.head" alt=""></span>
 +
                <div class="describe2">
 +
                    <p id="name2">{{ item.name }}</p>
 +
                    <p id="post2">{{ item.post }}</p>
 +
                    <p id="major2">{{ item.major }}</p>
 +
                    <p id="declaration2">{{ item.declaration }}</p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <div id="attributions">
 +
            <a href="https://2021.igem.org/Team:CPU_CHINA/Attributions">ATTRIBUTIONS</a>
 +
        </div>
 +
    </div>
 +
    <footer>
 +
        <div id="sponsor">
 +
            <img src="https://static.igem.org/mediawiki/2021/3/31/T--CPU_CHINA--Logoes.jpg" alt="">
 +
        </div>
 +
        <div id="connect">
 +
            <h4>Contact us</h4>
 +
            <ul id="contact">
 +
                <li>
 +
                    <a href="https://weibo.com/u/6054819039">
 +
                        <img src="https://static.igem.org/mediawiki/2021/b/ba/T--CPU_CHINA--weibologo.png" alt="">
 +
                        <p>@CPU_CHINA2021</p>
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="mailto:cpuchina2021@163.com">
 +
                        <img src="https://static.igem.org/mediawiki/2021/9/92/T--CPU_CHINA--emailLogo.png" style="margin-bottom: 2vw;" alt="">
 +
                        <p>cpuchina2021@163.com</p>
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://github.com/cpu-igem/cpu-igem2021">
 +
                        <img src="https://static.igem.org/mediawiki/2021/9/98/T--CPU_CHINA--GithubLogo.png" alt="">
 +
                        <p>Like our Website?</p>
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://international.cpu.edu.cn/">
 +
                        <img src="https://static.igem.org/mediawiki/2021/4/42/T--CPU_CHINA--CPUlogo.png" alt="">
 +
                        <p>International Communication</p>
 +
                    </a>
 +
                </li>
 +
            </ul>
 +
        </div>
 +
    </footer>
 +
    <script
 +
        src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/VueJS &action=raw&amp;ctype=text/javascript">
 +
        </script>
 +
    <script
 +
        src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/common_JS &action=raw&amp;ctype=text/javascript"></script>
 +
    <script>
 +
        //存放图片路径的数组
 +
        var imgSrcArr = [
 +
            "https://static.igem.org/mediawiki/2021/c/c8/T--CPU_CHINA--Members--All.png",
 +
            "https://static.igem.org/mediawiki/2021/5/55/T--CPU_CHINA--Members--1.jpg",
 +
            "https://static.igem.org/mediawiki/2021/5/5a/T--CPU_CHINA--Members--Meirong_Chen.png",
 +
            "https://static.igem.org/mediawiki/2021/7/7c/T--CPU_CHINA--Members--Ziyang_Huang.JPG",
 +
            "https://static.igem.org/mediawiki/2021/1/1f/T--CPU_CHINA--Members--Linyu_Zheng.JPG",
 +
            "https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--Members--Wentao_Chen.JPG",
 +
            "https://static.igem.org/mediawiki/2021/2/2d/T--CPU_CHINA--Members--Gongyu_Liu.JPG",
 +
            "https://static.igem.org/mediawiki/2021/4/44/T--CPU_CHINA--Members--Peng_Luo.JPG",
 +
            "https://static.igem.org/mediawiki/2021/c/c9/T--CPU_CHINA--Members--Ruyi_Ma.JPG",
 +
            "https://static.igem.org/mediawiki/2021/c/c9/T--CPU_CHINA--Members--Ruyi_Ma.JPG",
 +
            "https://static.igem.org/mediawiki/2021/3/39/T--CPU_CHINA--Members--Qinyue_Wang.JPG",
 +
            "https://static.igem.org/mediawiki/2021/0/0e/T--CPU_CHINA--Members--Zihan_Yuan.JPG",
 +
            "https://static.igem.org/mediawiki/2021/8/8e/T--CPU_CHINA--Members--Hongjie_Qian.JPG",
 +
            "https://static.igem.org/mediawiki/2021/f/fb/T--CPU_CHINA--Members--Zekai_Shen.JPG",
 +
            "https://static.igem.org/mediawiki/2021/f/f5/T--CPU_CHINA--Members--Duanduan_Wang.JPG",
 +
            "https://static.igem.org/mediawiki/2021/f/fb/T--CPU_CHINA--Members--Ying_Yuan.JPG",
 +
            "https://static.igem.org/mediawiki/2021/a/a9/T--CPU_CHINA--Members--Jianxaing_Guan.JPG",
 +
            "https://static.igem.org/mediawiki/2021/e/eb/T--CPU_CHINA--Members--Jia_Zhang.JPG",
 +
        ];
 +
 
 +
        var imgWrap = [];
 +
 
 +
        function preloadImg(arr) {
 +
            for (var i = 0; i < arr.length; i++) {
 +
                imgWrap[i] = new Image();
 +
                imgWrap[i].src = arr[i];
 +
            }
 +
        }
 +
 
 +
        preloadImg(imgSrcArr);
 +
 
 +
        //或者延迟的文档加载完毕在加载图片
 +
 
 +
        $(function () {
 +
            preloadImg(imgSrcArr);
 +
        })
 +
 
 +
    </script>
 +
    <script>
 +
        var contain = new Vue({
 +
            el: "#contain",
 +
            data: {
 +
                head: "https://static.igem.org/mediawiki/2021/c/c8/T--CPU_CHINA--Members--All.png",
 +
                name: "CPU_CHINA",
 +
                post: "NANJING, CHINA",
 +
                major: "China Pharmaceutical University",
 +
                declaration: "Everyone is adorable.",
 +
                isActive: 0,
 +
                hover: -1,
 +
                last: 0,
 +
                lab2: ["All", "LDR", "LDR", "Lab", "Lab", "Lab", "Lab", "Lab", "Lab", "Model", "Model",
 +
                    "HP", "HP", "Art", "Wiki"
 +
                ],
 +
                lab: "All",
 +
                leader: [
 +
                    {
 +
                        lab: "All",
 +
                        head: "https://static.igem.org/mediawiki/2021/c/c8/T--CPU_CHINA--Members--All.png",
 +
                        name: "CPU_CHINA",
 +
                        position: "NAN JING, CHINA",
 +
                        major: "China Pharmaceutical University",
 +
                        declaration: "Everyone is adorable.",
 +
                        num: 0
 +
                    },
 +
                    {
 +
                        lab: "Huang",
 +
                        head: "https://static.igem.org/mediawiki/2021/7/7c/T--CPU_CHINA--Members--Ziyang_Huang.JPG",
 +
                        name: "Ziyang Huang",
 +
                        position: "TEAM LEADER",
 +
                        major: "Pharmaceutical Science(Top-notch)",
 +
                        declaration: "My ordinary self in a spectacular team.",
 +
                        num: 1
 +
                    },
 +
                    {
 +
                        lab: "Zheng",
 +
                        head: "https://static.igem.org/mediawiki/2021/1/1f/T--CPU_CHINA--Members--Linyu_Zheng.JPG",
 +
                        name: "Linyu Zheng",
 +
                        position: "TEAM LEADER",
 +
                        major: "Pharmaceutical Science(Top-notch)",
 +
                        declaration: "Love and Peace",
 +
                        num: 2
 +
                    }
 +
                ],
 +
                ordMem: [{
 +
                    lab: "Chen",
 +
                    head: "https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--Members--Wentao_Chen.JPG",
 +
                    name: "Wentao Chen",
 +
                    position: "WET LAB",
 +
                    major: "Pharmaceutical Science(Top-notch)",
 +
                    declaration: "The more you think you see, the easier it\'ll be to fool you.",
 +
                    num: 3
 +
                },
 +
                {
 +
                    lab: "Liu",
 +
                    head: "https://static.igem.org/mediawiki/2021/2/2d/T--CPU_CHINA--Members--Gongyu_Liu.JPG",
 +
                    name: "Gongyu Liu",
 +
                    position: "WET LAB",
 +
                    major: "Bio-Pharmaceutical",
 +
                    declaration: "Let life be beautiful like summer flowers and death like autume leaves.",
 +
                    num: 4
 +
                },
 +
                {
 +
                    lab: "Luo",
 +
                    head: "https://static.igem.org/mediawiki/2021/4/44/T--CPU_CHINA--Members--Peng_Luo.JPG",
 +
                    name: "Peng Luo",
 +
                    position: "WET LAB",
 +
                    major: "Pharmaceutical Science(Top-notch)",
 +
                    declaration: "There is a crack in everything, that\'s how the light gets in.",
 +
                    num: 5
 +
                },
 +
                {
 +
                    lab: "Ma",
 +
                    head: "https://static.igem.org/mediawiki/2021/c/c9/T--CPU_CHINA--Members--Ruyi_Ma.JPG",
 +
                    name: "Ruyi Ma",
 +
                    position: "WET LAB",
 +
                    major: "Pharmaceutical Analysis",
 +
                    declaration: "We are so excited about the future.",
 +
                    num: 6
 +
                },
 +
                {
 +
                    lab: "Wang",
 +
                    head: "https://static.igem.org/mediawiki/2021/3/39/T--CPU_CHINA--Members--Qinyue_Wang.JPG",
 +
                    name: "Qinyue Wang",
 +
                    position: "WET LAB",
 +
                    major: "Pharmaceutical Science(Top-notch)",
 +
                    declaration: "All experiences are gifts for the future.",
 +
                    num: 7
 +
                },
 +
                {
 +
                    lab: "Yuan",
 +
                    head: "https://static.igem.org/mediawiki/2021/0/0e/T--CPU_CHINA--Members--Zihan_Yuan.JPG",
 +
                    name: "Zihan Yuan",
 +
                    position: "WET LAB",
 +
                    major: "Pharmacy(Base of Life Science)",
 +
                    declaration: "There is only one me in this world.",
 +
                    num: 8
 +
                },
 +
                {
 +
                    lab: "Qian",
 +
                    head: "https://static.igem.org/mediawiki/2021/8/8e/T--CPU_CHINA--Members--Hongjie_Qian.JPG",
 +
                    name: "Hongjie Qian",
 +
                    position: "MATHEMATICAL MODELING",
 +
                    major: "Pharmacy (Biochemistry and Pharmacology)",
 +
                    declaration: "I have been looking for the solution called future.",
 +
                    num: 9
 +
                },
 +
                {
 +
                    lab: "Shen",
 +
                    head: "https://static.igem.org/mediawiki/2021/f/fb/T--CPU_CHINA--Members--Zekai_Shen.JPG",
 +
                    name: "Zekai Shen",
 +
                    position: "MATHEMATICAL MODELING",
 +
                    major: "Pharmacy Chemistry",
 +
                    declaration: "Down by the riverside, laid burdens down, find freedom, traveling light.",
 +
                    num: 10
 +
                },
 +
                {
 +
                    lab: "Wang",
 +
                    head: "https://static.igem.org/mediawiki/2021/f/f5/T--CPU_CHINA--Members--Duanduan_Wang.JPG",
 +
                    name: "Duanduan Wang",
 +
                    position: "HUMAN PRACTICES",
 +
                    major: "Marine Pharmacy",
 +
                    declaration: "Action is eloquence.",
 +
                    num: 11
 +
                },
 +
                {
 +
                    lab: "Yuan",
 +
                    head: "https://static.igem.org/mediawiki/2021/f/fb/T--CPU_CHINA--Members--Ying_Yuan.JPG",
 +
                    name: "Ying Yuan",
 +
                    position: "HUMAN PRACTICES",
 +
                    major: "Pharmaceutical Science(Top-notch)",
 +
                    declaration: "I will always be loyal to freedom, believing in science and love.",
 +
                    num: 12
 +
                },
 +
                {
 +
                    lab: "Guan",
 +
                    head: "https://static.igem.org/mediawiki/2021/a/a9/T--CPU_CHINA--Members--Jianxaing_Guan.JPG",
 +
                    name: "Jianxiang Guan",
 +
                    position: "ART DESIGN",
 +
                    major: "Pharmacy (Biochemistry and Pharmacology)",
 +
                    declaration: "We are raising a brand new revolution of art.",
 +
                    num: 13
 +
                },
 +
                {
 +
                    lab: "Zhang",
 +
                    head: "https://static.igem.org/mediawiki/2021/e/eb/T--CPU_CHINA--Members--Jia_Zhang.JPG",
 +
                    name: "Jia Zhang",
 +
                    position: "WIKI PRODUCTION",
 +
                    major: "Information Systems and Information Management",
 +
                    declaration: "Use legs and have legs.",
 +
                    num: 14
 +
                },
 +
                ],
 +
                members: [
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/5/55/T--CPU_CHINA--Members--1.jpg",
 +
                        name: "Meiling Lu",
 +
                        post: "PRIMARY PI",
 +
                        major: "",
 +
                        declaration: "Life is too important to be taken seriously."
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/5/5a/T--CPU_CHINA--Members--Meirong_Chen.png",
 +
                        name: "Meirong Chen",
 +
                        post: "SECONDARY PI",
 +
                        major: "",
 +
                        declaration: ""
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/3/32/T--CPU_CHINA--Members--Yanfeng_Liu.JPG",
 +
                        name: "Yanfeng Liu",
 +
                        post: "INSTRUCTOR",
 +
                        major: "Pharmacy",
 +
                        declaration: "What I can not create, I do not understand.",
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/e/e9/T--CPU_CHINA--Members--Weixuan_Lu.jpg",
 +
                        name: "Weixuan Lu",
 +
                        post: "INSTRUCTOR",
 +
                        major: "Pharmaceutical Science(Top-notch)",
 +
                        declaration: "Remember, no answer is an answer too.",
 +
                    },
 +
                    {
 +
                        head:"https://static.igem.org/mediawiki/2021/4/48/T--CPU_CHINA--Members--Qian_Li.JPG",
 +
                        name:"Qian Li",
 +
                        post:"ADVISOR",
 +
                        msjor:"Pharmaceutical Administration",
 +
                        declaration:"Too rich to introduce."
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/9/90/T--CPU_CHINA--Members--Tong_LYU.JPG",
 +
                        name: "Tong LYU",
 +
                        post: "ADVISOR",
 +
                        major: "Pharmacy(Base of Life Science)",
 +
                        declaration: "Take the road less traveled, and don't look back in anger.",
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/b/bf/T--CPU_CHINA--Members--Leyi_Liang.JPG",
 +
                        name: "Leyi Liang",
 +
                        post: "ADVISOR",
 +
                        major: "Pharmaceutical Administration",
 +
                        declaration: "All work and no play makes Jack a dull boy. ​​​",
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/f/fd/T--CPU_CHINA--Members--Xiaoying_Li.JPG",
 +
                        name: "Xiaoying Li",
 +
                        post: "ADVISOR",
 +
                        major: "Traditional Chinese Pharmacology",
 +
                        declaration: "Design is a bridge connecting the world and us.",
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/8/8a/T--CPU_CHINA--Members--HDX.jpg",
 +
                        name: "Huandi Xu",
 +
                        post: "ADVISOR",
 +
                        major: "University of Copenhagen",
 +
                        declaration: "Study!",
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/e/ee/T--CPU_CHINA--Members--Xin_Liu.jpg",
 +
                        name: "Xin Liu",
 +
                        post: "ADVISOR",
 +
                        major: "Computer Science",
 +
                        declaration: "What's past is prologue",
 +
                    },
 +
                    {
 +
                        head: "https://static.igem.org/mediawiki/2021/0/0c/T--CPU_CHINA--Members--HuiHuang.jpg",
 +
                        name: "Hui Huang",
 +
                        post: "ADVISOR",
 +
                        major: "",
 +
                        declaration: "",
 +
                    },
 +
                ]
 +
 
 +
            },
 +
            methods: {
 +
                overLable(item) {
 +
                    setTimeout(() => {
 +
                        if (this.last < 3) {
 +
                            this.leader[this.last].lab = this.lab; //还原标签
 +
                        } else {
 +
                            this.ordMem[this.last - 3].lab = this.lab; //还原标签
 +
                        }
 +
                        this.isActive = item.num; //标签样式改变
 +
                        this.lab = item.lab; //保留标签姓
 +
                        item.lab = this.lab2[item.num]; // 将标签文字设置为职位
 +
                        this.head = item.head; //头像
 +
                        this.name = item.name; //名字
 +
                        this.post = item.position; //职位
 +
                        this.major = item.major; //专业
 +
                        this.declaration = item.declaration; //宣言
 +
                        this.last = item.num; //记录标签的序号
 +
                    }, 200)
 +
                }
 +
            }
 +
        })
 +
    </script>
 +
</body>
  
−
</ul>
 
−
</div>
 
−
</div>
 
 
</html>
 
</html>

Latest revision as of 03:37, 22 October 2021

  • {{item.lab}}
  • {{item.lab}}

{{name}}

{{post}}

{{major}}

{{declaration}}

{{ item.name }}

{{ item.post }}

{{ item.major }}

{{ item.declaration }}