修改引用配置

.babelrc

 {
-  "presets": ["env", "es2015", "stage-2"],
+  "presets": [
+    "@babel/preset-env"
+  ],
   "plugins": [
-    "add-module-exports", 
-    "transform-runtime",
+    "add-module-exports",
+    [
+      "@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/utils.js

@@ -55,4 +55,4 @@ exports.styleLoaders = function(options) {
         })
     }
     return output
-}
+}
\ No newline at end of file

build/webpack.base.conf.js

@@ -40,7 +40,7 @@ module.exports = {
             loader: 'vue'
         }, {
             test: /\.js$/,
-            loader: 'babel',
+            loader: 'babel-loader',
             include: projectRoot,
             exclude: /node_modules/
         }, {
@@ -69,7 +69,16 @@ 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
             })
         ]
     }
-}
+}
\ No newline at end of file

package.json

@@ -15,19 +15,11 @@
     "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",
@@ -36,19 +28,27 @@
     "web-buried-point": "^2.1.0"
   },
   "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 +64,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-detail.vue

@@ -366,20 +366,19 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "../../style/mixin";
+<style lang="less">
 .van-dialog {
   transform: translate(-50%,-50%);
-  width: px2rem(300px);
-  border-radius: px2rem(3px);
+  width: 300px;
+  border-radius: 3px;
   .van-dialog__header {
-    padding-top: px2rem(30px);
-    font-size: px2rem(18px);
+    padding-top: 30px;
+    font-size: 18px;
     color: #333333;
   }
   .van-dialog__content {
     .van-dialog__message--has-title {
-      padding-top: px2rem(14px);
+      padding-top: 14px;
       text-align: left;
       color: #676869;
       font-weight:400;
@@ -389,7 +388,7 @@ export default {
     .van-button {
       .van-button__text {
         color: #449284;
-        font-size: px2rem(17px);
+        font-size: 17px;
       }
     }
   }
@@ -397,17 +396,17 @@ export default {
 .van-toast {
   // background: #000000;
   div {
-    font-size:px2rem(12px);
+    font-size:12px;
     color: #FFFFFF;
   }
 }
 .van-toast--text {
-  padding: px2rem(7px) px2rem(8px);
+  padding: 7px 8px;
 }
 .no-more-bottom {
   position: relative;
   width: 100%;
-  height: px2rem(40px);
+  height: 40px;
 }
 .cell-detail {
   .van-hairline--top::after , .van-hairline--top-bottom::after {
@@ -415,38 +414,38 @@ export default {
   }
   .van-collapse-item {
     .van-cell {
-      margin: px2rem(9px) auto 0 auto;
-      width: px2rem(345px);
-      min-height: px2rem(48px);
-      border-radius: px2rem(6px);
+      margin: 9px auto 0 auto;
+      width: 345px;
+      min-height: 48px;
+      border-radius: 6px;
     }
     .van-collapse-item__title {
       background: #F8F9FA;
       .van-cell__title {
-        max-width: px2rem(200px);
+        max-width: 200px;
         vertical-align: middle;
-        line-height: px2rem(30px);
+        line-height: 30px;
         flex: auto;
         span {
           color: #373839;
           font-weight:500;
-          font-size: px2rem(15px);
-          height: px2rem(15px);
-          line-height: px2rem(15px);
+          font-size: 15px;
+          height: 15px;
+          line-height: 15px;
         }
       }
       .van-cell__value {
-        // max-width: px2rem(80px);
-        line-height: px2rem(30px);
+        // max-width: 80px;
+        line-height: 30px;
         span {
           color: #979899;
           font-weight:500;
-          font-size: px2rem(14px);
-          line-height: px2rem(14px);
+          font-size: 14px;
+          line-height: 14px;
         }
       }
       .van-icon {
-        margin-top: px2rem(3px);
+        margin-top: 3px;
         color: #999999;
       }
     }
@@ -456,16 +455,16 @@ export default {
         span {
           color: #449284;
           font-weight:500;
-          font-size: px2rem(15px);
-          line-height: px2rem(15px);
+          font-size: 15px;
+          line-height: 15px;
         }
       }
       .van-cell__value {
         span {
           color: #449284;
           font-weight:500;
-          font-size: px2rem(14px);
-          line-height: px2rem(14px);
+          font-size: 14px;
+          line-height: 14px;
         }
       }
       .van-icon {
@@ -488,84 +487,84 @@ export default {
   }
   .line-component {
     position: relative;
-    margin-top: px2rem(20px);
+    margin-top: 20px;
     margin-left: 0;
-    width: px2rem(373px);
-    height: px2rem(6px);
+    width: 373px;
+    height: 6px;
     background: #F8F9FA;
   }
 }
 .cell-container {
   display: flex;
   flex-direction: column;
-  margin: px2rem(20px) px2rem(0px) px2rem(-28px) px2rem(0px);
+  margin: 20px 0px -28px 0px;
   &-item {
     position: relative;
     display: flex;
     flex-direction: row;
-    margin-bottom: px2rem(39px);
-    line-height: px2rem(51px);
-    font-size: px2rem(15px);
+    margin-bottom: 39px;
+    line-height: 51px;
+    font-size: 15px;
     justify-content: space-between;
     align-items: center;
     .name {
       .name-img {
         position: relative;
         z-index: 9;
-        margin-right: px2rem(6px);
-        width: px2rem(20px);
-        height: px2rem(20px);
+        margin-right: 6px;
+        width: 20px;
+        height: 20px;
         float: left;
         .img-icon {
           position: absolute;
           top: 0;
           left: 0;
-          width: px2rem(20px);
-          height: px2rem(20px);
+          width: 20px;
+          height: 20px;
         }
       }
       &-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: "";
         // }
@@ -578,10 +577,10 @@ export default {
       }
       &-title {
         // 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(22px);
+        line-height: 22px;
         color: #333333;
         float: left;
       }
@@ -590,73 +589,73 @@ export default {
       }
       // &::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: px2rem(1px) solid rgba(68, 146, 132, 0.6);
+      border-radius: 15px;
+      border: 1px 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: px2rem(1px) solid #c7c8c9;
+        border: 1px solid #c7c8c9;
         color: #c7c8c9;
       }
     }
     .key {
-      width: px2rem(15px);
-      height: px2rem(15px);
-      margin-right: px2rem(20px);
+      width: 15px;
+      height: 15px;
+      margin-right: 20px;
     }
   }
   span {
     .cert-img {
-      margin-left: px2rem(26px);
+      margin-left: 26px;
       position: relative;
-      top: px2rem(-34px);
-      width: px2rem(70px);
-      height: px2rem(20px);
+      top: -34px;
+      width: 70px;
+      height: 20px;
     }
     .space2 {
-      top: px2rem(-34px);
+      top: -34px;
     }
   }
   .connect-line {
     position: absolute;
-    // top: px2rem(32px);
-    top: px2rem(3px);
-    left: px2rem(8.5px);
-    height: px2rem(42px);
-    width: px2rem(3px);
+    // top: 32px;
+    top: 3px;
+    left: 8.5px;
+    height: 42px;
+    width: 3px;
     background: #F8F9FA;
     // border: 0.5px dashed rgba(240, 241, 244, 1);
   }
@@ -664,40 +663,40 @@ export default {
     background: #E3EFED;
   }
   .len4 {
-    // height: px2rem(100px);
-    height: px2rem(106px);
+    // height: 100px;
+    height: 106px;
   }
   .len3 {
-    // height: px2rem(82px);
-    height: px2rem(88px);
+    // height: 82px;
+    height: 88px;
   }
   .len2 {
-    // height: px2rem(82px);
-    height: px2rem(88px);
+    // height: 82px;
+    height: 88px;
   }
   .len1 {
-    // height: px2rem(62px);
-    height: px2rem(68px);
+    // height: 62px;
+    height: 68px;
   }
   .bottom-line {
     position: relative;
-    margin: px2rem(-19px) 0 px2rem(20px) 0;
+    margin: -19px 0 20px 0;
     bottom: 0px;
     width: 100%;
-    height: px2rem(6px);
+    height: 6px;
     background: #F8F9FA;
-    border-radius: px2rem(2px);
+    border-radius: 2px;
     // border-bottom: 0.5px solid #F0F1F2;
   }
   .foot-line {
     position: absolute;
-    width: px2rem(311px);
-    margin-left: px2rem(34.5px);
-    height: px2rem(1px);
+    width: 311px;
+    margin-left: 34.5px;
+    height: 1px;
     background: #E7E8E9;
     // border-bottom: 0.5px solid #E7E8E9;
     transform: scaleY(0.5);
-    bottom: px2rem(-20px);
+    bottom: -20px;
   }
 }
 .bg-13 {

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: "";
         }
@@ -255,10 +254,10 @@ export default {
       }
       &-title {
         // 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;
       }
@@ -267,44 +266,44 @@ export default {
       }
       // &::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 +316,40 @@ export default {
   }
   span {
     img {
-      margin-left: px2rem(26px);
+      margin-left: 26px;
       position: relative;
-      top: px2rem(-28px);
-      width: px2rem(70px);
-      height: px2rem(20px);
+      top: -28px;
+      width: 70px;
+      height: 20px;
     }
     .space2 {
-      top: px2rem(-26px);
+      top: -26px;
     }
   }
   .connect-line {
     position: absolute;
-    // top: px2rem(32px);
-    top: px2rem(3px);
-    left: px2rem(9.5px);
-    height: px2rem(42px);
+    // top: 32px;
+    top: 3px;
+    left: 9.5px;
+    height: 42px;
     width: 0.5px;
     border: 0.5px dashed rgba(240, 241, 244, 1);
   }
   .len4 {
-    height: px2rem(100px);
+    height: 100px;
   }
   .len3 {
-    height: px2rem(82px);
+    height: 82px;
   }
   .len2 {
-    height: px2rem(82px);
+    height: 82px;
   }
   .len1 {
-    height: px2rem(62px);
+    height: 62px;
   }
   .bottom-line {
     position: relative;
-    margin: px2rem(6px) 0 px2rem(28px) 0;
+    margin: 6px 0 28px 0;
     bottom: 0px;
     width: 100%;
     border-bottom: 0.5px solid #F0F1F2;

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

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

src/components/business/merge-title.vue

@@ -97,52 +97,51 @@ 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;
     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>
+</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

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

src/components/business/notice-item.vue

@@ -41,62 +41,61 @@ export default {
         this.marginTop = '10px';
         this.imgMarginTop = '-3px'
       } else if(newVal == 3){
-        this.marginTop = '-2px';        
+        this.marginTop = '-2px';
       }
     }
   },
 };
 </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;
         overflow: hidden;
         text-overflow: ellipsis;
-      }    
+      }
     }
 
   }

