浏览代码

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;