Difference between revisions of "Team:CPU CHINA"

 
(33 intermediate revisions by 3 users not shown)
Line 14: Line 14:
 
</head>
 
</head>
 
<style>
 
<style>
−
     #mw-content-text{
+
     body {
−
         height:500vw;
+
         background-color: #FAFAFA !important;
 
     }
 
     }
 +
 +
    #header #award {
 +
        position: fixed;
 +
        bottom: 3vmin;
 +
        left: -3vmin;
 +
        width: 35vmin;
 +
        z-index: 11;
 +
    }
 +
 
     #first {
 
     #first {
 
         padding: 0 12%;
 
         padding: 0 12%;
 +
    }
 +
 +
    #mw-content-text {
 +
        height: 460vw
 
     }
 
     }
  
Line 155: Line 168:
 
         width: 70%;
 
         width: 70%;
 
         margin: 70% 15%;
 
         margin: 70% 15%;
−
         color: #fafafa;
+
         color: #FAFAFA;
 
         line-height: 3vw;
 
         line-height: 3vw;
 
         text-align: center;
 
         text-align: center;
Line 161: Line 174:
 
         letter-spacing: 0.05em;
 
         letter-spacing: 0.05em;
 
         font-family: "MONTSERRAT-BLACK1";
 
         font-family: "MONTSERRAT-BLACK1";
−
         z-index: 4;
+
         z-index: 9;
 
     }
 
     }
  
Line 167: Line 180:
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
 +
        margin-top: 10px;
 
         /*z-index: 9;*/
 
         /*z-index: 9;*/
 +
    }
 +
 +
    #second .pimg1 {
 +
        position: absolute;
 +
        margin-top: 25%;
 +
        width: 25%;
 +
        left: 37.5%;
 
     }
 
     }
  
Line 174: Line 195:
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
−
        margin-top: 10px;
+
 
 
         /*z-index: 9;*/
 
         /*z-index: 9;*/
 +
    }
 +
 +
    #second .pimg2 {
 +
        position: absolute;
 +
        margin-top: 90%;
 +
        width: 25%;
 +
        left: 37.5%;
 
     }
 
     }
  
Line 186: Line 214:
  
 
     #anchor1 {
 
     #anchor1 {
−
         margin-top: 60%
+
         margin-top: 70%
 
     }
 
     }
  
Line 236: Line 264:
 
         transition-delay: 2s;
 
         transition-delay: 2s;
 
     }
 
     }
−
 
  
 
     #loading p {
 
     #loading p {
Line 247: Line 274:
  
 
     #third {
 
     #third {
−
        background-color: #fafafa;
+
         margin: 190% 0 10%;
−
         margin: 190vw 0 0;
+
 
         display: flex;
 
         display: flex;
 
         justify-content: center;
 
         justify-content: center;
Line 274: Line 300:
 
         flex-direction: row;
 
         flex-direction: row;
 
     }
 
     }
 +
 +
    /* #third img {
 +
        margin: -20px;
 +
    } */
  
 
     #third #machine img {
 
     #third #machine img {
 
         width: 70%;
 
         width: 70%;
 +
        margin: 0;
 +
        cursor: pointer;
 
     }
 
     }
  
−
     #third #machine img:hover {
+
     #third #machine #first-img{
−
         opacity: 25%;
+
         cursor: auto;
 
     }
 
     }
  
 
     #last {
 
     #last {
−
        background-color: #fafafa;
 
 
         display: flex;
 
         display: flex;
 
         padding: 0;
 
         padding: 0;
 +
        margin: 10% 0;
 
         flex-wrap: wrap;
 
         flex-wrap: wrap;
 
         align-items: center;
 
         align-items: center;
Line 293: Line 325:
  
 
     #last li {
 
     #last li {
−
         width: 200px;
+
         width: 240px;
 
         padding: 0;
 
         padding: 0;
−
         margin: 2%;
+
         margin: 1%;
 
         font-family: "CABIN-REGULAR";
 
         font-family: "CABIN-REGULAR";
 
         justify-content: center;
 
         justify-content: center;
Line 304: Line 336:
  
 
     #last li img {
 
     #last li img {
−
         margin-bottom: 2vw;
+
         margin-bottom: 1vmin;
 
         width: 100%;
 
         width: 100%;
 
     }
 
     }
  
 
     #last li p {
 
     #last li p {
−
         color: #ffffff;
+
         color: #212121;
 
         font-size: 1.1em;
 
         font-size: 1.1em;
 
         text-align: center;
 
         text-align: center;
 +
        font-family: "MONTSERRAT-BLACKITALIC2";
 
     }
 
     }
  
−
     @media screen and (max-width: 450px) {
+
     #last li:hover p {
−
         #second #layer {
+
         color: #0071fe;
−
            display: none;
+
         font-weight: bold;
−
         }
