Difference between revisions of "Team:CPU CHINA"

 
(43 intermediate revisions by 3 users not shown)
Line 14: Line 14:
 
</head>
 
</head>
 
<style>
 
<style>
 +
    body {
 +
        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 147: Line 163:
 
     }
 
     }
  
−
     #second .polution{
+
     #second .polution {
 
         position: absolute;
 
         position: absolute;
 
         height: 20%;
 
         height: 20%;
 
         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 158: Line 174:
 
         letter-spacing: 0.05em;
 
         letter-spacing: 0.05em;
 
         font-family: "MONTSERRAT-BLACK1";
 
         font-family: "MONTSERRAT-BLACK1";
−
         z-index: 4;
+
         z-index: 9;
 
     }
 
     }
  
−
     #second .polution1{
+
     #second .polution1 {
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
 +
        margin-top: 10px;
 
         /*z-index: 9;*/
 
         /*z-index: 9;*/
 
     }
 
     }
−
       
 
  
−
     #second .polution2{
+
    #second .pimg1 {
 +
        position: absolute;
 +
        margin-top: 25%;
 +
        width: 25%;
 +
        left: 37.5%;
 +
    }
 +
 
 +
 
 +
     #second .polution2 {
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
−
        margin-top: 10px;
+
 
 
         /*z-index: 9;*/
 
         /*z-index: 9;*/
 
     }
 
     }
  
−
     #second .polution3{
+
    #second .pimg2 {
 +
        position: absolute;
 +
        margin-top: 90%;
 +
        width: 25%;
 +
        left: 37.5%;
 +
    }
 +
 
 +
     #second .polution3 {
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
Line 182: Line 213:
 
     }
 
     }
  
−
     #anchor1{
+
     #anchor1 {
−
         margin-top:60%
+
         margin-top: 70%
 
     }
 
     }
  
Line 198: Line 229:
 
         justify-content: center;
 
         justify-content: center;
 
         align-items: center;
 
         align-items: center;
−
         z-index: 7;
+
         z-index: -1;
 
     }
 
     }
  
−
     #sticky img{
+
     #sticky img {
 
         position: absolute;
 
         position: absolute;
 
         bottom: 0;
 
         bottom: 0;
Line 242: Line 273:
 
     }
 
     }
  
 +
    #third {
 +
        margin: 190% 0 10%;
 +
        display: flex;
 +
        justify-content: center;
 +
        align-items: center;
 +
        flex-direction: column;
 +
        flex-wrap: wrap;
 +
    }
  
 +
    #third #machine {
 +
        display: flex;
 +
        width: 60%;
 +
        justify-content: center;
 +
        align-items: center;
 +
        flex-direction: column;
 +
    }
  
−
     @media screen and (max-width: 450px) {
+
     #third #machine p {
−
        #second #layer {
+
        margin: 0;
−
            display: none;
+
    }
−
        }
+
  
−
        #second #layer2 img {
+
    #third #machine .area1 {
−
            display: block;
+
        display: flex;
−
         }
+
         justify-content: center;
 +
        align-items: center;
 +
        flex-direction: row;
 +
    }
  
 +
    /* #third img {
 +
        margin: -20px;
 +
    } */
  
 +
    #third #machine img {
 +
        width: 70%;
 +
        margin: 0;
 +
        cursor: pointer;
 +
    }
 +
 +
    #third #machine #first-img{
 +
        cursor: auto;
 +
    }
 +
 +
    #last {
 +
        display: flex;
 +
        padding: 0;
 +
        margin: 10% 0;
 +
        flex-wrap: wrap;
 +
        align-items: center;
 +
        justify-content: center;
 +
    }
 +
 +
    #last li {
 +
        width: 240px;
 +
        padding: 0;
 +
        margin: 1%;
 +
        font-family: "CABIN-REGULAR";
 +
        justify-content: center;
 +
        flex-direction: column;
 +
        align-items: center;
 +
        text-align: center;
 +
    }
 +
 +
    #last li img {
 +
        margin-bottom: 1vmin;
 +
        width: 100%;
 +
    }
 +
 +
    #last li p {
 +
        color: #212121;
 +
        font-size: 1.1em;
 +
        text-align: center;
 +
        font-family: "MONTSERRAT-BLACKITALIC2";
 +
    }
 +
 +
    #last li:hover p {
 +
        color: #0071fe;
 +
        font-weight: bold;
 +
    }
 +
 +
    @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 263: Line 364:
 
             left: 26vw;
 
             left: 26vw;
 
             width: 20%;
 
             width: 20%;
 +
        }
 +
 +
        #second #layer {
 +
            display: none;
 +
        }
 +
 +
        #second #layer2 img {
 +
            display: block;
 
         }
 
         }
 
     }
 
     }
