Difference between revisions of "Team:CPU CHINA"

Line 147: Line 147:
 
     }
 
     }
  
−
     #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 161: Line 161:
 
     }
 
     }
  
−
     #second .polution1{
+
     #second .polution1 {
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
 
         /*z-index: 9;*/
 
         /*z-index: 9;*/
 
     }
 
     }
−
       
 
  
−
     #second .polution2{
+
 
 +
     #second .polution2 {
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
Line 175: Line 175:
 
     }
 
     }
  
−
     #second .polution3{
+
     #second .polution3 {
 
         float: right;
 
         float: right;
 
         margin-right: 5%;
 
         margin-right: 5%;
Line 182: Line 182:
 
     }
 
     }
  
−
     #anchor1{
+
     #anchor1 {
−
         margin-top:60%
+
         margin-top: 60%
 
     }
 
     }
  
Line 201: Line 201:
 
     }
 
     }
  
−
     #sticky img{
+
     #sticky img {
 
         position: absolute;
 
         position: absolute;
 
         bottom: 0;
 
         bottom: 0;
Line 242: Line 242:
 
     }
 
     }
  
 +
    #third {
 +
        margin: 180% 0 0;
 +
        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;
 +
    }
 +
 +
    #third #machine p {
 +
        margin: 0;
 +
    }
 +
 +
    #third #machine .area1 {
 +
        display: flex;
 +
        justify-content: center;
 +
        align-items: center;
 +
        flex-direction: row;
 +
    }
 +
 +
    #third #machine img {
 +
        width: 70%;
 +
    }
 +
 +
    #third #machine img:hover {
 +
        opacity: 25%;
 +
    }
 +
 +
    #last {
 +
        display: flex;
 +
        padding: 0;
 +
        flex-wrap: wrap;
 +
        align-items: center;
 +
        justify-content: center;
 +
    }
 +
 +
    #last li {
 +
        width: 200px;
 +
        padding: 0;
 +
        margin: 2%;
 +
        font-family: "CABIN-REGULAR";
 +
        justify-content: center;
 +
        flex-direction: column;
 +
        align-items: center;
 +
        text-align: center;
 +
    }
 +
 +
    #last li img {
 +
        margin-bottom: 2vw;
 +
        width: 100%;
 +
    }
 +
 +
    #last li p {
 +
        color: #ffffff;
 +
        font-size: 1.1em;
 +
        text-align: center;
 +
    }
  
 
     @media screen and (max-width: 450px) {
 
     @media screen and (max-width: 450px) {
Line 327: Line 391:
 
         </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">Among them, PE plastic is the most widely used in express packaging, and PE
−
             <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>
+
                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>
 
             <img class="polution" style="height: auto;" src="./data/Home/Meddy/QQ图片20211019002216.gif" alt="">
 
             <img class="polution" style="height: auto;" src="./data/Home/Meddy/QQ图片20211019002216.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>
Line 339: Line 405:
 
     </div>
 
     </div>
 
     <p id="anchor2"></p>
 
     <p id="anchor2"></p>
−
     <div id="last" style="margin:150% 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.
+
            <p class="area1">
−
        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.
+
                <img src="https://static.igem.org/mediawiki/2021/3/31/T--CPU_CHINA--Home--Sum1.PNG" alt=""
−
        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.
+
                    style="width: 37.304%;" @mouseover="imgDescribe(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?
+
                <img src="https://static.igem.org/mediawiki/2021/8/8b/T--CPU_CHINA--Home--Sum2.PNG" alt=""
−
        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!
+
                    style="width: 23.34%;" @mouseover="imgDescribe(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!
+
                <img src="https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Sum3.PNG" alt=""
−
        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!
+
                    style="width: 39.306%;" @mouseover="imgDescribe(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!
+
            </p>
−
         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?
+
            <img src="https://static.igem.org/mediawiki/2021/c/c2/T--CPU_CHINA--Home--Sum4.PNG" alt="" style="width: 100%;"
 +
                @mouseover="imgDescribe(3)">
 +
            <img src="https://static.igem.org/mediawiki/2021/d/de/T--CPU_CHINA--Home--Sum5.PNG" alt="" style="width: 100%;"
 +
                @mouseover="imgDescribe(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>{{item.name}}</p>
 +
            </a>
 +
        </li>
 +
    </ul>
 
     <footer>
 
     <footer>
 
         <div id="sponsor">
 
         <div id="sponsor">
Line 366: Line 445:
 
                 <li>
 
                 <li>
 
                     <a href="cpuchina2021@163.com">
 
                     <a href="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 479:
 
     <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 515: Line 619:
 
             let index = frame - 1
 
             let index = frame - 1
 
             if (index < 0) index = 0
 
             if (index < 0) index = 0
−
             if (index > 54) index = 54
+
             if (index > 41) index = 41
  
 
             let context = $('#iphone-se')[0].getContext('2d')
 
             let context = $('#iphone-se')[0].getContext('2d')
Line 525: Line 629:
  
 
         }
 
         }
 +
        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"
 +
                ]
 +
            },
 +
            methods: {
 +
                imgDescribe(num) {
 +
                    this.describe = this.areaDescribe[num]
 +
                }
 +
            }
 +
        })
 +
        var last = new Vue({
 +
            el: "#last",
 +
            data: {
 +
                lastNum: -1,
 +
                lastImg: "",
 +
                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/b/b5/T--CPU_CHINA--Home--HP2.png",
 +
                    "https://static.igem.org/mediawiki/2021/1/1e/T--CPU_CHINA--Home--Modeling2.png"
 +
                ],
 +
                drugs: [
 +
                    {
 +
                        url: "https://2021.igem.org/Team:CPU_CHINA/Team",
 +
                        img: "https://static.igem.org/mediawiki/2021/d/dd/T--CPU_CHINA--Home--Team1.png",
 +
                        name: "Members",
 +
                        num: 0
 +
                    },
 +
                    {
 +
                        url: "",
 +
                        img: "https://static.igem.org/mediawiki/2021/f/fa/T--CPU_CHINA--Home--Project1.png",
 +
                        name: "",
 +
                        num: 1
 +
                    },
 +
                    {
 +
                        url: "",
 +
                        img: "https://static.igem.org/mediawiki/2021/4/4c/T--CPU_CHINA--Home--HP1.png",
 +
                        name: "",
 +
                        num: 2
 +
                    },
 +
                    {
 +
                        url: "",
 +
                        img: "https://static.igem.org/mediawiki/2021/3/36/T--CPU_CHINA--Home--Modeling1.png",
 +
                        name: "",
 +
                        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>

Revision as of 23:10, 18 October 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.

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.

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

But, luckily