Difference between revisions of "Team:CPU CHINA"

 
(17 intermediate revisions by 3 users not shown)
Line 14: Line 14:
 
</head>
 
</head>
 
<style>
 
<style>
−
     body{
+
     body {
 
         background-color: #FAFAFA !important;
 
         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 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 171: Line 184:
 
     }
 
     }
  
−
     /* #second .pimg1{
+
     #second .pimg1 {
−
         float: right;
+
         position: absolute;
−
         margin-right: 25%;
+
         margin-top: 25%;
−
         margin-top: 35%;
+
         width: 25%;
−
     } */
+
        left: 37.5%;
 +
     }
  
  
Line 181: Line 195:
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
−
       
+
 
 
         /*z-index: 9;*/
 
         /*z-index: 9;*/
 
     }
 
     }
  
−
     #second .pimg2{
+
     #second .pimg2 {
−
         float: right;
+
         position: absolute;
−
         margin-right: 25%;
+
         margin-top: 90%;
−
         margin-top: 105%;
+
        width: 25%;
 +
         left: 37.5%;
 
     }
 
     }
  
Line 259: Line 274:
  
 
     #third {
 
     #third {
−
         margin: 139vw 0 0;
+
         margin: 190% 0 10%;
 
         display: flex;
 
         display: flex;
 
         justify-content: center;
 
         justify-content: center;
Line 286: Line 301:
 
     }
 
     }
  
−
     #third img{
+
     /* #third img {
 
         margin: -20px;
 
         margin: -20px;
−
     }
+
     } */
  
 
     #third #machine img {
 
     #third #machine img {
 
         width: 70%;
 
         width: 70%;
 
         margin: 0;
 
         margin: 0;
 +
        cursor: pointer;
 
     }
 
     }
  
−
 
+
     #third #machine #first-img{
−
     #third #machine img:hover {
+
         cursor: auto;
−
         opacity: 25%;
+
 
     }
 
     }
  
Line 303: Line 318:
 
         display: flex;
 
         display: flex;
 
         padding: 0;
 
         padding: 0;
−
         margin:10% 0;
+
         margin: 10% 0;
 
         flex-wrap: wrap;
 
         flex-wrap: wrap;
 
         align-items: center;
 
         align-items: center;
 
         justify-content: center;
 
         justify-content: center;
−
        background-color: #fafafa;
 
 
     }
 
     }
  
Line 330: Line 344:
 
         font-size: 1.1em;
 
         font-size: 1.1em;
 
         text-align: center;
 
         text-align: center;
 +
        font-family: "MONTSERRAT-BLACKITALIC2";
 
     }
 
     }
  
−
     #last li:hover p{
+
     #last li:hover p {
 
         color: #0071fe;
 
         color: #0071fe;
 
         font-weight: bold;
 
         font-weight: bold;
 
     }
 
     }
−
    @media screen and (max-width: 1300px){
 
  
−
     }
+
     @media screen and (max-width: 1300px) {}
  
 
     @media screen and (max-width: 450px) {
 
     @media screen and (max-width: 450px) {
Line 351: Line 365:
 
             width: 20%;
 
             width: 20%;
 
         }
 
         }
−
       
+
 
 
         #second #layer {
 
         #second #layer {
 
             display: none;
 
             display: none;
Line 383: 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 424: Line 441:
 
             <p class="polution polution1">However, the way of PE plastic recycling is not ideal, which will bring us
 
             <p class="polution polution1">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="polution pimg1" src="https://static.igem.org/mediawiki/2021/f/f4/T--CPU_CHINA--Home--quater.GIF" alt="">
+
             <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
 
             <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>
 
                 production accounts for about 1 / 4 of the total plastic production.</p>
−
             <img class="polution pimg2" src="https://static.igem.org/mediawiki/2021/d/d8/T--CPU_CHINA--Home--badRecycle.GIF" alt="">
+
             <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 438: Line 455:
 
     <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 457: 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 @mouseover="overItem(item)" @mouseleave="leaveItem(item)">{{item.name}}</p>
+
                 <p @mouseover="overItem(item)" @mouseleave="leaveItem(item)">{{item.name}}</p>
 
             </a>
 
             </a>
 
         </li>
 
         </li>
Line 554: Line 572:
 
         });
 
         });
 
         $(function () {
 
         $(function () {
−
             if($(window).width()>$(window).height()){
+
             if ($(window).width() > $(window).height()) {
 
                 $('#iphone-se').width($(window).width())
 
                 $('#iphone-se').width($(window).width())
−
             }else{
+
             } else {
 
                 $('#iphone-se').height($(window).height())
 
                 $('#iphone-se').height($(window).height())
 
             }
 
             }
Line 577: Line 595:
  
 
             let top = -(currentheight - (currentH - cStart) / 2000 * 41 - cStart)
 
             let top = -(currentheight - (currentH - cStart) / 2000 * 41 - cStart)
−
             if(top<0){
+
             if (top < 0) {
 
                 let topCss = "top:" + top + "px"
 
                 let topCss = "top:" + top + "px"
 
                 $("#sticky").css(topCss)
 
                 $("#sticky").css(topCss)
−
            console.log(top)
 
 
             }
 
             }
 
         })
 
         })
Line 681: 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 695: 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/MeddyRelightMyStar",
+
                         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: "Meddy:Relight My Star",
+
                         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: "Project",
+
                         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: "Model",
+
                         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: "Human Practices",
+
                         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