Line 288: 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 327: 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 production accounts for about 1 / 4 of the total plastic production.</p>
+
             <p class="polution polution1">However, the way of PE plastic recycling is not ideal, which will bring us
−
            <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="polution" style="height: auto;" src="./data/Home/Meddy/QQ图片20211019002216.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
 +
                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>
 
     </div>
 
     </div>
 
     <p id="anchor1"></p>
 
     <p id="anchor1"></p>
 
     <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="last" style="margin:200% 0;">
+
     <div id="third">
−
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quia aperiam alias cumque nemo, incidunt iste maxime quas voluptas harum dolorem dicta debitis tenetur corrupti molestiae doloribus obcaecati doloremque laudantium?
+
        <div id="machine">
−
        Voluptatem ipsum, aperiam ipsam quis assumenda nihil exercitationem iure hic doloremque esse consectetur praesentium natus nam rerum eligendi ullam, tempore voluptate corrupti autem fugiat ut amet! Repellendus laborum non et.
+
            <img id="first-img" src="https://static.igem.org/mediawiki/2021/6/63/T--CPU_CHINA--Home--mouseguiding.GIF" alt="">
−
        Ipsum voluptate quod illum, nesciunt consequuntur quo repellat magni odit, sapiente asperiores repellendus labore porro. Molestiae ut excepturi facilis corporis iure facere repudiandae nesciunt quam ullam! Maxime vitae placeat doloremque.
+
            <p class="area1">
−
        Provident sapiente voluptatem illo. Suscipit commodi alias numquam, iure ullam atque rem recusandae blanditiis dolorem natus nihil soluta. Doloribus natus exercitationem debitis at pariatur amet quaerat deleniti aspernatur, suscipit quisquam.
+
                <img :src="defaultImg['machineImg0']" alt="" style="width: 37.304%;" @mouseover="moveOn(0)"
−
        Molestiae voluptate molestias laboriosam eveniet perspiciatis officia ipsam error cupiditate aut vero voluptatibus debitis, reprehenderit natus fuga saepe, inventore, quisquam earum illum sequi ut! Nulla fugit officiis sint esse a?
+
                    @mouseleave="moveLeave(0)">
−
        Cupiditate, facere voluptates asperiores voluptas obcaecati temporibus inventore vitae blanditiis porro odit, reiciendis accusamus possimus, beatae totam minima dicta eveniet officiis quaerat. Ea aperiam nesciunt, quis mollitia in deserunt aliquid!
+
                <img :src="defaultImg['machineImg1']" alt="" style="width: 23.34%;" @mouseover="moveOn(1)"
−
        Aperiam deserunt nam dolor quae dicta inventore doloremque quam laboriosam ab quo porro numquam nemo eveniet optio iure similique veritatis ea nobis placeat facere, incidunt, saepe magni! Ex, corrupti magnam!
+
                    @mouseleave="moveLeave(1)">
−
        Aspernatur labore saepe ea perspiciatis sunt. Porro maxime odio suscipit ipsam libero laudantium perferendis et, reiciendis beatae harum magni iste enim. Provident in perspiciatis eligendi ut praesentium fugit facilis odio!
+
                <img :src="defaultImg['machineImg2']" alt="" style="width: 39.306%;" @mouseover="moveOn(2)"
−
         Obcaecati quo omnis porro est. Iste voluptates vero, natus exercitationem labore, repudiandae, ab harum placeat a beatae repellendus animi. Nisi incidunt ea assumenda odit cum illum explicabo voluptatibus eaque sint!
+
                    @mouseleave="moveLeave(2)">
−
         Cupiditate nam possimus natus autem, nobis voluptates officia! Aperiam, facere possimus non fuga laborum doloribus magnam culpa illo iusto explicabo incidunt, vitae nulla voluptatum assumenda. Non suscipit aperiam ducimus libero?