+
    }
−
 
+
−
        #second #layer2 img {
+
−
            display: block;
+
−
        }
+
  
 +
    @media screen and (max-width: 1300px) {}
  
 +
    @media screen and (max-width: 450px) {
 
         #first #title {
 
         #first #title {
 
             padding: 40vh 0 30vh;
 
             padding: 40vh 0 30vh;
Line 333: Line 364:
 
             left: 26vw;
 
             left: 26vw;
 
             width: 20%;
 
             width: 20%;
 +
        }
 +
 +
        #second #layer {
 +
            display: none;
 +
        }
 +
 +
        #second #layer2 img {
 +
            display: block;
 
         }
 
         }
 
     }
 
     }
Line 358: Line 397:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
        <a href="https://2021.igem.org/Team:CPU_CHINA/Awards">
 +
            <img id="award" src="https://static.igem.org/mediawiki/2021/4/46/T--CPU_CHINA--award.gif" alt="">
 +
        </a>
 
     </header>
 
     </header>
 
     <div id="first">
 
     <div id="first">
Line 397: Line 439:
 
         </div>
 
         </div>
 
         <div id="layer3">
 
         <div id="layer3">
−
             <p class="polution polution1">Among them, PE plastic is the most widely used in express packaging, and PE
+
             <p class="polution polution1">However, the way of PE plastic recycling is not ideal, which will bring us
−
                production accounts for about 1 / 4 of the total plastic production.</p>
+
−
            <p class="polution polution2">However, the way of PE plastic recycling is not ideal, which will bring us
+
 
                 serious excessive loss of resources and environmental pollution.</p>
 
                 serious excessive loss of resources and environmental pollution.</p>
 +
            <img class="pimg1" src="https://static.igem.org/mediawiki/2021/d/d8/T--CPU_CHINA--Home--badRecycle.GIF" alt="">
 +
            <p class="polution polution2">Among them, PE plastic is the most widely used in express packaging, and PE
 +
                production accounts for about 1 / 4 of the total plastic production.</p>
 +
            <img class="pimg2" src="https://static.igem.org/mediawiki/2021/f/f4/T--CPU_CHINA--Home--quater.GIF" alt="">
 
             <p class="polution polution3">But, luckily</p>
 
             <p class="polution polution3">But, luckily</p>
 
         </div>
 
         </div>
Line 407: Line 451:
 
     <div id="sticky">
 
     <div id="sticky">
 
         <canvas id="iphone-se" width="1024" height="587"></canvas>
 
         <canvas id="iphone-se" width="1024" height="587"></canvas>
−
        <img src="https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png" alt="">
 
 
     </div>
 
     </div>
 
     <p id="anchor2"></p>
 
     <p id="anchor2"></p>
 
     <div id="third">
 
     <div id="third">
 
         <div id="machine">
 
         <div id="machine">
 +
            <img id="first-img" src="https://static.igem.org/mediawiki/2021/6/63/T--CPU_CHINA--Home--mouseguiding.GIF" alt="">
 
             <p class="area1">
 
             <p class="area1">
−
                 <img src="https://static.igem.org/mediawiki/2021/3/31/T--CPU_CHINA--Home--Sum1.PNG" alt=""
+
                 <img :src="defaultImg['machineImg0']" alt="" style="width: 37.304%;" @mouseover="moveOn(0)"
−
                    style="width: 37.304%;" @mouseover="imgDescribe(0)">
+
                    @mouseleave="moveLeave(0)">
−
                 <img src="https://static.igem.org/mediawiki/2021/8/8b/T--CPU_CHINA--Home--Sum2.PNG" alt=""
+
                 <img :src="defaultImg['machineImg1']" alt="" style="width: 23.34%;" @mouseover="moveOn(1)"
−
                    style="width: 23.34%;" @mouseover="imgDescribe(1)">
+
                    @mouseleave="moveLeave(1)">
−
                 <img src="https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Sum3.PNG" alt=""
+
                 <img :src="defaultImg['machineImg2']" alt="" style="width: 39.306%;" @mouseover="moveOn(2)"
−
                    style="width: 39.306%;" @mouseover="imgDescribe(2)">
+
                    @mouseleave="moveLeave(2)">
 
             </p>
 
             </p>
−
             <img src="https://static.igem.org/mediawiki/2021/c/c2/T--CPU_CHINA--Home--Sum4.PNG" alt="" style="width: 100%;"
+
             <img :src="defaultImg['machineImg3']" alt="" style="width: 100%;" @mouseover="moveOn(3)"
−
                 @mouseover="imgDescribe(3)">
+
                 @mouseleave="moveLeave(3)">
−
             <img src="https://static.igem.org/mediawiki/2021/d/de/T--CPU_CHINA--Home--Sum5.PNG" alt="" style="width: 100%;"
