Merge branch 'dev-annual-summary-0125-N' into 'release'

年度报告活动页面 code reviewer：张平

年度报告活动页面 code reviewer：张平

See merge request !1

package.json

@@ -17,16 +17,13 @@
   "dependencies": {
     "@babel/polyfill": "^7.10.4",
     "axios": "0.16.2",
-    "clipboard": "^2.0.6",
-    "pdfjs-dist": "^2.4.456",
-    "pica-topic-stencil": "^1.0.8",
     "vant": "^2.2.15",
     "vconsole": "^3.3.4",
     "vue": "^2.1.0",
     "vue-router": "^2.1.1",
     "vuex": "^2.0.0",
     "web-buried-point": "^2.1.0",
-    "weixin-js-sdk": "^1.4.0-test",
+    "weixin-js-sdk": "^1.6.0",
     "pica-call-app": "^1.0.43"
   },
   "devDependencies": {

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

@@ -22,7 +22,7 @@
         swiper-animate-delay="0.5s"
       >
         <p>您与云鹊医刚遇见不久~</p>
-        <p>各类丰富课程和活动等你一一发掘</p>
+        <p>各类丰富课程和活动等您一一发掘</p>
         <p>希望新一年有云鹊医的陪伴，生活平凡但充实</p>
         <p>在学习知识的路上，我们一同成长</p>
       </div>
@@ -71,11 +71,11 @@ export default {
     margin: 60px 10px 20px 30px;
     .title {
       line-height: 1;
-      font-size: 20px;
-      font-weight: 700;
       color: #3f3f3f;
       span {
         display: inline-block;
+        font-size: 20px;
+        font-weight: 700;
         margin: 0 7px;
         padding: 1px 25px;
         border-bottom: 2px solid #3b3b3b;

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

@@ -2,7 +2,7 @@
   <div class="card-1-wrapper">
     <Logo></Logo>
     <div class="bgi-wrapper">
-      <img src="~@/images/annual/page-1-back.png" alt />
+      <img src="https://file.yunqueyi.com/h5/images/asimg/page-1-back.png" alt />
     </div>
     <section class="detail">
       <p v-if="anualData.doctorName" class="title">
@@ -91,10 +91,10 @@ export default {
     margin: 20px 30px;
     .title {
       line-height: 1;
-      font-size: 20px;
-      font-weight: 700;
       color: #3f3f3f;
       span {
+        font-size: 20px;
+        font-weight: 700;
         display: inline-block;
         margin: 0 7px;
         padding: 1px 25px;

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

@@ -2,7 +2,7 @@
   <div class="card-2-wrapper">
     <Logo></Logo>
     <div class="bgi-wrapper">
-      <img src="~@/images/annual/page-2-back.png" alt />
+      <img src="https://file.yunqueyi.com/h5/images/asimg/page-2-back.png" alt />
     </div>
     <section class="ani detail" swiper-animate-effect="fadeInRight"
         swiper-animate-duration="1.5s"

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

 <template>
   <div class="card-3-wrapper">
     <Logo></Logo>
-    <div class="bgi-wrapper"><img src="~@/images/annual/page-3-back.png" alt="" /></div>
+    <div class="bgi-wrapper"><img src="https://file.yunqueyi.com/h5/images/asimg/page-3-back.png" alt="" /></div>
     <section class="ani detail" swiper-animate-effect="fadeInRight"
         swiper-animate-duration="1.5s"
         swiper-animate-delay="0">
@@ -9,7 +9,7 @@
       <p class="mt-10 lh-25"><span class="fbig6 cg2">找药工具</span></p>
       <p class="mt-5">开了 <span class="cg2 b">{{anualData.orderNum}}</span> 笔订单</p>
       <p class="mt-5">服务了 <span class="cg2 b">{{anualData.orderOfferPatientNum}}</span> 位居民</p>
-      <p class="mt-5">增加了 <span class="cg2 b">{{anualData.orderTotalAmountY | yLocalString}}</span> 元收入</p>
+      <p class="mt-5">增加了 <span class="cg2 b">{{anualData.orderTotalAmountY | yLocalString(true)}}</span> 元收入</p>
     </section>    
   </div>
 </template>

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

@@ -11,7 +11,7 @@
         <p v-if="anualData.learnEarliestTimeFlag && type == 1">
           <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{mm}')}}</span> 月
           <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{dd}')}}</span> 日
-          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{hh}')}}</span> 点，您还在学习。
+          <span class="fw7">{{parseTime(anualData.learnEarliestTime, '{hh}')}}</span> 点，您就开始学习。
         </p>
         <p v-if="anualData.learnLatestTimeFlag && type == 2">
           <span class="fw7">{{parseTime(anualData.learnLatestTime, '{mm}')}}</span> 月
@@ -21,7 +21,7 @@
         <p v-if="anualData.learnTime4Show && type == 3">
           <span class="fw7">{{parseTime(anualData.learnTime4Show, '{mm}')}}</span> 月
           <span class="fw7">{{parseTime(anualData.learnTime4Show, '{dd}')}}</span> 日
-          <span class="fw7">{{parseTime(anualData.learnTime4Show, '{hh}')}}</span> 点，您还在学习。
+          <span class="fw7">{{parseTime(anualData.learnTime4Show, '{hh}')}}</span> 点，您开始学习了。
         </p>
         <p>老师，您辛苦了！</p>
         <p class="tr mt-40">
@@ -85,21 +85,21 @@ export default {
   color: #3b3b3b;
 
   &.ysl {
-    background: url("../../images/annual/page-4-back.png") no-repeat center
+    background: url("https://file.yunqueyi.com/h5/images/asimg/page-4-back.png") no-repeat center
       center;
     background-size: cover;
     color: #ffffff;
   }
 
   &.zqc {
-    background: url("../../images/annual/page-5-back.png") no-repeat center
+    background: url("https://file.yunqueyi.com/h5/images/asimg/page-5-back.png") no-repeat center
       center;
     background-size: cover;
     color: #134a5d;
   }
 
   &.no {
-    background: url("../../images/annual/page-6-back.png") no-repeat center
+    background: url("https://file.yunqueyi.com/h5/images/asimg/page-6-back.png") no-repeat center
       center;
     background-size: cover;
     color: #ffffff;

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

@@ -2,8 +2,8 @@
   <div class="card-5-wrapper">
     <Logo></Logo>
     <div class="bgi-wrapper">
-      <img v-show="type == 1" src="~@/images/annual/yqd-back.png" alt="" />
-      <img v-show="type == 2" src="~@/images/annual/no-yqd-back.png" alt="" />
+      <img v-show="type == 1" src="https://file.yunqueyi.com/h5/images/asimg/yqd-back.png" alt="" />
+      <img v-show="type == 2" src="https://file.yunqueyi.com/h5/images/asimg/no-yqd-back.png" alt="" />
     </div>
     <section v-show="type == 1" class="ani detail" swiper-animate-effect="fadeInRight"
         swiper-animate-duration="1.5s"

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

@@ -2,20 +2,21 @@
   <div class="card-6-wrapper">
     <Logo imgType="2"></Logo>
     <div class="bgi-wrapper">
-      <img class="bg" src="~@/images/annual/share-back.png" alt />
-      <!-- <img class="" src="~@/images/annual/qr-code.png" alt="" /> -->
+      <img class="bg"
+      src="https://file.yunqueyi.com/h5/images/asimg/env-back.png" alt />
     </div>
-    <section class="ani detail" swiper-animate-effect="fadeInUp"
+    <section
+      class="ani detail"
+      swiper-animate-effect="fadeInUp"
       swiper-animate-duration="1.5s"
-        swiper-animate-delay="0">
+      swiper-animate-delay="0s"
+    >
       <p class="title">2020年度学习报告</p>
       <p v-if="anualData.doctorName">
         尊敬的
         <span class="cg2 b">{{anualData.doctorName}}</span> 医生
       </p>
-      <p v-if="!anualData.doctorName">
-        尊敬的医生
-      </p>
+      <p v-if="!anualData.doctorName">尊敬的医生</p>
       <p>
         {{anualData.yearType}}年您学习了
         <span class="cg2 b">{{anualData.learnCourseNum}}</span> 门课程，时长
@@ -26,19 +27,25 @@
         <span class="cg2 b">{{anualData.creditNum | yLocalString}}</span> 个云鹊豆
       </p>
       <p v-if="anualData.learnMoreCourseLabelName">
-        最关注的知识类型是：<span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
+        最关注的知识类型是：
+        <span class="cg2 b">{{anualData.learnMoreCourseLabelName}}</span>
       </p>
-      <p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有你。</p>
-      <p>希望你的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
+      <p class="mt-20">{{anualData.yearType}}年极不平凡，回顾这一年也极为难得，这一年感谢有您。</p>
+      <p>希望您的2021年也有云鹊医的陪伴，因为云鹊医的参与，生活变得平凡也珍贵。</p>
       <p class="mt-20">
-        ——已陪伴你
+        ——已陪伴您
         <span class="cg2 b">{{anualData.registerDays}}</span> 天的云鹊医
       </p>
     </section>
     <div class="qr-wrapper">
-      <img src="~@/images/annual/qr-code.png" alt />
+      <img class=" "
+        swiper-animate-effect="bounceIn"
+        swiper-animate-duration="1s"
+        swiper-animate-delay="3s"
+      :src="anualData.qrCodeUrl" alt />
     </div>
-    <section v-if="isHide && type == 1" class="bottom">
+    <div class="mask"></div>
+    <section class="bottom" v-if="isHide && type == 1">
       <img @click="save" src="~@/images/annual/save-btn.png" alt />
       <img @click="share" src="~@/images/annual/share-btn.png" alt />
     </section>
@@ -46,12 +53,11 @@
 </template>
 <script>
 import Logo from "@/components/annual-summary/logo";
-import {
-  getWebPageUrl
-} from "@/utils"
+import { getWebPageUrl } from "@/utils";
+import { Progress, Toast } from "vant";
 export default {
   components: {
-    Logo,
+    Logo
   },
   props: {
     type: {
@@ -67,32 +73,36 @@ export default {
     isHide: {
       type: Boolean,
       default: true
+    },
+    appVersion: {
+      type: Number | String,
+      default: 300 // 1: 站内;  2: 站外
     }
   },
   data() {
     return {
-      openPath: '',
       // isHide: true,
-    }
+    };
   },
 
   created() {
-      this.openPath = getWebPageUrl(`profexam/#/as-index`);
   },
 
   methods: {
-
     // 保存图片
     save() {
-      this.$emit('save');
+      if(this.appVersion < 359) {
+          Toast('请下载新版本APP保存页面截图');
+      } else {
+        this.$emit("save");
+      }
     },
 
     // 分享按钮
     share() {
-      this.$emit('share');
+      this.$emit("share");
+    }
   }
-    
-  },
 };
 </script>
 <style lang="less" scoped>
@@ -101,33 +111,36 @@ export default {
   position: relative;
   top: 0;
   left: 0;
+  z-index: 1;
   height: 100vh;
   font-size: 16px;
   color: #3b3b3b;
   background: #88cb9d;
   .bgi-wrapper {
     position: absolute;
-    top: 83px;
+    top: 356px;
     left: 0;
-    z-index: 1;
+    z-index: 8;
     img {
       display: block;
       width: 100%;
-      height: 495px;
+      height: 228px;
     }
   }
   .detail {
     position: relative;
-    top: 0;
+    top: 5px;
     left: 0;
-    z-index: 2;
+    z-index: 5;
     color: #333;
-    margin: 20px 30px;
+    padding: 5px 10px 100px;
+    margin: 0px 20px;
+    background: #F7F2EB;
     .title {
       font-size: 18px;
       font-weight: 700;
       text-align: center;
-      margin: 25px 0 20px;
+      margin: 10px 0 20px;
       color: #121212;
     }
     p {
@@ -137,9 +150,9 @@ export default {
   .qr-wrapper {
     width: 100%;
     position: absolute;
-    top: 410px;
+    top: 420px;
     left: 0;
-    z-index: 1;
+    z-index: 10;
     text-align: center;
     img {
       margin-top: 70px;
@@ -147,12 +160,21 @@ export default {
       height: 70px;
     }
   }
+  .mask {
+    position: fixed;
+    top: 500px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 6;
+    background: #88cb9d;
+  }
   .bottom {
     width: 100%;
     position: absolute;
     bottom: 25px;
     left: 0;
-    z-index: 3;
+    z-index: 11;
     display: flex;
     flex-direction: row;
     align-items: center;

src/components/annual-summary/logo.vue

@@ -7,6 +7,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
 export default {
   props: {
     imgType: {
@@ -18,16 +19,31 @@ export default {
       default: 1  // 1: H5返回; 2: 原生返回
     }
   },
+
   data() {
     return {
       isWeb: window.__isWeb,
     }
   },
+
+  computed: {
+    ...mapGetters(["backBDText"])
+  },
+
   methods: {
     back() {
       if( this.backType == 1) {
+        console.log('#####this.backType');
+        this.$sendBuriedData({
+          component_tag: `560#560001${this.backBDText}`
+        });
+        setTimeout( () => {
           this.$router.back(-1);
+        }, 100);
       } else {
+        this.$sendBuriedData({
+          component_tag: '559#559001'
+        });
         rocNative.goBack();
       }
     }

src/components/business/back-top.vue

- <template>
-  <section class="back-top">
-    <div class="back-btn" @click="backTop">
-      <img src="../../images/backTop.png">
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      objPoint: {}
-    };
-  },
-  props: {
-    burialPoint: {
-      default: "",
-      type: String
-    }
-  },
-  mounted() {
-    if (this.burialPoint == "activity") {
-      this.objPoint = {
-        menuLevel: 2,
-        menuFromCode: "m_home",
-        menuCode: "m_content_list",
-        functionCode: "f_activity",
-        actionCode: "c_top"
-      };
-    }
-  },
-  methods: {
-    backTop: function() {
-      if (this.burialPoint == "activity") {
-        this.pageBurialPoin(this.objPoint);
-      }
-      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
-      if (osTop > 0) {
-        document.documentElement.scrollTop = document.body.scrollTop = 0;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.back-btn {
-  position: fixed;
-  width: 35px;
-  height: 35px;
-  right: 15px;
-  z-index: 100;
-  bottom: 80px;
-  img {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-}
-</style>
-

src/components/business/button.vue

-<template>
-  <div
-    :class="{ 'button-dis': isDisabled, 'button-plain': isPlain }"
-    class="button-container"
-    @click="submit"
-  >
-    {{ buttonText }}
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ButtonComponent',
-  props: {
-    isPlain: {
-      type: Boolean,
-      default: false
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false
-    },
-    buttonText: {
-      type: String,
-      default: "继续学习"
-    },
-  },
-  methods: {
-    submit() {
-      if (this.isDisabled) {
-        return;
-      }
-      this.$emit('handlerClick'); //点击按钮的操作，触发父组件相应的方法
-    }
-  }
-};
-</script>
-
-<style scoped lang="less">
-.button-container {
-  /*按钮本身样式没有设置margin，可根据具体页面的ui在父页面中进行设置*/
-  // width: 325px;
-  width: 90%;
-  height: 44px;
-  background: #449284;
-  border-radius: 22px;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 44px;
-  text-align: center;
-  margin: 16px auto;
-}
-.button-dis {
-  opacity: 0.5;
-}
-.button-plain {
-  color: #449284;
-  background: #fff;
-  border: 1px solid rgba(68,146,132, 0.4);
-}
-</style>

src/components/business/cell-list-item.vue

- <template>
-  <!-- 项目组件列表项 -->
-  <section>
-    <CommonTitle :title="moduleName" :isShowCert="false"></CommonTitle>
-    <article class="cell-container">
-      <span class="" v-for="(item, index) in paramData" :key="index">
-        <div v-if="index > 0 && paramData[index].templetId!= paramData[index-1].templetId" class="bottom-line"></div>
-        <div class="cell-container-item" @click="gotoExamOrCourse(item)" >
-          <div class="name">
-            <div class="name-logo" :class="{'name-learn': item.type == 2, 'name-logo-no': item.useFlag == 2}" >
-              {{item.type | contentType}}
-            </div>
-            <p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
-            <!-- <span v-if="item.certificateFlag !== 2 && index == 0">
-              <img class="banner-img" src="../../images/has-owner-cert.png">
-            </span> -->
-          </div>
-          <!--  'bg-13': item.status == 13 -->
-          <span
-            class="text-action"
-            :class="{'text-action-no': item.useFlag == 2}"
-          >
-            <!-- <img v-show="item.status == 13" class="text-action-dh" src="../../images/icon-dh.png"> -->
-            {{getActionText(item.status)}}
-          </span>
-          <div class="connect-line"
-            :class="{'len1': item.height === 1, 'len2': item.height === '1','len3': item.height === 2, 'len4': item.height === '2'}"
-            v-if="index+1 < paramData.length && paramData[index].templetId == paramData[index+1].templetId">
-          </div>
-        </div>
-        <span v-if="item.certificateFlag == 2">
-          <img class="banner-img" :class="{'space2': item.height == 2 }" src="../../images/has-owner-cert.png">
-        </span>
-
-      </span>
-    </article>
-    <NoMoreContent v-if="paramData.length > 9"/>
-    <Toast ref="toastTitle"></Toast>
-  </section>
-</template>
-
-<script>
-import CommonTitle from "@/components/common/common-title";
-import NoMoreContent from "@/components/business/no-more-content";
-import Toast from "@/components/common/common-toast";
-import { mapGetters } from "vuex";
-import { getAppVersion } from "@/utils";
-import vueFilters from '@/utils/filter';
-const actionMap = {
-  11: "去考试",
-  12: "再考一次",
-  13: "已通过",
-  14: "已完成",
-  15: "已通过",
-  16: "未通过",
-  21: "去学习",
-  22: "继续学习",
-  23: "去复习"
-};
-export default {
-  name: "cell-list-item",
-  data() {
-    return {
-      appVersion: "200",
-      hocImg: require("../../images/has-owner-cert.png")
-    };
-  },
-  props: {
-    moduleName: {
-      type: String,
-      default: ""
-    },
-    paramData: {
-      type: Array,
-      default: () => []
-    },
-    courseRequire: {
-      type: Number,
-      default: 0,
-    },
-    projectId: {
-      type: Number | String,
-      default: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(["userInfo"])
-  },
-  components: {
-    CommonTitle,
-    NoMoreContent,
-    Toast,
-  },
-  mounted() {
-  },
-  created() {
-  },
-  methods: {
-    // 跳转到考试或课程 type 1: 考试;  2: 课程
-    // 如果是考试，将根据appVersion判断是新考试还是老考试，如果是301或之前的，都是老考试
-    gotoExamOrCourse(item) {
-      let appVersion = getAppVersion(this.userInfo.appVersion);
-      if (item.useFlag == 2) return;
-      if (window.__isWeb) {
-        this.$refs.toastTitle.toast("请您下载App");
-        return;
-      }
-      if (item.type == 1) {
-        if (appVersion <= 300) {
-          this.$refs.toastTitle.toast("请您下载新版本App");
-          return;
-        } else {
-          this.gotoExam(item.id);
-        }
-      } else if (item.type == 2) {
-        this.gotoCourse(item.id);
-      }
-      console.log(item);
-    },
-
-    // 跳转到课程
-    gotoCourse: function(courseId) {
-      let paramList = []
-      paramList = [
-        {
-          key: "className",
-          // value: "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
-          value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
-          type: 4,
-          seqNo: 1
-        },
-        {
-          key: "isCHC",
-          value: 0,
-          type: 4,
-          seqNo: 1
-        },
-        {
-          key: "courseId",
-          value: courseId,
-          type: 4,
-          seqNo: 1
-        },
-        {
-          key: "courseRequire",
-          value: this.courseRequire,
-          type: 4,
-          seqNo: 1
-        },
-        {
-          key: "projectId",
-          value: this.projectId,
-          type: 4,
-          seqNo: 1
-        },
-      ];
-      console.log('gotoCourse', paramList);
-      rocNative.dispatchEventByModuleCode({
-        modeCode: "M200",
-        jsonString: paramList
-      });
-    },
-    // 跳转到考试
-    gotoExam: function(examId) {
-      let paramList = [
-        {
-          key: "className",
-          value:
-            "com.picahealth.yunque.activitys.exammodule.ExamPreActivity###PicaDo.ExamModuleManager",
-          type: 4,
-          seqNo: 1
-        },
-        {
-          key: "examId",
-          value: examId,
-          type: 4,
-          seqNo: 1
-        }
-      ];
-
-      rocNative.dispatchEventByModuleCode({
-        modeCode: "M200",
-        jsonString: paramList
-      });
-    },
-    getActionText(status) {
-      return actionMap[status];
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.cell-container {
-  display: flex;
-  flex-direction: column;
-  margin: 0 15px;
-  &-item {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    // margin: 6px 0px;
-    // height: 51px;
-    margin-bottom: 32px;
-    line-height: 51px;
-    font-size: 15px;
-    // padding: 0px 15px;
-    // background: rgba(248, 249, 250, 1);
-    // border-bottom: 1px solid #f0f0f0;
-    // border-radius: 6px;
-    justify-content: space-between;
-    align-items: center;
-    .name {
-      &-logo {
-        position: relative;
-        z-index: 9;
-        margin-right: 6px;
-        width: 20px;
-        height: 20px;
-        text-align: center;
-        background:rgba(68,146,132,1);
-        font-size: 12px;
-        font-weight: 700;
-        color: #FFFFFF;
-        border-radius: 50%;
-        float: left;
-        line-height: 22px;
-        // display:table;
-        // overflow:hidden;
-        // span {
-        //   color: #FFFFFF;
-        //   font-size: 12px;
-        //   font-weight: 700;
-        //   display: table-cell;
-        //   text-align: center;
-        //   vertical-align: middle;
-        //   line-height: 20px;
-        // }
-        &::before {
-          position: absolute;
-          top: -6px;
-          left: 8px;
-          display: inline-block;
-          height: 6px;
-          width: 4px;
-          background: #FFFFFF;
-          content: "";
-        }
-        &::after {
-          position: absolute;
-          top: 20px;
-          left: 8px;
-          display: inline-block;
-          height: 6px;
-          width: 4px;
-          background: #FFFFFF;
-          content: "";
-        }
-      }
-      &-learn {
-        background:rgba(246, 131, 103, 1);
-      }
-      &-logo-no {
-        background:rgba(231, 232, 233, 1);
-      }
-      &-title {
-        flex: 1;
-        // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-        // width: 231px;
-        font-size: 15px;
-        font-weight: 700;
-        line-height: 21px;
-        color: #373839;
-        padding-right: 10px;
-        // float: left;
-      }
-      &-title-no {
-        color: rgba(151, 152, 153, 1);
-      }
-      // &::before {
-      //   position: relative;
-      //   top: 3px;
-      //   display: inline-block;
-      //   width: 4px;
-      //   content: "";
-      //   margin-right: 5px;
-      //   height: 16px;
-      //   background: #449284;
-      //   border-radius: 3px;
-      // }
-
-      // span {
-      //   img {
-      //     margin-top: 4px;
-      //     position: relative;
-      //     top: 2px;
-      //     width: 70px;
-      //     height: 20px;
-      //   }
-      // }
-    }
-    .text-action {
-      width: 68px;
-      height: 25px;
-      line-height: 25px;
-      text-align: center;
-      font-size: 12px;
-      font-weight: 700;
-      border-radius: 15px;
-      // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-      // opacity: 0.45;
-      border: 0.5px solid rgba(68, 146, 132, 0.6);
-      color: rgba(68, 146, 132, 1);
-      img {
-        position: relative;
-        left: 2px;
-        top: 3px;
-        width: 8px;
-        height: 12px;
-      }
-      &-no {
-        border: 0.5px solid #c7c8c9;
-        color: #c7c8c9;
-      }
-    }
-    // span {
-    //   width: 100%;
-    // }
-  }
-  span {
-    img {
-      margin-left: 26px;
-      position: relative;
-      top: -28px;
-      width: 70px;
-      height: 20px;
-    }
-    .space2 {
-      top: -26px;
-    }
-  }
-  .connect-line {
-    position: absolute;
-    // top: 32px;
-    top: 3px;
-    left: 9.5px;
-    height: 42px;
-    width: 0.5px;
-    border: 0.5px dashed rgba(240, 241, 244, 1);
-  }
-  .len4 {
-    height: 100px;
-  }
-  .len3 {
-    height: 82px;
-  }
-  .len2 {
-    height: 82px;
-  }
-  .len1 {
-    height: 62px;
-  }
-  .bottom-line {
-    position: relative;
-    margin: 6px 0 28px 0;
-    bottom: 0px;
-    width: 100%;
-    border-bottom: 0.5px solid #F0F1F2;
-  }
-}
-.bg-13 {
-  background: #abcec7;
-}
-</style>
-

src/components/business/material-list-item.vue

- <template>
-  <!-- 相关资料列表 -->
-  <div class="mater-container-wrapper">
-    <CommonTitle
-      title="相关资料"
-      :isShowCert="false"
-      :isShowMore="paramData.length > 3"
-      @showMore="gotoPDFList()"
-    ></CommonTitle>
-    <section class="mater-container">
-      <div
-        v-show="paramData.length && index < 3"
-        v-for="(item, index) in paramData"
-        :key="index"
-        class="mater-item"
-      >
-        <div class="mater-item-left">
-          <img :src="item.iconUrl">
-        </div>
-        <div class="mater-item-right">
-          <span class="mater-item-right-title">{{item.name}}</span>
-          <span class="mater-item-right-other">文件大小：{{item.size | formatFileSize}}</span>
-        </div>
-        <div class="mater-details" @click="gotoPDFDetail(item)">
-          <span>查看</span>
-          <img :src="rightIcon" alt>
-        </div>
-      </div>
-      <NoContent v-show="!paramData.length"></NoContent>
-    </section>
-    <Toast ref="toastTitle"></Toast>
-  </div>
-</template>
-
-<script>
-import CommonTitle from "@/components/common/common-title";
-// import NoMoreContent from "@/components/business/no-more-content";
-import NoContent from "@/components/business/no-content";
-import Toast from "@/components/common/common-toast";
-import { mapGetters } from "vuex";
-import { getAppVersion } from "@/utils";
-export default {
-  name: "mater-list-item",
-  data() {
-    return {
-      bgColor: "green",
-      statusText: "进行中",
-      rightIcon: require("../../images/right-icon.png"),
-      appVersion: "200"
-    };
-  },
-  props: {
-    paramData: {
-      type: Array,
-      default: () => []
-    },
-    projectId: {
-      type: Number | String,
-      default: 1
-    }
-  },
-  computed: {
-    ...mapGetters(["userInfo"])
-  },
-  components: {
-    // NoMoreContent,
-    NoContent,
-    CommonTitle,
-    Toast
-  },
-  mounted() {
-  },
-  methods: {
-    gotoPDFList() {
-      let appVersion = getAppVersion(this.userInfo.appVersion);
-      if (window.__isWeb) {
-        this.$refs.toastTitle.toast("请您下载App");
-        return;
-      }
-      if (appVersion <= 300) {
-        this.$refs.toastTitle.toast("请您下载新版本App");
-        return;
-      }
-      let itemData = {
-        title: "",
-        imageUrl: "",
-        appModuleInfo: {
-          code: "M200",
-          type: 4,
-          name: "wwww",
-          paramFlag: 1,
-          paramList: [
-            {
-              key: "className",
-              value:
-                "com.picahealth.yunque.activitys.scanpdf.AllRelevantInfoActivity###PicaDo.InstructionManagerController",
-              type: 4,
-              seqNo: 1
-            },
-            {
-              key: "portalProjectId",
-              value: this.projectId,
-              type: 1,
-              seqNo: 2
-            }
-          ]
-        }
-      };
-      rocNative.dispatchEventByModuleCode({
-        modeCode: "M200",
-        jsonString: itemData.appModuleInfo.paramList
-      });
-    },
-    gotoPDFDetail: function(item) {
-      let appVersion = getAppVersion(this.userInfo.appVersion);
-      if (window.__isWeb) {
-        this.$refs.toastTitle.toast("请您下载App");
-        return;
-      }
-      if (appVersion <= 300) {
-        this.$refs.toastTitle.toast("请您下载新版本App");
-        return;
-      }
-      let itemData = {
-        title: "",
-        imageUrl: "",
-        appModuleInfo: {
-          code: "M200",
-          type: 4,
-          name: "wwww",
-          paramFlag: 1,
-          paramList: [
-            {
-              key: "className",
-              value:
-                "com.picahealth.yunque.activitys.scanpdf.ReadPDFActivity###LiveStreamingCoursewareController",
-              type: 4,
-              seqNo: 1
-            },
-            {
-              key: "portalProjectId",
-              value: 1,
-              type: 1,
-              seqNo: 2
-            },
-            {
-              key: "pdfURL",
-              value: item.url,
-              type: 1,
-              seqNo: 2
-            },
-            {
-              key: "navTitle",
-              value: item.name,
-              type: 1,
-              seqNo: 2
-            },
-            {
-              key: "pdfId",
-              value: item.id,
-              type: 1,
-              seqNo: 2
-            }
-          ]
-        }
-      };
-      rocNative.dispatchEventByModuleCode({
-        modeCode: "M200",
-        jsonString: itemData.appModuleInfo.paramList
-      });
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.mater-container {
-  position: relative;
-  margin: 0px 15px;
-}
-.mater-item {
-  display: flex;
-  // width: 100%;
-  height: 80px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fff;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  img {
-    width: 35px;
-    height: 37px;
-    margin-right: 10px;
-    border-radius: 3px 2px 2px 3px;
-  }
-  &-left {
-    display: flex;
-    position: relative;
-    top: 0;
-  }
-  &-right {
-    display: flex;
-    // width: 215px;
-    flex: 1;
-    flex-direction: column;
-    padding-top: 4px;
-    &-title {
-      // height: 50px;
-      line-height: 23px;
-      font-size: 15px;
-      font-weight: 700;
-      color: rgba(55, 56, 57, 1);
-    }
-    &-other {
-      height: 22px;
-      line-height: 20px;
-      font-size: 13px;
-      font-weight: 400;
-      color: rgba(151, 152, 153, 1);
-    }
-  }
-  .mater-details {
-    position: relative;
-    right: -10px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    span {
-      // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-      font-size: 14px;
-      font-weight: 700;
-      color: #666;
-    }
-    img {
-      width: 15px;
-      height: 16px;
-    }
-  }
-}
-</style>
-

src/components/business/merge-title.vue

-<template>
-  <section class="comp-title-container">
-    <div class="comp-text">
-      <p
-        class="comp-title"
-        :style="{
-        'color': fontColor,
-        'font-weight': fontWeight,
-        'font-size': cTextFontSize,
-      }"
-      >{{title }}</p>
-      <p v-show="isShowExplain" @click="showDialog" class="comp-title-explain">
-        <span>查看说明</span>
-        <img :src="rightNew">
-      </p>
-    </div>
-    <div v-show="isShowCert === 2" class="cert-img">
-      <img class="banner-img" :src="hocImg">
-    </div>
-  </section>
-</template>
-<script>
-export default {
-  name: "common-title",
-  data() {
-    return {
-      fontSize: 37.5,
-      cImgPaddingTop: "1rem",
-      hocImg: require("../../images/has-cert-new.png"),
-      rightIcon: require("../../images/right-icon.png"),
-      rightNew: require("../../images/right-new.png"),
-    };
-  },
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    fontColor: {
-      type: String,
-      default: "#333"
-    },
-    fontWeight: {
-      type: Number,
-      default: 700
-    },
-    textFontSize: {
-      type: Number,
-      default: 18
-    },
-    paddingTop: {
-      type: Number,
-      default: 20
-    },
-    paddingBottom: {
-      type: Number,
-      default: 15
-    },
-    isShowCert: {
-      type: Number,
-      default: 1
-    },
-    isShowMore: {
-      type: Boolean,
-      default: false
-    },
-    isShowExplain: {
-      type: Boolean,
-      default: false
-    }
-  },
-  created() {},
-  mounted() {
-    let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
-    this.fontSize = htmlDom;
-    console.log(htmlDom);
-  },
-  computed: {
-    cTextFontSize() {
-      return this.textFontSize / this.fontSize + "rem";
-    },
-    cPaddingTop() {
-      this.cImgPaddingTop = (this.paddingTop + 3) / this.fontSize + "rem";
-      return this.paddingTop / this.fontSize + "rem";
-    },
-    cPaddingBottom() {
-      return this.paddingBottom / this.fontSize + "rem";
-    }
-  },
-  methods: {
-    showMove() {
-      this.$emit("showMore");
-    },
-    showDialog() {
-      this.$emit("showDialog");
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.comp-title-container {
-  margin-top: 17px;
-  padding-left: 15px;
-  // display: flex;
-  // flex-direction: row;
-  // justify-content: space-between;
-  .comp-text {
-    position: relative;
-    // width: 345px;
-    width: 100%;
-    overflow: hidden;
-  }
-}
-.comp-title {
-  position: relative;
-  width: 238px;
-  float: left;
-  line-height: 30px;
-}
-.comp-title-explain {
-  position: relative;
-  float: right;
-  // margin-right: 15px;
-  margin-top: 3px;
-  span {
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(12, 21, 39, 0.4);
-    // margin-right: 3px;
-    line-height: 18px;
-    height: 18px;
-    vertical-align: middle;
-  }
-  img {
-    width: 8px;
-    height: 12px;
-    vertical-align: middle;
-  }
-}
-.cert-img {
-  margin-top: 1px;
-  .banner-img {
-    width: 70px;
-    height: 20px;
-    padding-top: 2px;
-  }
-}
-</style>

src/components/business/no-content.vue

- <template>
-  <!-- 专项合作无内容 -->
-  <section class="nc-container">
-    <img
-      class="nc-container-img"
-      src="../../images/cme/no-content.png"
-    >
-    <span v-if="tabNum == 1" class="nc-container-text">您还未参加继教项目哦~</span>
-    <span v-if="tabNum == 2" class="nc-container-text">当前无可学继教项目哦~</span>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "no-content",
-  props: {
-    tabNum: {
-      default: 1
-    }
-  },
-  data() {
-    return {};
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.nc-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  margin-top: 100px;
-  margin-bottom: 20px;
-  text-align: center;
-  // margin: 0 auto;
-  &-img {
-    margin-left: 100px;
-    width: 150px;
-    height: 150px;
-  }
-  &-text {
-    height: 21px;
-    line-height: 21px;
-    font-size: 15px;
-    font-weight: 400;
-    color: rgba(153, 153, 153, 1);
-  }
-}
-</style>
-

src/components/business/no-more-content.vue

- <template>
-  <!-- 到底了 -->
-  <section class="nc-container">
-    <img class="nc-container-content"
-      :src="nmcImg">
-  </section>
-</template>
-
-<script>
-  export default {
-    name: 'no-more-content',
-    data() {
-      return {
-        nmcImg: require('../../images/no-more-content.png')
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-.nc-container {
-  display: flex;
-  &-content {
-    width: 100%;
-    height: 62px;
-  }
-}
-</style>
-

src/components/business/notice-item.vue

- <template>
-  <div class="item-notice-wrapper" :style="{'margin-top': marginTop}">
-    <div class="content" @click="clickNoticeItem">
-      <img :style="{'margin-top': imgMarginTop}" src="../../images/notice.png">
-      <span class="gg">公告</span>
-      <span :style="{'margin-top': imgMarginTop}" class="vtc-line"></span>
-      <span class="content">{{content}}</span>
-      <img :style="{'margin-top': imgMarginTop}" src="../../images/notice-arr-right.png">
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    content: {
-      type: String,
-      default: ''
-    },
-    clientType: {
-      type: String | Number,
-      default: 0
-    }
-  },
-  methods: {
-    clickNoticeItem() {
-      this.$emit('clickNoticeItem')
-    }
-  },
-  data() {
-    return {
-      marginTop: '0px',
-      imgMarginTop: '0px'
-    }
-  },
-  watch: {
-    clientType(newVal) {
-      if(newVal == 1) {
-
-      } else if(newVal == 2){
-        this.marginTop = '10px';
-        this.imgMarginTop = '-3px'
-      } else if(newVal == 3){
-        this.marginTop = '-2px';
-      }
-    }
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.item-notice-wrapper {
-  .content {
-    display: flex;
-    flex-direction: row;
-    height: 32px;
-    line-height: 32px;
-    padding: 0 15px;
-    text-align: left;
-    align-items: center;
-    background: #FEFAF5;
-    img {
-      width: 12px;
-      height: 12px;
-      line-height: 32px;
-    }
-    span {
-      font-size: 13px;
-      text-align: left;
-      &.gg {
-        // width: 30px;
-        padding: 1px 5px 0;
-        font-size: 13px;
-        font-weight: 700;
-        color: #835800;
-      }
-      &.vtc-line {
-        margin-top: 0px;
-        width: 1px;
-        height: 15px;
-        background: #835800;
-      }
-      &.content {
-        display: block;
-        flex: 1;
-        padding-top: 1px;
-        // padding-left: 5px !important;
-        padding: 0 10px 0 5px;
-        height: 32px;
-        line-height: 32px;
-        text-align: left;
-        font-size: 13px;
-        font-weight: 700;
-        color: #E6A23C;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-  }
-}
-</style>
-

src/components/business/pop-notice.vue

- <template>
-  <div class="pop-notice-wrapper">
-    <div class="mask"></div>
-    <div class="content">
-      <div class="top">
-        <span class="title">{{noticeData.noticeTitle | shortName(20)}}</span>
-        <div></div>
-        <span class="body">
-          <!-- 该项目已于2019年12月1日
-          <span class="b">停止发放项目证书</span>，但仍可以继续学习该项目 -->
-          {{noticeData.noticeContent | shortName(150)}}
-        </span>
-      </div>
-      <div class="line"></div>
-      <div class="bottom" @click="clickNotice">
-        <span>我知道了</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-  props: {
-    popText: {
-      type: String,
-      default: ""
-    },
-    btnText: {
-      type: String,
-      default: ""
-    },
-    noticeData: {
-      type: Object,
-      default: () => {
-        return {
-          noticeContent: "",
-          noticeId: '',
-          noticeTitle: "",
-          readFlag: 0
-        }
-      }
-    }
-  },
-  filters: {
-    shortContent(value, maxLength = 18) {
-      if(value && value.length > maxLength) {
-        return value.substr(0, maxLength) + '...'
-      }
-    }
-  },
-  methods: {
-    clickNotice() {
-      this.$emit("clickNotice");
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.pop-notice-wrapper {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 110;
-  font-size: 20px;
-  .mask {
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    width: 100%;
-    height: 100%;
-    z-index: 111;
-  }
-  .content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 112;
-    width: 300px;
-    // height: 185px;
-    margin: -150px 0 0 -150px;
-    border-radius: 3px;
-
-    text-align: center;
-    background: #fff;
-    .top {
-      padding: 30px;
-      .title {
-        display: inline-block;
-        font-size: 18px;
-        line-height: 28px;
-        word-break: break-all;
-        font-weight: 400;
-        color: #333333;
-      }
-      .body {
-        text-align: left;
-        word-break: break-all;
-        display: inline-block;
-        margin: 14px 0;
-        font-size: 14px;
-        height: 21px;
-        line-height: 21px;
-        font-weight: 400;
-        color: #676869;
-        .b {
-          font-weight: 700;
-        }
-      }
-    }
-    .line {
-      width: 300px;
-      height: 1px;
-      background: rgba(240, 241, 242, 1);
-    }
-    .bottom {
-      text-align: center;
-      font-size: 17px;
-      height: 50px;
-      line-height: 50px;
-      font-weight: 400;
-      span {
-        font-size: 17px;
-        color: #449284;
-      }
-    }
-  }
-}
-</style>
-

src/components/business/update-dialog.vue

-<template>
-  <div class="dialog-mask-container" v-if="showGoUpdate">
-    <div class="dialog-mask"></div>
-    <div class="dialog-container">
-      <div class="dialog-content">更新至最新版本才能观看视频哦更新至最新版本才能观看视频哦</div>
-      <div class="dialog-footer v-hairline-top">
-        <span @click.stop.prevent="goUpdateHandler(1)">取消</span>
-        <span class="confirm-btn v-hairline-left" @click.stop.prevent="goUpdateHandler(2)">立即更新</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'update-dialog',
-  data() {
-    return {
-
-    }
-  },
-  props: {
-    showGoUpdate: {
-      type: Boolean,
-      default: false
-    },
-  },
-  methods: {
-    goUpdateHandler(type) {
-      this.$emit("goUpdateHandler",type);
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-  .dialog-mask-container{
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2019;
-    .dialog-mask{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0,0,0,.5);
-      z-index: 2020;
-    }
-    .dialog-container{
-      z-index: 2021;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      overflow: hidden;
-      width: 300px;
-      font-size: 18px;
-      -webkit-transition: .3s;
-      transition: .3s;
-      border-radius: 4px;
-      background-color: #fff;
-      -webkit-transform: translate3d(-50%,-50%,0);
-      transform: translate3d(-50%,-50%,0);
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
-      .dialog-content{
-        padding: 30px 22px;
-        text-align: center;
-        font-size: 18px;
-        color: #373839;
-      }
-      .dialog-footer{
-        height: 50px;
-        display: flex;
-        align-items: center;
-        &.v-hairline-top::after{
-          border-top-width: 1px;
-        }
-        span{
-          display: inline-block;
-          width: 50%;
-          height: 50px;
-          line-height: 50px;
-          font-size: 17px;
-          text-align: center;
-          color: #979899;
-          &.v-hairline-left::after{
-            border-left-width: 1px;
-          }
-          &.confirm-btn{
-            color: #449284;
-          }
-        }
-      }
-    }
-    [class*=v-hairline] {
-      position: relative;
-      &::after{
-        content: ' ';
-        position: absolute;
-        pointer-events: none;
-        box-sizing: border-box;
-        top: -50%;
-        left: -50%;
-        right: -50%;
-        bottom: -50%;
-        -webkit-transform: scale(.5);
-        transform: scale(.5);
-        border: 0 solid #F0F1F2;
-      }
-    }
-  }
-</style>

src/components/cme/basic-info.vue

-<template>
-  <div class="basic-container">
-    <div class="basic-title">基本信息</div>
-    <!-- <div v-if="projectNo" class="content">
-      <span>项目编号</span>
-      <span>{{projectNo}}</span>
-    </div> -->
-    <!-- <div class="pro-name">
-      <span class="title">项目名称</span>
-      <span class="name">{{projectName}}</span>
-    </div>
-    <div class="content">
-      <span>学习范围</span>
-      <span>{{scope}}</span>
-    </div> -->
-    <div class="content">
-      <span>起止时间</span>
-      <span>{{startDate | formatTime('{y}.{m}.{d}')}}至{{endDate | formatTime('{y}.{m}.{d}')}}</span>
-    </div>
-    <div class="content">
-      <span>主办单位</span>
-      <span>{{organName}}</span>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    projectNo: {
-      type: String,
-      default: "GWKX-20180326-42843"
-    },
-    credit: {
-      type: String,
-      default: ""
-    },
-    level: {
-      type: String,
-      default: ""
-    },
-    scope: {
-      type: String,
-      default: ""
-    },
-    startDate: {
-      type: Number,
-      default: ""
-    },
-    endDate: {
-      type: Number,
-      default: ""
-    },
-    organName: {
-      type: String,
-      default: ""
-    },
-    remind: {
-      type: String,
-      default: ""
-    },
-    projectCredit: {
-      type: String,
-      default: ""
-    },
-    projectName: {
-      type: String,
-      default: ""
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.basic-container {
-  padding-bottom: 20px;
-  margin: 30px 15px 0px;
-  // border-bottom: 1px solid #e7e8e9;
-  .basic-title {
-    font-size: 18px;
-    line-height: 18px;
-    color: #373839;
-    font-weight: 700;
-  }
-  .pro-name {
-    display: flex;
-    flex-direction: row;
-    margin-top: 16px;
-    font-size: 14px;
-    span {
-      display: flex;
-      font-size: 14px;
-      align-items: center;
-      line-height: 22px;
-      align-content: flex-start;
-      text-align: justify;
-      &.title {
-        width: 84px;
-        color: #979899;
-      }
-      &.name {
-        flex: 1;
-        color: #676869;
-      }
-    }
-  }
-  .content {
-    margin-top: 16px;
-    height: 16px;
-    line-height: 0px;
-    span {
-      display: inline-block;
-      font-size: 14px;
-      .split {
-        display: inline-block;
-        position: relative;
-        top: 2px;
-        left: 0;
-        width: 1px;
-        height: 13px;
-        margin: 0 2px;
-        background: #676869;
-      }
-    }
-    span:first-child {
-      color: #979899;
-    }
-    span:last-child {
-      margin-left: 15px;
-      color: #676869;
-    }
-
-
-  }
-  .remind {
-    line-height: 14px;
-    margin-top: 10px;
-    span {
-      position: relative;
-      display: inline-block;
-      padding: 5px 10px;
-      margin-left: 78px;
-      font-size: 14px;
-      color: #fb5b52;
-      background: #fceeed;
-      border-radius: 4px;
-    }
-    span:after {
-      content: "";
-      position: absolute;
-      left: 10px;
-      bottom: 20px;
-      width: 0;
-      height: 0;
-      border-width: 0 8px 8px;
-      border-style: solid;
-      border-color: transparent transparent #fceeed;
-    }
-  }
-}
-</style>

src/components/cme/bind-card-button copy.vue

-<template>
-  <section class="bind-cart-wrapper">
-    <article class="left">
-      <div class="top">
-        <span class="discount">￥{{(cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
-        <span v-show="cardInfo.preferentialPrice" class="price">
-          <del>原价￥{{cardInfo.costPrice | formatMoney}}</del>
-        </span>
-      </div>
-      <div class="bottom">
-        <img src="../../images/cme/phrase2/info.png" />
-        <span>激活或购买后可学习课程</span>
-      </div>
-    </article>
-    <article class="right">
-      <span class="left" @click="changeClick">去激活</span>
-         <span @click="gotoBuy" class="right">去购买</span>
-    </article>
-  </section>
-</template>
-<script>
-export default {
-  props: {
-    cardInfo: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    changeClick(){
-      this.$emit("changeClick")
-    },
-    gotoBuy() {
-      this.$emit("gotoBuy");
-    }
-  }
-};
-</script>
-<style  lang="less" scoped>
-.bind-cart-wrapper {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  height: 60px;
-  line-height: 1;
-  justify-content: space-between;
-  padding: 10px 15px;
-  font-size: 14px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
-  .left {
-    display: flex;
-    flex-direction: column;
-    height: 40px;
-    line-height: 1;
-    font-size: 12px;
-    // align-items: ;
-    .top {
-      margin-top: 3px;
-      height: 24px;
-      .discount {
-        color: #fb5b52;
-        font-size: 18px;
-        font-weight: 700;
-        margin-right: 4px;
-      }
-      .price {
-        color: #979899;
-      }
-    }
-    .bottom {
-      display: flex;
-      flex-direction: row;
-      img {
-        width: 12px;
-        height: 12px;
-        margin-left: 1px;
-        margin-right: 4px;
-      }
-      color: #979899;
-    }
-  }
-  .right {
-    display: flex;
-    flex-direction: row;
-    span {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      width: 80px;
-      font-size: 14px;
-      font-weight: 400;
-      text-align: center;
-      color: #7f7f7f;
-      border: 1px solid #d2b573;
-      &.left {
-        border-radius: 20px 0px 0px 20px;
-        border-right-style: none;
-        // color: #ff7a4b;
-      }
-      &.right {
-        // background: linear-gradient(
-        //   137deg,
-        //   rgba(255, 166, 95, 1) 0%,
-        //   rgba(255, 122, 75, 1) 100%
-        // );
-        border-radius: 0px 20px 20px 0px;
-        // color: #fff;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file

src/components/cme/bind-card-button-share.vue

-<template>
-  <section class="bind-cart-wrapper">
-    <article class="left">
-      <div class="top">
-        <!-- <span class="discount">￥{{cardInfo.costPrice | formatMoney}}</span> -->
-        <span class="discount">￥{{(cardInfo.couponPrice || cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
-        <span v-show="cardInfo.couponPrice || cardInfo.preferentialPrice" class="price">
-          <del>原价￥{{cardInfo.costPrice | formatMoney}}</del>
-        </span>
-      </div>
-      <div class="bottom">
-        <img src="../../images/cme/phrase2/info.png" />
-        <span>激活或购买后可学习课程</span>
-      </div>
-    </article>
-    <article class="right">
-      <span class="left" @click="download">APP购买更优惠</span>
-    </article>
-  </section>
-</template>
-<script>
-export default {
-  props: {
-    cardInfo: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    download() {
-      this.$sendBuriedData({
-        component_tag: `882#88217`
-      });
-      setTimeout(() => {
-        window.location.href =
-          "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
-      }, 100);
-    },    
-  }
-};
-</script>
-<style  lang="less" scoped>
-.bind-cart-wrapper {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  height: 60px;
-  line-height: 1;
-  justify-content: space-between;
-  padding: 10px 15px;
-  font-size: 14px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
-  .left {
-    display: flex;
-    flex-direction: column;
-    height: 40px;
-    line-height: 1;
-    font-size: 12px;
-    // align-items: ;
-    .top {
-      margin-top: 3px;
-      height: 24px;
-      .discount {
-        color: #fb5b52;
-        font-size: 18px;
-        font-weight: 700;
-        margin-right: 4px;
-      }
-      .price {
-        color: #979899;
-      }
-    }
-    .bottom {
-      display: flex;
-      flex-direction: row;
-      img {
-        width: 12px;
-        height: 12px;
-        margin-left: 1px;
-        margin-right: 4px;
-      }
-      & > span {
-        font-size: 12px;
-        color: #979899;
-      }
-    }
-  }
-  .right {
-    display: flex;
-    flex-direction: row;
-    span {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      width: 138px;
-      font-size: 14px;
-      font-weight: 700;
-      text-align: center;
-      &.left {
-        // border: 1px solid rgba(255, 122, 75, 1);
-        // border-right-style: none;
-        color: #FFFFFF;
-        background:linear-gradient(137deg,rgba(255,166,95,1) 0%,rgba(255,122,75,1) 100%);
-        border-radius: 20px;
-      }
-    }
-  }
-}
-</style>

src/components/cme/bind-card-button.vue

-<template>
-  <section class="bind-cart-wrapper">
-    <article class="left">
-      <div class="top">
-        <span class="discount">￥{{(cardInfo.couponPrice || cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
-        <span v-show="cardInfo.couponPrice || cardInfo.preferentialPrice" class="price">
-          <del>原价￥{{cardInfo.costPrice | formatMoney}}</del>
-        </span>
-      </div>
-      <div class="bottom">
-        <img src="../../images/cme/phrase2/info.png" />
-        <span>{{desc}}</span>
-      </div>
-    </article>
-    <article class="right">
-      <span class="left" @click="changeClick">去激活</span>
-         <span @click="gotoBuy" class="right">去购买</span>
-    </article>
-  </section>
-</template>
-<script>
-export default {
-  props: {
-    cardInfo: {
-      type: Object,
-      default: () => {}
-    },
-    desc: {
-      type: String,
-      default: "激活或购买后可学习课程"
-    }
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    changeClick(){
-      this.$sendBuriedData({
-        component_tag: `882#88224`
-      });
-      this.$emit("changeClick")
-    },
-    gotoBuy() {
-      this.$sendBuriedData({
-        component_tag: `882#88223`
-      });
-      this.$emit("gotoBuy");
-    }
-  }
-};
-</script>
-<style  lang="less" scoped>
-.bind-cart-wrapper {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  height: 60px;
-  line-height: 1;
-  justify-content: space-between;
-  padding: 10px 15px;
-  font-size: 14px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
-  .left {
-    display: flex;
-    flex-direction: column;
-    height: 40px;
-    line-height: 1;
-    font-size: 12px;
-    // align-items: ;
-    .top {
-      margin-top: 3px;
-      height: 24px;
-      .discount {
-        color: #fb5b52;
-        font-size: 18px;
-        font-weight: 700;
-        margin-right: 4px;
-      }
-      .price {
-        color: #979899;
-      }
-    }
-    .bottom {
-      display: flex;
-      flex-direction: row;
-      img {
-        width: 12px;
-        height: 12px;
-        margin-left: 1px;
-        margin-right: 4px;
-      }
-      & > span {
-        font-size: 12px;
-        color: #979899;
-      }
-    }
-  }
-  .right {
-    display: flex;
-    flex-direction: row;
-    span {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      width: 80px;
-      font-size: 14px;
-      font-weight: 700;
-      text-align: center;
-      &.left {
-        border-radius: 20px 0px 0px 20px;
-        border: 1px solid rgba(255, 122, 75, 1);
-        border-right-style: none;
-        color: #ff7a4b;
-      }
-      &.right {
-        background: linear-gradient(
-          137deg,
-          rgba(255, 166, 95, 1) 0%,
-          rgba(255, 122, 75, 1) 100%
-        );
-        border-radius: 0px 20px 20px 0px;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>

src/components/cme/card-banner.vue

-<template>
-  <section @click="jumpToCardList" class="card-banner-wrapper">
-    <article class="left">
-      <img :class="{'is-android': isAndroid}" src="../../images/cme/phrase2/what.png" alt />
-      <span>学习课程必须使用学习卡哦~</span>
-    </article>
-    <span class="right">购买学习卡</span>
-  </section>
-</template>
-<script>
-import { getHactiveUrl } from "@/utils/index";
-import { mapGetters } from "vuex";
-import { Toast  } from 'vant';
-export default {
-  data() {
-    return {
-      isAndroid: window.__isAndroid,
-    }
-  },
-  props: {
-    hasLogin: {
-      type: Boolean | Number,
-      default: false
-    }
-  },
-  computed: {
-    ...mapGetters(["userInfo"])
-  },
-  methods: {
-    // 跳转到学习卡列表页面
-    jumpToCardList() {
-      // 如果没有登录，则要去登录页面
-      // 打开页面埋点
-      this.$sendBuriedData({
-        component_tag: "886#8865"
-      });
-      let appVersion = this.userInfo.appVersion;
-      let appVersionNum = appVersion.split('.').join('');
-      console.log('appVersionNum', appVersionNum);
-      if(appVersionNum < 341) {
-        Toast('请您下载新版本App');
-        return;
-      }
-      // if (!this.hasLogin) {
-      //   rocNative.gotoLogin();
-      //   return;
-      // }
-      if (window.__isWeb) {
-        console.log("in jumpToCardList");
-        return;
-      } else {
-        let pageUrl = getHactiveUrl("/message_push/#/study-card?origin=1");
-        let paramList = [
-          {
-            key: "pageUrl",
-            value: pageUrl,
-            type: 4,
-            seqNo: 1
-          }
-        ];
-        rocNative.dispatchEventByModuleCode({
-          modeCode: "M300",
-          jsonString: paramList
-        });
-      }
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.card-banner-wrapper {
-  width: 100%;
-  height: 40px;
-  display: flex;
-  flex-direction: row;
-  padding: 0 15px;
-  justify-content: space-between;
-  align-items: center;
-  background: #fefaf5;
-  .left {
-    display: flex;
-    height: 40px;
-    flex-direction: row;
-    align-items: center;
-    img {
-      width: 13px;
-      height: 13px;
-      margin-right: 4px;
-      &.is-android {
-        width: 12px;
-        height: 13px;
-        margin-bottom: 2px;
-      }
-    }
-    span {
-      font-size: 13px;
-      color: #e6a23c;
-    }
-  }
-  .right {
-    height: 25px;
-    line-height: 25px;
-    font-size: 12px;
-    padding: 0 10px;
-    background: rgba(230, 162, 60, 1);
-    border-radius: 25px;
-    border: 1px solid rgba(230, 162, 60, 1);
-    color: #ffffff;
-  }
-}
-</style>

src/components/cme/change-card.vue

-<template>
-  <van-popup
-    v-model="isShow"
-    @click-overlay="cancle"
-    position="bottom"
-  >
-    <section class="bind-cart-wrapper">
-      <article class="title">
-        <span>激活详情</span>
-        <img @click="cancle" src="../../images/cme/close.png" />
-      </article>
-      <article class="tip">
-        <div class="left">
-          <div class="img-wrapper"><img :class="{'android': isAndroid}" src="../../images/cme/phrase2/info.png"/></div>
-          <span>激活码用于学习课程，您可以从订单详情或您的实体卡查看激活码。激活码一旦使用，不可退回。</span>
-        </div>
-      </article>
-      <section class="input-wrapper">
-        <div class="code">
-          <van-field
-            maxlength="26"
-            v-model="activationCode"
-            label="激活码"
-            placeholder="请输入激活码"
-            @click.native="onInputClick"
-          />
-          <!-- <span>激活码</span>
-          <input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
-          <div v-show="!isAndroid" class="cover"></div>
-        </div>
-        <span class="error">{{errorMsg}}</span>
-        <img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" />
-      </section>
-
-      <article class="bottom">
-        <van-button @click="confirm" size="large" round color="#449284">确认激活</van-button>
-      </article>
-    </section>
-  </van-popup>
-</template>
-<script>
-export default {
-  props: {
-    isShow: {
-      type: Boolean,
-      default: true
-    },
-    changeErrorMsg: {
-      type: String,
-      default: ''
-    }
-  },
-
-  data() {
-    return {
-      isAndroid: __isAndroid,
-      activationCode: '',
-      errorMsg: ''
-    };
-  },
-
-  //
-  watch: {
-    activationCode(val) {
-      if(!val) {
-        this.errorMsg = '请输入激活码';
-      } else {
-        this.errorMsg = '';
-      }
-      this.$nextTick(() => {
-        this.activationCode = val.replace(/\s/g,'').replace(/.....(?!$)/g,'$& ');
-      });
-    },
-    changeErrorMsg(val) {
-      if(val) {
-        this.errorMsg = val;
-      }
-    },
-    isShow(val) {
-      this.activationCode = '';
-      this.errorMsg = '';
-    }
-  },
-
-  methods: {
-    cancle() {
-      this.$emit("cancle");
-    },
-    confirm() {
-      this.$sendBuriedData({
-        // component_tag: `882#88207`
-        component_tag: `882#88225`
-      });
-      if(!this.activationCode) {
-        this.errorMsg = '请输入激活码';
-        return;
-      };
-      if(this.activationCode.length != 23) {
-        this.errorMsg = '请输入正确的激活码';
-        return;
-      }
-      let aCode = JSON.parse(JSON.stringify(this.activationCode));
-      aCode = aCode.replace(/\s/g,'');
-      this.$emit("confirm", aCode);
-    },
-    clear() {
-      this.activationCode = ''
-    },
-    onInputClick() {
-      this.$sendBuriedData({
-        component_tag: `882#88208`
-      });
-    }
-  }
-};
-</script>
-<style  lang="less" scoped>
-.bind-cart-wrapper {
-  width: 100%;
-  display: flex;
-  line-height: 1;
-  padding: 10px 15px;
-  display: flex;
-  flex-direction: column;
-  background: rgba(255, 255, 255, 1);
-  // box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
-  .title {
-    display: flex;
-    flex-direction: row;
-    font-size: 18px;
-    font-weight: 700;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    margin-top: 20px;
-    img {
-      position: relative;
-      top: 0;
-      right: -120px;
-      width: 12px;
-      height: 12px;
-    }
-  }
-  .tip {
-    display: flex;
-    margin-top: 40px;
-    .left {
-      display: flex;
-      line-height: 1.2;
-      font-size: 12px;
-      .img-wrapper {
-        width: 20px;
-        // margin-right: 4px;
-        img {
-          position: relative;
-          top: 1px;
-          width: 12px;
-          height: 12px;
-        }
-        img.android {
-          top: 1.5px;
-          width: 11.5px;
-        }
-      }
-
-      span {
-        display: inline-block;
-        margin-left: 4px;
-      }
-      color: #979899;
-    }
-  }
-  .input-wrapper {
-    position: relative;
-    .code {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      padding: 20px 0;
-      padding-top: 0;
-      .cover {
-        width: 286px;
-        position: absolute;
-        top: 21.5px;
-        z-index: 1000;
-        border-top: 4px solid #fff;
-        margin-left: 57px;
-        margin-right: 1px;
-        border-radius: 4px;
-      }
-    }
-    .error {
-      position: absolute;
-      top: 66px;
-      left: 56px;
-      display: inline-block;
-      color: red;
-      font-size: 12px;
-    }
-
-    img {
-      position: absolute;
-      top: 33px;
-      right: 12px;
-      width: 15px;
-      height: 15px;
-    }
-  }
-
-  .bottom {
-    display: flex;
-    margin-bottom: 40px;
-  }
-}
-</style>

src/components/cme/common-bottom-info.vue

-<template>
-  <div class="common-bottom-info-wrapper">
-    <div class="common-bottom">
-      <span>若有问题可联系客服：</span>
-      <img src="../../images/cme/icon-phone.png" />
-      <!-- <span>400-920-8877</span> -->
-      <a href="tel:4009208877"><span>400-920-8877</span></a>
-    </div>
-  </div>
-</template>
-<style  lang="less" scoped>
-.common-bottom-info-wrapper {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  left: 0;
-  margin: 20px auto;
-  .common-bottom {
-    display: flex;
-    display: 100%;
-    flex-direction: row;
-    font-size: 14px;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    span {
-      font-size: 14px;
-      font-weight: 400;
-      height: 14px;
-      line-height: 14px;
-      color: #676869;
-    }
-    a span {
-      color: #449284;
-    }
-    // span:nth-child(1) {
-    //   color: #449284;
-    // }
-    img {
-      margin-right: 4px;
-      width: 10px;
-      height: 12px;
-    }
-  }
-}
-</style>

src/components/cme/common-button.vue

-<template>
-  <div class="common-button-wrapper button-default" :class="type" @click="btnClick">
-    <span>{{btnText}}</span>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    btnText: {
-      type: String,
-      default: '确定'
-    },
-    type: {
-      type: String,
-      default: 'primary'
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  methods: {
-    btnClick() {
-      if(this.type == 'disabled') return;
-      this.$emit('btnClick');
-    }
-  },
-}
-</script>
-<style  lang="less" scoped>
-  .common-button-wrapper {
-    font-size: 14px;
-    margin: 20px 15px;
-    text-align: center;
-    &.button-default {
-      span {
-        display: block;
-        height: 50px;
-        line-height: 50px;
-        width: 100%;
-        border-radius: 25px;
-        font-size: 17px;
-        font-weight: 700;
-        color: #FFFFFF;
-        background: #449284;
-      }
-    }
-    &.primary {
-      span {
-        color: #FFFFFF;
-        background: #449284;
-      }
-    }
-    &.disabled {
-      span {
-        color: rgba(255, 255, 255, 0.95);
-        background: rgba(68, 146, 132, 0.4);;
-      }
-    }
-  }
-
-</style>

src/components/cme/common-dialog copy.vue

-<template>
-  <div class="common-dialog-wrraper" v-if="isShowDialog">
-    <div class="dialog-mask"></div>
-    <div class="dialog-container">
-      <div class="dialog-content">{{content}}</div>
-      <div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div>
-      <div class="dialog-footer v-hairline-top">
-        <span :class="{'single-btn': isSingle}" @click.stop.prevent="handlerAction(1)">{{cancleBtnText}}</span>
-        <span v-show="!isSingle" class="confirm-btn v-hairline-left" @click.stop.prevent="handlerAction(2)">{{confirmBtnText}}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "common-dialog",
-  data() {
-    return {
-
-    };
-  },
-  props: {
-    content: {
-      type: String,
-      default: ''
-    },
-    needSubContent: {
-      type: Boolean,
-      default: false
-    },
-    subContent: {
-      type: String,
-      default: ''
-    },
-    cancleBtnText: {
-      type: String,
-      default: '取消'
-    },
-    confirmBtnText: {
-      type: String,
-      default: '确定'
-    },
-    isShowDialog: {
-      type: Boolean,
-      default: false
-    },
-    isSingle: {
-      type: Boolean,
-      default: false
-    },
-  },
-  methods: {
-    handlerAction(type) {
-      this.$emit("handlerAction", type);
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.common-dialog-wrraper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2019;
-  .dialog-mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2020;
-  }
-  .dialog-container {
-    z-index: 2021;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    overflow: hidden;
-    width: 300px;
-    font-size: 18px;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-    border-radius: 4px;
-    background-color: #fff;
-    -webkit-transform: translate3d(-50%, -50%, 0);
-    transform: translate3d(-50%, -50%, 0);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    .dialog-content {
-      // margin: 30px 22px;
-      margin: 30px;
-      text-align: center;
-      font-size: 18px;
-      font-weight: 400;
-      color: #373839;
-    }
-    .dialog-sub-content {
-      margin: -16px 30px 30px;
-      // margin: -16px 22px 30px;
-      text-align: left;
-      font-size: 14px;
-      line-height: 24px;
-      font-weight: 400;
-      color: #676869;
-    }
-    .dialog-footer {
-      height: 50px;
-      display: flex;
-      align-items: center;
-      &.v-hairline-top::after {
-        border-top-width: 1px;
-      }
-      span {
-        display: inline-block;
-        // width: 50%;
-        flex: 1;
-        height: 50px;
-        line-height: 50px;
-        font-size: 17px;
-        text-align: center;
-        color: #979899;
-        &.v-hairline-left::after {
-          border-left-width: 1px;
-        }
-        &.confirm-btn {
-          color: #449284;
-        }
-        &.single-btn {
-          color: #449284;
-        }
-      }
-    }
-  }
-
-  [class*="v-hairline"] {
-    position: relative;
-    &::after {
-      content: " ";
-      position: absolute;
-      pointer-events: none;
-      box-sizing: border-box;
-      top: -50%;
-      left: -50%;
-      right: -50%;
-      bottom: -50%;
-      -webkit-transform: scale(0.5);
-      transform: scale(0.5);
-      border: 0 solid #f0f1f2;
-    }
-  }
-}
-</style>

src/components/cme/common-dialog.vue

-<template>
-  <div class="common-dialog-wrraper" v-if="isShowDialog">
-    <div class="dialog-mask"></div>
-    <div class="dialog-container">
-      <div class="dialog-content">{{content}}</div>
-      <div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div>
-      <div class="dialog-footer v-hairline-top">
-        <span :class="{'single-btn': isSingle}" @click="handlerAction(1)">{{cancleBtnText}}</span>
-        <span v-show="!isSingle" class="confirm-btn v-hairline-left" @click="handlerAction(2)">{{confirmBtnText}}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "common-dialog",
-  data() {
-    return {
-
-    };
-  },
-  props: {
-    content: {
-      type: String,
-      default: ''
-    },
-    needSubContent: {
-      type: Boolean,
-      default: false
-    },
-    subContent: {
-      type: String,
-      default: ''
-    },
-    cancleBtnText: {
-      type: String,
-      default: '取消'
-    },
-    confirmBtnText: {
-      type: String,
-      default: '确定'
-    },
-    isShowDialog: {
-      type: Boolean,
-      default: false
-    },
-    isSingle: {
-      type: Boolean,
-      default: false
-    },
-  },
-  methods: {
-    handlerAction(type) {
-      this.$emit("handlerAction", type);
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.common-dialog-wrraper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2019;
-  .dialog-mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2020;
-  }
-  .dialog-container {
-    z-index: 2021;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    overflow: hidden;
-    width: 300px;
-    font-size: 18px;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-    border-radius: 4px;
-    background-color: #fff;
-    -webkit-transform: translate3d(-50%, -50%, 0);
-    transform: translate3d(-50%, -50%, 0);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    .dialog-content {
-      // margin: 30px 22px;
-      margin: 30px;
-      text-align: center;
-      font-size: 18px;
-      font-weight: 400;
-      color: #373839;
-    }
-    .dialog-sub-content {
-      margin: -16px 30px 30px;
-      // margin: -16px 22px 30px;
-      text-align: left;
-      font-size: 14px;
-      line-height: 24px;
-      font-weight: 400;
-      color: #676869;
-    }
-    .dialog-footer {
-      height: 50px;
-      display: flex;
-      align-items: center;
-      &.v-hairline-top::after {
-        border-top-width: 1px;
-      }
-      span {
-        display: inline-block;
-        // width: 50%;
-        flex: 1;
-        height: 50px;
-        line-height: 50px;
-        font-size: 17px;
-        text-align: center;
-        color: #979899;
-        &.v-hairline-left::after {
-          border-left-width: 1px;
-        }
-        &.confirm-btn {
-          color: #449284;
-        }
-        &.single-btn {
-          color: #449284;
-        }
-      }
-    }
-  }
-
-  [class*="v-hairline"] {
-    position: relative;
-    &::after {
-      content: " ";
-      position: absolute;
-      pointer-events: none;
-      box-sizing: border-box;
-      top: -50%;
-      left: -50%;
-      right: -50%;
-      bottom: -50%;
-      -webkit-transform: scale(0.5);
-      transform: scale(0.5);
-      border: 0 solid #f0f1f2;
-    }
-  }
-  &.shikan {
-    .dialog-sub-content {
-      text-align: center;
-      font-size: 16px;
-    }
-  }
-}
-</style>

src/components/cme/exjumper-button.vue

-<template>
-  <div class="exjumper-button-wrapper button-default" :class="type" @click="btnClick">
-    <span>{{btnText}}</span>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    btnText: {
-      type: String,
-      default: '确定'
-    },
-    type: {
-      type: String,
-      default: 'primary'
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  methods: {
-    btnClick() {
-      if(this.type == 'disabled') return;
-      this.$emit('btnClick');
-    }
-  },
-}
-</script>
-<style  lang="less" scoped>
-  .exjumper-button-wrapper {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 1000;
-    font-size: 14px;
-    padding: 20px 15px;
-    background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
-    text-align: center;
-    &.button-default {
-      span {
-        display: block;
-        height: 50px;
-        line-height: 50px;
-        width: 100%;
-        border-radius: 25px;
-        font-size: 17px;
-        font-weight: 700;
-        color: #FFFFFF;
-        background: #449284;
-      }
-    }
-    &.primary {
-      span {
-        color: #FFFFFF;
-        background: #449284;
-      }
-    }
-    &.disabled {
-      span {
-        color: rgba(255, 255, 255, 0.95);
-        background: #C7C8C9;
-      }
-    }
-  }
-
-</style>

src/components/cme/item-intro.vue

-<template>
-    <div class="item-intro-container">
-        <div class="basic-title">项目介绍</div>
-        <div class="content">
-            <div class="text">{{textContent}}</div>
-            <div v-if="textContent.length > 70" class="desc" @click="allText">
-                <span>{{btnText}}</span>
-                <img v-if="!allTextFlag" src="../../images/down.png"/>
-                <img v-if="allTextFlag" src="../../images/up.png"/>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    props: {
-        textContent: {
-            type: String,
-            default: ''
-        }
-    },
-    data() {
-        return {
-            btnText: '详情',
-            allTextFlag: false
-        }
-    },
-    methods: {
-        allText() {
-            let _this = this;
-            if(!_this.allTextFlag) {
-                _this.btnText = '收起';
-                _this.allTextFlag = true;
-            }else {
-                _this.btnText = '详情';
-                _this.allTextFlag = false;
-            }
-            _this.$emit("itemIntroText", {allTextFlag: _this.allTextFlag});
-        }
-    }
-}
-</script>
-<style lang="less" scoped>
-.item-intro-container {
-    padding-bottom: 20px;
-    margin: 30px 15px 0px;
-    border-bottom: 1px solid #E7E8E9;
-    .basic-title {
-        font-size: 18px;
-        line-height: 18px;
-        color: #373839;
-        font-weight: 700;
-    }
-    .content {
-        position: relative;
-        margin-top:  16px;
-        .text {
-            font-size: 14px;
-            line-height: 21px;
-            color: #676869;
-        }
-        .desc {
-            // position: absolute;
-            // right: 0;
-            // bottom: 1px;
-            text-align: right;
-            background: #fff;
-            line-height: 14px;
-            z-index: 99;
-            span {
-                font-size: 14px;
-                line-height: 14px;
-                color: #449284;
-            }
-            img {
-                width: 12px;
-            }
-        }
-    }
-}
-</style>

src/components/common/common-splite-line.vue

-<template>
-  <div class="split-line" :style="{'background-color': bgColor, 'height': lineHeight}"></div>
-</template>
-<script>
-export default {
-  name: 'common-splite-line',
-  data() {
-    return {};
-  },
-  props: {
-    bgColor: {
-      type: String,
-      default: '#F8F9FA'
-    },
-    lineHeight: {
-      type: String,
-      default: '6px'
-    }
-  },
-  created() {},
-  mounted() {},
-  computed: {},
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-.split-line {
-  display: flex;
-}
-</style>