feats

index.html

@@ -9,7 +9,7 @@
     <script src="./turn.min.js"></script>
     <script src="./config.js"></script>
     <!-- <script src="./slidePage/slidePage.min.js"></script> -->
-    <script src="https://api.map.baidu.com/api?v=3.0&ak=IDixtryGuZAFPZLh4r8XCAM054r8LCRs"></script>
+    <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=IDixtryGuZAFPZLh4r8XCAM054r8LCRs"></script> -->
 
     <!-- <link rel="stylesheet" href="./slidePage/slidePage.min.css"> -->
 

public/MP_verify_2kbV0iqhuQ2vvjtU.txt

@@ -0,0 +1 @@
+2kbV0iqhuQ2vvjtU

src/components/Modal.vue

@@ -67,13 +67,13 @@
 
     .modal-close {
       position: absolute;
-      width: 40px;
-      height: 40px;
+      width: 24px;
+      height: 37.86px;
       background-image: url(/images/close.png);
       background-size: 100% 100%;
       background-repeat: no-repeat;
-      right: -16px;
-      top: -16px;
+      right: 0;
+      top: -37.86px;
     }
   }
 }

src/pages/pg1/Md1.vue

@@ -0,0 +1,54 @@
+<template>
+  <Modal>
+    <div class="md1-box md-bg">
+      <img class="md1-bg" src="/images/pg1/2014.png" alt="">
+      <div class="md1-header">
+        <img src="/images/pg1/logo.png" alt="">
+      </div>
+      <div class="md1-context">
+        <p class="txt">
+          南京广电集团以“紫金草”为原型，<br />
+          制作紫金草徽章发放给市民。<br />
+          9年来，20万人加入“紫金草行动”，<br />
+          把紫金草徽章佩戴在离心脏最近的地方。
+        </p>
+        <img src="/images/pg1/md1-1.jpg" alt="">
+        <p class="txt" style="text-align: right">
+          在2亿人心中，和平的愿景被播撒。
+        </p>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+  import Modal from '@/components/Modal.vue';
+</script>
+
+<style lang="less" scoped>
+.md1-box {
+  width: 80vw;
+  position: relative;
+  box-sizing: border-box;
+  padding: 16px;
+
+  .md1-bg {
+    position: absolute;
+    top: 10px;
+    right: 5px;
+    width: 50px;
+    z-index: 0;
+  }
+
+  .md1-header {
+    box-sizing: border-box;
+    width: 32vw;
+  }
+
+  .md1-context {
+    box-sizing: border-box;
+    padding-top: 60px;
+    font-size: 12px;
+  }
+}
+</style>

src/pages/pg1/index.vue

@@ -18,6 +18,9 @@
     <div class="footer abs animate__animated animate__fadeInUp">
       <img src="/images/pg1/bg2.png" alt="" parallax-offset='-200'>
     </div>
+    <Md1 v-if="mdActive == 1" @cancel="onCancel(1)" />
+    <Md1 v-if="mdActive == 2" @cancel="onCancel(2)" />
+    <Md1 v-if="mdActive == 3" @cancel="onCancel(3)" />
   </div>
 </template>
 
@@ -29,14 +32,22 @@
   import Part1 from './P1.vue';
   import Part2 from './P2.vue';
   import Part3 from './P3.vue';
+  import Md1 from './Md1.vue';
 
   const router = useRouter();
+  const active = ref(1);
+  const mdActive = ref(0);
 
-  const onClick = (page) => {
-    router.push(`/bk1?page=${page}`);
+  const onClick = (inx) => {
+    mdActive.value = inx;
+  }
+
+  const onCancel = (inx) => {
+    mdActive.value = 0;
+    const next = inx + 1 > 3 ? 1 : inx + 1;
+    active.value = next;
   }
 
-  const active = ref(1);
 
 </script>
 

src/style.less

@@ -46,6 +46,13 @@ img {
   // background-repeat: repeat-y;
 }
 
+.md-bg {
+  background-color: #F2F2F2;
+  background-image: url('/images/paper-bg.png');
+  background-size: 100% 100%;
+  background-repeat: repeat-y;
+}
+
 .abs {
   position: absolute;
 }

src/utils/wx.js

@@ -5,6 +5,8 @@ function wxsdk() {
   // API_BASE 来源 public/config.js
   const apiBase = API_BASE // import.meta.env.VITE_APP_API_BASE
 
+  let APPID = '';
+
   // 分享接口
   const shareAPIs = [
     // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
@@ -32,6 +34,8 @@ function wxsdk() {
       if (res.code === 1000) {
         const data = res.data;
 
+        APPID = data.appId;
+
         wx.config({
           debug: isDev, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
           appId: data.appId, // 必填，公众号的唯一标识
@@ -84,8 +88,9 @@ function wxsdk() {
   function redirect () {
     if (isDev) return;
 
+    const appid = APPID || 'wx5d0c5a7f210d872f';
     const local = encodeURIComponent(location.origin + location.pathname)
-    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd3bab568bc42d1de&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
+    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
     window.location.href = url;
   }