+
             <img :src="defaultImg['machineImg4']" alt="" style="width: 100%;" @mouseover="moveOn(4)"
−
                 @mouseover="imgDescribe(4)">
+
                 @mouseleave="moveLeave(4)">
 
         </div>
 
         </div>
 
         <img width="60%" :src="describe" alt="">
 
         <img width="60%" :src="describe" alt="">
Line 431: Line 475:
 
             <a :href="item.url">
 
             <a :href="item.url">
 
                 <img :src="item.img " @mouseover="overItem(item)" @mouseleave="leaveItem(item)" alt="">
 
                 <img :src="item.img " @mouseover="overItem(item)" @mouseleave="leaveItem(item)" alt="">
−
                 <p>{{item.name}}</p>
+
                 <p @mouseover="overItem(item)" @mouseleave="leaveItem(item)">{{item.name}}</p>
 
             </a>
 
             </a>
 
         </li>
 
         </li>
Line 449: Line 493:
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
−
                     <a href="cpuchina2021@163.com">
+
                     <a href="mailto:cpuchina2021@163.com">
 
                         <img src="https://static.igem.org/mediawiki/2021/9/92/T--CPU_CHINA--emailLogo.png"
 
                         <img src="https://static.igem.org/mediawiki/2021/9/92/T--CPU_CHINA--emailLogo.png"
 
                             style="margin-bottom: 2vw;" alt="">
 
                             style="margin-bottom: 2vw;" alt="">
Line 528: Line 572:
 
         });
 
         });
 
         $(function () {
 
         $(function () {
−
             $('#iphone-se').width($(window).width())
+
             if ($(window).width() > $(window).height()) {
−
             // $('#iphone-se').height($(window).height())
+
                $('#iphone-se').width($(window).width())
 +
             } else {
 +
                $('#iphone-se').height($(window).height())
 +
            }
  
 
         })
 
         })
Line 545: Line 592:
 
             }
 
             }
  
 +
            let currentheight = document.documentElement.scrollTop;
 +
 +
            let top = -(currentheight - (currentH - cStart) / 2000 * 41 - cStart)
 +
            if (top < 0) {
 +
                let topCss = "top:" + top + "px"
 +
                $("#sticky").css(topCss)
 +
            }
 
         })
 
         })
  
Line 644: Line 698:
 
                     "https://static.igem.org/mediawiki/2021/6/6e/T--CPU_CHINA--Home--SpyTagSpyCatcher.png",
 
                     "https://static.igem.org/mediawiki/2021/6/6e/T--CPU_CHINA--Home--SpyTagSpyCatcher.png",
 
                     "https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--Home--dCas9.png"
 
                     "https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--Home--dCas9.png"
 +
                ],
 +
                defaultImg: {
 +
                    "machineImg0": "https://static.igem.org/mediawiki/2021/3/31/T--CPU_CHINA--Home--Sum1.PNG",
 +
                    "machineImg1": "https://static.igem.org/mediawiki/2021/8/8b/T--CPU_CHINA--Home--Sum2.PNG",
 +
                    "machineImg2": "https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Sum3.PNG",
 +
                    "machineImg3": "https://static.igem.org/mediawiki/2021/c/c2/T--CPU_CHINA--Home--Sum4.PNG",
 +
                    "machineImg4": "https://static.igem.org/mediawiki/2021/d/de/T--CPU_CHINA--Home--Sum5.PNG",
 +
                },
 +
                machineImg: [
 +
                    [["https://static.igem.org/mediawiki/2021/3/31/T--CPU_CHINA--Home--Sum1.PNG", "https://static.igem.org/mediawiki/2021/f/f4/T--CPU_CHINA--Home--Sum1-1.PNG"],
 +
                    ["https://static.igem.org/mediawiki/2021/8/8b/T--CPU_CHINA--Home--Sum2.PNG", "https://static.igem.org/mediawiki/2021/5/58/T--CPU_CHINA--Home--Sum2-1.PNG"],
 +
                    ["https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Sum3.PNG", "https://static.igem.org/mediawiki/2021/6/62/T--CPU_CHINA--Home--Sum3-1.PNG"]],
 +
                    ["https://static.igem.org/mediawiki/2021/c/c2/T--CPU_CHINA--Home--Sum4.PNG", "https://static.igem.org/mediawiki/2021/0/05/T--CPU_CHINA--Home--Sum4-1.PNG"],
 +
                    ["https://static.igem.org/mediawiki/2021/d/de/T--CPU_CHINA--Home--Sum5.PNG", "https://static.igem.org/mediawiki/2021/f/f8/T--CPU_CHINA--Home--Sum5-1.png"]
 
                 ]
 
                 ]
 
             },
 
             },
 
             methods: {
 
             methods: {
−
                 imgDescribe(num) {
+
                 moveOn(num) {
 +
                    let left = "machineImg" + num
 +
                    if (num < 3) {
 +
                        this.defaultImg[left] = this.machineImg[0][num][1]
 +
                    } else {
 +
                        this.defaultImg[left] = this.machineImg[num - 2][1]
 +
                    }
 
                     this.describe = this.areaDescribe[num]
 
                     this.describe = this.areaDescribe[num]
 +
                },
 +
                moveLeave(num) {
 +
                    let left = "machineImg" + num
 +
                    if (num < 3) {
 +
                        this.defaultImg[left] = this.machineImg[0][num][0]
 +
                    } else {
 +
                        this.defaultImg[left] = this.machineImg[num - 2][0]
 +
                    }
 
                 }
 
                 }
 
             }
 
             }
