提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -2,14 +2,16 @@
   <div class="SilkRoadSpringFestivalGala">
     <div class="screen" v-if="page == 'first'">
       <div class="first">
-        <img class="head" src="../../assets/img/GNie.gif" alt="" />
-        <div class="loading" @click="tosecond">
-          <div class="loading1">
-            <div class="loading2"></div>
+        <div class="mian_first">
+          <img class="head" src="../../assets/img/GNie.gif" alt="" />
+          <div class="loading" @click="tosecond">
+            <div class="loading1">
+              <div class="loading2"></div>
+            </div>
           </div>
+          <div class="titleClass" @click="tosecond">点击开始</div>
+          <div class="subtitle" @click="tosecond">PRESS START</div>
         </div>
-        <div class="titleClass" @click="tosecond">点击开始</div>
-        <div class="subtitle" @click="tosecond">PRESS START</div>
         <!-- <div class="first_text">
            <p v-for="v in first_text_view" :key="v">
             <span v-for="val in v" v-text="val" :key="val"></span>
@@ -100,9 +102,15 @@ function changePage(type) {
 </script>
 <style lang="scss">
 .SilkRoadSpringFestivalGala {
+  .mian_first {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
   .loading {
-    width: 5em;
-    height: 5em;
+    width: 4em;
+    height: 4em;
     margin: 0 auto;
     transition: all 1s;
     position: relative;
@@ -135,12 +143,12 @@ function changePage(type) {
     }
   }
   .titleClass {
-    font-size: 20px;
+    font-size: 18px;
     color: #ffffff;
     text-align: center;
   }
   .subtitle {
-    font-size: 12px;
+    font-size: 10px;
     color: #ffffff;
     text-align: center;
   }
@@ -207,6 +215,7 @@ function changePage(type) {
     .head {
       display: block;
       margin: 0 auto;
+      width: 60vw;
     }
     .first_text {
       position: absolute;