Browse Source

Merge branch 'master' of http://git.ycjcjy.com/H5/njDaTuSha

Yansen 2 years ago
parent
commit
1979cbb05b
3 changed files with 81 additions and 66 deletions
  1. 5
    1
      src/pages/pg2-2/index.vue
  2. 76
    59
      src/pages/pg2/index.vue
  3. 0
    6
      src/pages/pg4/Share.vue

+ 5
- 1
src/pages/pg2-2/index.vue View File

1
 <template>
1
 <template>
2
   <div class="page pg-bg pg2-2">
2
   <div class="page pg-bg pg2-2">
3
+    <GoBack class="goback abs" @click="router.go(-1)" />
3
     <div class="bk-pd content">
4
     <div class="bk-pd content">
4
       <Animate
5
       <Animate
5
         class="txt"
6
         class="txt"
134
 import Bell from "@/components/Bell.vue";
135
 import Bell from "@/components/Bell.vue";
135
 import Btn from "@/components/Btn.vue";
136
 import Btn from "@/components/Btn.vue";
136
 import Animate from "@/components/Animate.vue";
137
 import Animate from "@/components/Animate.vue";
137
-
138
+import GoBack from "@/components/GoBack.vue";
139
+import { useRouter } from "vue-router";
138
 import Ink from "./Ink.vue";
140
 import Ink from "./Ink.vue";
141
+
142
+const router = useRouter();
139
 const inkActive = ref(false);
143
 const inkActive = ref(false);
140
 const slideIndexRef = ref(0);
144
 const slideIndexRef = ref(0);
141
 
145
 

+ 76
- 59
src/pages/pg2/index.vue View File

41
           :ready="show"
41
           :ready="show"
42
         />
42
         />
43
       </div>
43
       </div>
44
-
45
     </div>
44
     </div>
46
 
45
 
47
     <div class="groups abs">
46
     <div class="groups abs">
48
       <div>
47
       <div>
49
-        <InkEffect class="ink-ruins" src="./images/pg2/废墟color.png" :speed="10" :active="inkActive" :clearable="true" />
48
+        <InkEffect
49
+          class="ink-ruins"
50
+          src="./images/pg2/废墟color.png"
51
+          :speed="10"
52
+          :active="inkActive"
53
+          :clearable="true"
54
+        />
50
         <img class="ruins" src="/images/pg2/废墟.png" alt />
55
         <img class="ruins" src="/images/pg2/废墟.png" alt />
51
       </div>
56
       </div>
52
     </div>
57
     </div>
53
     <div class="flower1">
58
     <div class="flower1">
54
       <div>
59
       <div>
55
-        <img :class="{'flower-fly': show}" src="/images/pg2/flower1.png" alt="" @animationend="inkActive = true" />
60
+        <img
61
+          :class="{ 'flower-fly': show }"
62
+          src="/images/pg2/flower1.png"
63
+          alt=""
64
+          @animationend="inkActive = true"
65
+        />
56
       </div>
66
       </div>
57
     </div>
67
     </div>
58
 
68
 
63
     </div>
73
     </div>
64
 
74
 
65
     <div class="footer txt">
75
     <div class="footer txt">
66
-      了解故事
67
-      <img src="/images/pg2/箭头-右.png" alt />
76
+      <div @click="router.push('/pg2-2')">
77
+        了解故事
78
+        <img src="/images/pg2/箭头-右.png" alt />
79
+      </div>
68
     </div>
80
     </div>
69
 
81
 
70
     <DownArrow />
82
     <DownArrow />
72
 </template>
84
 </template>
73
 
85
 
74
 <script setup>
86
 <script setup>
