H5
/
njDaTuSha
Watch 4
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

feats

Yansen 2 years ago
parent
951c301b2d
commit
2e2f54ec75
15 changed files with 152 additions and 81 deletions
Split View Show Diff Stats
  1. 1
    1
      index.html
  2. BIN
      public/images/goback.png
  3. BIN
      public/images/pg3/采访1.png
  4. BIN
      public/images/pg3/采访2.png
  5. BIN
      public/images/pg3/采访3.png
  6. BIN
      public/images/pg3/采访4.png
  7. BIN
      public/images/pg3/采访5.png
  8. 36
    0
      src/components/Btn.vue
  9. 2
    8
      src/components/GoBack.vue
  10. 3
    1
      src/components/Popup.vue
  11. 5
    27
      src/pages/Loading.vue
  12. 22
    20
      src/pages/bk1/index.vue
  13. 62
    0
      src/pages/pg3/Persons.vue
  14. 17
    24
      src/pages/pg3/index.vue
  15. 4
    0
      src/style.less

+ 1
- 1
index.html View File 

@@ -3,7 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="UTF-8" />
5 5 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
7 7 
     <script src="./wx/jweixin-1.6.0.js"></script>
8 8 
     <script src="./jquery.1.9.1.js"></script>
9 9 
     <script src="./turn.min.js"></script>

BIN
public/images/goback.png View File


BIN
public/images/pg3/采访1.png View File


BIN
public/images/pg3/采访2.png View File


BIN
public/images/pg3/采访3.png View File


BIN
public/images/pg3/采访4.png View File


BIN
public/images/pg3/采访5.png View File


+ 36
- 0
src/components/Btn.vue View File 

@@ -0,0 +1,36 @@
1 
+<template>
2 
+  <div class="btn"><slot /></div>
3 
+</template>
4 
+
5 
+<script setup>
6 
+</script>
7 
+
8 
+<style lang="less" scoped>
9 
+
10 
+.btn {
11 
+  @color: #9C8B7C;
12 
+
13 
+  position: relative;
14 
+  min-width: 30vw;
15 
+  height: 10vw;
16 
+  line-height: 10vw;
17 
+  display: inline-block;
18 
+  margin: auto;
19 
+  color: #EEDDC1;
20 
+  background: @color;
21 
+  text-align: center;
22 
+  box-sizing: border-box;
23 
+  padding: 0 1em;
24 
+
25 
+  &::after {
26 
+    content: '';
27 
+    width: 100%;
28 
+    height: 100%;
29 
+    border-bottom: 2px solid @color;
30 
+    border-right: 2px solid @color;
31 
+    position: absolute;
32 
+    bottom: -4px;
33 
+    right: -4px;
34 
+  }
35 
+}
36 
+</style>

src/pages/bk1/GoBack.vue → src/components/GoBack.vue View File 

@@ -1,16 +1,10 @@
1 1 
 <template>
2 
-  <div class="goback-box" @click="onClick">
3 
-    <img src="/images/bk1/goback.png" alt="">
2 
+  <div class="goback-box">
3 
+    <img src="/images/goback.png" alt="">
4 4 
   </div>
5 5 
 </template>
6 6
7 7 
 <script setup>
8 
-  import { useRouter } from 'vue-router';
9 
-  const router = useRouter();
10 
-
11 
-  const onClick = () => {
12 
-    router.go(-1);
13 
-  }
14 8 
 </script>
15 9
16 10

+ 3
- 1
src/components/Popup.vue View File 

@@ -1,5 +1,5 @@
1 1 
 <template>
2 
-  <div class="popup pg-bg" @touchmove.prevent>
2 
+  <div class="popup animate__animated animate__fadeIn" @touchmove.prevent>
3 3 
     <slot />
4 4 
   </div>
5 5 
 </template>
 
@@ -16,5 +16,7 @@
16 16 
   width: 100vw;
17 17 
   height: 100vh;
18 18 
   box-sizing: border-box;
19 
+  z-index: 1000;
20 
+  animation-duration: 200ms;
19 21 
 }
20 22 
 </style>

+ 5
- 27
src/pages/Loading.vue View File 

@@ -8,8 +8,8 @@
8 8 
           <div class="process-percent">{{percent}}</div>
9 9 
         </div>
10 10 
         <div v-else class="select-lan">
11 
-          <div class="btn" @click="onSelect('zh')">中文版</div>
12 
-          <div class="btn" @click="onSelect('en')">English</div>
11 
+          <div><Btn class="btn" @click="onSelect('zh')">中文版</Btn></div>
12 
+          <div><Btn class="btn" @click="onSelect('en')">English</Btn></div>
13 13 
         </div>
