浏览代码

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
 .share {
41
 .share {
42
   z-index: 3;
42
   z-index: 3;
43
   position: absolute;
43
   position: absolute;
44
-  top: 154vw;
44
+  top: 100vw;
45
   /* align-items: center; */
45
   /* align-items: center; */
46
   /* width: 47%; */
46
   /* width: 47%; */
47
   /* margin: 0 auto; */
47
   /* margin: 0 auto; */

+ 21
- 0
src/pages/signup.vue 查看文件

1
 <template>
1
 <template>
2
   <div class="signup-box">
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
     <img class="bgi" src="../../public/images/signup/bgi.jpg" />
6
     <img class="bgi" src="../../public/images/signup/bgi.jpg" />
4
     <div class="form">
7
     <div class="form">
5
       <div class="formItem">
8
       <div class="formItem">
65
   },
68
   },
66
   data() {
69
   data() {
67
     return {
70
     return {
71
+      showPreload: true,
68
       showArea: false,
72
       showArea: false,
69
       checked: `./images/signup/checked.png`,
73
       checked: `./images/signup/checked.png`,
70
       Unchecked: `./images/signup/Unchecked.png`,
74
       Unchecked: `./images/signup/Unchecked.png`,
213
   height: 100%;
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
 .bgi {
237
 .bgi {
217
   width: 100%;
238
   width: 100%;
218
   position: absolute;
239
   position: absolute;