页面样式等

package.json

@@ -71,6 +71,7 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.4",
     "style-loader": "^0.13.1",
+    "swiper": "^6.4.9",
     "url-loader": "^0.5.7",
     "vue-lazyload": "^1.2.6",
     "vue-loader": "^10.0.0",

src/components/annual-summary/card-1-no.vue

@@ -24,7 +24,7 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-1-no-wrapper {
-  min-height: 100vh;
+  height: 100vh;
   font-size: 16px;
   color: #3B3B3B;
   background: #F4FEF8;
@@ -40,6 +40,10 @@ export default {
     }
   }
   .detail {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 2;
     margin: 60px 10px 20px 30px;
     .title {
       line-height: 1;

src/components/annual-summary/card-1.vue

@@ -23,7 +23,10 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-1-wrapper {
-  min-height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
   font-size: 16px;
   color: #3B3B3B;
   background: #F4FEF8;
@@ -39,6 +42,10 @@ export default {
     }
   }
   .detail {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 2;
     margin: 20px 30px;
     .title {
       line-height: 1;

src/components/annual-summary/card-2.vue

@@ -23,7 +23,10 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-2-wrapper {
-  min-height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
   font-size: 16px;
   color: #3B3B3B;
   background: #F4FEF8;

src/components/annual-summary/card-3.vue

@@ -22,7 +22,10 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-3-wrapper {
-  min-height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
   font-size: 16px;
   color: #3B3B3B;
   background: #F4FEF8;

src/components/annual-summary/card-4.vue

@@ -34,7 +34,10 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-4-wrapper {
-  min-height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
   font-size: 16px;
   color: #3B3B3B;
   &.ysl {
@@ -53,6 +56,10 @@ export default {
     color: #FFFFFF;
   }
   .detail {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 2;
     margin: 20px 30px;
     .ct {
       p {

src/components/annual-summary/card-5.vue

@@ -34,7 +34,10 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-5-wrapper {
-  min-height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
   font-size: 16px;
   color: #3B3B3B;
   background: #FEF9F4;
@@ -50,6 +53,10 @@ export default {
     }
   }
   .detail {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 2;
     margin: 20px 30px;
     p {
       line-height: 2;

src/components/annual-summary/card-6.vue

@@ -52,7 +52,7 @@ export default {
   props: {
     type: {
       type: Number | String,
-      default: 2 // 1: 站内;  2: 站外
+      default: 1 // 1: 站内;  2: 站外
     }
   }
 };
@@ -60,7 +60,10 @@ export default {
 <style lang="less" scoped>
 @import "../../style/as-common.less";
 .card-6-wrapper {
-  min-height: 100vh;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100vh;
   font-size: 16px;
   color: #3b3b3b;
   background: #88cb9d;
@@ -110,6 +113,7 @@ export default {
     position: absolute;
     bottom: 25px;
     left: 0;
+    z-index: 3;
     display: flex;
     flex-direction: row;
     align-items: center;

src/components/annual-summary/logo.vue

 <template>
   <div class="logo-wrapper">
-    <div class="logo">
-      <img v-show="imgType == 1" src="~@/images/annual/logo-1.png" alt />
-      <img v-show="imgType == 2" src="~@/images/annual/logo-2.png" alt />
-    </div>
+      <img @click="back" class="back" v-show="imgType == 1" src="~@/images/annual/back-1.png" alt="">
+      <img @click="back" class="back" v-show="imgType == 2" src="~@/images/annual/back-2.png" alt="">
+      <img class="logo" v-show="imgType == 1" src="~@/images/annual/logo-1.png" alt />
+      <img class="logo" v-show="imgType == 2" src="~@/images/annual/logo-2.png" alt />
   </div>
 </template>
 <script>
@@ -13,19 +13,44 @@ export default {
       type: Number | String,
       default: 1
     }
-  }
+  },
+  data() {
+    return {
+      isWeb: window.__isWeb,
+    }
+  },
+  methods: {
+    back() {
+      // rocNative.goBack();
+      this.$router.back(-1);
+    }
+  },
 };
 </script>
 <style lang="less" scoped>
 .logo-wrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding-bottom: 80px;
+  .back {
+    position: absolute;
+    top: 35px;
+    z-index: 2;
+    left: 8px;
+    width: 20px;
+    height: 29px;
+    padding: 0 4px;
+  }
   .logo {
-    padding-top: 20px;
-    padding-left: 30px;
-    img {
-      display: block;
-      width: 88px;
-      height: 56px;
-    }
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    z-index: 2;
+    display: block;
+    width: 77px;
+    height: 50px;
   }
 }
 </style>
\ No newline at end of file

src/main.js

@@ -13,6 +13,7 @@ import Vant from 'vant';
 import 'vant/lib/index.css';
 import clipboard from 'clipboard';
 import { querystring } from '@/utils';
+import 'swiper/swiper-bundle.css';
 //注册到vue原型上
 Vue.prototype.clipboard = clipboard;
 

src/views/annual-summary/detail.vue

 <template>
   <div class="as-swipper-wrapper">
-    <!-- <Card1></Card1> -->
-    <!-- <Card1No></Card1No> -->
-    <!-- <Card2></Card2> -->
-    <!-- <Card3></Card3> -->
-    <!-- <Card4></Card4> -->
-    <!-- <Card5></Card5> -->
-    <Card6></Card6>
+    <div class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <Card1></Card1>
+        </div>
+        <div class="swiper-slide">
+          <Card2></Card2>
+        </div>
+        <div class="swiper-slide">
+          <Card3></Card3>
+        </div>
+        <div class="swiper-slide">
+          <Card4></Card4>
+        </div>
+        <div class="swiper-slide">
+          <Card5></Card5>
+        </div>
+        <div class="swiper-slide">
+          <Card6></Card6>
+        </div>
+      </div>
+    </div>
     <Loading v-show="showLoading" />
   </div>
 </template>
@@ -22,6 +37,8 @@ import Card4 from "@/components/annual-summary/card-4";
 import Card5 from "@/components/annual-summary/card-5";
 import Card6 from "@/components/annual-summary/card-6";
 import { mapGetters, mapActions } from "vuex";
+import Swiper from "swiper";
+
 let _this = null;
 
 export default {
@@ -69,6 +86,24 @@ export default {
     _this.getUserInfo();
   },
 
+  mounted() {
+    new Swiper(".swiper-container", {
+      // direction: "vertical",
+      speed: 300,
+      slidesPerView: 1,
+      // slidesPerGroup : 5,
+        
+      //  loop: true,
+      // 如果需要分页器
+      // pagination: ".swiper-pagination",
+      // // 如果需要前进后退按钮
+      // nextButton: ".swiper-button-next",
+      // prevButton: ".swiper-button-prev",
+      // 如果需要滚动条
+      // scrollbar: ".swiper-scrollbar"
+    });
+  },
+
   methods: {
     ...mapActions(["setUserInfo"]),
 
@@ -118,7 +153,30 @@ export default {
   }
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
+.swiper-container{width: 100%;height: 100%;}
+.swiper-container-scrollbar .swiper-slide{
+    height: auto;
+}
+.swiper-container-free-mode > .swiper-wrapper {
+  -webkit-transition-timing-function: linear;    /*之前是ease-out*/
+  -moz-transition-timing-function: linear;
+  -ms-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+  margin: 0 auto;
+}
+</style>
+<style lang="less" >
 .as-swipper-wrapper {
+  transform: translate3d(0, 0, 0);
+  // background: red;
+  .swiper-container {
+    transform: translate3d(0, 0, 0);
+    overflow: hidden;
+  }
+  .swiper-slide {
+    transform: translate3d(0, 0, 0);
+  }
 }
 </style>
\ No newline at end of file

src/views/annual-summary/index.vue

@@ -63,7 +63,7 @@ export default {
   created() {
     _this = this;
     // 截屏时通知前端
-    window.screenCaptureEvent = function() {
+    window.__screenCaptureEvent = function() {
       console.log('in screenCaptureEvent');
         _this.$sendBuriedData({
           component_tag: '557#557002'
@@ -72,7 +72,7 @@ export default {
 
     // 保存图片的回调
     window.__savePage2Picture = function(param) {
-      this.isHide = false;
+      this.isHide = true;
       console.log("__savePage2Picture", param);
     }
   },

src/views/annual-summary/share.vue

+<template>
+  <div class="as-share-wrapper">
+    <Card6 type=2></Card6>
+  </div>
+</template>
+<script>
+import Card6 from "@/components/annual-summary/card-6";
+export default {
+  components: {
+    Card6
+  },
+  methods: {
+    
+  },
+}
+</script>
+<style lang="less" scoped>
+.as-share-wrapper {
+
+}
+</style>
\ No newline at end of file