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

(Prototype team page)
 
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
<!DOCTYPE html>
−
{{CPU_CHINA}}
+
<html lang="en">
−
<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">
  
−
<h1>Team</h1>
+
    <style>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
        #header #title {
 +
            left: 30%;
 +
        }
  
 +
        #contain .label {
 +
            margin: 0;
 +
        }
  
−
<h3>What should this page contain?</h3>
+
        #contain .label .line {
−
<ul>
+
            display: block;
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
            text-align: center;
−
<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>
+
            white-space: nowrap;
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
            overflow-x: scroll;
−
<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 {
 +
            height: 3px;
 +
        }
  
 +
        /* 滚动条轨道 */
 +
        #contain .label .line::-webkit-scrollbar-track {
 +
            background: #FAFAFA;
 +
            border-radius: 10px;
 +
        }
  
 +
        /* 小滑块 */
 +
        #contain .label .line::-webkit-scrollbar-thumb {
 +
            background: #c5daee49;
 +
            border-radius: 10px;
 +
            width: 5px;
 +
        }
  
−
<div class="column third_size" >
+
        #contain .label .line::-webkit-scrollbar-thumb:hover {
−
<div class="highlight decoration_A_full">
+
            background: #41a0ff;
−
<h3>Inspiration</h3>
+
        }
−
<p>You can look at what other teams did to get some inspiration! <br />
+
−
Here are a few examples:</p>
+
−
<ul>
+
  
−
<li><a href="https://2019.igem.org/Team:CU/Team">2019 CU</a></li>
+
        /* 选择圈 */
−
<li><a href="https://2019.igem.org/Team:UANL/Team">2019 UANL</a></li>
+
        #contain .label li {
−
<li><a href="https://2019.igem.org/Team:William_and_Mary/Team">2019 William and Mary</a></li>
+
            margin: 0 2px;
 +
            display: inline-block;
 +
            width: 12vmin;
 +
            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: #FAFAFA;
 +
            -webkit-text-stroke: 0.6px #5f5f5f;
 +
        }
  
−
<li><a href="https://2020.igem.org/Team:BOKU-Vienna/Team">2020 BOKU Vienna </a></li>
+
        #contain .label .addClass {
−
<li><a href="https://2020.igem.org/Team:CAU_China/Team_Member">2020 CAU China</a></li>
+
            background-color: #0072FE;
−
<li><a href="https://2020.igem.org/Team:Lethbridge/Members">2020 Lethbridge</a></li>
+
            -webkit-text-stroke: 0.3px #FAFAFA;
 +
        }
 +
 
 +
        #contain .card {
 +
            position: relative;
 +
            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%;
 +
            margin-left: 8%;
 +
        }
 +
 
 +
        #contain .card2 {
 +
            float: left;
 +
            margin: 2%;
 +
            padding: 1%;
 +
            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: 2em;
 +
            color: #FAFAFA;
 +
            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:1024px) {
 +
            #contain #instructor {
 +
                margin-top: 100%;
 +
            }
 +
 
 +
            #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: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:#FAFAFA;" />
 +
                </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>
 +
    <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/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: "NAN JING, CHINA",
 +
                major: "CHINA PHYMACEUTICAL UNIVERSITY",
 +
                declaration: "Everyone is adorable.",
 +
                isActive: 0,
 +
                hover: -1,
 +
                last: 0,
 +
                lab2: ["All", "PI", "PI", "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 PHYMACEUTICAL UNIVERSITY",
 +
                        declaration: "Everyone is adorable.",
 +
                        num: 0
 +
                    },
 +
                    {
 +
                        lab: "Lu",
 +
                        head: "https://static.igem.org/mediawiki/2021/5/55/T--CPU_CHINA--Members--1.jpg",
 +
                        name: "Meilin Lu",
 +
                        position: "PRIMARY PI",
 +
                        major: "",
 +
                        declaration: "Life is too important to be taken seriously.",
 +
                        num: 1
 +
                    },
 +
                    {
 +
                        lab: "Chen",
 +
                        head: "",
 +
                        name: "Meirong Chen",
 +
                        position: "SECONDARY PI",
 +
                        major: "",
 +
                        declaration: "",
 +
                        num: 2
 +
                    },
 +
                    {
 +
                        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: 3
 +
                    },
 +
                    {
 +
                        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: 4
 +
                    }
 +
                ],
 +
                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: 5
 +
                },
 +
                {
 +
                    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: 6
 +
                },
 +
                {
 +
                    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: 7
 +
                },
 +
                {
 +
                    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: 8
 +
                },
 +
                {
 +
                    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: 9
 +
                },
 +
                {
 +
                    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: 10
 +
                },
 +
                {
 +
                    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: 11
 +
                },
 +
                {
 +
                    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: 12
 +
                },
 +
                {
 +
                    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: 13
 +
                },
 +
                {
 +
                    lab: "Yuan",
 +
                    head: "https://static.igem.org/mediawiki/2021/f/fb/T--CPU_CHINA--Members--Ying_Yuan.JPG",
 +
                    name: "Ying Yuan",
 +
                    position: "HUMAN PRACTICE",
 +
                    major: "PHARMACEUTICAL SCIENCE(TOP-NOTCH)",
 +
                    declaration: "I will always be loyal to freedom, believing in science and love.",
 +
                    num: 14
 +
                },
 +
                {
 +
                    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: "PHARMACOLOGY",
 +
                    declaration: "We are raising a brand new revolution of art in iGEM.",
 +
                    num: 15
 +
                },
 +
                {
 +
                    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: 16
 +
                },
 +
                ],
 +
                members: [{
 +
                    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: "PHARMACOLOGY (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",
 +
                    major: "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/3/31/T--CPU_CHINA--%E7%8E%8B%E4%B8%80%E5%8D%9A.png",
 +
                    name: "hahhah",
 +
                    post: "ADVISOR",
 +
                    major: "",
 +
                    declaration: "",
 +
                },
 +
                ]
 +
 
 +
            },
 +
            methods: {
 +
                overLable(item) {
 +
                    setTimeout(() => {
 +
                        if (this.last < 5) {
 +
                            this.leader[this.last].lab = this.lab; //还原标签
 +
                        } else {
 +
                            this.ordMem[this.last - 5].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>

Revision as of 08:36, 8 October 2021

<!DOCTYPE html>

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

{{name}}

{{post}}

{{major}}

{{declaration}}

{{ item.name }}

{{ item.post }}

{{ item.major }}

{{ item.declaration }}