src/components/business/pop-notice.vue

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

src/components/business/update-dialog.vue

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

src/components/cme/basic-info.vue

@@ -64,37 +64,36 @@ export default {
     },
     projectName: {
       type: String,
-      default: ""      
+      default: ""
     }
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .basic-container {
-  padding-bottom: px2rem(20px);
-  margin: px2rem(30px) px2rem(15px) 0px;
-  border-bottom: px2rem(1px) solid #e7e8e9;
+  padding-bottom: 20px;
+  margin: 30px 15px 0px;
+  border-bottom: 1px solid #e7e8e9;
   .basic-title {
-    font-size: px2rem(18px);
-    line-height: px2rem(18px);
+    font-size: 18px;
+    line-height: 18px;
     color: #373839;
     font-weight: 700;
   }
   .pro-name {
     display: flex;
     flex-direction: row;
-    margin-top: px2rem(16px);
-    font-size: px2rem(14px);
+    margin-top: 16px;
+    font-size: 14px;
     span {
       display: flex;
-      font-size: px2rem(14px);
+      font-size: 14px;
       align-items: center;
-      line-height: px2rem(22px);
+      line-height: 22px;
       align-content: flex-start;
       text-align: justify;
       &.title {
-        width: px2rem(84px);
+        width: 84px;
         color: #979899;
       }
       &.name {
@@ -104,20 +103,20 @@ export default {
     }
   }
   .content {
-    margin-top: px2rem(16px);
-    height: px2rem(16px);
-    line-height: px2rem(0px);
+    margin-top: 16px;
+    height: 16px;
+    line-height: 0px;
     span {
       display: inline-block;
-      font-size: px2rem(14px);
+      font-size: 14px;
       .split {
         display: inline-block;
         position: relative;
-        top: px2rem(2px);
+        top: 2px;
         left: 0;
-        width: px2rem(1px);
-        height: px2rem(13px);
-        margin: 0 px2rem(2px);
+        width: 1px;
+        height: 13px;
+        margin: 0 2px;
         background: #676869;
       }
     }
@@ -125,36 +124,36 @@ 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;
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

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

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

src/components/cme/card-banner.vue

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

src/components/cme/change-card.vue

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

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

@@ -8,8 +8,7 @@
     </div>
   </div>
 </template>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .common-bottom-info-wrapper {
   position: fixed;
   width: 100%;
@@ -32,7 +31,7 @@
       color: #676869;
     }
     a span {
-      color: #449284;     
+      color: #449284;
     }
     // span:nth-child(1) {
     //   color: #449284;

src/components/cme/common-button.vue

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

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

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

src/components/cme/common-dialog.vue

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

src/components/cme/exjumper-button.vue

@@ -27,26 +27,25 @@ export default {
   },
 }
 </script>
-<style  lang="scss" scoped>
-  @import "../../style/mixin";
+<style  lang="less" scoped>
   .exjumper-button-wrapper {
     position: fixed;
     left: 0;
     bottom: 0;
     right: 0;
     z-index: 1000;
-    font-size: px2rem(14px);
-    padding: px2rem(20px) px2rem(15px);
+    font-size: 14px;
+    padding: 20px 15px;
     background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
     text-align: center;
     &.button-default {
       span {
         display: block;
-        height: px2rem(50px);
-        line-height: px2rem(50px);
+        height: 50px;
+        line-height: 50px;
         width: 100%;
-        border-radius: px2rem(25px);
-        font-size: px2rem(17px);
+        border-radius: 25px;
+        font-size: 17px;
         font-weight: 700;
         color: #FFFFFF;
         background: #449284;
@@ -66,4 +65,4 @@ export default {
     }
   }
 
-</style>
+</style>
\ No newline at end of file

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,43 +40,42 @@ 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;
             }
         }
     }
 }
-</style>
+</style>
\ No newline at end of file

src/components/cme/item-leader.vue

@@ -53,58 +53,57 @@ 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);
+      margin-left: 16px;
+      margin-top: 6px;
       .leader-con {
-        line-height: px2rem(14px);
+        line-height: 14px;
         display: flex;
         flex-direction: row;
         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,28 +112,28 @@ 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;
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/cme/learn-know.vue

@@ -16,25 +16,24 @@ 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;
         }
     }
 }
-</style>
+</style>
\ No newline at end of file

src/components/cme/teacter-intro.vue

@@ -23,72 +23,71 @@ export default {
     },
     data() {
         return {
-            
+
         }
     },
     created() {
 
     },
     mounted() {
-        
+
     },
     methods: {
-        
+
     }
 }
 </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);
+            margin-left: 16px;
+            margin-top: 6px;
             .leader-con {
-                line-height: px2rem(14px);
+                line-height: 14px;
                 display: flex;
                 flex-direction: row;
                 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;
@@ -96,4 +95,4 @@ export default {
         }
     }
 }
-</style>
+</style>
\ No newline at end of file

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

@@ -46,7 +46,7 @@ export default {
 
   },
   computed: {
-    
+
   },
   methods: {
 
@@ -63,21 +63,20 @@ export default {
       rocNative.dispatchEventByModuleCode({
         modeCode: "M300",
         jsonString: paramList
-      });      
+      });
     }
   }
 };
 </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

 <template>
   <CommonTcPlayer style="flex" :options="videoOptions">
-    
+
   </CommonTcPlayer>
 </template>
 <script>
@@ -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

