ソースを参照

add preload image

张延森 3 年 前
コミット
195ca79cf8
共有5 個のファイルを変更した22 個の追加1 個の削除を含む
  1. バイナリ
      public/images/result/resultbgi.jpg
  2. バイナリ
      public/images/signup/bgi.jpg
  3. バイナリ
      public/images/signup/preload.jpg
  4. 1
    1
      src/pages/resultPage.vue
  5. 21
    0
      src/pages/signup.vue

バイナリ
public/images/result/resultbgi.jpg ファイルの表示


バイナリ
public/images/signup/bgi.jpg ファイルの表示


バイナリ
public/images/signup/preload.jpg ファイルの表示


+ 1
- 1
src/pages/resultPage.vue ファイルの表示

@@ -41,7 +41,7 @@ export default {
41 41
 .share {
42 42
   z-index: 3;
43 43
   position: absolute;
44
-  top: 154vw;
44
+  top: 100vw;
45 45
   /* align-items: center; */
46 46
   /* width: 47%; */
47 47
   /* margin: 0 auto; */

+ 21
- 0
src/pages/signup.vue ファイルの表示

@@ -1,5 +1,8 @@
1 1
 <template>
2 2
   <div class="signup-box">
3
+    <div class="pre-load" :class="{ hide: !showPreload }" @click="showPreload = false">
4
+      <img src="../../public/images/signup/preload.jpg" alt="">
5
+    </div>
3 6
     <img class="bgi" src="../../public/images/signup/bgi.jpg" />
4 7
     <div class="form">
5 8
       <div class="formItem">
@@ -65,6 +68,7 @@ export default {
65 68
   },
66 69
   data() {
67 70
     return {
71
+      showPreload: true,
68 72
       showArea: false,
69 73
       checked: `./images/signup/checked.png`,
70 74
       Unchecked: `./images/signup/Unchecked.png`,
@@ -213,6 +217,23 @@ export default {
213 217
   height: 100%;
214 218
 }
215 219
 
220
+.pre-load {
221
+  position: fixed;
222
+  width: 100%;
223
+  min-height: 100%;
224
+  z-index: 100;
225
+  top: 0;
226
+  transition: top 1s ease;
227
+
228
+  & > img {
229
+    width: 100%;
230
+  }
231
+
232
+  &.hide {
233
+    top: -200vh;
234
+  }
235
+}
236
+
216 237
 .bgi {
217 238
   width: 100%;
218 239
   position: absolute;