75
-  import { reactive, ref, watch } from "vue";
76
-  import { useRouter } from "vue-router";
77
-  import Bell from "@/components/Bell.vue";
78
-  import Animate from "@/components/Animate.vue";
79
-  import InkEffect from "@/components/InkEffect.vue";
80
-  import DownArrow from '@/components/DownArrow.vue';
81
-  // import Cloud from "./Cloud.vue";
82
-  // import Smoke from "./smoke.vue";
83
-  // import Flower1 from "./flower/Flower1.vue";
84
-  // import Flower2 from "./flower/Flower2.vue";
85
-  // import Flower3 from "./flower/Flower3.vue";
86
-  import usePageShow from "../usePageShow";
87
-
88
-  const router = useRouter();
89
-  const inkActive = ref(false);
90
-
91
-  const onClick = () => {
92
-    router.push(`/pg2-2`);
93
-  };
94
-
95
-  const flowerAnimate = reactive({
96
-    left: "",
97
-    right: "",
98
-  });
99
-
100
-  let lastRatio = 0;
101
-  const flowShow = ({ intersectionRatio }) => {
102
-    console.log(intersectionRatio);
103
-    const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
104
-    const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
105
-
106
-    if (isIn) {
107
-      flowerAnimate.left = "animate__fadeInLeft";
108
-      flowerAnimate.right = "animate__fadeInRight";
109
-    }
110
-    if (isOut) {
111
-      flowerAnimate.left = "animate__fadeOutLeft";
112
-      flowerAnimate.right = "animate__fadeOutRight";
113
-    }
87
+import { reactive, ref, watch } from "vue";
88
+import { useRouter } from "vue-router";
89
+import Bell from "@/components/Bell.vue";
90
+import Animate from "@/components/Animate.vue";
91
+import InkEffect from "@/components/InkEffect.vue";
92
+import DownArrow from "@/components/DownArrow.vue";
93
+// import Cloud from "./Cloud.vue";
94
+// import Smoke from "./smoke.vue";
95
+// import Flower1 from "./flower/Flower1.vue";
96
+// import Flower2 from "./flower/Flower2.vue";
97
+// import Flower3 from "./flower/Flower3.vue";
98
+import usePageShow from "../usePageShow";
114
 
99
 
115
-    lastRatio = intersectionRatio;
116
-  };
100
+const router = useRouter();
101
+const inkActive = ref(false);
117
 
102
 
118
-  const [pgRef, show] = usePageShow(flowShow);
103
+const onClick = () => {
104
+  router.push(`/pg2-2`);
105
+};
119
 
106
 
120
-  watch(show, (val) => {
121
-    if (!val) {
122
-      inkActive.value = false;
123
-    }
124
-  })
107
+const flowerAnimate = reactive({
108
+  left: "",
109
+  right: "",
110
+});
111
+
112
+let lastRatio = 0;
113
+const flowShow = ({ intersectionRatio }) => {
114
+  console.log(intersectionRatio);
115
+  const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
116
+  const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
117
+
118
+  if (isIn) {
119
+    flowerAnimate.left = "animate__fadeInLeft";
120
+    flowerAnimate.right = "animate__fadeInRight";
121
+  }
122
+  if (isOut) {
123
+    flowerAnimate.left = "animate__fadeOutLeft";
124
+    flowerAnimate.right = "animate__fadeOutRight";
125
+  }
126
+
127
+  lastRatio = intersectionRatio;
128
+};
129
+
130
+const [pgRef, show] = usePageShow(flowShow);
131
+
132
+watch(show, (val) => {
133
+  if (!val) {
134
+    inkActive.value = false;
135
+  }
136
+});
125
 </script>
137
 </script>
126
 
138
 
127
 <style lang="less" scoped>
139
 <style lang="less" scoped>
203
       width: 50px;
215
       width: 50px;
204
     }
216
     }
205
   }
217
   }
206
-  
207
 
218
 
208
   .flower-fly {
219
   .flower-fly {
209
     transform-origin: left bottom;
220
     transform-origin: left bottom;
242
     width: 100%;
253
     width: 100%;
243
     text-align: center;
254
     text-align: center;
244
     font-size: 24px;
255
     font-size: 24px;
245
-    img {
246
-      width: 15px;
247
-      height: 25px;
248
-      display: inline;
249
-      width: auto;
250
-      vertical-align: text-bottom;
256
+    div {
257
+      display: flex;
258
+      justify-content: center;
259
+      align-items: center;
260
+      img {
261
+        width: 15px;
262
+        height: 25px;
263
+        display: inline;
264
+        width: auto;
265
+        vertical-align: text-bottom;
266
+        margin-left: 10px;
267
+      }
251
     }
268
     }
252
   }
269
   }
253
 }
270
 }

+ 0
- 6
src/pages/pg4/Share.vue View File

4
       <img src="/images/pg4/btn_share.png" alt="" @click="emit('share')">
4
       <img src="/images/pg4/btn_share.png" alt="" @click="emit('share')">
5
       <img src="/images/pg4/btn_badge.png" alt="" @click="emit('badge')">
5
       <img src="/images/pg4/btn_badge.png" alt="" @click="emit('badge')">
6
     </div>
6
     </div>
7
-<<<<<<< HEAD
8
     <div class="share-txt txt">
7
     <div class="share-txt txt">
9
       目前总种植数量: {{user.num}}
8
       目前总种植数量: {{user.num}}
10
     </div>
9
     </div>
11
-=======
12
-    <!-- <div class="share-txt txt">
13
-      目前总种植数量: 35896690
14
-    </div> -->
15
->>>>>>> f53b432b2d3c7347c2e754fdcb77bb2d3b53ed34
16
   </div>
10
   </div>
17
 </template>
11
 </template>
18
 
12