Merge branch 'dev-coursedetail-0817' into 'release'

CME、职称考页面，样式优化等   code reviewer：杨广俊

CME、职称考页面，样式优化等   code reviewer：杨广俊

See merge request !1

.babelrc

 {
-  "presets": ["env", "es2015", "stage-2"],
+  "presets": [
+    "@babel/preset-env"
+  ],
   "plugins": [
     "add-module-exports",
-    "transform-runtime",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": 2
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions"
   ],
-  "comments": false,
+  "comments": false
 }

build/webpack.base.conf.js

@@ -40,7 +40,7 @@ module.exports = {
             loader: 'vue'
         }, {
             test: /\.js$/,
-            loader: 'babel',
+            loader: 'babel-loader',
             include: projectRoot,
             exclude: /node_modules/
         }, {
@@ -69,6 +69,15 @@ module.exports = {
         postcss: [
             require('autoprefixer')({
                 browsers: ['last 10 versions']
+            }),
+            require('postcss-pxtorem')({
+                rootValue: 37.5,
+                unitPrecision: 5,
+                propWhiteList: [],
+                selectorBlackList: [/^html$/],
+                replace: true,
+                mediaQuery: false,
+                minPixelValue: 2
             })
         ]
     }

package.json

@@ -15,40 +15,41 @@
     "build:pro": "cross-env BUILD_ENV=pro node build/build.js"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.2.5",
+    "@babel/polyfill": "^7.10.4",
     "axios": "0.16.2",
-    "better-scroll": "^0.1.15",
     "clipboard": "^2.0.6",
-    "echarts": "^4.2.0-rc.2",
-    "fastclick": "^1.0.6",
-    "img-vuer": "^0.17.2",
-    "install": "^0.13.0",
-    "iscroll": "^5.2.0",
-    "js-cookie": "^2.2.0",
-    "npm": "^6.14.6",
+    "pdfjs-dist": "^2.4.456",
     "pica-topic-stencil": "^1.0.8",
-    "showdown": "^1.6.4",
     "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"
+    "web-buried-point": "^2.1.0",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime-corejs2": "^7.0.0",
     "autoprefixer": "^6.4.0",
     "autoprefixer-loader": "^3.2.0",
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-loader": "7.1.1",
     "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-import": "^1.11.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
-    "babel-register": "^6.0.0",
-    "babel-runtime": "^6.23.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.1.0",
     "cross-env": "^5.0.0",
@@ -64,13 +65,9 @@
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "node-gyp": "^3.4.0",
-    "node-sass": "^4.9.2",
     "opn": "^4.0.2",
     "ora": "^0.3.0",
-    "sass": "^0.5.0",
-    "sass-loader": "^4.1.1",
-    "scss": "^0.2.4",
-    "scss-loader": "0.0.1",
+    "postcss-pxtorem": "^5.1.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.4",
     "style-loader": "^0.13.1",

src/App.vue

 <template>
-	<div>
+	<div class="router-container">
 		<transition name="router-fade" mode="out-in">
 			<keep-alive>
 			  <router-view v-if="$route.meta.keepAlive"></router-view>
@@ -22,7 +22,7 @@
 
 </script>
 
-<style lang="scss">
+<style lang="less">
   	@import './style/mixin';
   	@import './style/common';
   	@import './style/global';
@@ -32,4 +32,7 @@
 	.router-fade-enter, .router-fade-leave-active {
 	  	opacity: 0;
 	}
+  .router-container{
+    height: 100%;
+  }
 </style>

src/components/business/back-top.vue

@@ -44,15 +44,14 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .back-btn {
   position: fixed;
-  width: px2rem(35px);
-  height: px2rem(35px);
-  right: px2rem(15px);
+  width: 35px;
+  height: 35px;
+  right: 15px;
   z-index: 100;
-  bottom: px2rem(80px);
+  bottom: 80px;
   img {
     width: 100%;
     height: 100%;

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

@@ -179,70 +179,69 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .cell-container {
   display: flex;
   flex-direction: column;
-  margin: 0 px2rem(15px);
+  margin: 0 15px;
   &-item {
     position: relative;
     display: flex;
     flex-direction: row;
-    // margin: px2rem(6px) px2rem(0px);
-    // height: px2rem(51px);
-    margin-bottom: px2rem(32px);
-    line-height: px2rem(51px);
-    font-size: px2rem(15px);
-    // padding: px2rem(0px) px2rem(15px);
+    // 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: px2rem(6px);
+    // border-radius: 6px;
     justify-content: space-between;
     align-items: center;
     .name {
       &-logo {
         position: relative;
         z-index: 9;
-        margin-right: px2rem(6px);
-        width: px2rem(20px);
-        height: px2rem(20px);
+        margin-right: 6px;
+        width: 20px;
+        height: 20px;
         text-align: center;
         background:rgba(68,146,132,1);
-        font-size: px2rem(12px);
+        font-size: 12px;
         font-weight: 700;
         color: #FFFFFF;
         border-radius: 50%;
         float: left;
-        line-height: px2rem(22px);
+        line-height: 22px;
         // display:table;
         // overflow:hidden;
         // span {
         //   color: #FFFFFF;
-        //   font-size: px2rem(12px);
+        //   font-size: 12px;
         //   font-weight: 700;
         //   display: table-cell;
         //   text-align: center;
         //   vertical-align: middle;
-        //   line-height: px2rem(20px);
+        //   line-height: 20px;
         // }
         &::before {
           position: absolute;
-          top: px2rem(-6px);
-          left: px2rem(8px);
+          top: -6px;
+          left: 8px;
           display: inline-block;
-          height: px2rem(6px);
-          width: px2rem(4px);
+          height: 6px;
+          width: 4px;
           background: #FFFFFF;
           content: "";
         }
         &::after {
           position: absolute;
-          top: px2rem(20px);
-          left: px2rem(8px);
+          top: 20px;
+          left: 8px;
           display: inline-block;
-          height: px2rem(6px);
-          width: px2rem(4px);
+          height: 6px;
+          width: 4px;
           background: #FFFFFF;
           content: "";
         }
@@ -254,57 +253,59 @@ export default {
         background:rgba(231, 232, 233, 1);
       }
       &-title {
+        flex: 1;
         // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-        width: px2rem(231px);
-        font-size: px2rem(15px);
+        // width: 231px;
+        font-size: 15px;
         font-weight: 700;
-        line-height: px2rem(21px);
+        line-height: 21px;
         color: #373839;
-        float: left;
+        padding-right: 10px;
+        // float: left;
       }
       &-title-no {
         color: rgba(151, 152, 153, 1);
       }
       // &::before {
       //   position: relative;
-      //   top: px2rem(3px);
+      //   top: 3px;
       //   display: inline-block;
-      //   width: px2rem(4px);
+      //   width: 4px;
       //   content: "";
-      //   margin-right: px2rem(5px);
-      //   height: px2rem(16px);
+      //   margin-right: 5px;
+      //   height: 16px;
       //   background: #449284;
-      //   border-radius: px2rem(3px);
+      //   border-radius: 3px;
       // }
 
       // span {
       //   img {
-      //     margin-top: px2rem(4px);
+      //     margin-top: 4px;
       //     position: relative;
-      //     top: px2rem(2px);
-      //     width: px2rem(70px);
-      //     height: px2rem(20px);
+      //     top: 2px;
+      //     width: 70px;
+      //     height: 20px;
       //   }
       // }
     }
     .text-action {
-      width: px2rem(68px);
-      height: px2rem(25px);
-      line-height: px2rem(25px);
+      width: 68px;
+      height: 25px;
+      line-height: 25px;
       text-align: center;
-      font-size: px2rem(12px);
+      font-size: 12px;
       font-weight: 700;
-      border-radius: px2rem(15px);
+      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: px2rem(2px);
-        top: px2rem(3px);
-        width: px2rem(8px);
-        height: px2rem(12px);
+        left: 2px;
+        top: 3px;
+        width: 8px;
+        height: 12px;
       }
       &-no {
         border: 0.5px solid #c7c8c9;
@@ -317,40 +318,40 @@ export default {
   }
   span {
     img {
-      margin-left: px2rem(26px);
+      margin-left: 26px;
       position: relative;
-      top: px2rem(-28px);
-      width: px2rem(70px);
-      height: px2rem(20px);
+      top: -28px;
+      width: 70px;
+      height: 20px;
     }
     .space2 {
-      top: px2rem(-26px);
+      top: -26px;
     }
   }
   .connect-line {
     position: absolute;
-    // top: px2rem(32px);
-    top: px2rem(3px);
-    left: px2rem(9.5px);
-    height: px2rem(42px);
+    // top: 32px;
+    top: 3px;
+    left: 9.5px;
+    height: 42px;
     width: 0.5px;
     border: 0.5px dashed rgba(240, 241, 244, 1);
   }
   .len4 {
-    height: px2rem(100px);
+    height: 100px;
   }
   .len3 {
-    height: px2rem(82px);
+    height: 82px;
   }
   .len2 {
-    height: px2rem(82px);
+    height: 82px;
   }
   .len1 {
-    height: px2rem(62px);
+    height: 62px;
   }
   .bottom-line {
     position: relative;
-    margin: px2rem(6px) 0 px2rem(28px) 0;
+    margin: 6px 0 28px 0;
     bottom: 0px;
     width: 100%;
     border-bottom: 0.5px solid #F0F1F2;

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

@@ -173,26 +173,25 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .mater-container {
   position: relative;
-  margin: px2rem(0px) px2rem(15px);
+  margin: 0px 15px;
 }
 .mater-item {
   display: flex;
   // width: 100%;
-  height: px2rem(80px);
+  height: 80px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   img {
-    width: px2rem(35px);
-    height: px2rem(37px);
-    margin-right: px2rem(10px);
-    border-radius: px2rem(3px) px2rem(2px) px2rem(2px) px2rem(3px);
+    width: 35px;
+    height: 37px;
+    margin-right: 10px;
+    border-radius: 3px 2px 2px 3px;
   }
   &-left {
     display: flex;
@@ -201,40 +200,40 @@ export default {
   }
   &-right {
     display: flex;
-    // width: px2rem(215px);
+    // width: 215px;
     flex: 1;
     flex-direction: column;
-    padding-top: px2rem(4px);
+    padding-top: 4px;
     &-title {
-      // height: px2rem(50px);
-      line-height: px2rem(23px);
-      font-size: px2rem(15px);
+      // height: 50px;
+      line-height: 23px;
+      font-size: 15px;
       font-weight: 700;
       color: rgba(55, 56, 57, 1);
     }
     &-other {
-      height: px2rem(22px);
-      line-height: px2rem(20px);
-      font-size: px2rem(13px);
+      height: 22px;
+      line-height: 20px;
+      font-size: 13px;
       font-weight: 400;
       color: rgba(151, 152, 153, 1);
     }
   }
   .mater-details {
     position: relative;
-    right: px2rem(-10px);
+    right: -10px;
     display: flex;
     flex-direction: row;
     align-items: center;
     span {
       // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-      font-size: px2rem(14px);
+      font-size: 14px;
       font-weight: 700;
       color: #666;
     }
     img {
-      width: px2rem(15px);
-      height: px2rem(16px);
+      width: 15px;
+      height: 16px;
     }
   }
 }

src/components/business/merge-title.vue

@@ -97,52 +97,52 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .comp-title-container {
-  margin-top: px2rem(17px);
-  padding-left: px2rem(15px);
+  margin-top: 17px;
+  padding-left: 15px;
   // display: flex;
   // flex-direction: row;
   // justify-content: space-between;
   .comp-text {
     position: relative;
-    width: px2rem(345px);
+    // width: 345px;
+    width: 100%;
     overflow: hidden;
   }
 }
 .comp-title {
   position: relative;
-  width: px2rem(238px);
+  width: 238px;
   float: left;
-  line-height: px2rem(30px);
+  line-height: 30px;
 }
 .comp-title-explain {
   position: relative;
   float: right;
-  // margin-right: px2rem(15px);
-  margin-top: px2rem(3px);
+  // margin-right: 15px;
+  margin-top: 3px;
   span {
-    font-size: px2rem(14px);
+    font-size: 14px;
     font-weight: 400;
     color: rgba(12, 21, 39, 0.4);
-    // margin-right: px2rem(3px);
-    line-height: px2rem(18px);
-    height: px2rem(18px);
+    // margin-right: 3px;
+    line-height: 18px;
+    height: 18px;
     vertical-align: middle;
   }
   img {
-    width: px2rem(8px);
-    height: px2rem(12px);
+    width: 8px;
+    height: 12px;
     vertical-align: middle;
   }
 }
 .cert-img {
-  margin-top: px2rem(1px);
+  margin-top: 1px;
   .banner-img {
-    width: px2rem(70px);
-    height: px2rem(20px);
-    padding-top: px2rem(2px);
+    width: 70px;
+    height: 20px;
+    padding-top: 2px;
   }
 }
 </style>

src/components/business/no-content.vue

@@ -24,27 +24,26 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .nc-container {
   display: flex;
   width: 100%;
   flex-direction: column;
   justify-content: center;
   align-content: center;
-  margin-top: px2rem(100px);
-  margin-bottom: px2rem(20px);
+  margin-top: 100px;
+  margin-bottom: 20px;
   text-align: center;
   // margin: 0 auto;
   &-img {
-    margin-left: px2rem(100px);
-    width: px2rem(150px);
-    height: px2rem(150px);
+    margin-left: 100px;
+    width: 150px;
+    height: 150px;
   }
   &-text {
-    height: px2rem(21px);
-    line-height: px2rem(21px);
-    font-size: px2rem(15px);
+    height: 21px;
+    line-height: 21px;
+    font-size: 15px;
     font-weight: 400;
     color: rgba(153, 153, 153, 1);
   }

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

@@ -17,13 +17,12 @@
   }
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .nc-container {
   display: flex;
   &-content {
     width: 100%;
-    height: px2rem(62px);
+    height: 62px;
   }
 }
 </style>

src/components/business/notice-item.vue

@@ -48,49 +48,48 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .item-notice-wrapper {
   .content {
     display: flex;
     flex-direction: row;
-    height: px2rem(32px);
-    line-height: px2rem(32px);
-    padding: 0 px2rem(15px);
+    height: 32px;
+    line-height: 32px;
+    padding: 0 15px;
     text-align: left;
     align-items: center;
     background: #FEFAF5;
     img {
-      width: px2rem(12px);
-      height: px2rem(12px);
-      line-height: px2rem(32px);
+      width: 12px;
+      height: 12px;
+      line-height: 32px;
     }
     span {
-      font-size: px2rem(13px);
+      font-size: 13px;
       text-align: left;
       &.gg {
-        // width: px2rem(30px);
-        padding: px2rem(1px) px2rem(5px) 0;
-        font-size: px2rem(13px);
+        // width: 30px;
+        padding: 1px 5px 0;
+        font-size: 13px;
         font-weight: 700;
         color: #835800;
       }
       &.vtc-line {
-        margin-top: px2rem(0px);
-        width: px2rem(1px);
-        height: px2rem(15px);
+        margin-top: 0px;
+        width: 1px;
+        height: 15px;
         background: #835800;
       }
       &.content {
         display: block;
         flex: 1;
-        padding-top: px2rem(1px);
-        // padding-left: px2rem(5px) !important;
-        padding: 0 px2rem(10px) 0 px2rem(5px);
-        height: px2rem(32px);
-        line-height: px2rem(32px);
+        padding-top: 1px;
+        // padding-left: 5px !important;
+        padding: 0 10px 0 5px;
+        height: 32px;
+        line-height: 32px;
         text-align: left;
-        font-size: px2rem(13px);
+        font-size: 13px;
         font-weight: 700;
         color: #E6A23C;
         white-space: nowrap;

src/components/business/pop-notice.vue

@@ -60,8 +60,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .pop-notice-wrapper {
   position: fixed;
   width: 100%;
@@ -69,7 +68,7 @@ export default {
   left: 0;
   top: 0;
   z-index: 110;
-  font-size: px2rem(20px);
+  font-size: 20px;
   .mask {
     position: absolute;
     background: rgba(0, 0, 0, 0.5);
@@ -82,19 +81,19 @@ export default {
     left: 50%;
     top: 50%;
     z-index: 112;
-    width: px2rem(300px);
-    // height: px2rem(185px);
-    margin: px2rem(-150px) 0 0 px2rem(-150px);
-    border-radius: px2rem(3px);
+    width: 300px;
+    // height: 185px;
+    margin: -150px 0 0 -150px;
+    border-radius: 3px;
 
     text-align: center;
     background: #fff;
     .top {
-      padding: px2rem(30px);
+      padding: 30px;
       .title {
         display: inline-block;
-        font-size: px2rem(18px);
-        line-height: px2rem(28px);
+        font-size: 18px;
+        line-height: 28px;
         word-break: break-all;
         font-weight: 400;
         color: #333333;
@@ -103,10 +102,10 @@ export default {
         text-align: left;
         word-break: break-all;
         display: inline-block;
-        margin: px2rem(14px) 0;
-        font-size: px2rem(14px);
-        height: px2rem(21px);
-        line-height: px2rem(21px);
+        margin: 14px 0;
+        font-size: 14px;
+        height: 21px;
+        line-height: 21px;
         font-weight: 400;
         color: #676869;
         .b {
@@ -115,18 +114,18 @@ export default {
       }
     }
     .line {
-      width: px2rem(300px);
-      height: px2rem(1px);
+      width: 300px;
+      height: 1px;
       background: rgba(240, 241, 242, 1);
     }
     .bottom {
       text-align: center;
-      font-size: px2rem(17px);
-      height: px2rem(50px);
-      line-height: px2rem(50px);
+      font-size: 17px;
+      height: 50px;
+      line-height: 50px;
       font-weight: 400;
       span {
-        font-size: px2rem(17px);
+        font-size: 17px;
         color: #449284;
       }
     }

src/components/business/update-dialog.vue

@@ -31,8 +31,7 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-  @import "../../style/mixin";
+<style lang="less" scoped>
   .dialog-mask-container{
     position: fixed;
     top: 0;
@@ -54,24 +53,24 @@ export default {
       top: 50%;
       left: 50%;
       overflow: hidden;
-      width: px2rem(300px);
-      font-size: px2rem(18px);
+      width: 300px;
+      font-size: 18px;
       -webkit-transition: .3s;
       transition: .3s;
-      border-radius: px2rem(4px);
+      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: px2rem(30px) px2rem(22px);
+        padding: 30px 22px;
         text-align: center;
-        font-size: px2rem(18px);
+        font-size: 18px;
         color: #373839;
       }
       .dialog-footer{
-        height: px2rem(50px);
+        height: 50px;
         display: flex;
         align-items: center;
         &.v-hairline-top::after{
@@ -80,9 +79,9 @@ export default {
         span{
           display: inline-block;
           width: 50%;
-          height: px2rem(50px);
-          line-height: px2rem(50px);
-          font-size: px2rem(17px);
+          height: 50px;
+          line-height: 50px;
+          font-size: 17px;
           text-align: center;
           color: #979899;
           &.v-hairline-left::after{

src/components/cme/basic-info.vue

@@ -69,32 +69,31 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .basic-container {
-  padding-bottom: px2rem(20px);
-  margin: px2rem(30px) px2rem(15px) 0px;
-  border-bottom: px2rem(1px) solid #e7e8e9;
+  padding-bottom: 20px;
+  margin: 30px 15px 0px;
+  border-bottom: 1px solid #e7e8e9;
   .basic-title {
-    font-size: px2rem(18px);
-    line-height: px2rem(18px);
+    font-size: 18px;
+    line-height: 18px;
     color: #373839;
     font-weight: 700;
   }
   .pro-name {
     display: flex;
     flex-direction: row;
-    margin-top: px2rem(16px);
-    font-size: px2rem(14px);
+    margin-top: 16px;
+    font-size: 14px;
     span {
       display: flex;
-      font-size: px2rem(14px);
+      font-size: 14px;
       align-items: center;
-      line-height: px2rem(22px);
+      line-height: 22px;
       align-content: flex-start;
       text-align: justify;
       &.title {
-        width: px2rem(84px);
+        width: 84px;
         color: #979899;
       }
       &.name {
@@ -104,20 +103,20 @@ export default {
     }
   }
   .content {
-    margin-top: px2rem(16px);
-    height: px2rem(16px);
-    line-height: px2rem(0px);
+    margin-top: 16px;
+    height: 16px;
+    line-height: 0px;
     span {
       display: inline-block;
-      font-size: px2rem(14px);
+      font-size: 14px;
       .split {
         display: inline-block;
         position: relative;
-        top: px2rem(2px);
+        top: 2px;
         left: 0;
-        width: px2rem(1px);
-        height: px2rem(13px);
-        margin: 0 px2rem(2px);
+        width: 1px;
+        height: 13px;
+        margin: 0 2px;
         background: #676869;
       }
     }
@@ -125,33 +124,33 @@ export default {
       color: #979899;
     }
     span:last-child {
-      margin-left: px2rem(15px);
+      margin-left: 15px;
       color: #676869;
     }
 
 
   }
   .remind {
-    line-height: px2rem(14px);
-    margin-top: px2rem(10px);
+    line-height: 14px;
+    margin-top: 10px;
     span {
       position: relative;
       display: inline-block;
-      padding: px2rem(5px) px2rem(10px);
-      margin-left: px2rem(78px);
-      font-size: px2rem(14px);
+      padding: 5px 10px;
+      margin-left: 78px;
+      font-size: 14px;
       color: #fb5b52;
       background: #fceeed;
-      border-radius: px2rem(4px);
+      border-radius: 4px;
     }
     span:after {
       content: "";
       position: absolute;
-      left: px2rem(10px);
-      bottom: px2rem(20px);
+      left: 10px;
+      bottom: 20px;
       width: 0;
       height: 0;
-      border-width: 0 px2rem(8px) px2rem(8px);
+      border-width: 0 8px 8px;
       border-style: solid;
       border-color: transparent transparent #fceeed;
     }

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() {
+      window.location.href =
+        "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
+    },    
+  }
+};
+</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: 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

@@ -39,8 +39,7 @@ export default {
   }
 };
 </script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .bind-cart-wrapper {
   position: fixed;
   left: 0;
@@ -49,28 +48,28 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: row;
-  height: px2rem(60px);
+  height: 60px;
   line-height: 1;
   justify-content: space-between;
-  padding: px2rem(10px) px2rem(15px);
-  font-size: px2rem(14px);
+  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: px2rem(40px);
+    height: 40px;
     line-height: 1;
     font-size: 12px;
     // align-items: ;
     .top {
-      margin-top: px2rem(3px);
-      height: px2rem(24px);
+      margin-top: 3px;
+      height: 24px;
       .discount {
         color: #fb5b52;
-        font-size: px2rem(18px);
+        font-size: 18px;
         font-weight: 700;
-        margin-right: px2rem(4px);
+        margin-right: 4px;
       }
       .price {
         color: #979899;
@@ -80,10 +79,10 @@ export default {
       display: flex;
       flex-direction: row;
       img {
-        width: px2rem(12px);
-        height: px2rem(12px);
+        width: 12px;
+        height: 12px;
         margin-left: 1px;
-        margin-right: px2rem(4px);
+        margin-right: 4px;
       }
       color: #979899;
     }
@@ -96,12 +95,12 @@ export default {
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      width: px2rem(80px);
-      font-size: px2rem(14px);
+      width: 80px;
+      font-size: 14px;
       font-weight: 700;
       text-align: center;
       &.left {
-        border-radius: px2rem(20px) 0px 0px px2rem(20px);
+        border-radius: 20px 0px 0px 20px;
         border: 1px solid rgba(255, 122, 75, 1);
         border-right-style: none;
         color: #ff7a4b;
@@ -112,7 +111,7 @@ export default {
           rgba(255, 166, 95, 1) 0%,
           rgba(255, 122, 75, 1) 100%
         );
-        border-radius: 0px px2rem(20px) px2rem(20px) 0px;
+        border-radius: 0px 20px 20px 0px;
         color: #fff;
       }
     }

src/components/cme/card-banner.vue

@@ -67,45 +67,44 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .card-banner-wrapper {
   width: 100%;
-  height: px2rem(40px);
+  height: 40px;
   display: flex;
   flex-direction: row;
-  padding: 0 px2rem(15px);
+  padding: 0 15px;
   justify-content: space-between;
   align-items: center;
   background: #fefaf5;
   .left {
     display: flex;
-    height: px2rem(40px);
+    height: 40px;
     flex-direction: row;
     align-items: center;
     img {
-      width: px2rem(13px);
-      height: px2rem(13px);
-      margin-right: px2rem(4px);
+      width: 13px;
+      height: 13px;
+      margin-right: 4px;
       &.is-android {
-        width: px2rem(12px);
-        height: px2rem(13px);
-        margin-bottom: px2rem(2px);
+        width: 12px;
+        height: 13px;
+        margin-bottom: 2px;
       }
     }
     span {
-      font-size: px2rem(13px);
+      font-size: 13px;
       color: #e6a23c;
     }
   }
   .right {
-    height: px2rem(25px);
-    line-height: px2rem(25px);
-    font-size: px2rem(12px);
-    padding: 0 px2rem(10px);
+    height: 25px;
+    line-height: 25px;
+    font-size: 12px;
+    padding: 0 10px;
     background: rgba(230, 162, 60, 1);
-    border-radius: px2rem(25px);
-    border: px2rem(1px) solid rgba(230, 162, 60, 1);
+    border-radius: 25px;
+    border: 1px solid rgba(230, 162, 60, 1);
     color: #ffffff;
   }
 }

src/components/cme/change-card.vue

@@ -113,13 +113,12 @@ export default {
   }
 };
 </script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .bind-cart-wrapper {
   width: 100%;
   display: flex;
   line-height: 1;
-  padding: px2rem(10px) px2rem(15px);
+  padding: 10px 15px;
   display: flex;
   flex-direction: column;
   background: rgba(255, 255, 255, 1);
@@ -132,40 +131,40 @@ export default {
     align-items: center;
     justify-content: center;
     width: 100%;
-    margin-top: px2rem(20px);
+    margin-top: 20px;
     img {
       position: relative;
       top: 0;
-      right: px2rem(-120px);
-      width: px2rem(12px);
-      height: px2rem(12px);
+      right: -120px;
+      width: 12px;
+      height: 12px;
     }
   }
   .tip {
     display: flex;
-    margin-top: px2rem(40px);
+    margin-top: 40px;
     .left {
       display: flex;
       line-height: 1.2;
-      font-size: px2rem(12px);
+      font-size: 12px;
       .img-wrapper {
-        width: px2rem(20px);
-        // margin-right: px2rem(4px);
+        width: 20px;
+        // margin-right: 4px;
         img {
           position: relative;
-          top: px2rem(1px);
-          width: px2rem(12px);
-          height: px2rem(12px);
+          top: 1px;
+          width: 12px;
+          height: 12px;
         }
         img.android {
-          top: px2rem(1.5px);
-          width: px2rem(11.5px);
+          top: 1.5px;
+          width: 11.5px;
         }
       }
 
       span {
         display: inline-block;
-        margin-left: px2rem(4px);
+        margin-left: 4px;
       }
       color: #979899;
     }
@@ -176,40 +175,40 @@ export default {
       position: relative;
       display: flex;
       flex-direction: column;
-      padding: px2rem(20px) 0;
+      padding: 20px 0;
       padding-top: 0;
       .cover {
-        width: px2rem(286px);
+        width: 286px;
         position: absolute;
-        top: px2rem(21.5px);
+        top: 21.5px;
         z-index: 1000;
-        border-top: px2rem(4px) solid #fff;
-        margin-left: px2rem(57px);
-        margin-right: px2rem(1px);
-        border-radius: px2rem(4px);
+        border-top: 4px solid #fff;
+        margin-left: 57px;
+        margin-right: 1px;
+        border-radius: 4px;
       }
     }
     .error {
       position: absolute;
-      top: px2rem(66px);
-      left: px2rem(56px);
+      top: 66px;
+      left: 56px;
       display: inline-block;
       color: red;
-      font-size: px2rem(12px);
+      font-size: 12px;
     }
 
     img {
       position: absolute;
-      top: px2rem(33px);
-      right: px2rem(12px);
-      width: px2rem(15px);
-      height: px2rem(15px);
+      top: 33px;
+      right: 12px;
+      width: 15px;
+      height: 15px;
     }
   }
 
   .bottom {
     display: flex;
-    margin-bottom: px2rem(40px);
+    margin-bottom: 40px;
   }
 }
 </style>

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

@@ -3,12 +3,12 @@
     <div class="common-bottom">
       <span>若有问题可联系客服：</span>
       <img src="../../images/cme/icon-phone.png" />
-      <span>400-920-8877</span>
+      <!-- <span>400-920-8877</span> -->
+      <a href="tel:4009208877"><span>400-920-8877</span></a>
     </div>
   </div>
 </template>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .common-bottom-info-wrapper {
   position: fixed;
   width: 100%;
@@ -29,9 +29,9 @@
       height: 14px;
       line-height: 14px;
       color: #676869;
-      &:nth-child(3) {
-        color: #449284;
     }
+    a span {
+      color: #449284;
     }
     // span:nth-child(1) {
     //   color: #449284;

src/components/cme/common-button.vue

@@ -27,20 +27,19 @@ export default {
   },
 }
 </script>
-<style  lang="scss" scoped>
-  @import "../../style/mixin";
+<style  lang="less" scoped>
   .common-button-wrapper {
-    font-size: px2rem(14px);
-    margin: px2rem(20px) px2rem(15px);
+    font-size: 14px;
+    margin: 20px 15px;
     text-align: center;
     &.button-default {
       span {
         display: block;
-        height: px2rem(50px);
-        line-height: px2rem(50px);
+        height: 50px;
+        line-height: 50px;
         width: 100%;
-        border-radius: px2rem(25px);
-        font-size: px2rem(17px);
+        border-radius: 25px;
+        font-size: 17px;
         font-weight: 700;
         color: #FFFFFF;
         background: #449284;

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

@@ -56,8 +56,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .common-dialog-wrraper {
   position: fixed;
   top: 0;
@@ -79,35 +78,35 @@ export default {
     top: 50%;
     left: 50%;
     overflow: hidden;
-    width: px2rem(300px);
-    font-size: px2rem(18px);
+    width: 300px;
+    font-size: 18px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
-    border-radius: px2rem(4px);
+    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: px2rem(30px) px2rem(22px);
-      margin: px2rem(30px);
+      // margin: 30px 22px;
+      margin: 30px;
       text-align: center;
-      font-size: px2rem(18px);
+      font-size: 18px;
       font-weight: 400;
       color: #373839;
     }
     .dialog-sub-content {
-      margin: px2rem(-16px) px2rem(30px) px2rem(30px);
-      // margin: px2rem(-16px) px2rem(22px) px2rem(30px);
+      margin: -16px 30px 30px;
+      // margin: -16px 22px 30px;
       text-align: left;
-      font-size: px2rem(14px);
-      line-height: px2rem(24px);
+      font-size: 14px;
+      line-height: 24px;
       font-weight: 400;
       color: #676869;
     }
     .dialog-footer {
-      height: px2rem(50px);
+      height: 50px;
       display: flex;
       align-items: center;
       &.v-hairline-top::after {
@@ -117,9 +116,9 @@ export default {
         display: inline-block;
         // width: 50%;
         flex: 1;
-        height: px2rem(50px);
-        line-height: px2rem(50px);
-        font-size: px2rem(17px);
+        height: 50px;
+        line-height: 50px;
+        font-size: 17px;
         text-align: center;
         color: #979899;
         &.v-hairline-left::after {

src/components/cme/common-dialog.vue

@@ -56,8 +56,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .common-dialog-wrraper {
   position: fixed;
   top: 0;
@@ -79,35 +78,35 @@ export default {
     top: 50%;
     left: 50%;
     overflow: hidden;
-    width: px2rem(300px);
-    font-size: px2rem(18px);
+    width: 300px;
+    font-size: 18px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
-    border-radius: px2rem(4px);
+    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: px2rem(30px) px2rem(22px);
-      margin: px2rem(30px);
+      // margin: 30px 22px;
+      margin: 30px;
       text-align: center;
-      font-size: px2rem(18px);
+      font-size: 18px;
       font-weight: 400;
       color: #373839;
     }
     .dialog-sub-content {
-      margin: px2rem(-16px) px2rem(30px) px2rem(30px);
-      // margin: px2rem(-16px) px2rem(22px) px2rem(30px);
+      margin: -16px 30px 30px;
+      // margin: -16px 22px 30px;
       text-align: left;
-      font-size: px2rem(14px);
-      line-height: px2rem(24px);
+      font-size: 14px;
+      line-height: 24px;
       font-weight: 400;
       color: #676869;
     }
     .dialog-footer {
-      height: px2rem(50px);
+      height: 50px;
       display: flex;
       align-items: center;
       &.v-hairline-top::after {
@@ -117,9 +116,9 @@ export default {
         display: inline-block;
         // width: 50%;
         flex: 1;
-        height: px2rem(50px);
-        line-height: px2rem(50px);
-        font-size: px2rem(17px);
+        height: 50px;
+        line-height: 50px;
+        font-size: 17px;
         text-align: center;
         color: #979899;
         &.v-hairline-left::after {
@@ -154,7 +153,7 @@ export default {
   &.shikan {
     .dialog-sub-content {
       text-align: center;
-      font-size: px2rem(16px);
+      font-size: 16px;
     }
   }
 }

src/components/cme/exjumper-button.vue

@@ -27,26 +27,25 @@ export default {
   },
 }
 </script>
-<style  lang="scss" scoped>
-  @import "../../style/mixin";
+<style  lang="less" scoped>
   .exjumper-button-wrapper {
     position: fixed;
     left: 0;
     bottom: 0;
     right: 0;
     z-index: 1000;
-    font-size: px2rem(14px);
-    padding: px2rem(20px) px2rem(15px);
+    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: px2rem(50px);
-        line-height: px2rem(50px);
+        height: 50px;
+        line-height: 50px;
         width: 100%;
-        border-radius: px2rem(25px);
-        font-size: px2rem(17px);
+        border-radius: 25px;
+        font-size: 17px;
         font-weight: 700;
         color: #FFFFFF;
         background: #449284;

src/components/cme/exjumper-dialog.vue

@@ -66,8 +66,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .exjumper-dialog-wrraper {
   position: fixed;
   top: 0;
@@ -89,54 +88,54 @@ export default {
     top: 50%;
     left: 50%;
     overflow: hidden;
-    width: px2rem(300px);
-    font-size: px2rem(18px);
+    width: 300px;
+    font-size: 18px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
-    border-radius: px2rem(4px);
+    border-radius: 4px;
     background-color: #fff;
     -webkit-transform: translate3d(-50%, -50%, 0);
     transform: translate3d(-50%, -50%, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     .title {
-      margin: px2rem(30px) 0 px2rem(20px);
+      margin: 30px 0 20px;
       text-align: center;
-      font-size: px2rem(18px);
+      font-size: 18px;
       font-weight: 700;
       color: #373839;
     }
     .dialog-content {
-      // margin: px2rem(30px) px2rem(22px);
-      margin: px2rem(20px) px2rem(16px) px2rem(30px);
+      // margin: 30px 22px;
+      margin: 20px 16px 30px;
       text-align: left;
-      font-size: px2rem(14px);
+      font-size: 14px;
       font-weight: 400;
       color: #373839;
     }
     .sub-wrapper {
-      margin-right: px2rem(5px);
-      max-height: px2rem(300px);
+      margin-right: 5px;
+      max-height: 300px;
       overflow: auto;
       .dialog-sub-content {
-        margin: 0 px2rem(8px) px2rem(20px) px2rem(16px);
+        margin: 0 8px 20px 16px;
         text-align: left;
-        font-size: px2rem(14px);
-        line-height: px2rem(24px);
+        font-size: 14px;
+        line-height: 24px;
         font-weight: 400;
         color: #979899;
       }
       .dialog-img-1 {
-        width: px2rem(268px);
-        height: px2rem(165px);
-        margin-left: px2rem(16px);
-        margin-bottom: px2rem(20px);
+        width: 268px;
+        height: 165px;
+        margin-left: 16px;
+        margin-bottom: 20px;
       }
       .dialog-img-2 {
-        width: px2rem(268px);
-        height: px2rem(145px);
-        margin-left: px2rem(16px);
-        margin-bottom: px2rem(20px);
+        width: 268px;
+        height: 145px;
+        margin-left: 16px;
+        margin-bottom: 20px;
       }
 
       &::-webkit-scrollbar-track-piece {
@@ -144,30 +143,30 @@ export default {
         border-left: 1px solid rgba(0, 0, 0, 0);
       }
       &::-webkit-scrollbar {
-        width: px2rem(5px);
-        height: px2rem(13px);
-        -webkit-border-radius: px2rem(3px);
-        -moz-border-radius: px2rem(3px);
-        border-radius: px2rem(3px);
+        width: 5px;
+        height: 13px;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
       }
       &::-webkit-scrollbar-thumb {
         background-color: #C7C8C9;
         background-clip: padding-box;
-        -webkit-border-radius: px2rem(3px);
-        -moz-border-radius: px2rem(3px);
-        border-radius: px2rem(3px);
-        min-height: px2rem(28px);
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        min-height: 28px;
       }
       &::-webkit-scrollbar-thumb:hover {
         background-color: #C7C8C9;
-        -webkit-border-radius: px2rem(3px);
-        -moz-border-radius: px2rem(3px);
-        border-radius: px2rem(3px);
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
       }
     }
 
     .dialog-footer {
-      height: px2rem(50px);
+      height: 50px;
       display: flex;
       align-items: center;
       &.v-hairline-top::after {
@@ -177,9 +176,9 @@ export default {
         display: inline-block;
         // width: 50%;
         flex: 1;
-        height: px2rem(50px);
-        line-height: px2rem(50px);
-        font-size: px2rem(17px);
+        height: 50px;
+        line-height: 50px;
+        font-size: 17px;
         text-align: center;
         color: #979899;
         &.v-hairline-left::after {

src/components/cme/item-intro.vue

@@ -40,41 +40,40 @@ export default {
     }
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .item-intro-container {
-    padding-bottom: px2rem(20px);
-    margin: px2rem(30px) px2rem(15px) 0px;
-    border-bottom: px2rem(1px) solid #E7E8E9;
+    padding-bottom: 20px;
+    margin: 30px 15px 0px;
+    border-bottom: 1px solid #E7E8E9;
     .basic-title {
-        font-size: px2rem(18px);
-        line-height: px2rem(18px);
+        font-size: 18px;
+        line-height: 18px;
         color: #373839;
         font-weight: 700;
     }
     .content {
         position: relative;
-        margin-top:  px2rem(16px);
+        margin-top:  16px;
         .text {
-            font-size: px2rem(14px);
-            line-height: px2rem(21px);
+            font-size: 14px;
+            line-height: 21px;
             color: #676869;
         }
         .desc {
             // position: absolute;
             // right: 0;
-            // bottom: px2rem(1px);
+            // bottom: 1px;
             text-align: right;
             background: #fff;
-            line-height: px2rem(14px);
+            line-height: 14px;
             z-index: 99;
             span {
-                font-size: px2rem(14px);
-                line-height: px2rem(14px);
+                font-size: 14px;
+                line-height: 14px;
                 color: #449284;
             }
             img {
-                width: px2rem(12px);
+                width: 12px;
             }
         }
     }

src/components/cme/item-leader.vue

@@ -53,58 +53,60 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .item-leader-container {
-  padding-bottom: px2rem(20px);
-  margin: px2rem(30px) px2rem(15px) 0px;
-  border-bottom: px2rem(1px) solid #e7e8e9;
+  padding-bottom: 20px;
+  margin: 30px 15px 0px;
+  border-bottom: 1px solid #e7e8e9;
   .basic-title {
-    font-size: px2rem(18px);
-    line-height: px2rem(18px);
+    font-size: 18px;
+    line-height: 18px;
     color: #373839;
     font-weight: 700;
   }
   .leader-info {
     display: flex;
     flex-direction: row;
-    margin-top: px2rem(16px);
+    margin-top: 16px;
     img {
       display: inline-block;
-      width: px2rem(44px);
-      height: px2rem(44px);
+      width: 44px;
+      height: 44px;
       border-radius: 50%;
     }
     .leader-text {
-      margin-left: px2rem(16px);
-      margin-top: px2rem(6px);
+      flex: 1;
+      width: 100px;
+      margin-left: 16px;
+      margin-top: 6px;
       .leader-con {
-        line-height: px2rem(14px);
+        line-height: 14px;
         display: flex;
         flex-direction: row;
+        white-space: nowrap;
         span {
-          font-size: px2rem(16px);
+          font-size: 16px;
           color: #676869;
         }
         span:first-child {
-          font-size: px2rem(16px);
+          font-size: 16px;
           color: #373839;
           font-weight: 700;
         }
         .leader-title {
-          width: px2rem(220px);
+          width: 220px;
           overflow : hidden;
           text-overflow: ellipsis;
           white-space:nowrap;
-          line-height: px2rem(16px);
-          margin-left: px2rem(10px);
+          line-height: 16px;
+          margin-left: 10px;
         }
       }
       .address {
-        margin-top: px2rem(5px);
-        font-size: px2rem(13px);
+        margin-top: 5px;
+        font-size: 13px;
         color: #979899;
-        width: px2rem(240px);
+        width: 240px;
         overflow : hidden;
         text-overflow: ellipsis;
         white-space:nowrap;
@@ -113,26 +115,26 @@ export default {
   }
   .content {
     position: relative;
-    margin-top: px2rem(16px);
+    margin-top: 16px;
     .text {
-      font-size: px2rem(14px);
-      line-height: px2rem(21px);
+      font-size: 14px;
+      line-height: 21px;
       color: #676869;
     }
     .desc {
       // position: absolute;
       // right: 0;
-      // bottom: px2rem(1px);
+      // bottom: 1px;
       text-align: right;
       background: #fff;
-      line-height: px2rem(14px);
+      line-height: 14px;
       z-index: 99;
       span {
-        font-size: px2rem(14px);
+        font-size: 14px;
         color: #449284;
       }
       img {
-        width: px2rem(12px);
+        width: 12px;
       }
     }
   }

src/components/cme/learn-know.vue

@@ -16,23 +16,22 @@ export default {
     }
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .learn-know-container {
-    margin: px2rem(30px) px2rem(15px) px2rem(20px);
+    margin: 30px 15px 20px;
     .basic-title {
-        font-size: px2rem(18px);
-        line-height: px2rem(18px);
+        font-size: 18px;
+        line-height: 18px;
         color: #373839;
         font-weight: 700;
     }
     .content {
-        margin-top:  px2rem(16px);
-        line-height: px2rem(21px);
+        margin-top:  16px;
+        line-height: 21px;
         span {
             display: inline-block;
             text-align: justify;
-            font-size: px2rem(14px);
+            font-size: 14px;
             color: #676869;
         }
     }

src/components/cme/teacter-intro.vue

@@ -37,58 +37,60 @@ export default {
     }
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .teacter-intro-container {
-    margin: px2rem(30px) px2rem(15px) 0px;
+    margin: 30px 15px 0px;
     .basic-title {
-        font-size: px2rem(18px);
-        line-height: px2rem(18px);
+        font-size: 18px;
+        line-height: 18px;
         color: #373839;
         font-weight: 700;
     }
     .leader-info {
         display: flex;
         flex-direction: row;
-        margin-top: px2rem(16px);
-        padding-bottom: px2rem(16px);
+        margin-top: 16px;
+        padding-bottom: 16px;
         img {
             display: inline-block;
-            width: px2rem(44px);
-            height: px2rem(44px);
+            width: 44px;
+            height: 44px;
             border-radius: 50%;
         }
         .leader-text {
-            margin-left: px2rem(16px);
-            margin-top: px2rem(6px);
+            flex: 1;
+            width: 100px;
+            margin-left: 16px;
+            margin-top: 6px;
             .leader-con {
-                line-height: px2rem(14px);
+                line-height: 14px;
                 display: flex;
                 flex-direction: row;
+                white-space: nowrap;
                 span {
-                    font-size: px2rem(16px);
+                    font-size: 16px;
                     color: #676869;
                 }
                 span:first-child {
-                    font-size: px2rem(16px);
+                    font-size: 16px;
                     color: #373839;
                     font-weight: 700;
                     line-height: 1.1;
                 }
                 .leader-title {
-                    width: px2rem(220px);
+                    width: 220px;
                     overflow : hidden;
                     text-overflow: ellipsis;
                     white-space:nowrap;
-                    line-height: px2rem(16px);
-                    margin-left: px2rem(10px);
+                    line-height: 16px;
+                    margin-left: 10px;
                 }
             }
             .address {
-                margin-top: px2rem(5px);
-                font-size: px2rem(13px);
+                margin-top: 5px;
+                font-size: 13px;
                 color: #979899;
-                width: px2rem(240px);
+                width: 240px;
                 overflow : hidden;
                 text-overflow: ellipsis;
                 white-space:nowrap;

src/components/common/common-advert-img.vue

 <template>
   <div class="common-adert-wrapper">
-    <img :class="{'margin-top-20': needPadTop}" v-if="showInfo.imageUrl" @click="jumpPage" :src="showInfo.imageUrl" alt="">
+    <img
+      :class="{'margin-top-20': needPadTop}"
+      v-if="showInfo.imageUrl"
+      @click="jumpPage"
+      :src="showInfo.imageUrl"
+      alt
+    />
   </div>
 </template>
 <script>
-import { EMLINK } from 'constants';
+import { EMLINK } from "constants";
 export default {
-  name: 'common-title',
+  name: "common-title",
   data() {
     return {
+      isWeb: window.__isWeb,
       showInfo: {
-        imageUrl: '',
-        jumpUrl: ''
+        imageUrl: "",
+        jumpUrl: ""
       }
     };
   },
@@ -31,9 +38,9 @@ export default {
   },
   watch: {
     advertInfoList: {
-      handler (list) {
+      handler(list) {
         list.forEach(element => {
-          if(element.position == this.position) {
+          if (element.position == this.position) {
             this.showInfo = element;
           }
         });
@@ -42,16 +49,15 @@ export default {
     }
   },
   created() {},
-  mounted() {
-
-  },
-  computed: {
-    
-  },
+  mounted() {},
+  computed: {},
   methods: {
-
     // 广告位跳转
     jumpPage() {
+      // if (this.isWeb) {
+      //   window.location.href = this.showInfo.jumpUrl;
+      //   return;
+      // }
       let paramList = [
         {
           key: "pageUrl",
@@ -59,7 +65,7 @@ export default {
           type: 4,
           seqNo: 1
         }
-      ]
+      ];
       rocNative.dispatchEventByModuleCode({
         modeCode: "M300",
         jsonString: paramList
@@ -68,16 +74,15 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .common-adert-wrapper {
   img {
     width: 100%;
-    // padding: px2rem(10px) 0;
-    // height: px2rem(60px);
+    // padding: 10px 0;
+    // height: 60px;
   }
   .margin-top-20 {
-    margin-top: px2rem(20px);
+    margin-top: 20px;
   }
 }
 </style>

src/components/common/common-banner-img.vue

@@ -65,10 +65,9 @@ export default {
   methods: {}
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .comp-title {
   display: flex;
-  padding-left: px2rem(15px);
+  padding-left: 15px;
 }
 </style>

src/components/common/common-banner-video.vue

@@ -84,10 +84,9 @@ export default {
   methods: {}
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .comp-title {
   display: flex;
-  padding-left: px2rem(15px);
+  padding-left: 15px;
 }
 </style>

src/components/common/common-description.vue

@@ -51,18 +51,17 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .desc-container {
-  padding: px2rem(20px) px2rem(15px);
+  padding: 20px 15px;
   .desc-title {
     display: flex;
     padding-bottom: 0px;
-    line-height: px2rem(22px);
+    line-height: 22px;
     font-weight: 700;
     span {
       font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-      font-size: px2rem(18px);
+      font-size: 18px;
       font-weight: 700;
       color: #333333;
     }
@@ -71,13 +70,13 @@ export default {
     display: flex;
     position: relative;
     word-break: normal;
-    // margin-bottom: px2rem(40px);
-    // height: px2rem(60px);
+    // margin-bottom: 40px;
+    // height: 60px;
     .desc_text {
-      padding-top: px2rem(6px);
-      font-size: px2rem(13px);
+      padding-top: 6px;
+      font-size: 13px;
       color: #676869;
-      line-height: px2rem(25px);
+      line-height: 25px;
       letter-spacing: 1px;
       word-wrap: break-word;
       word-break: break-all;

src/components/common/common-loading.vue

@@ -17,8 +17,7 @@
 
 </template>
 
-<style lang="scss" scoped>
-    @import '../../style/mixin';
+<style lang="less" scoped>
     .loader {
         &-mask {
             position: fixed;
@@ -31,8 +30,8 @@
         }
         svg {
             position: fixed;
-            top: px2rem(280px);
-            left: px2rem(166px);
+            top: 280px;
+            left: 166px;
             z-index: 9999;
         }
     }

src/components/common/common-navbar-old.vue

@@ -124,23 +124,22 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .back {
   position: absolute;
-  left: px2rem(8px);
-  top: px2rem(15px);
+  left: 8px;
+  top: 15px;
   display: inline-block;
-  width: px2rem(50px);
-  height: px2rem(50px);
+  width: 50px;
+  height: 50px;
   img {
-    padding: px2rem(10px);
-    width: px2rem(25px);
-    height: px2rem(25px);
+    padding: 10px;
+    width: 25px;
+    height: 25px;
   }
 }
 .nav-top {
-  // height: px2rem(65px);
+  // height: 65px;
   background: #fff;
   color: #333;
   position: relative;
@@ -148,10 +147,10 @@ export default {
   .nav-back {
     display: inline-block;
     position: absolute;
-    left: px2rem(16px);
+    left: 16px;
     top: 0;
-    height: px2rem(25px);
-    width: px2rem(25px);
+    height: 25px;
+    width: 25px;
     // -ms-transform: translate(180deg);
     // -webkit-transform: (180deg);
     // transform: rotate(180deg);
@@ -172,33 +171,33 @@ export default {
   }
   .nav-share {
     position: absolute;
-    right: px2rem(16px);
+    right: 16px;
     top: 0;
-    height: px2rem(25px);
-    width: px2rem(25px);
+    height: 25px;
+    width: 25px;
   }
   .nav-title {
     position: relative;
-    top: px2rem(10px);
+    top: 10px;
     left: 0;
     display: inline-block;
     width: 100%;
-    /* padding:0 px2rem(33px);*/
-    height: px2rem(36px);
+    /* padding:0 33px;*/
+    height: 36px;
     &-title {
-      height: px2rem(18px);
-      font-size: px2rem(18px);
+      height: 18px;
+      font-size: 18px;
       font-weight: 500;
       color: rgba(51, 51, 51, 1);
-      line-height: px2rem(26px);
+      line-height: 26px;
     }
   }
   .nav-part {
     width: 100%;
-    font-size: px2rem(18px);
+    font-size: 18px;
     text-align: center;
-    padding: 0 0 px2rem(10px) 0;
-    /* height: px2rem(25px);*/
+    padding: 0 0 10px 0;
+    /* height: 25px;*/
   }
 }
 
@@ -207,6 +206,6 @@ export default {
   top: 0;
   left: 0;
   border-bottom: 1px solid #e7e7e7;
-  /* height: px2rem(25px);*/
+  /* height: 25px;*/
 }
 </style>

src/components/common/common-navbar.vue

 <template>
-  <section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
-    <!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
+  <section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
     <div
       class="nav-part"
       :style="'background:' + bgColor + ';'
@@ -10,8 +9,6 @@
         <span class="nav-back" @click="goBack">
           <img v-show="isBlack" src="../../images/left-array-black.png" alt="">
           <img v-show="!isBlack" src="../../images/left-array-whiter.png" alt="">
-          <!-- <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"> -->
-          <!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
         </span>
         <span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
         <span v-if="isShowShare" class="nav-share" @click="goShare">
@@ -25,6 +22,8 @@
   </section>
 </template>
 <script>
+import { getWebPageUrl } from "@/utils/index";
+import { mapGetters } from 'vuex';
 export default {
   name: "common-navbar",
   data() {
@@ -35,7 +34,8 @@ export default {
       fontSize: 37.5,
       content: "",
       shareImageUrl:
-        "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
+        "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
+      shareUrl: ''
     };
   },
   props: {
@@ -79,15 +79,18 @@ export default {
     shareTitleInfo: {
       type: String,
       default: ""
+    },
+    projectId: {
+      type: String,
+      default: ""
+    },
+    limitTimes: {
+      type: String | Number,
+      default: 0
     }
   },
   computed: {
-    // bgColor2() {
-    //   return this.bgColor
-    // },
-    // borderStyle() {
-    //   return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
-    // },
+    ...mapGetters(["userInfo"]),
     navHeight() {
       if (this.isFixNavbar) {
         return 0;
@@ -108,28 +111,51 @@ export default {
   methods: {
     //返回
     goBack() {
-      // if (this.burialPoint == "activity") {
-      //   this.pageBurialPoin(this.objPoint);
-      // }
-      // if (this.backMethod === "inner" || window.__isWeb) {
-      //   this.$router.back(-1);
-      // } else {
-      //   rocNative.goBack();
-      // }
       rocNative.goBack();
     },
-    //分享
+
+    // 生成分享的url
     goShare() {
-      let url = location.href,
-        _this = this;
+      let _this = this;
+      let videoUrl = this.$route.query.videoUrl || '';
+      let info = "";
+      if(videoUrl) {
+        info = JSON.stringify({
+          projectId: this.projectId,
+          videoUrl: videoUrl,
+          limitTimes: this.limitTimes || 0
+        })
+      } else {
+        info = JSON.stringify({
+          projectId: this.projectId,
+        })        
+      }   
+      let param = {
+        channel: 1, // 分享渠道 1：APP
+        info: info,
+        type: 3,     // 业务类型 1：教培项目 2：继教项目 3：职称考项目
+        token: _this.userInfo.userToken,
+        setEntry: true
+      };      
+      _this.NEW_POST("portal/shareParam/save", param).then(res => {
+        if (res.code == "000000") {
+          let url = getWebPageUrl(`profexam/#/sharecoop?uuid=${res.data}`);
+          _this.shareUrl = url;
+          _this.goShareAction();
+        }
+      }).catch( e => {
+        console.error(e);;
+      });      
+    },
+
+    //分享
+    goShareAction() {
+      // let url = location.href,
+      let _this = this;
       rocNative.shareWechat({
-        // url: url,
-        // title: '_this.title',
-        // content: '_this.content',
-        // shareImageUrl: '_this.shareImageUrl'
         type: 6,
         shareId: 0,
-        shareUrl: url,
+        shareUrl: _this.shareUrl,
         title1: _this.shareTitle,
         title2: _this.shareTitleInfo,
         shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
@@ -138,23 +164,22 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .back {
   position: absolute;
-  left: px2rem(px);
-  top: px2rem(15px);
+  left: px;
+  top: 15px;
   display: inline-block;
-  width: px2rem(50px);
-  height: px2rem(50px);
+  width: 50px;
+  height: 50px;
   img {
-    padding: px2rem(10px);
-    width: px2rem(25px);
-    height: px2rem(25px);
+    padding: 10px;
+    width: 25px;
+    height: 25px;
   }
 }
 .nav-top {
-  // height: px2rem(65px);
+  // height: 65px;
   background: #fff;
   color: #333;
   position: relative;
@@ -162,15 +187,12 @@ export default {
   .nav-back {
     display: inline-block;
     position: absolute;
-    left: px2rem(0px);
+    left: 0px;
     top: 0;
-    height: px2rem(25px);
-    width: px2rem(55px);
-    padding-left: px2rem(15px);
-    padding-right: px2rem(15px);
-    // -ms-transform: translate(180deg);
-    // -webkit-transform: (180deg);
-    // transform: rotate(180deg);
+    height: 25px;
+    width: 55px;
+    padding-left: 15px;
+    padding-right: 15px;
   }
   img {
     display: block;
@@ -188,33 +210,33 @@ export default {
   }
   .nav-share {
     position: absolute;
-    right: px2rem(16px);
+    right: 16px;
     top: 0;
-    height: px2rem(25px);
-    width: px2rem(25px);
+    height: 25px;
+    width: 25px;
   }
   .nav-title {
     position: relative;
-    top: px2rem(10px);
+    top: 10px;
     left: 0;
     display: inline-block;
     width: 100%;
-    /* padding:0 px2rem(33px);*/
-    height: px2rem(36px);
+    /* padding:0 33px;*/
+    height: 36px;
     &-title {
-      height: px2rem(18px);
-      font-size: px2rem(18px);
+      height: 18px;
+      font-size: 18px;
       font-weight: 700;
       color: rgba(51, 51, 51, 1);
-      line-height: px2rem(26px);
+      line-height: 26px;
     }
   }
   .nav-part {
     width: 100%;
-    font-size: px2rem(18px);
+    font-size: 18px;
     text-align: center;
-    padding: 0 0 px2rem(10px) 0;
-    /* height: px2rem(25px);*/
+    padding: 0 0 10px 0;
+    /* height: 25px;*/
   }
 }
 
@@ -223,6 +245,6 @@ export default {
   top: 0;
   left: 0;
   border-bottom: 1px solid #e7e7e7;
-  /* height: px2rem(25px);*/
+  /* height: 25px;*/
 }
 </style>

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

@@ -23,8 +23,7 @@ export default {
   methods: {}
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .split-line {
   display: flex;
 }

src/components/common/common-tcplayer copy.vue

@@ -124,11 +124,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .banner-img {
   // display: inherit;
-  width: px2rem(375px);
-  height: px2rem(210px);
+  width: 375px;
+  height: 210px;
 }
 </style>

src/components/common/common-tcplayer.vue

@@ -67,8 +67,7 @@ export default {
       const tcPlayer = new TcPlayer(this.id, options);
       tcPlayer.video.on('timeupdate', (event) => {
         let ct = tcPlayer.currentTime();
-
-        console.log('视频播放时长S => ', ct);
+        // console.log('视频播放时长S => ', ct);
         if (options.trySeeTime && ct >= options.trySeeTime) {
           tcPlayer.currentTime(0);
           tcPlayer.pause();
@@ -136,11 +135,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .banner-img {
   // display: inherit;
-  width: px2rem(375px);
-  height: px2rem(210px);
+  width: 375px;
+  height: 210px;
 }
 </style>

src/components/common/common-title.vue

@@ -109,10 +109,9 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .comp-title-container {
-  padding-left: px2rem(15px);
+  padding-left: 15px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -127,39 +126,39 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-right: px2rem(15px);
+    margin-right: 15px;
     span {
-      font-size: px2rem(14px);
+      font-size: 14px;
       font-weight: 400;
       color: rgba(40, 52, 76, 0.4);
     }
     img {
-      width: px2rem(15px);
-      height: px2rem(16px);
+      width: 15px;
+      height: 16px;
     }
   }
   &-explain {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-right: px2rem(15px);
+    margin-right: 15px;
     span {
-      font-size: px2rem(14px);
+      font-size: 14px;
       font-weight: 400;
       color: rgba(40, 52, 76, 0.4);
-      margin-right: px2rem(3px);
-      line-height: px2rem(14px);
+      margin-right: 3px;
+      line-height: 14px;
     }
     img {
-      width: px2rem(8px);
-      height: px2rem(14px);
+      width: 8px;
+      height: 14px;
     }
   }
 }
 
 .banner-img {
-  width: px2rem(70px);
-  height: px2rem(20px);
-  padding-top: px2rem(2px);
+  width: 70px;
+  height: 20px;
+  padding-top: 2px;
 }
 </style>

src/components/common/common-toast.vue

@@ -26,8 +26,7 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .loader {
   &-mask {
     position: fixed;
@@ -43,10 +42,10 @@ export default {
     width: 100%;
     left: 0;
     z-index: 301;
-    bottom: px2rem(30px);     
+    bottom: 30px;
     text-align: center;
     span {
-        padding: px2rem(2px) px2rem(10px);
+        padding: 2px 10px;
         background: #eee;
     }
   }

src/components/common/cooperation-tab.vue

@@ -67,10 +67,9 @@ export default {
   methods: {}
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .comp-title {
   display: flex;
-  padding-left: px2rem(15px);
+  padding-left: 15px;
 }
 </style>

src/components/course/brief-intro.vue

+<template>
+  <div class="brief-intro-wrapper">
+    <TeacherIntro :doctorList="doctorList"></TeacherIntro>
+    <CourseIntro :intro="intro"></CourseIntro>
+    <CourseHarvest :harvest="harvest"></CourseHarvest>
+  </div>
+</template>
+<script>
+import TeacherIntro from "@/components/course/course-teacher";
+import CourseIntro from "@/components/course/course-intro";
+import CourseHarvest from "@/components/course/course-harvest";
+
+export default {
+  components: {
+    TeacherIntro,
+    CourseIntro,
+    CourseHarvest,
+  },
+  props: {
+    doctorList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    intro: {
+      type: String,
+      default: "",
+    },
+    harvest: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.brief-intro-wrapper {
+  padding-bottom: 20px;
+}
+</style>

src/components/course/common-error-tips.vue

+<template>
+  <section>
+    <div class="common-error-tips-wrapper">
+      <img src="../../images/course/danger.png" alt="">
+      <span>{{errorMsg}}</span>
+    </div>
+    <CommonBottomInfo></CommonBottomInfo>
+  </section>
+
+</template>
+<script>
+import CommonBottomInfo from "@/components/cme/common-bottom-info";
+export default {
+  components: {
+    CommonBottomInfo
+  },
+  props: {
+    errorMsg: {
+      type: String,
+      default: '此课程已下架无法查看'
+    }
+  }
+}
+</script>
+<style lang="less">
+.common-error-tips-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 120px;
+  img {
+    width: 40px;
+    height: 40px;
+  }
+  span {
+    display: inline-block;
+    margin-top: 15px;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    color: #111A34;
+  }
+}
+</style>

src/components/course/common-title.vue

+<template>
+  <span class="common-title-wrapper">{{title}}</span>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "课程简介"
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.common-title-wrapper {
+  display: inline-block;
+  height: 18px;
+  line-height: 18px;
+  margin: 30px 15px 15px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #373839;
+}
+</style>

src/components/course/course-button.vue

+<template>
+  <span class="course-button-wrapper button-default" :class="type" @click="btnClick">{{btnText}}</span>
+</template>
+<script>
+export default {
+  props: {
+    btnText: {
+      type: String,
+      default: "去云鹊医App"
+    },
+    type: {
+      type: String,
+      default: "primary"
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    btnClick() {
+      if (this.type == "disabled") return;
+      this.$emit("btnClick");
+    }
+  }
+};
+</script>
+<style  lang="less" scoped>
+.course-button-wrapper {
+  display: inline-block;
+  text-align: center;
+  margin: 0 5px;
+  &.button-default {
+    display: inline-block;
+    padding: 0 16px;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    // width: 100%;
+    border-radius: 15px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #ffffff;
+    background: #449284;
+  }
+  &.primary {
+    color: #ffffff;
+    background: #449284;
+  }
+  &.plain {
+    color: #ffffff;
+    background: none;
+    border: 1px solid rgba(255, 255, 255, 1);
+  }
+  &.disabled {
+    color: rgba(255, 255, 255, 0.95);
+    background: rgba(68, 146, 132, 0.4);
+  }
+}
+</style>

src/components/course/course-catalog.vue

+<template>
+  <div class="course-catalog">
+    <div class="chapter-box" v-for="(chapter, index) in list" :key="index">
+      <div class="head">
+        <div class="name ellipsis">{{ chapter.chapterNameText }}</div>
+        <div class="total" @click="onToggle(index)">
+          共{{ chapter.lectureNum }}节
+          <img class="arrow" :class="{'arrow-active': chapter.showAll}" src="~@/images/course/arrow_down.png" />
+        </div>
+      </div>
+      <div class="lecture-box" v-show="chapter.showAll">
+        <div class="item"
+          :class="{'item-active': curtId === lecture.lectureId}"
+          v-for="lecture in chapter.lectures"
+          :key="lecture.lectureId"
+          @click="onSelect(lecture, 1)">
+          <img class="icon" src="~@/images/course/icon_play.png" />
+          <div class="info-box line">
+            <div class="info">
+              <p class="subname ellipsis">{{ lecture.lectureNameText }}</p>
+              <p class="time">
+                时长: {{ lecture.totalTimeText }}
+                <span>{{ lecture.statusText }}</span>
+              </p>
+            </div>
+            <div class="btn" v-if="lecture.btnText">{{ lecture.btnText }}</div>
+            <img v-else class="lock" src="~@/images/course/lock.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    curtId: {
+      type: Number,
+      default: 0,
+    },
+    onToggle: {
+      type: Function
+    },
+    onSelect: {
+      type: Function
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.course-catalog{
+  .chapter-box{
+    position: relative;
+    padding: 0 15px;
+    &::after{
+      position: absolute;
+      content: "";
+      left: 0;
+      bottom: 0;
+      width: 200%;
+      height: 0;
+      transform: scale(0.5);
+      transform-origin: left center;
+      border-bottom: 1px solid #E7E8E9;
+    }
+    .head{
+      display: flex;
+      height: 50px;
+      line-height: 50px;
+    }
+    .name{
+      flex: 1;
+      width: 100px;
+      font-size: 15px;
+    }
+    .total{
+      position: relative;
+      color: #A1A2A3;
+      font-size: 14px;
+      padding-right: 15px;
+    }
+    .arrow{
+      position: absolute;
+      right: 0;
+      top: 19px;
+      width: 12px;
+      height: 12px;
+      transition: all 0.3s;
+    }
+    .arrow-active{
+      transform: rotate(180deg);
+    }
+  }
+  .lecture-box{
+    .item{
+      position: relative;
+      padding: 15px 0 0 25px;
+    }
+    .item-active{
+      .subname, .time{
+        color: #449284;
+      }
+    }
+    .icon{
+      position: absolute;
+      left: 0;
+      top: 20px;
+      width: 12px;
+    }
+    .info-box{
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding-bottom: 15px;
+    }
+    .info{
+      position: relative;
+      flex: 1;
+      width: 100px;
+      padding-right: 5px;
+    }
+    .line{
+      &::after{
+        position: absolute;
+        content: "";
+        left: 0;
+        bottom: 0;
+        width: 200%;
+        height: 0;
+        transform: scale(0.5);
+        transform-origin: left center;
+        border-bottom: 1px solid #E7E8E9;
+      }
+    }
+    .btn{
+      position: relative;
+      width: 60px;
+      height: 26px;
+      line-height: 26px;
+      color: #449284;
+      font-size: 12px;
+      text-align: center;
+      &::after{
+        position: absolute;
+        content: "";
+        left: -1px;
+        top: -1px;
+        width: 200%;
+        height: 200%;
+        border: 1px solid #449284;
+        transform: scale(0.5);
+        transform-origin: left top;
+        border-radius: 26px;
+      }
+    }
+    .lock{
+      display: block;
+      width: 16px;
+      margin: 0 22px;
+    }
+    .subname{
+      color: #676869;
+      font-size: 15px;
+    }
+    .time{
+      color: #A3A3A3;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+}
+</style>

src/components/course/course-comment.vue

+<template>
+  <div class="course-comment">
+    <div class="item" v-for="(item, index) in comments" :key="index">
+      <img class="img" :src="item.imageUrl || 'https://file.yunqueyi.com/File/doctor_default.png'" alt="头像" @error="onAvatarError" />
+      <div class="info-box">
+        <div class="info-user">
+          <div class="name">{{ item.doctorName }}</div>
+          <div class="date">{{ item.createTime }}</div>
+        </div>
+        <div class="message">{{ item.message }}</div>
+        <div class="reply-box" v-if="item.len">
+          <div class="reply-item" v-for="child in item.cList" :key="child.qaId">
+            <div class="reply-user">
+              <div class="name">{{ child.doctorName }}</div>
+              <div class="date">{{ child.createTime }}</div>
+            </div>
+            <div class="message">{{ child.message }}</div>
+          </div>
+          <div class="show-all" v-if="item.len > 2" @click="spreadAll(index)">
+            {{ item.showAll ? '收起回复' : `查看全部${item.len}条回复` }}
+            <img class="show-arrow" :class="{'show-arrow-up': item.showAll}" src="~@/images/course/arrow_down.png" alt="箭头" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="go-app" @click="download">
+      <span>打开App，查看更多讨论内容</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    download: {
+      type: Function
+    }
+  },
+  data() {
+    return {
+      comments: []
+    };
+  },
+  watch: {
+    list(val) {
+      this.dealList(val);
+    }
+  },
+  mounted() {
+    this.dealList(this.list);
+  },
+  methods: {
+    dealList(list) {
+      this.comments = list.map(item => {
+        const aList = item.aList || [];
+        return {
+          ...item,
+          aList,
+          len: aList.length,
+          cList: aList.slice(0, 2),
+          showAll: false,
+        }
+      })
+    },
+    spreadAll(index) {
+      const { ...item } = this.comments[index];
+      if (item.showAll) {
+        item.showAll = false;
+        item.cList = item.aList.slice(0, 2);
+      } else {
+        item.showAll = true;
+        item.cList = item.aList;
+      }
+      this.comments.splice(index, 1, item);
+    },
+  }
+};
+</script>
+
+<style  lang="less" scoped>
+.course-comment {
+  padding: 0 15px;
+  .item{
+    position: relative;
+    display: flex;
+    font-size: 14px;
+    padding: 20px 0;
+    &::after{
+      position: absolute;
+      content: "";
+      left: 0;
+      bottom: 0;
+      width: 200%;
+      height: 0;
+      transform: scale(0.5);
+      transform-origin: left center;
+      border-bottom: 1px solid #F0F0F0;
+    }
+  }
+  .img{
+    display: block;
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+  }
+  .info-box{
+    flex: 1;
+    width: 100px;
+  }
+  .info-user, .reply-user{
+    display: flex;
+    padding-bottom: 10px;
+    .name{
+      color: #676869;
+      flex: 1;
+      width: 80px;
+    }
+    .date{
+      color: #979899;
+      font-size: 12px;
+    }
+  }
+  .message{
+    line-height: 22px;
+    text-align: justify;
+    word-break: break-all;
+  }
+  .reply-box{
+    margin-top: 15px;
+    padding: 12px 12px 0;
+    background-color: #F8F9FA;
+  }
+  .reply-item{
+    padding-bottom: 20px;
+  }
+  .show-all{
+    position: relative;
+    color: #676869;
+    text-align: right;
+    font-size: 12px;
+    padding: 10px 18px 20px 0;
+  }
+  .show-arrow{
+    position: absolute;
+    right: 0;
+    top: 12px;
+    width: 12px;
+    height: 12px;
+    transition: all 0.3s;
+  }
+  .show-arrow-up{
+    transform: rotate(180deg);
+  }
+  .go-app{
+    color: #449284;
+    font-size: 14px;
+    line-height: 16px;
+    text-align: center;
+    padding: 20px 0;
+    span{
+      display: inline-block;
+      padding-right: 20px;
+      background: url('~@/images/course/array-right.png') no-repeat right center;
+      background-size: 14px auto;
+    }
+  }
+}
+</style>

src/components/course/course-covers.vue

+<template>
+  <div class="course-covers-wrapper">
+    <div class="tips" v-html="coverTips"></div>
+    <div v-if="isShowBtn" class="course-button-group">
+      <CourseButton v-if="!isSingle" type="plain" @btnClick="btnClick(1)" :btnText="leftBtnText"></CourseButton>
+      <CourseButton @btnClick="btnClick(2)" :btnText="rightBtnText"></CourseButton>
+    </div>
+  </div>
+</template>
+<script>
+import CourseButton from "@/components/course/course-button";
+export default {
+  components: {
+    CourseButton
+  },
+  props: {
+    coverTips: {
+      type: String,
+      default: "上次观看至7分钟，正在续播"
+    },
+    isShowBtn: {
+      type: Boolean,
+      default: true
+    },
+    isSingle: {
+      type: Boolean,
+      default: false
+    },
+    leftBtnText: {
+      type: String,
+      default: "学习下一节"
+    },
+    rightBtnText: {
+      type: String,
+      default: "去云鹊医App"
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    btnClick(index) {
+      this.$emit("btnClick", index);
+    }
+  }
+};
+</script>
+<style  lang="less" scoped>
+.course-covers-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  // background: rgba(0, 0, 0, 0.8);
+  justify-content: center;
+  align-content: center;
+  .tips {
+    display: inline-block;
+    margin-bottom: 15px;
+    color: #fff;
+    text-align: center;
+    font-size: 15px;
+  }
+  .course-button-group {
+    display: flex;
+    align-items: center;
+    justify-content:center;
+  }
+}
+</style>

src/components/course/course-harvest.vue

+<template>
+  <div v-if="harvest.length > 0" class="course-harvest-wrapper">
+    <CommonTitle title="学习收获"></CommonTitle>
+    <ul class="list-wrapper">
+      <li class="item" v-for="(item, index) in harvest" :key="index">
+        <span class="name">{{ item.name }}</span>
+        <span class="btn" @click="onClick(item)">查看</span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import CommonTitle from "@/components/course/common-title";
+import { ImagePreview } from 'vant';
+
+export default {
+  components: {
+    CommonTitle
+  },
+  props: {
+    harvest: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  methods: {
+    onClick(item) {
+      ImagePreview([item.url])
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.course-harvest-wrapper {
+  .list-wrapper {
+    .item {
+      display: flex;
+      justify-content: space-between;
+      height: 65px;
+      line-height: 65px;
+      margin: 0 15px;
+      align-items: center;
+      border-bottom: 1px solid #E7E8E9;
+      .name {
+        font-size: 15px;
+        font-weight: 700;
+        color: #333333;
+      }
+      .btn {
+        display: inline-block;
+        height: 25px;
+        line-height: 25px;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 0 18px;
+        color: #449284;
+        border-radius: 15px;
+        border:1px solid rgba(68, 146, 132, 0.45);
+      }
+    }
+  }
+}
+</style>

src/components/course/course-intro.vue

+<template>
+  <div v-if="intro" class="course-intro-wrapper">
+    <CommonTitle></CommonTitle>
+    <div class="body">
+      <p class="content" :class="{'ellipsis': isUp}">{{ intro }}</p>
+      <div class="toggle-btn" v-show="showArrow" @click="isUp=!isUp">
+        <span class="action">{{ isUp ? "详情" : "收起"}}</span>
+        <img v-show="isUp" src="~@/images/down.png" alt="" />
+        <img v-show="!isUp" src="~@/images/up.png" alt="" />
+      </div>
+      <div class="offset">{{ intro }}</div>
+    </div>
+  </div>
+</template>
+<script>
+import CommonTitle from "@/components/course/common-title"
+export default {
+  components: {
+    CommonTitle
+  },
+  props: {
+    intro: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isUp: true,
+      showArrow: true,
+    }
+  },
+  watch: {
+    intro(val) {
+      this.countH();
+    }
+  },
+  mounted() {
+    this.countH();
+  },
+  methods: {
+    countH() {
+      if (this.intro) {
+        this.$nextTick(() => {
+          const content = this.$el.querySelector('.content').getBoundingClientRect();
+          const offset = this.$el.querySelector('.offset').getBoundingClientRect();
+          if (offset.height < (content.height - 1)) {
+            this.showArrow = false;
+          }
+        })
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+.course-intro-wrapper {
+  .body {
+    position: relative;
+    color: #676869;
+    font-size: 14px;
+    margin: 0 15px;
+    .content {
+      display: block;
+      text-align: justify;
+      line-height: 21px;
+      &.ellipsis {
+        height: 63px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+      }
+    }
+    .toggle-btn {
+      // background: #fff;
+      position: absolute;
+      right: 0;
+      bottom: -18px;
+      display: flex;
+      align-items: center;
+      // padding-left: 30px;
+      // background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 1));
+      img {
+        position: relative;
+        top: 1px;
+        margin-left: 6px;
+        width: 12px;
+        height: 7px;
+      }
+      .action {
+        color: #449284;
+      }
+    }
+  }
+  .offset{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+</style>