Line 1: | Line 1: | ||
<html lang="en"> | <html lang="en"> | ||
+ | |||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
Line 6: | Line 7: | ||
<title>Document</title> | <title>Document</title> | ||
<style> | <style> | ||
− | video{ | + | #header #load { |
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | display: flex; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: white; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | z-index: 20; | ||
+ | } | ||
+ | |||
+ | #header #load img { | ||
+ | width: 50vmin; | ||
+ | } | ||
+ | |||
+ | video { | ||
position: absolute; | position: absolute; | ||
left: 0; | left: 0; | ||
top: 0; | top: 0; | ||
− | width: | + | width: 100%; |
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
− | <video autoplay loop> | + | <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> | ||
+ | </header> | ||
+ | <video autoplay="true" loop="true" preload="auto"> | ||
<source src="https://static.igem.org/mediawiki/2021/3/34/T--CPU_CHINA--Award.mp4" type="video/mp4"> | <source src="https://static.igem.org/mediawiki/2021/3/34/T--CPU_CHINA--Award.mp4" type="video/mp4"> | ||
</video> | </video> | ||
+ | <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> | ||
+ | let load = new Vue({ | ||
+ | el: "#header", | ||
+ | data: { | ||
+ | loading: true | ||
+ | }, | ||
+ | beforeCreate() { | ||
+ | this.loading = true; | ||
+ | }, | ||
+ | mounted() { | ||
+ | this.$nextTick(function () { | ||
+ | setTimeout(() => { | ||
+ | this.loading = false; | ||
+ | }, 1100) | ||
+ | }) | ||
+ | } | ||
+ | }) | ||
+ | </script> | ||
</body> | </body> | ||
+ | |||
</html> | </html> |
Revision as of 04:04, 23 November 2021
![](https://static.igem.org/mediawiki/2021/c/c4/T--CPU_CHINA--loading.gif)