feats

src/main.js

@@ -14,5 +14,5 @@ const app = createApp(App);
 app.use(store);
 app.use(router);
 app.use(i18n);
-app.use( VueSplide );
+app.use(VueSplide);
 app.mount('#app');

src/pages/pg2-2/Ink.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="ink-box">
+    <div>
+      <InkEffect class="ink-cover" :src="src" :active="active" />
+      <!-- <img class="ink-back" :src="src" alt="" > -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InkEffect from '@/components/InkEffect.vue';
+  const props = defineProps({
+    src: String,
+    active: Boolean,
+  })
+</script>
+
+<style lang="less" scoped>
+.ink-box {
+  width: 100%;
+  height: 100%;
+
+  & > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .ink-cover {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    .ink-back {
+      display: none;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/pages/pg2-2/index.vue

@@ -3,41 +3,95 @@
     <div class="bk-pd content">
       <p class="txt">
         85年前，
-        <br />日本侵略者制造了惨绝人寰的南京大屠杀，
-        <br />30多万生灵涂炭。
+        <br />日本侵略者制造了惨绝人寰的南京大屠杀， <br />30多万生灵涂炭。
         <br />战后的紫金山废墟下，片片紫色小花密密开放。
         <br />
+        <br />
       </p>
     </div>
     <div class="bk-pd content">
+      <img class="layer-img" src="/images/pg2-2/图层38.png" />
+    </div>
+    <div class="bk-pd content">
+      <img class="mountain-img" src="/images/pg2-2/山.png" />
       <img class="group-img" src="/images/pg2-2/组4.png" />
     </div>
     <div class="bk-pd content">
       <p class="txt bottom">
         1939年，一名日本带军医着对战争的反思和忏悔，
         <br />把取自南京的花种带回日本，撒遍山野、植满庭院，
-        <br />并取名“紫金草”。
-        <br />在他的眼中，当年的紫金山上，
+        <br />并取名“紫金草”。 <br />在他的眼中，当年的紫金山上，
         <br />每一朵花就是一个在战争中丧生的灵魂。
-        <br />此后几十年，这名军医和家人
-        <br />在各地播种紫金草悼念亡灵，
+        <br />此后几十年，这名军医和家人 <br />在各地播种紫金草悼念亡灵，
       </p>
     </div>
-    <div class="bk-pd content">
-      <img class="photo-img" src="/images/pg2-2/照片4.png" />
-    </div>
+    <!-- <div class="bk-pd content-ink"> -->
+    <!-- <InkEffect src="./images/pg2-2/紫金草行动logo拷贝.png" :active="inkActive" /> -->
+    
+    <Splide
+      :options="slideOptions"
+      :has-track="false"
+      @splide:moved="onSlideChange"
+    >
+      <div class="ink-slider-wrapper">
+        <SplideTrack>
+          <SplideSlide>
+        
+            <Ink
+              class="slide-ink"
+              :active="slideIndexRef == 0"
+              src="/images/pg2-2/照片1.png"
+            />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink
+              class="slide-ink"
+              :active="slideIndexRef == 1"
+              src="/images/pg2-2/照片2.png"
+            />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink
+              class="slide-ink"
+              :active="slideIndexRef == 2"
+              src="/images/pg2-2/照片3.png"
+            />
+          </SplideSlide>
+          <SplideSlide>
+            <Ink
+              class="slide-ink"
+              :active="slideIndexRef == 3"
+              src="/images/pg2-2/照片4.png"
+            />
+          </SplideSlide>
+        </SplideTrack>
+        <div class="splide__arrows abs" style="left: 0; top: 0">
+          <div class="splide__arrow splide__arrow--prev">
+            <img
+              src="/images/pg3/arrow.png"
+              alt=""
+              style="transform: rotate(180deg)"
+            />
+          </div>
+        </div>
+        <div class="splide__arrows abs" style="right: 0; top: 0">
+          <div class="splide__arrow splide__arrow--next">
+            <img src="/images/pg3/arrow.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </Splide>
+    <!-- <img class="photo-img" src="/images/pg2-2/照片4.png" /> -->
+    <!-- </div> -->
+
     <div class="bk-pd content">
       <p class="txt bottom">
         紫金草，它耐寒、耐旱，
-        <br />在贫瘠的土地上也能顽强生长，
-        <br />蕴含着无穷的草根力量，
-        <br />寄托了对战争的反省和对和平的祈愿。
-        <br />“紫金草行动”由此而来。
-        <br />小小紫金草，悠悠寄哀思。
-        <br />让和平中长大的年轻人保持“痛”感，
+        <br />在贫瘠的土地上也能顽强生长， <br />蕴含着无穷的草根力量，
+        <br />寄托了对战争的反省和对和平的祈愿。 <br />“紫金草行动”由此而来。
+        <br />小小紫金草，悠悠寄哀思。 <br />让和平中长大的年轻人保持“痛”感，
         <br />让更多的人主动追问、不断提起那段历史，
-        <br />让和平之声传向世界各地，
-        <br />这一直是“紫金草行动”努力的方向。
+        <br />让和平之声传向世界各地， <br />这一直是“紫金草行动”努力的方向。
       </p>
     </div>
     <div class="bk-pd content">
@@ -48,10 +102,8 @@
         2014年，在国家首个公祭日来临之际，
         <br />为了深切缅怀惨遭日军屠戮遇难同胞，
         <br />唤起人们对和平的向往和珍视，
-        <br />南京广播电视集团发起了“紫金草行动”。
-        <br />九年了，
-        <br />“紫金草行动”再启航，
-        <br />让“和平之花”开得更远！
+        <br />南京广播电视集团发起了“紫金草行动”。 <br />九年了，
+        <br />“紫金草行动”再启航， <br />让“和平之花”开得更远！
       </p>
     </div>
     <div class="bk-pd content">
@@ -60,14 +112,98 @@
   </div>
 </template>
 
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide';
+import Bell from '@/components/Bell.vue';
+  import Btn from '@/components/Btn.vue';
+  import Animate from '@/components/Animate.vue';
+
+import Ink from "./Ink.vue";
+const inkActive = ref(false);
+const slideIndexRef = ref(0);
+
+const slideOptions = {
+  // arrows: false,
+  pagination: false,
+  autoplay: true,
+  type: "loop",
+  speed: 1000,
+  interval: 6000,
+};
+
+const onSlideChange = (slide, newIndex) => {
+  slideIndexRef.value = newIndex;
+};
+</script>
+
 <style lang="less" scoped>
 .pg2-2 {
+  position: relative;
+  height: 100vh;
   .content {
     text-align: center;
   }
   .content {
+    .layer-img {
+      z-index: 0;
+      width: 14%;
+      display: inline-block;
+      position: absolute;
+      top: 220px;
+      left: 35px;
+      animation: layer-img 1.2s linear alternate;
+    }
+    @keyframes layer-img {
+      from {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+  .content {
+    .mountain-img {
+      z-index: 0;
+      position: absolute;
+      top: 115px;
+      margin-top: 20px;
+      margin-left: 20px;
+      width: 95%;
+      animation: mountain-img 3s 1;
+    }
+    @keyframes mountain-img {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
     .group-img {
+      z-index: 10;
+      width: 84%;
+      position: relative;
+      margin-top: 70px;
+      margin-left: -16%;
       display: inline-block;
+      animation-delay: 3s;
+      animation: group-img 1.8s linear;
+    }
+    @keyframes group-img {
+      0% {
+        transform: translateX(-100%);
+      }
+      50% {
+        transform: translateX(-50%);
+      }
+      100% {
+        transform: translateX(0);
+      }
     }
   }
   .content {
@@ -99,8 +235,35 @@
       display: inline-block;
     }
   }
+
+  .content-ink {
+  }
+  .ink-slider-wrapper {
+    position: relative;
+    z-index: 2;
+    .slide-ink {
+    width: 100vw;
+    height: 71.76vw;
+  }
+    .splide__arrows {
+      position: absolute;
+      z-index: 10;
+      width: 48px;
+      height: 71.76vw;
+      line-height: 71.76vw;
+      text-align: center;
+
+      img {
+        width: 12px;
+        display: inline-block;
+      }
+    }
+  }
+ 
 }
 .txt {
   text-align: center;
+  font-size: 0.9em;
+  font-weight: 400;
 }
-</style>
+</style>

src/pages/pg4/Share.vue

@@ -4,9 +4,15 @@
       <img src="/images/pg4/btn_share.png" alt="" @click="emit('share')">
       <img src="/images/pg4/btn_badge.png" alt="" @click="emit('badge')">
     </div>
+<<<<<<< HEAD
     <div class="share-txt txt">
       目前总种植数量: {{user.num}}
     </div>
+=======
+    <!-- <div class="share-txt txt">
+      目前总种植数量: 35896690
+    </div> -->
+>>>>>>> f53b432b2d3c7347c2e754fdcb77bb2d3b53ed34
   </div>
 </template>
 
@@ -20,7 +26,7 @@
 
 <style lang="less" scoped>
 .share-wrapper {
-  background-image: linear-gradient(transparent, #EDEEF0 40%, #EDEEF0);
+  // background-image: linear-gradient(transparent, #EDEEF0 40%, #EDEEF0);
   box-sizing: border-box;
   padding: 10px 1em;
   width: 100%;

src/pages/pg4/plant.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page pg-bg pgplant">
+    <Rule />
     <GoBack class="goback abs" @click.stop="router.go(-1)" />
     <div class="content">
       <div class="content-item" v-for="(item, inx) in list" :key="inx">
@@ -27,7 +28,13 @@
         </div>
       </div>
     </div>
-
+    <Share
+      v-if="planted"
+      class="share"
+      @share="onShare"
+      @badge="badgeShow = true"
+    />
+    <Badge :show="badgeShow" @cancel="badgeShow = false" />
     <div class="footer txt">目前总种植数量：{{ user?.num }}</div>
   </div>
 </template>
@@ -37,23 +44,18 @@ import { onMounted, ref, watch } from "vue";
 import GoBack from "@/components/GoBack.vue";
 import { useRouter } from "vue-router";
 import { useModel } from "@zjxpcyc/vue-tiny-store";
-// import animate from "@/utils/animate"
+import Share from "./Share.vue";
+import Badge from "./Badge.vue";
+import Rule from "./Rule.vue";
 
 const { user, contries, updateContries } = useModel("user");
 
 const router = useRouter();
 const choise = ref([]);
-const countryRef = ref();
-const flowerShow = ref();
-const planted = ref(false);
+const planted = ref(true);
 const badgeShow = ref(false);
 
-let timer = "timer";
-
 const animate = (plus, e) => {
-  // var _this = this;
-  console.log(e, "==");
-
   var n = 1;
   var $i = $("<b/>").text("+" + n);
   var x = e.pageX,
@@ -88,7 +90,14 @@ const isChoise = (name) => {
   //   console.log(name, "==--");
   return choise.value?.filter((x) => x === name)?.length > 0;
 };
+const onPlanted = () => {
+  planted.value = true;
+  flowerShow.value = false;
+};
 
+const onShare = () => {
+  router.push("/share");
+};
 const click = (item, e) => {
   const arr = choise.value;
   updateContries(item.name);

src/pages/pg4/video.vue

@@ -36,7 +36,7 @@
   };
 
   const onNext = () => {
-    router.push("/pg4/next");
+    router.push("/pg4/plant");
   };
 
   onMounted(() => {

src/pages/share/index.vue

@@ -1,29 +1,35 @@
 <template>
   <div class="share-pg">
     <div class="will-copy" ref="src">
-      <img class="copy-img" src="/images/share.jpg" alt="">
+      <img class="copy-img" src="/images/share.jpg" alt="" />
       <div class="content txt">
-        <div class="name">昵称</div>
-        <div style="line-height: 1.6em">您是第123225位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。</div>
+        <div class="name">{{ user.nickname || "朋友" }}</div>
+        <div style="line-height: 1.6em">
+          您是第{{user.num}}位“紫金草行动”参与者。播撒紫金草种子，让和平之花开满全城。
+        </div>
       </div>
     </div>
-    <img class="img-target" :src="imgData" v-if="imgData" alt="">
+    <img class="img-target" :src="imgData" v-if="imgData" alt="" />
   </div>
 </template>
 
 <script setup>
-  import { onMounted, ref } from 'vue';
-  import html2canvas from 'html2canvas';
+import { onMounted,watch, ref } from "vue";
+import html2canvas from "html2canvas";
+import { useModel } from "@zjxpcyc/vue-tiny-store";
 
-  const imgData = ref();
-  const src = ref();
+const { user } = useModel("user");
+const imgData = ref();
+const src = ref();
 
-  onMounted(() => {
+
+onMounted(() => {
+  setTimeout(()=>{
     html2canvas(src.value).then((canvas) => {
-      imgData.value = canvas.toDataURL('image/jpg', .8);
-    });
+    imgData.value = canvas.toDataURL("image/jpg", 0.8);
   });
-
+  },1000)
+});
 </script>
 
 <style lang="less" scoped>
@@ -63,4 +69,4 @@
     left: 0;
   }
 }
-</style>
+</style>

src/store/index.js

@@ -34,7 +34,7 @@ const useAudio = () => {
 
 
 const useUser = () => {
-  const user = ref({num:66699});
+  const user = ref({});
 
   const setUser = v => user.value = v;