@@ -14,7 +14,7 @@ export default {
   name: "common-description",
   data() {
     return {
-      
+
     };
   },
   props: {
@@ -34,7 +34,7 @@ export default {
   computed: {
     newStudyNum: function() {
       if(this.studyNum > 1000 && this.studyNum < 10000) {
-        return ((Math.round((this.studyNum / 1000) * 10) / 10)  + 'K'); 
+        return ((Math.round((this.studyNum / 1000) * 10) / 10)  + 'K');
       }else if(this.studyNum > 10000) {
         return ((Math.round((this.studyNum / 10000) * 10) / 10)  + 'W');
       }else {
@@ -47,22 +47,21 @@ export default {
 
   },
   methods: {
-    
+
   }
 };
 </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;
@@ -87,7 +86,7 @@ export default {
       flex-wrap: wrap;
     }
   }
-  
+
 }
 
 </style>

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>
+</style>
\ No newline at end of file

src/components/common/common-navbar.vue

@@ -138,23 +138,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 +161,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 +187,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 +222,6 @@ export default {
   top: 0;
   left: 0;
   border-bottom: 1px solid #e7e7e7;
-  /* height: px2rem(25px);*/
+  /* height: 25px;*/
 }
-</style>
+</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 copy.vue

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

src/components/common/common-tcplayer.vue

@@ -63,7 +63,7 @@ export default {
         ...this.options
       };
       options.width = htmlWidth;
-      
+
       const tcPlayer = new TcPlayer(this.id, options);
       tcPlayer.video.on('timeupdate', (event) => {
         let ct = tcPlayer.currentTime();
@@ -136,11 +136,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>
+</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/brief-intro.vue

 <template>
   <div class="brief-intro-wrapper">
     <TeacherIntro :doctorList="doctorList"></TeacherIntro>
-    <CourseIntro></CourseIntro>
-    <CourseHarvest></CourseHarvest>
+    <CourseIntro :intro="intro"></CourseIntro>
+    <CourseHarvest :harvest="harvest"></CourseHarvest>
   </div>
 </template>
 <script>
 import TeacherIntro from "@/components/course/course-teacher";
 import CourseIntro from "@/components/course/course-intro";
 import CourseHarvest from "@/components/course/course-harvest";
+
 export default {
   components: {
     TeacherIntro,
     CourseIntro,
     CourseHarvest,
   },
-  data() {
-    return {
-      doctorList: [
-        {
-          id: 973,
-          name: "左力",
-          appImageUrl:
-            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
-          avatarImageUrl:
-            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
-          hospital: "北京大学人民医院",
-          title: "主任医师",
-          info: ""
-        },
-        {
-          id: 973,
-          name: "左力",
-          appImageUrl:
-            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
-          avatarImageUrl:
-            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
-          hospital: "北京大学人民医院",
-          title: "主任医师",
-          info: ""
-        },
-      ]
-    };
-  }
+  props: {
+    doctorList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    intro: {
+      type: String,
+      default: "",
+    },
+    harvest: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
 };
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .brief-intro-wrapper {
 }
-</style>
+</style>
\ No newline at end of file

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

@@ -22,24 +22,23 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-@import "../../style/mixin";
+<style lang="less">
 .common-error-tips-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: px2rem(120px);
+  padding-top: 120px;
   img {
-    width: px2rem(40px);
-    height: px2rem(40px);
+    width: 40px;
+    height: 40px;
   }
   span {
     display: inline-block;
-    margin-top: px2rem(15px);
-    font-size: px2rem(16px);
-    line-height: px2rem(16px);
+    margin-top: 15px;
+    font-size: 16px;
+    line-height: 16px;
     font-weight: 700;
     color: #111A34;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/common-title.vue

@@ -11,15 +11,14 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .common-title-wrapper {
   display: inline-block;
-  height: px2rem(18px);
-  line-height: px2rem(18px);
-  margin: px2rem(30px) px2rem(15px) px2rem(15px);
-  font-size: px2rem(18px);
+  height: 18px;
+  line-height: 18px;
+  margin: 30px 15px 15px;
+  font-size: 18px;
   font-weight: 700;
   color: #373839;
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/course-button.vue

@@ -24,21 +24,20 @@ export default {
   }
 };
 </script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .course-button-wrapper {
   display: inline-block;
   text-align: center;
-  margin: 0 px2rem(5px);
+  margin: 0 5px;
   &.button-default {
     display: inline-block;
-    padding: 0 px2rem(16px);
+    padding: 0 16px;
     text-align: center;
-    height: px2rem(30px);
-    line-height: px2rem(30px);
+    height: 30px;
+    line-height: 30px;
     // width: 100%;
-    border-radius: px2rem(15px);
-    font-size: px2rem(12px);
+    border-radius: 15px;
+    font-size: 12px;
     font-weight: 700;
     color: #ffffff;
     background: #449284;
@@ -57,4 +56,4 @@ export default {
     background: rgba(68, 146, 132, 0.4);
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/course-catalog.vue

+<template>
+  <div class="course-catalog">
+    <div class="chapter-box">
+      <div class="head">
+        <div class="name ellipsis">1.糖尿病的诊断与分型</div>
+        <div class="total">
+          共4节
+          <img class="arrow" src="~@/images/course/arrow_down.png" />
+        </div>
+      </div>
+      <div class="lecture-box">
+        <div class="item">
+          <img class="icon" src="~@/images/course/array-right.png" />
+          <div class="info line">
+            <p class="subname ellipsis">1.糖尿病的诊断</p>
+            <p class="time">时长: 03:56</p>
+          </div>
+          <div class="btn">学习</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.course-catalog{
+  .chapter-box{
+    position: relative;
+    padding: 0 15px;
+    &::after{
+      position: absolute;
+      content: "";
+      left: 0;
+      bottom: 0;
+      width: 200%;
+      height: 0;
+      transform: scale(0.5);
+      transform-origin: left center;
+      border-bottom: 1px solid #E7E8E9;
+    }
+    .head{
+      display: flex;
+      height: 50px;
+      line-height: 50px;
+    }
+    .name{
+      flex: 1;
+      width: 100px;
+      font-size: 15px;
+    }
+    .total{
+      position: relative;
+      color: #A1A2A3;
+      font-size: 14px;
+      padding-right: 15px;
+    }
+    .arrow{
+      position: absolute;
+      right: 0;
+      top: 19px;
+      width: 12px;
+      height: 12px;
+      transition: all 0.3s;
+    }
+  }
+  .lecture-box{
+    .item{
+      position: relative;
+      display: flex;
+      padding: 15px 0 15px 30px;
+      align-items: center;
+    }
+    .icon{
+      position: absolute;
+      left: 0;
+      top: 18px;
+      width: 12px;
+    }
+    .info{
+      position: relative;
+      flex: 1;
+      width: 100px;
+    }
+    .line{
+      &::after{
+        position: absolute;
+        content: "";
+        left: 0;
+        bottom: 0;
+        width: 200%;
+        height: 0;
+        transform: scale(0.5);
+        transform-origin: left center;
+        border-bottom: 1px solid #E7E8E9;
+      }
+    }
+    .btn{
+      position: relative;
+      width: 60px;
+      height: 26px;
+      line-height: 26px;
+      color: #449284;
+      font-size: 12px;
+      text-align: center;
+      &::after{
+        position: absolute;
+        content: "";
+        left: 0;
+        top: 0;
+        width: 200%;
+        height: 200%;
+        border: 1px solid #449284;
+        transform: scale(0.5);
+        transform-origin: left top;
+        border-radius: 26px;
+      }
+    }
+    .subname{
+      color: #676869;
+      font-size: 15px;
+    }
+    .time{
+      color: #A3A3A3;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+}
+</style>

src/components/course/course-comment.vue

 <template>
   <div class="course-comment">
-    <div class="item" v-for="item in list" :key="item.qaId">
-      <img class="img" :src="item.imageUrl" alt="头像" />
+    <div class="item" v-for="(item, index) in comments" :key="index">
+      <img class="img" :src="item.imageUrl || 'https://file.yunqueyi.com/File/doctor_default.png'" alt="头像" />
       <div class="info-box">
         <div class="info-user">
           <div class="name">{{ item.doctorName }}</div>
           <div class="date">{{ item.createTime }}</div>
         </div>
         <div class="message">{{ item.message }}</div>
-        <div class="reply-box" v-if="item.aList && item.aList.length">
-          <div class="reply-item" v-for="child in item.aList" :key="child.qaId">
+        <div class="reply-box" v-if="item.len">
+          <div class="reply-item" v-for="child in item.cList" :key="child.qaId">
             <div class="reply-user">
               <div class="name">{{ child.doctorName }}</div>
               <div class="date">{{ child.createTime }}</div>
             </div>
             <div class="message">{{ child.message }}</div>
           </div>
-          <div class=""></div>
+          <div class="show-all" v-if="item.len > 2" @click="spreadAll(index)">
+            {{ item.showAll ? '收起回复' : `查看全部${item.len}条回复` }}
+            <img class="show-arrow" :class="{'show-arrow-up': item.showAll}" src="~@/images/course/arrow_down.png" alt="箭头" />
+          </div>
         </div>
       </div>
     </div>
@@ -34,26 +37,54 @@ export default {
     }
   },
   data() {
-    return {};
+    return {
+      comments: []
+    };
+  },
+  watch: {
+    list(val) {
+      this.dealList(val);
+    }
+  },
+  mounted() {
+    this.dealList(this.list);
   },
   methods: {
-    btnClick() {
-      if (this.type == "disabled") return;
-      this.$emit("btnClick");
+    dealList(list) {
+      this.comments = list.map(item => {
+        const aList = item.aList || [];
+        return {
+          ...item,
+          aList,
+          len: aList.length,
+          cList: aList.slice(0, 2),
+          showAll: false,
+        }
+      })
+    },
+    spreadAll(index) {
+      const { ...item } = this.comments[index];
+      if (item.showAll) {
+        item.showAll = false;
+        item.cList = item.aList.slice(0, 2);
+      } else {
+        item.showAll = true;
+        item.cList = item.aList;
+      }
+      this.comments.splice(index, 1, item);
     }
   }
 };
 </script>
 
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .course-comment {
-  padding: 0 px2rem(15px);
+  padding: 0 15px;
   .item{
     position: relative;
     display: flex;
-    font-size: px2rem(14px);
-    padding: px2rem(20px) 0;
+    font-size: 14px;
+    padding: 20px 0;
     &::after{
       position: absolute;
       content: "";
@@ -68,9 +99,9 @@ export default {
   }
   .img{
     display: block;
-    width: px2rem(32px);
-    height: px2rem(32px);
-    margin-right: px2rem(10px);
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
   }
   .info-box{
     flex: 1;
@@ -78,7 +109,7 @@ export default {
   }
   .info-user, .reply-user{
     display: flex;
-    padding-bottom: px2rem(10px);
+    padding-bottom: 10px;
     .name{
       color: #676869;
       flex: 1;
@@ -86,20 +117,39 @@ export default {
     }
     .date{
       color: #979899;
-      font-size: px2rem(12px);
+      font-size: 12px;
     }
   }
   .message{
-    line-height: px2rem(22px);
+    line-height: 22px;
     text-align: justify;
+    word-break: break-all;
   }
   .reply-box{
-    margin-top: px2rem(15px);
-    padding: 12px;
+    margin-top: 15px;
+    padding: 12px 12px 0;
     background-color: #F8F9FA;
   }
   .reply-item{
-    padding-bottom: px2rem(20px);
+    padding-bottom: 20px;
+  }
+  .show-all{
+    position: relative;
+    color: #676869;
+    text-align: right;
+    font-size: 12px;
+    padding: 10px 18px 20px 0;
+  }
+  .show-arrow{
+    position: absolute;
+    right: 0;
+    top: 12px;
+    width: 12px;
+    height: 12px;
+    transition: all 0.3s;
+  }
+  .show-arrow-up{
+    transform: rotate(180deg);
   }
 }
 </style>

src/components/course/course-covers.vue

@@ -45,27 +45,26 @@ export default {
   }
 };
 </script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
+<style  lang="less" scoped>
 .course-covers-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: px2rem(210px);
+  height: 210px;
   background: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-content: center;
   .tips {
     display: inline-block;
-    margin-bottom: px2rem(15px);
+    margin-bottom: 15px;
     color: #fff;
     text-align: center;
-    font-size: px2rem(15px);
+    font-size: 15px;
   }
   .course-button-group {
-    display: flex; 
+    display: flex;
     align-items: center;
-    justify-content:center;    
+    justify-content:center;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/course-harvest.vue

 <template>
   <div class="course-harvest-wrapper">
-    <CommonTitle :title="title"></CommonTitle>
+    <CommonTitle title="学习收获"></CommonTitle>
     <ul class="list-wrapper">
-      <li class="item">
-        <span class="name">卫计委《基层全科诊断资质》证书</span>
-        <span class="btn">查看</span>
-      </li>
-      <li class="item">
-        <span class="name">卫计委《基层全科诊断资质》证书</span>
-        <span class="btn">查看</span>
-      </li>
-      <li class="item">
-        <span class="name">卫计委《基层全科诊断资质》证书</span>
-        <span class="btn">查看</span>
+      <li class="item" v-for="(item, index) in harvest" :key="index">
+        <span class="name">{{ item.name }}</span>
+        <span class="btn" @click="onClick(item)">查看</span>
       </li>
     </ul>
   </div>
 </template>
 <script>
-import CommonTitle from "@/components/course/common-title"
+import CommonTitle from "@/components/course/common-title";
+import { ImagePreview } from 'vant';
+
 export default {
   components: {
     CommonTitle
   },
-  data() {
-    return {
-      title: "学习收获"
+  props: {
+    harvest: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  methods: {
+    onClick(item) {
+      ImagePreview([item.url])
     }
   },
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+
+<style lang="less" scoped>
 .course-harvest-wrapper {
   .list-wrapper {
     .item {
       display: flex;
       justify-content: space-between;
-      height: px2rem(65px);
-      line-height: px2rem(65px);
-      margin: 0 px2rem(15px);
+      height: 65px;
+      line-height: 65px;
+      margin: 0 15px;
       align-items: center;
       border-bottom: 1px solid #E7E8E9;
       .name {
-        font-size: px2rem(15px);
+        font-size: 15px;
         font-weight: 700;
         color: #333333;
       }
       .btn {
         display: inline-block;
-        height: px2rem(25px);
-        line-height: px2rem(25px);
-        font-size: px2rem(12px);
+        height: 25px;
+        line-height: 25px;
+        font-size: 12px;
         font-weight: 700;
-        padding: 0 px2rem(18px);
+        padding: 0 18px;
         color: #449284;
-        border-radius: px2rem(15px);
+        border-radius: 15px;
         border:1px solid rgba(68, 146, 132, 0.45);
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/course-intro.vue

@@ -2,11 +2,11 @@
   <div class="course-intro-wrapper">
     <CommonTitle></CommonTitle>
     <div class="body">
-      <span class="content" :class="{'ellipsis': isUp}">{{content}}</span>
+      <p class="content" :class="{'ellipsis': isUp}">{{ intro }}</p>
       <div class="toggle-btn" @click="isUp=!isUp">
         <span class="action">{{ isUp ? "详情" : "收起"}}</span>
-        <img v-show="isUp" src="../../images/down.png" alt="">
-        <img v-show="!isUp" src="../../images/up.png" alt="">
+        <img v-show="isUp" src="~@/images/down.png" alt="" />
+        <img v-show="!isUp" src="~@/images/up.png" alt="" />
       </div>
     </div>
   </div>
@@ -18,9 +18,9 @@ export default {
     CommonTitle
   },
   props: {
-    content: {
+    intro: {
       type: String,
-      default: "本课程从三级本课程从三级本课程从1级本课课程从三级本课程从1级本课课程从三级本课程从1级本课程从三级本本课程本课b从三级本课程从三级本课程从1级本课程从三级本课程从三级本课程从三级"
+      default: ""
     }
   },
   data() {
@@ -31,18 +31,19 @@ export default {
 
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .course-intro-wrapper {
   .body {
     position: relative;
     color: #676869;
-    font-size: px2rem(14px);
-    padding: 0 px2rem(15px);
+    font-size: 14px;
+    padding: 0 15px;
     .content {
       display: block;
       text-align: justify;
+      line-height: 21px;
       &.ellipsis {
+        height: 63px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -54,18 +55,18 @@ export default {
     .toggle-btn {
       // background: #fff;
       position: absolute;
-      right: px2rem(15px);
+      right: 15px;
       bottom: 0;
       display: flex;
       align-items: center;
-      padding-left: px2rem(30px);
+      padding-left: 30px;
       background: -webkit-linear-gradient(left, transparent, #fff 30%);
       img {
         position: relative;
-        top: px2rem(1px);
-        margin-left: px2rem(6px);
-        width: px2rem(12px);
-        height: px2rem(7px);
+        top: 1px;
+        margin-left: 6px;
+        width: 12px;
+        height: 7px;
       }
       .action {
         color: #449284;
@@ -73,4 +74,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/course-teacher.vue

 <template>
-    <div class="course-teacher-wrapper">
-        <div class="basic-title">讲师介绍</div>
-        <div class="leader-info" v-for="(item,index) in doctorList" :key="index">
-            <img :src="item.appImageUrl"/>
-            <div class="leader-text">
-                <div class="leader-con">
-                    <span>{{item.name}}</span>
-                    <span class="leader-title">{{item.title}}</span>
-                </div>
-                <div class="hospital">{{item.hospital}}</div>
-            </div>
+  <div class="course-teacher-wrapper">
+    <div class="basic-title">讲师介绍</div>
+    <div class="leader-info" v-for="(item,index) in doctorList" :key="index">
+      <img :src="item.app_image_url" alt="头像" />
+      <div class="leader-text">
+        <div class="leader-con">
+          <span>{{item.name}}</span>
+          <span class="leader-title">{{item.title}}</span>
         </div>
+        <div class="hospital">{{item.hospital}}</div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    props: {
-        doctorList: {
-            type: Array,
-            default: () => []
-        }
-    },
-    data() {
-        return {
-            
-        }
-    },
-    created() {
-
-    },
-    mounted() {
-        
-    },
-    methods: {
-        
+  props: {
+    doctorList: {
+      type: Array,
+      default: () => []
     }
+  },
 }
 </script>
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .course-teacher-wrapper {
-    padding: px2rem(30px) px2rem(15px) 0px;
-    .basic-title {
-        font-size: px2rem(18px);
-        line-height: px2rem(18px);
-        color: #373839;
-        font-weight: 700;
+  padding: 30px 15px 0px;
+  .basic-title {
+    font-size: 18px;
+    line-height: 18px;
+    color: #373839;
+    font-weight: 700;
+  }
+  .leader-info {
+    display: flex;
+    flex-direction: row;
+    margin-top: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #E7E8E9;
+    img {
+      display: inline-block;
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
     }
-    .leader-info {
+    .leader-text {
+      margin-left: 16px;
+      margin-top: 6px;
+      .leader-con {
+        line-height: 14px;
         display: flex;
         flex-direction: row;
-        margin-top: px2rem(16px);
-        padding-bottom: px2rem(16px);
-        border-bottom: 1px solid #E7E8E9;
-        img {
-            display: inline-block;
-            width: px2rem(44px);
-            height: px2rem(44px);
-            border-radius: 50%;
+        span {
+          font-size: 16px;
+          color: #676869;
+        }
+        span:first-child {
+          font-size: 16px;
+          color: #373839;
+          font-weight: 700;
+          line-height: 1.1;
         }
-        .leader-text {
-            margin-left: px2rem(16px);
-            margin-top: px2rem(6px);
-            .leader-con {
-                line-height: px2rem(14px);
-                display: flex;
-                flex-direction: row;
-                span {
-                    font-size: px2rem(16px);
-                    color: #676869;
-                }
-                span:first-child {
-                    font-size: px2rem(16px);
-                    color: #373839;
-                    font-weight: 700;
-                    line-height: 1.1;
-                }
-                .leader-title {
-                    width: px2rem(220px);
-                    overflow : hidden;
-                    text-overflow: ellipsis;
-                    white-space:nowrap;
-                    line-height: px2rem(16px);
-                    margin-left: px2rem(6px);
-                }
-            }
-            .hospital {
-                margin-top: px2rem(5px);
-                font-size: px2rem(13px);
-                color: #979899;
-                width: px2rem(240px);
-                overflow : hidden;
-                text-overflow: ellipsis;
-                white-space:nowrap;
-            }
+        .leader-title {
+          width: 220px;
+          overflow : hidden;
+          text-overflow: ellipsis;
+          white-space:nowrap;
+          line-height: 16px;
+          margin-left: 6px;
         }
+      }
+      .hospital {
+        margin-top: 5px;
+        font-size: 13px;
+        color: #979899;
+        width: 240px;
+        overflow : hidden;
+        text-overflow: ellipsis;
+        white-space:nowrap;
+      }
     }
+  }
 }
-</style>
+</style>
\ No newline at end of file

src/components/course/course-ware.vue

+<template>
+  <div class="course-ware"></div>
+</template>
+
+<script>
+/**
+ * 版本：v2.4.456
+ * 需引用ES5
+ * GlobalWorkerOptions.workerSrc需要一个加载路径
+*/
+import pdfJS from 'pdfjs-dist/es5/build/pdf';
+pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcdn.net/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js';
+
+export default {
+  props: {
+    url: {
+      type: String,
+      default: ""
+    }
+  },
+  watch: {
+    url(val) {
+      this.drawPDF();
+    }
+  },
+  mounted() {
+    this.drawPDF();
+  },
+  methods: {
+    async drawPDF() {
+      if (!this.url) {
+        return;
+      }
+      try {
+        const task = pdfJS.getDocument(this.url);
+        const pdf = await task.promise.then();
+        let numPages = 0;
+        if (pdf && pdf._pdfInfo) {
+          numPages = pdf._pdfInfo.numPages
+        }
+        let pageAll = [];
+        for (let i = 0; i < numPages; i++) {
+          pageAll.push(pdf.getPage(i + 1).catch(err => ''))
+        }
+        const pages = await Promise.all(pageAll);
+        this.$el.innerHTML = '';
+        for (let item of pages) {
+          this.createCanvas(item)
+        }
+      } catch(err) {
+        console.log(err)
+      }
+    },
+    createCanvas(pdfPage) {
+      let viewport = pdfPage.getViewport({ scale: 1.0 });
+      let box = document.createElement("div");
+      box.className = 'canvas-box';
+      let canvas = document.createElement("canvas");
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      let ctx = canvas.getContext("2d");
+      let renderTask = pdfPage.render({
+        canvasContext: ctx,
+        viewport: viewport,
+      });
+      box.appendChild(canvas);
+      this.$el.appendChild(box);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.course-ware{
+  padding-top: 20px;
+  overflow: hidden;
+  /deep/ .canvas-box{
+    position: relative;
+    padding-bottom: 30px;
+  }
+  /deep/ canvas{
+    display: block;
+    width: 100%;
+  }
+}
+</style>

src/components/course/pica-video.vue

@@ -6,13 +6,15 @@
       :id="vid"
       :src="url"
       :poster="poster"
-      preload
+      preload="metadata"
       webkit-playsinline
       playsinline
+      x5-playsinline="true"
       x-webkit-airplay="allow"
-      x5-video-player-type="h5"
-      x5-video-player-fullscreen="true"
+      x5-video-player-type="h5-page"
+      x5-video-player-fullscreen="false"
       mtt-playsinline="true"
+      controlsList="nodownload"
       @loadedmetadata="loadedMetaData"
       @timeupdate="onTimeUpdate"
       @ended="onEnded"
@@ -141,10 +143,10 @@ export default {
   },
   methods: {
     togglePlay() {
-      // if (!this.logged) {
-      //   this.$store.dispatch('goLogin');
-      //   return;
-      // }
+      if (!this.logged) {
+        this.$store.dispatch('goLogin');
+        return;
+      }
       if (!this.url || !this.enable) {
         return;
       }
@@ -352,7 +354,7 @@ export default {
         resourceInfo3: lectureId,
         resourceType: 1,
         status,
-        systemType: 2,
+        systemType: 3,
         timestamp: Date.now(),
         showError: false,
       })
@@ -379,8 +381,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-@import "../../style/mixin";
+<style lang="less" scoped>
 .pica-video{
   position: relative;
   left: 0;
@@ -398,6 +399,15 @@ export default {
     max-width: 100%;
     max-height: 100%;
     transform: translate3d(-50%, -50%, 0);
+    &::-internal-media-controls-download-button {
+      display: none;
+    }
+    &::-webkit-media-controls-enclosure {
+      overflow: hidden;
+    }
+    &::-webkit-media-controls-panel {
+      width: calc(100% + 30px);
+    }
   }
   .video-cover{
     position: absolute;

src/main.js

@@ -6,7 +6,6 @@ import store from './store/'
 const mixins = require('@/utils/mixins');
 import '@/utils/rem'					// 引入自适应
 import '@/utils/yqy-bridge'				// 移动端服务
-// import FastClick from 'fastclick'
 import vueFilters from '@/utils/filter';
 import BuriedPoint, { sendBuriedData } from 'web-buried-point';
 import Vant from 'vant';
@@ -52,6 +51,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/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 getters from './getters'  
+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'
+
+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);
+      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]['phomeDemain'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
+    },
+
+    // 登出
+    logout({ state, commit }) {
+      commit('SET_TOKEN', '');
+      commit('SET_USER_INFO', {});
+      localStorage.removeItem('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: 14px;
     // color: #333;
     font-weight: normal;
     // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";

src/style/global.scss → src/style/global.less

-@import './common.scss';
+@import './common.less';
 //定位
 .relative{
     position: relative;
@@ -25,46 +25,46 @@
     text-align: center;
 }
 .line20{
-    margin-top: px2rem(10px);
+    margin-top: 10px;
 }
 .mb42{
-    margin-bottom: px2rem(21px);
+    margin-bottom: 21px;
 }
 .marginLR40{
-    margin: 0 px2rem(20px);
+    margin: 0 20px;
 }
 .fs10{
-    font-size: px2rem(10px);
+    font-size: 10px;
 }
 .fs11{
-    font-size: px2rem(11px);
+    font-size: 11px;
 }
 .fs13{
-    font-size: px2rem(13px);
+    font-size: 13px;
 }
 .fs14{
-    font-size: px2rem(14px);
+    font-size: 14px;
 }
 .fs22{
-    font-size: px2rem(11px);
+    font-size: 11px;
 }
 .fs24{
-    font-size: px2rem(12px);
+    font-size: 12px;
 }
 .fs26{
-    font-size: px2rem(13px);
+    font-size: 13px;
 }
 .fs28{
-    font-size: px2rem(14px);
+    font-size: 14px;
 }
 .fs32{
-    font-size: px2rem(16px);
+    font-size: 16px;
 }
 .fs30{
-    font-size: px2rem(15px);
+    font-size: 15px;
 }
 .fs50{
-    font-size: px2rem(25px);
+    font-size: 25px;
 }
 .fw{
     font-weight: 700;
@@ -81,12 +81,12 @@
     color: #fff;
 }
 .fs30{
-    font-size: px2rem(15px);
+    font-size: 15px;
 }
 
 .van-cell {
-    padding: px2rem(17px) px2rem(15px) !important;
-    font-size: px2rem(15px) !important;
+    padding: 17px 15px !important;
+    font-size: 15px !important;
     color: #373839 !important;
 }
 .van-cell:not(:last-child)::after {
@@ -96,7 +96,7 @@
     text-align: right !important;
 }
 // .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
-//     border-width: px2rem(1px) 0 !important;
+//     border-width: 1px 0 !important;
 // }
 // .van-hairline, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom {
 //     position: inherit !important;
@@ -104,29 +104,29 @@
 // .van-hairline--top {
 // }
 // .van-field__label, .van-field__body {
-//     height: px2rem(15px) !important;
-//     line-height: px2rem(15px) !important;
+//     height: 15px !important;
+//     line-height: 15px !important;
 // }
 .van-cell__title span {
     font-weight: 700 !important;
 }
 
 .bind-cart-wrapper .van-field__control {
-    border-radius: px2rem(4px);
+    border-radius: 4px;
     border: 1px solid #C7C8C9;
-    padding: px2rem(7px);
+    padding: 7px;
     text-align: left !important;
 }
 
 .bind-cart-wrapper .van-cell__title .van-field__label {
     span {
-        font-size: px2rem(15px) !important;
+        font-size: 15px !important;
         color: #373839 !important;
     }
 }
 .bind-cart-wrapper .van-field__label {
-    width: px2rem(56px) !important;
-    padding-top: px2rem(8px);
+    width: 56px !important;
+    padding-top: 8px;
 }
 .bind-cart-wrapper .van-cell {
     padding: 0.54rem 0 !important;
@@ -179,4 +179,4 @@
         font-size: 17px;
         color: #449284;
     }
-}
+}
\ No newline at end of file

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/env-config.js

@@ -10,7 +10,7 @@ export const envConfig = {
 
     // apiUrl: 'https://dev-api.yunqueyi.com/',
     // webPageUrl: 'https://dev-phome.yunqueyi.com/',
-    // baseUrl: 'https://dev-sc.yunqueyi.com/',
+    baseUrl: 'https://dev-sc.yunqueyi.com/',
     // //hactiveUrl: 'https://dev-hactive.yunqueyi.com',
 
     // http://dev-hactive.yunqueyi.com/message_push/#/study-card
@@ -19,10 +19,12 @@ export const envConfig = {
     // webPageUrl: 'https://test1-phome.yunqueyi.com/'
     // hactiveUrl: 'https://dev-hactive.yunqueyi.com',
 
-    baseUrl: 'https://uat-sc.yunqueyi.com/',
+    // baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
     webPageUrl: 'https://uat-phome.yunqueyi.com/',
     hactiveUrl: 'https://uat-hactive.yunqueyi.com',
+    phomeDemain: 'https://dev-phome.yunqueyi.com',
+    fileUrl: 'https://dev-www.yunqueyi.com',
 
     // baseUrl: 'https://sc.yunqueyi.com/',
     // apiUrl: 'https://api.yunqueyi.com/',
@@ -35,23 +37,31 @@ export const envConfig = {
     apiUrl: 'https://dev-api.yunqueyi.com/',
     webPageUrl: 'https://dev-phome.yunqueyi.com/',
     hactiveUrl: 'https://dev-hactive.yunqueyi.com',
+    phomeDemain: 'https://dev-phome.yunqueyi.com',
+    fileUrl: 'https://dev-www.yunqueyi.com',
   },
   test: {
     baseUrl: 'https://test1-sc.yunqueyi.com/',
     apiUrl: 'https://test1-api.yunqueyi.com/',
     webPageUrl: 'https://test1-phome.yunqueyi.com/',
     hactiveUrl: 'https://test1-hactive.yunqueyi.com',
+    phomeDemain: 'https://test1-phome.yunqueyi.com',
+    fileUrl: 'https://test1-www.yunqueyi.com',
   },
   uat: {
     baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
     webPageUrl: 'https://uat-phome.yunqueyi.com/',
     hactiveUrl: 'https://uat-hactive.yunqueyi.com',
+    phomeDemain: 'https://uat-phome.yunqueyi.com',
+    fileUrl: 'https://uat-www.yunqueyi.com',
   },
   pro: {
     baseUrl: 'https://sc.yunqueyi.com/',
     apiUrl: 'https://api.yunqueyi.com/',
     webPageUrl: 'https://phome.yunqueyi.com/',
     hactiveUrl: 'https://hactive.yunqueyi.com',
+    phomeDemain: 'httpss://phome.yunqueyi.com',
+    fileUrl: 'https://www.yunqueyi.com',
   }
 }

src/utils/index.js

@@ -23,6 +23,12 @@ export function getHactiveUrl(url) {
   return getConfigByEnvType('hactiveUrl') + (url || '')
 }
 
+// 获取pdf文件地址
+export function getPdfFileUrl(path) {
+  let base = getConfigByEnvType('fileUrl');
+  return `${base}/proxyPdf${path}`;
+}
+
 // 根据不同环境，生成URL
 function getConfigByEnvType(urlType) {
   return envConfig[process.env.BUILD_ENV][urlType]
@@ -168,3 +174,16 @@ export function formatLeftTimeObj(time, hasZero = true) {
     s: hasZero ? formatNum(s) : s,
   }
 }
+
+export function preLoadImg(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve(img);
+    }
+    img.onerror = () => {
+      reject();
+    }
+    img.src = url;
+  })
+}

src/utils/mixins.js

@@ -110,12 +110,14 @@ module.exports = {
         // 通用GET请求
         GET(api, para, callback, str) {
             // debugger
-            para.token = para.token || this.token || ''
+            let token = para.token || this.token || this.$store.state.user.token || '';
+            para.token = token;
             let url = api + this.getUrlPara(para)
             return fetch({
                 url: getBaseUrl(url),
                 method: 'get',
-                data: para
+                data: para,
+                headers: { token }
             })
         },
 
@@ -144,11 +146,13 @@ module.exports = {
 
         // 通用POST请求
         POST(api, para, callback) {
-            para.token = para.token || this.token || '00175A13D70D4234822D90AC3C74202C'
+            let token = para.token || this.token || this.$store.state.user.token || '';
+            para.token = token;
             return fetch({
                 url: getBaseUrl(api),
                 method: 'post',
-                data: para
+                data: para,
+                headers: { token }
             })
         },
 

src/views/course-detail.vue

@@ -7,7 +7,36 @@
     <!-- 内容滚动 -->
     <div class="scroll-box">
       <div class="scroll-content">
-
+        <div class="course-info">
+          <div class="course-title">
+            <span class="level">
+              {{ course.typeStr }}
+            </span>{{ course.courseName }}
+          </div>
+          <div class="course-num">
+            <span>{{ course.joinNum }}</span>人已学 / <span>{{ course.favorNum }}</span>人收藏
+          </div>
+        </div>
+        <!-- tab栏 -->
+        <div class="tab-box">
+          <van-sticky :offset-top="videoH">
+            <div class="tab-inner">
+              <div
+                class="tab-item"
+                :class="{'tab-active': curtTabIdx === index}"
+                v-for="(tab, index) in tabs"
+                :key="index"
+                @click="curtTabIdx=index">
+                {{ tab.name }}
+              </div>
+              <div class="tab-line" :style="{left: `${tabLeft}px`}"></div>
+            </div>
+          </van-sticky>
+        </div>
+        <brief-intro v-show="curtTabIdx === 0" :doctor-list="doctors" :intro="course.intro" :harvest="harvest" />
+        <course-catalog v-show="curtTabIdx === 1" />
+        <course-ware v-show="curtTabIdx === 2" :url="pdfUrl" />
+        <course-comment v-show="curtTabIdx === 3" :list="qsList" />
       </div>
     </div>
     <!-- 打开、下载App -->
@@ -27,20 +56,60 @@
 
 <script>
 import PicaVideo from '@/components/course/pica-video';
+import BriefIntro from '@/components/course/brief-intro';
+import CourseCatalog from '@/components/course/course-catalog';
+import CourseWare from '@/components/course/course-ware';
+import CourseComment from '@/components/course/course-comment';
 import Loading from "@/components/common/common-loading";
+import { getPdfFileUrl, formatLeftTimeObj } from '@/utils';
 
 export default {
   components: {
     PicaVideo,
+    BriefIntro,
+    CourseCatalog,
+    CourseWare,
+    CourseComment,
     Loading
   },
   data() {
     return {
+      course: {}, // 课程
+      doctors: [], // 医生
+      harvest: [], // 学习收获
+      tabs: [
+        { name: '简介' },
+        { name: '目录' },
+        { name: '课件' },
+        { name: '讨论' },
+      ],
+      curtTabIdx: 1,
+      tabW: 0, // tab的宽度
+      videoH: 0, // 视频区高度
+      chapters: [], // 目录
+      curtLectureId: 0, // 当前播放课件id
+      pdfUrl: '', // 当前pdf
+      qsList: [], // 讨论列表
       showLoading: false,
     };
   },
+  computed: {
+    tabLeft() {
+      const num = this.curtTabIdx + 0.5;
+      return this.tabW * num;
+    }
+  },
   mounted() {
+    const { token, info } = this.$store.state.user;
+    if (token && !info.id) {
+      this.$store.dispatch('getUserInfo');
+    }
     this.getCourseInfo();
+    this.getCourseQas();
+    const { height } = this.$el.querySelector('.video-box').getBoundingClientRect();
+    const { width } = this.$el.querySelector('.tab-item').getBoundingClientRect();
+    this.videoH = height;
+    this.tabW = width;
     this.$refs.picaVideo.switchUrl({
       url: 'https://video.yunqueyi.com/TNB/002/01_01_APP_SD.mp4',
     });
@@ -52,7 +121,86 @@ export default {
       this.GET(`/contents/courses/${courseId}/pcCourseInfo`, { projectId }).then(res => {
         this.showLoading = false;
         if (res.code == "000000") {
-
+          const {
+            showFlag = 0, // 0可看，10该课程为付费课程-请去App查看，20可试看，激活/购买后才可查看
+            trySeeFlag = 0, // 1为试看
+            trySeeTime = 0, // 试看时间
+            courseHeader = {},
+            introduction = [],
+            directory: {
+              chapters = [], // 目录
+              lectureResourceList = [], // 课件
+              lastLecture = {}, // 最后观看记录
+            },
+          } = res.data;
+          let intro = '';
+          for (let item of introduction) {
+            if (item.type === 1) { // 医生
+              this.doctors = item.dataList || [];
+            }
+            if (item.type === 2) { // 课程简介
+              if (item.dataList && item.dataList[0]) {
+                intro = item.dataList[0]['intro'] || '';
+              }
+            }
+            if (item.type === 4) { // 学习收获
+              this.harvest = item.dataList || [];
+            }
+          }
+          this.course = { ...courseHeader, intro, showFlag, trySeeFlag, trySeeTime };
+          const [chaptersAll, curtLecture] = this.getAllChapters(chapters, lectureResourceList, lastLecture);
+          this.chapters = chaptersAll;
+          this.curtLectureId = curtLecture.lectureId;
+          this.pdfUrl = getPdfFileUrl(curtLecture.courseware.filePath);
+        } else {
+          this.$toast(res.message);
+        }
+      });
+    },
+    // 将课件挂在目录上，获取播放id
+    getAllChapters(chapters, resList, lastLecture) {
+      const lectureObj = {};
+      for (let item of resList) {
+        lectureObj[item.lectureId] = { ...item };
+      }
+      let count = 0;
+      let curtLecture = {};
+      let unfinished = false;
+      for (let chapter of chapters) {
+        for (let lecture of chapter.lectures) {
+          count += 1;
+          let lectureId = lecture.lectureId;
+          if (lectureObj[lectureId]) {
+            lecture.courseware = lectureObj[lectureId]
+          }
+          const num = count < 10 ? `0${count}` : count;
+          lecture.lectureNameText = `${num}.${lecture.lectureName}`;
+          lecture.statusText = lecture.progress === 0 ? '未开始' : (lecture.progress === 1 ? '已学习' : `已学${lecture.progress * 100}%`);
+          const totalTime = formatLeftTimeObj(lecture.totalTime);
+          const h = totalTime.h === '00' ? '' : `${totalTime.h}:`;
+          lecture.totalTimeText = `${h}${totalTime.f}:${totalTime.s}`;
+          if (lastLecture.lectureId) {
+            if (lastLecture.lectureId === lecture.lectureId) {
+              curtLecture = { ...lecture, lastTime: lastLecture.lastTime }
+            }
+          } else {
+            // 取第一个未完成的
+            if (lecture.progress < 1 && !unfinished) {
+              curtLecture = { ...lecture };
+              unfinished = true;
+            }
+          }
+        }
+      }
+      return [chapters, curtLecture];
+    },
+    getCourseQas() {
+      const { projectId = 797, courseId = 3 } = this.$route.query;
+      this.showLoading = true;
+      this.GET(`/contents/courses/v2/${courseId}/qas`, { projectId, pageNo: 1, pageSize: 10 }).then(res => {
+        this.showLoading = false;
+        if (res.code == "000000") {
+          this.qsList  = res.data.model && res.data.model.qaPostModel || [];
         } else {
           this.$toast(res.message);
         }
@@ -66,27 +214,98 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../style/mixin";
+<style lang="less" scoped>
 .course-detail{
   position: relative;
   height: 100%;
-  padding-top: px2rem(210px);
+  padding-top: 210px;
   box-sizing: border-box;
   .video-box{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
-    height: px2rem(210px);
+    height: 210px;
   }
   .scroll-box{
     height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
   }
   .scroll-content{
-    padding-bottom: px2rem(60px);
+    padding-bottom: 60px;
+  }
+  .course-info{
+    padding: 20px 15px;
+    border-bottom: 6px solid #F8F9FA;
+  }
+  .course-title{
+    line-height: 23px;
+    font-size: 18px;
+    font-weight: bold;
+    .level{
+      display: inline-block;
+      color: #fff;
+      font-weight: normal;
+      font-size: 12px;
+      background-color: #6A9FE9;
+      margin-right: 5px;
+      transform: translateY(-2px);
+      padding: 0 3px;
+      white-space: nowrap;
+      border-radius: 1px;
+    }
+  }
+  .course-num{
+    color: #676869;
+    font-size: 13px;
+    margin-top: 10px;
+    span{
+      color: #373839;
+    }
+  }
+  .tab-box{
+    height: 50px;
+  }
+  .tab-inner{
+    display: flex;
+    position: relative;
+    background-color: #fff;
+    &::after{
+      position: absolute;
+      content: "";
+      left: 0;
+      bottom: 0;
+      width: 200%;
+      height: 0;
+      border-bottom: 1px solid #F0F1F2;
+      transform: scale(0.5);
+      transform-origin: left center;
+    }
+  }
+  .tab-item{
+    color: #979899;
+    font-size: 15px;
+    width: 60px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+  .tab-active{
+    color: #373839;
+    font-weight: bold;
+  }
+  .tab-line{
+    position: absolute;
+    left: 30px;
+    bottom: 3px;
+    width: 10px;
+    height: 3px;
+    background-color: #449284;
+    border-radius: 1.5px;
+    transform: translate3d(-5px, 0, 0);
+    transition: left 0.3s;
   }
   .download-box{
     display: flex;
@@ -95,49 +314,49 @@ export default {
     left: 0;
     bottom: 0;
     width: 100%;
-    height: px2rem(60px);
+    height: 60px;
     background-color: #fff;
     img{
       display: block;
-      width: px2rem(40px);
-      height: px2rem(40px);
-      margin: px2rem(10px) px2rem(10px) 0 px2rem(15px);
+      width: 40px;
+      height: 40px;
+      margin: 10px 10px 0 15px;
     }
     .content{
       flex: 1;
       width: 50px;
-      padding-top: px2rem(10px);
+      padding-top: 10px;
     }
     .title{
-      font-size: px2rem(16px);
-      line-height: px2rem(22px);
+      font-size: 16px;
+      line-height: 22px;
     }
     .sub-title{
       color: #717171;
-      font-size: px2rem(12px);
-      line-height: px2rem(18px);
+      font-size: 12px;
+      line-height: 18px;
     }
     .btn-download{
       color: #449284;
       display: inline-block;
-      height: px2rem(30px);
-      line-height: px2rem(30px);
-      font-size: px2rem(14px);
-      padding: 0 px2rem(15px);
-      margin-right: px2rem(15px);
+      height: 30px;
+      line-height: 30px;
+      font-size: 14px;
+      padding: 0 15px;
+      margin-right: 15px;
       border: 1px solid #449284;
-      border-radius: px2rem(15px);
+      border-radius: 15px;
     }
     .btn-open{
       color: #fff;
       display: inline-block;
-      height: px2rem(30px);
-      line-height: px2rem(30px);
-      font-size: px2rem(14px);
-      padding: 0 px2rem(15px);
-      margin-right: px2rem(15px);
+      height: 30px;
+      line-height: 30px;
+      font-size: 14px;
+      padding: 0 15px;
+      margin-right: 15px;
       background-color: #449284;
-      border-radius: px2rem(15px);
+      border-radius: 15px;
     }
   }
 }

src/views/index copy.vue

@@ -23,7 +23,7 @@
           >
             <span>{{model.title}}</span>
           </li>
-        </ul>        
+        </ul>
         <ul class="left">
           <!-- <li
             v-for="(model, mIndex) in titleTestModelList"
@@ -73,7 +73,7 @@
           >
             <span>{{model.title}}</span>
           </li>
-        </ul>        
+        </ul>
       </section> -->
     </section>
 
@@ -362,71 +362,69 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../style/mixin";
-
+<style lang="less" scoped>
 .page-content {
-  padding-top: px2rem(74px);
+  padding-top: 74px;
   min-height: 100vh;
   .body {
     // min-height: 90vh;
     display: flex;
     flex-direction: row;
-    font-size: px2rem(14px);
+    font-size: 14px;
     color: #676869;
     &.body-pt {
-      padding-top: px2rem(40px);
+      padding-top: 40px;
     }
     .left {
-      width: px2rem(130px);
+      width: 130px;
       background: #fff;
       li {
         position: relative;
         display: block;
-        height: px2rem(60px);
-        line-height: px2rem(60px);
-        padding-left: px2rem(15px);
+        height: 60px;
+        line-height: 60px;
+        padding-left: 15px;
         &.active {
           color: #449284;
           background: #fff;
           &.active::before {
             position: absolute;
             left: 0;
-            top: px2rem(20px);
+            top: 20px;
             z-index: 1;
             content: "";
-            height: px2rem(20px);
-            width: px2rem(3px);
-            border-radius: px2rem(2px);
+            height: 20px;
+            width: 3px;
+            border-radius: 2px;
             background: #449284;
           }
         }
       }
       &.fixed {
         position: fixed;
-        top: px2rem(74px);
+        top: 74px;
         left: 0;
         bottom: 0;
-        right: px2rem(130px);
+        right: 130px;
         z-index: 1;
         background: #f8f9fa;
         &.top {
-          top: px2rem(114px);
+          top: 114px;
         }
       }
     }
     .right {
       flex: 1;
-      padding: 0 px2rem(15px) px2rem(30px);
+      padding: 0 15px 30px;
       .list-wrapper {
         .list {
           .title {
             display: inline-block;
-            // height: px2rem(35px);
-            padding: px2rem(6px) 0 px2rem(10px);
-            line-height: px2rem(1.2);
-            margin-top: px2rem(14px);
-            font-size: px2rem(15px);
+            // height: 35px;
+            padding: 6px 0 10px;
+            line-height: 1.2;
+            margin-top: 14px;
+            font-size: 15px;
             font-weight: 700;
           }
           .item {
@@ -437,19 +435,19 @@ export default {
               z-index: 1;
               display: flex;
               flex-direction: column;
-              // height: px2rem(55px);
-              padding: px2rem(12px) 0;
-              margin-bottom: px2rem(6px);
+              // height: 55px;
+              padding: 12px 0;
+              margin-bottom: 6px;
               justify-content: center;
               text-align: center;
-              border-radius: px2rem(4px);
+              border-radius: 4px;
               background: #f8f9fa;
               align-items: center;
               span {
                 display: inline-block;
-                // height: px2rem(20px);
-                line-height: px2rem(20px);
-                padding: 0 px2rem(20px);
+                // height: 20px;
+                line-height: 20px;
+                padding: 0 20px;
               }
               &.has-bind {
                 color: #449284;
@@ -459,11 +457,11 @@ export default {
                   top: 0;
                   right: 0;
                   z-index: 1;
-                  height: px2rem(15px);
-                  line-height: px2rem(15px);
-                  padding: 0 px2rem(4px);
-                  border-radius: 0px px2rem(4px) 0px px2rem(4px);
-                  font-size: px2rem(11px);
+                  height: 15px;
+                  line-height: 15px;
+                  padding: 0 4px;
+                  border-radius: 0px 4px 0px 4px;
+                  font-size: 11px;
                   color: #fff;
                   background: #449284;
                 }
@@ -475,12 +473,12 @@ export default {
                   top: 0;
                   right: 0;
                   z-index: 1;
-                  height: px2rem(15px);
-                  line-height: px2rem(15px);
-                  padding: 0 px2rem(4px);
-                  border-radius: 0px px2rem(4px) 0px px2rem(4px);
+                  height: 15px;
+                  line-height: 15px;
+                  padding: 0 4px;
+                  border-radius: 0px 4px 0px 4px;
                   opacity: 0.4;
-                  font-size: px2rem(11px);
+                  font-size: 11px;
                   background: rgba(0, 0, 0, 1);
                 }
               }
@@ -494,15 +492,15 @@ export default {
           justify-content: center;
           align-content: center;
           align-items: center;
-          margin-top: px2rem(30px);
-          // width: px2rem(50px);
-          // height: px2rem(50px);
+          margin-top: 30px;
+          // width: 50px;
+          // height: 50px;
           img {
-            width: px2rem(100px);
-            height: px2rem(100px);
+            width: 100px;
+            height: 100px;
           }
           span {
-            font-size: px2rem(12px);
+            font-size: 12px;
             color: #c7c8c9;
           }
         }
@@ -518,11 +516,11 @@ export default {
 .back-up-icon {
   position: fixed;
   z-index: 10;
-  bottom: px2rem(50px);
-  right: px2rem(15px);
+  bottom: 50px;
+  right: 15px;
   img {
-    width: px2rem(35px);
-    height: px2rem(35px);
+    width: 35px;
+    height: 35px;
   }
 }
 .fade-enter-active,

src/views/index.vue

@@ -364,96 +364,94 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../style/mixin";
-
+<style lang="less" scoped>
 .page-content {
-  padding-top: px2rem(74px);
+  padding-top: 74px;
   min-height: 100vh;
   .body {
     // min-height: 90vh;
     display: flex;
     flex-direction: row;
-    font-size: px2rem(14px);
+    font-size: 14px;
     color: #676869;
     &.body-pt {
-      padding-top: px2rem(40px);
+      padding-top: 40px;
     }
     .left {
-      width: px2rem(130px);
+      width: 130px;
       background: #fff;
       li {
         position: relative;
         display: block;
-        height: px2rem(60px);
-        line-height: px2rem(60px);
-        padding-left: px2rem(15px);
+        height: 60px;
+        line-height: 60px;
+        padding-left: 15px;
         &.active {
           color: #449284;
           background: #fff;
           &.active::before {
             position: absolute;
             left: 0;
-            top: px2rem(20px);
+            top: 20px;
             z-index: 1;
             content: "";
-            height: px2rem(20px);
-            width: px2rem(3px);
-            border-radius: px2rem(2px);
+            height: 20px;
+            width: 3px;
+            border-radius: 2px;
             background: #449284;
           }
         }
       }
       &.fixed {
         position: fixed;
-        top: px2rem(74px);
+        top: 74px;
         left: 0;
         bottom: 0;
-        right: px2rem(130px);
+        right: 130px;
         z-index: 1;
         background: #f8f9fa;
         &.top {
-          top: px2rem(114px);
+          top: 114px;
         }
       }
     }
     .right {
       flex: 1;
-      padding: 0 px2rem(15px) px2rem(30px);
+      padding: 0 15px 30px;
       .list-wrapper {
         .list {
           .title {
             display: inline-block;
-            // height: px2rem(35px);
-            padding: px2rem(6px) 0 px2rem(10px);
-            // line-height: px2rem(1.2);
-            margin-top: px2rem(14px);
-            font-size: px2rem(15px);
+            // height: 35px;
+            padding: 6px 0 10px;
+            // line-height: 1.2;
+            margin-top: 14px;
+            font-size: 15px;
             font-weight: 700;
             color: #373839;
           }
           .item {
             li {
-              min-height: px2rem(60px);
+              min-height: 60px;
               position: relative;
               top: 0;
               left: 0;
               z-index: 1;
               display: flex;
               flex-direction: column;
-              // height: px2rem(55px);
-              padding: px2rem(12px) 0;
-              margin-bottom: px2rem(6px);
+              // height: 55px;
+              padding: 12px 0;
+              margin-bottom: 6px;
               justify-content: center;
               text-align: center;
-              border-radius: px2rem(4px);
+              border-radius: 4px;
               background: #f8f9fa;
               align-items: center;
               span {
                 display: inline-block;
-                // height: px2rem(20px);
-                line-height: px2rem(20px);
-                padding: 0 px2rem(20px);
+                // height: 20px;
+                line-height: 20px;
+                padding: 0 20px;
               }
               &.has-bind {
                 color: #449284;
@@ -463,11 +461,11 @@ export default {
                   top: 0;
                   right: 0;
                   z-index: 1;
-                  height: px2rem(15px);
-                  line-height: px2rem(15px);
-                  padding: 0 px2rem(4px);
-                  border-radius: 0px px2rem(4px) 0px px2rem(4px);
-                  font-size: px2rem(11px);
+                  height: 15px;
+                  line-height: 15px;
+                  padding: 0 4px;
+                  border-radius: 0px 4px 0px 4px;
+                  font-size: 11px;
                   color: #fff;
                   background: #449284;
                 }
@@ -479,12 +477,12 @@ export default {
                   top: 0;
                   right: 0;
                   z-index: 1;
-                  height: px2rem(15px);
-                  line-height: px2rem(15px);
-                  padding: 0 px2rem(4px);
-                  border-radius: 0px px2rem(4px) 0px px2rem(4px);
+                  height: 15px;
+                  line-height: 15px;
+                  padding: 0 4px;
+                  border-radius: 0px 4px 0px 4px;
                   opacity: 0.4;
-                  font-size: px2rem(11px);
+                  font-size: 11px;
                   background: rgba(0, 0, 0, 1);
                 }
               }
@@ -498,15 +496,15 @@ export default {
           justify-content: center;
           align-content: center;
           align-items: center;
-          margin-top: px2rem(60px);
-          // width: px2rem(50px);
-          // height: px2rem(50px);
+          margin-top: 60px;
+          // width: 50px;
+          // height: 50px;
           img {
-            width: px2rem(100px);
-            height: px2rem(100px);
+            width: 100px;
+            height: 100px;
           }
           span {
-            font-size: px2rem(12px);
+            font-size: 12px;
             color: #c7c8c9;
           }
         }
@@ -522,11 +520,11 @@ export default {
 .back-up-icon {
   position: fixed;
   z-index: 10;
-  bottom: px2rem(50px);
-  right: px2rem(15px);
+  bottom: 50px;
+  right: 15px;
   img {
-    width: px2rem(35px);
-    height: px2rem(35px);
+    width: 35px;
+    height: 35px;
   }
 }
 .fade-enter-active,

src/views/merge-detail copy.vue

@@ -27,7 +27,7 @@
       <div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard">
       <!-- <div class="sk-btn-cover-new" @click="continueStudy()" > -->
         <span :class="{'android': isAndroid}">继续学习</span>
-      </div>      
+      </div>
       <!-- 项目标题 -->
       <CommonDescription
         :projectName="project.projectName"
@@ -141,7 +141,7 @@
       cancleBtnText="我知道了"
       :isShowDialog="isShowIOSDownloadDialog"
       @handlerAction="goBack"
-    />    
+    />
   </div>
 </template>
 <script>
@@ -305,7 +305,7 @@ export default {
       // 如果是iOS系统并且版本小于344，则提示升级
       if(__isIOS && appVersionNum < 344) {
         _this.isShowIOSDownloadDialog = true;
-      }     
+      }
       _this.setUserInfo(param);
       _this.checkToken();
       _this.getProjectInfoById();
@@ -549,7 +549,7 @@ export default {
           seqNo: 1
         }
       ];
-      this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();      
+      this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
       rocNative.dispatchEventByModuleCode({
         modeCode: "M200",
         jsonString: paramList
@@ -736,7 +736,7 @@ export default {
         param.trySeeFlag = 0;
       } else {
         param.trySeeFlag = 1;
-      }      
+      }
       console.log('getProjectInfoById', param);
       _this.showLoading = true;
       this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
@@ -970,8 +970,8 @@ export default {
       if(this.continueStudyType == 1) {
         this.gotoExamNew();
       } else {
-        this.gotoCourseNew();        
-      }      
+        this.gotoCourseNew();
+      }
     },
 
     // 跳转到考试
@@ -1011,8 +1011,8 @@ export default {
           // message: '激活/购买后可学习完整课程',
           message: '升级最新版本可试看课程',
           confirmButtonText: '我知道了',
-        }).then(res => { 
-          
+        }).then(res => {
+
         })
         return;
       }
@@ -1070,88 +1070,87 @@ export default {
     goBack() {
       this.isShowIOSDownloadDialog = false;
       rocNative.goBack();
-    }   
+    }
 
 
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../style/mixin";
+<style lang="less" scoped>
 .page-container-merge {
   .nav-top .nav-title {
-    height: px2rem(0px);
-    // padding: px2rem(18px);
+    height: 0px;
+    // padding: 18px;
   }
   .banner-img {
     display: inherit;
-    width: px2rem(375px);
-    height: px2rem(210px);
+    width: 375px;
+    height: 210px;
     &-1 {
       position: absolute;
       left: 0;
-      top: px2rem(180px);
-      width: px2rem(76px);
-      height: px2rem(30px);
+      top: 180px;
+      width: 76px;
+      height: 30px;
     }
     &-5 {
       position: absolute;
       left: 0;
-      top: px2rem(180px);
-      width: px2rem(76px);
-      height: px2rem(30px);
+      top: 180px;
+      width: 76px;
+      height: 30px;
     }
     &-10 {
       position: absolute;
       left: 0;
-      top: px2rem(180px);
-      width: px2rem(76px);
-      height: px2rem(30px);
+      top: 180px;
+      width: 76px;
+      height: 30px;
     }
   }
   .list-container {
-    // margin-bottom: px2rem(40px);
+    // margin-bottom: 40px;
     .sk-btn-cover-new {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
-      height: px2rem(210px);
+      height: 210px;
       z-index: 100;
       text-align: center;
       // background: #fff;
-      font-size: px2rem(13px);
+      font-size: 13px;
       // border-radius: 50%;
       background: rgba(51, 51, 51, 0.8);
       span {
         display: inline-block;
-        margin-top: px2rem(82px);
-        width: px2rem(100px);
-        height: px2rem(36px);
-        line-height: px2rem(36px);
-        font-size: px2rem(15px);
+        margin-top: 82px;
+        width: 100px;
+        height: 36px;
+        line-height: 36px;
+        font-size: 15px;
         font-weight: 700;
-        border-radius: px2rem(20px);
+        border-radius: 20px;
         color: #fff;
         background: #449284;
         &.android {
-          padding-top: px2rem(2px);
+          padding-top: 2px;
         }
       }
-    }    
+    }
   }
   .intro-catalogue-container {
     .title {
-      height: px2rem(50px);
-      line-height: px2rem(30px);
-      padding: 0 px2rem(15px);
+      height: 50px;
+      line-height: 30px;
+      padding: 0 15px;
       border-bottom: 1px solid #f0f1f2;
       span {
         display: inline-block;
-        line-height: px2rem(15px);
-        font-size: px2rem(15px);
+        line-height: 15px;
+        font-size: 15px;
         color: #979899;
-        padding-right: px2rem(35px);
+        padding-right: 35px;
       }
       span.focus {
         position: relative;
@@ -1160,19 +1159,19 @@ export default {
       span.focus:after {
         content: "";
         position: absolute;
-        left: px2rem(9px);
-        bottom: px2rem(-14px);
+        left: 9px;
+        bottom: -14px;
         background: #449284;
-        // border-bottom: px2rem(1px) solid #449284;
-        width: px2rem(10px);
-        height: px2rem(3px);
-        border-radius: px2rem(3px);
+        // border-bottom: 1px solid #449284;
+        width: 10px;
+        height: 3px;
+        border-radius: 3px;
       }
     }
     .title.fixed-title-1 {
       position: fixed;
       left: 0;
-      top: px2rem(60px);
+      top: 60px;
       background: #fff;
       width: 100%;
       z-index: 999;
@@ -1180,40 +1179,40 @@ export default {
     .title.fixed-title-2 {
       position: fixed;
       left: 0;
-      top: px2rem(0px);
+      top: 0px;
       background: #fff;
       width: 100%;
       z-index: 999;
     }
     .catalogue-content {
-      padding: 0 px2rem(15px);
+      padding: 0 15px;
       .catalogue-title {
         // display: flex;
         // flex-direction: row;
         // align-items: center;
         // align-content: center;
-        margin-top: px2rem(5px);
-        // margin-bottom: px2rem(16px);
+        margin-top: 5px;
+        // margin-bottom: 16px;
         .c-title {
-          font-size: px2rem(18px);
+          font-size: 18px;
           color: #373839;
           font-weight: 700;
         }
         .c-sub {
-          margin-left: px2rem(-6px);
-          font-size: px2rem(12px);
+          margin-left: -6px;
+          font-size: 12px;
           color: #979899;
         }
       }
     }
     .fixed-flag-height {
-      height: px2rem(50px);
+      height: 50px;
     }
   }
 }
 .no-more-bottom {
   position: relative;
   width: 100%;
-  height: px2rem(40px);
+  height: 40px;
 }
 </style>

src/views/merge-detail.vue

@@ -27,7 +27,7 @@
       <div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard">
       <!-- <div class="sk-btn-cover-new" @click="continueStudy()" > -->
         <span :class="{'android': isAndroid}">继续学习</span>
-      </div>      
+      </div>
       <!-- 项目标题 -->
       <CommonDescription
         :projectName="project.projectName"
@@ -141,7 +141,7 @@
       cancleBtnText="我知道了"
       :isShowDialog="isShowIOSDownloadDialog"
       @handlerAction="goBack"
-    />    
+    />
   </div>
 </template>
 <script>
@@ -308,7 +308,7 @@ export default {
       // 如果是iOS系统并且版本小于344，则提示升级
       if(__isIOS && appVersionNum < 344) {
         _this.isShowIOSDownloadDialog = true;
-      }     
+      }
       _this.setUserInfo(param);
       _this.checkToken();
       _this.getProjectInfoById();
@@ -552,7 +552,7 @@ export default {
           seqNo: 1
         }
       ];
-      this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();      
+      this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
       rocNative.dispatchEventByModuleCode({
         modeCode: "M200",
         jsonString: paramList
@@ -739,7 +739,7 @@ export default {
         param.trySeeFlag = 0;
       } else {
         param.trySeeFlag = 1;
-      }      
+      }
       console.log('getProjectInfoById', param);
       _this.showLoading = true;
       this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
@@ -974,8 +974,8 @@ export default {
       if(this.continueStudyType == 1) {
         this.gotoExamNew();
       } else {
-        this.gotoCourseNew();        
-      }      
+        this.gotoCourseNew();
+      }
     },
 
     // 跳转到考试
@@ -1015,8 +1015,8 @@ export default {
           // message: '激活/购买后可学习完整课程',
           message: '升级最新版本可试看课程',
           confirmButtonText: '我知道了',
-        }).then(res => { 
-          
+        }).then(res => {
+
         })
         return;
       }
@@ -1074,88 +1074,87 @@ export default {
     goBack() {
       this.isShowIOSDownloadDialog = false;
       rocNative.goBack();
-    }   
+    }
 
 
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../style/mixin";
+<style lang="less" scoped>
 .page-container-merge {
   .nav-top .nav-title {
-    height: px2rem(0px);
-    // padding: px2rem(18px);
+    height: 0px;
+    // padding: 18px;
   }
   .banner-img {
     display: inherit;
-    width: px2rem(375px);
-    height: px2rem(210px);
+    width: 375px;
+    height: 210px;
     &-1 {
       position: absolute;
       left: 0;
-      top: px2rem(180px);
-      width: px2rem(76px);
-      height: px2rem(30px);
+      top: 180px;
+      width: 76px;
+      height: 30px;
     }
     &-5 {
       position: absolute;
       left: 0;
-      top: px2rem(180px);
-      width: px2rem(76px);
-      height: px2rem(30px);
+      top: 180px;
+      width: 76px;
+      height: 30px;
     }
     &-10 {
       position: absolute;
       left: 0;
-      top: px2rem(180px);
-      width: px2rem(76px);
-      height: px2rem(30px);
+      top: 180px;
+      width: 76px;
+      height: 30px;
     }
   }
   .list-container {
-    // margin-bottom: px2rem(40px);
+    // margin-bottom: 40px;
     .sk-btn-cover-new {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
-      height: px2rem(210px);
+      height: 210px;
       z-index: 100;
       text-align: center;
       // background: #fff;
-      font-size: px2rem(13px);
+      font-size: 13px;
       // border-radius: 50%;
       background: rgba(51, 51, 51, 0.8);
       span {
         display: inline-block;
-        margin-top: px2rem(82px);
-        width: px2rem(100px);
-        height: px2rem(36px);
-        line-height: px2rem(36px);
-        font-size: px2rem(15px);
+        margin-top: 82px;
+        width: 100px;
+        height: 36px;
+        line-height: 36px;
+        font-size: 15px;
         font-weight: 700;
-        border-radius: px2rem(20px);
+        border-radius: 20px;
         color: #fff;
         background: #449284;
         &.android {
-          padding-top: px2rem(2px);
+          padding-top: 2px;
         }
       }
-    }    
+    }
   }
   .intro-catalogue-container {
     .title {
-      height: px2rem(50px);
-      line-height: px2rem(30px);
-      padding: 0 px2rem(15px);
+      height: 50px;
+      line-height: 30px;
+      padding: 0 15px;
       border-bottom: 1px solid #f0f1f2;
       span {
         display: inline-block;
-        line-height: px2rem(15px);
-        font-size: px2rem(15px);
+        line-height: 15px;
+        font-size: 15px;
         color: #979899;
-        padding-right: px2rem(35px);
+        padding-right: 35px;
       }
       span.focus {
         position: relative;
@@ -1164,19 +1163,19 @@ export default {
       span.focus:after {
         content: "";
         position: absolute;
-        left: px2rem(9px);
-        bottom: px2rem(-14px);
+        left: 9px;
+        bottom: -14px;
         background: #449284;
-        // border-bottom: px2rem(1px) solid #449284;
-        width: px2rem(10px);
-        height: px2rem(3px);
-        border-radius: px2rem(3px);
+        // border-bottom: 1px solid #449284;
+        width: 10px;
+        height: 3px;
+        border-radius: 3px;
       }
     }
     .title.fixed-title-1 {
       position: fixed;
       left: 0;
-      top: px2rem(60px);
+      top: 60px;
       background: #fff;
       width: 100%;
       z-index: 999;
@@ -1184,40 +1183,40 @@ export default {
     .title.fixed-title-2 {
       position: fixed;
       left: 0;
-      top: px2rem(0px);
+      top: 0px;
       background: #fff;
       width: 100%;
       z-index: 999;
     }
     .catalogue-content {
-      padding: 0 px2rem(15px);
+      padding: 0 15px;
       .catalogue-title {
         // display: flex;
         // flex-direction: row;
         // align-items: center;
         // align-content: center;
-        margin-top: px2rem(5px);
-        // margin-bottom: px2rem(16px);
+        margin-top: 5px;
+        // margin-bottom: 16px;
         .c-title {
-          font-size: px2rem(18px);
+          font-size: 18px;
           color: #373839;
           font-weight: 700;
         }
         .c-sub {
-          margin-left: px2rem(-6px);
-          font-size: px2rem(12px);
+          margin-left: -6px;
+          font-size: 12px;
           color: #979899;
         }
       }
     }
     .fixed-flag-height {
-      height: px2rem(50px);
+      height: 50px;
     }
   }
 }
 .no-more-bottom {
   position: relative;
   width: 100%;
-  height: px2rem(40px);
+  height: 40px;
 }
 </style>

src/views/test-components.vue

@@ -63,13 +63,12 @@ export default {
           confirmButtonText: '我知道了',
         }).then(res => {
 
-        })      
+        })
     }
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "../style/mixin";
+<style lang="less" scoped>
 .test-container {
   // background: rgba($color: #000000, $alpha: 0.8);
 }