14 14 
       </div>
15 15 
     </div>
 
@@ -21,6 +21,7 @@
21 21
22 22 
 <script setup>
23 23 
   import { onMounted, ref } from 'vue';
24 
+  import Btn from '@/components/Btn.vue';
24 25 
   import { useI18n } from 'vue-i18n';
25 26 
   import { preload } from '@/utils/preload'
26 27 
 
@@ -120,31 +121,8 @@
120 121 
     .select-lan {
121 122 
       margin-top: 100px;
122 123
123 
-      .btn {
124 
-        @color: #9C8B7C;
125 
-
126 
-        position: relative;
127 
-        width: 30vw;
128 
-        height: 10vw;
129 
-        display: block;
130 
-        margin: auto;
131 
-        color: #EEDDC1;
132 
-        background: @color;
133 
-        text-align: center;
134 
-        line-height: 10vw;
135 
-
136 
-        &::after {
137 
-          content: '';
138 
-          width: 100%;
139 
-          height: 100%;
140 
-          border-bottom: 2px solid @color;
141 
-          border-right: 2px solid @color;
142 
-          position: absolute;
143 
-          bottom: -4px;
144 
-          right: -4px;
145 
-        }
146 
-
147 
-        & + .btn {
124 
+      div {
125 
+        & + div {
148 126 
           margin-top: 10vw;
149 127 
         }
150 128 
       }

+ 22
- 20
src/pages/bk1/index.vue View File 

@@ -1,6 +1,6 @@
1 1 
 <template>
2 2 
   <div class="bk-pg">
3 
-    <GoBack class="goback abs" />
3 
+    <GoBack class="goback abs" @click="router.go(-1)" />
4 4 
     <div id="bk1">
5 5 
       <Pg1 />
6 6 
       <Pg2 />
 
@@ -10,32 +10,34 @@
10 10 
 </template>
11 11
12 12 
 <script setup>
13 
-import { onMounted } from 'vue';
14 
-import { useRoute } from 'vue-router';
15 
-import GoBack from './GoBack.vue';
16 
-import Pg1 from './pg1.vue';
17 
-import Pg2 from './pg2.vue';
18 
-import Pg3 from './pg3.vue';
19 
-
20 
-const { query } = useRoute();
21 
-const { page = 1 } = query || {};
22 
-
23 
-onMounted(() => {
24 
-  $("#bk1").turn({
25 
-    width: '100vw',
26 
-    height: '100vh',
27 
-    display: 'single',
28 
-    page,
29 
-    pages: 3
13 
+  import { onMounted } from 'vue';
14 
+  import { useRoute, useRouter } from 'vue-router';
15 
+  import GoBack from '@/components/GoBack.vue';
16 
+  import Pg1 from './pg1.vue';
17 
+  import Pg2 from './pg2.vue';
18 
+  import Pg3 from './pg3.vue';
19 
+
20 
+  const router = useRouter();
21 
+  const { query } = useRoute();
22 
+  const { page = 1 } = query || {};
23 
+
24 
+  onMounted(() => {
25 
+    $("#bk1").turn({
26 
+      width: '100vw',
27 
+      height: '100vh',
28 
+      display: 'single',
29 
+      page,
30 
+      pages: 3
31 
+    });
30 32 
   });
31 
-});
32 33 
 </script>
33 34
34 35 
 <style lang="less">
35 36 
 .bk-pg {
36 
-  height: 100vh;
37 
+  height: 100%;
37 38 
   position: relative;
38 39
40 
+
39 41 
   .goback {
40 42 
     top: 8px;
41 43 
     left: 8px;

+ 62
- 0
src/pages/pg3/Persons.vue View File 

@@ -0,0 +1,62 @@
1 
+<template>
2 
+  <Popup class="popup pg-bg">
3 
+    <GoBack class="goback abs" @click="emit('cancel')" />
4 
+    <div class="content">
5 
+
6 
+      <ul class="card-list">
7 
+      <Animate comp="li" name="animate__fadeInUp" delay="100ms" :ready="true">
8 
+        <img src="/images/pg3/采访1.png" alt="">
9 
+      </Animate>
10 
+      <Animate comp="li" name="animate__fadeInUp" delay="500ms" :ready="true">
11 
+        <img src="/images/pg3/采访2.png" alt="">
12 
+      </Animate>
13 
+      <Animate comp="li" name="animate__fadeInUp" delay="1000ms" :ready="true">
14 
+        <img src="/images/pg3/采访3.png" alt="">
15 
+      </Animate>
16 
+      <Animate comp="li" name="animate__fadeInUp" delay="1500ms" :ready="true">
17 
+        <img src="/images/pg3/采访4.png" alt="">
18 
+      </Animate>
19 
+      <Animate comp="li" name="animate__fadeInUp" delay="2000ms" :ready="true">
20 
+        <img src="/images/pg3/采访5.png" alt="">
21 
+      </Animate>
22 
+    </ul>
23 
+    </div>
24 
+  </Popup>
25 
+</template>
26 
+
27 
+<script setup>
28 
+  import Popup from '@/components/Popup.vue';
29 
+  import GoBack from '@/components/GoBack.vue';
30 
+  import Animate from '@/components/Animate.vue';
31 
+
32 
+  const emit = defineEmits(['cancel']);
33 
+</script>
34 
+
35 
+<style lang="less" scoped>
36 
+.popup {
37 
+  box-sizing: border-box;
38 
+  padding: 48px 16px;
39 
+  overflow-y: auto;
40 
+
41 
+  .goback {
42 
+    top: 8px;
43 
+    left: 8px;
44 
+    z-index: 100;
45 
+  }
46 
+
47 
+  .card-list {
48 
+    display: block;
49 
+    list-style: none;
50 
+    box-sizing: border-box;
51 
+    width: 100%;
52 
+    padding: 0 1em;
53 
+
54 
+    li {
55 
+      & + li {
56 
+        margin-top: 1em;
57 
+      }
58 
+    }
59 
+  }
60 
+}
61 
+
62 
+</style>

+ 17
- 24
src/pages/pg3/index.vue View File 

@@ -24,36 +24,31 @@
24 24 
       <img src="/images/pg3/map.png" alt="">
25 25 
     </div>
26 26
27 
-    <ul class="card-list">
28 
-      <Animate comp="li" name="animate__fadeInUp" delay="1500ms" :ready="show">
29 
-        <img src="/images/pg3/采访1.png" alt="">
30 
-      </Animate>
31 
-      <Animate comp="li" name="animate__fadeInUp" delay="2000ms" :ready="show">
32 
-        <img src="/images/pg3/采访2.png" alt="">
33 
-      </Animate>
34 
-      <Animate comp="li" name="animate__fadeInUp" delay="2500ms" :ready="show">
35 
-        <img src="/images/pg3/采访1.png" alt="">
36 
-      </Animate>
37 
-      <Animate comp="li" name="animate__fadeInUp" delay="3000ms" :ready="show">
38 
-        <img src="/images/pg3/采访2.png" alt="">
39 
-      </Animate>
40 
-    </ul>
27 
+    <div class="btn-box">
28 
+      <Btn class="btn" @click="showPerson = true">人物采访</Btn>
29 
+      <Btn class="btn">视频</Btn>
30 
+    </div>
31 
+
32 
+    <Persons v-if="showPerson" @cancel="showPerson = false" />
41 33 
   </div>
42 34 
 </template>
43 35
44 36 
 <script setup>
45 37 
   import { onBeforeUnmount, onMounted, ref } from 'vue';
46 38 
   import Bell from '@/components/Bell.vue';
39 
+  import Btn from '@/components/Btn.vue';
47 40 
   import Animate from '@/components/Animate.vue';
41 
+  import Persons from './Persons.vue';
48 42 
   import usePageShow from '../usePageShow';
49 43
50 44 
   const [pgRef, show] = usePageShow(0.3);
45 
+  const showPerson = ref(false);
51 46 
 </script>
52 47
53 48
54 49 
 <style lang="less" scoped>
55 50 
 .pg3 {
56 
-  height: auto;
51 
+  min-height: 100vh;
57 52
58 53 
   .bell {
59 54 
     right: 30px;
 
@@ -100,18 +95,16 @@
100 95 
     margin: auto;
101 96 
   }
102 97
103 
-  .card-list {
104 
-    display: block;
105 
-    list-style: none;
106 
-    box-sizing: border-box;
107 
-    width: 100vw;
108 
-    padding: 0 1em;
98 
+  .btn-box {
99 
+    margin-top: 2em;
100 
+    text-align: center;
109 101
110 
-    li {
111 
-      & + li {
112 
-        margin-top: 1em;
102 
+    .btn {
103 
+      & + .btn {
104 
+        margin-left: 40px;
113 105 
       }
114 106 
     }
115 107 
   }
108 
+
116 109 
 }
117 110 
 </style>

+ 4
- 0
src/style.less View File 

@@ -29,6 +29,10 @@ img {
29 29 
   // background-color: #0f2c37;
30 30 
   overflow-y: auto;
31 31 
   // overflow: hidden;
32 
+
33 
+  box-sizing: border-box;
34 
+  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
35 
+  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
32 36 
 }
33 37
34 38 
 .pg-bg {