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

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

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

See merge request !15

.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

@@ -4,8 +4,8 @@ var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 
 var env = process.env.NODE_ENV
-    // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
-    // various preprocessor loaders added to vue-loader at the end of this file
+// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
+// various preprocessor loaders added to vue-loader at the end of this file
 var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
 var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
 var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
@@ -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

@@ -22,7 +22,7 @@
 
 </script>
 
-<style lang="scss">
+<style lang="less">
   	@import './style/mixin';
   	@import './style/common';
   	@import './style/global';

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/cert-show.vue

@@ -33,14 +33,14 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .cert-show-container {
   display: flex;
-  margin: px2rem(10px) px2rem(15px) 0 px2rem(15px);
+  margin: 10px 15px 0 15px;
   img {
-    width: px2rem(345px);
-    height: px2rem(70px);
+    // width: 345px;
+    width: 100%;
+    height: 70px;
   }
 }
 </style>

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

@@ -94,51 +94,50 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .comp-container {
   display: flex;
   flex-direction: column;
-  margin: 0 px2rem(15px);
+  margin: 0 15px;
   &-item {
     display: flex;
     flex-direction: row;
-    margin: px2rem(6px) px2rem(0px);
-    height: px2rem(51px);
-    // line-height: px2rem(51px);
-    font-size: px2rem(15px);
-    padding: px2rem(0px) px2rem(15px);
+    margin: 6px 0px;
+    height: 51px;
+    // line-height: 51px;
+    font-size: 15px;
+    padding: 0px 15px;
     background: rgba(248, 249, 250, 1);
-    border-radius: px2rem(6px);
+    border-radius: 6px;
     justify-content: space-between;
     align-items: center;
     .name {
-      max-width: px2rem(240px);
-      font-size: px2rem(15px);
-      line-height: px2rem(25px) !important;
+      max-width: 240px;
+      font-size: 15px;
+      line-height: 25px !important;
       color: #676869;
     }
     .action {
-      width: px2rem(60px);
-      height: px2rem(25px);
-      line-height: px2rem(25px);
+      width: 60px;
+      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: 1px solid rgba(68, 146, 132, 0.6);
       color: rgba(68, 146, 132, 1);
     }
     .action-no {
-      width: px2rem(60px);
-      height: px2rem(25px);
-      line-height: px2rem(25px);
+      width: 60px;
+      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: 1px solid #E7E8E9;
@@ -150,7 +149,7 @@ export default {
   }
 }
 .ht-for-m16 {
-  height: px2rem(66px);
+  height: 66px;
 }
 </style>
 

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

@@ -233,41 +233,40 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .coop-container {
   position: relative;
-  margin: px2rem(0px) px2rem(15px);
+  margin: 0px 15px;
   &-status {
     position: absolute;
-    top: px2rem(6px);
+    top: 6px;
     left: 0;
     // display: block;
-    width: px2rem(44px);
-    height: px2rem(18px);
-    line-height: px2rem(18px);
-    padding: px2rem(0px) 0 0 px2rem(4px);
+    width: 44px;
+    height: 18px;
+    line-height: 18px;
+    padding: 0px 0 0 4px;
     background: rgba(88, 144, 221, 1);
     color: #fff;
-    font-size: px2rem(11px);
-    border-top-right-radius: px2rem(3px);
-    border-bottom-right-radius: px2rem(3px);
+    font-size: 11px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
   }
 }
 .coop-item {
   display: flex;
   width: 100%;
-  height: px2rem(128px);
+  height: 128px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   img {
-    width: px2rem(115px);
-    height: px2rem(86px);
-    margin-right: px2rem(15px);
-    border-radius: px2rem(3px);
+    width: 115px;
+    height: 86px;
+    margin-right: 15px;
+    border-radius: 3px;
   }
   &-left {
     display: flex;
@@ -276,23 +275,23 @@ export default {
   }
   &-right {
     display: flex;
-    width: px2rem(215px);
+    width: 215px;
     flex-direction: column;
-    padding-top: px2rem(4px);
+    padding-top: 4px;
     &-title {
-      height: px2rem(50px);
-      line-height: px2rem(20px);
-      font-size: px2rem(16px);
+      height: 50px;
+      line-height: 20px;
+      font-size: 16px;
       font-weight: 700;
       color: rgba(55, 56, 57, 1);
     }
     &-other {
-      height: px2rem(21px);
-      line-height: px2rem(20px);
-      font-size: px2rem(13px);
+      height: 21px;
+      line-height: 20px;
+      font-size: 13px;
       font-weight: 400;
       color: rgba(151, 152, 153, 1);
-      width: px2rem(210px);
+      width: 210px;
       overflow : hidden;
       text-overflow: ellipsis;
       white-space:nowrap;
@@ -300,40 +299,40 @@ export default {
         position: absolute;
         z-index: 1;
         right: 0;
-        height: px2rem(18px);
-        line-height: px2rem(18px);
+        height: 18px;
+        line-height: 18px;
         color: #CAA861;
-        border-radius: px2rem(3px);
+        border-radius: 3px;
         // border: 1px solid rgba(202,168,97,1);
         &.sk {
           color: rgba(68, 146, 132, 1);
         }
         span {
           position: relative;
-          top: px2rem(-0.5px);
+          top: -0.5px;
           z-index: 2;
-          font-size: px2rem(11px);
-          padding: 0 px2rem(4px);
+          font-size: 11px;
+          padding: 0 4px;
         }
       }  
     }
   }
 }
 .update-dialog-content {
-  padding: 0 px2rem(15px);
+  padding: 0 15px;
   box-sizing: border-box;
   .title {
     text-align: center;
     color: #373839;
-    font-size: px2rem(18px);
-    padding: px2rem(15px) 0;
-    line-height: px2rem(25px);
+    font-size: 18px;
+    padding: 15px 0;
+    line-height: 25px;
   }
   .update-btn {
     text-align: center;
-    height: px2rem(55px);
-    line-height: px2rem(55px);
-    font-size: px2rem(16px);
+    height: 55px;
+    line-height: 55px;
+    font-size: 16px;
     color: #979899;
     &.confirm-btn {
       color: #449284;

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

@@ -174,26 +174,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;
@@ -202,40 +201,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>
\ No newline at end of file

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/no-perm-content.vue

@@ -19,35 +19,34 @@ 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(70px);
+  margin-top: 70px;
   text-align: center;
   // margin: 0 auto;
   &-img {
-    width: px2rem(60px);
-    height: px2rem(72px);
-    margin-left: px2rem(157px);
-    margin-bottom: px2rem(15px);
+    width: 60px;
+    height: 72px;
+    margin-left: 157px;
+    margin-bottom: 15px;
   }
   &-text1 {
-    height: px2rem(15px);
-    line-height: px2rem(15px);
-    font-size: px2rem(15px);
+    height: 15px;
+    line-height: 15px;
+    font-size: 15px;
     font-weight: 500;
     color:rgba(103, 104, 105, 1);
   }
   &-text2 {
-    height: px2rem(16px);
-    line-height: px2rem(16px);
-    margin-top: px2rem(6px);
-    font-size: px2rem(13px);
+    height: 16px;
+    line-height: 16px;
+    margin-top: 6px;
+    font-size: 13px;
     font-weight: 400;
     color: rgba(151, 152, 153, 1);
   }

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-cert.vue

@@ -150,8 +150,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .pop-sign-box {
   position: fixed;
   width: 100%;
@@ -162,67 +161,67 @@ export default {
   .pop-box {
     background: #fff;
     // background: #00FF00 url(../../images/tankuang.png) no-repeat center center ;
-    width: px2rem(280px);
-    height: px2rem(312px);
-    border-radius: px2rem(7px);
+    width: 280px;
+    height: 312px;
+    border-radius: 7px;
     position: absolute;
     z-index: 112;
     text-align: center;
     left: 50%;
     top: 50%;
-    margin: px2rem(-180px) 0 0 px2rem(-140px);
+    margin: -180px 0 0 -140px;
     img {
-      width: px2rem(280px);
-      height: px2rem(312px);
+      width: 280px;
+      height: 312px;
       vertical-align: middle;
     }
     &-btn {
       position: relative;
-      top: px2rem(-62px);
+      top: -62px;
       display: inline-block;
-      width: px2rem(215px);
-      height: px2rem(44px);
-      line-height: px2rem(44px);
+      width: 215px;
+      height: 44px;
+      line-height: 44px;
       // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
-      font-size: px2rem(16px);
+      font-size: 16px;
       background: linear-gradient(
         360deg,
         rgba(255, 227, 97, 1) 0%,
         rgba(255, 217, 121, 1) 100%
       );
-      box-shadow: 0px px2rem(4px) px2rem(4px) 0px rgba(0, 0, 0, 0.09);
-      border-radius: px2rem(22px);
+      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.09);
+      border-radius: 22px;
       color: #a78400;
       font-weight: 700;
     }
   }
   .pop-text {
     position: absolute;
-    top: px2rem(160px);
+    top: 160px;
     width: 100%;
     text-align: center;
     &-joy {
       color: #ff9a4b;
-      font-size: px2rem(24px);
+      font-size: 24px;
       // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
       font-weight: 700;
     }
     &-tips {
       // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
       color: #ff9a4b;
-      font-size: px2rem(14px);
+      font-size: 14px;
       font-weight: 400;
-      padding: px2rem(8px) px2rem(10px) px2rem(24px) px2rem(10px);
+      padding: 8px 10px 24px 10px;
     }
   }
   // .si-joy {
   //   color: #ff7c26;
-  //   font-size: px2rem(18px);
+  //   font-size: 18px;
   // }
   // .si-tips {
   //   color: #666;
-  //   font-size: px2rem(14px);
-  //   padding: px2rem(8px) px2rem(10px) px2rem(24px) px2rem(10px);
+  //   font-size: 14px;
+  //   padding: 8px 10px 24px 10px;
   // }
   .pop-mask {
     position: absolute;
@@ -233,18 +232,18 @@ export default {
   }
   .sin-close {
     position: absolute;
-    width: px2rem(30px);
-    height: px2rem(30px);
-    bottom: px2rem(-50px);
-    margin-left: px2rem(-15px);
+    width: 30px;
+    height: 30px;
+    bottom: -50px;
+    margin-left: -15px;
     left: 50%;
     img {
-      width: px2rem(30px);
-      height: px2rem(30px);
+      width: 30px;
+      height: 30px;
       display: block;
     }
   }
-  // font-size:px2rem(12px) ;
+  // font-size:12px ;
 }
 </style>
 

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/I-card-item.vue

@@ -78,26 +78,25 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .I-card-item-wrapper {
   // width: 100%;
-  margin: 0 px2rem(15px);
+  margin: 0 15px;
   .item {
     // width: 100%;
     display: flex;
-    height: px2rem(72px);
+    height: 72px;
     flex-direction: row;
     align-content: space-between;
     align-items: center;
     // box-sizing: border-box;
-    padding: 0 px2rem(15px);
+    padding: 0 15px;
     background: #f8f9fa;
-    border-radius: px2rem(6px);
+    border-radius: 6px;
     .left-icon {
-      width: px2rem(40px);
-      height: px2rem(40px);
-      margin-right: px2rem(15px);
+      width: 40px;
+      height: 40px;
+      margin-right: 15px;
     }
     .center {
       position: relative;
@@ -106,25 +105,25 @@ export default {
       display: flex;
       flex-direction: column;
       flex: 1;
-      height: px2rem(40px);
+      height: 40px;
       align-content: flex-start;
       text-align: left;
       .top {
-        height: px2rem(26px);
-        line-height: px2rem(26px);
-        font-size: px2rem(16px);
+        height: 26px;
+        line-height: 26px;
+        font-size: 16px;
         font-weight: 700;
         color: rgba(55, 56, 57, 1);
       }
       .bottom {
-        font-size: px2rem(14px);
+        font-size: 14px;
         font-weight: 400;
         color: rgba(151, 152, 153, 1);
       }
     }
     .right-icon {
-      width: px2rem(15px);
-      height: px2rem(15px);
+      width: 15px;
+      height: 15px;
     }
   }
 }

src/components/cme/basic-info.vue

@@ -89,32 +89,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 {
@@ -124,20 +123,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;
       }
     }
@@ -145,33 +144,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,14 +95,14 @@ 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: 400;
       text-align: center;
       color: #7f7f7f;
       border: 1px solid #d2b573;
       &.left {
-        border-radius: px2rem(20px) 0px 0px px2rem(20px);
+        border-radius: 20px 0px 0px 20px;
         border-right-style: none;
         // color: #ff7a4b;
       }
@@ -113,7 +112,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/card-popup.vue

@@ -72,33 +72,32 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .card-popup-wrapper {
   .content {
-    font-size: px2rem(14px);
-    width: px2rem(300px);
-    // height: px2rem(245px);
-    padding-top: px2rem(30px);
+    font-size: 14px;
+    width: 300px;
+    // height: 245px;
+    padding-top: 30px;
     .title {
       text-align: center;
-      font-size: px2rem(18px);
+      font-size: 18px;
       font-weight: 700;
     }
     .card-info {
       display: flex;
       flex-direction: row;
       align-items: center;
-      height: px2rem(76px);
-      margin: px2rem(15px);
-      padding: 0 px2rem(8px);
+      height: 76px;
+      margin: 15px;
+      padding: 0 8px;
       background: #F8F9FA;
-      border-radius: px2rem(6px);
-      font-size: px2rem(14px);
+      border-radius: 6px;
+      font-size: 14px;
       .icon {
-        width: px2rem(60px);
-        height: px2rem(60px);
-        margin-right: px2rem(8px);
+        width: 60px;
+        height: 60px;
+        margin-right: 8px;
       }
       .info {
         width: 100%;
@@ -107,20 +106,20 @@ export default {
         left: 0;
         .name {
           position: absolute;
-          top: px2rem(-30px);
-          left: px2rem(4px);
+          top: -30px;
+          left: 4px;
         }
         p {
           position: absolute;
-          bottom: px2rem(-34px);
+          bottom: -34px;
           left: 0px;
           display: flex;
           align-items: center;          
           .price {
             color: #FB5B52;
-            font-size: px2rem(18px);
+            font-size: 18px;
             font-weight: 700;
-            margin-right: px2rem(8px);
+            margin-right: 8px;
           }
           .discount {
             color: #979899;
@@ -130,21 +129,21 @@ export default {
       .info2 {
        display: flex;
        flex-direction: column;
-        .name {
+        // .name {
         //   position: absolute;
-          // top: px2rem(-30px);
-          // left: px2rem(4px);
-        }
+        //   top: -30px;
+        //   left: 4px;
+        // }
         p {
           display: flex;
           align-items: center;
-          height: px2rem(24px);
-          line-height: px2rem(24px);
+          height: 24px;
+          line-height: 24px;
           .price {
             color: #FB5B52;
-            font-size: px2rem(18px);
+            font-size: 18px;
             font-weight: 700;
-            margin-right: px2rem(8px);
+            margin-right: 8px;
           }
           .discount {
             color: #979899;
@@ -153,8 +152,8 @@ export default {
       }
     }
     .line {
-      margin-top: px2rem(30px);
-      height: px2rem(1px);
+      margin-top: 30px;
+      height: 1px;
       background: #F0F1F2;
     }
     .btn {
@@ -163,9 +162,9 @@ export default {
       flex-direction: row;
       // justify-content: space-between;
       align-items: center;
-      height: px2rem(50px);
-      // margin-top: px2rem(15px);
-      font-size: px2rem(17px);
+      height: 50px;
+      // margin-top: 15px;
+      font-size: 17px;
       .left {
         flex: 1;
         text-align: center;
@@ -174,7 +173,7 @@ export default {
       }
       .vert-line {
         border-right: 1px solid #F0F1F2;
-        // width: px2rem(1px);
+        // width: 1px;
         height: 100%;
       }
       .right {
@@ -185,7 +184,7 @@ export default {
     }
   }
   .van-popup.van-popup--center {
-    border-radius: px2rem(4px);
+    border-radius: 4px;
   }
 }
 

src/components/cme/change-card copy.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">
-          <img src="../../images/cme/phrase2/info.png" />
-          <span>激活码用于学习课程，您可以从订单详情或您的实体卡查看激活码。激活码一旦使用，不可退回。</span>
-        </div>
-      </article>
-      <section class="input-wrapper">
-        <article class="code-new">
-          <!-- <van-field
-            maxlength="26"
-            v-model="activationCode"
-            label="激活码"
-            placeholder="请输入激活码"
-          /> -->
-          <!-- <span>激活码</span>
-          <input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
-        </article>
-        <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 {
-      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() {
-      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 = ''
-    }
-  }
-};
-</script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
-.bind-cart-wrapper {
-  width: 100%;
-  display: flex;
-  line-height: 1;
-  padding: px2rem(10px) px2rem(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: px2rem(20px);
-    img {
-      position: relative;
-      top: 0;
-      right: px2rem(-120px);
-      width: px2rem(12px);
-      height: px2rem(12px);
-    }
-  }
-  .tip {
-    display: flex;
-    margin-top: px2rem(40px);
-    .left {
-      display: flex;
-      line-height: 1.2;
-      font-size: px2rem(12px);
-      img {
-        position: relative;
-        top: px2rem(1px);
-        width: px2rem(12px);
-        height: px2rem(12px);
-        // margin: px2rem(2px) px2rem(4px) 0 px2rem(1px);
-      }
-      span {
-        margin-left: px2rem(4px);
-      }
-      color: #979899;
-    }
-  }
-  .input-wrapper {
-    position: relative;
-    .code {
-      display: flex;
-      flex-direction: column;
-      padding: px2rem(20px) 0;
-      padding-top: 0;
-    }
-    .error {
-      position: absolute;
-      top: px2rem(66px);
-      left: px2rem(56px);
-      display: inline-block;
-      color: red;
-      font-size: px2rem(12px);
-    }
-    img {
-      position: absolute;
-      top: px2rem(33px);
-      right: px2rem(12px);
-      width: px2rem(15px);
-      height: px2rem(15px);
-    }
-  }
-
-  .bottom {
-    display: flex;
-    margin-bottom: px2rem(40px);
-  }
-}
-</style>
\ No newline at end of file

src/components/cme/change-card.vue

@@ -104,13 +104,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);
@@ -123,40 +122,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;
     }
@@ -167,40 +166,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>
\ No newline at end of file

src/components/cme/cme-step.vue

@@ -208,11 +208,10 @@ export default {
   }
 };
 </script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .step-content {
   position: relative;
-  height: px2rem(110px);
+  height: 110px;
   background: rgba(248, 249, 250, 1);
   display: flex;
   flex-direction: row;
@@ -221,25 +220,25 @@ export default {
   .step-item {
     flex-grow: 1;
     text-align: center;
-    padding-top: px2rem(20px);
-    line-height: px2rem(20px);
+    padding-top: 20px;
+    line-height: 20px;
     span {
       display: inline-block;
-      width: px2rem(20px);
-      height: px2rem(20px);
-      line-height: px2rem(17px);
+      width: 20px;
+      height: 20px;
+      line-height: 17px;
       border-radius: 50%;
       background: #676869;
       border: 2px solid rgba(255, 255, 255, 1);
       color: #fff;
-      font-size: px2rem(12px);
+      font-size: 12px;
       font-weight: 700;
     }
     span.actived {
       background: #449284;
     }
     p {
-      font-size: px2rem(13px);
+      font-size: 13px;
       color: #373839;
     }
     p.actived {
@@ -248,19 +247,19 @@ export default {
   }
   .step-line {
     position: absolute;
-    top: px2rem(58px);
-    width: px2rem(75px);
-    height: px2rem(3px);
+    top: 58px;
+    width: 75px;
+    height: 3px;
     background: #dadde1;
   }
   .step-one-line {
-    left: px2rem(56px);
+    left: 56px;
   }
   .step-two-line {
-    left: px2rem(150px);
+    left: 150px;
   }
   .step-three-line {
-    right: px2rem(56px);
+    right: 56px;
   }
   .step-one-line.actived,
   .step-two-line.actived,
@@ -269,113 +268,113 @@ export default {
   }
   .step-text {
     position: absolute;
-    top: px2rem(25px);
-    padding: px2rem(4px) px2rem(6px);
+    top: 25px;
+    padding: 4px 6px;
     background: #449284;
-    border-radius: px2rem(10px);
-    font-size: px2rem(12px);
-    line-height: px2rem(12px);
+    border-radius: 10px;
+    font-size: 12px;
+    line-height: 12px;
     color: #fff;
     img {
         display: inline-block;
-        width: px2rem(6px);
-        height: px2rem(9px);
-        padding-left: px2rem(4px);
+        width: 6px;
+        height: 9px;
+        padding-left: 4px;
     }
   }
   .step1-text {
-    left: px2rem(20px);
+    left: 20px;
   }
   .step1-text:after {
     content: "";
-    width: px2rem(0px);
-    height: px2rem(0px);
-    border-top: px2rem(7px) solid #449284;
-    border-left: px2rem(7px) solid transparent;
-    border-right: px2rem(7px) solid transparent;
+    width: 0px;
+    height: 0px;
+    border-top: 7px solid #449284;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
     position: absolute;
-    top: px2rem(18px);
-    left: px2rem(21px);
+    top: 18px;
+    left: 21px;
   }
   .step2-text {
-    left: px2rem(106px);
+    left: 106px;
   }
   .step2-text:after,
   .step3-text:after {
     content: "";
-    width: px2rem(0px);
-    height: px2rem(0px);
-    border-top: px2rem(7px) solid #449284;
-    border-left: px2rem(7px) solid transparent;
-    border-right: px2rem(7px) solid transparent;
+    width: 0px;
+    height: 0px;
+    border-top: 7px solid #449284;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
     position: absolute;
-    top: px2rem(18px);
-    left: px2rem(29px);
+    top: 18px;
+    left: 29px;
   }
   .step3-text {
-    left: px2rem(207px);
+    left: 207px;
   }
   .step3-text:after {
     content: "";
-    width: px2rem(0px);
-    height: px2rem(0px);
-    border-top: px2rem(7px) solid #449284;
-    border-left: px2rem(7px) solid transparent;
-    border-right: px2rem(7px) solid transparent;
+    width: 0px;
+    height: 0px;
+    border-top: 7px solid #449284;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
     position: absolute;
-    top: px2rem(18px);
-    left: px2rem(21px);
+    top: 18px;
+    left: 21px;
   }
   .step4-text {
-    right: px2rem(20px);
+    right: 20px;
   }
   .step4-text:after {
     content: "";
-    width: px2rem(0px);
-    height: px2rem(0px);
-    border-top: px2rem(7px) solid #449284;
-    border-left: px2rem(7px) solid transparent;
-    border-right: px2rem(7px) solid transparent;
+    width: 0px;
+    height: 0px;
+    border-top: 7px solid #449284;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
     position: absolute;
-    top: px2rem(18px);
-    right: px2rem(20px);
+    top: 18px;
+    right: 20px;
   }
   .apply-score-content {
     display: flex;
     position: absolute;
-    left: px2rem(105px);
-    top: px2rem(-42px);
+    left: 105px;
+    top: -42px;
     background: #000;
     opacity: 0.6;
-    width: px2rem(236px);
-    height: px2rem(51px);
-    border-radius: px2rem(6px);
+    width: 236px;
+    height: 51px;
+    border-radius: 6px;
     .title {
-      font-size: px2rem(12px);
+      font-size: 12px;
       color: rgba(255, 255, 255, 1);
-      margin: px2rem(7px) px2rem(11px) 0 px2rem(0px);
-      width: px2rem(133px);
+      margin: 7px 11px 0 0px;
+      width: 133px;
     }
     .lm {
-      width: px2rem(41px);
+      width: 41px;
       img {
         display: inline-block;
-        width: px2rem(20px);
-        padding: 0 0 px2rem(7px) px2rem(15px);
+        width: 20px;
+        padding: 0 0 7px 15px;
       }
     }
     .line {
-      width: px2rem(1px);
-      height: px2rem(51px);
+      width: 1px;
+      height: 51px;
       background: #fff;
       opacity: 0.18;
     }
     .rm {
-      width: px2rem(41px);
+      width: 41px;
       img {
         display: inline-block;
-        width: px2rem(15px);
-        padding: 0 px2rem(15px) px2rem(7px);
+        width: 15px;
+        padding: 0 15px 7px;
       }
     }
   }

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

@@ -7,8 +7,7 @@
     </div>
   </div>
 </template>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .common-bottom-info-wrapper {
   position: fixed;
   width: 100%;

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.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

@@ -9,6 +9,7 @@ export default {
   name: 'common-title',
   data() {
     return {
+      isWeb: window.__isWeb,
       showInfo: {
         imageUrl: '',
         jumpUrl: ''
@@ -52,6 +53,10 @@ export default {
 
     // 广告位跳转
     jumpPage() {
+      // if(this.isWeb) {
+      //   window.location.href = this.showInfo.jumpUrl;
+      //   return;
+      // }
       let paramList = [
         {
           key: "pageUrl",
@@ -68,16 +73,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>
\ No newline at end of file

src/components/common/common-navbar.vue

 <template>
   <section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
-    <!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
     <div
       class="nav-part"
       :style="'background:' + bgColor + ';'
       + 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
     >
       <div class="nav-title">
-        <span class="nav-back" @click="goBack">
+        <span v-if="isShowShare" 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,60 @@ 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: 2,     // 业务类型 1：教培项目 2：继教项目 3：职称考项目
+        token: _this.userInfo.userToken,
+        setEntry: true
+      };
+      _this.POST("portal/shareParam/save", param).then(res => {
+        if (res.code == "000000") {
+          let url = getWebPageUrl(`cme/#/sharecoop?uuid=${res.data}`);
+          _this.shareUrl = url;
+          this.goShareAction();
+        }
+      }).catch( e => {
+        console.error(e);;
+      });      
+    },
+
+    //分享
+    goShareAction() {
+      // 这里要改造
+      // let url = location.href,
+      let _this = this;
+      console.log("######### in goShare", {
+        type: 6,
+        shareId: 0,
+        shareUrl: _this.shareUrl,
+        title1: _this.shareTitle,
+        title2: _this.shareTitleInfo,
+        shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
+      });
       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 +173,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,12 +196,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);
+    height: 25px;
+    width: 55px;
+    padding-left: 15px;
+    padding-right: 15px;
     // -ms-transform: translate(180deg);
     // -webkit-transform: (180deg);
     // transform: rotate(180deg);
@@ -188,33 +222,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 +257,6 @@ export default {
   top: 0;
   left: 0;
   border-bottom: 1px solid #e7e7e7;
-  /* height: px2rem(25px);*/
+  /* height: 25px;*/
 }
 </style>
\ No newline at end of file

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.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>
\ No newline at end of file

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/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-covers.vue

+<template>
+  <div class="course-covers-wrapper">
+    <span class="tips" v-html="coverTips"></span>
+    <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: 210px;
+  // 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/main.js

@@ -13,6 +13,7 @@ import BuriedPoint,{ sendBuriedData} from 'web-buried-point';
 import Vant from 'vant';
 import 'vant/lib/index.css';
 import clipboard from 'clipboard';
+import "@/utils/wxShare"
 //注册到vue原型上
 Vue.prototype.clipboard = clipboard;
 
@@ -25,18 +26,11 @@ if(!(process.env.BUILD_ENV === 'uat' || process.env.BUILD_ENV === 'pro')) {
 // Vue.config.devtools = true;
 
 
-
 // 注册所有公用过滤器
 for(let key in vueFilters) {
 	Vue.filter(key, vueFilters[key])
 }
 
-// if ('addEventListener' in document) {
-//     document.addEventListener('DOMContentLoaded', function() {
-//         FastClick.attach(document.body);
-//     }, false);
-// }
-// Vue.use(DiscussTopicStencil)
 Vue.use(VueRouter)
 const router = new VueRouter({
 	routes,
@@ -54,6 +48,18 @@ const router = new VueRouter({
 	}
 })
 
+router.beforeEach((to, from, next) => {
+  let query = { ...to.query };
+  // 登录token保存并替换路径
+  if (query.token && query.token != 'undefined') {
+    store.dispatch('setToken', query.token);
+    delete query.token;
+    next({ path: to.path, query: query, replace: true });
+    return;
+  }
+  next();
+})
+
 // 加入混合
 Vue.mixin({
 	...mixins

src/router/router.js

@@ -5,6 +5,7 @@ const complist = r => require.ensure([], () => r(require('../views/component-det
 const cooplist = r => require.ensure([], () => r(require('../views/cooperation-details')), 'cooplist')
 const parent = r => require.ensure([], () => r(require('../views/parent-page')), 'parent')
 const merge = r => require.ensure([], () => r(require('../views/merge-detail')), 'merge')
+const shareMerge = r => require.ensure([], () => r(require('../views/share-merge-detail')), 'share-merge')
 const test = r => require.ensure([], () => r(require('../views/test-components')), 'test-components')
 const creditedit = r => require.ensure([], () => r(require('../views/credit-edit')), 'credit-edit')
 const creditdetail = r => require.ensure([], () => r(require('../views/credit-detail')), 'credit-detail')
@@ -43,6 +44,10 @@ export default [{
             path: '/coop',
             component: merge
         },        
+        {
+            path: '/sharecoop',
+            component: shareMerge
+        },
         {
             path: '/test',
             component: test

src/store/getters.js

@@ -6,5 +6,6 @@ const getters = {
   jumpURLForII: state => state.coop.jumpURLForII,
   positionInfo: state => state.coop.positionInfo,
   organizationInfo: state => state.coop.organizationInfo,
+  logged: state => !!(state.user.token && state.user.info.id),
 }
 export default getters

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import coop from './modules/coop'
+import user from './modules/user'
 import getters from './getters'  
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
-    coop
+    coop,
+    user
   },
   getters
 })

src/store/modules/user.js

+import { Toast } from 'vant';
+import fetch from '@/utils/fetch';
+import { getBaseUrl } from '@/utils/index'
+import { preLoadImg } from '@/utils/index';
+import { envConfig } from '@/utils/env-config'
+import { setCookie, delCookie } from '@/utils/index';
+
+const user = {
+  state: {
+    token: localStorage.getItem('token') || '',
+    info: {}, // 用户信息
+  },
+  mutations: {
+    SET_TOKEN: (state, payload) => {
+      state.token = payload;
+    },
+    SET_USER_INFO: (state, payload) => {
+      state.info = payload;
+    },
+  },
+  actions: {
+    // 外部登陆返回设置token
+    setToken({ commit, dispatch }, params) {
+      commit('SET_TOKEN', params);
+      localStorage.setItem('token', params);
+      setCookie('token', params)
+      dispatch('getUserInfo');
+    },
+    // 获取用户信息
+    async getUserInfo({ state, commit, dispatch }) {
+      try {
+        const errCallBack = () => {
+          dispatch('logout');
+          Toast('登录失效，请重新登录~')
+        }
+        const res = await fetch({
+          url: getBaseUrl('/account/login/web'),
+          method: 'get',
+          headers: { token: state.token }
+        }).catch(() => {
+          errCallBack()
+        });
+        if (res && res.code === '000000') {
+          const { certifyDoc, isExist } = res.data;
+          const picapDoctor = res.data.picapDoctor || {};
+          if (picapDoctor.id) {
+            let avatar = picapDoctor.avatar_image_url || '';
+            let avatarUrl = '';
+            // const img1 = await preLoadImg(`https://test-file.yunqueyi.com${avatar}`).catch(err => console.log(err));
+            // const img2 = await preLoadImg(`https://file.yunqueyi.com${avatar}`).catch(err => console.log(err));
+            // if (img1) {
+            //   avatarUrl = img1.src;
+            // }
+            // if (img2) {
+            //   avatarUrl = img2.src;
+            // }
+            picapDoctor.avatar = avatarUrl || 'https://file.yunqueyi.com/File/doctor_default.png';
+            commit('SET_USER_INFO', { ...picapDoctor, isExist, certifyDoc });
+          }
+        } else {
+          errCallBack()
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    },
+
+    // 通过登陆
+    goLogin() {
+      window.location.href = envConfig[process.env.BUILD_ENV]['webPageUrl'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
+    },
+
+    // 登出
+    logout({ state, commit }) {
+      commit('SET_TOKEN', '');
+      commit('SET_USER_INFO', {});
+      localStorage.removeItem('token');
+      delCookie('token')
+    },
+  },
+}
+
+export default user;

src/style/common.scss → src/style/common.less

@@ -12,7 +12,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
     font-style: normal;
     text-decoration: none;
     border: none;
-    // font-size: px2rem(14px);
+    // font-size: 14;
     // color: #333;
     font-weight: normal;
     // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";

src/style/mixin.less

+@blue: #3190e8;
+@bc: #e4e4e4;
+@fc:#fff;

src/style/mixin.scss

-$blue: #3190e8;  
-$bc: #e4e4e4;
-$fc:#fff;
-
-// 背景图片地址和大小
-@mixin bis($url) { 
-	background-image: url($url);
-	background-repeat: no-repeat;
-	background-size: 100% 100%;
-}
-
-@mixin borderRadius($radius) {
-    -webkit-border-radius: $radius;
-    -moz-border-radius: $radius;
-    -ms-border-radius: $radius;
-    -o-border-radius: $radius;
-    border-radius: $radius;
-}
-//定位全屏
-@mixin allcover{
-	position:absolute;
-	top:0;
-	right:0;
-}
-
-//定位上下左右居中
-@mixin center {  
-	position: absolute;
-	top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-//定位上下居中
-@mixin ct {  
-	position: absolute;
-	top: 50%;
-    transform: translateY(-50%);
-}
-
-//定位左右居中
-@mixin cl {  
-	position: absolute;
-	left: 50%;
-    transform: translateX(-50%);
-}
-
-//宽高
-@mixin wh($width, $height){
-	width: $width;
-	height: $height;
-}
-
-//字体大小、行高、字体
-@mixin font($size, $line-height, $family: 'Microsoft YaHei') {  
-	font: #{$size}/#{$line-height} $family;
-}
-
-//字体大小，颜色
-@mixin sc($size, $color){
-	font-size: $size;
-	color: $color;
-}
-
-//flex 布局和 子元素 对其方式
-@mixin fj($type: space-between){
-	display: flex;
-	justify-content: $type;
-
-}
-
-@function px2rem($px){
-	$rem: 37.5px;
-	@return ($px / $rem) + rem;
-}
\ No newline at end of file

src/utils/fetch.js

@@ -11,7 +11,6 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // debugger
   if (config.data && config.data.setEntry) {
     config.headers['sysCode'] = config.data.sysCode || 10
     if(config.data.token){