Line 658: Line 740:
 
                 lastImg: "",
 
                 lastImg: "",
 
                 imgHover: [
 
                 imgHover: [
−
                    "https://static.igem.org/mediawiki/2021/3/3a/T--CPU_CHINA--Home--Team2.png",
 
 
                     "https://static.igem.org/mediawiki/2021/5/50/T--CPU_CHINA--Home--MnPiDEC.png",
 
                     "https://static.igem.org/mediawiki/2021/5/50/T--CPU_CHINA--Home--MnPiDEC.png",
 +
                    "https://static.igem.org/mediawiki/2021/1/1e/T--CPU_CHINA--Home--Modeling2.png",
 
                     "https://static.igem.org/mediawiki/2021/b/b5/T--CPU_CHINA--Home--HP2.png",
 
                     "https://static.igem.org/mediawiki/2021/b/b5/T--CPU_CHINA--Home--HP2.png",
−
                     "https://static.igem.org/mediawiki/2021/1/1e/T--CPU_CHINA--Home--Modeling2.png"
+
                     "https://static.igem.org/mediawiki/2021/3/3a/T--CPU_CHINA--Home--Team2.png"
 
                 ],
 
                 ],
 
                 drugs: [
 
                 drugs: [
 
                     {
 
                     {
−
                         url: "https://2021.igem.org/Team:CPU_CHINA/Team",
+
                         url: "https://2021.igem.org/Team:CPU_CHINA/Design",
−
                         img: "https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Team1.png",
+
                         img: "https://static.igem.org/mediawiki/2021/f/fa/T--CPU_CHINA--Home--Project1.png",
−
                         name: "Members",
+
                         name: "Project",
 
                         num: 0
 
                         num: 0
 
                     },
 
                     },
 
                     {
 
                     {
−
                         url: "",
+
                         url: "https://2021.igem.org/Team:CPU_CHINA/Model",
−
                         img: "https://static.igem.org/mediawiki/2021/f/fa/T--CPU_CHINA--Home--Project1.png",
+
                         img: "https://static.igem.org/mediawiki/2021/3/36/T--CPU_CHINA--Home--Modeling1.png",
−
                         name: "",
+
                         name: "Model",
 
                         num: 1
 
                         num: 1
 
                     },
 
                     },
 
                     {
 
                     {
−
                         url: "",
+
                         url: "https://2021.igem.org/Team:CPU_CHINA/Human_Practices",
 
                         img: "https://static.igem.org/mediawiki/2021/4/4c/T--CPU_CHINA--Home--HP1.png",
 
                         img: "https://static.igem.org/mediawiki/2021/4/4c/T--CPU_CHINA--Home--HP1.png",
−
                         name: "",
+
                         name: "Human Practices",
 
                         num: 2
 
                         num: 2
 
                     },
 
                     },
 
                     {
 
                     {
−
                         url: "",
+
                         url: "https://2021.igem.org/Team:CPU_CHINA/MeddyRelightMyStar",
−
                         img: "https://static.igem.org/mediawiki/2021/3/36/T--CPU_CHINA--Home--Modeling1.png",
+
                         img: "https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Team1.png",
−
                         name: "",
+
                         name: "Meddy:Relight My Star",
 
                         num: 3
 
                         num: 3
 
                     }
 
                     }

Latest revision as of 06:07, 23 November 2021

Document

POLYETHYLENE DEGRADIST

a prescription for the earth affected by plastic polution

With the rapid development of e-commerce, the number of express delivery is increasing year by year.

In 2020, China's express delivery volume will reach

In order to ensure the integrity and safety of goods in express transportation, express enterprises often need to package goods.

When the package arrives in the hands of consumers, packaging materials turn into packaging waste.

However, the way of PE plastic recycling is not ideal, which will bring us serious excessive loss of resources and environmental pollution.

Among them, PE plastic is the most widely used in express packaging, and PE production accounts for about 1 / 4 of the total plastic production.

But, luckily