+
            </p>
 +
            <img :src="defaultImg['machineImg3']" alt="" style="width: 100%;" @mouseover="moveOn(3)"
 +
                @mouseleave="moveLeave(3)">
 +
            <img :src="defaultImg['machineImg4']" alt="" style="width: 100%;" @mouseover="moveOn(4)"
 +
                @mouseleave="moveLeave(4)">
 +
         </div>
 +
         <img width="60%" :src="describe" alt="">
 
     </div>
 
     </div>
 +
    <ul id="last">
 +
        <li v-for="item in drugs">
 +
            <a :href="item.url">
 +
                <img :src="item.img " @mouseover="overItem(item)" @mouseleave="leaveItem(item)" alt="">
 +
                <p @mouseover="overItem(item)" @mouseleave="leaveItem(item)">{{item.name}}</p>
 +
            </a>
 +
        </li>
 +
    </ul>
 
     <footer>
 
     <footer>
 
         <div id="sponsor">
 
         <div id="sponsor">
Line 365: 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" style="margin-bottom: 2vw;" alt="">
+
                         <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>
 
                         <p>cpuchina2021@163.com</p>
 
                     </a>
 
                     </a>
Line 399: Line 528:
 
     <script
 
     <script
 
         src='https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/JqueryAjax &action=raw&amp;ctype=text/javascript'></script>
 
         src='https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/JqueryAjax &action=raw&amp;ctype=text/javascript'></script>
 +
    <script>
 +
        var imgSrcArr = [
 +
            "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/b/b5/T--CPU_CHINA--Home--HP2.png",
 +
            "https://static.igem.org/mediawiki/2021/1/1e/T--CPU_CHINA--Home--Modeling2.png"
 +
        ]
 +
        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>
 
     <script>
 
         window.addEventListener('scroll', function (event) {
 
         window.addEventListener('scroll', function (event) {
Line 419: 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 436: 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 525: Line 688:
  
 
         }
 
         }
 +
        var third = new Vue({
 +
            el: "#third",
 +
            data: {
 +
                describe: "https://static.igem.org/mediawiki/2021/9/9e/T--CPU_CHINA--Home--MnP.png",
 +
                areaDescribe: [
 +
                    "https://static.igem.org/mediawiki/2021/9/9e/T--CPU_CHINA--Home--MnP.png",
 +
                    "https://static.igem.org/mediawiki/2021/f/f4/T--CPU_CHINA--Home--AAO.png",
 +
                    "https://static.igem.org/mediawiki/2021/f/fc/T--CPU_CHINA--Home--HFB1.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"
 +
                ],
 +
                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: {
 +
                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]
 +
                },
 +
                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]
 +
                    }
 +
                }
 +
            }
 +
        })
 +
        var last = new Vue({
 +
            el: "#last",
 +
            data: {
 +
                lastNum: -1,
 +
                lastImg: "",
 +
                imgHover: [
 +
                    "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/3/3a/T--CPU_CHINA--Home--Team2.png"
 +
                ],
 +
                drugs: [
 +
                    {
 +
                        url: "https://2021.igem.org/Team:CPU_CHINA/Design",
 +
                        img: "https://static.igem.org/mediawiki/2021/f/fa/T--CPU_CHINA--Home--Project1.png",
 +
                        name: "Project",
 +
                        num: 0
 +
                    },
 +
                    {
 +
                        url: "https://2021.igem.org/Team:CPU_CHINA/Model",
 +
                        img: "https://static.igem.org/mediawiki/2021/3/36/T--CPU_CHINA--Home--Modeling1.png",
 +
                        name: "Model",
 +
                        num: 1
 +
                    },
 +
                    {
 +
                        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",
 +
                        name: "Human Practices",
 +
                        num: 2
 +
                    },
 +
                    {
 +
                        url: "https://2021.igem.org/Team:CPU_CHINA/MeddyRelightMyStar",
 +
                        img: "https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Team1.png",
 +
                        name: "Meddy:Relight My Star",
 +
                        num: 3
 +
                    }
 +
                ]
 +
            },
 +
            methods: {
 +
                overItem(item) {
 +
                    this.lastNum = item.Num
 +
                    console.log(item)
 +
                    this.lastImg = item.img
 +
                    item.img = this.imgHover[item.num]
 +
                },
 +
                leaveItem(item) {
 +
                    item.img = this.lastImg;
 +
                }
 +
            }
 +
        })
 
     </script>
 
     </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

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