Difference between revisions of "Team:CPU CHINA/Awards"

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: 100vw;
+
             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&amp;ctype=text/javascript">
 +
        </script>
 +
    <script
 +
        src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/Jquery &action=raw&amp;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

Document