CoderxinCPU (Talk | contribs) |
|||
(46 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | + | <html lang="en"> | |
− | + | ||
− | <html> | + | |
+ | <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"> | ||
+ | <title>Document</title> | ||
+ | <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"> | ||
+ | </head> | ||
+ | <style> | ||
+ | body { | ||
+ | background-color: #FAFAFA !important; | ||
+ | } | ||
+ | #header #award { | ||
+ | position: fixed; | ||
+ | bottom: 3vmin; | ||
+ | left: -3vmin; | ||
+ | width: 35vmin; | ||
+ | z-index: 11; | ||
+ | } | ||
− | + | #first { | |
− | + | padding: 0 12%; | |
− | + | } | |
− | + | #mw-content-text { | |
+ | height: 460vw | ||
+ | } | ||
− | + | #first #title { | |
+ | position: relative; | ||
+ | padding-top: 15%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #first #title #home-title { | ||
+ | font-family: "MONTSERRAT-BLACKITALIC2"; | ||
+ | line-height: normal; | ||
+ | text-align: center; | ||
+ | font-weight: bolder; | ||
+ | font-size: 6vw; | ||
+ | } | ||
− | + | #first #title #decoration { | |
+ | position: absolute; | ||
+ | top: 32%; | ||
+ | left: 39%; | ||
+ | width: 20%; | ||
+ | } | ||
− | + | #first #brief-introduction { | |
− | + | margin: 12% 0; | |
− | + | text-align: center; | |
− | + | font-family: "MONTSERRAT-BLACKITALIC2"; | |
− | + | font-size: 1.5vw; | |
− | + | letter-spacing: 0.25em; | |
− | + | color: #777777; | |
− | + | } | |
+ | #first .paragraph { | ||
+ | margin-bottom: 14%; | ||
+ | } | ||
− | + | #first .paragraph #img1 { | |
− | + | float: left; | |
− | + | width: 30%; | |
+ | } | ||
+ | #first .paragraph #img2 { | ||
+ | float: right; | ||
+ | width: 50%; | ||
+ | } | ||
+ | #first .paragraph #img3 { | ||
+ | float: left; | ||
+ | width: 30%; | ||
+ | } | ||
− | + | #first p { | |
− | + | line-height: 3vw; | |
− | + | font-size: 2vw; | |
− | + | letter-spacing: 0.05em; | |
+ | font-family: "MONTSERRAT-BLACK1"; | ||
+ | color: #373737; | ||
+ | } | ||
− | + | #first .paragraph #p1 { | |
+ | padding: 5vw 0; | ||
+ | float: right; | ||
+ | text-align: right; | ||
+ | width: 70%; | ||
+ | } | ||
+ | #first .paragraph #p2 { | ||
+ | padding: 3vw 0; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | width: 50%; | ||
+ | } | ||
+ | #first .paragraph #p3 { | ||
+ | padding: 1.5vw 0; | ||
+ | float: right; | ||
+ | text-align: right; | ||
+ | width: 70%; | ||
+ | } | ||
+ | #first #transition { | ||
+ | text-align: center; | ||
+ | } | ||
− | + | #first .paragraph :nth-child(2) { | |
+ | float: left; | ||
+ | } | ||
+ | #second #layer { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | #second #layer .rubbish { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | } | ||
− | + | #second #layer #rubbish1 { | |
+ | top: 25vw; | ||
+ | z-index: 4; | ||
+ | } | ||
− | + | #second #layer #rubbish2 { | |
− | + | top: 22vw; | |
+ | z-index: 2; | ||
+ | } | ||
+ | #second #layer #rubbish3 { | ||
+ | top: -80px; | ||
+ | z-index: 3; | ||
+ | } | ||
− | + | #second #layer #rubbish4 { | |
+ | top: 20vw; | ||
+ | z-index: 1; | ||
+ | } | ||
− | + | #second #layer2 img { | |
− | + | display: none; | |
− | + | width: 100% | |
− | + | } | |
− | + | ||
− | + | #second #layer3 { | |
+ | position: relative; | ||
+ | z-index: 8; | ||
+ | top: 700px; | ||
+ | } | ||
− | + | #second .polution { | |
− | + | position: absolute; | |
− | + | height: 20%; | |
+ | width: 70%; | ||
+ | margin: 70% 15%; | ||
+ | color: #FAFAFA; | ||
+ | line-height: 3vw; | ||
+ | text-align: center; | ||
+ | font-size: 2vw; | ||
+ | letter-spacing: 0.05em; | ||
+ | font-family: "MONTSERRAT-BLACK1"; | ||
+ | z-index: 9; | ||
+ | } | ||
− | + | #second .polution1 { | |
+ | float: right; | ||
+ | margin-right: 5%; | ||
+ | margin-top: 10px; | ||
+ | /*z-index: 9;*/ | ||
+ | } | ||
+ | #second .pimg1 { | ||
+ | position: absolute; | ||
+ | margin-top: 25%; | ||
+ | width: 25%; | ||
+ | left: 37.5%; | ||
+ | } | ||
− | + | #second .polution2 { | |
− | + | float: right; | |
− | + | margin-right: 5%; | |
− | + | ||
− | + | ||
− | + | /*z-index: 9;*/ | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
+ | #second .pimg2 { | ||
+ | position: absolute; | ||
+ | margin-top: 90%; | ||
+ | width: 25%; | ||
+ | left: 37.5%; | ||
+ | } | ||
− | + | #second .polution3 { | |
− | + | float: right; | |
+ | margin-right: 5%; | ||
+ | margin-top: 140%; | ||
+ | /*z-index: 9;*/ | ||
+ | } | ||
+ | #anchor1 { | ||
+ | margin-top: 70% | ||
+ | } | ||
+ | body.loaded { | ||
+ | height: 4800px; | ||
+ | } | ||
+ | #sticky { | ||
+ | position: sticky; | ||
+ | top: 0; | ||
+ | background-color: #1f1f1f; | ||
+ | height: 100vh; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | #sticky img { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | display: none; | ||
+ | } | ||
− | + | canvas { | |
− | + | position: relative; | |
− | + | margin-top: 0; | |
+ | } | ||
− | + | #loading { | |
− | + | font-size: 28px; | |
− | + | font-family: Helvetica; | |
− | + | color: #fff; | |
− | + | position: absolute; | |
− | + | width: 45vw; | |
− | + | text-align: center; | |
− | + | z-index: 10; | |
− | + | font-weight: bold; | |
− | + | /* background: url('Meddy/T--CPU_CHINA--Home--ani01.PNG') no-repeat center center; */ | |
− | + | background-size: contain; | |
− | + | height: 100%; | |
− | + | display: flex; | |
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | transition: .5s opacity ease-in-out; | ||
+ | transition-delay: 2s; | ||
+ | } | ||
+ | #loading p { | ||
+ | margin-top: 40%; | ||
+ | } | ||
− | + | body.loaded #loading { | |
− | + | opacity: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | #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; | ||
+ | } | ||
+ | #third #machine p { | ||
+ | margin: 0; | ||
+ | } | ||
+ | #third #machine .area1 { | ||
+ | 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 { | ||
+ | padding: 40vh 0 30vh; | ||
+ | } | ||
+ | |||
+ | #first #title #decoration { | ||
+ | position: absolute; | ||
+ | top: 42vh; | ||
+ | left: 26vw; | ||
+ | width: 20%; | ||
+ | } | ||
+ | |||
+ | #second #layer { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #second #layer2 img { | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <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> | ||
+ | <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> | ||
+ | <div id="first"> | ||
+ | <div id="title"> | ||
+ | <h1 id="home-title">POLYETHYLENE DEGRADIST</h1> | ||
+ | <img id="decoration" src="https://static.igem.org/mediawiki/2021/a/ae/T--CPU_CHINA--Home--Pic3.gif" alt=""> | ||
+ | <p id="brief-introduction">a prescription for the earth affected by plastic polution</p> | ||
+ | </div> | ||
+ | <div class="paragraph clearfix"> | ||
+ | <img id="img1" src="https://static.igem.org/mediawiki/2021/9/9e/T--CPU_CHINA--Home--Pic1.png" alt=""> | ||
+ | <p id="p1">With the rapid development of e-commerce, the number of express delivery is increasing year by | ||
+ | year.</p> | ||
+ | </div> | ||
+ | <div class="paragraph clearfix"> | ||
+ | <p id="p2">In 2020, China's express delivery volume will reach</p> | ||
+ | <img id="img2" src="https://static.igem.org/mediawiki/2021/1/1f/T--CPU_CHINA--Home--Pic4.gif" alt=""> | ||
+ | </div> | ||
+ | <div class="paragraph clearfix"> | ||
+ | <img id="img3" src="https://static.igem.org/mediawiki/2021/b/bb/T--CPU_CHINA--Home--Pic2.PNG" alt=""> | ||
+ | <p id="p3">In order to ensure the integrity and safety of goods in express transportation, express | ||
+ | enterprises often need to package goods.</p> | ||
+ | </div> | ||
+ | <p id="transition">When the package arrives in the hands of consumers, packaging materials turn into packaging | ||
+ | waste.</p> | ||
+ | </div> | ||
+ | <div id="second"> | ||
+ | <div id="layer"> | ||
+ | <img class="rubbish" id="rubbish1" data-depth='1.00' data-type='parallax' | ||
+ | src="https://static.igem.org/mediawiki/2021/8/86/T--CPU_CHINA--Home--Rubbish1.png" alt=""> | ||
+ | <img class="rubbish" id="rubbish2" data-depth='0.80' data-type='parallax' | ||
+ | src="https://static.igem.org/mediawiki/2021/b/b4/T--CPU_CHINA--Home--Rubbish2.PNG" alt=""> | ||
+ | <img class="rubbish" id="rubbish3" data-depth='0.10' data-type=' parallax' | ||
+ | src="https://static.igem.org/mediawiki/2021/0/0e/T--CPU_CHINA--Home--Rubbish3.GIF" alt=""> | ||
+ | <img class="rubbish" id="rubbish4" data-depth='0.50' data-type='parallax' | ||
+ | src="https://static.igem.org/mediawiki/2021/4/47/T--CPU_CHINA--Home--Rubbish4.PNG" alt=""> | ||
+ | </div> | ||
+ | <div id="layer2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/8/8a/T--CPU_CHINA--Home--Rubbish.gif" alt=""> | ||
+ | </div> | ||
+ | <div id="layer3"> | ||
+ | <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> | ||
+ | <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> | ||
+ | </div> | ||
+ | </div> | ||
+ | <p id="anchor1"></p> | ||
+ | <div id="sticky"> | ||
+ | <canvas id="iphone-se" width="1024" height="587"></canvas> | ||
+ | </div> | ||
+ | <p id="anchor2"></p> | ||
+ | <div id="third"> | ||
+ | <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"> | ||
+ | <img :src="defaultImg['machineImg0']" alt="" style="width: 37.304%;" @mouseover="moveOn(0)" | ||
+ | @mouseleave="moveLeave(0)"> | ||
+ | <img :src="defaultImg['machineImg1']" alt="" style="width: 23.34%;" @mouseover="moveOn(1)" | ||
+ | @mouseleave="moveLeave(1)"> | ||
+ | <img :src="defaultImg['machineImg2']" alt="" style="width: 39.306%;" @mouseover="moveOn(2)" | ||
+ | @mouseleave="moveLeave(2)"> | ||
+ | </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> | ||
+ | <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> | ||
+ | <div id="sponsor"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/3/31/T--CPU_CHINA--Logoes.jpg" alt=""> | ||
+ | </div> | ||
+ | <div id="connect"> | ||
+ | <h4>Contact us</h4> | ||
+ | <ul id="contact"> | ||
+ | <li> | ||
+ | <a href="https://weibo.com/u/6054819039"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/b/ba/T--CPU_CHINA--weibologo.png" alt=""> | ||
+ | <p>@CPU_CHINA2021</p> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <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=""> | ||
+ | <p>cpuchina2021@163.com</p> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://github.com/cpu-igem/cpu-igem2021"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/9/98/T--CPU_CHINA--GithubLogo.png" alt=""> | ||
+ | <p>Like our Website?</p> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://international.cpu.edu.cn/"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/4/42/T--CPU_CHINA--CPUlogo.png" alt=""> | ||
+ | <p>International Communication</p> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </footer> | ||
+ | <script | ||
+ | src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/VueJS &action=raw&ctype=text/javascript"> | ||
+ | </script> | ||
+ | <script | ||
+ | src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/Jquery &action=raw&ctype=text/javascript"> | ||
+ | </script> | ||
+ | <script | ||
+ | src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/common_JS &action=raw&ctype=text/javascript"></script> | ||
+ | <script | ||
+ | src='https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/PxLoader &action=raw&ctype=text/javascript'></script> | ||
+ | <script | ||
+ | src='https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/PxLoaderImg &action=raw&ctype=text/javascript'></script> | ||
+ | <script | ||
+ | src='https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/JqueryAjax &action=raw&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> | ||
+ | window.addEventListener('scroll', function (event) { | ||
+ | if ($(window).scrollTop() >= $('#layer').offset().top) { | ||
+ | var depth, i, rubbish, rubbishs, len, movement, topDistance, translate3d; | ||
+ | topDistance = this.pageYOffset - ($('#layer').offset().top + 150); | ||
+ | rubbishs = document.querySelectorAll("[data-type='parallax']"); | ||
+ | for (i = 0, len = rubbishs.length; i < len; i++) { | ||
+ | rubbish = rubbishs[i]; | ||
+ | depth = rubbish.getAttribute('data-depth'); | ||
+ | movement = -(topDistance * depth); | ||
+ | translate3d = 'translate3d(0, ' + movement + 'px, 0)'; | ||
+ | rubbish.style['-webkit-transform'] = translate3d; | ||
+ | rubbish.style['-moz-transform'] = translate3d; | ||
+ | rubbish.style['-ms-transform'] = translate3d; | ||
+ | rubbish.style['-o-transform'] = translate3d; | ||
+ | rubbish.style.transform = translate3d; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | $(function () { | ||
+ | if ($(window).width() > $(window).height()) { | ||
+ | $('#iphone-se').width($(window).width()) | ||
+ | } else { | ||
+ | $('#iphone-se').height($(window).height()) | ||
+ | } | ||
+ | |||
+ | }) | ||
+ | |||
+ | $(window).on('scroll', function () { | ||
+ | let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight) | ||
+ | |||
+ | let frame = Math.ceil(scrolled * 41) | ||
+ | |||
+ | let currentH = document.documentElement.scrollTop; | ||
+ | let cStart = document.getElementById("anchor1").offsetTop | ||
+ | let cEnd = document.getElementById("anchor2").offsetTop | ||
+ | if (currentH >= cStart) { | ||
+ | changeFrame(Math.ceil((currentH - cStart) / 2000 * 41)) | ||
+ | } | ||
+ | |||
+ | let currentheight = document.documentElement.scrollTop; | ||
+ | |||
+ | let top = -(currentheight - (currentH - cStart) / 2000 * 41 - cStart) | ||
+ | if (top < 0) { | ||
+ | let topCss = "top:" + top + "px" | ||
+ | $("#sticky").css(topCss) | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | const loader = new PxLoader() | ||
+ | const img = [ | ||
+ | "https://static.igem.org/mediawiki/2021/4/41/T--CPU_CHINA--Home--falling_01.png", | ||
+ | "https://static.igem.org/mediawiki/2021/d/d5/T--CPU_CHINA--Home--falling_02.png", | ||
+ | "https://static.igem.org/mediawiki/2021/b/b7/T--CPU_CHINA--Home--falling_03.png", | ||
+ | "https://static.igem.org/mediawiki/2021/d/d3/T--CPU_CHINA--Home--falling_04.png", | ||
+ | "https://static.igem.org/mediawiki/2021/c/c6/T--CPU_CHINA--Home--falling_05.png", | ||
+ | "https://static.igem.org/mediawiki/2021/2/2c/T--CPU_CHINA--Home--falling_06.png", | ||
+ | "https://static.igem.org/mediawiki/2021/0/05/T--CPU_CHINA--Home--falling_07.png", | ||
+ | "https://static.igem.org/mediawiki/2021/5/5a/T--CPU_CHINA--Home--falling_08.png", | ||
+ | "https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--Home--falling_09.png", | ||
+ | "https://static.igem.org/mediawiki/2021/0/0d/T--CPU_CHINA--Home--falling_10.png", | ||
+ | "https://static.igem.org/mediawiki/2021/7/77/T--CPU_CHINA--Home--falling_11.png", | ||
+ | "https://static.igem.org/mediawiki/2021/b/b7/T--CPU_CHINA--Home--falling_12.png", | ||
+ | "https://static.igem.org/mediawiki/2021/e/e9/T--CPU_CHINA--Home--falling_13.png", | ||
+ | "https://static.igem.org/mediawiki/2021/7/73/T--CPU_CHINA--Home--falling_14.png", | ||
+ | "https://static.igem.org/mediawiki/2021/5/58/T--CPU_CHINA--Home--falling_15.png", | ||
+ | "https://static.igem.org/mediawiki/2021/9/90/T--CPU_CHINA--Home--falling_16.png", | ||
+ | "https://static.igem.org/mediawiki/2021/b/b1/T--CPU_CHINA--Home--falling_17.png", | ||
+ | "https://static.igem.org/mediawiki/2021/0/0c/T--CPU_CHINA--Home--falling_18.png", | ||
+ | "https://static.igem.org/mediawiki/2021/5/59/T--CPU_CHINA--Home--falling_19.png", | ||
+ | "https://static.igem.org/mediawiki/2021/c/c7/T--CPU_CHINA--Home--falling_20.png", | ||
+ | "https://static.igem.org/mediawiki/2021/3/38/T--CPU_CHINA--Home--falling_21.png", | ||
+ | "https://static.igem.org/mediawiki/2021/8/88/T--CPU_CHINA--Home--falling_22.png", | ||
+ | "https://static.igem.org/mediawiki/2021/2/26/T--CPU_CHINA--Home--falling_23.png", | ||
+ | "https://static.igem.org/mediawiki/2021/a/a2/T--CPU_CHINA--Home--falling_24.png", | ||
+ | "https://static.igem.org/mediawiki/2021/1/11/T--CPU_CHINA--Home--falling_25.png", | ||
+ | "https://static.igem.org/mediawiki/2021/b/bb/T--CPU_CHINA--Home--falling_26.png", | ||
+ | "https://static.igem.org/mediawiki/2021/5/50/T--CPU_CHINA--Home--falling_27.png", | ||
+ | "https://static.igem.org/mediawiki/2021/f/fc/T--CPU_CHINA--Home--falling_28.png", | ||
+ | "https://static.igem.org/mediawiki/2021/1/13/T--CPU_CHINA--Home--falling_29.png", | ||
+ | "https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--Home--falling_30.png", | ||
+ | "https://static.igem.org/mediawiki/2021/4/4f/T--CPU_CHINA--Home--falling_31.png", | ||
+ | "https://static.igem.org/mediawiki/2021/b/b2/T--CPU_CHINA--Home--falling_32.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/68/T--CPU_CHINA--Home--falling_33.png", | ||
+ | "https://static.igem.org/mediawiki/2021/9/9a/T--CPU_CHINA--Home--falling_34.png", | ||
+ | "https://static.igem.org/mediawiki/2021/f/f1/T--CPU_CHINA--Home--falling_35.png", | ||
+ | "https://static.igem.org/mediawiki/2021/4/4f/T--CPU_CHINA--Home--falling_36.png", | ||
+ | "https://static.igem.org/mediawiki/2021/1/1f/T--CPU_CHINA--Home--falling_37.png", | ||
+ | "https://static.igem.org/mediawiki/2021/d/dc/T--CPU_CHINA--Home--falling_38.png", | ||
+ | "https://static.igem.org/mediawiki/2021/9/91/T--CPU_CHINA--Home--falling_39.png", | ||
+ | "https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--Home--falling_40.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png", | ||
+ | "https://static.igem.org/mediawiki/2021/6/64/T--CPU_CHINA--Home--falling_41.png" | ||
+ | ] | ||
+ | const images = [] | ||
+ | |||
+ | for (let i = 0; i < img.length; i++) { | ||
+ | images[i] = loader.addImage(img[i]) | ||
+ | } | ||
+ | |||
+ | loader.addCompletionListener(function () { | ||
+ | let context = $('#iphone-se')[0].getContext('2d') | ||
+ | |||
+ | $('body').addClass('loaded') | ||
+ | |||
+ | context.drawImage(images[0], 0, 0, 1024, 587) | ||
+ | |||
+ | }) | ||
+ | |||
+ | loader.start() | ||
+ | |||
+ | function changeFrame(frame) { | ||
+ | let index = frame - 1 | ||
+ | if (index < 0) index = 0 | ||
+ | if (index > 41) index = 41 | ||
+ | |||
+ | let context = $('#iphone-se')[0].getContext('2d') | ||
+ | |||
+ | context.clearRect(0, 0, 1024, 587); | ||
+ | |||
+ | |||
+ | context.drawImage(images[index], 0, 0, 1024, 587) | ||
+ | |||
+ | } | ||
+ | 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> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 06:07, 23 November 2021
![](https://static.igem.org/mediawiki/2021/c/c4/T--CPU_CHINA--loading.gif)
![](https://static.igem.org/mediawiki/2021/4/46/T--CPU_CHINA--award.gif)
POLYETHYLENE DEGRADIST
![](https://static.igem.org/mediawiki/2021/a/ae/T--CPU_CHINA--Home--Pic3.gif)
a prescription for the earth affected by plastic polution
![](https://static.igem.org/mediawiki/2021/9/9e/T--CPU_CHINA--Home--Pic1.png)
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
![](https://static.igem.org/mediawiki/2021/1/1f/T--CPU_CHINA--Home--Pic4.gif)
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.
![](https://static.igem.org/mediawiki/2021/8/86/T--CPU_CHINA--Home--Rubbish1.png)
![](https://static.igem.org/mediawiki/2021/8/8a/T--CPU_CHINA--Home--Rubbish.gif)
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