Difference between revisions of "Team:CPU CHINA"
CoderxinCPU (Talk | contribs) |
|||
| Line 14: | Line 14: | ||
</head> | </head> | ||
<style> | <style> | ||
| − | body{ | + | body { |
background-color: #FAFAFA !important; | background-color: #FAFAFA !important; | ||
} | } | ||
| + | |||
#first { | #first { | ||
padding: 0 12%; | padding: 0 12%; | ||
} | } | ||
| + | |||
#mw-content-text { | #mw-content-text { | ||
| − | + | height: 460vw | |
| − | + | } | |
| − | } | + | |
#first #title { | #first #title { | ||
| Line 185: | Line 186: | ||
float: right; | float: right; | ||
margin-right: 5%; | margin-right: 5%; | ||
| − | + | ||
/*z-index: 9;*/ | /*z-index: 9;*/ | ||
} | } | ||
| − | #second .pimg2{ | + | #second .pimg2 { |
float: right; | float: right; | ||
margin-right: 25%; | margin-right: 25%; | ||
| Line 290: | Line 291: | ||
} | } | ||
| − | #third img{ | + | /* #third img { |
margin: -20px; | margin: -20px; | ||
| − | } | + | } */ |
#third #machine img { | #third #machine img { | ||
width: 70%; | width: 70%; | ||
margin: 0; | margin: 0; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 307: | Line 303: | ||
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; | ||
| Line 335: | Line 331: | ||
} | } | ||
| − | #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: 450px) { | @media screen and (max-width: 450px) { | ||
| Line 354: | Line 349: | ||
width: 20%; | width: 20%; | ||
} | } | ||
| − | + | ||
#second #layer { | #second #layer { | ||
display: none; | display: none; | ||
| Line 427: | Line 422: | ||
<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="polution pimg1" src="https://static.igem.org/mediawiki/2021/f/f4/T--CPU_CHINA--Home--quater.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="polution pimg2" src="https://static.igem.org/mediawiki/2021/d/d8/T--CPU_CHINA--Home--badRecycle.GIF" |
| + | alt=""> | ||
<p class="polution polution3">But, luckily</p> | <p class="polution polution3">But, luckily</p> | ||
</div> | </div> | ||
| Line 442: | Line 439: | ||
<div id="machine"> | <div id="machine"> | ||
<p class="area1"> | <p class="area1"> | ||
| − | <img src=" | + | <img :src="defaultImg['machineImg0']" alt="" style="width: 37.304%;" @mouseover="moveOn(0)" |
| − | + | @mouseleave="moveLeave(0)"> | |
| − | <img src=" | + | <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)" | |
| − | <img src=" | + | @mouseleave="moveLeave(2)"> |
| − | + | ||
</p> | </p> | ||
| − | <img src=" | + | <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)"> | |
| − | <img src=" | + | |
| − | + | ||
</div> | </div> | ||
<img width="60%" :src="describe" alt=""> | <img width="60%" :src="describe" alt=""> | ||
| Line 460: | Line 454: | ||
<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 | + | <p @mouseover="overItem(item)" @mouseleave="leaveItem(item)">{{item.name}}</p> |
</a> | </a> | ||
</li> | </li> | ||
| Line 557: | Line 551: | ||
}); | }); | ||
$(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 580: | Line 574: | ||
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) | ||
| − | |||
} | } | ||
}) | }) | ||
| Line 684: | Line 677: | ||
"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: { | ||
| − | + | 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] | ||
| + | } | ||
} | } | ||
} | } | ||
Revision as of 18:25, 20 October 2021
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