样式主题调整

assets/css/utils.scss

@@ -0,0 +1,22 @@
+/* mixin混入 */
+@use 'sass:meta'; // 注意这一句不要忘了
+
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
+@mixin triangle($width, $rest...) {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  border: $width solid transparent;
+  @each $key, $color in meta.keywords($rest) {
+    border-#{$key}-color: $color;
+  }
+}

assets/themes/themeMixin.scss

@@ -1,7 +1,7 @@
 @import './themeVariable.scss';
 
 $theme-map: null;
-@mixin themify($themes: $themes) {
+@mixin useTheme($themes: $themes) {
   @each $theme-name, $map in $themes {
     // & 表示父级元素
     // !global 表示覆盖原来的
@@ -16,13 +16,13 @@ $theme-map: null;
           )
         ) !global;
       }
-      // 表示包含 下面函数 themed()
+      // 表示包含 下面函数 fetch()
       @content;
       $theme-map: null !global;
     }
   }
 }
 
-@function themed($key) {
+@function fetch($key) {
   @return map-get($theme-map, $key);
 }

components/LdmLogin/index.vue

@@ -141,149 +141,149 @@ export default {
 <style scoped lang="scss">
 @media screen and (min-width: 768px) {
   .wrapper {
-    height: 100vh;
+    @include useTheme() {
+      height: 100vh;
 
-    .block {
-      position: relative;
-      width: 532px;
-      background: linear-gradient(180deg, #d7dbe6, #ffffff);
-      border-radius: 45px;
-
-      .close {
-        position: absolute;
-        right: 16px;
-        top: 16px;
-        width: 24px;
-        height: 24px;
-        background: url(https://static.caimei365.com/www/authentic/h5/icon-close.png)
-          center no-repeat;
-        background-size: 24px 24px;
-        cursor: pointer;
-      }
-
-      .logo {
-        width: 294px;
-        height: 57px;
-        margin: 98px 0 82px;
-      }
-
-      .form-item {
+      .block {
         position: relative;
-        width: 464px;
+        width: 532px;
+        background: linear-gradient(180deg, #d7dbe6, #ffffff);
+        border-radius: 45px;
 
-        input {
-          width: 464px;
-          height: 50px;
-          display: block;
-          padding: 16px 24px;
-          font-size: 14px;
-          border: 1px solid #000000;
-          box-sizing: border-box;
-          background: transparent;
-          font-size: 19px;
+        .close {
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          width: 24px;
+          height: 24px;
+          background: url(https://static.caimei365.com/www/authentic/h5/icon-close.png)
+            center no-repeat;
+          background-size: 24px 24px;
+          cursor: pointer;
         }
 
-        .code {
-          padding-right: 220px;
+        .logo {
+          width: 294px;
+          height: 57px;
+          margin: 98px 0 82px;
         }
 
-        .send {
-          position: absolute;
-          right: 18px;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 16px;
-          @include themify($themes) {
-            color: themed('color');
+        .form-item {
+          position: relative;
+          width: 464px;
+
+          input {
+            width: 464px;
+            height: 50px;
+            display: block;
+            padding: 16px 24px;
+            font-size: 14px;
+            border: 1px solid #000000;
+            box-sizing: border-box;
+            background: transparent;
+            font-size: 19px;
           }
+
+          .code {
+            padding-right: 220px;
+          }
+
+          .send {
+            position: absolute;
+            right: 18px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 16px;
+            color: fetch('color');
+            cursor: pointer;
+          }
+        }
+        .submit {
+          height: 58px;
+          margin: 0 auto;
+          background: #000;
+          font-size: 16px;
+          color: #fff;
+          text-align: center;
+          line-height: 58px;
           cursor: pointer;
+          margin-top: 39px;
+          margin-bottom: 59px;
         }
       }
-      .submit {
-        height: 58px;
-        margin: 0 auto;
-        background: #000;
-        font-size: 16px;
-        color: #fff;
-        text-align: center;
-        line-height: 58px;
-        cursor: pointer;
-        margin-top: 39px;
-        margin-bottom: 59px;
-      }
     }
   }
 }
 @media screen and (max-width: 768px) {
   .wrapper {
-    height: 100vh;
+    @include useTheme() {
+      height: 100vh;
 
-    .block {
-      position: relative;
-      width: 76vw;
-      background: linear-gradient(180deg, #d7dbe6, #ffffff);
-      border-radius: 4.5vw;
-
-      .close {
-        position: absolute;
-        right: 2.4vw;
-        top: 2.4vw;
-        width: 5.6vw;
-        height: 5.6vw;
-        background: url(https://static.caimei365.com/www/authentic/h5/icon-close.png)
-          center no-repeat;
-        background-size: 4.8vw 4.8vw;
-        cursor: pointer;
-      }
+      .block {
+        position: relative;
+        width: 76vw;
+        background: linear-gradient(180deg, #d7dbe6, #ffffff);
+        border-radius: 4.5vw;
 
-      .logo {
-        width: 42vw;
-        height: 8.2vw;
-        margin: 14vw 0 11.6vw;
-      }
+        .close {
+          position: absolute;
+          right: 2.4vw;
+          top: 2.4vw;
+          width: 5.6vw;
+          height: 5.6vw;
+          background: url(https://static.caimei365.com/www/authentic/h5/icon-close.png)
+            center no-repeat;
+          background-size: 4.8vw 4.8vw;
+          cursor: pointer;
+        }
 
-      .form-item {
-        position: relative;
-        width: 66.1vw;
+        .logo {
+          width: 42vw;
+          height: 8.2vw;
+          margin: 14vw 0 11.6vw;
+        }
 
-        input {
+        .form-item {
+          position: relative;
           width: 66.1vw;
-          height: 7.1vw;
-          display: block;
-          padding: 2.2vw 3.4vw;
-          font-size: 2.7vw;
-          border: 0.1vw solid #000;
-          background: transparent;
-          box-sizing: border-box;
-          font-size: 2.7vw;
-        }
 
-        .code {
-          padding-right: 30vw;
+          input {
+            width: 66.1vw;
+            height: 7.1vw;
+            display: block;
+            padding: 2.2vw 3.4vw;
+            font-size: 2.7vw;
+            border: 0.1vw solid #000;
+            background: transparent;
+            box-sizing: border-box;
+            font-size: 2.7vw;
+          }
+
+          .code {
+            padding-right: 30vw;
+          }
+          .send {
+            position: absolute;
+            right: 3vw;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 3.2vw;
+            color: fetch('color');
+            cursor: pointer;
+          }
         }
-        .send {
-          position: absolute;
-          right: 3vw;
-          top: 50%;
-          transform: translateY(-50%);
+        .submit {
+          height: 8.2vw;
+          margin: 0 auto;
+          background: #000;
           font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
+          color: #fff;
+          text-align: center;
+          line-height: 8.2vw;
+          margin-top: 5.6vw;
+          margin-bottom: 8.4vw;
         }
       }
-      .submit {
-        height: 8.2vw;
-        margin: 0 auto;
-        background: #000;
-        font-size: 3.2vw;
-        color: #fff;
-        text-align: center;
-        line-height: 8.2vw;
-        margin-top: 5.6vw;
-        margin-bottom: 8.4vw;
-      }
     }
   }
 }

components/RossSelectGroup/index.vue

@@ -202,45 +202,45 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .select-group {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 12px;
-    color: #282828;
+    @include useTheme() {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 12px;
+      color: #282828;
 
-    .select-group__item {
-      cursor: pointer;
-      position: relative;
-      width: 160px;
-      text-align: center;
-
-      .info {
-        position: absolute;
-        left: 0;
-        top: 0;
+      .select-group__item {
+        cursor: pointer;
+        position: relative;
         width: 160px;
-        z-index: 1;
-        line-height: 40px;
-      }
+        text-align: center;
 
-      .icon {
-        color: #999;
-      }
+        .info {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 160px;
+          z-index: 1;
+          line-height: 40px;
+        }
+
+        .icon {
+          color: #999;
+        }
 
-      .el-icon-circle-close {
-        &:hover {
-          @include themify($themes) {
-            color: themed('color');
+        .el-icon-circle-close {
+          &:hover {
+            color: fetch('color');
           }
         }
-      }
 
-      .el-select {
-        position: absolute;
-        left: 30px;
-        top: 0;
-        width: 160px;
-        opacity: 0;
+        .el-select {
+          position: absolute;
+          left: 30px;
+          top: 0;
+          width: 160px;
+          opacity: 0;
+        }
       }
     }
   }

components/SimpleCenterCover/index.vue

@@ -21,11 +21,11 @@ export default {}
 
 <style scoped lang="scss">
 .area {
-  @include themify($themes) {
-    background: themed('cover-color');
+  @include useTheme() {
+    width: 100%;
+    height: 100%;
+    background: fetch('cover-color');
   }
-  width: 100%;
-  height: 100%;
 }
 
 .circles {

components/SimpleDialog/index.vue

@@ -90,78 +90,78 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .simple-dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10001;
-    background: rgba(0, 0, 0, 0.39);
-
-    .simple-dialog__container {
-      position: relative;
-      width: 400px;
-      background: #fff;
-
-      .simple-dialog__colse {
-        width: 36px;
-        height: 36px;
-        font-size: 26px;
-        position: absolute;
-        top: 8px;
-        right: 12px;
-        text-align: center;
-        line-height: 36px;
-        color: #c2c2c2;
-        cursor: pointer;
-      }
-
-      .simple-dialog__title {
-        padding: 12px 24px;
-        border-bottom: 1px solid #c2c2c2;
-        .simple-dialog__title__text {
-          font-size: 18px;
-          color: #282828;
+    @include useTheme() {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100vh;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10001;
+      background: rgba(0, 0, 0, 0.39);
+
+      .simple-dialog__container {
+        position: relative;
+        width: 400px;
+        background: #fff;
+
+        .simple-dialog__colse {
+          width: 36px;
+          height: 36px;
+          font-size: 26px;
+          position: absolute;
+          top: 8px;
+          right: 12px;
+          text-align: center;
+          line-height: 36px;
+          color: #c2c2c2;
+          cursor: pointer;
         }
-      }
-
-      .simple-dialog__content {
-        padding: 24px 24px;
 
-        .simple-dialog__content__text {
-          font-size: 16px;
-          color: #282828;
+        .simple-dialog__title {
+          padding: 12px 24px;
+          border-bottom: 1px solid #c2c2c2;
+          .simple-dialog__title__text {
+            font-size: 18px;
+            color: #282828;
+          }
         }
-      }
 
-      .simple-dialog__footer {
-        padding: 0 24px 24px;
+        .simple-dialog__content {
+          padding: 24px 24px;
 
-        .simple-dialog__btn {
-          width: 100%;
-          height: 40px;
-          text-align: center;
-          line-height: 40px;
-          font-size: 16px;
-          border-radius: 4px;
-          cursor: pointer;
+          .simple-dialog__content__text {
+            font-size: 16px;
+            color: #282828;
+          }
         }
 
-        .simple-dialog__confirm {
-          color: #fff;
-          @include themify($themes) {
-            background: themed('color');
+        .simple-dialog__footer {
+          padding: 0 24px 24px;
+
+          .simple-dialog__btn {
+            width: 100%;
+            height: 40px;
+            text-align: center;
+            line-height: 40px;
+            font-size: 16px;
+            border-radius: 4px;
+            cursor: pointer;
+          }
+
+          .simple-dialog__confirm {
+            color: #fff;
+            background: fetch('color');
           }
-        }
 
-        .simple-dialog__cancel {
-          color: #666666;
-          box-sizing: border-box;
-          border: 1px solid #c2c2c2;
-          margin-top: 16px;
+          .simple-dialog__cancel {
+            color: #666666;
+            box-sizing: border-box;
+            border: 1px solid #c2c2c2;
+            margin-top: 16px;
+          }
         }
       }
     }
@@ -170,77 +170,77 @@ export default {
 
 @media screen and (max-width: 768px) {
   .simple-dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10001;
-    background: rgba(0, 0, 0, 0.39);
-
-    .simple-dialog__container {
-      position: relative;
-      width: 76vw;
-      min-height: 20vw;
-      background: #fff;
-
-      .simple-dialog__colse {
-        width: 6.4vw;
-        height: 6.4vw;
-        font-size: 5vw;
-        position: absolute;
-        top: 3vw;
-        right: 3vw;
-        text-align: center;
-        line-height: 6.4vw;
-        color: #c2c2c2;
-      }
+    @include useTheme() {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100vh;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10001;
+      background: rgba(0, 0, 0, 0.39);
+
+      .simple-dialog__container {
+        position: relative;
+        width: 76vw;
+        min-height: 20vw;
+        background: #fff;
+
+        .simple-dialog__colse {
+          width: 6.4vw;
+          height: 6.4vw;
+          font-size: 5vw;
+          position: absolute;
+          top: 3vw;
+          right: 3vw;
+          text-align: center;
+          line-height: 6.4vw;
+          color: #c2c2c2;
+        }
 
-      .simple-dialog__title {
-        padding: 3vw 4.8vw;
-        border-bottom: 1px solid #c2c2c2;
-        .simple-dialog__title__text {
-          font-size: 4.2vw;
-          color: #282828;
+        .simple-dialog__title {
+          padding: 3vw 4.8vw;
+          border-bottom: 1px solid #c2c2c2;
+          .simple-dialog__title__text {
+            font-size: 4.2vw;
+            color: #282828;
+          }
         }
-      }
 
-      .simple-dialog__content {
-        padding: 3vw 4.8vw;
+        .simple-dialog__content {
+          padding: 3vw 4.8vw;
 
-        .simple-dialog__content__text {
-          font-size: 3.6vw;
-          color: #282828;
+          .simple-dialog__content__text {
+            font-size: 3.6vw;
+            color: #282828;
+          }
         }
-      }
 
-      .simple-dialog__footer {
-        padding: 0 24px 24px;
+        .simple-dialog__footer {
+          padding: 0 24px 24px;
 
-        .simple-dialog__btn {
-          width: 100%;
-          height: 8.8vw;
-          text-align: center;
-          line-height: 8.8vw;
-          font-size: 3.6vw;
-          border-radius: 0.4vw;
-        }
+          .simple-dialog__btn {
+            width: 100%;
+            height: 8.8vw;
+            text-align: center;
+            line-height: 8.8vw;
+            font-size: 3.6vw;
+            border-radius: 0.4vw;
+          }
 
-        .simple-dialog__confirm {
-          color: #fff;
-          @include themify($themes) {
-            background: themed('color');
+          .simple-dialog__confirm {
+            color: #fff;
+            background: fetch('color');
           }
-        }
 
-        .simple-dialog__cancel {
-          color: #666666;
-          box-sizing: border-box;
-          border: 1px solid #c2c2c2;
-          margin-top: 2.8vw;
+          .simple-dialog__cancel {
+            color: #666666;
+            box-sizing: border-box;
+            border: 1px solid #c2c2c2;
+            margin-top: 2.8vw;
+          }
         }
       }
     }

components/SimpleLogin/index.vue

@@ -316,110 +316,103 @@ export default {
 
 <style scoped lang="scss">
 @media screen and (min-width: 768px) {
-  .van-overlay {
-    z-index: 20;
-  }
-
-  .wrapper {
-    height: 100vh;
-
-    .block {
-      position: relative;
-      width: 400px;
-      background: #fff;
-
-      .close {
-        position: absolute;
-        right: 16px;
-        top: 16px;
-        width: 24px;
-        height: 24px;
-        background: url(~assets/theme-images/common/pc-icon-close.png) center
-          no-repeat;
-        background-size: 24px 24px;
-        cursor: pointer;
-      }
-
-      .title {
-        font-size: 24px;
-        color: #101010;
+  .simple-login {
+    @include useTheme() {
+      .van-overlay {
+        z-index: 20;
       }
 
-      .form-item {
-        position: relative;
-        width: 326px;
-
-        input {
-          width: 326px;
-          display: block;
-          padding: 14px 16px;
-          font-size: 14px;
-          border: 1px solid #d8d8d8;
-          box-sizing: border-box;
+      .wrapper {
+        height: 100vh;
+
+        .block {
+          position: relative;
+          width: 400px;
+          background: #fff;
+
+          .close {
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            width: 24px;
+            height: 24px;
+            background: url(~assets/theme-images/common/pc-icon-close.png)
+              center no-repeat;
+            background-size: 24px 24px;
+            cursor: pointer;
+          }
 
-          &.code {
-            width: 225px;
+          .title {
+            font-size: 24px;
+            color: #101010;
           }
-        }
-        .send {
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 16px;
-          cursor: pointer;
-          @include themify($themes) {
-            color: themed('color');
+
+          .form-item {
+            position: relative;
+            width: 326px;
+
+            input {
+              width: 326px;
+              display: block;
+              padding: 14px 16px;
+              font-size: 14px;
+              border: 1px solid #d8d8d8;
+              box-sizing: border-box;
+
+              &.code {
+                width: 225px;
+              }
+            }
+            .send {
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              font-size: 16px;
+              cursor: pointer;
+              color: fetch('color');
+            }
           }
-        }
-      }
 
-      .control {
-        font-size: 14px;
+          .control {
+            font-size: 14px;
 
-        .forget,
-        .regist {
-          cursor: pointer;
-        }
-        .forget {
-          color: #666;
+            .forget,
+            .regist {
+              cursor: pointer;
+            }
+            .forget {
+              color: #666;
 
-          &:hover {
-            @include themify($themes) {
-              color: themed('color');
+              &:hover {
+                color: fetch('color');
+              }
+            }
+            .regist {
+              color: fetch('color');
             }
           }
-        }
-        .regist {
-          @include themify($themes) {
-            color: themed('color');
-          }
-        }
-      }
-
-      .submit {
-        width: 326px;
-        height: 46px;
-        font-size: 16px;
-        color: #fff;
-        text-align: center;
-        line-height: 46px;
-        transition: all 0.4s;
-        cursor: pointer;
-        border-radius: 4px;
-
-        &.disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
 
-        @include themify($themes) {
-          background: themed('color');
-        }
+          .submit {
+            width: 326px;
+            height: 46px;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            line-height: 46px;
+            transition: all 0.4s;
+            cursor: pointer;
+            border-radius: 4px;
+
+            &.disabled {
+              opacity: 0.5;
+              cursor: not-allowed;
+            }
+            background: fetch('color');
 
-        &:hover {
-          @include themify($themes) {
-            background: themed('hover-color');
+            &:hover {
+              background: fetch('hover-color');
+            }
           }
         }
       }
@@ -427,103 +420,99 @@ export default {
   }
 }
 @media screen and (max-width: 768px) {
-  .van-overlay {
-    z-index: 20;
-  }
-
-  .wrapper {
-    height: 100vh;
-
-    .block {
-      position: relative;
-      width: 76vw;
-      background: #fff;
-
-      .close {
-        position: absolute;
-        right: 2.4vw;
-        top: 2.4vw;
-        width: 5.6vw;
-        height: 5.6vw;
-        background: url(~assets/theme-images/common/h5-icon-close.png) center
-          no-repeat;
-        background-size: 4.8vw 4.8vw;
-        cursor: pointer;
+  .simple-login {
+    @include useTheme() {
+      .van-overlay {
+        z-index: 20;
       }
 
-      .title {
-        font-size: 4.8vw;
-        color: #101010;
-      }
-
-      .form-item {
-        position: relative;
-        width: 62vw;
-
-        input {
-          width: 62vw;
-          display: block;
-          padding: 1.8vw 2.4vw;
-          font-size: 14px;
-          border: 0.1vw solid #d8d8d8;
-          box-sizing: border-box;
+      .wrapper {
+        height: 100vh;
+
+        .block {
+          position: relative;
+          width: 76vw;
+          background: #fff;
+
+          .close {
+            position: absolute;
+            right: 2.4vw;
+            top: 2.4vw;
+            width: 5.6vw;
+            height: 5.6vw;
+            background: url(~assets/theme-images/common/h5-icon-close.png)
+              center no-repeat;
+            background-size: 4.8vw 4.8vw;
+            cursor: pointer;
+          }
 
-          &.code {
-            width: 42.8vw;
+          .title {
+            font-size: 4.8vw;
+            color: #101010;
           }
-        }
-        .send {
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 3.2vw;
-          cursor: pointer;
-          @include themify($themes) {
-            color: themed('color');
+
+          .form-item {
+            position: relative;
+            width: 62vw;
+
+            input {
+              width: 62vw;
+              display: block;
+              padding: 1.8vw 2.4vw;
+              font-size: 14px;
+              border: 0.1vw solid #d8d8d8;
+              box-sizing: border-box;
+
+              &.code {
+                width: 42.8vw;
+              }
+            }
+            .send {
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              font-size: 3.2vw;
+              cursor: pointer;
+              color: fetch('color');
+            }
           }
-        }
-      }
 
-      .control {
-        font-size: 3.2vw;
+          .control {
+            font-size: 3.2vw;
 
-        .forget,
-        .regist {
-          cursor: pointer;
-        }
-        .forget {
-          color: #666;
+            .forget,
+            .regist {
+              cursor: pointer;
+            }
+            .forget {
+              color: #666;
 
-          &:hover {
-            @include themify($themes) {
-              color: themed('color');
+              &:hover {
+                color: fetch('color');
+              }
+            }
+            .regist {
+              color: fetch('color');
             }
           }
-        }
-        .regist {
-          @include themify($themes) {
-            color: themed('color');
-          }
-        }
-      }
-      .submit {
-        width: 62vw;
-        height: 8.8vw;
-        font-size: 3.2vw;
-        color: #fff;
-        text-align: center;
-        line-height: 8.8vw;
-        transition: all 0.4s;
-        border-radius: 4px;
-
-        &.disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
+          .submit {
+            width: 62vw;
+            height: 8.8vw;
+            font-size: 3.2vw;
+            color: #fff;
+            text-align: center;
+            line-height: 8.8vw;
+            transition: all 0.4s;
+            border-radius: 4px;
+
+            &.disabled {
+              opacity: 0.5;
+              cursor: not-allowed;
+            }
 
-        @include themify($themes) {
-          background: themed('color');
+            background: fetch('color');
+          }
         }
       }
     }

components/SimpleOssUpload/index.vue

@@ -116,14 +116,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 @media screen and (min-width: 768px) {
   .simple-oss-upload {
     .button {

components/SimplePagination/index.vue

@@ -46,83 +46,76 @@ export default {
 <style scoped lang="scss">
 @media screen and (min-width: 768px) {
   .simple-pagination {
-    display: flex;
-    justify-content: center;
-
-    &.theme-black {
-      .van-pagination {
-        ::v-deep {
-          .van-pagination__item {
-            margin-left: 4px;
-            margin-right: 4px;
-            color: #000;
+    @include useTheme() {
+      display: flex;
+      justify-content: center;
+
+      &.theme-black {
+        .van-pagination {
+          ::v-deep {
+            .van-pagination__item {
+              margin-left: 4px;
+              margin-right: 4px;
+              color: #000;
 
-            &:active {
-              color: #fff;
-              background-color: #000;
+              &:active {
+                color: #fff;
+                background-color: #000;
+              }
             }
-          }
 
-          .van-pagination__prev,
-          .van-pagination__next {
-            background: transparent !important;
-            color: #101010;
-            &::after {
-              border-color: transparent !important;
-            }
+            .van-pagination__prev,
+            .van-pagination__next {
+              background: transparent !important;
+              color: #101010;
+              &::after {
+                border-color: transparent !important;
+              }
 
-            &:hover {
-              color: #000;
+              &:hover {
+                color: #000;
+              }
             }
-          }
 
-          .van-pagination__item--active {
-            background-color: #000 !important;
-            color: #fff;
+            .van-pagination__item--active {
+              background-color: #000 !important;
+              color: #fff;
+            }
           }
         }
       }
-    }
-
-    &.theme-red {
-      .van-pagination {
-        ::v-deep {
-          .van-pagination__item {
-            margin-left: 4px;
-            margin-right: 4px;
 
-            @include themify($themes) {
-              color: themed('color');
-            }
-
-            &:active {
-              color: #fff;
-              @include themify($themes) {
-                background-color: themed('color');
+      &.theme-red {
+        .van-pagination {
+          ::v-deep {
+            .van-pagination__item {
+              margin-left: 4px;
+              margin-right: 4px;
+              color: fetch('color');
+
+              &:active {
+                color: #fff;
+                background-color: fetch('color');
               }
             }
-          }
 
-          .van-pagination__prev,
-          .van-pagination__next {
-            background: transparent !important;
-            color: #101010;
-            &::after {
-              border-color: transparent !important;
-            }
+            .van-pagination__prev,
+            .van-pagination__next {
+              background: transparent !important;
+              color: #101010;
+              &::after {
+                border-color: transparent !important;
+              }
 
-            &:hover {
-              @include themify($themes) {
-                color: themed('color');
+              &:hover {
+                color: fetch('color');
               }
             }
-          }
 
-          .van-pagination__item--active {
-            @include themify($themes) {
-              background-color: themed('color') !important;
+            .van-pagination__item--active {
+              background-color: fetch('color') !important;
+              color: #fff;
             }
-            color: #fff;
           }
         }
       }
@@ -132,37 +125,37 @@ export default {
 
 @media screen and (max-width: 768px) {
   .simple-pagination {
-    &.theme-red {
-      ::v-deep {
-        .van-pagination__prev,
-        .van-pagination__next {
-          color: #101010;
-          &::after {
-            border-color: transparent !important;
-          }
+    @include useTheme() {
+      &.theme-red {
+        ::v-deep {
+          .van-pagination__prev,
+          .van-pagination__next {
+            color: #101010;
+            &::after {
+              border-color: transparent !important;
+            }
 
-          &:active {
-            color: #fff;
-            @include themify($themes) {
-              background-color: themed('color');
+            &:active {
+              color: #fff;
+              background-color: fetch('color');
             }
           }
         }
       }
-    }
 
-    &.theme-black {
-      ::v-deep {
-        .van-pagination__prev,
-        .van-pagination__next {
-          color: #101010;
-          &::after {
-            border-color: transparent !important;
-          }
+      &.theme-black {
+        ::v-deep {
+          .van-pagination__prev,
+          .van-pagination__next {
+            color: #101010;
+            &::after {
+              border-color: transparent !important;
+            }
 
-          &:active {
-            color: #fff;
-            background-color: #000;
+            &:active {
+              color: rgb(236, 216, 216);
+              background-color: #000;
+            }
           }
         }
       }

components/SimpleRadio/index.vue

@@ -49,105 +49,98 @@ export default {
 // pc端
 @media screen and (min-width: 768px) {
   .simple-radio {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
+    @include useTheme() {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
 
-    .simple-radio__item {
-      cursor: pointer;
-      margin-right: 40px;
+      .simple-radio__item {
+        cursor: pointer;
+        margin-right: 40px;
 
-      &:last-child {
-        margin-right: 0;
-      }
-
-      .simple-radio__label {
-        font-size: 14px;
-        color: #666;
-      }
-
-      &.simple-radio-theme-rect {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 117px;
-        height: 46px;
-        box-sizing: border-box;
-        border: 1px solid #c2c2c2;
-        border-radius: 2px;
-        position: relative;
-        overflow: hidden;
+        &:last-child {
+          margin-right: 0;
+        }
 
-        &.active {
-          @include themify($themes) {
-            border-color: themed('color');
-          }
+        .simple-radio__label {
+          font-size: 14px;
+          color: #666;
+        }
 
-          .simple-radio__con {
-            position: absolute;
-            right: -20px;
-            bottom: -20px;
-            width: 40px;
-            height: 40px;
+        &.simple-radio-theme-rect {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 117px;
+          height: 46px;
+          box-sizing: border-box;
+          border: 1px solid #c2c2c2;
+          border-radius: 2px;
+          position: relative;
+          overflow: hidden;
 
-            color: #fff;
-            transform: rotateZ(45deg);
-            @include themify($themes) {
-              background: themed('color');
-            }
+          &.active {
+            border-color: fetch('color');
 
-            &::after {
-              content: '选中';
+            .simple-radio__con {
               position: absolute;
-              left: -5px;
-              top: 0;
-              display: block;
-              font-size: 10px;
-              transform: rotateZ(-90deg) scale(0.8);
-            }
-          }
-        }
-      }
+              right: -20px;
+              bottom: -20px;
+              width: 40px;
+              height: 40px;
 
-      &.simple-radio-theme-defalut {
-        position: relative;
-        padding-left: 24px;
+              color: #fff;
+              transform: rotateZ(45deg);
+              background: fetch('color');
 
-        &.active {
-          .simple-radio__con {
-            &::before {
-              @include themify($themes) {
-                background: themed('color');
+              &::after {
+                content: '选中';
+                position: absolute;
+                left: -5px;
+                top: 0;
+                display: block;
+                font-size: 10px;
+                transform: rotateZ(-90deg) scale(0.8);
               }
             }
           }
         }
 
-        .simple-radio__con {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 18px;
-          height: 18px;
-          box-sizing: border-box;
-          border-radius: 50%;
-          transform: translateY(-50%);
+        &.simple-radio-theme-defalut {
+          position: relative;
+          padding-left: 24px;
 
-          @include themify($themes) {
-            border: 1px solid themed('color');
+          &.active {
+            .simple-radio__con {
+              &::before {
+                background: fetch('color');
+              }
+            }
           }
 
-          &::before {
-            display: block;
-            content: '';
-            width: 8px;
-            height: 8px;
+          .simple-radio__con {
             position: absolute;
-            left: 50%;
+            left: 0;
             top: 50%;
-            transform: translate(-50%, -50%);
+            width: 18px;
+            height: 18px;
+            box-sizing: border-box;
             border-radius: 50%;
+            transform: translateY(-50%);
+            border: 1px solid fetch('color');
+
+            &::before {
+              display: block;
+              content: '';
+              width: 8px;
+              height: 8px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              border-radius: 50%;
+            }
           }
         }
       }
@@ -158,111 +151,104 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .simple-radio {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .simple-radio__item {
-      cursor: pointer;
+    @include useTheme() {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
 
-      .simple-radio__label {
-        font-size: 3.4vw;
-        color: #666;
-      }
+      .simple-radio__item {
+        cursor: pointer;
 
-      &.simple-radio-theme-rect {
-        margin-right: 2.4vw;
-        margin-bottom: 2.4vw;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 27vw;
-        height: 11.8vw;
-        box-sizing: border-box;
-        border: 1px solid #c2c2c2;
-        border-radius: 0.4vw;
-        position: relative;
-        overflow: hidden;
-
-        &:last-child {
-          margin-left: 0;
+        .simple-radio__label {
+          font-size: 3.4vw;
+          color: #666;
         }
 
-        &.active {
-          @include themify($themes) {
-            border-color: themed('color');
-          }
+        &.simple-radio-theme-rect {
+          margin-right: 2.4vw;
+          margin-bottom: 2.4vw;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 27vw;
+          height: 11.8vw;
+          box-sizing: border-box;
+          border: 1px solid #c2c2c2;
+          border-radius: 0.4vw;
+          position: relative;
+          overflow: hidden;
 
-          .simple-radio__con {
-            position: absolute;
-            right: -20px;
-            bottom: -20px;
-            width: 40px;
-            height: 40px;
+          &:last-child {
+            margin-left: 0;
+          }
 
-            color: #fff;
-            transform: rotateZ(45deg);
-            @include themify($themes) {
-              background: themed('color');
-            }
+          &.active {
+            border-color: fetch('color');
 
-            &::after {
-              content: '选中';
+            .simple-radio__con {
               position: absolute;
-              left: -5px;
-              top: 0;
-              display: block;
-              font-size: 10px;
-              transform: rotateZ(-90deg) scale(0.8);
-            }
-          }
-        }
-      }
-
-      &.simple-radio-theme-defalut {
-        position: relative;
-        padding-left: 6vw;
-        margin-right: 7.2vw;
+              right: -20px;
+              bottom: -20px;
+              width: 40px;
+              height: 40px;
 
-        &:last-child {
-          margin-right: 0;
-        }
+              color: #fff;
+              transform: rotateZ(45deg);
+              background: fetch('color');
 
-        &.active {
-          .simple-radio__con {
-            &::before {
-              @include themify($themes) {
-                background: themed('color');
+              &::after {
+                content: '选中';
+                position: absolute;
+                left: -5px;
+                top: 0;
+                display: block;
+                font-size: 10px;
+                transform: rotateZ(-90deg) scale(0.8);
               }
             }
           }
         }
 
-        .simple-radio__con {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          width: 3.6vw;
-          height: 3.6vw;
-          box-sizing: border-box;
-          border-radius: 50%;
-          transform: translateY(-50%);
+        &.simple-radio-theme-defalut {
+          position: relative;
+          padding-left: 6vw;
+          margin-right: 7.2vw;
 
-          @include themify($themes) {
-            border: 1px solid themed('color');
+          &:last-child {
+            margin-right: 0;
           }
 
-          &::before {
-            display: block;
-            content: '';
-            width: 1.8vw;
-            height: 1.8vw;
+          &.active {
+            .simple-radio__con {
+              &::before {
+                background: fetch('color');
+              }
+            }
+          }
+
+          .simple-radio__con {
             position: absolute;
-            left: 50%;
+            left: 0;
             top: 50%;
-            transform: translate(-50%, -50%);
+            width: 3.6vw;
+            height: 3.6vw;
+            box-sizing: border-box;
             border-radius: 50%;
+            transform: translateY(-50%);
+            border: 1px solid fetch('color');
+
+            &::before {
+              display: block;
+              content: '';
+              width: 1.8vw;
+              height: 1.8vw;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              border-radius: 50%;
+            }
           }
         }
       }

components/SimpleStep/index.vue

@@ -36,26 +36,26 @@ export default {
 // pc端
 @media screen and (min-width: 768px) {
   .simple-step {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 24px 0;
+    @include useTheme() {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 24px 0;
 
-    .simple-step__item {
-      font-size: 24px;
-      color: #282828;
+      .simple-step__item {
+        font-size: 24px;
+        color: #282828;
 
-      position: relative;
-      padding-bottom: 4px;
-      &.active {
-        .simple-step__line {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 3px;
-          @include themify($themes) {
-            background-color: themed('color');
+        position: relative;
+        padding-bottom: 4px;
+        &.active {
+          .simple-step__line {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background-color: fetch('color');
           }
         }
       }
@@ -66,29 +66,29 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .simple-step {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 8vw 0 6vw;
+    @include useTheme() {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 8vw 0 6vw;
 
-    .simple-step__item {
-      font-size: 4.2vw;
-      color: #999;
+      .simple-step__item {
+        font-size: 4.2vw;
+        color: #999;
 
-      position: relative;
-      padding-bottom: 1.2vw;
+        position: relative;
+        padding-bottom: 1.2vw;
 
-      &.active {
-        color: #282828;
+        &.active {
+          color: #282828;
 
-        .simple-step__line {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 0.5vw;
-          @include themify($themes) {
-            background-color: themed('color');
+          .simple-step__line {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 0.5vw;
+            background-color: fetch('color');
           }
         }
       }

components/SimpleTabs/index.vue

@@ -40,72 +40,70 @@ export default {
 <style scoped lang="scss">
 @media screen and (min-width: 768px) {
   .tabbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 24px;
-    .tab-search {
-      position: relative;
-      width: 430px;
-      height: 40px;
-      border: 1px solid #d8d8d8;
-      border-radius: 4px;
-      padding: 0 16px;
-      padding-left: 46px;
-      &::after {
-        position: absolute;
-        top: 4px;
-        left: 8px;
-        content: '';
-        width: 30px;
-        height: 30px;
-        background: url(~assets/theme-images/common/pc-icon-search.png)
-          no-repeat center;
-        background-size: 30px;
-      }
-      .control {
-        width: 100%;
-        height: 36px;
-        display: block;
-        border: 0;
-        outline: none;
-        line-height: 36px;
-        background: #fff;
-      }
-    }
-    .tab {
-      overflow-x: auto;
-      white-space: nowrap;
-      height: 64px;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      .item {
+    @include useTheme() {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-right: 24px;
+      .tab-search {
         position: relative;
-        display: inline-block;
-        font-size: 20px;
-        line-height: 64px;
-        color: #101010;
-        padding: 0 32px;
-        cursor: pointer;
+        width: 430px;
+        height: 40px;
+        border: 1px solid #d8d8d8;
+        border-radius: 4px;
+        padding: 0 16px;
+        padding-left: 46px;
         &::after {
           position: absolute;
+          top: 4px;
+          left: 8px;
           content: '';
-          width: 40px;
-          height: 2px;
-          background-color: #fff;
-          bottom: 0;
-          left: 50%;
-          transform: translateX(-50%);
+          width: 30px;
+          height: 30px;
+          background: url(~assets/theme-images/common/pc-icon-search.png)
+            no-repeat center;
+          background-size: 30px;
         }
-
-        &.active {
-          @include themify($themes) {
-            color: themed('color');
-          }
+        .control {
+          width: 100%;
+          height: 36px;
+          display: block;
+          border: 0;
+          outline: none;
+          line-height: 36px;
+          background: #fff;
+        }
+      }
+      .tab {
+        overflow-x: auto;
+        white-space: nowrap;
+        height: 64px;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        .item {
+          position: relative;
+          display: inline-block;
+          font-size: 20px;
+          line-height: 64px;
+          color: #101010;
+          padding: 0 32px;
+          cursor: pointer;
           &::after {
-            @include themify($themes) {
-              background-color: themed('color');
+            position: absolute;
+            content: '';
+            width: 40px;
+            height: 2px;
+            background-color: #fff;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+
+          &.active {
+            color: fetch('color');
+            &::after {
+              background-color: fetch('color');
             }
           }
         }
@@ -116,43 +114,41 @@ export default {
 
 @media screen and (max-width: 768px) {
   .tabbar {
-    .tab-search {
-      display: none;
-    }
-    .tab {
-      overflow-x: auto;
-      white-space: nowrap;
-      padding-top: 4vw;
-      &::-webkit-scrollbar {
+    @include useTheme() {
+      .tab-search {
         display: none;
       }
-      .item {
-        position: relative;
-        display: inline-block;
-        font-size: 4.2vw;
-        line-height: 8vw;
-        color: #101010;
-        padding: 0 6vw;
-        padding-bottom: 1.2vw;
-        &::after {
-          position: absolute;
-          content: '';
-          width: 8vw;
-          height: 0.4vw;
-          background-color: #fff;
-          bottom: 0;
-          left: 50%;
-          transform: translateX(-50%);
+      .tab {
+        overflow-x: auto;
+        white-space: nowrap;
+        padding-top: 4vw;
+        &::-webkit-scrollbar {
+          display: none;
         }
-
-        &.active {
-          font-size: 4.6vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
+        .item {
+          position: relative;
+          display: inline-block;
+          font-size: 4.2vw;
+          line-height: 8vw;
+          color: #101010;
+          padding: 0 6vw;
+          padding-bottom: 1.2vw;
           &::after {
-            @include themify($themes) {
-              background-color: themed('color');
+            position: absolute;
+            content: '';
+            width: 8vw;
+            height: 0.4vw;
+            background-color: #fff;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+          }
+
+          &.active {
+            font-size: 4.6vw;
+            color: fetch('color');
+            &::after {
+              background-color: fetch('color');
             }
           }
         }

components/SimpleVideoList/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="video-list">
+    <div
+      class="video"
+      v-for="(item, index) in list"
+      :key="index"
+      @click="onPlay(item)"
+    >
+      <div class="cover">
+        <img :src="item.cover" alt="" />
+        <div class="name">{{ item.title }}</div>
+        <div class="rank" :class="'rank-0' + (index + 1)">
+          {{ index + 1 }}
+        </div>
+        <div class="play" @click="onPlay(item)"></div>
+      </div>
+      <div class="info">
+        <div class="club-name">{{ item.authParty }}</div>
+        <div class="mobile">{{ item.userName | mobileFormat }}</div>
+      </div>
+      <div class="foot">
+        <div class="date">{{ item.releaseTime | dateFormat }}</div>
+        <div class="praise">{{ item.diggCount }}</div>
+        <div class="pv">{{ item.playCount }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .video-list {
+    &::after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+
+    .video {
+      float: left;
+      width: 288px;
+      height: 356px;
+      background: #fff;
+      box-sizing: border-box;
+      border: 1px solid #efefef;
+      margin: 0 16px 16px 0;
+      transition: all 0.4s;
+
+      &:hover {
+        transform: translateY(-10px);
+        box-shadow: 0px 6px 16px 1px rgba(0, 0, 0, 0.1);
+
+        .info {
+          .club-name {
+            color: #f3920d;
+          }
+        }
+      }
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
+      .cover {
+        width: 100%;
+        height: 198px;
+        position: relative;
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1;
+          width: 100%;
+          height: 100%;
+          background: #000;
+          opacity: 0;
+          transition: opacity 0.2s;
+        }
+
+        .play {
+          position: absolute;
+          z-index: 2;
+          width: 48px;
+          height: 48px;
+          background: url(~assets/theme-images/common/pc-icon-play.png)
+            no-repeat center;
+          background-size: 48px;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          opacity: 0;
+          transition: opacity 0.2s;
+          cursor: pointer;
+        }
+
+        &:hover {
+          .play {
+            opacity: 1;
+          }
+
+          .rank,
+          .name {
+            opacity: 0;
+          }
+
+          &::after {
+            opacity: 0.4;
+          }
+        }
+
+        .name {
+          color: #fff;
+          font-size: 16px;
+          text-align: center;
+          width: 100%;
+          line-height: 40px;
+          @include ellipsis(1);
+          box-sizing: border-box;
+          padding: 0 16px;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.5);
+          transition: opacity 0.2s;
+        }
+
+        .rank {
+          position: absolute;
+          left: 10px;
+          top: 0;
+          width: 43px;
+          height: 45px;
+          background: url(~assets/theme-images/ross/pc-rank.png) no-repeat
+            center;
+          background-size: 43px;
+          text-align: center;
+          box-sizing: border-box;
+          padding-top: 13px;
+          font-weight: bold;
+          color: #fff;
+          font-size: 13px;
+          transition: opacity 0.2s;
+
+          &.rank-01 {
+            background-image: url(~assets/theme-images/ross/pc-rank-01.png);
+          }
+          &.rank-02 {
+            background-image: url(~assets/theme-images/ross/pc-rank-02.png);
+          }
+          &.rank-03 {
+            background-image: url(~assets/theme-images/ross/pc-rank-03.png);
+          }
+        }
+      }
+
+      .info {
+        padding: 24px 16px;
+        .club-name {
+          font-size: 18px;
+          color: #282828;
+          @include ellipsis(1);
+        }
+        .mobile {
+          font-size: 16px;
+          color: #666;
+          margin-top: 12px;
+        }
+      }
+
+      .foot {
+        color: #999999;
+        font-size: 14px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 16px;
+        border-top: 1px solid #efefef;
+        padding-top: 12px;
+
+        .date,
+        .praise,
+        .pv {
+          flex-shrink: 0;
+          line-height: 24px;
+        }
+
+        .praise,
+        .pv {
+          position: relative;
+          margin-left: 16px;
+          padding-left: 30px;
+
+          &::after {
+            content: '';
+            display: block;
+            width: 24px;
+            height: 24px;
+            background: url(~assets/theme-images/common/icon-praise.png)
+              no-repeat center;
+            background-size: 24px;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+
+        .pv {
+          &::after {
+            background-image: url(~assets/theme-images/common/icon-pv.png);
+          }
+        }
+
+        .date {
+          margin-right: 44px;
+        }
+      }
+    }
+  }
+}
+</style>

components/SimpleVideoPlayer/index.vue

@@ -53,14 +53,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 .simple-video-player {
   .pupup-content {
     position: relative;

layouts/app-hyt.vue

@@ -251,207 +251,202 @@ export default {
 // PC端
 @media screen and (min-width: 768px) {
   .layout {
-    padding-top: 80px;
-    user-select: none;
-
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      height: 80px;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        width: 1200px;
-        margin: 0 auto;
-        height: 100%;
-      }
+    @include useTheme() {
+      padding-top: 80px;
+      user-select: none;
+
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        height: 80px;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          width: 1200px;
+          margin: 0 auto;
+          height: 100%;
+        }
 
-      .logo {
-        cursor: pointer;
-        img {
-          display: block;
-          width: 122px;
-          height: 44px;
-
-          &.ross {
-            width: 85px;
-            height: 27px;
-            margin-right: 15px;
-            transform: translateY(-2px);
+        .logo {
+          cursor: pointer;
+          img {
+            display: block;
+            width: 122px;
+            height: 44px;
+
+            &.ross {
+              width: 85px;
+              height: 27px;
+              margin-right: 15px;
+              transform: translateY(-2px);
+            }
+          }
+          span {
+            font-size: 24px;
+            color: #fff;
+            margin-left: 8px;
           }
         }
-        span {
-          font-size: 24px;
-          color: #fff;
-          margin-left: 8px;
-        }
-      }
 
-      .nav {
-        .link {
-          display: inline;
-          margin-left: 32px;
-          cursor: pointer;
+        .nav {
+          .link {
+            display: inline;
+            margin-left: 32px;
+            cursor: pointer;
 
-          &:hover {
-            .text {
-              @include themify($themes) {
-                color: themed('color');
+            &:hover {
+              .text {
+                color: fetch('color');
               }
-            }
 
-            .icon {
-              &.icon-register {
-                background-image: url(~assets/theme-images/hyt/pc/link-entry-register-active.png);
-              }
-              &.icon-doc {
-                background-image: url(~assets/theme-images/hyt/pc/link-entry-doc-active.png);
-              }
-              &.icon-feedback {
-                background-image: url(~assets/theme-images/hyt/pc/link-entry-feedback-active.png);
+              .icon {
+                &.icon-register {
+                  background-image: url(~assets/theme-images/hyt/pc/link-entry-register-active.png);
+                }
+                &.icon-doc {
+                  background-image: url(~assets/theme-images/hyt/pc/link-entry-doc-active.png);
+                }
+                &.icon-feedback {
+                  background-image: url(~assets/theme-images/hyt/pc/link-entry-feedback-active.png);
+                }
               }
             }
           }
-        }
-
-        .icon {
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          vertical-align: -4px;
-          margin-right: 4px;
-
-          background-size: 20px;
-          background-repeat: no-repeat;
-          background-position: center;
 
-          &.icon-register {
-            background-image: url(~assets/theme-images/hyt/pc/link-entry-register.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/hyt/pc/link-entry-doc.png);
+          .icon {
+            width: 20px;
+            height: 20px;
+            display: inline-block;
+            vertical-align: -4px;
+            margin-right: 4px;
+
+            background-size: 20px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.icon-register {
+              background-image: url(~assets/theme-images/hyt/pc/link-entry-register.png);
+            }
+            &.icon-doc {
+              background-image: url(~assets/theme-images/hyt/pc/link-entry-doc.png);
+            }
+            &.icon-feedback {
+              background-image: url(~assets/theme-images/hyt/pc/link-entry-feedback.png);
+            }
           }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/hyt/pc/link-entry-feedback.png);
+          .text {
+            font-size: 16px;
+            color: #fff;
           }
         }
-        .text {
-          font-size: 16px;
-          color: #fff;
-        }
-      }
 
-      .user-info {
-        color: #fff;
-        font-size: 16px;
-        margin-left: 48px;
-
-        .login-btn {
-          width: 80px;
-          height: 34px;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 14px;
-          text-align: center;
-          line-height: 34px;
-          cursor: pointer;
-        }
-        .user-center {
-          position: relative;
-
-          .icon {
-            width: 32px;
-            height: 32px;
+          font-size: 16px;
+          margin-left: 48px;
+
+          .login-btn {
+            width: 80px;
+            height: 34px;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 14px;
             text-align: center;
-            line-height: 32px;
+            line-height: 34px;
+            cursor: pointer;
+          }
+          .user-center {
+            position: relative;
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+            .icon {
+              width: 32px;
+              height: 32px;
+              text-align: center;
+              line-height: 32px;
 
-            &.el-icon-arrow-down {
-              font-size: 22px;
-              transition: all 0.2s;
-            }
-          }
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                font-size: 22px;
+                transition: all 0.2s;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
-            }
-          }
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            // z-index: -1;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 24px;
-
-            .nav {
-              width: 118px;
-              padding: 8px 0;
-              background: #fff;
-              box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
-              border-radius: 4px;
-              li {
-                font-size: 14px;
-                color: #282828;
-                text-align: center;
-                line-height: 40px;
-                transition: all 0.4s;
-                cursor: pointer;
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
+            }
 
-                &:hover {
-                  @include themify($themes) {
-                    color: themed('color');
+            .drop-down {
+              display: none;
+              opacity: 0;
+              // z-index: -1;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 24px;
+
+              .nav {
+                width: 118px;
+                padding: 8px 0;
+                background: #fff;
+                box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
+                border-radius: 4px;
+                li {
+                  font-size: 14px;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 40px;
+                  transition: all 0.4s;
+                  cursor: pointer;
+
+                  &:hover {
+                    color: fetch('color');
                   }
                 }
               }
             }
           }
-        }
-
-        .login,
-        .register,
-        .logout {
-          cursor: pointer;
 
-          &:hover {
-            @include themify($themes) {
-              color: themed('color');
+          .login,
+          .register,
+          .logout {
+            cursor: pointer;
+            &:hover {
+              color: fetch('color');
             }
           }
         }
       }
-    }
-    .content {
-      // min-height: calc(100vh - 80px - 80px);
-      min-height: calc(100vh - 80px);
-      background-color: #f7f7f7;
-      overflow: hidden;
-      // margin-bottom: 80px;
-    }
+      .content {
+        // min-height: calc(100vh - 80px - 80px);
+        min-height: calc(100vh - 80px);
+        background-color: #f7f7f7;
+        overflow: hidden;
+        // margin-bottom: 80px;
+      }
 
-    .footer {
-      height: 80px;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 14px;
+      .footer {
+        height: 80px;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 14px;
+      }
     }
   }
 }
@@ -459,176 +454,178 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .layout {
-    padding-top: 12.8vw;
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      padding: 0 4vw;
-      height: 12.8vw;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        height: 100%;
-      }
-
-      .logo {
-        img {
-          display: block;
-          width: 22.5vw;
-          height: 8vw;
-
-          // &.ross {
-          //   width: 12.2vw;
-          //   height: 3.9vw;
-          //   margin-right: 1.9vw;
-          //   transform: translateY(-0.6vw);
-          // }
-        }
-        span {
-          font-size: 4vw;
-          color: #fff;
-          display: none;
+    @include useTheme() {
+      padding-top: 12.8vw;
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        padding: 0 4vw;
+        height: 12.8vw;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          height: 100%;
         }
-      }
 
-      .user-info {
-        color: #fff;
-        font-size: 3vw;
-
-        .logout {
-          margin: 0 1.6vw;
+        .logo {
+          img {
+            display: block;
+            width: 22.5vw;
+            height: 8vw;
+
+            // &.ross {
+            //   width: 12.2vw;
+            //   height: 3.9vw;
+            //   margin-right: 1.9vw;
+            //   transform: translateY(-0.6vw);
+            // }
+          }
+          span {
+            font-size: 4vw;
+            color: #fff;
+            display: none;
+          }
         }
 
-        .login-btn {
-          width: 13.4vw;
-          height: 6.4vw;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 3.4vw;
-          text-align: center;
-          line-height: 6.4vw;
-          margin-right: 2.4vw;
-        }
+          font-size: 3vw;
 
-        .user-center {
-          position: relative;
+          .logout {
+            margin: 0 1.6vw;
+          }
 
-          .icon {
-            width: 5.6vw;
-            height: 5.6vw;
+          .login-btn {
+            width: 13.4vw;
+            height: 6.4vw;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 3.4vw;
             text-align: center;
-            line-height: 5.6vw;
-            margin-right: 4vw;
+            line-height: 6.4vw;
+            margin-right: 2.4vw;
+          }
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+          .user-center {
+            position: relative;
 
-            &.el-icon-arrow-down {
-              display: none;
-            }
-          }
+            .icon {
+              width: 5.6vw;
+              height: 5.6vw;
+              text-align: center;
+              line-height: 5.6vw;
+              margin-right: 4vw;
+
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                display: none;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
+
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
             }
-          }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 1.2vw;
-
-            .nav {
-              width: 26vw;
-              padding: 1vw 0;
-              background: #fff;
-              box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
-              border-radius: 0.4vw;
-              li {
-                font-size: 3.4vw;
-                color: #282828;
-                text-align: center;
-                line-height: 8.6vw;
-                transition: all 0.4s;
+            .drop-down {
+              display: none;
+              opacity: 0;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 1.2vw;
+
+              .nav {
+                width: 26vw;
+                padding: 1vw 0;
+                background: #fff;
+                box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
+                border-radius: 0.4vw;
+                li {
+                  font-size: 3.4vw;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 8.6vw;
+                  transition: all 0.4s;
+                }
               }
             }
           }
         }
+
+        .collapse-icon {
+          display: block;
+          width: 5.6vw;
+          height: 5.6vw;
+          background: url(~assets/theme-images/common/h5-icon-collapse.png)
+            no-repeat center;
+          background-size: 5.6vw;
+        }
+      }
+      .content {
+        // min-height: calc(100vh - 12.8vw - 12.4vw);
+        min-height: calc(100vh - 12.8vw);
       }
 
-      .collapse-icon {
-        display: block;
-        width: 5.6vw;
-        height: 5.6vw;
-        background: url(~assets/theme-images/common/h5-icon-collapse.png)
-          no-repeat center;
-        background-size: 5.6vw;
+      .footer {
+        height: 12.4vw;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 3vw;
       }
     }
-    .content {
-      // min-height: calc(100vh - 12.8vw - 12.4vw);
-      min-height: calc(100vh - 12.8vw);
-    }
 
-    .footer {
-      height: 12.4vw;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 3vw;
-    }
-  }
+    .nav {
+      width: 63vw;
+      box-sizing: border-box;
+      padding: 0 6.4vw;
+      .link {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border-bottom: 0.1vw solid #c2c2c2;
+        padding-bottom: 3vw;
+        padding-top: 6vw;
+        .icon {
+          width: 5.6vw;
+          height: 5.6vw;
+          vertical-align: -1.2vw;
+          margin-right: 2.4vw;
+          background-size: 5.6vw;
+          background-repeat: no-repeat;
+          background-position: center;
 
-  .nav {
-    width: 63vw;
-    box-sizing: border-box;
-    padding: 0 6.4vw;
-    .link {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      border-bottom: 0.1vw solid #c2c2c2;
-      padding-bottom: 3vw;
-      padding-top: 6vw;
-      .icon {
-        width: 5.6vw;
-        height: 5.6vw;
-        vertical-align: -1.2vw;
-        margin-right: 2.4vw;
-        background-size: 5.6vw;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        &.icon-register {
-          background-image: url(~assets/theme-images/hyt/h5/link-entry-register-active.png);
-        }
-        &.icon-doc {
-          background-image: url(~assets/theme-images/hyt/h5/link-entry-doc-active.png);
+          &.icon-register {
+            background-image: url(~assets/theme-images/hyt/h5/link-entry-register-active.png);
+          }
+          &.icon-doc {
+            background-image: url(~assets/theme-images/hyt/h5/link-entry-doc-active.png);
+          }
+          &.icon-feedback {
+            background-image: url(~assets/theme-images/hyt/h5/link-entry-feedback-active.png);
+          }
         }
-        &.icon-feedback {
-          background-image: url(~assets/theme-images/hyt/h5/link-entry-feedback-active.png);
+        .text {
+          font-size: 3.4vw;
+          color: #282828;
         }
       }
-      .text {
-        font-size: 3.4vw;
-        color: #282828;
-      }
     }
   }
 }

layouts/app-normal.vue

@@ -260,205 +260,201 @@ export default {
 // PC端
 @media screen and (min-width: 768px) {
   .layout {
-    padding-top: 80px;
-    user-select: none;
-
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      height: 80px;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        width: 1200px;
-        margin: 0 auto;
-        height: 100%;
-      }
+    @include useTheme() {
+      padding-top: 80px;
+      user-select: none;
+
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        height: 80px;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          width: 1200px;
+          margin: 0 auto;
+          height: 100%;
+        }
 
-      .logo {
-        cursor: pointer;
-        img {
-          display: block;
-          width: 44px;
-          height: 44px;
-
-          &.ross {
-            width: 85px;
-            height: 27px;
-            margin-right: 15px;
-            transform: translateY(-2px);
+        .logo {
+          cursor: pointer;
+          img {
+            display: block;
+            width: 44px;
+            height: 44px;
+
+            &.ross {
+              width: 85px;
+              height: 27px;
+              margin-right: 15px;
+              transform: translateY(-2px);
+            }
+          }
+          span {
+            font-size: 24px;
+            color: #fff;
           }
         }
-        span {
-          font-size: 24px;
-          color: #fff;
-        }
-      }
 
-      .nav {
-        .link {
-          display: inline;
-          margin-left: 32px;
-          cursor: pointer;
+        .nav {
+          .link {
+            display: inline;
+            margin-left: 32px;
+            cursor: pointer;
 
-          &:hover {
-            .text {
-              @include themify($themes) {
-                color: themed('color');
+            &:hover {
+              .text {
+                color: fetch('color');
               }
-            }
 
-            .icon {
-              &.icon-register {
-                background-image: url(~assets/theme-images/normal/pc/link-entry-register-active.png);
-              }
-              &.icon-doc {
-                background-image: url(~assets/theme-images/normal/pc/link-entry-doc-active.png);
-              }
-              &.icon-feedback {
-                background-image: url(~assets/theme-images/normal/pc/link-entry-feedback-active.png);
+              .icon {
+                &.icon-register {
+                  background-image: url(~assets/theme-images/normal/pc/link-entry-register-active.png);
+                }
+                &.icon-doc {
+                  background-image: url(~assets/theme-images/normal/pc/link-entry-doc-active.png);
+                }
+                &.icon-feedback {
+                  background-image: url(~assets/theme-images/normal/pc/link-entry-feedback-active.png);
+                }
               }
             }
           }
-        }
-
-        .icon {
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          vertical-align: -4px;
-          margin-right: 4px;
-
-          background-size: 20px;
-          background-repeat: no-repeat;
-          background-position: center;
 
-          &.icon-register {
-            background-image: url(~assets/theme-images/normal/pc/link-entry-register.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/normal/pc/link-entry-doc.png);
+          .icon {
+            width: 20px;
+            height: 20px;
+            display: inline-block;
+            vertical-align: -4px;
+            margin-right: 4px;
+
+            background-size: 20px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.icon-register {
+              background-image: url(~assets/theme-images/normal/pc/link-entry-register.png);
+            }
+            &.icon-doc {
+              background-image: url(~assets/theme-images/normal/pc/link-entry-doc.png);
+            }
+            &.icon-feedback {
+              background-image: url(~assets/theme-images/normal/pc/link-entry-feedback.png);
+            }
           }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/normal/pc/link-entry-feedback.png);
+          .text {
+            font-size: 16px;
+            color: #fff;
           }
         }
-        .text {
-          font-size: 16px;
-          color: #fff;
-        }
-      }
-
-      .user-info {
-        color: #fff;
-        font-size: 16px;
-        margin-left: 48px;
 
-        .login-btn {
-          width: 80px;
-          height: 34px;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 14px;
-          text-align: center;
-          line-height: 34px;
-          cursor: pointer;
-        }
-        .user-center {
-          position: relative;
-
-          .icon {
-            width: 32px;
-            height: 32px;
+          font-size: 16px;
+          margin-left: 48px;
+
+          .login-btn {
+            width: 80px;
+            height: 34px;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 14px;
             text-align: center;
-            line-height: 32px;
+            line-height: 34px;
+            cursor: pointer;
+          }
+          .user-center {
+            position: relative;
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+            .icon {
+              width: 32px;
+              height: 32px;
+              text-align: center;
+              line-height: 32px;
 
-            &.el-icon-arrow-down {
-              font-size: 22px;
-              transition: all 0.2s;
-            }
-          }
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                font-size: 22px;
+                transition: all 0.2s;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
-            }
-          }
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            // z-index: -1;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 24px;
-
-            .nav {
-              width: 118px;
-              padding: 8px 0;
-              background: #fff;
-              box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
-              border-radius: 4px;
-              li {
-                font-size: 14px;
-                color: #282828;
-                text-align: center;
-                line-height: 40px;
-                transition: all 0.4s;
-                cursor: pointer;
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
+            }
 
-                &:hover {
-                  @include themify($themes) {
-                    color: themed('color');
+            .drop-down {
+              display: none;
+              opacity: 0;
+              // z-index: -1;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 24px;
+
+              .nav {
+                width: 118px;
+                padding: 8px 0;
+                background: #fff;
+                box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
+                border-radius: 4px;
+                li {
+                  font-size: 14px;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 40px;
+                  transition: all 0.4s;
+                  cursor: pointer;
+
+                  &:hover {
+                    color: fetch('color');
                   }
                 }
               }
             }
           }
-        }
 
-        .login,
-        .register,
-        .logout {
-          cursor: pointer;
+          .login,
+          .register,
+          .logout {
+            cursor: pointer;
 
-          &:hover {
-            @include themify($themes) {
-              color: themed('color');
+            &:hover {
+              color: fetch('color');
             }
           }
         }
       }
-    }
-    .content {
-      // min-height: calc(100vh - 80px - 80px);
-      min-height: calc(100vh - 80px);
-      background-color: #f7f7f7;
-      overflow: hidden;
-    }
+      .content {
+        // min-height: calc(100vh - 80px - 80px);
+        min-height: calc(100vh - 80px);
+        background-color: #f7f7f7;
+        overflow: hidden;
+      }
 
-    .footer {
-      height: 80px;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 14px;
+      .footer {
+        height: 80px;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 14px;
+      }
     }
   }
 }
@@ -466,175 +462,177 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .layout {
-    padding-top: 12.8vw;
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      padding: 0 4vw;
-      height: 12.8vw;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        height: 100%;
-      }
-
-      .logo {
-        img {
-          display: block;
-          width: 8vw;
-          height: 8vw;
-
-          &.ross {
-            width: 12.2vw;
-            height: 3.9vw;
-            margin-right: 1.9vw;
-            transform: translateY(-0.6vw);
-          }
-        }
-        span {
-          font-size: 4vw;
-          color: #fff;
+    @include useTheme() {
+      padding-top: 12.8vw;
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        padding: 0 4vw;
+        height: 12.8vw;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          height: 100%;
         }
-      }
 
-      .user-info {
-        color: #fff;
-        font-size: 3vw;
-
-        .logout {
-          margin: 0 1.6vw;
+        .logo {
+          img {
+            display: block;
+            width: 8vw;
+            height: 8vw;
+
+            &.ross {
+              width: 12.2vw;
+              height: 3.9vw;
+              margin-right: 1.9vw;
+              transform: translateY(-0.6vw);
+            }
+          }
+          span {
+            font-size: 4vw;
+            color: #fff;
+          }
         }
 
-        .login-btn {
-          width: 13.4vw;
-          height: 6.4vw;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 3.4vw;
-          text-align: center;
-          line-height: 6.4vw;
-          margin-right: 2.4vw;
-        }
+          font-size: 3vw;
 
-        .user-center {
-          position: relative;
+          .logout {
+            margin: 0 1.6vw;
+          }
 
-          .icon {
-            width: 5.6vw;
-            height: 5.6vw;
+          .login-btn {
+            width: 13.4vw;
+            height: 6.4vw;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 3.4vw;
             text-align: center;
-            line-height: 5.6vw;
-            margin-right: 4vw;
+            line-height: 6.4vw;
+            margin-right: 2.4vw;
+          }
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+          .user-center {
+            position: relative;
 
-            &.el-icon-arrow-down {
-              display: none;
-            }
-          }
+            .icon {
+              width: 5.6vw;
+              height: 5.6vw;
+              text-align: center;
+              line-height: 5.6vw;
+              margin-right: 4vw;
+
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                display: none;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
+
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
             }
-          }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 1.2vw;
-
-            .nav {
-              width: 26vw;
-              padding: 1vw 0;
-              background: #fff;
-              box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
-              border-radius: 0.4vw;
-              li {
-                font-size: 3.4vw;
-                color: #282828;
-                text-align: center;
-                line-height: 8.6vw;
-                transition: all 0.4s;
+            .drop-down {
+              display: none;
+              opacity: 0;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 1.2vw;
+
+              .nav {
+                width: 26vw;
+                padding: 1vw 0;
+                background: #fff;
+                box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
+                border-radius: 0.4vw;
+                li {
+                  font-size: 3.4vw;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 8.6vw;
+                  transition: all 0.4s;
+                }
               }
             }
           }
         }
+
+        .collapse-icon {
+          display: block;
+          width: 5.6vw;
+          height: 5.6vw;
+          background: url(~assets/theme-images/common/h5-icon-collapse.png)
+            no-repeat center;
+          background-size: 5.6vw;
+        }
+      }
+      .content {
+        // min-height: calc(100vh - 12.8vw - 12.4vw);
+        min-height: calc(100vh - 12.8vw);
       }
 
-      .collapse-icon {
-        display: block;
-        width: 5.6vw;
-        height: 5.6vw;
-        background: url(~assets/theme-images/common/h5-icon-collapse.png)
-          no-repeat center;
-        background-size: 5.6vw;
+      .footer {
+        height: 12.4vw;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 3vw;
       }
     }
-    .content {
-      // min-height: calc(100vh - 12.8vw - 12.4vw);
-      min-height: calc(100vh - 12.8vw);
-    }
 
-    .footer {
-      height: 12.4vw;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 3vw;
-    }
-  }
+    .nav {
+      width: 63vw;
+      box-sizing: border-box;
+      padding: 0 6.4vw;
+      .link {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border-bottom: 0.1vw solid #c2c2c2;
+        padding-bottom: 3vw;
+        padding-top: 6vw;
+        .icon {
+          width: 5.6vw;
+          height: 5.6vw;
+          vertical-align: -1.2vw;
+          margin-right: 2.4vw;
+          background-size: 5.6vw;
+          background-repeat: no-repeat;
+          background-position: center;
 
-  .nav {
-    width: 63vw;
-    box-sizing: border-box;
-    padding: 0 6.4vw;
-    .link {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      border-bottom: 0.1vw solid #c2c2c2;
-      padding-bottom: 3vw;
-      padding-top: 6vw;
-      .icon {
-        width: 5.6vw;
-        height: 5.6vw;
-        vertical-align: -1.2vw;
-        margin-right: 2.4vw;
-        background-size: 5.6vw;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        &.icon-register {
-          background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
-        }
-        &.icon-doc {
-          background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
+          &.icon-register {
+            background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
+          }
+          &.icon-doc {
+            background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
+          }
+          &.icon-feedback {
+            background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
+          }
         }
-        &.icon-feedback {
-          background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
+        .text {
+          font-size: 3.4vw;
+          color: #282828;
         }
       }
-      .text {
-        font-size: 3.4vw;
-        color: #282828;
-      }
     }
   }
 }

layouts/app-ph.vue

@@ -209,204 +209,200 @@ export default {
 // PC端
 @media screen and (min-width: 768px) {
   .layout {
-    padding-top: 80px;
-    user-select: none;
-
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      height: 80px;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        width: 1200px;
-        margin: 0 auto;
-        height: 100%;
-      }
+    @include useTheme() {
+      padding-top: 80px;
+      user-select: none;
+
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        height: 80px;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          width: 1200px;
+          margin: 0 auto;
+          height: 100%;
+        }
 
-      .logo {
-        cursor: pointer;
-        img {
-          display: block;
-          width: 44px;
-          height: 44px;
-
-          &.ross {
-            width: 85px;
-            height: 27px;
-            margin-right: 15px;
-            transform: translateY(-2px);
+        .logo {
+          cursor: pointer;
+          img {
+            display: block;
+            width: 44px;
+            height: 44px;
+
+            &.ross {
+              width: 85px;
+              height: 27px;
+              margin-right: 15px;
+              transform: translateY(-2px);
+            }
+          }
+          span {
+            font-size: 24px;
+            color: #fff;
           }
         }
-        span {
-          font-size: 24px;
-          color: #fff;
-        }
-      }
 
-      .nav {
-        .link {
-          display: inline;
-          margin-left: 32px;
-          cursor: pointer;
+        .nav {
+          .link {
+            display: inline;
+            margin-left: 32px;
+            cursor: pointer;
 
-          &:hover {
-            .text {
-              @include themify($themes) {
-                color: themed('color');
+            &:hover {
+              .text {
+                color: fetch('color');
               }
-            }
 
-            .icon {
-              &.icon-register {
-                background-image: url(~assets/theme-images/normal/pc/link-entry-register-active.png);
-              }
-              &.icon-doc {
-                background-image: url(~assets/theme-images/normal/pc/link-entry-doc-active.png);
-              }
-              &.icon-feedback {
-                background-image: url(~assets/theme-images/normal/pc/link-entry-feedback-active.png);
+              .icon {
+                &.icon-register {
+                  background-image: url(~assets/theme-images/normal/pc/link-entry-register-active.png);
+                }
+                &.icon-doc {
+                  background-image: url(~assets/theme-images/normal/pc/link-entry-doc-active.png);
+                }
+                &.icon-feedback {
+                  background-image: url(~assets/theme-images/normal/pc/link-entry-feedback-active.png);
+                }
               }
             }
           }
-        }
-
-        .icon {
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          vertical-align: -4px;
-          margin-right: 4px;
-
-          background-size: 20px;
-          background-repeat: no-repeat;
-          background-position: center;
 
-          &.icon-register {
-            background-image: url(~assets/theme-images/normal/pc/link-entry-register.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/normal/pc/link-entry-doc.png);
+          .icon {
+            width: 20px;
+            height: 20px;
+            display: inline-block;
+            vertical-align: -4px;
+            margin-right: 4px;
+
+            background-size: 20px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.icon-register {
+              background-image: url(~assets/theme-images/normal/pc/link-entry-register.png);
+            }
+            &.icon-doc {
+              background-image: url(~assets/theme-images/normal/pc/link-entry-doc.png);
+            }
+            &.icon-feedback {
+              background-image: url(~assets/theme-images/normal/pc/link-entry-feedback.png);
+            }
           }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/normal/pc/link-entry-feedback.png);
+          .text {
+            font-size: 16px;
+            color: #fff;
           }
         }
-        .text {
-          font-size: 16px;
-          color: #fff;
-        }
-      }
-
-      .user-info {
-        color: #fff;
-        font-size: 16px;
-        margin-left: 48px;
 
-        .login-btn {
-          width: 80px;
-          height: 34px;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 14px;
-          text-align: center;
-          line-height: 34px;
-          cursor: pointer;
-        }
-        .user-center {
-          position: relative;
-
-          .icon {
-            width: 32px;
-            height: 32px;
+          font-size: 16px;
+          margin-left: 48px;
+
+          .login-btn {
+            width: 80px;
+            height: 34px;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 14px;
             text-align: center;
-            line-height: 32px;
+            line-height: 34px;
+            cursor: pointer;
+          }
+          .user-center {
+            position: relative;
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+            .icon {
+              width: 32px;
+              height: 32px;
+              text-align: center;
+              line-height: 32px;
 
-            &.el-icon-arrow-down {
-              font-size: 22px;
-              transition: all 0.2s;
-            }
-          }
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                font-size: 22px;
+                transition: all 0.2s;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
-            }
-          }
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            // z-index: -1;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 24px;
-
-            .nav {
-              width: 118px;
-              padding: 8px 0;
-              background: #fff;
-              box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
-              border-radius: 4px;
-              li {
-                font-size: 14px;
-                color: #282828;
-                text-align: center;
-                line-height: 40px;
-                transition: all 0.4s;
-                cursor: pointer;
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
+            }
 
-                &:hover {
-                  @include themify($themes) {
-                    color: themed('color');
+            .drop-down {
+              display: none;
+              opacity: 0;
+              // z-index: -1;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 24px;
+
+              .nav {
+                width: 118px;
+                padding: 8px 0;
+                background: #fff;
+                box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
+                border-radius: 4px;
+                li {
+                  font-size: 14px;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 40px;
+                  transition: all 0.4s;
+                  cursor: pointer;
+
+                  &:hover {
+                    color: fetch('color');
                   }
                 }
               }
             }
           }
-        }
 
-        .login,
-        .register,
-        .logout {
-          cursor: pointer;
+          .login,
+          .register,
+          .logout {
+            cursor: pointer;
 
-          &:hover {
-            @include themify($themes) {
-              color: themed('color');
+            &:hover {
+              color: fetch('color');
             }
           }
         }
       }
-    }
-    .content {
-      min-height: calc(100vh - 80px - 80px);
-      background-color: #f7f7f7;
-      overflow: hidden;
-    }
+      .content {
+        min-height: calc(100vh - 80px - 80px);
+        background-color: #f7f7f7;
+        overflow: hidden;
+      }
 
-    .footer {
-      height: 80px;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 14px;
+      .footer {
+        height: 80px;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 14px;
+      }
     }
   }
 }
@@ -414,174 +410,176 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .layout {
-    padding-top: 12.8vw;
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      padding: 0 4vw;
-      height: 12.8vw;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        height: 100%;
-      }
-
-      .logo {
-        img {
-          display: block;
-          width: 8vw;
-          height: 8vw;
-
-          &.ross {
-            width: 12.2vw;
-            height: 3.9vw;
-            margin-right: 1.9vw;
-            transform: translateY(-0.6vw);
-          }
-        }
-        span {
-          font-size: 4vw;
-          color: #fff;
+    @include useTheme() {
+      padding-top: 12.8vw;
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        padding: 0 4vw;
+        height: 12.8vw;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          height: 100%;
         }
-      }
 
-      .user-info {
-        color: #fff;
-        font-size: 3vw;
-
-        .logout {
-          margin: 0 1.6vw;
+        .logo {
+          img {
+            display: block;
+            width: 8vw;
+            height: 8vw;
+
+            &.ross {
+              width: 12.2vw;
+              height: 3.9vw;
+              margin-right: 1.9vw;
+              transform: translateY(-0.6vw);
+            }
+          }
+          span {
+            font-size: 4vw;
+            color: #fff;
+          }
         }
 
-        .login-btn {
-          width: 13.4vw;
-          height: 6.4vw;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 3.4vw;
-          text-align: center;
-          line-height: 6.4vw;
-          margin-right: 2.4vw;
-        }
+          font-size: 3vw;
 
-        .user-center {
-          position: relative;
+          .logout {
+            margin: 0 1.6vw;
+          }
 
-          .icon {
-            width: 5.6vw;
-            height: 5.6vw;
+          .login-btn {
+            width: 13.4vw;
+            height: 6.4vw;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 3.4vw;
             text-align: center;
-            line-height: 5.6vw;
-            margin-right: 4vw;
+            line-height: 6.4vw;
+            margin-right: 2.4vw;
+          }
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+          .user-center {
+            position: relative;
 
-            &.el-icon-arrow-down {
-              display: none;
-            }
-          }
+            .icon {
+              width: 5.6vw;
+              height: 5.6vw;
+              text-align: center;
+              line-height: 5.6vw;
+              margin-right: 4vw;
+
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                display: none;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
+
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
             }
-          }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 1.2vw;
-
-            .nav {
-              width: 26vw;
-              padding: 1vw 0;
-              background: #fff;
-              box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
-              border-radius: 0.4vw;
-              li {
-                font-size: 3.4vw;
-                color: #282828;
-                text-align: center;
-                line-height: 8.6vw;
-                transition: all 0.4s;
+            .drop-down {
+              display: none;
+              opacity: 0;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 1.2vw;
+
+              .nav {
+                width: 26vw;
+                padding: 1vw 0;
+                background: #fff;
+                box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
+                border-radius: 0.4vw;
+                li {
+                  font-size: 3.4vw;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 8.6vw;
+                  transition: all 0.4s;
+                }
               }
             }
           }
         }
+
+        .collapse-icon {
+          display: block;
+          width: 5.6vw;
+          height: 5.6vw;
+          background: url(~assets/theme-images/common/h5-icon-collapse.png)
+            no-repeat center;
+          background-size: 5.6vw;
+        }
+      }
+      .content {
+        min-height: calc(100vh - 12.8vw - 12.4vw);
       }
 
-      .collapse-icon {
-        display: block;
-        width: 5.6vw;
-        height: 5.6vw;
-        background: url(~assets/theme-images/common/h5-icon-collapse.png)
-          no-repeat center;
-        background-size: 5.6vw;
+      .footer {
+        height: 12.4vw;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 3vw;
       }
     }
-    .content {
-      min-height: calc(100vh - 12.8vw - 12.4vw);
-    }
 
-    .footer {
-      height: 12.4vw;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 3vw;
-    }
-  }
+    .nav {
+      width: 63vw;
+      box-sizing: border-box;
+      padding: 0 6.4vw;
+      .link {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border-bottom: 0.1vw solid #c2c2c2;
+        padding-bottom: 3vw;
+        padding-top: 6vw;
+        .icon {
+          width: 5.6vw;
+          height: 5.6vw;
+          vertical-align: -1.2vw;
+          margin-right: 2.4vw;
+          background-size: 5.6vw;
+          background-repeat: no-repeat;
+          background-position: center;
 
-  .nav {
-    width: 63vw;
-    box-sizing: border-box;
-    padding: 0 6.4vw;
-    .link {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      border-bottom: 0.1vw solid #c2c2c2;
-      padding-bottom: 3vw;
-      padding-top: 6vw;
-      .icon {
-        width: 5.6vw;
-        height: 5.6vw;
-        vertical-align: -1.2vw;
-        margin-right: 2.4vw;
-        background-size: 5.6vw;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        &.icon-register {
-          background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
-        }
-        &.icon-doc {
-          background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
+          &.icon-register {
+            background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
+          }
+          &.icon-doc {
+            background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
+          }
+          &.icon-feedback {
+            background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
+          }
         }
-        &.icon-feedback {
-          background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
+        .text {
+          font-size: 3.4vw;
+          color: #282828;
         }
       }
-      .text {
-        font-size: 3.4vw;
-        color: #282828;
-      }
     }
   }
 }

layouts/app-ross.vue

@@ -309,208 +309,206 @@ export default {
 // PC端
 @media screen and (min-width: 768px) {
   .layout {
-    padding-top: 80px;
-    user-select: none;
-
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      height: 80px;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        width: 1200px;
-        margin: 0 auto;
-        height: 100%;
-      }
+    @include useTheme() {
+      padding-top: 80px;
+      user-select: none;
+
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        height: 80px;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          width: 1200px;
+          margin: 0 auto;
+          height: 100%;
+        }
 
-      .logo {
-        cursor: pointer;
-        img {
-          display: block;
-          width: 44px;
-          height: 44px;
-
-          &.ross {
-            width: 85px;
-            height: 27px;
-            margin-right: 15px;
-            transform: translateY(-2px);
+        .logo {
+          cursor: pointer;
+          img {
+            display: block;
+            width: 44px;
+            height: 44px;
+
+            &.ross {
+              width: 85px;
+              height: 27px;
+              margin-right: 15px;
+              transform: translateY(-2px);
+            }
+          }
+          span {
+            font-size: 24px;
+            color: #fff;
           }
         }
-        span {
-          font-size: 24px;
-          color: #fff;
-        }
-      }
 
-      .nav {
-        .link {
-          display: inline;
-          margin-left: 32px;
-          cursor: pointer;
+        .nav {
+          .link {
+            display: inline;
+            margin-left: 32px;
+            cursor: pointer;
 
-          &:hover {
-            .text {
-              @include themify($themes) {
-                color: themed('color');
+            &:hover {
+              .text {
+                color: fetch('color');
               }
-            }
 
-            .icon {
-              &.icon-register {
-                background-image: url(~assets/theme-images/ross/pc-link-entry-register-active.png);
-              }
-              &.icon-doc {
-                background-image: url(~assets/theme-images/ross/pc-link-entry-doc-active.png);
-              }
-              &.icon-feedback {
-                background-image: url(~assets/theme-images/ross/pc-link-entry-feedback-active.png);
-              }
-              &.icon-challenge {
-                background-image: url(~assets/theme-images/ross/pc-link-entry-challenge-active.png);
+              .icon {
+                &.icon-register {
+                  background-image: url(~assets/theme-images/ross/pc-link-entry-register-active.png);
+                }
+                &.icon-doc {
+                  background-image: url(~assets/theme-images/ross/pc-link-entry-doc-active.png);
+                }
+                &.icon-feedback {
+                  background-image: url(~assets/theme-images/ross/pc-link-entry-feedback-active.png);
+                }
+                &.icon-challenge {
+                  background-image: url(~assets/theme-images/ross/pc-link-entry-challenge-active.png);
+                }
               }
             }
           }
-        }
-
-        .icon {
-          width: 20px;
-          height: 20px;
-          display: inline-block;
-          vertical-align: -4px;
-          margin-right: 4px;
-
-          background-size: 20px;
-          background-repeat: no-repeat;
-          background-position: center;
 
-          &.icon-register {
-            background-image: url(~assets/theme-images/ross/pc-link-entry-register.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/ross/pc-link-entry-doc.png);
-          }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/ross/pc-link-entry-feedback.png);
+          .icon {
+            width: 20px;
+            height: 20px;
+            display: inline-block;
+            vertical-align: -4px;
+            margin-right: 4px;
+
+            background-size: 20px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.icon-register {
+              background-image: url(~assets/theme-images/ross/pc-link-entry-register.png);
+            }
+            &.icon-doc {
+              background-image: url(~assets/theme-images/ross/pc-link-entry-doc.png);
+            }
+            &.icon-feedback {
+              background-image: url(~assets/theme-images/ross/pc-link-entry-feedback.png);
+            }
+            &.icon-challenge {
+              background-image: url(~assets/theme-images/ross/pc-link-entry-challenge.png);
+            }
           }
-          &.icon-challenge {
-            background-image: url(~assets/theme-images/ross/pc-link-entry-challenge.png);
+          .text {
+            font-size: 16px;
+            color: #fff;
           }
         }
-        .text {
-          font-size: 16px;
-          color: #fff;
-        }
-      }
 
-      .user-info {
-        color: #fff;
-        font-size: 16px;
-        margin-left: 48px;
-
-        .login-btn {
-          width: 80px;
-          height: 34px;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 14px;
-          text-align: center;
-          line-height: 34px;
-          cursor: pointer;
-        }
-        .user-center {
-          position: relative;
-
-          .icon {
-            width: 32px;
-            height: 32px;
+          font-size: 16px;
+          margin-left: 48px;
+
+          .login-btn {
+            width: 80px;
+            height: 34px;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 14px;
             text-align: center;
-            line-height: 32px;
+            line-height: 34px;
+            cursor: pointer;
+          }
+          .user-center {
+            position: relative;
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+            .icon {
+              width: 32px;
+              height: 32px;
+              text-align: center;
+              line-height: 32px;
 
-            &.el-icon-arrow-down {
-              font-size: 22px;
-              transition: all 0.2s;
-            }
-          }
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                font-size: 22px;
+                transition: all 0.2s;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
-            }
-          }
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            // z-index: -1;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 24px;
-
-            .nav {
-              width: 118px;
-              padding: 8px 0;
-              background: #fff;
-              box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
-              border-radius: 4px;
-              li {
-                font-size: 14px;
-                color: #282828;
-                text-align: center;
-                line-height: 40px;
-                transition: all 0.4s;
-                cursor: pointer;
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
+            }
 
-                &:hover {
-                  color: #f3920d;
+            .drop-down {
+              display: none;
+              opacity: 0;
+              // z-index: -1;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 24px;
+
+              .nav {
+                width: 118px;
+                padding: 8px 0;
+                background: #fff;
+                box-shadow: 0px 6px 16px rgba(40, 40, 40, 0.1);
+                border-radius: 4px;
+                li {
+                  font-size: 14px;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 40px;
+                  transition: all 0.4s;
+                  cursor: pointer;
+
+                  &:hover {
+                    color: #f3920d;
+                  }
                 }
               }
             }
           }
-        }
 
-        .login,
-        .register,
-        .logout {
-          cursor: pointer;
+          .login,
+          .register,
+          .logout {
+            cursor: pointer;
 
-          &:hover {
-            @include themify($themes) {
-              color: themed('color');
+            &:hover {
+              color: fetch('color');
             }
           }
         }
       }
-    }
-    .content {
-      min-height: calc(100vh - 80px - 80px);
-      background-color: #f7f7f7;
-      overflow: hidden;
-    }
+      .content {
+        min-height: calc(100vh - 80px - 80px);
+        background-color: #f7f7f7;
+        overflow: hidden;
+      }
 
-    .footer {
-      height: 80px;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 14px;
+      .footer {
+        height: 80px;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 14px;
+      }
     }
   }
 }
@@ -518,178 +516,180 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .layout {
-    padding-top: 12.8vw;
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 999;
-      width: 100%;
-      padding: 0 4vw;
-      height: 12.8vw;
-      box-sizing: border-box;
-      background: linear-gradient(90deg, #101010 0%, #404040 100%);
-
-      .navbar {
-        height: 100%;
-      }
-
-      .logo {
-        img {
-          display: block;
-          width: 8vw;
-          height: 8vw;
-
-          &.ross {
-            width: 12.2vw;
-            height: 3.9vw;
-            margin-right: 1.9vw;
-            transform: translateY(-0.6vw);
-          }
+    @include useTheme() {
+      padding-top: 12.8vw;
+      .header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100%;
+        padding: 0 4vw;
+        height: 12.8vw;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #101010 0%, #404040 100%);
+
+        .navbar {
+          height: 100%;
         }
-        span {
-          font-size: 4vw;
-          color: #fff;
-        }
-      }
 
-      .user-info {
-        color: #fff;
-        font-size: 3vw;
-
-        .logout {
-          margin: 0 1.6vw;
+        .logo {
+          img {
+            display: block;
+            width: 8vw;
+            height: 8vw;
+
+            &.ross {
+              width: 12.2vw;
+              height: 3.9vw;
+              margin-right: 1.9vw;
+              transform: translateY(-0.6vw);
+            }
+          }
+          span {
+            font-size: 4vw;
+            color: #fff;
+          }
         }
 
-        .login-btn {
-          width: 13.4vw;
-          height: 6.4vw;
+        .user-info {
           color: #fff;
-          background: rgba(255, 255, 255, 0.39);
-          font-size: 3.4vw;
-          text-align: center;
-          line-height: 6.4vw;
-          margin-right: 2.4vw;
-        }
+          font-size: 3vw;
 
-        .user-center {
-          position: relative;
+          .logout {
+            margin: 0 1.6vw;
+          }
 
-          .icon {
-            width: 5.6vw;
-            height: 5.6vw;
+          .login-btn {
+            width: 13.4vw;
+            height: 6.4vw;
+            color: #fff;
+            background: rgba(255, 255, 255, 0.39);
+            font-size: 3.4vw;
             text-align: center;
-            line-height: 5.6vw;
-            margin-right: 4vw;
+            line-height: 6.4vw;
+            margin-right: 2.4vw;
+          }
 
-            &.el-icon-user-solid {
-              font-size: 24px;
-              cursor: pointer;
-            }
+          .user-center {
+            position: relative;
 
-            &.el-icon-arrow-down {
-              display: none;
-            }
-          }
+            .icon {
+              width: 5.6vw;
+              height: 5.6vw;
+              text-align: center;
+              line-height: 5.6vw;
+              margin-right: 4vw;
+
+              &.el-icon-user-solid {
+                font-size: 24px;
+                cursor: pointer;
+              }
 
-          &:hover {
-            .drop-down {
-              display: block;
-              animation: slide-down 0.4s linear forwards;
+              &.el-icon-arrow-down {
+                display: none;
+              }
             }
 
-            .el-icon-arrow-down {
-              transform: rotateZ(180deg);
+            &:hover {
+              .drop-down {
+                display: block;
+                animation: slide-down 0.4s linear forwards;
+              }
+
+              .el-icon-arrow-down {
+                transform: rotateZ(180deg);
+              }
             }
-          }
 
-          .drop-down {
-            display: none;
-            opacity: 0;
-            // z-index: -1;
-            right: 0;
-
-            position: absolute;
-            background: transparent;
-            box-sizing: border-box;
-            padding-top: 1.2vw;
-
-            .nav {
-              width: 26vw;
-              padding: 1vw 0;
-              background: #fff;
-              box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
-              border-radius: 0.4vw;
-              li {
-                font-size: 3.4vw;
-                color: #282828;
-                text-align: center;
-                line-height: 8.6vw;
-                transition: all 0.4s;
+            .drop-down {
+              display: none;
+              opacity: 0;
+              // z-index: -1;
+              right: 0;
+
+              position: absolute;
+              background: transparent;
+              box-sizing: border-box;
+              padding-top: 1.2vw;
+
+              .nav {
+                width: 26vw;
+                padding: 1vw 0;
+                background: #fff;
+                box-shadow: 0px 0.6vw 20vw rgba(40, 40, 40, 0.1);
+                border-radius: 0.4vw;
+                li {
+                  font-size: 3.4vw;
+                  color: #282828;
+                  text-align: center;
+                  line-height: 8.6vw;
+                  transition: all 0.4s;
+                }
               }
             }
           }
         }
+
+        .collapse-icon {
+          display: block;
+          width: 5.6vw;
+          height: 5.6vw;
+          background: url(~assets/theme-images/common/h5-icon-collapse.png)
+            no-repeat center;
+          background-size: 5.6vw;
+        }
+      }
+      .content {
+        min-height: calc(100vh - 12.8vw - 12.4vw);
       }
 
-      .collapse-icon {
-        display: block;
-        width: 5.6vw;
-        height: 5.6vw;
-        background: url(~assets/theme-images/common/h5-icon-collapse.png)
-          no-repeat center;
-        background-size: 5.6vw;
+      .footer {
+        height: 12.4vw;
+        background-color: #2c3038;
+        color: #fff;
+        font-size: 3vw;
       }
     }
-    .content {
-      min-height: calc(100vh - 12.8vw - 12.4vw);
-    }
 
-    .footer {
-      height: 12.4vw;
-      background-color: #2c3038;
-      color: #fff;
-      font-size: 3vw;
-    }
-  }
+    .nav {
+      width: 63vw;
+      box-sizing: border-box;
+      padding: 0 6.4vw;
+      .link {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border-bottom: 0.1vw solid #c2c2c2;
+        padding-bottom: 3vw;
+        padding-top: 6vw;
+        .icon {
+          width: 5.6vw;
+          height: 5.6vw;
+          vertical-align: -1.2vw;
+          margin-right: 2.4vw;
+          background-size: 5.6vw;
+          background-repeat: no-repeat;
+          background-position: center;
 
-  .nav {
-    width: 63vw;
-    box-sizing: border-box;
-    padding: 0 6.4vw;
-    .link {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      border-bottom: 0.1vw solid #c2c2c2;
-      padding-bottom: 3vw;
-      padding-top: 6vw;
-      .icon {
-        width: 5.6vw;
-        height: 5.6vw;
-        vertical-align: -1.2vw;
-        margin-right: 2.4vw;
-        background-size: 5.6vw;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        &.icon-register {
-          background-image: url(~assets/theme-images/ross/h5-link-entry-register-active.png);
-        }
-        &.icon-doc {
-          background-image: url(~assets/theme-images/ross/h5-link-entry-doc-active.png);
-        }
-        &.icon-feedback {
-          background-image: url(~assets/theme-images/ross/h5-link-entry-feedback-active.png);
+          &.icon-register {
+            background-image: url(~assets/theme-images/ross/h5-link-entry-register-active.png);
+          }
+          &.icon-doc {
+            background-image: url(~assets/theme-images/ross/h5-link-entry-doc-active.png);
+          }
+          &.icon-feedback {
+            background-image: url(~assets/theme-images/ross/h5-link-entry-feedback-active.png);
+          }
+          &.icon-challenge {
+            background-image: url(~assets/theme-images/ross/h5-link-entry-challenge.png);
+          }
         }
-        &.icon-challenge {
-          background-image: url(~assets/theme-images/ross/h5-link-entry-challenge.png);
+        .text {
+          font-size: 3.4vw;
+          color: #282828;
         }
       }
-      .text {
-        font-size: 3.4vw;
-        color: #282828;
-      }
     }
   }
 }

nuxt.config.js

@@ -85,15 +85,16 @@ export default {
     baseURL: process.env.BASE_URL,
   },
 
+  styleResources: {
+    scss: ['~/assets/css/utils.scss', '~/assets/themes/themeMixin.scss'],
+  },
+
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     extractCSS: true,
     filenames: {
       chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
     },
-    styleResources: {
-      scss: '~/assets/themes/themeMixin.scss',
-    },
   },
 
   // 配置 Nuxt.js 应用是开发模式还是生产模式

pages/_template/app/center/device/index.vue

@@ -96,14 +96,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 @media screen and (min-width: 768px) {
   .page-content {
     width: 1000px;

pages/_template/app/docs/_fileId.vue

@@ -97,15 +97,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 // pc 端
 @media screen and (min-width: 768px) {
   ::v-deep {

pages/_template/app/docs/article-detail.vue

@@ -17,14 +17,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
 // pc 端
 @media screen and (min-width: 768px) {
   .page {

pages/_template/hyt/center/device/index.vue

@@ -98,14 +98,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 @media screen and (min-width: 768px) {
   .page {
     background: #fff;

pages/_template/hyt/docs/_fileId.vue

@@ -97,15 +97,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 // pc 端
 @media screen and (min-width: 768px) {
   ::v-deep {

pages/_template/hyt/docs/article-detail.vue

@@ -17,14 +17,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
 // pc 端
 @media screen and (min-width: 768px) {
   .page {

pages/_template/ldm/docs/_fileId.vue

@@ -101,15 +101,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 // pc 端
 @media screen and (min-width: 768px) {
   ::v-deep {

pages/_template/ldm/docs/article-detail.vue

@@ -17,14 +17,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
 // pc 端
 @media screen and (min-width: 768px) {
   .page {

pages/_template/ph/approve/club/detail.vue

@@ -76,215 +76,202 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    width: 1200px;
-    height: 612px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 80px;
-    background-color: #fff;
-    box-sizing: border-box;
-    padding: 16px;
-    padding-right: 0;
-  }
+    @include useTheme() {
+      position: relative;
+      width: 1200px;
+      height: 612px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 80px;
+      background-color: #fff;
+      box-sizing: border-box;
+      padding: 16px;
+      padding-right: 0;
 
-  .page-title {
-    position: absolute;
-    font-size: 24px;
-    color: #333;
-    top: -50px;
-    left: 0;
-  }
+      .page-title {
+        position: absolute;
+        font-size: 24px;
+        color: #333;
+        top: -50px;
+        left: 0;
+      }
 
-  .page-top {
-    .swiper {
-      width: 580px;
-      height: 580px;
-      background: #f7f7f7;
-      ::v-deep {
-        img {
+      .page-top {
+        .swiper {
           width: 580px;
           height: 580px;
+          background: #f7f7f7;
+          ::v-deep {
+            img {
+              width: 580px;
+              height: 580px;
+            }
+          }
         }
       }
-    }
-  }
 
-  .page-content {
-    width: 580px;
-    overflow-y: auto;
+      .page-content {
+        width: 580px;
+        overflow-y: auto;
 
-    .auth {
-      width: 100%;
-      min-height: 114px;
-      @include themify($themes) {
-        background: themed('color');
-      }
-      box-sizing: border-box;
-      padding: 24px;
+        .auth {
+          width: 100%;
+          min-height: 114px;
+          background: fetch('color');
+          box-sizing: border-box;
+          padding: 24px;
 
-      .auth-icon {
-        height: 28px;
-        background: url(~assets/theme-images/ross/pc-icon-auth.png) no-repeat
-          left center;
-        background-size: auto 28px;
-      }
+          .auth-icon {
+            height: 28px;
+            background: url(~assets/theme-images/ross/pc-icon-auth.png)
+              no-repeat left center;
+            background-size: auto 28px;
+          }
 
-      .auth-info {
-        font-size: 0;
-        margin-top: 10px;
-        span {
-          font-size: 20px;
-          color: #fff;
+          .auth-info {
+            font-size: 0;
+            margin-top: 10px;
+            span {
+              font-size: 20px;
+              color: #fff;
+            }
+          }
         }
-      }
-    }
 
-    .club-info {
-      padding: 32px 24px;
-      @include themify($themes) {
-        background: themed('cover-color');
-      }
+        .club-info {
+          padding: 32px 24px;
+          background: fetch('cover-color');
 
-      .info {
-        width: 320px;
-        .name {
-          font-size: 24px;
-          color: #101010;
-          font-weight: bold;
-          margin-bottom: 34px;
-        }
-        .mobile,
-        .address {
-          position: relative;
-          padding-left: 24px;
-          margin-top: 16px;
-          line-height: 24px;
-          font-size: 16px;
-          color: #404040;
+          .info {
+            width: 320px;
+            .name {
+              font-size: 24px;
+              color: #101010;
+              font-weight: bold;
+              margin-bottom: 34px;
+            }
+            .mobile,
+            .address {
+              position: relative;
+              padding-left: 24px;
+              margin-top: 16px;
+              line-height: 24px;
+              font-size: 16px;
+              color: #404040;
 
-          &::after {
-            content: '';
-            display: block;
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            left: 0;
-            top: 4px;
-            background-size: 16px;
-            background-repeat: no-repeat;
-          }
-        }
-        .mobile {
-          cursor: pointer;
-          &::after {
-            @include themify($themes) {
-              background-image: themed('pc-icon-mobile');
+              &::after {
+                content: '';
+                display: block;
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                left: 0;
+                top: 4px;
+                background-size: 16px;
+                background-repeat: no-repeat;
+              }
             }
-          }
-        }
-        .address {
-          &::after {
-            @include themify($themes) {
-              background-image: themed('h5-icon-address');
+            .mobile {
+              cursor: pointer;
+              &::after {
+                background-image: fetch('pc-icon-mobile');
+              }
+            }
+            .address {
+              &::after {
+                background-image: fetch('h5-icon-address');
+              }
             }
           }
-        }
-      }
 
-      .logo {
-        position: relative;
-        width: 114px;
-        height: 114px;
-        border-radius: 50% 50% 0 50%;
-        overflow: hidden;
+          .logo {
+            position: relative;
+            width: 114px;
+            height: 114px;
+            border-radius: 50% 50% 0 50%;
+            overflow: hidden;
 
-        &::after {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          content: '';
-          display: block;
-          width: 23px;
-          height: 23px;
-          background: url(~assets/theme-images/common/pc-icon-avatar-v.png)
-            no-repeat center;
-          background-size: 23px;
-        }
-      }
-      .navigation {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 72px;
-        height: 32px;
-        border-radius: 4px;
-
-        font-size: 16px;
-        @include themify($themes) {
-          color: themed('color');
-          border: 1px solid themed('color');
-          background-color: themed('sub-color');
-        }
-        cursor: pointer;
-
-        &::after {
-          content: '';
-          display: block;
-          width: 16px;
-          height: 16px;
-          margin-left: 4px;
-          @include themify($themes) {
-            background: themed('pc-icon-navigation') no-repeat center;
+            &::after {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              content: '';
+              display: block;
+              width: 23px;
+              height: 23px;
+              background: url(~assets/theme-images/common/pc-icon-avatar-v.png)
+                no-repeat center;
+              background-size: 23px;
+            }
           }
-          background-size: 16px;
-        }
-      }
-      .distance {
-        font-size: 14px;
-        color: #404040;
-      }
-    }
+          .navigation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 72px;
+            height: 32px;
+            border-radius: 4px;
+            font-size: 16px;
+            color: fetch('color');
+            border: 1px solid fetch('color');
+            background-color: fetch('sub-color');
+            cursor: pointer;
 
-    .device-list {
-      .title {
-        padding: 16px;
-        font-size: 20px;
-        font-weight: bold;
-        color: #404040;
-        background-color: #f3f5f6;
-      }
-
-      .list {
-        padding-right: 16px;
-      }
-
-      .device {
-        padding: 16px 0;
-        border-bottom: 1px solid #d8d8d8;
-        .info {
-          .name {
-            font-size: 18px;
-            color: #101010;
+            &::after {
+              content: '';
+              display: block;
+              width: 16px;
+              height: 16px;
+              margin-left: 4px;
+              background: fetch('pc-icon-navigation') no-repeat center;
+              background-size: 16px;
+            }
           }
-          .code {
-            margin-top: 16px;
+          .distance {
             font-size: 14px;
-            color: #666;
+            color: #404040;
           }
         }
-        .detail {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 80px;
-          height: 32px;
-          border-radius: 4px;
-          font-size: 14px;
-          color: #ffffff;
-          cursor: pointer;
-          @include themify($themes) {
-            background: themed('color');
+
+        .device-list {
+          .title {
+            padding: 16px;
+            font-size: 20px;
+            font-weight: bold;
+            color: #404040;
+            background-color: #f3f5f6;
+          }
+
+          .list {
+            padding-right: 16px;
+          }
+
+          .device {
+            padding: 16px 0;
+            border-bottom: 1px solid #d8d8d8;
+            .info {
+              .name {
+                font-size: 18px;
+                color: #101010;
+              }
+              .code {
+                margin-top: 16px;
+                font-size: 14px;
+                color: #666;
+              }
+            }
+            .detail {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 80px;
+              height: 32px;
+              border-radius: 4px;
+              font-size: 14px;
+              color: #ffffff;
+              cursor: pointer;
+              background: fetch('color');
+            }
           }
         }
       }
@@ -294,165 +281,157 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-title {
-    display: none;
-  }
-
-  .page-top {
-    .swiper {
-      height: 100vw;
+  .page {
+    @include useTheme() {
+      .page-title {
+        display: none;
+      }
 
-      background: #f7f7f7;
-      ::v-deep {
-        img {
+      .page-top {
+        .swiper {
           height: 100vw;
-        }
-      }
-    }
-  }
 
-  .page-content {
-    .divider {
-      height: 3.2vw;
-      background-color: #f7f7f7;
-    }
-    .club-info {
-      padding: 4vw;
-      @include themify($themes) {
-        background: themed('cover-color');
+          background: #f7f7f7;
+          ::v-deep {
+            img {
+              height: 100vw;
+            }
+          }
+        }
       }
 
-      .info {
-        width: 67vw;
-        .name {
-          font-size: 4.8vw;
-          color: #101010;
-          font-weight: bold;
-          margin-bottom: 4vw;
+      .page-content {
+        .divider {
+          height: 3.2vw;
+          background-color: #f7f7f7;
         }
-        .mobile,
-        .address {
-          position: relative;
-          padding-left: 5vw;
-          margin-top: 1.6vw;
-          line-height: 5vw;
-          font-size: 3.2vw;
-          color: #404040;
+        .club-info {
+          padding: 4vw;
+          background: fetch('cover-color');
 
-          &::after {
-            content: '';
-            display: block;
-            width: 4vw;
-            height: 4vw;
-            position: absolute;
-            left: 0;
-            top: 0.5vw;
-            background-size: 4vw 4vw;
-            background-repeat: no-repeat;
-          }
-        }
-        .mobile {
-          &::after {
-            @include themify($themes) {
-              background-image: themed('h5-icon-mobile');
+          .info {
+            width: 67vw;
+            .name {
+              font-size: 4.8vw;
+              color: #101010;
+              font-weight: bold;
+              margin-bottom: 4vw;
             }
-          }
-        }
-        .address {
-          &::after {
-            @include themify($themes) {
-              background-image: themed('h5-icon-address');
+            .mobile,
+            .address {
+              position: relative;
+              padding-left: 5vw;
+              margin-top: 1.6vw;
+              line-height: 5vw;
+              font-size: 3.2vw;
+              color: #404040;
+
+              &::after {
+                content: '';
+                display: block;
+                width: 4vw;
+                height: 4vw;
+                position: absolute;
+                left: 0;
+                top: 0.5vw;
+                background-size: 4vw 4vw;
+                background-repeat: no-repeat;
+              }
+            }
+            .mobile {
+              &::after {
+                background-image: fetch('h5-icon-mobile');
+              }
+            }
+            .address {
+              &::after {
+                background-image: fetch('h5-icon-address');
+              }
             }
           }
-        }
-      }
 
-      .logo {
-        position: relative;
-        width: 18vw;
-        height: 18vw;
-        border-radius: 9vw 9vw 0 9vw;
-        overflow: hidden;
+          .logo {
+            position: relative;
+            width: 18vw;
+            height: 18vw;
+            border-radius: 9vw 9vw 0 9vw;
+            overflow: hidden;
 
-        &::after {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          content: '';
-          display: block;
-          width: 3.6vw;
-          height: 3.6vw;
-          background: url(~assets/theme-images/common/h5-icon-avatar-v.png)
-            no-repeat center;
-          background-size: 3.6vw;
-        }
-      }
-      .navigation {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 14.4vw;
-        height: 6.4vw;
-        border-radius: 0.4vw;
-        font-size: 3.2vw;
-        @include themify($themes) {
-          color: themed('color');
-          border: 1px solid themed('color');
-          background-color: themed('sub-color');
-        }
-
-        &::after {
-          content: '';
-          display: block;
-          width: 3.6vw;
-          height: 3.6vw;
-          margin-left: 0.4vw;
-          @include themify($themes) {
-            background: themed('h5-icon-navigation') no-repeat center;
-            background-size: 3.6vw;
+            &::after {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              content: '';
+              display: block;
+              width: 3.6vw;
+              height: 3.6vw;
+              background: url(~assets/theme-images/common/h5-icon-avatar-v.png)
+                no-repeat center;
+              background-size: 3.6vw;
+            }
           }
-        }
-      }
-      .distance {
-        font-size: 3vw;
-        color: #404040;
-      }
-    }
+          .navigation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 14.4vw;
+            height: 6.4vw;
+            border-radius: 0.4vw;
+            font-size: 3.2vw;
+            color: fetch('color');
+            border: 1px solid fetch('color');
+            background-color: fetch('sub-color');
 
-    .device-list {
-      .title {
-        padding: 4vw;
-        padding-bottom: 0;
-        font-size: 4vw;
-        font-weight: bold;
-        color: #101010;
-      }
-      .device {
-        padding: 4vw 0;
-        margin: 0 4vw;
-        border-bottom: 0.4vw solid #d8d8d8;
-        .info {
-          .name {
-            font-size: 3.6vw;
-            color: #101010;
+            &::after {
+              content: '';
+              display: block;
+              width: 3.6vw;
+              height: 3.6vw;
+              margin-left: 0.4vw;
+              background: fetch('h5-icon-navigation') no-repeat center;
+              background-size: 3.6vw;
+            }
           }
-          .code {
-            margin-top: 3.2vw;
+          .distance {
             font-size: 3vw;
-            color: #666;
+            color: #404040;
           }
         }
-        .detail {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 15.8vw;
-          height: 6.4vw;
-          border-radius: 0.4vw;
-          font-size: 3vw;
-          color: #ffffff;
-          @include themify($themes) {
-            background: themed('color');
+
+        .device-list {
+          .title {
+            padding: 4vw;
+            padding-bottom: 0;
+            font-size: 4vw;
+            font-weight: bold;
+            color: #101010;
+          }
+          .device {
+            padding: 4vw 0;
+            margin: 0 4vw;
+            border-bottom: 0.4vw solid #d8d8d8;
+            .info {
+              .name {
+                font-size: 3.6vw;
+                color: #101010;
+              }
+              .code {
+                margin-top: 3.2vw;
+                font-size: 3vw;
+                color: #666;
+              }
+            }
+            .detail {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 15.8vw;
+              height: 6.4vw;
+              border-radius: 0.4vw;
+              font-size: 3vw;
+              color: #ffffff;
+              background: fetch('color');
+            }
           }
         }
       }

pages/_template/ph/approve/club/index.vue

@@ -176,145 +176,144 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 420px;
-    @include themify($themes) {
-      background: themed('pc-banner-club');
-    }
-    background-size: auto 420px;
-
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-
-    .logo,
-    .name {
-      transform: translateY(-60px);
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 260px;
-      transform: translateX(-50%);
-    }
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
 
-    .city {
-      position: absolute;
-      left: 50%;
-      top: 320px;
-      transform: translateX(-50%);
-      z-index: 9;
-    }
+      .page-top {
+        height: 420px;
+        background: fetch('pc-banner-club');
+        background-size: auto 420px;
 
-    .title {
-      font-size: 16px;
-      color: #404040;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+        .logo,
+        .name {
+          transform: translateY(-60px);
         }
       }
-    }
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 260px;
+          transform: translateX(-50%);
+        }
 
-    .list {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
+        .city {
+          position: absolute;
+          left: 50%;
+          top: 320px;
+          transform: translateX(-50%);
+          z-index: 9;
+        }
 
-      .empty {
-        width: 390px;
-      }
+        .title {
+          font-size: 16px;
+          color: #404040;
 
-      .section {
-        width: 390px;
-        height: 108px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 12px;
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+          span {
+            color: fetch('color');
+          }
         }
 
-        .cover {
-          display: block;
-          width: 84px;
-          height: 84px;
-        }
-        .info {
-          position: relative;
-          margin-left: 12px;
-          .name {
-            width: 200px;
-            font-size: 16px;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 16px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .mobile,
-          .address {
-            width: 268px;
-            position: relative;
-            font-size: 14px;
-            color: #404040;
-            padding-left: 24px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            &::after {
-              content: '';
-              display: block;
-              width: 16px;
-              height: 16px;
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              background-size: 16px;
-              background-repeat: no-repeat;
-            }
+        .list {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+
+          .empty {
+            width: 390px;
           }
-          .mobile {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+
+          .section {
+            width: 390px;
+            height: 108px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
             }
-          }
-          .address {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-address.png);
+
+            .cover {
+              display: block;
+              width: 84px;
+              height: 84px;
             }
-          }
+            .info {
+              position: relative;
+              margin-left: 12px;
+              .name {
+                width: 200px;
+                font-size: 16px;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 16px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .mobile,
+              .address {
+                width: 268px;
+                position: relative;
+                font-size: 14px;
+                color: #404040;
+                padding-left: 24px;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 16px;
+                  height: 16px;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  background-size: 16px;
+                  background-repeat: no-repeat;
+                }
+              }
+              .mobile {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+                }
+              }
+              .address {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-address.png);
+                }
+              }
 
-          .distance {
-            position: absolute;
-            font-size: 12px;
-            color: #404040;
-            top: 2px;
-            right: 0;
+              .distance {
+                position: absolute;
+                font-size: 12px;
+                color: #404040;
+                top: 2px;
+                right: 0;
+              }
+            }
           }
         }
       }
@@ -324,123 +323,123 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-club');
-    }
-    background-size: auto 46vw;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-club');
+        background-size: auto 46vw;
 
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 0;
-      transform: translate(-50%, -50%);
-    }
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        position: relative;
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%, -50%);
+        }
 
-    .city {
-      position: relative;
-      z-index: 9;
-      padding-top: 12vw;
-    }
+        .city {
+          position: relative;
+          z-index: 9;
+          padding-top: 12vw;
+        }
 
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
 
-      .section {
-        width: 93.6vw;
-        height: 26vw;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 3.2vw;
+          .section {
+            width: 93.6vw;
+            height: 26vw;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 3.2vw;
 
-        .cover {
-          display: block;
-          width: 19.6vw;
-          height: 19.6vw;
-        }
-        .info {
-          position: relative;
-          margin-left: 3.2vw;
-          .name {
-            width: 48vw;
-            font-size: 4vw;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 4vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .mobile,
-          .address {
-            width: 66vw;
-            position: relative;
-            font-size: 3vw;
-            color: #404040;
-            padding-left: 5vw;
-            line-height: 5vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            &::after {
-              content: '';
+            .cover {
               display: block;
-              width: 4vw;
-              height: 4vw;
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              background-size: 4vw 4vw;
-              background-repeat: no-repeat;
-            }
-          }
-          .mobile {
-            &::after {
-              background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+              width: 19.6vw;
+              height: 19.6vw;
             }
-          }
-          .address {
-            &::after {
-              background-image: url(~assets/theme-images/common/h5-icon-address.png);
-            }
-          }
+            .info {
+              position: relative;
+              margin-left: 3.2vw;
+              .name {
+                width: 48vw;
+                font-size: 4vw;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 4vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .mobile,
+              .address {
+                width: 66vw;
+                position: relative;
+                font-size: 3vw;
+                color: #404040;
+                padding-left: 5vw;
+                line-height: 5vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 4vw;
+                  height: 4vw;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  background-size: 4vw 4vw;
+                  background-repeat: no-repeat;
+                }
+              }
+              .mobile {
+                &::after {
+                  background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+                }
+              }
+              .address {
+                &::after {
+                  background-image: url(~assets/theme-images/common/h5-icon-address.png);
+                }
+              }
 
-          .distance {
-            position: absolute;
-            font-size: 3vw;
-            color: #404040;
-            top: 0.8vw;
-            right: 0;
+              .distance {
+                position: absolute;
+                font-size: 3vw;
+                color: #404040;
+                top: 0.8vw;
+                right: 0;
+              }
+            }
           }
         }
       }

pages/_template/ph/approve/club/star-list.vue

@@ -56,145 +56,143 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 420px;
-    @include themify($themes) {
-      background: themed('pc-banner-club');
-    }
-    background-size: auto 420px;
-
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-
-    .logo,
-    .name {
-      transform: translateY(-60px);
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 260px;
-      transform: translateX(-50%);
-    }
-
-    .city {
-      position: absolute;
-      left: 50%;
-      top: 320px;
-      transform: translateX(-50%);
-      z-index: 9;
-    }
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
+      .page-top {
+        height: 420px;
+        background: fetch('pc-banner-club');
+        background-size: auto 420px;
 
-    .title {
-      font-size: 16px;
-      color: #404040;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+        .logo,
+        .name {
+          transform: translateY(-60px);
         }
       }
-    }
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 260px;
+          transform: translateX(-50%);
+        }
 
-    .list {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
+        .city {
+          position: absolute;
+          left: 50%;
+          top: 320px;
+          transform: translateX(-50%);
+          z-index: 9;
+        }
 
-      .empty {
-        width: 390px;
-      }
+        .title {
+          font-size: 16px;
+          color: #404040;
 
-      .section {
-        width: 390px;
-        height: 108px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 12px;
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+          span {
+            color: fetch('color');
+          }
         }
 
-        .cover {
-          display: block;
-          width: 84px;
-          height: 84px;
-        }
-        .info {
-          position: relative;
-          margin-left: 12px;
-          .name {
-            width: 200px;
-            font-size: 16px;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 16px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .mobile,
-          .address {
-            width: 268px;
-            position: relative;
-            font-size: 14px;
-            color: #404040;
-            padding-left: 24px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            &::after {
-              content: '';
-              display: block;
-              width: 16px;
-              height: 16px;
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              background-size: 16px;
-              background-repeat: no-repeat;
-            }
+        .list {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+
+          .empty {
+            width: 390px;
           }
-          .mobile {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+
+          .section {
+            width: 390px;
+            height: 108px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
             }
-          }
-          .address {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-address.png);
+
+            .cover {
+              display: block;
+              width: 84px;
+              height: 84px;
             }
-          }
+            .info {
+              position: relative;
+              margin-left: 12px;
+              .name {
+                width: 200px;
+                font-size: 16px;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 16px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .mobile,
+              .address {
+                width: 268px;
+                position: relative;
+                font-size: 14px;
+                color: #404040;
+                padding-left: 24px;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 16px;
+                  height: 16px;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  background-size: 16px;
+                  background-repeat: no-repeat;
+                }
+              }
+              .mobile {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+                }
+              }
+              .address {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-address.png);
+                }
+              }
 
-          .distance {
-            position: absolute;
-            font-size: 12px;
-            color: #404040;
-            top: 2px;
-            right: 0;
+              .distance {
+                position: absolute;
+                font-size: 12px;
+                color: #404040;
+                top: 2px;
+                right: 0;
+              }
+            }
           }
         }
       }
@@ -204,123 +202,123 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-club');
-    }
-    background-size: auto 46vw;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-club');
+        background-size: auto 46vw;
 
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 0;
-      transform: translate(-50%, -50%);
-    }
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        position: relative;
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%, -50%);
+        }
 
-    .city {
-      position: relative;
-      z-index: 9;
-      padding-top: 12vw;
-    }
+        .city {
+          position: relative;
+          z-index: 9;
+          padding-top: 12vw;
+        }
 
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
 
-      .section {
-        width: 93.6vw;
-        height: 26vw;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 3.2vw;
+          .section {
+            width: 93.6vw;
+            height: 26vw;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 3.2vw;
 
-        .cover {
-          display: block;
-          width: 19.6vw;
-          height: 19.6vw;
-        }
-        .info {
-          position: relative;
-          margin-left: 3.2vw;
-          .name {
-            width: 48vw;
-            font-size: 4vw;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 4vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .mobile,
-          .address {
-            width: 66vw;
-            position: relative;
-            font-size: 3vw;
-            color: #404040;
-            padding-left: 5vw;
-            line-height: 5vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            &::after {
-              content: '';
+            .cover {
               display: block;
-              width: 4vw;
-              height: 4vw;
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              background-size: 4vw 4vw;
-              background-repeat: no-repeat;
-            }
-          }
-          .mobile {
-            &::after {
-              background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+              width: 19.6vw;
+              height: 19.6vw;
             }
-          }
-          .address {
-            &::after {
-              background-image: url(~assets/theme-images/common/h5-icon-address.png);
-            }
-          }
+            .info {
+              position: relative;
+              margin-left: 3.2vw;
+              .name {
+                width: 48vw;
+                font-size: 4vw;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 4vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .mobile,
+              .address {
+                width: 66vw;
+                position: relative;
+                font-size: 3vw;
+                color: #404040;
+                padding-left: 5vw;
+                line-height: 5vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 4vw;
+                  height: 4vw;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  background-size: 4vw 4vw;
+                  background-repeat: no-repeat;
+                }
+              }
+              .mobile {
+                &::after {
+                  background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+                }
+              }
+              .address {
+                &::after {
+                  background-image: url(~assets/theme-images/common/h5-icon-address.png);
+                }
+              }
 
-          .distance {
-            position: absolute;
-            font-size: 3vw;
-            color: #404040;
-            top: 0.8vw;
-            right: 0;
+              .distance {
+                position: absolute;
+                font-size: 3vw;
+                color: #404040;
+                top: 0.8vw;
+                right: 0;
+              }
+            }
           }
         }
       }

pages/_template/ph/approve/device/detail.vue

@@ -99,15 +99,15 @@ export default {
 <style lang="scss" scoped>
 ::v-deep {
   .swiper-pagination-bullet {
-    @include themify($themes) {
-      background: themed('color') !important;
+    @include useTheme() {
+      background: fetch('color') !important;
     }
   }
 
   .simple-swiper {
     .swiper-pagination-bullet-active {
-      @include themify($themes) {
-        background: themed('color') !important;
+      @include useTheme() {
+        background: fetch('color') !important;
       }
     }
   }
@@ -126,288 +126,286 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .device-detail {
-    margin-bottom: 48px;
-
-    .auth-card-content {
-      width: 100vw;
-      height: 100vh;
-      position: fixed;
-      left: 0;
-      top: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 9;
-      .auth-card-popup {
-        position: relative;
-        width: 622px;
-
-        img {
-          display: block;
-          width: 100%;
-          height: auto;
-        }
-
-        .el-icon-circle-close {
-          position: absolute;
-          top: -50px;
-          right: 0;
-          font-size: 32px;
-          color: #fff;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .detail-title {
-      font-size: 24px;
-      color: #282828;
-      margin: 32px auto 24px;
-      width: 1200px;
-    }
+    @include useTheme() {
+      margin-bottom: 48px;
 
-    .page-top,
-    .page-content {
-      width: 1200px;
-      margin: 0 auto;
-      background: #fff;
-    }
-    .page-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      padding: 24px;
-      padding-right: 40px;
-      .swiper-body {
-        position: relative;
-        width: 540px;
-        height: 540px;
-        background: #f7f7f7;
-        .device-image {
-          width: 100%;
-          height: 100%;
-        }
-
-        .auth-seal {
-          position: absolute;
-          width: 70px;
-          height: 70px;
-          background: url(~assets/theme-images/ross/pc-icon-auth-seal.png)
-            no-repeat center;
-          background-size: 70px;
-          right: 24px;
-          bottom: 24px;
-          z-index: 2;
-        }
+      .auth-card-content {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9;
+        .auth-card-popup {
+          position: relative;
+          width: 622px;
 
-        .auth-card {
-          position: absolute;
-          width: auto;
-          height: 110px;
-          display: block;
-          bottom: 24px;
-          left: 24px;
-          z-index: 2;
-          cursor: pointer;
-        }
+          img {
+            display: block;
+            width: 100%;
+            height: auto;
+          }
 
-        .auth-logo {
-          position: absolute;
-          max-width: 120px;
-          max-height: 120px;
-          top: 24px;
-          left: 24px;
-          z-index: 2;
+          .el-icon-circle-close {
+            position: absolute;
+            top: -50px;
+            right: 0;
+            font-size: 32px;
+            color: #fff;
+            cursor: pointer;
+          }
         }
       }
-      .device-info {
-        width: 572px;
-        position: relative;
 
-        .section {
-          width: 440px;
-          word-break: break-all;
-        }
+      .detail-title {
+        font-size: 24px;
+        color: #282828;
+        margin: 32px auto 24px;
+        width: 1200px;
+      }
 
-        .logo {
-          width: 114px;
-          height: 114px;
-          border-radius: 50%;
-          // background: #d8d8d8;
-          border: 1px solid #d8d8d8;
-          // box-sizing: border-box;
-          position: absolute;
-          right: 0;
-          top: 0;
-
-          .logo-swiper {
-            width: 112px;
-            height: 112px;
-            overflow: hidden;
-            border-radius: 50%;
+      .page-top,
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        background: #fff;
+      }
+      .page-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 24px;
+        padding-right: 40px;
+        .swiper-body {
+          position: relative;
+          width: 540px;
+          height: 540px;
+          background: #f7f7f7;
+          .device-image {
+            width: 100%;
+            height: 100%;
           }
 
-          ::v-deep {
-            img {
-              width: 112px;
-              height: 112px;
-              border-radius: 50%;
-            }
+          .auth-seal {
+            position: absolute;
+            width: 70px;
+            height: 70px;
+            background: url(~assets/theme-images/ross/pc-icon-auth-seal.png)
+              no-repeat center;
+            background-size: 70px;
+            right: 24px;
+            bottom: 24px;
+            z-index: 2;
           }
 
-          &::after {
-            content: '';
+          .auth-card {
             position: absolute;
-            z-index: 1;
-            right: 6px;
-            bottom: 0;
+            width: auto;
+            height: 110px;
             display: block;
-            width: 24px;
-            height: 24px;
-            background: url(~assets/theme-images/ross/pc-icon-auth-ren.png)
-              no-repeat center;
-            background-size: 23px;
+            bottom: 24px;
+            left: 24px;
+            z-index: 2;
+            cursor: pointer;
           }
 
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            // background: pink;
-            border-radius: 50%;
+          .auth-logo {
+            position: absolute;
+            max-width: 120px;
+            max-height: 120px;
+            top: 24px;
+            left: 24px;
+            z-index: 2;
           }
         }
+        .device-info {
+          width: 572px;
+          position: relative;
 
-        .name {
-          font-size: 24px;
-          color: #282828;
-          line-height: 1.6;
-          margin-bottom: 24px;
-          font-weight: bold;
-        }
+          .section {
+            width: 440px;
+            word-break: break-all;
+          }
+
+          .logo {
+            width: 114px;
+            height: 114px;
+            border-radius: 50%;
+            // background: #d8d8d8;
+            border: 1px solid #d8d8d8;
+            // box-sizing: border-box;
+            position: absolute;
+            right: 0;
+            top: 0;
+
+            .logo-swiper {
+              width: 112px;
+              height: 112px;
+              overflow: hidden;
+              border-radius: 50%;
+            }
+
+            ::v-deep {
+              img {
+                width: 112px;
+                height: 112px;
+                border-radius: 50%;
+              }
+            }
 
-        .row,
-        .sncode,
-        .maker {
-          margin-bottom: 16px;
-        }
-        .row {
-          line-height: 24px;
-          i {
-            position: relative;
-            margin: 0 16px;
             &::after {
               content: '';
-              display: block;
-              width: 1px;
-              height: 16px;
-              background: #999999;
               position: absolute;
-              top: 0;
-              left: 0;
+              z-index: 1;
+              right: 6px;
+              bottom: 0;
+              display: block;
+              width: 24px;
+              height: 24px;
+              background: url(~assets/theme-images/ross/pc-icon-auth-ren.png)
+                no-repeat center;
+              background-size: 23px;
+            }
+
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+              // background: pink;
+              border-radius: 50%;
             }
           }
 
-          span {
-            font-size: 18px;
-            color: #999999;
+          .name {
+            font-size: 24px;
+            color: #282828;
+            line-height: 1.6;
+            margin-bottom: 24px;
+            font-weight: bold;
           }
-        }
 
-        .sncode.mobile {
-          display: none;
-        }
+          .row,
+          .sncode,
+          .maker {
+            margin-bottom: 16px;
+          }
+          .row {
+            line-height: 24px;
+            i {
+              position: relative;
+              margin: 0 16px;
+              &::after {
+                content: '';
+                display: block;
+                width: 1px;
+                height: 16px;
+                background: #999999;
+                position: absolute;
+                top: 0;
+                left: 0;
+              }
+            }
 
-        .sncode.pc {
-          font-size: 18px;
-          color: #282828;
-        }
-        .supplier,
-        .maker {
-          font-size: 20px;
-          color: #282828;
-        }
+            span {
+              font-size: 18px;
+              color: #999999;
+            }
+          }
 
-        .auth {
-          width: 100%;
-          min-height: 114px;
-          @include themify($themes) {
-            background: themed('color') !important;
+          .sncode.mobile {
+            display: none;
           }
-          margin-top: 56px;
-          box-sizing: border-box;
-          padding: 24px;
 
-          .auth-icon {
-            height: 28px;
-            background: url(~assets/theme-images/ross/pc-icon-auth.png)
-              no-repeat left center;
-            background-size: auto 28px;
-            margin-bottom: 10px;
+          .sncode.pc {
+            font-size: 18px;
+            color: #282828;
+          }
+          .supplier,
+          .maker {
+            font-size: 20px;
+            color: #282828;
           }
 
-          .auth-info {
-            font-size: 0;
-            span {
-              font-size: 20px;
-              color: #fff;
+          .auth {
+            width: 100%;
+            min-height: 114px;
+            background: fetch('color') !important;
+            margin-top: 56px;
+            box-sizing: border-box;
+            padding: 24px;
+
+            .auth-icon {
+              height: 28px;
+              background: url(~assets/theme-images/ross/pc-icon-auth.png)
+                no-repeat left center;
+              background-size: auto 28px;
+              margin-bottom: 10px;
+            }
+
+            .auth-info {
+              font-size: 0;
+              span {
+                font-size: 20px;
+                color: #fff;
+              }
             }
           }
         }
       }
-    }
-    .page-content {
-      margin-top: 16px;
-      box-sizing: border-box;
-      padding: 24px;
-      .device-params {
-        .title {
-          font-size: 28px;
-          color: #282828;
-          font-weight: bold;
-        }
-        .line {
-          height: 1px;
-          background: #ececec;
-          position: relative;
-          margin-top: 10px;
-          margin-bottom: 20px;
-          &::after {
-            content: '';
-            position: absolute;
-            width: 73px;
-            height: 2px;
-            @include themify($themes) {
-              background: themed('color') !important;
+      .page-content {
+        margin-top: 16px;
+        box-sizing: border-box;
+        padding: 24px;
+        .device-params {
+          .title {
+            font-size: 28px;
+            color: #282828;
+            font-weight: bold;
+          }
+          .line {
+            height: 1px;
+            background: #ececec;
+            position: relative;
+            margin-top: 10px;
+            margin-bottom: 20px;
+            &::after {
+              content: '';
+              position: absolute;
+              width: 73px;
+              height: 2px;
+              background: fetch('color') !important;
+              left: 0;
+              bottom: 0;
             }
-            left: 0;
-            bottom: 0;
           }
-        }
-        .params {
-          width: 100%;
-          .row {
-            display: table-row;
+          .params {
             width: 100%;
-          }
+            .row {
+              display: table-row;
+              width: 100%;
+            }
 
-          .col {
-            display: table-cell;
-            font-size: 16px;
-            padding: 12px 0;
+            .col {
+              display: table-cell;
+              font-size: 16px;
+              padding: 12px 0;
 
-            &:nth-child(2n-1) {
-              color: #999999;
-              white-space: nowrap;
-            }
+              &:nth-child(2n-1) {
+                color: #999999;
+                white-space: nowrap;
+              }
 
-            &:nth-child(2n) {
-              color: #282828;
-              padding-left: 12px;
-            }
+              &:nth-child(2n) {
+                color: #282828;
+                padding-left: 12px;
+              }
 
-            &:nth-child(3) {
-              padding-left: 100px;
+              &:nth-child(3) {
+                padding-left: 100px;
+              }
             }
           }
         }
@@ -419,289 +417,289 @@ export default {
 // 移动端
 @media screen and (max-width: 768px) {
   .device-detail {
-    .detail-title {
-      display: none;
-    }
-
-    .auth-card-content {
-      width: 100vw;
-      height: 100vh;
-      position: fixed;
-      left: 0;
-      top: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 9;
-      .auth-card-popup {
-        position: relative;
-        width: 86vw;
-
-        img {
-          display: block;
-          width: 100%;
-          height: auto;
-        }
-
-        .el-icon-circle-close {
-          position: absolute;
-          top: -8vw;
-          right: 0;
-          font-size: 7vw;
-          color: #fff;
-          cursor: pointer;
-        }
+    @include useTheme() {
+      .detail-title {
+        display: none;
       }
-    }
 
-    .page-top,
-    .page-content {
-      margin: 0 auto;
-      background: #fff;
-    }
-    .page-top {
-      .swiper-body {
-        position: relative;
+      .auth-card-content {
         width: 100vw;
-        height: 100vw;
-        background: #f7f7f7;
-
-        .device-image {
-          width: 100%;
-          height: 100%;
-        }
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9;
+        .auth-card-popup {
+          position: relative;
+          width: 86vw;
 
-        ::v-deep {
           img {
-            width: 100vw;
-            height: 100vw;
+            display: block;
+            width: 100%;
+            height: auto;
           }
-        }
 
-        .auth-seal {
-          position: absolute;
-          width: 13.8vw;
-          height: 13.8vw;
-          background: url(~assets/theme-images/ross/h5-icon-auth-seal.png)
-            no-repeat center;
-          background-size: 13.8vw;
-          right: 4vw;
-          bottom: 4vw;
-          z-index: 2;
-        }
-
-        .auth-card {
-          position: absolute;
-          width: auto;
-          height: 20.6vw;
-          display: block;
-          bottom: 4vw;
-          left: 4vw;
-          z-index: 2;
-        }
-
-        .auth-logo {
-          position: absolute;
-          max-width: 18vw;
-          max-height: 18vw;
-          top: 4vw;
-          left: 4vw;
-          z-index: 2;
+          .el-icon-circle-close {
+            position: absolute;
+            top: -8vw;
+            right: 0;
+            font-size: 7vw;
+            color: #fff;
+            cursor: pointer;
+          }
         }
       }
-      .device-info {
-        position: relative;
 
-        .section {
-          word-break: break-all;
-          padding: 4vw 4vw 0;
-        }
-
-        .logo {
-          width: 18vw;
-          height: 18vw;
-          border-radius: 50%;
-          // background: #d8d8d8;
-          border: 0.1vw solid #d8d8d8;
-          box-sizing: border-box;
-          position: absolute;
-          right: 4vw;
-          top: 5.8vw;
+      .page-top,
+      .page-content {
+        margin: 0 auto;
+        background: #fff;
+      }
+      .page-top {
+        .swiper-body {
+          position: relative;
+          width: 100vw;
+          height: 100vw;
+          background: #f7f7f7;
 
-          .logo-swiper {
-            width: 18vw;
-            height: 18vw;
-            overflow: hidden;
-            border-radius: 50%;
+          .device-image {
+            width: 100%;
+            height: 100%;
           }
 
           ::v-deep {
             img {
-              width: 18vw;
-              height: 18vw;
-              border-radius: 50%;
+              width: 100vw;
+              height: 100vw;
             }
           }
 
-          &::after {
-            content: '';
+          .auth-seal {
             position: absolute;
-            z-index: 1;
-            right: 0.7vw;
-            bottom: 0;
-            display: block;
-            width: 3.6vw;
-            height: 3.6vw;
-            background: url(~assets/theme-images/ross/h5-icon-auth-ren.png)
+            width: 13.8vw;
+            height: 13.8vw;
+            background: url(~assets/theme-images/ross/h5-icon-auth-seal.png)
               no-repeat center;
-            background-size: 3.6vw;
+            background-size: 13.8vw;
+            right: 4vw;
+            bottom: 4vw;
+            z-index: 2;
           }
 
-          img {
+          .auth-card {
+            position: absolute;
+            width: auto;
+            height: 20.6vw;
             display: block;
-            width: 100%;
-            height: 100%;
-            // background: pink;
-            border-radius: 50%;
+            bottom: 4vw;
+            left: 4vw;
+            z-index: 2;
           }
-        }
 
-        .name {
-          font-size: 5.4vw;
-          color: #282828;
-          line-height: 7.4vw;
-          margin-bottom: 2.4vw;
-          font-weight: bold;
+          .auth-logo {
+            position: absolute;
+            max-width: 18vw;
+            max-height: 18vw;
+            top: 4vw;
+            left: 4vw;
+            z-index: 2;
+          }
         }
+        .device-info {
+          position: relative;
 
-        .sncode.pc {
-          display: none;
-        }
-        .sncode.mobile {
-          margin: 2.4vw 0 5.6vw;
-          color: #282828;
-          font-size: 4vw;
-        }
+          .section {
+            word-break: break-all;
+            padding: 4vw 4vw 0;
+          }
+
+          .logo {
+            width: 18vw;
+            height: 18vw;
+            border-radius: 50%;
+            // background: #d8d8d8;
+            border: 0.1vw solid #d8d8d8;
+            box-sizing: border-box;
+            position: absolute;
+            right: 4vw;
+            top: 5.8vw;
+
+            .logo-swiper {
+              width: 18vw;
+              height: 18vw;
+              overflow: hidden;
+              border-radius: 50%;
+            }
+
+            ::v-deep {
+              img {
+                width: 18vw;
+                height: 18vw;
+                border-radius: 50%;
+              }
+            }
 
-        .row {
-          line-height: 4.7vw;
-          i {
-            position: relative;
-            margin: 0 4vw;
             &::after {
               content: '';
-              display: block;
-              width: 0.2vw;
-              height: 3vw;
-              background: #282828;
               position: absolute;
-              top: 1vw;
-              left: 0;
+              z-index: 1;
+              right: 0.7vw;
+              bottom: 0;
+              display: block;
+              width: 3.6vw;
+              height: 3.6vw;
+              background: url(~assets/theme-images/ross/h5-icon-auth-ren.png)
+                no-repeat center;
+              background-size: 3.6vw;
+            }
+
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+              // background: pink;
+              border-radius: 50%;
             }
           }
 
-          span {
-            font-size: 3.6vw;
+          .name {
+            font-size: 5.4vw;
             color: #282828;
+            line-height: 7.4vw;
+            margin-bottom: 2.4vw;
+            font-weight: bold;
           }
-        }
 
-        .row,
-        .maker {
-          margin-bottom: 1.2vw;
-        }
+          .sncode.pc {
+            display: none;
+          }
+          .sncode.mobile {
+            margin: 2.4vw 0 5.6vw;
+            color: #282828;
+            font-size: 4vw;
+          }
 
-        .supplier,
-        .maker {
-          font-size: 3.6vw;
-          color: #282828;
-        }
+          .row {
+            line-height: 4.7vw;
+            i {
+              position: relative;
+              margin: 0 4vw;
+              &::after {
+                content: '';
+                display: block;
+                width: 0.2vw;
+                height: 3vw;
+                background: #282828;
+                position: absolute;
+                top: 1vw;
+                left: 0;
+              }
+            }
 
-        .auth {
-          // width: 100%;
-          margin: 0 4vw;
-          min-height: 20vw;
-          @include themify($themes) {
-            background: themed('color') !important;
+            span {
+              font-size: 3.6vw;
+              color: #282828;
+            }
           }
-          margin-top: 4vw;
-          box-sizing: border-box;
-          padding: 5.2vw 4vw;
-          border-radius: 1.2vw;
 
-          .auth-icon {
-            height: 4.9vw;
-            background: url(~assets/theme-images/ross/h5-icon-auth.png)
-              no-repeat left center;
-            background-size: auto 4.9vw;
-            margin-bottom: 1vw;
+          .row,
+          .maker {
+            margin-bottom: 1.2vw;
           }
 
-          .auth-info {
-            font-size: 0;
-            span {
-              font-size: 3.6vw;
-              line-height: 6.4vw;
-              color: #fff;
-              font-weight: bold;
+          .supplier,
+          .maker {
+            font-size: 3.6vw;
+            color: #282828;
+          }
+
+          .auth {
+            // width: 100%;
+            margin: 0 4vw;
+            min-height: 20vw;
+            background: fetch('color') !important;
+            margin-top: 4vw;
+            box-sizing: border-box;
+            padding: 5.2vw 4vw;
+            border-radius: 1.2vw;
+
+            .auth-icon {
+              height: 4.9vw;
+              background: url(~assets/theme-images/ross/h5-icon-auth.png)
+                no-repeat left center;
+              background-size: auto 4.9vw;
+              margin-bottom: 1vw;
+            }
+
+            .auth-info {
+              font-size: 0;
+              span {
+                font-size: 3.6vw;
+                line-height: 6.4vw;
+                color: #fff;
+                font-weight: bold;
+              }
             }
           }
         }
       }
-    }
-    .page-content {
-      .device-params {
-        padding: 8vw 4vw;
-        box-sizing: border-box;
-        .title {
-          font-size: 4.6vw;
-          color: #282828;
-          font-weight: bold;
-        }
-        .line {
-          // height: 0.2vw;
-          // background: #ececec;
-          position: relative;
-          margin-top: 4.7vw;
-          margin-bottom: 1.2vw;
-        }
-        .params {
-          width: 100%;
-          word-break: break-all;
-          text-align: justify;
-          .row {
-            display: table-row;
+      .page-content {
+        .device-params {
+          padding: 8vw 4vw;
+          box-sizing: border-box;
+          .title {
+            font-size: 4.6vw;
+            color: #282828;
+            font-weight: bold;
+          }
+          .line {
+            // height: 0.2vw;
+            // background: #ececec;
+            position: relative;
+            margin-top: 4.7vw;
+            margin-bottom: 1.2vw;
+          }
+          .params {
             width: 100%;
-
-            &:first-child {
-              .col {
-                padding-top: 0;
+            word-break: break-all;
+            text-align: justify;
+            .row {
+              display: table-row;
+              width: 100%;
+
+              &:first-child {
+                .col {
+                  padding-top: 0;
+                }
               }
-            }
 
-            &:last-child {
-              .col {
-                padding-bottom: 0;
+              &:last-child {
+                .col {
+                  padding-bottom: 0;
+                }
               }
             }
-          }
 
-          .col {
-            display: table-cell;
-            font-size: 3.6vw;
-            padding: 1.6vw 0;
-
-            &:nth-child(2n-1) {
-              color: #282828;
-              padding-right: 3.2vw;
-              font-weight: bold;
-              white-space: nowrap;
-              border-right: 0.2vw solid #d8d8d8;
-            }
+            .col {
+              display: table-cell;
+              font-size: 3.6vw;
+              padding: 1.6vw 0;
+
+              &:nth-child(2n-1) {
+                color: #282828;
+                padding-right: 3.2vw;
+                font-weight: bold;
+                white-space: nowrap;
+                border-right: 0.2vw solid #d8d8d8;
+              }
 
-            &:nth-child(2n) {
-              color: #4e4e4e;
-              padding-left: 3.2vw;
+              &:nth-child(2n) {
+                color: #4e4e4e;
+                padding-left: 3.2vw;
+              }
             }
           }
         }

pages/_template/ph/approve/device/index.vue

@@ -132,124 +132,123 @@ export default {
   }
 
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 420px;
-    @include themify($themes) {
-      background: themed('pc-banner-device');
-    }
-    background-size: auto 420px;
-
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1000px;
-    margin: 0 auto;
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
 
-    .search-title {
-      font-size: 16px;
-      color: #404040;
-      margin: 25px 0;
-    }
+      .page-top {
+        height: 420px;
+        background: fetch('pc-banner-device');
+        background-size: auto 420px;
 
-    .search-container {
-      display: flex;
-      justify-content: space-between;
-      .input-with-select {
-        margin: 0 15px;
-        .el-select {
-          ::v-deep {
-            .el-input {
-              width: 130px;
-            }
-          }
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
+      .page-content {
+        width: 1000px;
+        margin: 0 auto;
 
-      .submit {
-        width: 295px;
-      }
-    }
+        .search-title {
+          font-size: 16px;
+          color: #404040;
+          margin: 25px 0;
+        }
 
-    .title {
-      font-size: 16px;
-      color: #404040;
+        .search-container {
+          display: flex;
+          justify-content: space-between;
+          .input-with-select {
+            margin: 0 15px;
+            .el-select {
+              ::v-deep {
+                .el-input {
+                  width: 130px;
+                }
+              }
+            }
+          }
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          .submit {
+            width: 295px;
+          }
         }
-      }
-    }
-
-    .list {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
 
-      .empty {
-        width: 390px;
-      }
+        .title {
+          font-size: 16px;
+          color: #404040;
 
-      .section {
-        width: 490px;
-        height: 136px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 16px;
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+          span {
+            color: fetch('color');
+          }
         }
 
-        .cover {
-          display: block;
-          width: 104px;
-          height: 104px;
-        }
-        .info {
-          width: 336px;
-          position: relative;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          justify-content: space-between;
 
-          .name {
-            font-size: 18px;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 16px;
-            margin-top: 4px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+          .empty {
+            width: 390px;
           }
-          .code,
-          .club-name {
-            position: relative;
-            font-size: 14px;
-            color: #666;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            margin-top: 6px;
 
-            span {
-              color: #1890ff;
+          .section {
+            width: 490px;
+            height: 136px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+            }
+
+            .cover {
+              display: block;
+              width: 104px;
+              height: 104px;
+            }
+            .info {
+              width: 336px;
+              position: relative;
+
+              .name {
+                font-size: 18px;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 16px;
+                margin-top: 4px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .code,
+              .club-name {
+                position: relative;
+                font-size: 14px;
+                color: #666;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                margin-top: 6px;
+
+                span {
+                  color: #1890ff;
+                }
+              }
             }
           }
         }
@@ -260,112 +259,112 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-device');
-      background-size: auto 46vw;
-    }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-device');
+        background-size: auto 46vw;
 
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        position: relative;
 
-    .search-title {
-      font-size: 3.4vw;
-      color: #404040;
-      margin: 3.2vw;
-    }
+        .search-title {
+          font-size: 3.4vw;
+          color: #404040;
+          margin: 3.2vw;
+        }
 
-    .search-container {
-      padding: 0 3.2vw;
+        .search-container {
+          padding: 0 3.2vw;
 
-      .select-type {
-        width: 100%;
-      }
+          .select-type {
+            width: 100%;
+          }
 
-      .input-with-select {
-        margin: 3.2vw 0;
-        .el-select {
-          ::v-deep {
-            .el-input {
-              width: 130px;
+          .input-with-select {
+            margin: 3.2vw 0;
+            .el-select {
+              ::v-deep {
+                .el-input {
+                  width: 130px;
+                }
+              }
             }
           }
-        }
-      }
 
-      .submit {
-        width: 100%;
-      }
-    }
+          .submit {
+            width: 100%;
+          }
+        }
 
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
 
-      .section {
-        width: 93.6vw;
-        height: 26vw;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 3.2vw;
+          .section {
+            width: 93.6vw;
+            height: 26vw;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 3.2vw;
 
-        .cover {
-          display: block;
-          width: 19.6vw;
-          height: 19.6vw;
-        }
-        .info {
-          width: 64vw;
-          position: relative;
-          margin-left: 3.2vw;
-          .name {
-            font-size: 4vw;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 4vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .code,
-          .club-name {
-            width: 66vw;
-            position: relative;
-            font-size: 3vw;
-            color: #404040;
-            line-height: 5vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+            .cover {
+              display: block;
+              width: 19.6vw;
+              height: 19.6vw;
+            }
+            .info {
+              width: 64vw;
+              position: relative;
+              margin-left: 3.2vw;
+              .name {
+                font-size: 4vw;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 4vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .code,
+              .club-name {
+                width: 66vw;
+                position: relative;
+                font-size: 3vw;
+                color: #404040;
+                line-height: 5vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
 
-            span {
-              color: #6d9eff;
+                span {
+                  color: #6d9eff;
+                }
+              }
             }
           }
         }

pages/_template/ph/approve/index.vue

@@ -69,96 +69,89 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-approve');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    .list {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .section {
-      width: 380px;
-      height: 220px;
-      background-size: 380px 220px;
-      margin-left: auto;
-      margin-right: auto;
-      cursor: pointer;
-      transition: all 0.4s;
-
-      &:hover {
-        box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
-      }
-      .icon {
-        width: 48px;
-        height: 48px;
-      }
-      .line {
-        width: 24px;
-        height: 2px;
-        @include themify($themes) {
-          background-color: themed('color');
+    @include useTheme() {
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
+
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-approve');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-      .name {
-        font-size: 20px;
-        color: #fff;
-      }
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        .list {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .section {
+          width: 380px;
+          height: 220px;
+          background-size: 380px 220px;
+          margin-left: auto;
+          margin-right: auto;
+          cursor: pointer;
+          transition: all 0.4s;
 
-      .icon-image {
-        width: 48px;
-        height: 48px;
-        background-size: 48px 48px;
-        background-repeat: no-repeat;
-        background-position: center;
+          &:hover {
+            box-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
+          }
+          .icon {
+            width: 48px;
+            height: 48px;
+          }
+          .line {
+            width: 24px;
+            height: 2px;
+            background-color: fetch('color');
+          }
+          .name {
+            font-size: 20px;
+            color: #fff;
+          }
 
-        &.item1 {
-          background-image: url(~assets/theme-images/common/pc-icon-club.png);
-        }
+          .icon-image {
+            width: 48px;
+            height: 48px;
+            background-size: 48px 48px;
+            background-repeat: no-repeat;
+            background-position: center;
 
-        &.item2 {
-          background-image: url(~assets/theme-images/common/pc-icon-device.png);
-        }
+            &.item1 {
+              background-image: url(~assets/theme-images/common/pc-icon-club.png);
+            }
 
-        &.item3 {
-          background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
-        }
-      }
+            &.item2 {
+              background-image: url(~assets/theme-images/common/pc-icon-device.png);
+            }
 
-      &:nth-child(1) {
-        @include themify($themes) {
-          background-image: themed('pc-entry-club-bg');
-        }
-      }
-      &:nth-child(2) {
-        @include themify($themes) {
-          background-image: themed('pc-entry-device-bg');
-        }
-      }
-      &:nth-child(3) {
-        @include themify($themes) {
-          background-image: themed('pc-entry-doctor-bg');
+            &.item3 {
+              background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
+            }
+          }
+
+          &:nth-child(1) {
+            background-image: fetch('pc-entry-club-bg');
+          }
+          &:nth-child(2) {
+            background-image: fetch('pc-entry-device-bg');
+          }
+          &:nth-child(3) {
+            background-image: fetch('pc-entry-doctor-bg');
+          }
         }
       }
     }
@@ -167,80 +160,74 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-approve');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    .section {
-      width: 92vw;
-      height: 42vw;
-      background-size: 92vw 42vw;
-      margin-left: auto;
-      margin-right: auto;
-      .icon {
-        width: 8.8vw;
-        height: 8.8vw;
-      }
-      .line {
-        width: 4.2vw;
-        height: 0.3vw;
-        @include themify($themes) {
-          background-color: themed('color');
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-approve');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
-      .name {
-        font-size: 4.2vw;
-        color: #fff;
-      }
+      .page-content {
+        .section {
+          width: 92vw;
+          height: 42vw;
+          background-size: 92vw 42vw;
+          margin-left: auto;
+          margin-right: auto;
+          .icon {
+            width: 8.8vw;
+            height: 8.8vw;
+          }
+          .line {
+            width: 4.2vw;
+            height: 0.3vw;
+            background-color: fetch('color');
+          }
+          .name {
+            font-size: 4.2vw;
+            color: #fff;
+          }
 
-      .icon-image {
-        width: 48px;
-        height: 48px;
-        background-size: 48px 48px;
-        background-repeat: no-repeat;
-        background-position: center;
+          .icon-image {
+            width: 48px;
+            height: 48px;
+            background-size: 48px 48px;
+            background-repeat: no-repeat;
+            background-position: center;
 
-        &.item1 {
-          background-image: url(~assets/theme-images/common/pc-icon-club.png);
-        }
+            &.item1 {
+              background-image: url(~assets/theme-images/common/pc-icon-club.png);
+            }
 
-        &.item2 {
-          background-image: url(~assets/theme-images/common/pc-icon-device.png);
-        }
+            &.item2 {
+              background-image: url(~assets/theme-images/common/pc-icon-device.png);
+            }
 
-        &.item3 {
-          background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
-        }
-      }
+            &.item3 {
+              background-image: url(~assets/theme-images/common/pc-icon-doctor.png);
+            }
+          }
 
-      &:nth-child(1) {
-        @include themify($themes) {
-          background-image: themed('pc-entry-club-bg');
-        }
-      }
-      &:nth-child(2) {
-        @include themify($themes) {
-          background-image: themed('pc-entry-device-bg');
-        }
-      }
-      &:nth-child(3) {
-        @include themify($themes) {
-          background-image: themed('pc-entry-doctor-bg');
+          &:nth-child(1) {
+            background-image: fetch('pc-entry-club-bg');
+          }
+          &:nth-child(2) {
+            background-image: fetch('pc-entry-device-bg');
+          }
+          &:nth-child(3) {
+            background-image: fetch('pc-entry-doctor-bg');
+          }
         }
       }
     }

pages/_template/ph/approve/personnel/operate/index.vue

@@ -78,111 +78,111 @@ export default {
 }
 // pc 端
 @media screen and (min-width: 768px) {
-  .page-top {
-    height: 420px;
-    @include themify($themes) {
-      background: themed('pc-banner-doctor') no-repeat center;
-    }
-    background-size: auto 420px;
-
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-
-    .logo,
-    .name {
-      transform: translateY(-30px);
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 300px;
-      transform: translateX(-50%);
-    }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 420px;
+        background: fetch('pc-banner-doctor') no-repeat center;
+        background-size: auto 420px;
 
-    .title {
-      font-size: 16px;
-      color: #404040;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+        .logo,
+        .name {
+          transform: translateY(-30px);
         }
       }
-    }
-
-    .list {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
 
-      .empty {
-        width: 390px;
-      }
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 300px;
+          transform: translateX(-50%);
+        }
 
-      .section {
-        width: 390px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 12px;
+        .title {
+          font-size: 16px;
+          color: #404040;
 
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+          span {
+            color: fetch('color');
+          }
         }
 
-        .cover {
-          display: block;
-          width: 84px;
-          height: 84px;
-        }
-        .info {
-          width: 270px;
-          position: relative;
-          margin-left: 12px;
-          .name {
-            font-size: 16px;
-            color: #101010;
-            font-weight: bold;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          justify-content: space-between;
+
+          .empty {
+            width: 390px;
           }
-          .tag,
-          .code,
-          .club-name {
-            height: 20px;
-            position: relative;
-            font-size: 14px;
-            color: #404040;
-            line-height: 20px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
 
-            span {
-              color: #6d9eff;
+          .section {
+            width: 390px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 12px;
+
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
             }
-          }
 
-          .tag {
-            color: #909399;
+            .cover {
+              display: block;
+              width: 84px;
+              height: 84px;
+            }
+            .info {
+              width: 270px;
+              position: relative;
+              margin-left: 12px;
+              .name {
+                font-size: 16px;
+                color: #101010;
+                font-weight: bold;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .tag,
+              .code,
+              .club-name {
+                height: 20px;
+                position: relative;
+                font-size: 14px;
+                color: #404040;
+                line-height: 20px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+
+                span {
+                  color: #6d9eff;
+                }
+              }
+
+              .tag {
+                color: #909399;
+              }
+            }
           }
         }
       }
@@ -192,98 +192,98 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-doctor') no-repeat center;
-    }
-    background-size: auto 46vw;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-doctor') no-repeat center;
+        background-size: auto 46vw;
 
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 0;
-      transform: translate(-50%, -50%);
-    }
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        position: relative;
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%, -50%);
+        }
 
-    .city {
-      padding-top: 12vw;
-    }
+        .city {
+          padding-top: 12vw;
+        }
 
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
 
-      .section {
-        width: 93.6vw;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 3.2vw;
+          .section {
+            width: 93.6vw;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 3.2vw;
 
-        .cover {
-          display: block;
-          width: 21.6vw;
-          height: 21.6vw;
-        }
-        .info {
-          position: relative;
-          margin-left: 3.2vw;
-          .name {
-            font-size: 4vw;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 0.8vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .tag,
-          .code,
-          .club-name {
-            width: 62vw;
-            height: 5vw;
-            position: relative;
-            font-size: 3vw;
-            color: #404040;
-            line-height: 5vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+            .cover {
+              display: block;
+              width: 21.6vw;
+              height: 21.6vw;
+            }
+            .info {
+              position: relative;
+              margin-left: 3.2vw;
+              .name {
+                font-size: 4vw;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 0.8vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .tag,
+              .code,
+              .club-name {
+                width: 62vw;
+                height: 5vw;
+                position: relative;
+                font-size: 3vw;
+                color: #404040;
+                line-height: 5vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
 
-            span {
-              color: #6d9eff;
+                span {
+                  color: #6d9eff;
+                }
+              }
+              .tag {
+                color: #909399;
+              }
             }
           }
-          .tag {
-            color: #909399;
-          }
         }
       }
     }

pages/_template/ph/center/device/index.vue

@@ -96,14 +96,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 @media screen and (min-width: 768px) {
   .page-content {
     width: 1000px;

pages/_template/ph/docs/_fileId.vue

@@ -97,15 +97,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 // pc 端
 @media screen and (min-width: 768px) {
   ::v-deep {
@@ -120,119 +111,119 @@ export default {
     }
   }
   .page {
-    margin-bottom: 16px;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-doc');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    background-color: #fff;
-    margin-top: 16px;
-    box-sizing: border-box;
-    overflow: hidden;
-    padding: 32px 0;
-
-    .el-breadcrumb {
-      margin: 0 24px 32px;
-    }
-
-    .list-header,
-    .list-body {
-      font-size: 14px;
-      color: #282828;
-      .col {
-        &:nth-child(1) {
-          flex: 1;
-        }
-        &:nth-child(2),
-        &:nth-child(3),
-        &:nth-child(4) {
+    @include useTheme() {
+      margin-bottom: 16px;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-doc');
+        background-size: auto 360px;
+        .logo {
+          display: block;
           width: 120px;
-          text-align: center;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-    }
-
-    .list-header {
-      .row {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 24px 16px;
-      }
-    }
 
-    .list-body {
-      .row {
-        line-height: 70px;
-        color: #666666;
-        padding: 0 24px;
-        transition: all 0.4s;
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        background-color: #fff;
+        margin-top: 16px;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 32px 0;
 
-        &:hover {
-          background: #fff1f2;
+        .el-breadcrumb {
+          margin: 0 24px 32px;
         }
 
-        .section {
-          display: flex;
-          justify-content: space-between;
-          border-top: 1px solid #f7f7f7;
-
-          &.mobile {
-            display: none;
+        .list-header,
+        .list-body {
+          font-size: 14px;
+          color: #282828;
+          .col {
+            &:nth-child(1) {
+              flex: 1;
+            }
+            &:nth-child(2),
+            &:nth-child(3),
+            &:nth-child(4) {
+              width: 120px;
+              text-align: center;
+            }
           }
         }
 
-        img {
-          display: inline-block;
-          width: 32px;
-          height: 32px;
-          background: #eee;
-          margin-right: 24px;
-        }
-
-        .file-name {
-          cursor: pointer;
-          transition: all 0.4s;
-          margin-left: 24px;
-          &:hover {
-            color: #bc1724;
+        .list-header {
+          .row {
+            display: flex;
+            justify-content: space-between;
+            padding: 0 24px 16px;
           }
         }
 
-        .control {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .download {
-            display: block;
-            width: 24px;
-            height: 24px;
-            background: url(~assets/theme-images/common/pc-icon-download.png)
-              no-repeat center;
-            background-size: 24px;
-            margin: 0 auto;
-            cursor: pointer;
+        .list-body {
+          .row {
+            line-height: 70px;
+            color: #666666;
+            padding: 0 24px;
+            transition: all 0.4s;
 
             &:hover {
-              background-image: url(~assets/theme-images/common/pc-icon-download-hover.png);
+              background: #fff1f2;
+            }
+
+            .section {
+              display: flex;
+              justify-content: space-between;
+              border-top: 1px solid #f7f7f7;
+
+              &.mobile {
+                display: none;
+              }
+            }
+
+            img {
+              display: inline-block;
+              width: 32px;
+              height: 32px;
+              background: #eee;
+              margin-right: 24px;
+            }
+
+            .file-name {
+              cursor: pointer;
+              transition: all 0.4s;
+              margin-left: 24px;
+              &:hover {
+                color: #bc1724;
+              }
+            }
+
+            .control {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .download {
+                display: block;
+                width: 24px;
+                height: 24px;
+                background: url(~assets/theme-images/common/pc-icon-download.png)
+                  no-repeat center;
+                background-size: 24px;
+                margin: 0 auto;
+                cursor: pointer;
+
+                &:hover {
+                  background-image: url(~assets/theme-images/common/pc-icon-download-hover.png);
+                }
+              }
             }
           }
         }
@@ -254,97 +245,100 @@ export default {
       }
     }
   }
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-doc');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-      text-align: center;
-      margin: 0 3.2vw;
-    }
-  }
+  .page {
+    .page-top {
+      @include useTheme() {
+        height: 46vw;
+        background: fetch('h5-banner-doc');
+        background-size: auto 46vw;
 
-  .page-content {
-    position: relative;
-    padding: 8vw 0;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+          text-align: center;
+          margin: 0 3.2vw;
+        }
+      }
 
-    .el-breadcrumb {
-      margin: 0 4vw 4vw;
-    }
+      .page-content {
+        position: relative;
+        padding: 8vw 0;
 
-    .list-header {
-      display: none;
-    }
+        .el-breadcrumb {
+          margin: 0 4vw 4vw;
+        }
 
-    .list-body {
-      font-size: 3.6vw;
-      color: #282828;
+        .list-header {
+          display: none;
+        }
 
-      .row {
-        color: #666666;
-        padding: 0 4vw;
+        .list-body {
+          font-size: 3.6vw;
+          color: #282828;
 
-        .section {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 0.1vw solid #f7f7f7;
-          height: 17.6vw;
+          .row {
+            color: #666666;
+            padding: 0 4vw;
 
-          &.pc {
-            display: none;
-          }
+            .section {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 0.1vw solid #f7f7f7;
+              height: 17.6vw;
 
-          .file-cover {
-            img {
-              width: 8.8vw;
-              height: 8.8vw;
-              background: #eee;
-            }
-          }
+              &.pc {
+                display: none;
+              }
 
-          .file-content {
-            flex: 1;
-            margin: 0 4.8vw;
+              .file-cover {
+                img {
+                  width: 8.8vw;
+                  height: 8.8vw;
+                  background: #eee;
+                }
+              }
 
-            .file-name {
-              font-size: 3.6vw;
-              @include ellipsis(1);
-            }
+              .file-content {
+                flex: 1;
+                margin: 0 4.8vw;
 
-            .file-info {
-              font-size: 3vw;
-              color: #999999;
-              margin-top: 1.6vw;
+                .file-name {
+                  font-size: 3.6vw;
+                  @include ellipsis(1);
+                }
 
-              .size {
-                margin-left: 4vw;
+                .file-info {
+                  font-size: 3vw;
+                  color: #999999;
+                  margin-top: 1.6vw;
+
+                  .size {
+                    margin-left: 4vw;
+                  }
+                }
               }
-            }
-          }
 
-          .control {
-            width: 6.4vw;
-            height: 6.4vw;
-            .download {
-              display: block;
-              width: 6.4vw;
-              height: 6.4vw;
-              background: url(~assets/theme-images/common/h5-icon-download.png)
-                no-repeat center;
-              background-size: 6.4vw;
-              margin: 0 auto;
+              .control {
+                width: 6.4vw;
+                height: 6.4vw;
+                .download {
+                  display: block;
+                  width: 6.4vw;
+                  height: 6.4vw;
+                  background: url(~assets/theme-images/common/h5-icon-download.png)
+                    no-repeat center;
+                  background-size: 6.4vw;
+                  margin: 0 auto;
+                }
+              }
             }
           }
         }

pages/_template/ph/docs/article-detail.vue

@@ -17,14 +17,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
 // pc 端
 @media screen and (min-width: 768px) {
   .page {

pages/_template/ph/feedback/index.vue

@@ -35,108 +35,104 @@ export default {
 <style scoped lang="scss">
 // pc 端
 @media screen and (min-width: 768px) {
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-feedback');
-    }
-    background-size: auto 360px;
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-    box-sizing: border-box;
-    background-color: #fff;
-    .control {
-      display: block;
-      width: 100%;
-      height: 280px;
-      border: 1px solid #d8d8d8;
-      outline: none;
-      box-sizing: border-box;
-      font-size: 16px;
-      color: #101010;
-    }
-
-    .submit {
-      text-align: center;
-      line-height: 46px;
-      width: 326px;
-      height: 46px;
-      margin-left: auto;
-      margin-right: auto;
-      border-radius: 4px;
-      font-size: 16px;
-      @include themify($themes) {
-        background-color: themed('color');
-      }
-      color: #fff;
-      transition: all 0.2s;
-      cursor: pointer;
-
-      &:hover {
-        @include themify($themes) {
-          background-color: themed('hover-color');
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-feedback');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
+      .page-content {
+        width: 1200px;
+        margin-left: auto;
+        margin-right: auto;
+        box-sizing: border-box;
+        background-color: #fff;
+        .control {
+          display: block;
+          width: 100%;
+          height: 280px;
+          border: 1px solid #d8d8d8;
+          outline: none;
+          box-sizing: border-box;
+          font-size: 16px;
+          color: #101010;
+        }
 
-      &.disabled {
-        background-color: #d8d8d8 !important;
-      }
-    }
-  }
-
-  .dialog {
-    width: 380px;
-    padding-top: 40px;
-    border-radius: 0;
-
-    .dialog-content {
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-
-      .title {
-        font-size: 24px;
-        color: #101010;
-        margin: 28px 0 12px;
-      }
-
-      .tip {
-        color: #404040;
-        font-size: 16px;
-      }
-
-      .line {
-        width: 340px;
-        height: 1px;
-        margin: 0 auto;
-        margin-top: 28px;
-        background: #d8d8d8;
+        .submit {
+          text-align: center;
+          line-height: 46px;
+          width: 326px;
+          height: 46px;
+          margin-left: auto;
+          margin-right: auto;
+          border-radius: 4px;
+          font-size: 16px;
+          background-color: fetch('color');
+          color: #fff;
+          transition: all 0.2s;
+          cursor: pointer;
+
+          &:hover {
+            background-color: fetch('hover-color');
+          }
+
+          &.disabled {
+            background-color: #d8d8d8 !important;
+          }
+        }
       }
 
-      .image-icon {
-        width: 140px;
-        height: 100px;
-        @include themify($themes) {
-          background: themed('pc-icon-feedback-submit') no-repeat center;
-          background-size: 140px 100px;
+      .dialog {
+        width: 380px;
+        padding-top: 40px;
+        border-radius: 0;
+
+        .dialog-content {
+          width: 100%;
+          height: 100%;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+
+          .title {
+            font-size: 24px;
+            color: #101010;
+            margin: 28px 0 12px;
+          }
+
+          .tip {
+            color: #404040;
+            font-size: 16px;
+          }
+
+          .line {
+            width: 340px;
+            height: 1px;
+            margin: 0 auto;
+            margin-top: 28px;
+            background: #d8d8d8;
+          }
+
+          .image-icon {
+            width: 140px;
+            height: 100px;
+            background: fetch('pc-icon-feedback-submit') no-repeat center;
+            background-size: 140px 100px;
+          }
         }
       }
     }
@@ -145,85 +141,83 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-feedback');
-    }
-    background-size: auto 46vw;
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    .control {
-      display: block;
-      width: 100%;
-      height: 56vw;
-      border: 0.1vw solid #d8d8d8;
-      outline: none;
-      box-sizing: border-box;
-      font-size: 3.2vw;
-      color: #101010;
-    }
-
-    .submit {
-      text-align: center;
-      line-height: 11.6vw;
-      width: 100%;
-      height: 11.6vw;
-      border-radius: 0.2vw;
-      font-size: 4vw;
-      @include themify($themes) {
-        background-color: themed('color');
-      }
-      color: #fff;
-
-      &.disabled {
-        background-color: #d8d8d8;
-      }
-    }
-  }
-
-  .dialog {
-    width: 76vw;
-    border-radius: 0;
-
-    .dialog-content {
-      padding-top: 3.2vw;
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-
-      .title {
-        font-size: 4.6vw;
-        color: #101010;
-        margin: 3.2vw 0;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-feedback');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
       }
+      .page-content {
+        .control {
+          display: block;
+          width: 100%;
+          height: 56vw;
+          border: 0.1vw solid #d8d8d8;
+          outline: none;
+          box-sizing: border-box;
+          font-size: 3.2vw;
+          color: #101010;
+        }
 
-      .tip {
-        color: #404040;
-        font-size: 3.2vw;
+        .submit {
+          text-align: center;
+          line-height: 11.6vw;
+          width: 100%;
+          height: 11.6vw;
+          border-radius: 0.2vw;
+          font-size: 4vw;
+          background-color: fetch('color');
+          color: #fff;
+
+          &.disabled {
+            background-color: #d8d8d8;
+          }
+        }
       }
 
-      .image-icon {
-        width: 30vw;
-        height: 20vw;
-        @include themify($themes) {
-          background: themed('pc-icon-feedback-submit') no-repeat center;
-          background-size: 30vw 20vw;
+      .dialog {
+        width: 76vw;
+        border-radius: 0;
+
+        .dialog-content {
+          padding-top: 3.2vw;
+          width: 100%;
+          height: 100%;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+
+          .title {
+            font-size: 4.6vw;
+            color: #101010;
+            margin: 3.2vw 0;
+          }
+
+          .tip {
+            color: #404040;
+            font-size: 3.2vw;
+          }
+
+          .image-icon {
+            width: 30vw;
+            height: 20vw;
+            background: fetch('pc-icon-feedback-submit') no-repeat center;
+            background-size: 30vw 20vw;
+          }
         }
       }
     }

pages/_template/ph/form/club-register.vue

@@ -329,200 +329,187 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-register');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .message {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin-top: 60px;
-      .status-icon {
-        width: 88px;
-        height: 88px;
-        background-repeat: no-repeat;
-        background-size: 75px auto;
-        background-position: center;
-
-        &.success {
-          background-image: url(~assets/theme-images/common/icon-auth-primary.png);
-        }
-        &.warning {
-          background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-register');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
         }
-        &.danger {
-          background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
+
+        .message {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          margin-top: 60px;
+          .status-icon {
+            width: 88px;
+            height: 88px;
+            background-repeat: no-repeat;
+            background-size: 75px auto;
+            background-position: center;
+
+            &.success {
+              background-image: url(~assets/theme-images/common/icon-auth-primary.png);
+            }
+            &.warning {
+              background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+            }
+            &.danger {
+              background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+            }
+          }
 
-      .status {
-        font-size: 18px;
-        color: #282828;
-        margin: 12px 0;
-      }
-
-      .tip {
-        color: #999999;
-        font-size: 14px;
-      }
-    }
-
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
-        border-radius: 4px;
-
-        cursor: pointer;
+          .status {
+            font-size: 18px;
+            color: #282828;
+            margin: 12px 0;
+          }
 
-        &.prev {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .tip {
+            color: #999999;
+            font-size: 14px;
           }
         }
-        &.next {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
+            border-radius: 4px;
+
+            cursor: pointer;
+
+            &.prev {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+            &.next {
+              background-color: fetch('color');
+              color: #fff;
+            }
+          }
+          .record {
+            font-size: 14px;
+            cursor: pointer;
+            color: fetch('color');
           }
         }
-      }
-      .record {
-        font-size: 14px;
-        cursor: pointer;
-        @include themify($themes) {
-          color: themed('color');
+
+        .step-list {
+          width: 700px;
+          margin: 0 auto;
         }
       }
     }
-
-    .step-list {
-      width: 700px;
-      margin: 0 auto;
-    }
   }
 }
 
 // 移动端
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-register');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
 
-  .page-content {
-    padding: 0 7vw 7vw;
-
-    .message {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin: 22.8vw 0;
-      .status-icon {
-        width: 23.6vw;
-        height: 23.6vw;
-        background-repeat: no-repeat;
-        background-size: 20vw auto;
-        background-position: center;
-
-        &.success {
-          background-image: url(~assets/theme-images/common/icon-auth-primary.png);
-        }
-        &.warning {
-          background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-register');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
         }
-        &.danger {
-          background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
 
-      .status {
-        font-size: 4.2vw;
-        color: #282828;
-        margin: 3.2vw 0 2.4vw;
-      }
-
-      .tip {
-        color: #999999;
-        font-size: 3.2vw;
-      }
-    }
-
-    .control {
-      .button {
-        width: 85.6vw;
-        height: 12vw;
-        border-radius: 4px;
+      .page-content {
+        padding: 0 7vw 7vw;
+
+        .message {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          margin: 22.8vw 0;
+          .status-icon {
+            width: 23.6vw;
+            height: 23.6vw;
+            background-repeat: no-repeat;
+            background-size: 20vw auto;
+            background-position: center;
+
+            &.success {
+              background-image: url(~assets/theme-images/common/icon-auth-primary.png);
+            }
+            &.warning {
+              background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+            }
+            &.danger {
+              background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+            }
+          }
 
-        cursor: pointer;
+          .status {
+            font-size: 4.2vw;
+            color: #282828;
+            margin: 3.2vw 0 2.4vw;
+          }
 
-        &.prev {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .tip {
+            color: #999999;
+            font-size: 3.2vw;
           }
         }
-        &.next {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+
+        .control {
+          .button {
+            width: 85.6vw;
+            height: 12vw;
+            border-radius: 4px;
+
+            cursor: pointer;
+
+            &.prev {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+            &.next {
+              background-color: fetch('color');
+              color: #fff;
+            }
+          }
+          .record {
+            margin-top: 4.8vw;
+            font-size: 3.4vw;
+            cursor: pointer;
+            color: fetch('color');
           }
-        }
-      }
-      .record {
-        margin-top: 4.8vw;
-        font-size: 3.4vw;
-        cursor: pointer;
-        @include themify($themes) {
-          color: themed('color');
         }
       }
     }

pages/_template/ph/form/components/form-club-device.vue

@@ -491,22 +491,18 @@ export default {
 
 <style lang="scss" scoped>
 .club-device {
-  ::v-deep {
-    .el-input.is-active .el-input__inner,
-    .el-input__inner:focus {
-      @include themify($themes) {
-        border-color: themed('color');
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
       }
-    }
-    .el-radio__input.is-checked + .el-radio__label {
-      @include themify($themes) {
-        color: themed('color');
+      .el-radio__input.is-checked + .el-radio__label {
+        color: fetch('color');
       }
-    }
-    .el-radio__input.is-checked .el-radio__inner {
-      @include themify($themes) {
-        background-color: themed('color');
-        border-color: themed('color');
+      .el-radio__input.is-checked .el-radio__inner {
+        background-color: fetch('color');
+        border-color: fetch('color');
       }
     }
   }
@@ -514,101 +510,98 @@ export default {
 
 // pc端
 @media screen and (min-width: 768px) {
-  .el-select {
-    width: 100%;
-  }
-
-  .device-section {
-    position: relative;
-
-    .el-form {
-      padding-bottom: 10px;
-    }
+  .club-device {
+    @include useTheme() {
+      .el-select {
+        width: 100%;
+      }
 
-    .remove-btn {
-      position: absolute;
-      right: 0;
-      bottom: 24px;
-      font-size: 16px;
-      color: #f94b4b;
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
+      .device-section {
+        position: relative;
 
-  .device-param-list {
-    position: relative;
-    .add-param {
-      position: absolute;
-      cursor: pointer;
-      top: -40px;
-      right: 0;
-      text-decoration: underline;
-      font-size: 14px;
-      @include themify($themes) {
-        color: themed('color');
-      }
-    }
+        .el-form {
+          padding-bottom: 10px;
+        }
 
-    .param {
-      position: relative;
-      .remove {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 20px;
-        height: 20px;
-        background: #f94b4b;
-        border-radius: 2px;
-        cursor: pointer;
-        color: #fff;
-        font-size: 14px;
-        text-align: center;
-        line-height: 20px;
+        .remove-btn {
+          position: absolute;
+          right: 0;
+          bottom: 24px;
+          font-size: 16px;
+          color: #f94b4b;
+          text-decoration: underline;
+          cursor: pointer;
+        }
       }
-    }
-  }
 
-  .add-device {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 162px;
-    height: 46px;
-    border-radius: 4px;
-    box-sizing: border-box;
-    font-size: 18px;
-    margin: 0 auto;
-    cursor: pointer;
-
-    @include themify($themes) {
-      border: 1px solid themed('color');
-      color: themed('color');
-    }
+      .device-param-list {
+        position: relative;
+        .add-param {
+          position: absolute;
+          cursor: pointer;
+          top: -40px;
+          right: 0;
+          text-decoration: underline;
+          font-size: 14px;
+          color: fetch('color');
+        }
 
-    .add-icon {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      margin-right: 16px;
-
-      &::before,
-      &::after {
-        position: absolute;
-        width: 3px;
-        height: 20px;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        border-radius: 1px;
-        content: '';
-        display: block;
-        @include themify($themes) {
-          background: themed('color');
+        .param {
+          position: relative;
+          .remove {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            background: #f94b4b;
+            border-radius: 2px;
+            cursor: pointer;
+            color: #fff;
+            font-size: 14px;
+            text-align: center;
+            line-height: 20px;
+          }
         }
       }
-      &::after {
-        transform: translate(-50%, -50%) rotateZ(90deg);
+
+      .add-device {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 162px;
+        height: 46px;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 18px;
+        margin: 0 auto;
+        cursor: pointer;
+        border: 1px solid fetch('color');
+        color: fetch('color');
+
+        .add-icon {
+          width: 20px;
+          height: 20px;
+          position: relative;
+          margin-right: 16px;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: 3px;
+            height: 20px;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 1px;
+            content: '';
+            display: block;
+            background: fetch('color');
+          }
+          &::after {
+            transform: translate(-50%, -50%) rotateZ(90deg);
+          }
+        }
       }
     }
   }
@@ -616,86 +609,83 @@ export default {
 
 // 移动端
 @media screen and (max-width: 768px) {
-  ::v-deep {
-    .el-form-item__label {
-      font-size: 3.4vw;
-    }
-  }
-  .el-select {
-    width: 100%;
-  }
-  .device-param-list {
-    position: relative;
-    .add-param {
-      position: absolute;
-      cursor: pointer;
-      top: -40px;
-      right: 0;
-      font-size: 3.4vw;
-      @include themify($themes) {
-        color: themed('color');
+  .club-device {
+    @include useTheme() {
+      ::v-deep {
+        .el-form-item__label {
+          font-size: 3.4vw;
+        }
       }
-    }
-
-    .param {
-      position: relative;
-      .remove {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 4.4vw;
-        height: 4.4vw;
-        background: #f94b4b;
-        border-radius: 0.2vw;
-        cursor: pointer;
-        color: #fff;
-        font-size: 3.4vw;
-        text-align: center;
-        line-height: 4.4vw;
+      .el-select {
+        width: 100%;
       }
-    }
-  }
-
-  .add-device {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 31vw;
-    height: 8.8vw;
-    border-radius: 0.4vw;
-    box-sizing: border-box;
-    font-size: 3.4vw;
-    margin: 0 auto;
-    cursor: pointer;
-
-    @include themify($themes) {
-      border: 1px solid themed('color');
-      color: themed('color');
-    }
+      .device-param-list {
+        position: relative;
+        .add-param {
+          position: absolute;
+          cursor: pointer;
+          top: -40px;
+          right: 0;
+          font-size: 3.4vw;
+          color: fetch('color');
+        }
 
-    .add-icon {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      margin-right: 16px;
-
-      &::before,
-      &::after {
-        position: absolute;
-        width: 0.6vw;
-        height: 4.1vw;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        border-radius: 1px;
-        content: '';
-        display: block;
-        @include themify($themes) {
-          background: themed('color');
+        .param {
+          position: relative;
+          .remove {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4.4vw;
+            height: 4.4vw;
+            background: #f94b4b;
+            border-radius: 0.2vw;
+            cursor: pointer;
+            color: #fff;
+            font-size: 3.4vw;
+            text-align: center;
+            line-height: 4.4vw;
+          }
         }
       }
-      &::after {
-        transform: translate(-50%, -50%) rotateZ(90deg);
+
+      .add-device {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 31vw;
+        height: 8.8vw;
+        border-radius: 0.4vw;
+        box-sizing: border-box;
+        font-size: 3.4vw;
+        margin: 0 auto;
+        cursor: pointer;
+        border: 1px solid fetch('color');
+        color: fetch('color');
+
+        .add-icon {
+          width: 20px;
+          height: 20px;
+          position: relative;
+          margin-right: 16px;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: 0.6vw;
+            height: 4.1vw;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 1px;
+            content: '';
+            display: block;
+            background: fetch('color');
+          }
+          &::after {
+            transform: translate(-50%, -50%) rotateZ(90deg);
+          }
+        }
       }
     }
   }

pages/_template/ph/form/components/form-club-info.vue

@@ -613,8 +613,8 @@ export default {
   ::v-deep {
     .el-input.is-active .el-input__inner,
     .el-input__inner:focus {
-      @include themify($themes) {
-        border-color: themed('color');
+      @include useTheme() {
+        border-color: fetch('color');
       }
     }
   }

pages/_template/ph/form/components/form-club-register.vue

@@ -211,19 +211,19 @@ export default {
   ::v-deep {
     .el-input.is-active .el-input__inner,
     .el-input__inner:focus {
-      @include themify($themes) {
-        border-color: themed('color');
+      @include useTheme() {
+        border-color: fetch('color');
       }
     }
   }
 }
 
 .verifyCode {
-  .send {
-    cursor: pointer;
-    white-space: nowrap;
-    @include themify($themes) {
-      color: themed('color');
+  @include useTheme() {
+    .send {
+      cursor: pointer;
+      white-space: nowrap;
+      color: fetch('color');
     }
   }
 }

pages/_template/ph/index.vue

@@ -128,189 +128,174 @@ export default {
 <style scoped lang="scss">
 // pc 端
 @media screen and (min-width: 768px) {
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-home');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-home');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
+      }
 
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    overflow: hidden;
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        overflow: hidden;
 
-    .list {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+        .list {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
 
-    .section {
-      width: 284px;
-      height: 260px;
-      margin-left: auto;
-      margin-right: auto;
-      background-color: #fff;
-      transition: all 0.4s;
-      cursor: pointer;
-      border-radius: 4px;
+        .section {
+          width: 284px;
+          height: 260px;
+          margin-left: auto;
+          margin-right: auto;
+          background-color: #fff;
+          transition: all 0.4s;
+          cursor: pointer;
+          border-radius: 4px;
 
-      .icon-image {
-        width: 86px;
-        height: 86px;
-        background-size: 86px 86px;
-        background-repeat: no-repeat;
-        background-position: center;
+          .icon-image {
+            width: 86px;
+            height: 86px;
+            background-size: 86px 86px;
+            background-repeat: no-repeat;
+            background-position: center;
 
-        &.item0 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-edit');
-          }
-        }
+            &.item0 {
+              background-image: fetch('pc-icon-home-edit');
+            }
 
-        &.item1 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-approve');
-          }
-        }
+            &.item1 {
+              background-image: fetch('pc-icon-home-approve');
+            }
 
-        &.item2 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-doc');
-          }
-        }
+            &.item2 {
+              background-image: fetch('pc-icon-home-doc');
+            }
 
-        &.item3 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-feedback');
+            &.item3 {
+              background-image: fetch('pc-icon-home-feedback');
+            }
           }
-        }
-      }
 
-      &:hover {
-        transform: translateY(-10px);
+          &:hover {
+            transform: translateY(-10px);
+            background-color: fetch('color');
 
-        @include themify($themes) {
-          background-color: themed('color');
-        }
+            .icon-image {
+              &.item0 {
+                background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
+              }
 
-        .icon-image {
-          &.item0 {
-            background-image: url(~assets/theme-images/common/pc-icon-edit-active.png) !important;
-          }
+              &.item1 {
+                background-image: url(~assets/theme-images/common/pc-icon-approve-active.png) !important;
+              }
 
-          &.item1 {
-            background-image: url(~assets/theme-images/common/pc-icon-approve-active.png) !important;
-          }
+              &.item2 {
+                background-image: url(~assets/theme-images/common/pc-icon-doc-active.png) !important;
+              }
 
-          &.item2 {
-            background-image: url(~assets/theme-images/common/pc-icon-doc-active.png) !important;
+              &.item3 {
+                background-image: url(~assets/theme-images/common/pc-icon-feedback-active.png) !important;
+              }
+            }
+
+            .name {
+              color: #fff;
+            }
           }
 
-          &.item3 {
-            background-image: url(~assets/theme-images/common/pc-icon-feedback-active.png) !important;
+          .icon {
+            width: 86px;
+            height: 86px;
           }
-        }
 
-        .name {
-          color: #fff;
+          .name {
+            font-size: 24px;
+            color: #404040;
+          }
         }
       }
-
-      .icon {
-        width: 86px;
-        height: 86px;
-      }
-
-      .name {
-        font-size: 24px;
-        color: #404040;
-      }
     }
   }
 }
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-home');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    .section {
-      width: 85.6vw;
-      height: 58vw;
-      margin-left: auto;
-      margin-right: auto;
-      box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);
-      border-radius: 4px;
-
-      .icon {
-        width: 20vw;
-        height: 20vw;
-      }
-
-      .name {
-        font-size: 4.8vw;
-        color: #404040;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-home');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
       }
 
-      .icon-image {
-        width: 86px;
-        height: 86px;
-        background-size: 86px 86px;
-        background-repeat: no-repeat;
-        background-position: center;
+      .page-content {
+        .section {
+          width: 85.6vw;
+          height: 58vw;
+          margin-left: auto;
+          margin-right: auto;
+          box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);
+          border-radius: 4px;
 
-        &.item0 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-edit');
+          .icon {
+            width: 20vw;
+            height: 20vw;
           }
-        }
 
-        &.item1 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-approve');
+          .name {
+            font-size: 4.8vw;
+            color: #404040;
           }
-        }
 
-        &.item2 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-doc');
-          }
-        }
+          .icon-image {
+            width: 86px;
+            height: 86px;
+            background-size: 86px 86px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.item0 {
+              background-image: fetch('h5-icon-home-edit');
+            }
+
+            &.item1 {
+              background-image: fetch('h5-icon-home-approve');
+            }
+
+            &.item2 {
+              background-image: fetch('h5-icon-home-doc');
+            }
 
-        &.item3 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-feedback');
+            &.item3 {
+              background-image: fetch('h5-icon-home-feedback');
+            }
           }
         }
       }

pages/_template/ph/record/club/detail.vue

@@ -154,7 +154,7 @@ export default {
   data() {
     return {
       clubInfo: null,
-      authId: ''
+      authId: '',
     }
   },
   computed: {
@@ -171,7 +171,7 @@ export default {
           clubUserId: this.clubUserId,
         })
 
-        if(!result.data.auth) return
+        if (!result.data.auth) return
 
         this.authId = result.data.auth.authId
 
@@ -186,7 +186,9 @@ export default {
     },
 
     onToDeviceList() {
-      this.$router.push(`${this.routePrefix}/record/device?authId=${this.authId}`)
+      this.$router.push(
+        `${this.routePrefix}/record/device?authId=${this.authId}`
+      )
     },
     onEdit() {
       this.$router.push(`${this.routePrefix}/record/club/edit`)
@@ -198,101 +200,96 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-club');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 600px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
-
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 18px;
-      margin: 24px 0;
-
-      .status {
-        .success {
-          color: #f3920d !important;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-club');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
         }
-        .warning {
-          color: #1890ff !important;
-        }
-        .danger {
-          color: #f94b4b !important;
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-
-      .col {
-        &:first-child {
-          white-space: nowrap;
-          width: 170px;
-          color: #666;
-          text-align: right;
-          flex-shrink: 0;
+      .page-content {
+        width: 600px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
+
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
         }
 
-        &:last-child {
-          color: #282828;
-        }
-      }
-
-      .el-image {
-        width: 120px;
-        height: 120px;
-        margin-right: 12px;
-      }
-    }
-
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 18px;
+          margin: 24px 0;
+
+          .status {
+            .success {
+              color: #f3920d !important;
+            }
+            .warning {
+              color: #1890ff !important;
+            }
+            .danger {
+              color: #f94b4b !important;
+            }
+          }
 
-        cursor: pointer;
+          .col {
+            &:first-child {
+              white-space: nowrap;
+              width: 170px;
+              color: #666;
+              text-align: right;
+              flex-shrink: 0;
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .el-image {
+            width: 120px;
+            height: 120px;
+            margin-right: 12px;
           }
         }
 
-        &.search {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
+
+            cursor: pointer;
+
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+
+            &.search {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
       }
@@ -302,102 +299,98 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-club');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
 
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7.2vw;
-
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      margin-bottom: 8vw;
-      color: #282828;
-    }
-
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 3.4vw;
-      margin-bottom: 5.6vw;
-      flex-wrap: wrap;
-
-      .status {
-        .success {
-          color: #f3920d !important;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-club');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
         }
-        .warning {
-          color: #1890ff !important;
-        }
-        .danger {
-          color: #f94b4b !important;
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
 
-      .col {
-        &:first-child {
-          width: 17vw;
-          color: #666;
-          // text-align: right;
-
-          &.max-width {
-            width: 100% !important;
-            margin-bottom: 2.6vw;
-          }
-        }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7.2vw;
 
-        &:last-child {
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          margin-bottom: 8vw;
           color: #282828;
         }
-      }
-
-      .el-image {
-        width: 25.6vw;
-        height: 25.6vw;
-      }
-    }
 
-    .control {
-      margin-top: 22.8vw;
-      .button {
-        width: 100%;
-        height: 12vw;
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 3.4vw;
+          margin-bottom: 5.6vw;
+          flex-wrap: wrap;
+
+          .status {
+            .success {
+              color: #f3920d !important;
+            }
+            .warning {
+              color: #1890ff !important;
+            }
+            .danger {
+              color: #f94b4b !important;
+            }
+          }
 
-        cursor: pointer;
+          .col {
+            &:first-child {
+              width: 17vw;
+              color: #666;
+              // text-align: right;
+
+              &.max-width {
+                width: 100% !important;
+                margin-bottom: 2.6vw;
+              }
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .el-image {
+            width: 25.6vw;
+            height: 25.6vw;
           }
         }
 
-        &.search {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+        .control {
+          margin-top: 22.8vw;
+          .button {
+            width: 100%;
+            height: 12vw;
+
+            cursor: pointer;
+
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+
+            &.search {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
       }

pages/_template/ph/record/club/edit.vue

@@ -86,92 +86,91 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-club');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 700px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
 
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-club');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
+      }
+      .page-content {
+        width: 700px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
+
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
+        }
 
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
-    .normal-row {
-      position: relative;
-      .label {
-        font-size: 14px;
-        color: #606266;
+        .normal-row {
+          position: relative;
+          .label {
+            font-size: 14px;
+            color: #606266;
 
-        span {
-          color: #b2b2b2;
-        }
-      }
-      .postion-btn {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-        width: 62px;
-        height: 28px;
-        line-height: 28px;
-        font-size: 14px;
-        color: #fff;
-        background: #1890ff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 4px;
+            span {
+              color: #b2b2b2;
+            }
+          }
+          .postion-btn {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 62px;
+            height: 28px;
+            line-height: 28px;
+            font-size: 14px;
+            color: #fff;
+            background: #1890ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: 4px;
 
-        &::before {
-          content: '';
-          display: inline-block;
-          width: 16px;
-          height: 16px;
-          background: url(~assets/theme-images/common/icon-position.png)
-            no-repeat center;
-          background-size: 16px 16px;
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 16px;
+              height: 16px;
+              background: url(~assets/theme-images/common/icon-position.png)
+                no-repeat center;
+              background-size: 16px 16px;
+            }
+          }
         }
       }
     }
@@ -186,91 +185,89 @@ export default {
   }
 
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-club');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
 
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-club');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
 
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      margin-bottom: 8vw;
-      color: #282828;
-    }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-    .control {
-      .button {
-        width: 100%;
-        height: 12vw;
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          margin-bottom: 8vw;
+          color: #282828;
+        }
 
-        cursor: pointer;
+        .control {
+          .button {
+            width: 100%;
+            height: 12vw;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            cursor: pointer;
+
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
-    .normal-row {
-      position: relative;
-      .label {
-        font-size: 14px;
-        color: #606266;
+        .normal-row {
+          position: relative;
+          .label {
+            font-size: 14px;
+            color: #606266;
 
-        span {
-          color: #b2b2b2;
-          font-size: 2.6vw;
-        }
-      }
-      .postion-btn {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-        width: 14vw;
-        height: 6.8vw;
-        line-height: 6.8vw;
-        font-size: 3.2vw;
-        color: #fff;
-        background: #1890ff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 0.4vw;
+            span {
+              color: #b2b2b2;
+              font-size: 2.6vw;
+            }
+          }
+          .postion-btn {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 14vw;
+            height: 6.8vw;
+            line-height: 6.8vw;
+            font-size: 3.2vw;
+            color: #fff;
+            background: #1890ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: 0.4vw;
 
-        &::before {
-          content: '';
-          display: inline-block;
-          width: 3.58vw;
-          height: 3.58vw;
-          background: url(~assets/theme-images/common/icon-position.png)
-            no-repeat center;
-          background-size: 3.58vw;
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 3.58vw;
+              height: 3.58vw;
+              background: url(~assets/theme-images/common/icon-position.png)
+                no-repeat center;
+              background-size: 3.58vw;
+            }
+          }
         }
       }
     }

pages/_template/ph/record/device/detail.vue

@@ -160,103 +160,101 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-device');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 600px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
 
-    .params-list {
-      .param {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-column-gap: 8px;
-        grid-row-gap: 16px;
-        .param-name {
-          text-align: right;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-device');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-    }
-
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 18px;
-      margin: 24px 0;
+      .page-content {
+        width: 600px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-      .col {
-        &.success {
-          color: #f3920d !important;
-        }
-        &.warning {
-          color: #1890ff !important;
-        }
-        &.danger {
-          color: #f94b4b !important;
-        }
-        &:first-child {
-          width: 100px;
-          color: #666;
-          text-align: right;
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
         }
 
-        &:last-child {
-          color: #282828;
+        .params-list {
+          .param {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 8px;
+            grid-row-gap: 16px;
+            .param-name {
+              text-align: right;
+            }
+          }
         }
-      }
 
-      .el-image {
-        width: 120px;
-        height: 120px;
-        margin-right: 12px;
-        box-sizing: border-box;
-        border-radius: 4px;
-      }
-    }
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 18px;
+          margin: 24px 0;
+
+          .col {
+            &.success {
+              color: #f3920d !important;
+            }
+            &.warning {
+              color: #1890ff !important;
+            }
+            &.danger {
+              color: #f94b4b !important;
+            }
+            &:first-child {
+              width: 100px;
+              color: #666;
+              text-align: right;
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
+
+          .el-image {
+            width: 120px;
+            height: 120px;
+            margin-right: 12px;
+            box-sizing: border-box;
+            border-radius: 4px;
+          }
+        }
 
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
           }
         }
       }
@@ -266,100 +264,98 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-device');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
 
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      color: #282828;
-      margin-bottom: 4.6vw;
-    }
-
-    .params-list {
-      .param {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-column-gap: 1.2vw;
-        grid-row-gap: 2.4vw;
-        .param-name {
-          text-align: right;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-device');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
-    }
 
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 3.4vw;
-      margin: 5.6vw 0;
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-      .col {
-        &.success {
-          color: #f3920d !important;
-        }
-        &.warning {
-          color: #1890ff !important;
-        }
-        &.danger {
-          color: #f94b4b !important;
-        }
-        &:first-child {
-          width: 19vw;
-          color: #666;
-          white-space: nowrap;
-          flex-shrink: 0;
-          // text-align: right;
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          color: #282828;
+          margin-bottom: 4.6vw;
         }
 
-        &:last-child {
-          color: #282828;
+        .params-list {
+          .param {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 1.2vw;
+            grid-row-gap: 2.4vw;
+            .param-name {
+              text-align: right;
+            }
+          }
         }
-      }
 
-      .el-image {
-        width: 26vw;
-        height: 26vw;
-        border-radius: 1vw;
-      }
-    }
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 3.4vw;
+          margin: 5.6vw 0;
+
+          .col {
+            &.success {
+              color: #f3920d !important;
+            }
+            &.warning {
+              color: #1890ff !important;
+            }
+            &.danger {
+              color: #f94b4b !important;
+            }
+            &:first-child {
+              width: 19vw;
+              color: #666;
+              white-space: nowrap;
+              flex-shrink: 0;
+              // text-align: right;
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
+
+          .el-image {
+            width: 26vw;
+            height: 26vw;
+            border-radius: 1vw;
+          }
+        }
 
-    .control {
-      margin-top: 22.8vw;
-      .button {
-        width: 100%;
-        height: 12vw;
-        cursor: pointer;
+        .control {
+          margin-top: 22.8vw;
+          .button {
+            width: 100%;
+            height: 12vw;
+            cursor: pointer;
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
           }
         }
       }

pages/_template/ph/record/device/edit.vue

@@ -88,90 +88,86 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-device');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 700px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-device');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
+      }
+      .page-content {
+        width: 700px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
+        }
 
-    .el-select {
-      width: 100%;
-    }
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .el-select {
+          width: 100%;
+        }
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
 
-    .device-param-list {
-      position: relative;
-      .add-param {
-        position: absolute;
-        cursor: pointer;
-        top: -40px;
-        right: 0;
-        text-decoration: underline;
-        font-size: 14px;
-        @include themify($themes) {
-          color: themed('color');
-        }
-      }
+        .device-param-list {
+          position: relative;
+          .add-param {
+            position: absolute;
+            cursor: pointer;
+            top: -40px;
+            right: 0;
+            text-decoration: underline;
+            font-size: 14px;
+            color: fetch('color');
+          }
 
-      .param {
-        position: relative;
-        .remove {
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 20px;
-          height: 20px;
-          background: #f94b4b;
-          border-radius: 2px;
-          cursor: pointer;
-          color: #fff;
-          font-size: 14px;
-          text-align: center;
-          line-height: 20px;
+          .param {
+            position: relative;
+            .remove {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 20px;
+              height: 20px;
+              background: #f94b4b;
+              border-radius: 2px;
+              cursor: pointer;
+              color: #fff;
+              font-size: 14px;
+              text-align: center;
+              line-height: 20px;
+            }
+          }
         }
       }
     }
@@ -180,85 +176,81 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-device');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-device');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      color: #282828;
-      margin-bottom: 4.6vw;
-    }
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          color: #282828;
+          margin-bottom: 4.6vw;
+        }
 
-    .el-select {
-      width: 100%;
-    }
-    .control {
-      .button {
-        width: 100%;
-        height: 12vw;
+        .el-select {
+          width: 100%;
+        }
+        .control {
+          .button {
+            width: 100%;
+            height: 12vw;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
 
-    .device-param-list {
-      position: relative;
-      .add-param {
-        position: absolute;
-        cursor: pointer;
-        top: -40px;
-        right: 0;
-        font-size: 3.4vw;
-        @include themify($themes) {
-          color: themed('color');
-        }
-      }
+        .device-param-list {
+          position: relative;
+          .add-param {
+            position: absolute;
+            cursor: pointer;
+            top: -40px;
+            right: 0;
+            font-size: 3.4vw;
+            color: fetch('color');
+          }
 
-      .param {
-        position: relative;
-        .remove {
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 4.4vw;
-          height: 4.4vw;
-          background: #f94b4b;
-          border-radius: 0.2vw;
-          cursor: pointer;
-          color: #fff;
-          font-size: 3.4vw;
-          text-align: center;
-          line-height: 4.4vw;
+          .param {
+            position: relative;
+            .remove {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 4.4vw;
+              height: 4.4vw;
+              background: #f94b4b;
+              border-radius: 0.2vw;
+              cursor: pointer;
+              color: #fff;
+              font-size: 3.4vw;
+              text-align: center;
+              line-height: 4.4vw;
+            }
+          }
         }
       }
     }

pages/_template/ph/record/device/index.vue

@@ -95,7 +95,7 @@ export default {
     },
     initData() {
       this.listQuery.authId = this.$route.query.authId
-      if(!this.listQuery.authId) return
+      if (!this.listQuery.authId) return
       this.authProductList()
     },
     // 获取机构列表
@@ -135,92 +135,92 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-device');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 700px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
-
-    .device-list {
-      .device {
-        position: relative;
-        padding: 36px 0 12px;
-        border-bottom: 1px solid #c2c2c2;
-        cursor: pointer;
 
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-device');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
         .name {
-          margin-bottom: 8px;
+          font-size: 30px;
+          color: #fff;
         }
+      }
+      .page-content {
+        width: 700px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-        .label {
-          font-size: 18px;
-          color: #666;
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
         }
 
-        .content {
-          font-size: 18px;
-          color: #282828;
-        }
-        .status {
-          &.success {
-            .content {
-              color: #f3920d;
+        .device-list {
+          .device {
+            position: relative;
+            padding: 36px 0 12px;
+            border-bottom: 1px solid #c2c2c2;
+            cursor: pointer;
+
+            .name {
+              margin-bottom: 8px;
             }
-          }
-          &.warning {
-            .content {
-              color: #1890ff;
+
+            .label {
+              font-size: 18px;
+              color: #666;
             }
-          }
-          &.danger {
+
             .content {
-              color: #f94b4b;
+              font-size: 18px;
+              color: #282828;
+            }
+            .status {
+              &.success {
+                .content {
+                  color: #f3920d;
+                }
+              }
+              &.warning {
+                .content {
+                  color: #1890ff;
+                }
+              }
+              &.danger {
+                .content {
+                  color: #f94b4b;
+                }
+              }
             }
-          }
-        }
 
-        &::after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          display: block;
-          width: 20px;
-          height: 20px;
-          background: url(~assets/theme-images/common/pc-icon-detail-more.png)
-            no-repeat center;
-          background-size: 18px;
+            &::after {
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              display: block;
+              width: 20px;
+              height: 20px;
+              background: url(~assets/theme-images/common/pc-icon-detail-more.png)
+                no-repeat center;
+              background-size: 18px;
+            }
+          }
         }
       }
     }
@@ -229,90 +229,90 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-device');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
-
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      color: #282828;
-      margin-bottom: 4.6vw;
-    }
-
-    .device-list {
-      .device {
-        position: relative;
-        padding: 2.6vw 0;
-        border-bottom: 0.1vw solid #c2c2c2;
-        cursor: pointer;
 
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-device');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
         .name {
-          margin-bottom: 2.2vw;
+          font-size: 4vw;
+          color: #fff;
         }
+      }
 
-        .label {
-          font-size: 3.4vw;
-          color: #666;
-        }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-        .content {
-          font-size: 3.4vw;
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
           color: #282828;
+          margin-bottom: 4.6vw;
         }
-        .status {
-          &.success {
-            .content {
-              color: #f3920d;
+
+        .device-list {
+          .device {
+            position: relative;
+            padding: 2.6vw 0;
+            border-bottom: 0.1vw solid #c2c2c2;
+            cursor: pointer;
+
+            .name {
+              margin-bottom: 2.2vw;
             }
-          }
-          &.warning {
-            .content {
-              color: #1890ff;
+
+            .label {
+              font-size: 3.4vw;
+              color: #666;
             }
-          }
-          &.danger {
+
             .content {
-              color: #f94b4b;
+              font-size: 3.4vw;
+              color: #282828;
+            }
+            .status {
+              &.success {
+                .content {
+                  color: #f3920d;
+                }
+              }
+              &.warning {
+                .content {
+                  color: #1890ff;
+                }
+              }
+              &.danger {
+                .content {
+                  color: #f94b4b;
+                }
+              }
             }
-          }
-        }
 
-        &::after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          display: block;
-          width: 20px;
-          height: 20px;
-          background: url(~assets/theme-images/common/h5-icon-detail-more.png)
-            no-repeat center;
-          background-size: 18px;
+            &::after {
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              display: block;
+              width: 20px;
+              height: 20px;
+              background: url(~assets/theme-images/common/h5-icon-detail-more.png)
+                no-repeat center;
+              background-size: 18px;
+            }
+          }
         }
       }
     }

pages/_template/ph/record/message.vue

@@ -34,81 +34,84 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    min-height: calc(100vh - 80px - 80px);
-    background: #fff;
-  }
-  .page-content {
-    width: 432px;
-    padding-top: 140px;
+    @include useTheme() {
+      min-height: calc(100vh - 80px - 80px);
+      background: #fff;
 
-    .icon-submit-succsss {
-      width: 64px;
-      height: 64px;
-      background: url(~assets/theme-images/common/pc-icon-submit-success.png)
-        no-repeat center;
-      background-size: 64px;
-    }
+      .page-content {
+        width: 432px;
+        padding-top: 140px;
 
-    .tip {
-      font-size: 24px;
-      font-weight: bold;
-      color: #1890ff;
-    }
-    .label {
-      font-size: 18px;
-      color: #282828;
-      line-height: 1.6;
-    }
-    .record-btn {
-      width: 98px;
-      height: 36px;
-      color: #fff;
-      font-size: 14px;
-      text-align: center;
-      line-height: 36px;
-      border-radius: 4px;
-      cursor: pointer;
-      @include themify($themes) {
-        background: themed('color');
+        .icon-submit-succsss {
+          width: 64px;
+          height: 64px;
+          background: url(~assets/theme-images/common/pc-icon-submit-success.png)
+            no-repeat center;
+          background-size: 64px;
+        }
+
+        .tip {
+          font-size: 24px;
+          font-weight: bold;
+          color: #1890ff;
+        }
+        .label {
+          font-size: 18px;
+          color: #282828;
+          line-height: 1.6;
+        }
+        .record-btn {
+          width: 98px;
+          height: 36px;
+          color: #fff;
+          font-size: 14px;
+          text-align: center;
+          line-height: 36px;
+          border-radius: 4px;
+          cursor: pointer;
+          background: fetch('color');
+        }
       }
     }
   }
 }
 
 @media screen and (max-width: 768px) {
-  .page-content {
-    padding: 0 9.2vw;
-    padding-top: 25.2vw;
+  .page {
+    @include useTheme() {
+      .page-content {
+        padding: 0 9.2vw;
+        padding-top: 25.2vw;
 
-    .icon-submit-succsss {
-      width: 12vw;
-      height: 12vw;
-      background: url(~assets/theme-images/common/h5-icon-submit-success.png)
-        no-repeat center;
-      background-size: 12vw;
-    }
+        .icon-submit-succsss {
+          width: 12vw;
+          height: 12vw;
+          background: url(~assets/theme-images/common/h5-icon-submit-success.png)
+            no-repeat center;
+          background-size: 12vw;
+        }
 
-    .tip {
-      font-size: 4.2vw;
-      font-weight: bold;
-      color: #1890ff;
-    }
-    .label {
-      font-size: 3.4vw;
-      color: #282828;
-      line-height: 1.6;
-    }
-    .record-btn {
-      width: 36vw;
-      height: 8.8vw;
-      color: #fff;
-      font-size: 3.2vw;
-      text-align: center;
-      line-height: 8.8vw;
-      border-radius: 0.4vw;
-      cursor: pointer;
-      @include themify($themes) {
-        background: themed('color');
+        .tip {
+          font-size: 4.2vw;
+          font-weight: bold;
+          color: #1890ff;
+        }
+        .label {
+          font-size: 3.4vw;
+          color: #282828;
+          line-height: 1.6;
+        }
+        .record-btn {
+          width: 36vw;
+          height: 8.8vw;
+          color: #fff;
+          font-size: 3.2vw;
+          text-align: center;
+          line-height: 8.8vw;
+          border-radius: 0.4vw;
+          cursor: pointer;
+          background: fetch('color');
+        }
       }
     }
   }

pages/_template/ross/activity/challenge/list.vue

@@ -238,14 +238,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 ::v-deep {
   .el-input.is-active .el-input__inner,
   .el-input__inner:focus {

pages/_template/ross/activity/challenge_new/index.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="page">
+    <div class="page-top"></div>
+    <div class="page-content">
+      <div class="content">
+        <div class="title">赛事活动介绍</div>
+        <dl>
+          <dt><div>活动介绍</div></dt>
+          <dd>
+            采美平台和云进通在跨境物流领域达成战略合作，为广大采美客户提供轻松无忧的跨境体验！
+          </dd>
+          <dt><div>活动时间</div></dt>
+          <dd>2022.10月10日——2022.12月31日</dd>
+          <dt><div>活动奖励</div></dt>
+          <dd>a、一等奖1000元；b、二等奖500元；c、三等奖300元</dd>
+          <dt><div>参与方式</div></dt>
+          <dd>
+            第一步：申请认证和上传相关资料可以登录ROSS官方网站或品牌授权的正品认证通入口申请；第二步：通过手机号码、机构
+            名称，注册账号；第三步：通过上传机构门头照片、营业地址等相关信息，进行机构认证；第四步：通过填写设备
+            相关名称、图片、相关购买凭证，进行设备认证。完成后登录上传视频且抖音分享成功即可！
+          </dd>
+          <dt><div>评奖规则</div></dt>
+          <dd>
+            用户登录商城注册成功后，按在规定的时间内完成点赞数最高的评定等级
+          </dd>
+          <dt><div>奖项公布</div></dt>
+          <dd>用户在规定时间内完成后10个工作日将公布排名以及颁发奖品</dd>
+          <dt><div>注意事项</div></dt>
+          <dd>一个抖音账号只能参与一次</dd>
+        </dl>
+      </div>
+      <div class="entry">
+        <div class="title">活动入口</div>
+        <div class="list">
+          <div class="cover" @click="toDetail">
+            <span class="status" :class="activity.type">
+              {{ activity.text }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app-ross',
+  data() {
+    return {
+      activityState: 0,
+    }
+  },
+  computed: {
+    ...mapGetters(['routePrefix', 'authUserId']),
+    // 活动状态
+    activity() {
+      const result = {
+        2: { type: 'end', text: '已结束' },
+        1: { type: 'start', text: '进行中' },
+        0: { type: 'wait', text: '未开始' },
+      }
+      return result[this.activityState]
+    },
+  },
+  created() {
+    this.fetchActivityStatus()
+  },
+  mounted() {
+    this.initAppMessageShareData()
+  },
+  methods: {
+    initAppMessageShareData() {
+      //  重试次数
+      let retryCount = 1
+      this.$wxReady((wx) => {
+        //需在用户可能点击分享按钮前就先调用
+        wx.updateAppMessageShareData({
+          title: '认证通', // 分享标题
+          desc: '您的好友邀请您一起来参与认证通挑战赛，赢大奖，快来参与吧！', // 分享描述
+          link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+          imgUrl: window.location.origin + '/activity.png', // 分享图标
+          fail: () => {
+            if (retryCount === 0) return
+            this.initAppMessageShareData()
+            retryCount--
+          },
+        })
+      })
+    },
+
+    // 活动详情
+    toDetail() {
+      const url = `${this.routePrefix}/activity/challenge/list`
+      this.$router.push(url)
+    },
+
+    // 获取活动状态
+    async fetchActivityStatus() {
+      try {
+        const res = await this.$http.api.fetchActivityStatus({
+          authUserId: this.authUserId,
+        })
+        if (!res.data) return
+        this.activityState = res.data.activityState
+      } catch (error) {
+        console.log(error)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .page {
+    padding-bottom: 120px;
+    background: #fff;
+    .page-top {
+      width: 100%;
+      height: 530px;
+      background: url(~assets/theme-images/ross/pc-banner-activity.png)
+        no-repeat center;
+      background-size: auto 530px;
+    }
+
+    .page-content {
+      width: 872px;
+      margin: 0 auto;
+      margin-top: 16px;
+
+      .content {
+        min-height: 1170px;
+
+        .title {
+          font-size: 40px;
+          color: #333;
+          height: 80px;
+          box-sizing: border-box;
+          text-align: center;
+          margin-bottom: 70px;
+          padding-top: 20px;
+          font-weight: bold;
+          background: url(~assets/theme-images/ross/pc_activity_title_01.png)
+            no-repeat center;
+          background-size: auto 80px;
+        }
+
+        dl {
+          dt {
+            font-size: 30px;
+            text-align: center;
+            margin-bottom: 24px;
+
+            div {
+              line-height: 24px;
+              display: inline-block;
+              border-bottom: 5px;
+              border-bottom-color: #ffd7c5;
+              border-bottom-style: solid;
+            }
+          }
+          dd {
+            font-size: 16px;
+            color: #666666;
+            text-align: center;
+            line-height: 32px;
+            margin-bottom: 64px;
+          }
+        }
+      }
+
+      .entry {
+        margin-top: 120px;
+        .title {
+          font-size: 40px;
+          color: #333;
+          height: 80px;
+          box-sizing: border-box;
+          text-align: center;
+          margin-bottom: 70px;
+          padding-top: 20px;
+          font-weight: bold;
+          background: url(~assets/theme-images/ross/pc_activity_title_02.png)
+            no-repeat center;
+          background-size: auto 80px;
+        }
+
+        .cover {
+          position: relative;
+          width: 856px;
+          height: 340px;
+          margin: 0 auto;
+          cursor: pointer;
+          background: url(~assets/theme-images/ross/activity-entry-bg.png)
+            no-repeat center;
+          background-size: 856px 340px;
+
+          .status {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 72px;
+            height: 32px;
+            line-height: 32px;
+            border-radius: 8px 0 8px 0;
+            color: #fff;
+            text-align: center;
+
+            &.wait {
+              background: #f94b4b;
+            }
+            &.start {
+              background: #f3920d;
+            }
+            &.end {
+              background: rgba(0, 0, 0, 0.3);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .page {
+    padding-bottom: 10vw;
+    .page-top {
+      width: 100%;
+      height: 100vw;
+      background: url(~assets/theme-images/ross/h5-banner-activity.png)
+        no-repeat center;
+      background-size: auto 100vw;
+    }
+
+    .page-content {
+      width: 85.6vw;
+      margin: 0 auto;
+      margin-top: 3.2vw;
+
+      .content {
+        min-height: 116.3vw;
+        margin-top: 8vw;
+
+        .title {
+          font-size: 5vw;
+          color: #333;
+          height: 9vw;
+          box-sizing: border-box;
+          text-align: center;
+          margin-bottom: 8vw;
+          padding-top: 2.4vw;
+          font-weight: bold;
+          background: url(~assets/theme-images/ross/h5_activity_title_01.png)
+            no-repeat center;
+          background-size: auto 9vw;
+        }
+
+        dl {
+          dt {
+            font-size: 4.8vw;
+            text-align: center;
+            margin-bottom: 4.8vw;
+
+            div {
+              line-height: 3.2vw;
+              display: inline-block;
+              border-bottom: 0.8vw;
+              border-bottom-color: #ffd7c5;
+              border-bottom-style: solid;
+            }
+          }
+          dd {
+            font-size: 3.4vw;
+            color: #666666;
+            text-align: center;
+            line-height: 5.6vw;
+            margin-bottom: 8.8vw;
+          }
+        }
+      }
+
+      .entry {
+        margin-top: 15vw;
+        .title {
+          font-size: 5vw;
+          color: #333;
+          height: 9vw;
+          box-sizing: border-box;
+          text-align: center;
+          margin-bottom: 8vw;
+          padding-top: 2.4vw;
+          font-weight: bold;
+          background: url(~assets/theme-images/ross/h5_activity_title_02.png)
+            no-repeat center;
+          background-size: auto 9vw;
+        }
+
+        .cover {
+          position: relative;
+          width: 85.6vw;
+          height: 34vw;
+          margin: 0 auto;
+          // background: pink;
+          cursor: pointer;
+          background: url(~assets/theme-images/ross/activity-entry-bg.png)
+            no-repeat center;
+          background-size: 85.6vw 34vw;
+
+          .status {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 12.8vw;
+            height: 5.6vw;
+            line-height: 5.6vw;
+            border-radius: 0.8vw 0 0.8vw 0;
+            color: #fff;
+            text-align: center;
+            font-size: 3vw;
+
+            &.wait {
+              background: #f94b4b;
+            }
+            &.start {
+              background: #f3920d;
+            }
+            &.end {
+              background: rgba(0, 0, 0, 0.3);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/ross/activity/challenge_new/list.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="page">
+    <van-list
+      v-model="loadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="fetchVideoList"
+    >
+      <div class="page-top"></div>
+      <div class="page-content">
+        <!-- 操作区域 -->
+        <div class="control">
+          <div class="search">
+            <el-input
+              placeholder="搜索登录账户后四位或所属机构"
+              @keyup.enter.native="getList"
+              v-model="listQuery.clubUserName"
+              clearable
+              @clear="getList"
+            >
+              <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+          </div>
+          <div class="publish" @click="onPublish">发布视频</div>
+        </div>
+        <!-- 视频列表区域 -->
+        <div class="video-content">
+          <div class="title">视频排名</div>
+          <SimpleVideoList :list="list" />
+          <!-- 列表为空 -->
+          <SimpleEmpty
+            v-if="!total && !isRequest"
+            name="icon-empty-video.png"
+            description="暂无视频~"
+          ></SimpleEmpty>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="publish" @click="onPublish">发布视频</div>
+
+    <!-- 发布提示对话框 -->
+    <SimpleDialog
+      v-model="dialog"
+      :confirmText="dialogOption.confirmText"
+      :description="dialogOption.description"
+      :cancel="dialogOption.cancel"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+    ></SimpleDialog>
+
+    <!-- 视频播放组件 -->
+    <SimpleVideoPlayer
+      :videoSrc="videoUrl"
+      :description="description"
+      ref="videoPlayer"
+    ></SimpleVideoPlayer>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { debounce } from '~/utils'
+export default {
+  layout: 'app-ross',
+  filters: {
+    mobileFormat(mobile) {
+      return mobile ? mobile.replace(/^(\w{3})\w+(\w{4})$/, '$1****$2') : ''
+    },
+  },
+  data() {
+    return {
+      isRequest: true,
+      finished: true, // 列表加载是否完毕（加载完了所有数据）
+      loadingMore: false, // 是否正在加载
+      listQuery: {
+        clubUserName: '',
+        pageNum: 1,
+        pageSize: 20,
+        status: 1,
+      },
+      list: [],
+      total: 0,
+      dialog: false,
+      dialogOption: {
+        confirmText: '确定',
+        description: '抱歉，活动已结束，暂无法发布视频！',
+        cancel: false,
+      },
+      publishInfo: {},
+      videoUrl: '',
+      description: '',
+    }
+  },
+  computed: {
+    ...mapGetters(['routePrefix', 'accessToken', 'userInfo', 'authUserId']),
+  },
+  created() {
+    this.getList()
+  },
+  beforeDestroy() {
+    this.$toast.clear()
+  },
+  methods: {
+    // 获取列表
+    getList() {
+      this.$toast.loading({
+        message: '正在获取视频列表...',
+        duration: 0,
+      })
+      this.listQuery.pageNum = 1
+      this.isRequest = true
+      this.list = []
+      this.fetchVideoList()
+    },
+
+    // 获取视频列表
+    fetchVideoList: debounce(async function () {
+      try {
+        this.loadingMore = true
+        this.isRequest = true
+        this.listQuery.authUserId = this.authUserId
+        const res = await this.$http.api.fetchVideoList(this.listQuery)
+        this.list = [...this.list, ...res.data.list]
+        this.total = res.data.total
+        this.listQuery.pageNum++
+        this.finished = !res.data.hasNextPage
+        this.loadingMore = false
+        this.isRequest = false
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.$toast.clear()
+      }
+    }, 500),
+
+    // 提示框确定
+    onConfirm() {
+      this.dialog = false
+      if (this.dialogOption.confirmText === '去认证') {
+        const path = `${this.routePrefix}/form/club-register`
+        this.$router.push(path)
+      }
+    },
+
+    // 提示框取消
+    onCancel() {
+      this.dialog = false
+    },
+
+    // 去发布视频
+    async onPublish() {
+      if (!this.accessToken) {
+        this.$toast('请先登录')
+        this.formType = 'login'
+        this.$store.commit('app/SHOW_LOGIN')
+        return
+      }
+
+      if (!this.userInfo.authId) {
+        this.dialogOption.description = '抱歉，由于您未认证机构，无法参与！'
+        this.dialogOption.confirmText = '去认证'
+        this.dialog = true
+        return
+      }
+
+      // 查询活动状态
+      await this.checkActivityPublish()
+
+      if (this.publishInfo.activityState === 0) {
+        this.dialogOption.description = '抱歉，活动未开始！'
+        this.dialog = true
+        return
+      } else if (this.publishInfo.activityState === 2) {
+        this.dialogOption.description = '抱歉，活动已结束，暂无法发布视频！'
+        this.dialog = true
+        return
+      } else if (this.publishInfo.releaseStatus === 1) {
+        this.dialogOption.description =
+          '抱歉，平台规定每个用户只能发布一个视频，由于您已发布过视频，请勿再次发布！'
+        this.dialog = true
+        return
+      }
+      const url = `${this.routePrefix}/activity/challenge/publish`
+      this.$router.push(url)
+    },
+
+    // 验证发布状态
+    async checkActivityPublish() {
+      if (!this.accessToken) return
+      const { authId, mobile } = this.userInfo
+      try {
+        const res = await this.$http.api.checkActivityPublish({
+          authUserId: this.authUserId,
+          authId,
+          userName: mobile,
+        })
+        this.publishInfo = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 播放视频
+    onPlay(row) {
+      this.videoUrl = row.ossUrl
+      this.description = row.title
+      this.$refs.videoPlayer.open()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-input.is-active .el-input__inner,
+  .el-input__inner:focus {
+    border-color: #f3920d;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .page {
+    background: #fff;
+    min-height: calc(100vh - 80px - 80px);
+    padding-bottom: 20px;
+
+    .page-top {
+      width: 100%;
+      height: 530px;
+      background: url(~assets/theme-images/ross/pc-banner-activity.png)
+        no-repeat center;
+      background-size: auto 530px;
+    }
+
+    .publish {
+      display: none;
+    }
+
+    .page-content {
+      width: 1200px;
+      margin: 0 auto;
+
+      .control {
+        display: flex;
+        align-items: center;
+        padding: 32px 0;
+        .publish {
+          display: block;
+          width: 120px;
+          height: 46px;
+          text-align: center;
+          line-height: 46px;
+          background: #f3920d;
+          color: #fff;
+          font-size: 16px;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.2s;
+          margin-left: 48px;
+
+          &:hover {
+            background: #e98d0d;
+          }
+        }
+
+        .search {
+          flex: 1;
+          flex-shrink: 0;
+          .el-input {
+            height: 46px;
+            font-size: 16px;
+            .el-input__icon {
+              font-size: 24px;
+              line-height: 46px;
+              margin-left: 12px;
+            }
+
+            ::v-deep {
+              & > .el-input__inner {
+                height: 46px;
+                padding-left: 55px;
+              }
+            }
+          }
+        }
+      }
+
+      .video-content {
+        .title {
+          font-size: 16px;
+          color: #282828;
+          font-weight: bold;
+          margin: 16px 0;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+    position: relative;
+    position: relative;
+    // padding-bottom: 20vw;
+    .page-top {
+      width: 100%;
+      height: 100vw;
+      background: url(~assets/theme-images/ross/h5-banner-activity.png)
+        no-repeat center;
+      background-size: auto 100vw;
+    }
+
+    .publish {
+      // position: fixed;
+      // bottom: 14vw;
+      // left: 7.4vw;
+      width: 85.6vw;
+      margin: 4vw auto;
+      height: 12vw;
+      background: #f3920d;
+      color: #fff;
+      text-align: center;
+      font-size: 3.6vw;
+      line-height: 12vw;
+    }
+
+    .page-content {
+      position: relative;
+      width: 93.6vw;
+      margin: 0 auto;
+
+      .control {
+        display: flex;
+        align-items: center;
+        padding: 6.4vw 0 7.2vw;
+        .publish {
+          display: none;
+        }
+        .search {
+          flex: 1;
+          flex-shrink: 0;
+          .el-input {
+            height: 9.6vw;
+            font-size: 3.4vw;
+            .el-input__icon {
+              font-size: 5.6vw;
+              line-height: 9.6vw;
+              margin-left: 12px;
+            }
+
+            ::v-deep {
+              & > .el-input__inner {
+                height: 9.6vw;
+                padding-left: 55px;
+              }
+            }
+          }
+        }
+      }
+
+      .video-content {
+        .title {
+          font-size: 3.4vw;
+          color: #282828;
+          font-weight: bold;
+          margin: 0 0 4vw;
+        }
+
+        .video-list {
+          &::after {
+            content: '';
+            display: block;
+            clear: both;
+          }
+
+          .video {
+            float: left;
+            width: 45.6vw;
+            height: 56.4vw;
+            background: #fff;
+            box-sizing: border-box;
+            border: 0.1vw solid #efefef;
+            margin: 0 2.4vw 2.4vw 0;
+            transition: all 0.4s;
+
+            &:nth-child(2n) {
+              margin-right: 0;
+            }
+
+            .cover {
+              width: 100%;
+              height: 31.3vw;
+              position: relative;
+
+              img {
+                display: block;
+                width: 100%;
+                height: 31.3vw;
+              }
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 1;
+                width: 100%;
+                height: 100%;
+                background: #000;
+                opacity: 0;
+                transition: opacity 0.2s;
+              }
+
+              .play {
+                position: absolute;
+                z-index: 2;
+                width: 48px;
+                height: 48px;
+                background: url(~assets/theme-images/common/pc-icon-play.png)
+                  no-repeat center;
+                background-size: 48px;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                opacity: 0;
+                transition: opacity 0.2s;
+                cursor: pointer;
+              }
+
+              .name {
+                color: #fff;
+                font-size: 3vw;
+                text-align: center;
+                width: 100%;
+                line-height: 6.4vw;
+                height: 6.4vw;
+                @include ellipsis(1);
+                box-sizing: border-box;
+                padding: 0 1.2vw;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+              }
+
+              .rank {
+                position: absolute;
+                left: 2.4vw;
+                top: 0;
+                width: 7.2vw;
+                height: 7.5vw;
+                background: url(~assets/theme-images/ross/h5-rank.png) no-repeat
+                  center;
+                background-size: 7.2vw;
+                text-align: center;
+                box-sizing: border-box;
+                padding-top: 1.9vw;
+                font-weight: bold;
+                color: #fff;
+                font-size: 2.1vw;
+
+                &.rank-01 {
+                  background-image: url(~assets/theme-images/ross/h5-rank-01.png);
+                }
+                &.rank-02 {
+                  background-image: url(~assets/theme-images/ross/h5-rank-02.png);
+                }
+                &.rank-03 {
+                  background-image: url(~assets/theme-images/ross/h5-rank-03.png);
+                }
+              }
+            }
+
+            .info {
+              padding: 2.4vw;
+              .club-name {
+                font-size: 3.4vw;
+                color: #282828;
+                @include ellipsis(1);
+              }
+              .mobile {
+                font-size: 3vw;
+                color: #666;
+                margin-top: 1.6vw;
+              }
+            }
+
+            .foot {
+              color: #999999;
+              font-size: 2.6vw;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin: 0 2.4vw;
+              border-top: 0.1vw solid #efefef;
+              padding-top: 2.3vw;
+
+              .date,
+              .praise,
+              .pv {
+                flex-shrink: 0;
+                line-height: 3.6vw;
+              }
+
+              .praise,
+              .pv {
+                position: relative;
+                padding-left: 4.4vw;
+
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 3.6vw;
+                  height: 3.6vw;
+                  background: url(~assets/theme-images/common/icon-praise.png)
+                    no-repeat center;
+                  background-size: 3.6vw;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                }
+              }
+
+              .pv {
+                &::after {
+                  background-image: url(~assets/theme-images/common/icon-pv.png);
+                }
+              }
+
+              .date {
+                margin-right: 5.5vw;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/ross/activity/challenge_new/message.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="page">
+    <div class="page-top">
+      <div class="icon-submit-succsss"></div>
+      <div class="tip">视频发布成功&nbsp;!</div>
+    </div>
+    <div class="page-content">
+      <div class="title">温馨提示：</div>
+      <div class="content">
+        视频发布成功后，您可去首页查看您的视频排名，同时，平台会在1-2个工作日内将您的视频上传至抖音平台。上传成功后，平台会以短信的形式，将抖音口令发送到您的手机上，您可复制该抖音口令在抖音平台打开视频或直接在抖音平台搜索“ROSS”抖音账号或“视频标题”找到自己的视频，再将视频通过抖音分享方式分享给更多的好友来帮您点赞获得排名。如1-2工日后，您还未收到抖音口令或在抖音平台找不到自己发布的视频，可致电客服咨询，电话：
+        <a href="tel:0755-85885625">0755-85885625</a>
+      </div>
+    </div>
+    <div class="btn back" @click="onBack">返回</div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app-ross',
+  computed: {
+    ...mapGetters(['routePrefix']),
+  },
+  methods: {
+    // 返回
+    onBack() {
+      const path = `${this.routePrefix}/activity/challenge`
+      this.$router.push(path)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .btn.back {
+    display: none;
+  }
+  .page-top {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 150px 0 80px;
+    .icon-submit-succsss {
+      width: 64px;
+      height: 64px;
+      background: url(~assets/theme-images/common/pc-icon-submit-success.png)
+        no-repeat center;
+      background-size: 64px;
+    }
+
+    .tip {
+      font-size: 24px;
+      font-weight: bold;
+      color: #1890ff;
+    }
+  }
+
+  .page-content {
+    width: 694px;
+    margin: 0 auto;
+    font-size: 14px;
+    line-height: 1.8;
+    .title {
+      color: #666666;
+      margin-bottom: 8px;
+    }
+    .content {
+      color: #999999;
+      text-align: justify;
+
+      a {
+        color: #f3920d;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .page-top {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 20.4vw 0 12.6vw;
+    .icon-submit-succsss {
+      width: 12vw;
+      height: 12vw;
+      background: url(~assets/theme-images/common/pc-icon-submit-success.png)
+        no-repeat center;
+      background-size: 12vw;
+    }
+
+    .tip {
+      font-size: 4.2vw;
+      font-weight: bold;
+      color: #1890ff;
+    }
+  }
+
+  .page-content {
+    width: 88.4vw;
+    margin: 0 auto;
+    font-size: 3vw;
+    line-height: 2;
+    .title {
+      color: #666666;
+      margin-bottom: 2.4vw;
+    }
+    .content {
+      color: #999999;
+      text-align: justify;
+
+      a {
+        color: #f3920d;
+      }
+    }
+  }
+
+  .btn {
+    width: 85.6vw;
+    height: 12vw;
+    background: #f3920d;
+    border-radius: 0.2vw;
+    margin: 0 auto;
+    color: #fff;
+    text-align: center;
+    line-height: 12vw;
+    font-size: 3.6vw;
+    margin-top: 24vw;
+    margin-bottom: 24vw;
+  }
+}
+</style>

pages/_template/ross/activity/challenge_new/publish.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="page">
+    <div class="page-content">
+      <el-form label-position="top" :model="formData" :rules="rules" ref="form">
+        <el-form-item label="发布抖音视频：" prop="description">
+          <el-input
+            type="textarea"
+            rows="10"
+            v-model="formData.description"
+            placeholder="添加作品描述，能让更多的人看到..."
+            maxlength="300"
+            show-word-limit
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="视频封面：" prop="coverImage">
+          <el-input v-show="false" v-model="formData.coverImage"></el-input>
+          <div>
+            <SimpleUploadImage
+              :limit="1"
+              :image-list="coverList"
+              :before-upload="beforeCoverImageUpload"
+              tip="建议尺寸 286 * 198px"
+              @success="uploadCoverImageSuccess"
+              @remove="handleCoverImageRemove"
+            ></SimpleUploadImage>
+          </div>
+        </el-form-item>
+        <el-form-item label="视频文件：" prop="fileUrl">
+          <SimpleOssUpload
+            @success="onVideoUploadSuccess"
+            :limit="1"
+          ></SimpleOssUpload>
+          <el-input v-show="false" v-model="formData.fileUrl"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="tip">
+        <div class="title">温馨提示：</div>
+        <div class="content">
+          视频文件大小不超过8G，时长在30分钟以内；分辨率为720p（720x1280）及以上；
+          支持常用视频格式，推荐使用mp4、webm
+        </div>
+      </div>
+      <div class="control">
+        <div class="button cancel" @click="onBack">取消</div>
+        <div class="button publish" @click="onPublish">发布</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app-ross',
+  data() {
+    return {
+      formData: {
+        coverImage: '',
+        fileUrl: '',
+        description: '',
+        ossName: '',
+      },
+      rules: {
+        coverImage: [
+          {
+            required: true,
+            message: '请上传视频封面图片',
+            trigger: ['change'],
+          },
+        ],
+        fileUrl: [
+          {
+            required: true,
+            message: '请上传视频',
+            trigger: ['change'],
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: '请上传视频',
+            trigger: ['blur'],
+          },
+        ],
+      },
+      coverList: [],
+    }
+  },
+  computed: {
+    ...mapGetters(['routePrefix', 'userInfo', 'authUserId']),
+  },
+  methods: {
+    // 发布视频
+    async onPublish() {
+      try {
+        await this.$refs.form.validate()
+        this.publishVideoSave()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 保存视频
+    async publishVideoSave() {
+      try {
+        const { authId, mobile } = this.userInfo
+        await this.$http.api.publishVideoSave({
+          authId,
+          authUserId: this.authUserId,
+          userName: mobile,
+          title: this.formData.description,
+          ossName: this.formData.ossName,
+          cover: this.formData.coverImage,
+          ossUrl: this.formData.fileUrl,
+        })
+        this.$router.replace(`${this.routePrefix}/activity/challenge/message`)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 视频封面上传
+    beforeCoverImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('视屏封面图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+    uploadCoverImageSuccess({ response, file, fileList }) {
+      this.coverList = fileList
+      this.formData.coverImage = response.data
+    },
+    handleCoverImageRemove() {
+      this.coverList = []
+      this.formData.coverImage = ''
+    },
+
+    // 视频上传成功
+    onVideoUploadSuccess({ file, fileList }) {
+      this.formData.fileUrl = file.url
+      this.formData.ossName = file.uuid
+    },
+
+    // 返回
+    onBack() {
+      this.$router.back()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 16px;
+    }
+    .el-textarea .el-input__count {
+      bottom: -32px;
+      background: transparent;
+    }
+  }
+
+  ::v-deep {
+    .el-input.is-active .el-input__inner,
+    .el-input__inner:focus,
+    .el-textarea__inner:focus,
+    .el-upload--picture-card:hover,
+    .el-upload:focus {
+      border-color: #f3920d;
+    }
+  }
+
+  .page {
+    background: #fff;
+    padding: 40px 0;
+    .page-content {
+      width: 568px;
+      margin: 0 auto;
+
+      .tip {
+        margin: 60px 0;
+        font-size: 14px;
+        line-height: 1.8;
+        .title {
+          color: #666666;
+          margin-bottom: 8px;
+        }
+        .content {
+          color: #999999;
+        }
+      }
+
+      .control {
+        .button {
+          width: 295px;
+          height: 50px;
+          margin: 0 auto;
+          border-radius: 4px;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 16px;
+          &.cancel {
+            border: 1px solid #c2c2c2;
+            color: #666666;
+          }
+          &.publish {
+            background: #f3920d;
+            color: #fff;
+            margin-top: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+      line-height: 4.6vw;
+    }
+  }
+
+  .page {
+    background: #fff;
+    padding: 8vw 0;
+    .page-content {
+      width: 85.6vw;
+      margin: 0 auto;
+
+      .tip {
+        margin: 20vw 0 12vw;
+        font-size: 3vw;
+        line-height: 1.8;
+        .title {
+          color: #666666;
+          margin-bottom: 8px;
+        }
+        .content {
+          color: #999999;
+        }
+      }
+
+      .control {
+        .button {
+          width: 85.6vw;
+          height: 12vw;
+          margin: 0 auto;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 3.6vw;
+          &.cancel {
+            border: 0.1vw solid #c2c2c2;
+            color: #666666;
+          }
+          &.publish {
+            background: #f3920d;
+            color: #fff;
+            margin-top: 3.2vw;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/_template/ross/approve/club/detail.vue

@@ -114,307 +114,301 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    width: 1200px;
-    height: 612px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 80px;
-    background-color: #fff;
-    box-sizing: border-box;
-    padding: 16px;
-    padding-right: 0;
-  }
-
-  .auth-card-content {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    left: 0;
-    top: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9;
-    .auth-card-popup {
+    @include useTheme() {
       position: relative;
-      width: 622px;
+      width: 1200px;
+      height: 612px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 80px;
+      background-color: #fff;
+      box-sizing: border-box;
+      padding: 16px;
+      padding-right: 0;
+
+      .auth-card-content {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9;
+        .auth-card-popup {
+          position: relative;
+          width: 622px;
 
-      img {
-        display: block;
-        width: 100%;
-        height: auto;
+          img {
+            display: block;
+            width: 100%;
+            height: auto;
+          }
+
+          .el-icon-circle-close {
+            position: absolute;
+            top: -50px;
+            right: 0;
+            font-size: 32px;
+            color: #fff;
+            cursor: pointer;
+          }
+        }
       }
 
-      .el-icon-circle-close {
+      .page-title {
         position: absolute;
+        font-size: 24px;
+        color: #333;
         top: -50px;
-        right: 0;
-        font-size: 32px;
-        color: #fff;
-        cursor: pointer;
+        left: 0;
       }
-    }
-  }
-
-  .page-title {
-    position: absolute;
-    font-size: 24px;
-    color: #333;
-    top: -50px;
-    left: 0;
-  }
 
-  .page-top {
-    margin-right: 24px;
-    .swiper {
-      position: relative;
-      width: 580px;
-      height: 580px;
-      background: #f7f7f7;
-      ::v-deep {
-        img {
+      .page-top {
+        margin-right: 24px;
+        .swiper {
+          position: relative;
           width: 580px;
           height: 580px;
-        }
-      }
+          background: #f7f7f7;
+          ::v-deep {
+            img {
+              width: 580px;
+              height: 580px;
+            }
+          }
 
-      .auth-card {
-        position: absolute;
-        width: auto;
-        height: 110px;
-        display: block;
-        bottom: 24px;
-        left: 24px;
-        z-index: 2;
-        cursor: pointer;
+          .auth-card {
+            position: absolute;
+            width: auto;
+            height: 110px;
+            display: block;
+            bottom: 24px;
+            left: 24px;
+            z-index: 2;
+            cursor: pointer;
+          }
+        }
       }
-    }
-  }
-
-  .page-content {
-    width: 580px;
-    overflow-y: auto;
 
-    &::-webkit-scrollbar {
-      width: 8px;
-      // background-color: #eeeeee;
-    }
+      .page-content {
+        width: 580px;
+        overflow-y: auto;
 
-    &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background-color: #eeeeee;
-    }
+        &::-webkit-scrollbar {
+          width: 8px;
+          // background-color: #eeeeee;
+        }
 
-    .bg-container {
-      background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
-        no-repeat;
-      background-size: 100%;
-      box-sizing: border-box;
-      background-position-y: 20px;
-      background-color: #f3920d;
-      padding-bottom: 24px;
-    }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background-color: #eeeeee;
+        }
 
-    .auth {
-      width: 524px;
-      box-sizing: border-box;
-      background: #fef5e8;
-      margin: 0 auto;
-      margin-top: 8px;
-      padding: 12px 16px;
-      border-radius: 2px;
-
-      .auth-icon {
-        height: 28px;
-        background: url(~assets/theme-images/ross/h5-icon-auth.png) no-repeat
-          left center;
-        background-size: auto 28px;
-      }
+        .bg-container {
+          background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
+            no-repeat;
+          background-size: 100%;
+          box-sizing: border-box;
+          background-position-y: 20px;
+          background-color: #f3920d;
+          padding-bottom: 24px;
+        }
 
-      .auth-info {
-        font-size: 0;
-        margin-top: 10px;
-        span {
-          font-size: 20px;
-          line-height: 1.6;
-          color: #f3920d;
+        .auth {
+          width: 524px;
+          box-sizing: border-box;
+          background: #fef5e8;
+          margin: 0 auto;
+          margin-top: 8px;
+          padding: 12px 16px;
+          border-radius: 2px;
+
+          .auth-icon {
+            height: 28px;
+            background: url(~assets/theme-images/ross/h5-icon-auth.png)
+              no-repeat left center;
+            background-size: auto 28px;
+          }
 
-          &.font-bold {
-            font-weight: bold;
+          .auth-info {
+            font-size: 0;
+            margin-top: 10px;
+            span {
+              font-size: 20px;
+              line-height: 1.6;
+              color: #f3920d;
+
+              &.font-bold {
+                font-weight: bold;
+              }
+            }
           }
         }
-      }
-    }
 
-    .club-info {
-      padding: 32px 24px;
-      width: 564px;
-      min-height: 264px;
-
-      .info {
-        width: 360px;
-        .name {
-          font-size: 24px;
-          color: #fff;
-          font-weight: bold;
-          margin-bottom: 34px;
-        }
-        .mobile,
-        .address {
-          position: relative;
-          padding-left: 28px;
-          margin-top: 16px;
-          line-height: 24px;
-          font-size: 16px;
-          color: #fff;
-
-          &::after {
-            content: '';
-            display: block;
-            width: 24px;
-            height: 24px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            background-size: 20px;
-            background-repeat: no-repeat;
-            background-position: center;
+        .club-info {
+          padding: 32px 24px;
+          width: 564px;
+          min-height: 264px;
+
+          .info {
+            width: 360px;
+            .name {
+              font-size: 24px;
+              color: #fff;
+              font-weight: bold;
+              margin-bottom: 34px;
+            }
+            .mobile,
+            .address {
+              position: relative;
+              padding-left: 28px;
+              margin-top: 16px;
+              line-height: 24px;
+              font-size: 16px;
+              color: #fff;
+
+              &::after {
+                content: '';
+                display: block;
+                width: 24px;
+                height: 24px;
+                position: absolute;
+                left: 0;
+                top: 0;
+                background-size: 20px;
+                background-repeat: no-repeat;
+                background-position: center;
+              }
+            }
+            .mobile {
+              cursor: pointer;
+              &::after {
+                background-image: fetch('pc-icon-mobile');
+              }
+            }
+            .address {
+              &::after {
+                background-image: fetch('h5-icon-address');
+              }
+            }
           }
-        }
-        .mobile {
-          cursor: pointer;
-          &::after {
-            @include themify($themes) {
-              background-image: themed('pc-icon-mobile');
+
+          .logo {
+            position: relative;
+            width: 114px;
+            height: 114px;
+            border-radius: 50% 50% 0 50%;
+            overflow: hidden;
+            background: #fff;
+            display: flex;
+
+            &::after {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              content: '';
+              display: block;
+              width: 23px;
+              height: 23px;
+              background: url(~assets/theme-images/ross/pc-icon-avatar-v.png)
+                no-repeat center;
+              background-size: 23px;
             }
           }
-        }
-        .address {
-          &::after {
-            @include themify($themes) {
-              background-image: themed('h5-icon-address');
+          .navigation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 72px;
+            height: 32px;
+            border-radius: 4px;
+
+            font-size: 16px;
+            color: #f3920d;
+            border: 1px solid #fff;
+            background-color: #fff;
+            cursor: pointer;
+
+            &::after {
+              content: '';
+              display: block;
+              width: 16px;
+              height: 16px;
+              margin-left: 4px;
+              background: fetch('pc-icon-navigation') no-repeat center;
+              background-size: 16px;
             }
           }
-        }
-      }
-
-      .logo {
-        position: relative;
-        width: 114px;
-        height: 114px;
-        border-radius: 50% 50% 0 50%;
-        overflow: hidden;
-        background: #fff;
-        display: flex;
-
-        &::after {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          content: '';
-          display: block;
-          width: 23px;
-          height: 23px;
-          background: url(~assets/theme-images/ross/pc-icon-avatar-v.png)
-            no-repeat center;
-          background-size: 23px;
-        }
-      }
-      .navigation {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 72px;
-        height: 32px;
-        border-radius: 4px;
-
-        font-size: 16px;
-        color: #f3920d;
-        border: 1px solid #fff;
-        background-color: #fff;
-        cursor: pointer;
-
-        &::after {
-          content: '';
-          display: block;
-          width: 16px;
-          height: 16px;
-          margin-left: 4px;
-          @include themify($themes) {
-            background: themed('pc-icon-navigation') no-repeat center;
+          .distance {
+            font-size: 14px;
+            color: #fff;
           }
-          background-size: 16px;
         }
-      }
-      .distance {
-        font-size: 14px;
-        color: #fff;
-      }
-    }
 
-    .device-list {
-      .title {
-        position: relative;
-        font-size: 20px;
-        font-weight: bold;
-        color: #282828;
-        line-height: 30px;
-        padding-left: 32px;
-        margin-top: 46px;
-        margin-bottom: 24px;
-
-        &::before {
-          content: '';
-          display: block;
-          width: 30px;
-          height: 30px;
-          background: url(~assets/theme-images/ross/pc-icon-device-list.png)
-            no-repeat center;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
+        .device-list {
+          .title {
+            position: relative;
+            font-size: 20px;
+            font-weight: bold;
+            color: #282828;
+            line-height: 30px;
+            padding-left: 32px;
+            margin-top: 46px;
+            margin-bottom: 24px;
+
+            &::before {
+              content: '';
+              display: block;
+              width: 30px;
+              height: 30px;
+              background: url(~assets/theme-images/ross/pc-icon-device-list.png)
+                no-repeat center;
+              position: absolute;
+              left: 0;
+              top: 0;
+            }
+          }
 
-      .list {
-        padding-right: 16px;
-      }
+          .list {
+            padding-right: 16px;
+          }
 
-      .device {
-        padding: 20px 16px;
-        box-sizing: border-box;
-        background: #f3f5f6;
-        margin-top: 16px;
+          .device {
+            padding: 20px 16px;
+            box-sizing: border-box;
+            background: #f3f5f6;
+            margin-top: 16px;
 
-        &:first-child {
-          margin-top: 0;
-        }
+            &:first-child {
+              margin-top: 0;
+            }
 
-        .info {
-          width: 80%;
-          .name {
-            font-size: 18px;
-            color: #282828;
-          }
-          .code {
-            margin-top: 12px;
-            font-size: 14px;
-            color: #666;
-          }
-        }
-        .detail {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 80px;
-          height: 32px;
-          border-radius: 4px;
-          font-size: 14px;
-          color: #ffffff;
-          cursor: pointer;
-          @include themify($themes) {
-            background: themed('color');
+            .info {
+              width: 80%;
+              .name {
+                font-size: 18px;
+                color: #282828;
+              }
+              .code {
+                margin-top: 12px;
+                font-size: 14px;
+                color: #666;
+              }
+            }
+            .detail {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 80px;
+              height: 32px;
+              border-radius: 4px;
+              font-size: 14px;
+              color: #ffffff;
+              cursor: pointer;
+              background: fetch('color');
+            }
           }
         }
       }
@@ -424,259 +418,255 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-title {
-    display: none;
-  }
-
-  .auth-card-content {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    left: 0;
-    top: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9;
-    .auth-card-popup {
-      position: relative;
-      width: 86vw;
-
-      img {
-        display: block;
-        width: 100%;
-        height: auto;
+  .page {
+    @include useTheme() {
+      .page-title {
+        display: none;
       }
 
-      .el-icon-circle-close {
-        position: absolute;
-        top: -8vw;
-        right: 0;
-        font-size: 7vw;
-        color: #fff;
-        cursor: pointer;
-      }
-    }
-  }
+      .auth-card-content {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9;
+        .auth-card-popup {
+          position: relative;
+          width: 86vw;
 
-  .page-top {
-    .swiper {
-      position: relative;
-      height: 100vw;
+          img {
+            display: block;
+            width: 100%;
+            height: auto;
+          }
 
-      background: #f7f7f7;
-      ::v-deep {
-        img {
-          height: 100vw;
+          .el-icon-circle-close {
+            position: absolute;
+            top: -8vw;
+            right: 0;
+            font-size: 7vw;
+            color: #fff;
+            cursor: pointer;
+          }
         }
       }
 
-      .auth-card {
-        position: absolute;
-        width: auto;
-        height: 20.6vw;
-        display: block;
-        bottom: 4vw;
-        left: 4vw;
-        z-index: 2;
-      }
-    }
-  }
-
-  .page-content {
-    .bg-container {
-      background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
-        no-repeat;
-      background-size: 100vw;
-      box-sizing: border-box;
-      background-position-y: 4vw;
-      background-color: #f3920d;
-      padding-bottom: 5vw;
-    }
-
-    .auth {
-      width: 92vw;
-      box-sizing: border-box;
-      background: #fef5e8;
-      margin: 0 auto;
-      margin-top: 3.2vw;
-      padding: 4vw 3.5vw;
-      border-radius: 0.8vw;
-
-      .auth-icon {
-        height: 6.2vw;
-        background: url(~assets/theme-images/ross/h5-icon-auth.png) no-repeat
-          left center;
-        background-size: auto 6.2vw;
-      }
+      .page-top {
+        .swiper {
+          position: relative;
+          height: 100vw;
 
-      .auth-info {
-        font-size: 0;
-        margin-top: 2.2vw;
-        span {
-          font-size: 3.6vw;
-          line-height: 5.8vw;
-          color: #f3920d;
+          background: #f7f7f7;
+          ::v-deep {
+            img {
+              height: 100vw;
+            }
+          }
 
-          &.font-bold {
-            font-weight: bold;
+          .auth-card {
+            position: absolute;
+            width: auto;
+            height: 20.6vw;
+            display: block;
+            bottom: 4vw;
+            left: 4vw;
+            z-index: 2;
           }
         }
       }
-    }
-    .club-info {
-      padding: 4vw;
-      width: 100vw;
-      min-height: 43.4vw;
-
-      .info {
-        width: 67vw;
-        .name {
-          font-size: 4.8vw;
-          color: #fff;
-          font-weight: bold;
-          margin-bottom: 4vw;
+
+      .page-content {
+        .bg-container {
+          background: url(~assets/theme-images/ross/h5-club-info-bg.png) center
+            no-repeat;
+          background-size: 100vw;
+          box-sizing: border-box;
+          background-position-y: 4vw;
+          background-color: #f3920d;
+          padding-bottom: 5vw;
         }
-        .mobile,
-        .address {
-          position: relative;
-          padding-left: 5vw;
-          margin-top: 1.6vw;
-          line-height: 5vw;
-          font-size: 3.2vw;
-          color: #fff;
-
-          &::after {
-            content: '';
-            display: block;
-            width: 4vw;
-            height: 5vw;
-            position: absolute;
-            left: 0;
-            top: 0;
-            background-size: 4vw 4vw;
-            background-repeat: no-repeat;
-            background-position: center;
+
+        .auth {
+          width: 92vw;
+          box-sizing: border-box;
+          background: #fef5e8;
+          margin: 0 auto;
+          margin-top: 3.2vw;
+          padding: 4vw 3.5vw;
+          border-radius: 0.8vw;
+
+          .auth-icon {
+            height: 6.2vw;
+            background: url(~assets/theme-images/ross/h5-icon-auth.png)
+              no-repeat left center;
+            background-size: auto 6.2vw;
           }
-        }
-        .mobile {
-          &::after {
-            @include themify($themes) {
-              background-image: themed('h5-icon-mobile');
+
+          .auth-info {
+            font-size: 0;
+            margin-top: 2.2vw;
+            span {
+              font-size: 3.6vw;
+              line-height: 5.8vw;
+              color: #f3920d;
+
+              &.font-bold {
+                font-weight: bold;
+              }
             }
           }
         }
-        .address {
-          &::after {
-            @include themify($themes) {
-              background-image: themed('h5-icon-address');
+        .club-info {
+          padding: 4vw;
+          width: 100vw;
+          min-height: 43.4vw;
+
+          .info {
+            width: 67vw;
+            .name {
+              font-size: 4.8vw;
+              color: #fff;
+              font-weight: bold;
+              margin-bottom: 4vw;
+            }
+            .mobile,
+            .address {
+              position: relative;
+              padding-left: 5vw;
+              margin-top: 1.6vw;
+              line-height: 5vw;
+              font-size: 3.2vw;
+              color: #fff;
+
+              &::after {
+                content: '';
+                display: block;
+                width: 4vw;
+                height: 5vw;
+                position: absolute;
+                left: 0;
+                top: 0;
+                background-size: 4vw 4vw;
+                background-repeat: no-repeat;
+                background-position: center;
+              }
+            }
+            .mobile {
+              &::after {
+                background-image: fetch('h5-icon-mobile');
+              }
+            }
+            .address {
+              &::after {
+                background-image: fetch('h5-icon-address');
+              }
             }
           }
-        }
-      }
 
-      .logo {
-        position: relative;
-        width: 18vw;
-        height: 18vw;
-        border-radius: 9vw 9vw 0 9vw;
-        overflow: hidden;
-        background: #fff;
-        display: flex;
-
-        &::after {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          content: '';
-          display: block;
-          width: 3.6vw;
-          height: 3.6vw;
-          background: url(~assets/theme-images/ross/h5-icon-avatar-v.png)
-            no-repeat center;
-          background-size: 3.6vw;
-        }
-      }
-      .navigation {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 14.4vw;
-        height: 6.4vw;
-        border-radius: 0.4vw;
-        font-size: 3.2vw;
-        color: #f3920d;
-        border: 1px solid #fff;
-        background-color: #fff;
-
-        &::after {
-          content: '';
-          display: block;
-          width: 3.6vw;
-          height: 3.6vw;
-          margin-left: 0.4vw;
-          @include themify($themes) {
-            background: themed('h5-icon-navigation') no-repeat center;
-            background-size: 3.6vw;
+          .logo {
+            position: relative;
+            width: 18vw;
+            height: 18vw;
+            border-radius: 9vw 9vw 0 9vw;
+            overflow: hidden;
+            background: #fff;
+            display: flex;
+
+            &::after {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              content: '';
+              display: block;
+              width: 3.6vw;
+              height: 3.6vw;
+              background: url(~assets/theme-images/ross/h5-icon-avatar-v.png)
+                no-repeat center;
+              background-size: 3.6vw;
+            }
           }
-        }
-      }
-      .distance {
-        font-size: 3vw;
-        color: #fff;
-      }
-    }
-
-    .device-list {
-      padding: 0 4vw;
-      .title {
-        position: relative;
-        padding-left: 6.8vw;
-        margin-top: 9.6vw;
-        margin-bottom: 4vw;
-        font-size: 4vw;
-        font-weight: bold;
-        color: #101010;
-
-        &::before {
-          content: '';
-          display: block;
-          width: 4.4vw;
-          height: 4.4vw;
-          background: url(~assets/theme-images/ross/h5-icon-device-list.png)
-            no-repeat center;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
-      .device {
-        padding: 4.4vw 3.2vw;
-        background: #f3f5f6;
-        margin-bottom: 3.2vw;
-        .info {
-          width: 74%;
-          .name {
-            font-size: 3.6vw;
-            color: #282828;
+          .navigation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 14.4vw;
+            height: 6.4vw;
+            border-radius: 0.4vw;
+            font-size: 3.2vw;
+            color: #f3920d;
+            border: 1px solid #fff;
+            background-color: #fff;
+
+            &::after {
+              content: '';
+              display: block;
+              width: 3.6vw;
+              height: 3.6vw;
+              margin-left: 0.4vw;
+              background: fetch('h5-icon-navigation') no-repeat center;
+              background-size: 3.6vw;
+            }
           }
-          .code {
-            margin-top: 3.2vw;
+          .distance {
             font-size: 3vw;
-            color: #666;
+            color: #fff;
           }
         }
-        .detail {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 15.8vw;
-          height: 6.4vw;
-          border-radius: 0.4vw;
-          font-size: 3vw;
-          color: #ffffff;
-          @include themify($themes) {
-            background: themed('color');
+
+        .device-list {
+          padding: 0 4vw;
+          .title {
+            position: relative;
+            padding-left: 6.8vw;
+            margin-top: 9.6vw;
+            margin-bottom: 4vw;
+            font-size: 4vw;
+            font-weight: bold;
+            color: #101010;
+
+            &::before {
+              content: '';
+              display: block;
+              width: 4.4vw;
+              height: 4.4vw;
+              background: url(~assets/theme-images/ross/h5-icon-device-list.png)
+                no-repeat center;
+              position: absolute;
+              left: 0;
+              top: 0;
+            }
+          }
+          .device {
+            padding: 4.4vw 3.2vw;
+            background: #f3f5f6;
+            margin-bottom: 3.2vw;
+            .info {
+              width: 74%;
+              .name {
+                font-size: 3.6vw;
+                color: #282828;
+              }
+              .code {
+                margin-top: 3.2vw;
+                font-size: 3vw;
+                color: #666;
+              }
+            }
+            .detail {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 15.8vw;
+              height: 6.4vw;
+              border-radius: 0.4vw;
+              font-size: 3vw;
+              color: #ffffff;
+              background: fetch('color');
+            }
           }
         }
       }

pages/_template/ross/approve/club/star-list.vue

@@ -40,11 +40,11 @@ export default {
 <style scoped lang="scss">
 .el-input {
   ::v-deep {
-    & > {
-      .el-input.is-active .el-input__inner,
-      .el-input__inner:focus {
-        @include themify($themes) {
-          border-color: themed('color');
+    @include useTheme() {
+      & > {
+        .el-input.is-active .el-input__inner,
+        .el-input__inner:focus {
+          border-color: fetch('color');
         }
       }
     }
@@ -54,209 +54,205 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 530px;
-    @include themify($themes) {
-      background-image: themed('pc-banner-club');
-    }
-    background-size: cover;
-    background-position: center;
-  }
-  .page-content {
-    position: relative;
-    width: 1000px;
-    margin: 0 auto;
-
-    .title {
-      font-size: 16px;
-      color: #404040;
-
-      span {
-        @include themify($themes) {
-          color: themed('color');
-        }
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
+      .page-top {
+        height: 530px;
+        background-image: fetch('pc-banner-club');
+        background-size: cover;
+        background-position: center;
       }
-    }
-
-    .filter {
-      padding: 48px 0 105px;
-      .search {
-        width: 640px;
+      .page-content {
+        position: relative;
+        width: 1000px;
         margin: 0 auto;
-        .el-input {
-          height: 46px;
+
+        .title {
           font-size: 16px;
-          .el-input__icon {
-            font-size: 24px;
-            line-height: 46px;
-            margin-left: 12px;
+          color: #404040;
+
+          span {
+            color: fetch('color');
           }
+        }
 
-          ::v-deep {
-            & > .el-input__inner {
+        .filter {
+          padding: 48px 0 105px;
+          .search {
+            width: 640px;
+            margin: 0 auto;
+            .el-input {
               height: 46px;
-              padding-left: 55px;
+              font-size: 16px;
+              .el-input__icon {
+                font-size: 24px;
+                line-height: 46px;
+                margin-left: 12px;
+              }
+
+              ::v-deep {
+                & > .el-input__inner {
+                  height: 46px;
+                  padding-left: 55px;
+                }
+              }
             }
           }
         }
-      }
-    }
 
-    .navbar {
-      position: absolute;
-      top: 240px;
-      right: -168px;
-      width: 120px;
-      border-radius: 16px;
-      background: #fff;
-      box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
-      padding: 24px 0;
-      box-sizing: border-box;
-      z-index: 2;
-      .link {
-        &:hover {
-          .icon {
-            &.icon-device {
-              background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
-                  no-repeat center center,
-                linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-              background-size: 48px, 100%;
-            }
-            &.icon-doctor {
-              background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
-                  no-repeat center center,
-                linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-              background-size: 48px, 100%;
-            }
-          }
-          .text {
-            @include themify($themes) {
-              color: themed('color');
+        .navbar {
+          position: absolute;
+          top: 240px;
+          right: -168px;
+          width: 120px;
+          border-radius: 16px;
+          background: #fff;
+          box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
+          padding: 24px 0;
+          box-sizing: border-box;
+          z-index: 2;
+          .link {
+            &:hover {
+              .icon {
+                &.icon-device {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
+                      no-repeat center center,
+                    linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                  background-size: 48px, 100%;
+                }
+                &.icon-doctor {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
+                      no-repeat center center,
+                    linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                  background-size: 48px, 100%;
+                }
+              }
+              .text {
+                color: fetch('color');
+              }
             }
-          }
-        }
 
-        span {
-          display: block;
-        }
+            span {
+              display: block;
+            }
 
-        .icon {
-          width: 72px;
-          height: 72px;
-          // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-          background-color: #f6f6f7;
-          border-radius: 12px;
-
-          &.icon-device {
-            background: url(~assets/theme-images/ross/pc-nav-entry-device.png)
-              no-repeat center center #f6f6f7;
-            background-size: 48px;
-          }
+            .icon {
+              width: 72px;
+              height: 72px;
+              // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+              background-color: #f6f6f7;
+              border-radius: 12px;
+
+              &.icon-device {
+                background: url(~assets/theme-images/ross/pc-nav-entry-device.png)
+                  no-repeat center center #f6f6f7;
+                background-size: 48px;
+              }
+
+              &.icon-doctor {
+                background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png)
+                  no-repeat center center #f6f6f7;
+                background-size: 48px;
+              }
+            }
 
-          &.icon-doctor {
-            background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png)
-              no-repeat center center #f6f6f7;
-            background-size: 48px;
+            .text {
+              font-size: 16px;
+              color: #404040;
+              margin-top: 8px;
+            }
           }
         }
 
-        .text {
-          font-size: 16px;
-          color: #404040;
-          margin-top: 8px;
-        }
-      }
-    }
-
-    .list {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
+        .list {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
 
-      .empty {
-        width: 390px;
-      }
+          .empty {
+            width: 390px;
+          }
 
-      .section {
-        width: 490px;
-        height: 136px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 16px;
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
-        }
+          .section {
+            width: 490px;
+            height: 136px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+            }
 
-        .cover {
-          display: block;
-          width: 104px;
-          height: 104px;
-        }
-        .info {
-          position: relative;
-          margin-left: 12px;
-          width: 330px;
-          .name {
-            width: 200px;
-            font-size: 18px;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .mobile,
-          .address {
-            width: 268px;
-            position: relative;
-            font-size: 14px;
-            color: #404040;
-            padding-left: 24px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-top: 6px;
-            overflow: hidden;
-            &::after {
-              content: '';
+            .cover {
               display: block;
-              width: 16px;
-              height: 16px;
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              background-size: 16px;
-              background-repeat: no-repeat;
+              width: 104px;
+              height: 104px;
             }
-          }
-          .mobile {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+            .info {
+              position: relative;
+              margin-left: 12px;
+              width: 330px;
+              .name {
+                width: 200px;
+                font-size: 18px;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .mobile,
+              .address {
+                width: 268px;
+                position: relative;
+                font-size: 14px;
+                color: #404040;
+                padding-left: 24px;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-top: 6px;
+                overflow: hidden;
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 16px;
+                  height: 16px;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  background-size: 16px;
+                  background-repeat: no-repeat;
+                }
+              }
+              .mobile {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+                }
+              }
+              .address {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-address.png);
+                }
+              }
+
+              .distance {
+                position: absolute;
+                font-size: 14px;
+                color: #404040;
+                top: 2px;
+                right: 0;
+              }
             }
           }
-          .address {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-address.png);
-            }
-          }
-
-          .distance {
-            position: absolute;
-            font-size: 14px;
-            color: #404040;
-            top: 2px;
-            right: 0;
-          }
         }
       }
     }
@@ -265,176 +261,176 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 100vw;
-    @include themify($themes) {
-      background: themed('h5-banner-club');
-    }
-    background-size: 100vw 100vw !important;
-
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
-
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 100vw;
+        background: fetch('h5-banner-club');
+        background-size: 100vw 100vw !important;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
-    }
+      .page-content {
+        position: relative;
 
-    .filter {
-      padding: 6.4vw 3.2vw 12.8vw;
-    }
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-    .navbar {
-      position: fixed;
-      top: 50% !important;
-      right: 3.2vw;
-      left: unset !important;
-      width: 14vw;
-      border-radius: 1.6vw;
-      background: #fff;
-      box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
-      padding: 2.8vw 0;
-      box-sizing: border-box;
-      z-index: 2;
-      span {
-        display: block;
-      }
+          span {
+            color: fetch('color');
+          }
+        }
 
-      .icon {
-        position: relative;
-        width: 7.2vw;
-        height: 7.2vw;
-        border-radius: 1.2vw;
-        background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-
-        &.icon-device,
-        &.icon-doctor {
-          &::after {
-            content: '';
+        .filter {
+          padding: 6.4vw 3.2vw 12.8vw;
+        }
+
+        .navbar {
+          position: fixed;
+          top: 50% !important;
+          right: 3.2vw;
+          left: unset !important;
+          width: 14vw;
+          border-radius: 1.6vw;
+          background: #fff;
+          box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
+          padding: 2.8vw 0;
+          box-sizing: border-box;
+          z-index: 2;
+          span {
             display: block;
-            width: 4.8vw;
-            height: 4.8vw;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            background-size: 4.8vw !important;
           }
-        }
 
-        &.icon-device {
-          &::after {
-            background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
-              no-repeat center;
+          .icon {
+            position: relative;
+            width: 7.2vw;
+            height: 7.2vw;
+            border-radius: 1.2vw;
+            background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+
+            &.icon-device,
+            &.icon-doctor {
+              &::after {
+                content: '';
+                display: block;
+                width: 4.8vw;
+                height: 4.8vw;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                background-size: 4.8vw !important;
+              }
+            }
+
+            &.icon-device {
+              &::after {
+                background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
+                  no-repeat center;
+              }
+            }
+
+            &.icon-doctor {
+              &::after {
+                background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
+                  no-repeat center;
+              }
+            }
           }
-        }
 
-        &.icon-doctor {
-          &::after {
-            background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
-              no-repeat center;
+          .text {
+            font-size: 2.4vw;
+            color: #f3920d;
+            margin-top: 1.2vw;
           }
         }
       }
 
-      .text {
-        font-size: 2.4vw;
-        color: #f3920d;
-        margin-top: 1.2vw;
-      }
-    }
-  }
+      .list {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
 
-  .list {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .section {
-      width: 93.6vw;
-      height: 26vw;
-      background-color: #f3f5f6;
-      border-radius: 4px;
-      box-sizing: border-box;
-      padding: 3.2vw;
-
-      .cover {
-        display: block;
-        width: 19.6vw;
-        height: 19.6vw;
-      }
-      .info {
-        position: relative;
-        margin-left: 3.2vw;
-        .name {
-          width: 48vw;
-          font-size: 4vw;
-          color: #101010;
-          font-weight: bold;
-          margin-bottom: 4vw;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-        .mobile,
-        .address {
-          width: 66vw;
-          position: relative;
-          font-size: 3vw;
-          color: #404040;
-          padding-left: 5vw;
-          line-height: 5vw;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          &::after {
-            content: '';
+        .section {
+          width: 93.6vw;
+          height: 26vw;
+          background-color: #f3f5f6;
+          border-radius: 4px;
+          box-sizing: border-box;
+          padding: 3.2vw;
+
+          .cover {
             display: block;
-            width: 4vw;
-            height: 4vw;
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            background-size: 4vw 4vw;
-            background-repeat: no-repeat;
-          }
-        }
-        .mobile {
-          &::after {
-            background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+            width: 19.6vw;
+            height: 19.6vw;
           }
-        }
-        .address {
-          &::after {
-            background-image: url(~assets/theme-images/common/h5-icon-address.png);
-          }
-        }
+          .info {
+            position: relative;
+            margin-left: 3.2vw;
+            .name {
+              width: 48vw;
+              font-size: 4vw;
+              color: #101010;
+              font-weight: bold;
+              margin-bottom: 4vw;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+            .mobile,
+            .address {
+              width: 66vw;
+              position: relative;
+              font-size: 3vw;
+              color: #404040;
+              padding-left: 5vw;
+              line-height: 5vw;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              &::after {
+                content: '';
+                display: block;
+                width: 4vw;
+                height: 4vw;
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                background-size: 4vw 4vw;
+                background-repeat: no-repeat;
+              }
+            }
+            .mobile {
+              &::after {
+                background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+              }
+            }
+            .address {
+              &::after {
+                background-image: url(~assets/theme-images/common/h5-icon-address.png);
+              }
+            }
 
-        .distance {
-          position: absolute;
-          font-size: 3vw;
-          color: #404040;
-          top: 0.8vw;
-          right: 0;
+            .distance {
+              position: absolute;
+              font-size: 3vw;
+              color: #404040;
+              top: 0.8vw;
+              right: 0;
+            }
+          }
         }
       }
     }

pages/_template/ross/approve/device/index.vue

@@ -133,124 +133,122 @@ export default {
   }
 
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 420px;
-    @include themify($themes) {
-      background: themed('pc-banner-device');
-    }
-    background-size: auto 420px;
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
+      .page-top {
+        height: 420px;
+        background: fetch('pc-banner-device');
+        background-size: auto 420px;
 
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1000px;
-    margin: 0 auto;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
+      }
+      .page-content {
+        width: 1000px;
+        margin: 0 auto;
 
-    .search-title {
-      font-size: 16px;
-      color: #404040;
-      margin: 25px 0;
-    }
+        .search-title {
+          font-size: 16px;
+          color: #404040;
+          margin: 25px 0;
+        }
 
-    .search-container {
-      display: flex;
-      justify-content: space-between;
-      .input-with-select {
-        margin: 0 15px;
-        .el-select {
-          ::v-deep {
-            .el-input {
-              width: 130px;
+        .search-container {
+          display: flex;
+          justify-content: space-between;
+          .input-with-select {
+            margin: 0 15px;
+            .el-select {
+              ::v-deep {
+                .el-input {
+                  width: 130px;
+                }
+              }
             }
           }
-        }
-      }
 
-      .submit {
-        width: 295px;
-      }
-    }
+          .submit {
+            width: 295px;
+          }
+        }
 
-    .title {
-      font-size: 16px;
-      color: #404040;
+        .title {
+          font-size: 16px;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          justify-content: space-between;
 
-      .empty {
-        width: 390px;
-      }
+          .empty {
+            width: 390px;
+          }
 
-      .section {
-        width: 490px;
-        height: 136px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 16px;
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
-        }
+          .section {
+            width: 490px;
+            height: 136px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+            }
 
-        .cover {
-          display: block;
-          width: 104px;
-          height: 104px;
-        }
-        .info {
-          width: 336px;
-          position: relative;
+            .cover {
+              display: block;
+              width: 104px;
+              height: 104px;
+            }
+            .info {
+              width: 336px;
+              position: relative;
 
-          .name {
-            font-size: 18px;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 16px;
-            margin-top: 4px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .code,
-          .club-name {
-            position: relative;
-            font-size: 14px;
-            color: #666;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            margin-top: 6px;
+              .name {
+                font-size: 18px;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 16px;
+                margin-top: 4px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .code,
+              .club-name {
+                position: relative;
+                font-size: 14px;
+                color: #666;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                margin-top: 6px;
 
-            span {
-              color: #1890ff;
+                span {
+                  color: #1890ff;
+                }
+              }
             }
           }
         }
@@ -261,112 +259,112 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-device');
-      background-size: auto 46vw;
-    }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-device');
+        background-size: auto 46vw;
 
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        position: relative;
 
-    .search-title {
-      font-size: 3.4vw;
-      color: #404040;
-      margin: 3.2vw;
-    }
+        .search-title {
+          font-size: 3.4vw;
+          color: #404040;
+          margin: 3.2vw;
+        }
 
-    .search-container {
-      padding: 0 3.2vw;
+        .search-container {
+          padding: 0 3.2vw;
 
-      .select-type {
-        width: 100%;
-      }
+          .select-type {
+            width: 100%;
+          }
 
-      .input-with-select {
-        margin: 3.2vw 0;
-        .el-select {
-          ::v-deep {
-            .el-input {
-              width: 130px;
+          .input-with-select {
+            margin: 3.2vw 0;
+            .el-select {
+              ::v-deep {
+                .el-input {
+                  width: 130px;
+                }
+              }
             }
           }
-        }
-      }
 
-      .submit {
-        width: 100%;
-      }
-    }
+          .submit {
+            width: 100%;
+          }
+        }
 
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
 
-      .section {
-        width: 93.6vw;
-        height: 26vw;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 3.2vw;
+          .section {
+            width: 93.6vw;
+            height: 26vw;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 3.2vw;
 
-        .cover {
-          display: block;
-          width: 19.6vw;
-          height: 19.6vw;
-        }
-        .info {
-          width: 64vw;
-          position: relative;
-          margin-left: 3.2vw;
-          .name {
-            font-size: 4vw;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 4vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .code,
-          .club-name {
-            width: 66vw;
-            position: relative;
-            font-size: 3vw;
-            color: #404040;
-            line-height: 5vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+            .cover {
+              display: block;
+              width: 19.6vw;
+              height: 19.6vw;
+            }
+            .info {
+              width: 64vw;
+              position: relative;
+              margin-left: 3.2vw;
+              .name {
+                font-size: 4vw;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 4vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .code,
+              .club-name {
+                width: 66vw;
+                position: relative;
+                font-size: 3vw;
+                color: #404040;
+                line-height: 5vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
 
-            span {
-              color: #6d9eff;
+                span {
+                  color: #6d9eff;
+                }
+              }
             }
           }
         }

pages/_template/ross/approve/personnel/operate/index.vue

@@ -79,118 +79,118 @@ export default {
 }
 // pc 端
 @media screen and (min-width: 768px) {
-  .page-top {
-    height: 420px;
-    @include themify($themes) {
-      background: themed('pc-banner-doctor') no-repeat center;
-    }
-    background-size: auto 420px;
-
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-
-    .logo,
-    .name {
-      transform: translateY(-30px);
-    }
-  }
-  .page-content {
-    width: 1000px;
-    margin: 0 auto;
-
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 300px;
-      transform: translateX(-50%);
-    }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 420px;
+        background: fetch('pc-banner-doctor') no-repeat center;
+        background-size: auto 420px;
 
-    .title {
-      font-size: 16px;
-      color: #404040;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+        .logo,
+        .name {
+          transform: translateY(-30px);
         }
       }
-    }
-
-    .list {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
+      .page-content {
+        width: 1000px;
+        margin: 0 auto;
 
-      .empty {
-        width: 390px;
-      }
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 300px;
+          transform: translateX(-50%);
+        }
 
-      .section {
-        width: 490px;
-        height: 136px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 16px;
+        .title {
+          font-size: 16px;
+          color: #404040;
 
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+          span {
+            color: fetch('color');
+          }
         }
 
-        .cover {
-          display: block;
-          width: 78px;
-          height: 104px;
-        }
-        .info {
-          flex: 1;
-          flex-shrink: 0;
-          position: relative;
-          margin-left: 16px;
-          .name {
-            font-size: 18px;
-            color: #101010;
-            font-weight: bold;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            font-weight: bold;
-            margin-bottom: 8px;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          justify-content: space-between;
+
+          .empty {
+            width: 390px;
           }
-          .tag,
-          .en,
-          .code,
-          .club-name {
-            height: 20px;
-            position: relative;
-            font-size: 14px;
-            color: #999;
-            line-height: 20px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            margin-top: 4px;
 
-            span {
-              color: #333333;
+          .section {
+            width: 490px;
+            height: 136px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 16px;
+
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
             }
-          }
 
-          .tag,
-          .en {
-            color: #909399;
+            .cover {
+              display: block;
+              width: 78px;
+              height: 104px;
+            }
+            .info {
+              flex: 1;
+              flex-shrink: 0;
+              position: relative;
+              margin-left: 16px;
+              .name {
+                font-size: 18px;
+                color: #101010;
+                font-weight: bold;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                font-weight: bold;
+                margin-bottom: 8px;
+              }
+              .tag,
+              .en,
+              .code,
+              .club-name {
+                height: 20px;
+                position: relative;
+                font-size: 14px;
+                color: #999;
+                line-height: 20px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                margin-top: 4px;
+
+                span {
+                  color: #333333;
+                }
+              }
+
+              .tag,
+              .en {
+                color: #909399;
+              }
+            }
           }
         }
       }
@@ -200,102 +200,102 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-doctor') no-repeat center;
-      background-size: auto 46vw;
-    }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-doctor') no-repeat center;
+        background-size: auto 46vw;
 
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
-    .search {
-      position: absolute;
-      left: 50%;
-      top: 0;
-      transform: translate(-50%, -50%);
-    }
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        position: relative;
+        .search {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%, -50%);
+        }
 
-    .city {
-      padding-top: 12vw;
-    }
+        .city {
+          padding-top: 12vw;
+        }
 
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+          span {
+            color: fetch('color');
+          }
         }
-      }
-    }
 
-    .list {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
+        .list {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
 
-      .section {
-        width: 93.6vw;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 3.2vw;
+          .section {
+            width: 93.6vw;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 3.2vw;
 
-        .cover {
-          display: block;
-          width: 16.2vw;
-          height: 21.6vw;
-        }
-        .info {
-          position: relative;
-          margin-left: 3.6vw;
-          flex: 1;
-          flex-shrink: 0;
-          .name {
-            font-size: 4vw;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 0.8vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .tag,
-          .code,
-          .en,
-          .club-name {
-            width: 62vw;
-            height: 5vw;
-            position: relative;
-            font-size: 3vw;
-            color: #999;
-            line-height: 5vw;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+            .cover {
+              display: block;
+              width: 16.2vw;
+              height: 21.6vw;
+            }
+            .info {
+              position: relative;
+              margin-left: 3.6vw;
+              flex: 1;
+              flex-shrink: 0;
+              .name {
+                font-size: 4vw;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 0.8vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .tag,
+              .code,
+              .en,
+              .club-name {
+                width: 62vw;
+                height: 5vw;
+                position: relative;
+                font-size: 3vw;
+                color: #999;
+                line-height: 5vw;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
 
-            span {
-              color: #333;
+                span {
+                  color: #333;
+                }
+              }
+              .tag,
+              .en {
+                color: #909399;
+              }
             }
           }
-          .tag,
-          .en {
-            color: #909399;
-          }
         }
       }
     }

pages/_template/ross/center/device/index.vue

@@ -96,14 +96,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 @media screen and (min-width: 768px) {
   .page-content {
     width: 1000px;

pages/_template/ross/center/index.vue

@@ -155,325 +155,320 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-    overflow: hidden;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background-image: themed('pc-banner-doc');
-    }
-    background-size: cover;
-    background-position: center;
-
-    .club-logo {
-      width: 90px;
-      height: 90px;
-
-      img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-
-    .club-mobile {
-      margin: 8px 0;
-    }
-
-    .club-mobile,
-    .club-name {
-      font-size: 18px;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    width: 704px;
-    margin: 8px auto 60px;
-
-    .section-title {
-      font-size: 24px;
-      color: #666666;
-      padding: 16px 0;
-    }
-    .section-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      .item {
-        position: relative;
-        width: 340px;
-        height: 230px;
-        background: #eee;
-        box-sizing: border-box;
-        padding-left: 24px;
-        cursor: pointer;
-
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        background-size: 340px 230px;
-        background-position: center center;
-        background-repeat: no-repeat;
-
-        &.club {
-          @include themify($themes) {
-            background-image: themed('pc-icon-center-item-auth-club');
-          }
-          .icon {
-            color: #f3920d;
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
+      overflow: hidden;
+
+      .page-top {
+        height: 360px;
+        background-image: fetch('pc-banner-doc');
+        background-size: cover;
+        background-position: center;
+
+        .club-logo {
+          width: 90px;
+          height: 90px;
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
           }
         }
 
-        &.device {
-          @include themify($themes) {
-            background-image: themed('pc-icon-center-item-device');
-          }
-
-          .icon {
-            color: #0a6eb1;
-          }
+        .club-mobile {
+          margin: 8px 0;
         }
 
-        .auth-icon {
-          position: absolute;
-          right: 16px;
-          top: 16px;
-          width: 72px;
-          height: 32px;
-          line-height: 32px;
-          text-align: center;
-          font-size: 16px;
+        .club-mobile,
+        .club-name {
+          font-size: 18px;
           color: #fff;
-          border-radius: 4px;
+        }
+      }
 
-          &.auth {
-            background: #1890ff;
-          }
+      .page-content {
+        width: 704px;
+        margin: 8px auto 60px;
 
-          &.un-auth {
-            background: #f94b4b;
-          }
-        }
-        .tip {
+        .section-title {
           font-size: 24px;
-          color: #fff;
-          margin-bottom: 8px;
+          color: #666666;
+          padding: 16px 0;
         }
-        .btn {
-          font-size: 16px;
-          color: #fff;
+        .section-content {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          .item {
+            position: relative;
+            width: 340px;
+            height: 230px;
+            background: #eee;
+            box-sizing: border-box;
+            padding-left: 24px;
+            cursor: pointer;
+
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            background-size: 340px 230px;
+            background-position: center center;
+            background-repeat: no-repeat;
+
+            &.club {
+              background-image: fetch('pc-icon-center-item-auth-club');
+              .icon {
+                color: #f3920d;
+              }
+            }
+
+            &.device {
+              background-image: fetch('pc-icon-center-item-device');
+
+              .icon {
+                color: #0a6eb1;
+              }
+            }
+
+            .auth-icon {
+              position: absolute;
+              right: 16px;
+              top: 16px;
+              width: 72px;
+              height: 32px;
+              line-height: 32px;
+              text-align: center;
+              font-size: 16px;
+              color: #fff;
+              border-radius: 4px;
+
+              &.auth {
+                background: #1890ff;
+              }
+
+              &.un-auth {
+                background: #f94b4b;
+              }
+            }
+            .tip {
+              font-size: 24px;
+              color: #fff;
+              margin-bottom: 8px;
+            }
+            .btn {
+              font-size: 16px;
+              color: #fff;
+
+              .icon {
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                border-radius: 50%;
+                background: #fff;
+                // background: #0A6EB1;
+                font-size: 12px;
+                text-align: center;
+                line-height: 18px;
+                margin-left: 9px;
+                font-weight: bold;
+                vertical-align: 1px;
+              }
+            }
+          }
 
-          .icon {
-            display: inline-block;
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: #fff;
-            // background: #0A6EB1;
-            font-size: 12px;
+          .reset-pwd {
+            width: 98px;
+            height: 36px;
+            background: #f3920d;
+            opacity: 1;
+            border-radius: 4px;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 36px;
+            color: #ffffff;
             text-align: center;
-            line-height: 18px;
-            margin-left: 9px;
-            font-weight: bold;
-            vertical-align: 1px;
+            cursor: pointer;
           }
         }
-      }
 
-      .reset-pwd {
-        width: 98px;
-        height: 36px;
-        background: #f3920d;
-        opacity: 1;
-        border-radius: 4px;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 36px;
-        color: #ffffff;
-        text-align: center;
-        cursor: pointer;
+        .line {
+          height: 1px;
+          background: #c2c2c2;
+          margin: 32px 0;
+        }
       }
     }
-
-    .line {
-      height: 1px;
-      background: #c2c2c2;
-      margin: 32px 0;
-    }
   }
 }
 
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 36vw;
-    @include themify($themes) {
-      background-image: themed('pc-banner-doc');
-    }
-    background-size: cover;
-    background-position: center;
-
-    .club-logo {
-      width: 12.8vw;
-      height: 12.8vw;
-
-      img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-    }
-
-    .club-mobile {
-      margin: 0.8vw 0;
-    }
-
-    .club-mobile,
-    .club-name {
-      font-size: 3.4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    padding-bottom: 26vw;
-    .section-title {
-      font-size: 4.2vw;
-      color: #666666;
-      padding: 6.4vw 0 3.2vw;
-      padding-left: 4vw;
-    }
-
-    .logout {
-      width: 85.2vw;
-      height: 12vw;
-      background: #f3920d;
-      border-radius: 0.2vw;
-      text-align: center;
-      line-height: 12vw;
-      color: #ffffff;
-      font-size: 3.6vw;
-      position: fixed;
-      bottom: 24vw;
-      left: 50%;
-      transform: translateX(-50%);
-    }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 36vw;
+        background-image: fetch('pc-banner-doc');
+        background-size: cover;
+        background-position: center;
+
+        .club-logo {
+          width: 12.8vw;
+          height: 12.8vw;
 
-    .section-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      padding: 0 4vw;
-      .item {
-        position: relative;
-        width: 44.4vw;
-        height: 30vw;
-        background: #eee;
-        box-sizing: border-box;
-        padding-left: 3.6vw;
-        cursor: pointer;
-
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        background-size: 44.4vw 30vw;
-        background-position: center center;
-        background-repeat: no-repeat;
-
-        &.club {
-          @include themify($themes) {
-            background-image: themed('pc-icon-center-item-auth-club');
-          }
-          .icon {
-            color: #f3920d;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
           }
         }
 
-        &.device {
-          @include themify($themes) {
-            background-image: themed('pc-icon-center-item-device');
-          }
-
-          .icon {
-            color: #0a6eb1;
-          }
+        .club-mobile {
+          margin: 0.8vw 0;
         }
 
-        .auth-icon {
-          position: absolute;
-          right: 1.6vw;
-          top: 1.6vw;
-          width: 12.8vw;
-          height: 5.6vw;
-          line-height: 5.6vw;
-          text-align: center;
-          font-size: 3vw;
+        .club-mobile,
+        .club-name {
+          font-size: 3.4vw;
           color: #fff;
-          border-radius: 0.4vw;
+        }
+      }
 
-          &.auth {
-            background: #1890ff;
-          }
+      .page-content {
+        padding-bottom: 26vw;
+        .section-title {
+          font-size: 4.2vw;
+          color: #666666;
+          padding: 6.4vw 0 3.2vw;
+          padding-left: 4vw;
+        }
 
-          &.un-auth {
-            background: #f94b4b;
-          }
+        .logout {
+          width: 85.2vw;
+          height: 12vw;
+          background: #f3920d;
+          border-radius: 0.2vw;
+          text-align: center;
+          line-height: 12vw;
+          color: #ffffff;
+          font-size: 3.6vw;
+          position: fixed;
+          bottom: 24vw;
+          left: 50%;
+          transform: translateX(-50%);
         }
-        .tip {
-          font-size: 4vw;
-          color: #fff;
-          margin-bottom: 1.2vw;
+
+        .section-content {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          padding: 0 4vw;
+          .item {
+            position: relative;
+            width: 44.4vw;
+            height: 30vw;
+            background: #eee;
+            box-sizing: border-box;
+            padding-left: 3.6vw;
+            cursor: pointer;
+
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            background-size: 44.4vw 30vw;
+            background-position: center center;
+            background-repeat: no-repeat;
+
+            &.club {
+              background-image: fetch('pc-icon-center-item-auth-club');
+              .icon {
+                color: #f3920d;
+              }
+            }
+
+            &.device {
+              background-image: fetch('pc-icon-center-item-device');
+
+              .icon {
+                color: #0a6eb1;
+              }
+            }
+
+            .auth-icon {
+              position: absolute;
+              right: 1.6vw;
+              top: 1.6vw;
+              width: 12.8vw;
+              height: 5.6vw;
+              line-height: 5.6vw;
+              text-align: center;
+              font-size: 3vw;
+              color: #fff;
+              border-radius: 0.4vw;
+
+              &.auth {
+                background: #1890ff;
+              }
+
+              &.un-auth {
+                background: #f94b4b;
+              }
+            }
+            .tip {
+              font-size: 4vw;
+              color: #fff;
+              margin-bottom: 1.2vw;
+            }
+            .btn {
+              font-size: 3vw;
+              color: #fff;
+
+              .icon {
+                display: inline-block;
+                width: 3.4vw;
+                height: 3.4vw;
+                border-radius: 50%;
+                background: #fff;
+                font-size: 2.8vw;
+                text-align: center;
+                line-height: 3.4vw;
+                margin-left: 0.8vw;
+                font-weight: bold;
+                vertical-align: 1px;
+              }
+            }
+          }
         }
-        .btn {
-          font-size: 3vw;
-          color: #fff;
 
-          .icon {
-            display: inline-block;
-            width: 3.4vw;
-            height: 3.4vw;
-            border-radius: 50%;
-            background: #fff;
-            font-size: 2.8vw;
-            text-align: center;
-            line-height: 3.4vw;
-            margin-left: 0.8vw;
-            font-weight: bold;
-            vertical-align: 1px;
+        .menu-list {
+          padding: 0 4vw;
+          padding-top: 2.4vw;
+          .item {
+            width: 100%;
+            padding: 3vw 0;
+            display: flex;
+            justify-content: space-between;
+            font-size: 3.4vw;
+            border-bottom: 0.1vw solid #c2c2c2;
+
+            .el-icon-arrow-right {
+              font-size: 4vw;
+            }
           }
         }
-      }
-    }
 
-    .menu-list {
-      padding: 0 4vw;
-      padding-top: 2.4vw;
-      .item {
-        width: 100%;
-        padding: 3vw 0;
-        display: flex;
-        justify-content: space-between;
-        font-size: 3.4vw;
-        border-bottom: 0.1vw solid #c2c2c2;
-
-        .el-icon-arrow-right {
-          font-size: 4vw;
+        .line {
+          height: 1.6vw;
+          background: #f7f7f7;
+          margin-top: 6.4vw;
         }
       }
     }
-
-    .line {
-      height: 1.6vw;
-      background: #f7f7f7;
-      margin-top: 6.4vw;
-    }
   }
 }
 </style>

pages/_template/ross/docs/_fileId.vue

@@ -100,15 +100,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
 // pc 端
 @media screen and (min-width: 768px) {
   ::v-deep {
@@ -124,119 +115,119 @@ export default {
   }
 
   .page {
-    margin-bottom: 16px;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-doc');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    background-color: #fff;
-    margin-top: 16px;
-    box-sizing: border-box;
-    overflow: hidden;
-    padding: 32px 0;
-
-    .el-breadcrumb {
-      margin: 0 24px 32px;
-    }
-
-    .list-header,
-    .list-body {
-      font-size: 14px;
-      color: #282828;
-      .col {
-        &:nth-child(1) {
-          flex: 1;
-        }
-        &:nth-child(2),
-        &:nth-child(3),
-        &:nth-child(4) {
+    @include useTheme() {
+      margin-bottom: 16px;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-doc');
+        background-size: auto 360px;
+        .logo {
+          display: block;
           width: 120px;
-          text-align: center;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-    }
-
-    .list-header {
-      .row {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 24px 16px;
-      }
-    }
 
-    .list-body {
-      .row {
-        line-height: 70px;
-        color: #666666;
-        padding: 0 24px;
-        transition: all 0.4s;
-
-        &:hover {
-          background: #fffaf3;
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        background-color: #fff;
+        margin-top: 16px;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 32px 0;
+
+        .el-breadcrumb {
+          margin: 0 24px 32px;
         }
 
-        .section {
-          display: flex;
-          justify-content: space-between;
-          border-top: 1px solid #f7f7f7;
-
-          &.mobile {
-            display: none;
+        .list-header,
+        .list-body {
+          font-size: 14px;
+          color: #282828;
+          .col {
+            &:nth-child(1) {
+              flex: 1;
+            }
+            &:nth-child(2),
+            &:nth-child(3),
+            &:nth-child(4) {
+              width: 120px;
+              text-align: center;
+            }
           }
         }
 
-        img {
-          display: inline-block;
-          width: 32px;
-          height: 32px;
-          background: #eee;
-          margin-right: 24px;
-        }
-
-        .file-name {
-          cursor: pointer;
-          transition: all 0.4s;
-          margin-left: 24px;
-          &:hover {
-            color: #f3920d;
+        .list-header {
+          .row {
+            display: flex;
+            justify-content: space-between;
+            padding: 0 24px 16px;
           }
         }
 
-        .control {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .download {
-            display: block;
-            width: 24px;
-            height: 24px;
-            background: url(~assets/theme-images/common/pc-icon-download.png)
-              no-repeat center;
-            background-size: 24px;
-            margin: 0 auto;
-            cursor: pointer;
+        .list-body {
+          .row {
+            line-height: 70px;
+            color: #666666;
+            padding: 0 24px;
+            transition: all 0.4s;
 
             &:hover {
-              background-image: url(~assets/theme-images/common/pc-icon-download-hover.png);
+              background: #fffaf3;
+            }
+
+            .section {
+              display: flex;
+              justify-content: space-between;
+              border-top: 1px solid #f7f7f7;
+
+              &.mobile {
+                display: none;
+              }
+            }
+
+            img {
+              display: inline-block;
+              width: 32px;
+              height: 32px;
+              background: #eee;
+              margin-right: 24px;
+            }
+
+            .file-name {
+              cursor: pointer;
+              transition: all 0.4s;
+              margin-left: 24px;
+              &:hover {
+                color: #f3920d;
+              }
+            }
+
+            .control {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .download {
+                display: block;
+                width: 24px;
+                height: 24px;
+                background: url(~assets/theme-images/common/pc-icon-download.png)
+                  no-repeat center;
+                background-size: 24px;
+                margin: 0 auto;
+                cursor: pointer;
+
+                &:hover {
+                  background-image: url(~assets/theme-images/common/pc-icon-download-hover.png);
+                }
+              }
             }
           }
         }
@@ -259,97 +250,99 @@ export default {
     }
   }
 
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-doc');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-      text-align: center;
-      margin: 0 3.2vw;
-    }
-  }
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-doc');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+          text-align: center;
+          margin: 0 3.2vw;
+        }
+      }
 
-  .page-content {
-    position: relative;
-    padding: 8vw 0;
+      .page-content {
+        position: relative;
+        padding: 8vw 0;
 
-    .el-breadcrumb {
-      margin: 0 4vw 4vw;
-    }
+        .el-breadcrumb {
+          margin: 0 4vw 4vw;
+        }
 
-    .list-header {
-      display: none;
-    }
+        .list-header {
+          display: none;
+        }
 
-    .list-body {
-      font-size: 3.6vw;
-      color: #282828;
+        .list-body {
+          font-size: 3.6vw;
+          color: #282828;
 
-      .row {
-        color: #666666;
-        padding: 0 4vw;
+          .row {
+            color: #666666;
+            padding: 0 4vw;
 
-        .section {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 0.1vw solid #f7f7f7;
-          height: 17.6vw;
+            .section {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 0.1vw solid #f7f7f7;
+              height: 17.6vw;
 
-          &.pc {
-            display: none;
-          }
+              &.pc {
+                display: none;
+              }
 
-          .file-cover {
-            img {
-              width: 8.8vw;
-              height: 8.8vw;
-              background: #eee;
-            }
-          }
+              .file-cover {
+                img {
+                  width: 8.8vw;
+                  height: 8.8vw;
+                  background: #eee;
+                }
+              }
 
-          .file-content {
-            flex: 1;
-            margin: 0 4.8vw;
+              .file-content {
+                flex: 1;
+                margin: 0 4.8vw;
 
-            .file-name {
-              font-size: 3.6vw;
-              @include ellipsis(1);
-            }
+                .file-name {
+                  font-size: 3.6vw;
+                  @include ellipsis(1);
+                }
 
-            .file-info {
-              font-size: 3vw;
-              color: #999999;
-              margin-top: 1.6vw;
+                .file-info {
+                  font-size: 3vw;
+                  color: #999999;
+                  margin-top: 1.6vw;
 
-              .size {
-                margin-left: 4vw;
+                  .size {
+                    margin-left: 4vw;
+                  }
+                }
               }
-            }
-          }
 
-          .control {
-            width: 6.4vw;
-            height: 6.4vw;
-            .download {
-              display: block;
-              width: 6.4vw;
-              height: 6.4vw;
-              background: url(~assets/theme-images/common/h5-icon-download.png)
-                no-repeat center;
-              background-size: 6.4vw;
-              margin: 0 auto;
+              .control {
+                width: 6.4vw;
+                height: 6.4vw;
+                .download {
+                  display: block;
+                  width: 6.4vw;
+                  height: 6.4vw;
+                  background: url(~assets/theme-images/common/h5-icon-download.png)
+                    no-repeat center;
+                  background-size: 6.4vw;
+                  margin: 0 auto;
+                }
+              }
             }
           }
         }

pages/_template/ross/docs/article-detail.vue

@@ -17,14 +17,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
 // pc 端
 @media screen and (min-width: 768px) {
   .page {

pages/_template/ross/feedback/index.vue

@@ -36,108 +36,104 @@ export default {
 <style scoped lang="scss">
 // pc 端
 @media screen and (min-width: 768px) {
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-feedback');
-    }
-    background-size: auto 360px;
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-    box-sizing: border-box;
-    background-color: #fff;
-    .control {
-      display: block;
-      width: 100%;
-      height: 280px;
-      border: 1px solid #d8d8d8;
-      outline: none;
-      box-sizing: border-box;
-      font-size: 16px;
-      color: #101010;
-    }
-
-    .submit {
-      text-align: center;
-      line-height: 46px;
-      width: 326px;
-      height: 46px;
-      margin-left: auto;
-      margin-right: auto;
-      border-radius: 4px;
-      font-size: 16px;
-      @include themify($themes) {
-        background-color: themed('color');
-      }
-      color: #fff;
-      transition: all 0.2s;
-      cursor: pointer;
-
-      &:hover {
-        @include themify($themes) {
-          background-color: themed('hover-color');
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-feedback');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
+      .page-content {
+        width: 1200px;
+        margin-left: auto;
+        margin-right: auto;
+        box-sizing: border-box;
+        background-color: #fff;
+        .control {
+          display: block;
+          width: 100%;
+          height: 280px;
+          border: 1px solid #d8d8d8;
+          outline: none;
+          box-sizing: border-box;
+          font-size: 16px;
+          color: #101010;
+        }
 
-      &.disabled {
-        background-color: #d8d8d8 !important;
-      }
-    }
-  }
-
-  .dialog {
-    width: 380px;
-    padding-top: 40px;
-    border-radius: 0;
-
-    .dialog-content {
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-
-      .title {
-        font-size: 24px;
-        color: #101010;
-        margin: 28px 0 12px;
-      }
-
-      .tip {
-        color: #404040;
-        font-size: 16px;
-      }
-
-      .line {
-        width: 340px;
-        height: 1px;
-        margin: 0 auto;
-        margin-top: 28px;
-        background: #d8d8d8;
+        .submit {
+          text-align: center;
+          line-height: 46px;
+          width: 326px;
+          height: 46px;
+          margin-left: auto;
+          margin-right: auto;
+          border-radius: 4px;
+          font-size: 16px;
+          background-color: fetch('color');
+          color: #fff;
+          transition: all 0.2s;
+          cursor: pointer;
+
+          &:hover {
+            background-color: fetch('hover-color');
+          }
+
+          &.disabled {
+            background-color: #d8d8d8 !important;
+          }
+        }
       }
 
-      .image-icon {
-        width: 140px;
-        height: 100px;
-        @include themify($themes) {
-          background: themed('pc-icon-feedback-submit') no-repeat center;
-          background-size: 140px 100px;
+      .dialog {
+        width: 380px;
+        padding-top: 40px;
+        border-radius: 0;
+
+        .dialog-content {
+          width: 100%;
+          height: 100%;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+
+          .title {
+            font-size: 24px;
+            color: #101010;
+            margin: 28px 0 12px;
+          }
+
+          .tip {
+            color: #404040;
+            font-size: 16px;
+          }
+
+          .line {
+            width: 340px;
+            height: 1px;
+            margin: 0 auto;
+            margin-top: 28px;
+            background: #d8d8d8;
+          }
+
+          .image-icon {
+            width: 140px;
+            height: 100px;
+            background: fetch('pc-icon-feedback-submit') no-repeat center;
+            background-size: 140px 100px;
+          }
         }
       }
     }
@@ -146,85 +142,83 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-feedback');
-    }
-    background-size: auto 46vw;
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    .control {
-      display: block;
-      width: 100%;
-      height: 56vw;
-      border: 0.1vw solid #d8d8d8;
-      outline: none;
-      box-sizing: border-box;
-      font-size: 3.2vw;
-      color: #101010;
-    }
-
-    .submit {
-      text-align: center;
-      line-height: 11.6vw;
-      width: 100%;
-      height: 11.6vw;
-      border-radius: 0.2vw;
-      font-size: 4vw;
-      @include themify($themes) {
-        background-color: themed('color');
-      }
-      color: #fff;
-
-      &.disabled {
-        background-color: #d8d8d8;
-      }
-    }
-  }
-
-  .dialog {
-    width: 76vw;
-    border-radius: 0;
-
-    .dialog-content {
-      padding-top: 3.2vw;
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-
-      .title {
-        font-size: 4.6vw;
-        color: #101010;
-        margin: 3.2vw 0;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-feedback');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
       }
+      .page-content {
+        .control {
+          display: block;
+          width: 100%;
+          height: 56vw;
+          border: 0.1vw solid #d8d8d8;
+          outline: none;
+          box-sizing: border-box;
+          font-size: 3.2vw;
+          color: #101010;
+        }
 
-      .tip {
-        color: #404040;
-        font-size: 3.2vw;
+        .submit {
+          text-align: center;
+          line-height: 11.6vw;
+          width: 100%;
+          height: 11.6vw;
+          border-radius: 0.2vw;
+          font-size: 4vw;
+          background-color: fetch('color');
+          color: #fff;
+
+          &.disabled {
+            background-color: #d8d8d8;
+          }
+        }
       }
 
-      .image-icon {
-        width: 30vw;
-        height: 20vw;
-        @include themify($themes) {
-          background: themed('pc-icon-feedback-submit') no-repeat center;
-          background-size: 30vw 20vw;
+      .dialog {
+        width: 76vw;
+        border-radius: 0;
+
+        .dialog-content {
+          padding-top: 3.2vw;
+          width: 100%;
+          height: 100%;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+
+          .title {
+            font-size: 4.6vw;
+            color: #101010;
+            margin: 3.2vw 0;
+          }
+
+          .tip {
+            color: #404040;
+            font-size: 3.2vw;
+          }
+
+          .image-icon {
+            width: 30vw;
+            height: 20vw;
+            background: fetch('pc-icon-feedback-submit') no-repeat center;
+            background-size: 30vw 20vw;
+          }
         }
       }
     }

pages/_template/ross/form/club-register.vue

@@ -344,200 +344,187 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-register');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 1200px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .message {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin-top: 60px;
-      .status-icon {
-        width: 88px;
-        height: 88px;
-        background-repeat: no-repeat;
-        background-size: 75px auto;
-        background-position: center;
-
-        &.success {
-          background-image: url(~assets/theme-images/common/icon-auth-primary.png);
-        }
-        &.warning {
-          background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-register');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
         }
-        &.danger {
-          background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
+      .page-content {
+        width: 1200px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
+
+        .message {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          margin-top: 60px;
+          .status-icon {
+            width: 88px;
+            height: 88px;
+            background-repeat: no-repeat;
+            background-size: 75px auto;
+            background-position: center;
+
+            &.success {
+              background-image: url(~assets/theme-images/common/icon-auth-primary.png);
+            }
+            &.warning {
+              background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+            }
+            &.danger {
+              background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+            }
+          }
 
-      .status {
-        font-size: 18px;
-        color: #282828;
-        margin: 12px 0;
-      }
-
-      .tip {
-        color: #999999;
-        font-size: 14px;
-      }
-    }
-
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
-        border-radius: 4px;
-
-        cursor: pointer;
+          .status {
+            font-size: 18px;
+            color: #282828;
+            margin: 12px 0;
+          }
 
-        &.prev {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .tip {
+            color: #999999;
+            font-size: 14px;
           }
         }
-        &.next {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
+            border-radius: 4px;
+
+            cursor: pointer;
+
+            &.prev {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+            &.next {
+              background-color: fetch('color');
+              color: #fff;
+            }
+          }
+          .record {
+            font-size: 14px;
+            cursor: pointer;
+            color: fetch('color');
           }
         }
-      }
-      .record {
-        font-size: 14px;
-        cursor: pointer;
-        @include themify($themes) {
-          color: themed('color');
+
+        .step-list {
+          width: 700px;
+          margin: 0 auto;
         }
       }
     }
-
-    .step-list {
-      width: 700px;
-      margin: 0 auto;
-    }
   }
 }
 
 // 移动端
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-register');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    padding: 0 7vw 7vw;
-
-    .message {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin: 22.8vw 0;
-      .status-icon {
-        width: 23.6vw;
-        height: 23.6vw;
-        background-repeat: no-repeat;
-        background-size: 20vw auto;
-        background-position: center;
-
-        &.success {
-          background-image: url(~assets/theme-images/common/icon-auth-primary.png);
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-register');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
         }
-        &.warning {
-          background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
-        &.danger {
-          background-image: url(~assets/theme-images/common/icon-auth-danger.png);
-        }
-      }
-
-      .status {
-        font-size: 4.2vw;
-        color: #282828;
-        margin: 3.2vw 0 2.4vw;
       }
 
-      .tip {
-        color: #999999;
-        font-size: 3.2vw;
-      }
-    }
-
-    .control {
-      .button {
-        width: 85.6vw;
-        height: 12vw;
-        border-radius: 4px;
+      .page-content {
+        padding: 0 7vw 7vw;
+
+        .message {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          margin: 22.8vw 0;
+          .status-icon {
+            width: 23.6vw;
+            height: 23.6vw;
+            background-repeat: no-repeat;
+            background-size: 20vw auto;
+            background-position: center;
+
+            &.success {
+              background-image: url(~assets/theme-images/common/icon-auth-primary.png);
+            }
+            &.warning {
+              background-image: url(~assets/theme-images/common/icon-auth-warning.png);
+            }
+            &.danger {
+              background-image: url(~assets/theme-images/common/icon-auth-danger.png);
+            }
+          }
 
-        cursor: pointer;
+          .status {
+            font-size: 4.2vw;
+            color: #282828;
+            margin: 3.2vw 0 2.4vw;
+          }
 
-        &.prev {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .tip {
+            color: #999999;
+            font-size: 3.2vw;
           }
         }
-        &.next {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+
+        .control {
+          .button {
+            width: 85.6vw;
+            height: 12vw;
+            border-radius: 4px;
+
+            cursor: pointer;
+
+            &.prev {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+            &.next {
+              background-color: fetch('color');
+              color: #fff;
+            }
+          }
+          .record {
+            margin-top: 4.8vw;
+            font-size: 3.4vw;
+            cursor: pointer;
+            color: fetch('color');
           }
-        }
-      }
-      .record {
-        margin-top: 4.8vw;
-        font-size: 3.4vw;
-        cursor: pointer;
-        @include themify($themes) {
-          color: themed('color');
         }
       }
     }

pages/_template/ross/form/components/form-club-device.vue

@@ -172,7 +172,7 @@ export default {
     formType: {
       type: String,
       default: 'add',
-    }
+    },
   },
   data() {
     const productNameValidate = (rule, value, callback) => {
@@ -493,21 +493,17 @@ export default {
 <style lang="scss" scoped>
 .club-device {
   ::v-deep {
-    .el-input.is-active .el-input__inner,
-    .el-input__inner:focus {
-      @include themify($themes) {
-        border-color: themed('color');
+    @include useTheme() {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
       }
-    }
-    .el-radio__input.is-checked + .el-radio__label {
-      @include themify($themes) {
-        color: themed('color');
+      .el-radio__input.is-checked + .el-radio__label {
+        color: fetch('color');
       }
-    }
-    .el-radio__input.is-checked .el-radio__inner {
-      @include themify($themes) {
-        background-color: themed('color');
-        border-color: themed('color');
+      .el-radio__input.is-checked .el-radio__inner {
+        background-color: fetch('color');
+        border-color: fetch('color');
       }
     }
   }
@@ -515,101 +511,98 @@ export default {
 
 // pc端
 @media screen and (min-width: 768px) {
-  .el-select {
-    width: 100%;
-  }
-
-  .device-section {
-    position: relative;
-
-    .el-form {
-      padding-bottom: 10px;
-    }
+  .club-device {
+    @include useTheme() {
+      .el-select {
+        width: 100%;
+      }
 
-    .remove-btn {
-      position: absolute;
-      right: 0;
-      bottom: 24px;
-      font-size: 16px;
-      color: #f94b4b;
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
+      .device-section {
+        position: relative;
 
-  .device-param-list {
-    position: relative;
-    .add-param {
-      position: absolute;
-      cursor: pointer;
-      top: -40px;
-      right: 0;
-      text-decoration: underline;
-      font-size: 14px;
-      @include themify($themes) {
-        color: themed('color');
-      }
-    }
+        .el-form {
+          padding-bottom: 10px;
+        }
 
-    .param {
-      position: relative;
-      .remove {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 20px;
-        height: 20px;
-        background: #f94b4b;
-        border-radius: 2px;
-        cursor: pointer;
-        color: #fff;
-        font-size: 14px;
-        text-align: center;
-        line-height: 20px;
+        .remove-btn {
+          position: absolute;
+          right: 0;
+          bottom: 24px;
+          font-size: 16px;
+          color: #f94b4b;
+          text-decoration: underline;
+          cursor: pointer;
+        }
       }
-    }
-  }
 
-  .add-device {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 162px;
-    height: 46px;
-    border-radius: 4px;
-    box-sizing: border-box;
-    font-size: 18px;
-    margin: 0 auto;
-    cursor: pointer;
-
-    @include themify($themes) {
-      border: 1px solid themed('color');
-      color: themed('color');
-    }
+      .device-param-list {
+        position: relative;
+        .add-param {
+          position: absolute;
+          cursor: pointer;
+          top: -40px;
+          right: 0;
+          text-decoration: underline;
+          font-size: 14px;
+          color: fetch('color');
+        }
 
-    .add-icon {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      margin-right: 16px;
-
-      &::before,
-      &::after {
-        position: absolute;
-        width: 3px;
-        height: 20px;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        border-radius: 1px;
-        content: '';
-        display: block;
-        @include themify($themes) {
-          background: themed('color');
+        .param {
+          position: relative;
+          .remove {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            background: #f94b4b;
+            border-radius: 2px;
+            cursor: pointer;
+            color: #fff;
+            font-size: 14px;
+            text-align: center;
+            line-height: 20px;
+          }
         }
       }
-      &::after {
-        transform: translate(-50%, -50%) rotateZ(90deg);
+
+      .add-device {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 162px;
+        height: 46px;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 18px;
+        margin: 0 auto;
+        cursor: pointer;
+        border: 1px solid fetch('color');
+        color: fetch('color');
+
+        .add-icon {
+          width: 20px;
+          height: 20px;
+          position: relative;
+          margin-right: 16px;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: 3px;
+            height: 20px;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 1px;
+            content: '';
+            display: block;
+            background: fetch('color');
+          }
+          &::after {
+            transform: translate(-50%, -50%) rotateZ(90deg);
+          }
+        }
       }
     }
   }
@@ -617,86 +610,83 @@ export default {
 
 // 移动端
 @media screen and (max-width: 768px) {
-  ::v-deep {
-    .el-form-item__label {
-      font-size: 3.4vw;
-    }
-  }
-  .el-select {
-    width: 100%;
-  }
-  .device-param-list {
-    position: relative;
-    .add-param {
-      position: absolute;
-      cursor: pointer;
-      top: -40px;
-      right: 0;
-      font-size: 3.4vw;
-      @include themify($themes) {
-        color: themed('color');
+  .club-device {
+    @include useTheme() {
+      ::v-deep {
+        .el-form-item__label {
+          font-size: 3.4vw;
+        }
       }
-    }
-
-    .param {
-      position: relative;
-      .remove {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 4.4vw;
-        height: 4.4vw;
-        background: #f94b4b;
-        border-radius: 0.2vw;
-        cursor: pointer;
-        color: #fff;
-        font-size: 3.4vw;
-        text-align: center;
-        line-height: 4.4vw;
+      .el-select {
+        width: 100%;
       }
-    }
-  }
-
-  .add-device {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 31vw;
-    height: 8.8vw;
-    border-radius: 0.4vw;
-    box-sizing: border-box;
-    font-size: 3.4vw;
-    margin: 0 auto;
-    cursor: pointer;
-
-    @include themify($themes) {
-      border: 1px solid themed('color');
-      color: themed('color');
-    }
+      .device-param-list {
+        position: relative;
+        .add-param {
+          position: absolute;
+          cursor: pointer;
+          top: -40px;
+          right: 0;
+          font-size: 3.4vw;
+          color: fetch('color');
+        }
 
-    .add-icon {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      margin-right: 16px;
-
-      &::before,
-      &::after {
-        position: absolute;
-        width: 0.6vw;
-        height: 4.1vw;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        border-radius: 1px;
-        content: '';
-        display: block;
-        @include themify($themes) {
-          background: themed('color');
+        .param {
+          position: relative;
+          .remove {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4.4vw;
+            height: 4.4vw;
+            background: #f94b4b;
+            border-radius: 0.2vw;
+            cursor: pointer;
+            color: #fff;
+            font-size: 3.4vw;
+            text-align: center;
+            line-height: 4.4vw;
+          }
         }
       }
-      &::after {
-        transform: translate(-50%, -50%) rotateZ(90deg);
+
+      .add-device {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 31vw;
+        height: 8.8vw;
+        border-radius: 0.4vw;
+        box-sizing: border-box;
+        font-size: 3.4vw;
+        margin: 0 auto;
+        cursor: pointer;
+        border: 1px solid fetch('color');
+        color: fetch('color');
+
+        .add-icon {
+          width: 20px;
+          height: 20px;
+          position: relative;
+          margin-right: 16px;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: 0.6vw;
+            height: 4.1vw;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 1px;
+            content: '';
+            display: block;
+            background: fetch('color');
+          }
+          &::after {
+            transform: translate(-50%, -50%) rotateZ(90deg);
+          }
+        }
       }
     }
   }

pages/_template/ross/form/components/form-club-info.vue

@@ -307,7 +307,7 @@ export default {
         cityId: '',
         townId: '',
         linkMan: '',
-        linkMobile: ''
+        linkMobile: '',
       },
       rules: {
         name: [
@@ -612,11 +612,11 @@ export default {
 
 <style lang="scss" scoped>
 .club-info {
-  ::v-deep {
-    .el-input.is-active .el-input__inner,
-    .el-input__inner:focus {
-      @include themify($themes) {
-        border-color: themed('color');
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
       }
     }
   }
@@ -624,110 +624,114 @@ export default {
 
 // pc端
 @media screen and (min-width: 768px) {
-  .position-select {
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.39);
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .position-select-container {
-      background: #fff;
-      width: 60%;
-      box-sizing: border-box;
-      padding: 24px;
+  .club-info {
+    @include useTheme() {
+      .position-select {
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.39);
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
 
-      .position-select-footer {
-        position: relative;
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
         align-items: center;
-        padding-top: 24px;
 
-        .lnglat {
-          position: absolute;
-          font-size: 14px;
-          color: #666;
+        .position-select-container {
+          background: #fff;
+          width: 60%;
+          box-sizing: border-box;
+          padding: 24px;
+
+          .position-select-footer {
+            position: relative;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 24px;
+
+            .lnglat {
+              position: absolute;
+              font-size: 14px;
+              color: #666;
+
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          .postion-control {
+            width: 120px;
+            height: 40px;
+            font-size: 14px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 16px;
+
+            &.position-confirm {
+              background: #f56c6c;
+              color: #fff;
+            }
 
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
+            &.position-cancel {
+              background: #b1b1b1;
+              color: #fff;
+            }
+          }
         }
       }
 
-      .postion-control {
-        width: 120px;
-        height: 40px;
-        font-size: 14px;
-        border-radius: 4px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        margin-left: 16px;
+      .normal-row {
+        position: relative;
+        .label {
+          font-size: 14px;
+          color: #606266;
 
-        &.position-confirm {
-          background: #f56c6c;
-          color: #fff;
-        }
+          i {
+            color: #f56c6c;
+            margin-right: 4px;
+          }
 
-        &.position-cancel {
-          background: #b1b1b1;
+          span {
+            color: #b2b2b2;
+          }
+        }
+        .postion-btn {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 62px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
           color: #fff;
+          background: #1890ff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: url(~assets/theme-images/common/icon-position.png)
+              no-repeat center;
+            background-size: 16px 16px;
+          }
         }
       }
     }
   }
-
-  .normal-row {
-    position: relative;
-    .label {
-      font-size: 14px;
-      color: #606266;
-
-      i {
-        color: #f56c6c;
-        margin-right: 4px;
-      }
-
-      span {
-        color: #b2b2b2;
-      }
-    }
-    .postion-btn {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-      width: 62px;
-      height: 28px;
-      line-height: 28px;
-      font-size: 14px;
-      color: #fff;
-      background: #1890ff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      border-radius: 4px;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        background: url(~assets/theme-images/common/icon-position.png) no-repeat
-          center;
-        background-size: 16px 16px;
-      }
-    }
-  }
 }
 
 // 移动端

pages/_template/ross/form/components/form-club-register.vue

@@ -208,22 +208,22 @@ export default {
 
 <style lang="scss" scoped>
 .club-register {
-  ::v-deep {
-    .el-input.is-active .el-input__inner,
-    .el-input__inner:focus {
-      @include themify($themes) {
-        border-color: themed('color');
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
       }
     }
   }
 }
 
 .verifyCode {
-  .send {
-    cursor: pointer;
-    white-space: nowrap;
-    @include themify($themes) {
-      color: themed('color');
+  @include useTheme() {
+    .send {
+      cursor: pointer;
+      white-space: nowrap;
+      color: fetch('color');
     }
   }
 }

pages/_template/ross/index.vue

@@ -172,11 +172,11 @@ export default {
 <style scoped lang="scss">
 .el-input {
   ::v-deep {
-    & > {
-      .el-input.is-active .el-input__inner,
-      .el-input__inner:focus {
-        @include themify($themes) {
-          border-color: themed('color');
+    @include useTheme() {
+      & > {
+        .el-input.is-active .el-input__inner,
+        .el-input__inner:focus {
+          border-color: fetch('color');
         }
       }
     }
@@ -186,209 +186,205 @@ export default {
 // pc 端
 @media screen and (min-width: 768px) {
   .page {
-    position: relative;
-    min-height: calc(100vh - 80px - 80px);
-    background-color: #fff;
-  }
-  .page-top {
-    height: 530px;
-    @include themify($themes) {
-      background-image: themed('pc-banner-club');
-    }
-    background-size: cover;
-    background-position: center;
-  }
-  .page-content {
-    position: relative;
-    width: 1000px;
-    margin: 0 auto;
-
-    .title {
-      font-size: 16px;
-      color: #404040;
-
-      span {
-        @include themify($themes) {
-          color: themed('color');
-        }
+    @include useTheme() {
+      position: relative;
+      min-height: calc(100vh - 80px - 80px);
+      background-color: #fff;
+      .page-top {
+        height: 530px;
+        background-image: fetch('pc-banner-club');
+        background-size: cover;
+        background-position: center;
       }
-    }
-
-    .filter {
-      padding: 48px 0 105px;
-      .search {
-        width: 640px;
+      .page-content {
+        position: relative;
+        width: 1000px;
         margin: 0 auto;
-        .el-input {
-          height: 46px;
+
+        .title {
           font-size: 16px;
-          .el-input__icon {
-            font-size: 24px;
-            line-height: 46px;
-            margin-left: 12px;
+          color: #404040;
+
+          span {
+            color: fetch('color');
           }
+        }
 
-          ::v-deep {
-            & > .el-input__inner {
+        .filter {
+          padding: 48px 0 105px;
+          .search {
+            width: 640px;
+            margin: 0 auto;
+            .el-input {
               height: 46px;
-              padding-left: 55px;
+              font-size: 16px;
+              .el-input__icon {
+                font-size: 24px;
+                line-height: 46px;
+                margin-left: 12px;
+              }
+
+              ::v-deep {
+                & > .el-input__inner {
+                  height: 46px;
+                  padding-left: 55px;
+                }
+              }
             }
           }
         }
-      }
-    }
 
-    .navbar {
-      position: absolute;
-      top: 240px;
-      right: -168px;
-      width: 120px;
-      border-radius: 16px;
-      background: #fff;
-      box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
-      padding: 24px 0;
-      box-sizing: border-box;
-      z-index: 2;
-      .link {
-        &:hover {
-          .icon {
-            &.icon-device {
-              background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
-                  no-repeat center center,
-                linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-              background-size: 48px, 100%;
-            }
-            &.icon-doctor {
-              background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
-                  no-repeat center center,
-                linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-              background-size: 48px, 100%;
-            }
-          }
-          .text {
-            @include themify($themes) {
-              color: themed('color');
+        .navbar {
+          position: absolute;
+          top: 240px;
+          right: -168px;
+          width: 120px;
+          border-radius: 16px;
+          background: #fff;
+          box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
+          padding: 24px 0;
+          box-sizing: border-box;
+          z-index: 2;
+          .link {
+            &:hover {
+              .icon {
+                &.icon-device {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
+                      no-repeat center center,
+                    linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                  background-size: 48px, 100%;
+                }
+                &.icon-doctor {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
+                      no-repeat center center,
+                    linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                  background-size: 48px, 100%;
+                }
+              }
+              .text {
+                color: fetch('color');
+              }
             }
-          }
-        }
 
-        span {
-          display: block;
-        }
+            span {
+              display: block;
+            }
 
-        .icon {
-          width: 72px;
-          height: 72px;
-          // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-          background-color: #f6f6f7;
-          border-radius: 12px;
-
-          &.icon-device {
-            background: url(~assets/theme-images/ross/pc-nav-entry-device.png)
-              no-repeat center center #f6f6f7;
-            background-size: 48px;
-          }
+            .icon {
+              width: 72px;
+              height: 72px;
+              // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+              background-color: #f6f6f7;
+              border-radius: 12px;
+
+              &.icon-device {
+                background: url(~assets/theme-images/ross/pc-nav-entry-device.png)
+                  no-repeat center center #f6f6f7;
+                background-size: 48px;
+              }
+
+              &.icon-doctor {
+                background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png)
+                  no-repeat center center #f6f6f7;
+                background-size: 48px;
+              }
+            }
 
-          &.icon-doctor {
-            background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png)
-              no-repeat center center #f6f6f7;
-            background-size: 48px;
+            .text {
+              font-size: 16px;
+              color: #404040;
+              margin-top: 8px;
+            }
           }
         }
 
-        .text {
-          font-size: 16px;
-          color: #404040;
-          margin-top: 8px;
-        }
-      }
-    }
-
-    .list {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
+        .list {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
 
-      .empty {
-        width: 390px;
-      }
+          .empty {
+            width: 390px;
+          }
 
-      .section {
-        width: 490px;
-        height: 136px;
-        background-color: #f3f5f6;
-        border-radius: 4px;
-        box-sizing: border-box;
-        padding: 16px;
-        cursor: pointer;
-        transition: all 0.4s;
-        &:hover {
-          box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
-        }
+          .section {
+            width: 490px;
+            height: 136px;
+            background-color: #f3f5f6;
+            border-radius: 4px;
+            box-sizing: border-box;
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.4s;
+            &:hover {
+              box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+            }
 
-        .cover {
-          display: block;
-          width: 104px;
-          height: 104px;
-        }
-        .info {
-          position: relative;
-          margin-left: 12px;
-          width: 330px;
-          .name {
-            width: 200px;
-            font-size: 18px;
-            color: #101010;
-            font-weight: bold;
-            margin-bottom: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-          }
-          .mobile,
-          .address {
-            width: 268px;
-            position: relative;
-            font-size: 14px;
-            color: #404040;
-            padding-left: 24px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-top: 6px;
-            overflow: hidden;
-            &::after {
-              content: '';
+            .cover {
               display: block;
-              width: 16px;
-              height: 16px;
-              position: absolute;
-              left: 0;
-              top: 50%;
-              transform: translateY(-50%);
-              background-size: 16px;
-              background-repeat: no-repeat;
+              width: 104px;
+              height: 104px;
             }
-          }
-          .mobile {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+            .info {
+              position: relative;
+              margin-left: 12px;
+              width: 330px;
+              .name {
+                width: 200px;
+                font-size: 18px;
+                color: #101010;
+                font-weight: bold;
+                margin-bottom: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+              .mobile,
+              .address {
+                width: 268px;
+                position: relative;
+                font-size: 14px;
+                color: #404040;
+                padding-left: 24px;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-top: 6px;
+                overflow: hidden;
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 16px;
+                  height: 16px;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  background-size: 16px;
+                  background-repeat: no-repeat;
+                }
+              }
+              .mobile {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-mobile.png);
+                }
+              }
+              .address {
+                &::after {
+                  background-image: url(~assets/theme-images/common/pc-icon-address.png);
+                }
+              }
+
+              .distance {
+                position: absolute;
+                font-size: 14px;
+                color: #404040;
+                top: 2px;
+                right: 0;
+              }
             }
           }
-          .address {
-            &::after {
-              background-image: url(~assets/theme-images/common/pc-icon-address.png);
-            }
-          }
-
-          .distance {
-            position: absolute;
-            font-size: 14px;
-            color: #404040;
-            top: 2px;
-            right: 0;
-          }
         }
       }
     }
@@ -397,176 +393,176 @@ export default {
 
 // 移动 端
 @media screen and (max-width: 768px) {
-  .page-top {
-    height: 100vw;
-    @include themify($themes) {
-      background: themed('h5-banner-club');
-    }
-    background-size: 100vw 100vw !important;
-
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
-      background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    position: relative;
-
-    .title {
-      font-size: 3.4vw;
-      color: #404040;
+  .page {
+    @include useTheme() {
+      .page-top {
+        height: 100vw;
+        background: fetch('h5-banner-club');
+        background-size: 100vw 100vw !important;
 
-      span {
-        @include themify($themes) {
-          color: themed('color');
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
-    }
+      .page-content {
+        position: relative;
 
-    .filter {
-      padding: 6.4vw 3.2vw 12.8vw;
-    }
+        .title {
+          font-size: 3.4vw;
+          color: #404040;
 
-    .navbar {
-      position: fixed;
-      top: 50% !important;
-      right: 3.2vw;
-      left: unset !important;
-      width: 14vw;
-      border-radius: 1.6vw;
-      background: #fff;
-      box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
-      padding: 2.8vw 0;
-      box-sizing: border-box;
-      z-index: 2;
-      span {
-        display: block;
-      }
+          span {
+            color: fetch('color');
+          }
+        }
 
-      .icon {
-        position: relative;
-        width: 7.2vw;
-        height: 7.2vw;
-        border-radius: 1.2vw;
-        background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-
-        &.icon-device,
-        &.icon-doctor {
-          &::after {
-            content: '';
+        .filter {
+          padding: 6.4vw 3.2vw 12.8vw;
+        }
+
+        .navbar {
+          position: fixed;
+          top: 50% !important;
+          right: 3.2vw;
+          left: unset !important;
+          width: 14vw;
+          border-radius: 1.6vw;
+          background: #fff;
+          box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
+          padding: 2.8vw 0;
+          box-sizing: border-box;
+          z-index: 2;
+          span {
             display: block;
-            width: 4.8vw;
-            height: 4.8vw;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            background-size: 4.8vw !important;
           }
-        }
 
-        &.icon-device {
-          &::after {
-            background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
-              no-repeat center;
+          .icon {
+            position: relative;
+            width: 7.2vw;
+            height: 7.2vw;
+            border-radius: 1.2vw;
+            background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+
+            &.icon-device,
+            &.icon-doctor {
+              &::after {
+                content: '';
+                display: block;
+                width: 4.8vw;
+                height: 4.8vw;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                background-size: 4.8vw !important;
+              }
+            }
+
+            &.icon-device {
+              &::after {
+                background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png)
+                  no-repeat center;
+              }
+            }
+
+            &.icon-doctor {
+              &::after {
+                background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
+                  no-repeat center;
+              }
+            }
           }
-        }
 
-        &.icon-doctor {
-          &::after {
-            background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png)
-              no-repeat center;
+          .text {
+            font-size: 2.4vw;
+            color: #f3920d;
+            margin-top: 1.2vw;
           }
         }
       }
 
-      .text {
-        font-size: 2.4vw;
-        color: #f3920d;
-        margin-top: 1.2vw;
-      }
-    }
-  }
+      .list {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
 
-  .list {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .section {
-      width: 93.6vw;
-      height: 26vw;
-      background-color: #f3f5f6;
-      border-radius: 4px;
-      box-sizing: border-box;
-      padding: 3.2vw;
-
-      .cover {
-        display: block;
-        width: 19.6vw;
-        height: 19.6vw;
-      }
-      .info {
-        position: relative;
-        margin-left: 3.2vw;
-        .name {
-          width: 48vw;
-          font-size: 4vw;
-          color: #101010;
-          font-weight: bold;
-          margin-bottom: 4vw;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-        .mobile,
-        .address {
-          width: 66vw;
-          position: relative;
-          font-size: 3vw;
-          color: #404040;
-          padding-left: 5vw;
-          line-height: 5vw;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          &::after {
-            content: '';
+        .section {
+          width: 93.6vw;
+          height: 26vw;
+          background-color: #f3f5f6;
+          border-radius: 4px;
+          box-sizing: border-box;
+          padding: 3.2vw;
+
+          .cover {
             display: block;
-            width: 4vw;
-            height: 4vw;
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            background-size: 4vw 4vw;
-            background-repeat: no-repeat;
-          }
-        }
-        .mobile {
-          &::after {
-            background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+            width: 19.6vw;
+            height: 19.6vw;
           }
-        }
-        .address {
-          &::after {
-            background-image: url(~assets/theme-images/common/h5-icon-address.png);
-          }
-        }
+          .info {
+            position: relative;
+            margin-left: 3.2vw;
+            .name {
+              width: 48vw;
+              font-size: 4vw;
+              color: #101010;
+              font-weight: bold;
+              margin-bottom: 4vw;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+            .mobile,
+            .address {
+              width: 66vw;
+              position: relative;
+              font-size: 3vw;
+              color: #404040;
+              padding-left: 5vw;
+              line-height: 5vw;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              &::after {
+                content: '';
+                display: block;
+                width: 4vw;
+                height: 4vw;
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                background-size: 4vw 4vw;
+                background-repeat: no-repeat;
+              }
+            }
+            .mobile {
+              &::after {
+                background-image: url(~assets/theme-images/common/h5-icon-mobile.png);
+              }
+            }
+            .address {
+              &::after {
+                background-image: url(~assets/theme-images/common/h5-icon-address.png);
+              }
+            }
 
-        .distance {
-          position: absolute;
-          font-size: 3vw;
-          color: #404040;
-          top: 0.8vw;
-          right: 0;
+            .distance {
+              position: absolute;
+              font-size: 3vw;
+              color: #404040;
+              top: 0.8vw;
+              right: 0;
+            }
+          }
         }
       }
     }

pages/_template/ross/record/club/detail.vue

@@ -201,101 +201,97 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-club');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 600px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
-
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 18px;
-      margin: 24px 0;
 
-      .status {
-        .success {
-          color: #f3920d !important;
-        }
-        .warning {
-          color: #1890ff !important;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-club');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
         }
-        .danger {
-          color: #f94b4b !important;
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-
-      .col {
-        &:first-child {
-          white-space: nowrap;
-          width: 170px;
-          color: #666;
-          text-align: right;
-          flex-shrink: 0;
-        }
-
-        &:last-child {
-          color: #282828;
+      .page-content {
+        width: 600px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
+
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
         }
-      }
-
-      .el-image {
-        width: 120px;
-        height: 120px;
-        margin-right: 12px;
-      }
-    }
 
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 18px;
+          margin: 24px 0;
+
+          .status {
+            .success {
+              color: #f3920d !important;
+            }
+            .warning {
+              color: #1890ff !important;
+            }
+            .danger {
+              color: #f94b4b !important;
+            }
+          }
 
-        cursor: pointer;
+          .col {
+            &:first-child {
+              white-space: nowrap;
+              width: 170px;
+              color: #666;
+              text-align: right;
+              flex-shrink: 0;
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .el-image {
+            width: 120px;
+            height: 120px;
+            margin-right: 12px;
           }
         }
 
-        &.search {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
+
+            cursor: pointer;
+
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+
+            &.search {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
       }
@@ -305,102 +301,98 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-club');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
 
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7.2vw;
-
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      margin-bottom: 8vw;
-      color: #282828;
-    }
-
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 3.4vw;
-      margin-bottom: 5.6vw;
-      flex-wrap: wrap;
-
-      .status {
-        .success {
-          color: #f3920d !important;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-club');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
         }
-        .warning {
-          color: #1890ff !important;
-        }
-        .danger {
-          color: #f94b4b !important;
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
 
-      .col {
-        &:first-child {
-          width: 17vw;
-          color: #666;
-          // text-align: right;
-
-          &.max-width {
-            width: 100% !important;
-            margin-bottom: 2.6vw;
-          }
-        }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7.2vw;
 
-        &:last-child {
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          margin-bottom: 8vw;
           color: #282828;
         }
-      }
-
-      .el-image {
-        width: 25.6vw;
-        height: 25.6vw;
-      }
-    }
 
-    .control {
-      margin-top: 22.8vw;
-      .button {
-        width: 100%;
-        height: 12vw;
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 3.4vw;
+          margin-bottom: 5.6vw;
+          flex-wrap: wrap;
+
+          .status {
+            .success {
+              color: #f3920d !important;
+            }
+            .warning {
+              color: #1890ff !important;
+            }
+            .danger {
+              color: #f94b4b !important;
+            }
+          }
 
-        cursor: pointer;
+          .col {
+            &:first-child {
+              width: 17vw;
+              color: #666;
+              // text-align: right;
+
+              &.max-width {
+                width: 100% !important;
+                margin-bottom: 2.6vw;
+              }
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+          .el-image {
+            width: 25.6vw;
+            height: 25.6vw;
           }
         }
 
-        &.search {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+        .control {
+          margin-top: 22.8vw;
+          .button {
+            width: 100%;
+            height: 12vw;
+
+            cursor: pointer;
+
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
+
+            &.search {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
       }

pages/_template/ross/record/club/edit.vue

@@ -87,92 +87,90 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-club');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 700px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-club');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
+      }
+      .page-content {
+        width: 700px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
+        }
 
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
-    .normal-row {
-      position: relative;
-      .label {
-        font-size: 14px;
-        color: #606266;
+        .normal-row {
+          position: relative;
+          .label {
+            font-size: 14px;
+            color: #606266;
 
-        span {
-          color: #b2b2b2;
-        }
-      }
-      .postion-btn {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-        width: 62px;
-        height: 28px;
-        line-height: 28px;
-        font-size: 14px;
-        color: #fff;
-        background: #1890ff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 4px;
+            span {
+              color: #b2b2b2;
+            }
+          }
+          .postion-btn {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 62px;
+            height: 28px;
+            line-height: 28px;
+            font-size: 14px;
+            color: #fff;
+            background: #1890ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: 4px;
 
-        &::before {
-          content: '';
-          display: inline-block;
-          width: 16px;
-          height: 16px;
-          background: url(~assets/theme-images/common/icon-position.png)
-            no-repeat center;
-          background-size: 16px 16px;
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 16px;
+              height: 16px;
+              background: url(~assets/theme-images/common/icon-position.png)
+                no-repeat center;
+              background-size: 16px 16px;
+            }
+          }
         }
       }
     }
@@ -187,91 +185,89 @@ export default {
   }
 
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-club');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
 
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-club');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
 
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      margin-bottom: 8vw;
-      color: #282828;
-    }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-    .control {
-      .button {
-        width: 100%;
-        height: 12vw;
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          margin-bottom: 8vw;
+          color: #282828;
+        }
 
-        cursor: pointer;
+        .control {
+          .button {
+            width: 100%;
+            height: 12vw;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            cursor: pointer;
+
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
-    .normal-row {
-      position: relative;
-      .label {
-        font-size: 14px;
-        color: #606266;
+        .normal-row {
+          position: relative;
+          .label {
+            font-size: 14px;
+            color: #606266;
 
-        span {
-          color: #b2b2b2;
-          font-size: 2.6vw;
-        }
-      }
-      .postion-btn {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-        width: 14vw;
-        height: 6.8vw;
-        line-height: 6.8vw;
-        font-size: 3.2vw;
-        color: #fff;
-        background: #1890ff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 0.4vw;
+            span {
+              color: #b2b2b2;
+              font-size: 2.6vw;
+            }
+          }
+          .postion-btn {
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 14vw;
+            height: 6.8vw;
+            line-height: 6.8vw;
+            font-size: 3.2vw;
+            color: #fff;
+            background: #1890ff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border-radius: 0.4vw;
 
-        &::before {
-          content: '';
-          display: inline-block;
-          width: 3.58vw;
-          height: 3.58vw;
-          background: url(~assets/theme-images/common/icon-position.png)
-            no-repeat center;
-          background-size: 3.58vw;
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 3.58vw;
+              height: 3.58vw;
+              background: url(~assets/theme-images/common/icon-position.png)
+                no-repeat center;
+              background-size: 3.58vw;
+            }
+          }
         }
       }
     }

pages/_template/ross/record/device/detail.vue

@@ -161,103 +161,101 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-device');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 600px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
 
-    .params-list {
-      .param {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-column-gap: 8px;
-        grid-row-gap: 16px;
-        .param-name {
-          text-align: right;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-device');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
         }
       }
-    }
-
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 18px;
-      margin: 24px 0;
+      .page-content {
+        width: 600px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-      .col {
-        &.success {
-          color: #f3920d !important;
-        }
-        &.warning {
-          color: #1890ff !important;
-        }
-        &.danger {
-          color: #f94b4b !important;
-        }
-        &:first-child {
-          width: 100px;
-          color: #666;
-          text-align: right;
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
         }
 
-        &:last-child {
-          color: #282828;
+        .params-list {
+          .param {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 8px;
+            grid-row-gap: 16px;
+            .param-name {
+              text-align: right;
+            }
+          }
         }
-      }
 
-      .el-image {
-        width: 120px;
-        height: 120px;
-        margin-right: 12px;
-        box-sizing: border-box;
-        border-radius: 4px;
-      }
-    }
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 18px;
+          margin: 24px 0;
+
+          .col {
+            &.success {
+              color: #f3920d !important;
+            }
+            &.warning {
+              color: #1890ff !important;
+            }
+            &.danger {
+              color: #f94b4b !important;
+            }
+            &:first-child {
+              width: 100px;
+              color: #666;
+              text-align: right;
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
+
+          .el-image {
+            width: 120px;
+            height: 120px;
+            margin-right: 12px;
+            box-sizing: border-box;
+            border-radius: 4px;
+          }
+        }
 
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
           }
         }
       }
@@ -267,100 +265,98 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-device');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
 
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      color: #282828;
-      margin-bottom: 4.6vw;
-    }
-
-    .params-list {
-      .param {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-column-gap: 1.2vw;
-        grid-row-gap: 2.4vw;
-        .param-name {
-          text-align: right;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-device');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
         }
       }
-    }
 
-    .row {
-      display: flex;
-      justify-content: flex-start;
-      align-items: flex-start;
-      font-size: 3.4vw;
-      margin: 5.6vw 0;
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-      .col {
-        &.success {
-          color: #f3920d !important;
-        }
-        &.warning {
-          color: #1890ff !important;
-        }
-        &.danger {
-          color: #f94b4b !important;
-        }
-        &:first-child {
-          width: 19vw;
-          color: #666;
-          white-space: nowrap;
-          flex-shrink: 0;
-          // text-align: right;
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          color: #282828;
+          margin-bottom: 4.6vw;
         }
 
-        &:last-child {
-          color: #282828;
+        .params-list {
+          .param {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 1.2vw;
+            grid-row-gap: 2.4vw;
+            .param-name {
+              text-align: right;
+            }
+          }
         }
-      }
 
-      .el-image {
-        width: 26vw;
-        height: 26vw;
-        border-radius: 1vw;
-      }
-    }
+        .row {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 3.4vw;
+          margin: 5.6vw 0;
+
+          .col {
+            &.success {
+              color: #f3920d !important;
+            }
+            &.warning {
+              color: #1890ff !important;
+            }
+            &.danger {
+              color: #f94b4b !important;
+            }
+            &:first-child {
+              width: 19vw;
+              color: #666;
+              white-space: nowrap;
+              flex-shrink: 0;
+              // text-align: right;
+            }
+
+            &:last-child {
+              color: #282828;
+            }
+          }
+
+          .el-image {
+            width: 26vw;
+            height: 26vw;
+            border-radius: 1vw;
+          }
+        }
 
-    .control {
-      margin-top: 22.8vw;
-      .button {
-        width: 100%;
-        height: 12vw;
-        cursor: pointer;
+        .control {
+          margin-top: 22.8vw;
+          .button {
+            width: 100%;
+            height: 12vw;
+            cursor: pointer;
 
-        &.edit {
-          @include themify($themes) {
-            border: 1px solid themed('color');
-            color: themed('color');
+            &.edit {
+              border: 1px solid fetch('color');
+              color: fetch('color');
+            }
           }
         }
       }

pages/_template/ross/record/device/edit.vue

@@ -89,90 +89,86 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-device');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 700px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-device');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 30px;
+          color: #fff;
+        }
+      }
+      .page-content {
+        width: 700px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
+        }
 
-    .el-select {
-      width: 100%;
-    }
-    .control {
-      margin-top: 62px;
-      .button {
-        width: 295px;
-        height: 50px;
+        .el-select {
+          width: 100%;
+        }
+        .control {
+          margin-top: 62px;
+          .button {
+            width: 295px;
+            height: 50px;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
 
-    .device-param-list {
-      position: relative;
-      .add-param {
-        position: absolute;
-        cursor: pointer;
-        top: -40px;
-        right: 0;
-        text-decoration: underline;
-        font-size: 14px;
-        @include themify($themes) {
-          color: themed('color');
-        }
-      }
+        .device-param-list {
+          position: relative;
+          .add-param {
+            position: absolute;
+            cursor: pointer;
+            top: -40px;
+            right: 0;
+            text-decoration: underline;
+            font-size: 14px;
+            color: fetch('color');
+          }
 
-      .param {
-        position: relative;
-        .remove {
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 20px;
-          height: 20px;
-          background: #f94b4b;
-          border-radius: 2px;
-          cursor: pointer;
-          color: #fff;
-          font-size: 14px;
-          text-align: center;
-          line-height: 20px;
+          .param {
+            position: relative;
+            .remove {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 20px;
+              height: 20px;
+              background: #f94b4b;
+              border-radius: 2px;
+              cursor: pointer;
+              color: #fff;
+              font-size: 14px;
+              text-align: center;
+              line-height: 20px;
+            }
+          }
         }
       }
     }
@@ -181,85 +177,81 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-device');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-device');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
+        .name {
+          font-size: 4vw;
+          color: #fff;
+        }
+      }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      color: #282828;
-      margin-bottom: 4.6vw;
-    }
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
+          color: #282828;
+          margin-bottom: 4.6vw;
+        }
 
-    .el-select {
-      width: 100%;
-    }
-    .control {
-      .button {
-        width: 100%;
-        height: 12vw;
+        .el-select {
+          width: 100%;
+        }
+        .control {
+          .button {
+            width: 100%;
+            height: 12vw;
 
-        cursor: pointer;
+            cursor: pointer;
 
-        &.submit {
-          @include themify($themes) {
-            background-color: themed('color');
-            color: #fff;
+            &.submit {
+              background-color: fetch('color');
+              color: #fff;
+            }
           }
         }
-      }
-    }
 
-    .device-param-list {
-      position: relative;
-      .add-param {
-        position: absolute;
-        cursor: pointer;
-        top: -40px;
-        right: 0;
-        font-size: 3.4vw;
-        @include themify($themes) {
-          color: themed('color');
-        }
-      }
+        .device-param-list {
+          position: relative;
+          .add-param {
+            position: absolute;
+            cursor: pointer;
+            top: -40px;
+            right: 0;
+            font-size: 3.4vw;
+            color: fetch('color');
+          }
 
-      .param {
-        position: relative;
-        .remove {
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 4.4vw;
-          height: 4.4vw;
-          background: #f94b4b;
-          border-radius: 0.2vw;
-          cursor: pointer;
-          color: #fff;
-          font-size: 3.4vw;
-          text-align: center;
-          line-height: 4.4vw;
+          .param {
+            position: relative;
+            .remove {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 4.4vw;
+              height: 4.4vw;
+              background: #f94b4b;
+              border-radius: 0.2vw;
+              cursor: pointer;
+              color: #fff;
+              font-size: 3.4vw;
+              text-align: center;
+              line-height: 4.4vw;
+            }
+          }
         }
       }
     }

pages/_template/ross/record/device/index.vue

@@ -136,92 +136,92 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 360px;
-    @include themify($themes) {
-      background: themed('pc-banner-record-device');
-      background-size: auto 360px;
-    }
-    .logo {
-      display: block;
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 30px;
-      color: #fff;
-    }
-  }
-  .page-content {
-    width: 700px;
-    margin: 0 auto;
-    overflow: hidden;
-    min-height: calc(100vh - 80px - 80px - 360px);
-    box-sizing: border-box;
-    padding-bottom: 40px;
-
-    .page-title {
-      font-size: 24px;
-      font-weight: bold;
-      text-align: center;
-      padding: 40px 0;
-    }
-
-    .device-list {
-      .device {
-        position: relative;
-        padding: 36px 0 12px;
-        border-bottom: 1px solid #c2c2c2;
-        cursor: pointer;
 
+      .page-top {
+        height: 360px;
+        background: fetch('pc-banner-record-device');
+        background-size: auto 360px;
+        .logo {
+          display: block;
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: #fff;
+        }
         .name {
-          margin-bottom: 8px;
+          font-size: 30px;
+          color: #fff;
         }
+      }
+      .page-content {
+        width: 700px;
+        margin: 0 auto;
+        overflow: hidden;
+        min-height: calc(100vh - 80px - 80px - 360px);
+        box-sizing: border-box;
+        padding-bottom: 40px;
 
-        .label {
-          font-size: 18px;
-          color: #666;
+        .page-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          padding: 40px 0;
         }
 
-        .content {
-          font-size: 18px;
-          color: #282828;
-        }
-        .status {
-          &.success {
-            .content {
-              color: #f3920d;
+        .device-list {
+          .device {
+            position: relative;
+            padding: 36px 0 12px;
+            border-bottom: 1px solid #c2c2c2;
+            cursor: pointer;
+
+            .name {
+              margin-bottom: 8px;
             }
-          }
-          &.warning {
-            .content {
-              color: #1890ff;
+
+            .label {
+              font-size: 18px;
+              color: #666;
             }
-          }
-          &.danger {
+
             .content {
-              color: #f94b4b;
+              font-size: 18px;
+              color: #282828;
+            }
+            .status {
+              &.success {
+                .content {
+                  color: #f3920d;
+                }
+              }
+              &.warning {
+                .content {
+                  color: #1890ff;
+                }
+              }
+              &.danger {
+                .content {
+                  color: #f94b4b;
+                }
+              }
             }
-          }
-        }
 
-        &::after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          display: block;
-          width: 20px;
-          height: 20px;
-          background: url(~assets/theme-images/common/pc-icon-detail-more.png)
-            no-repeat center;
-          background-size: 18px;
+            &::after {
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              display: block;
+              width: 20px;
+              height: 20px;
+              background: url(~assets/theme-images/common/pc-icon-detail-more.png)
+                no-repeat center;
+              background-size: 18px;
+            }
+          }
         }
       }
     }
@@ -230,90 +230,90 @@ export default {
 
 @media screen and (max-width: 768px) {
   .page {
-    background: #fff;
-  }
-
-  .page-top {
-    height: 46vw;
-    @include themify($themes) {
-      background: themed('h5-banner-record-device');
-      background-size: auto 46vw;
-    }
-    .logo {
-      display: block;
-      width: 14.8vw;
-      height: 14.8vw;
-      border-radius: 50%;
+    @include useTheme() {
       background: #fff;
-    }
-    .name {
-      font-size: 4vw;
-      color: #fff;
-    }
-  }
-
-  .page-content {
-    box-sizing: border-box;
-    padding: 8vw 7vw;
-
-    .page-title {
-      font-size: 4.2vw;
-      font-weight: bold;
-      text-align: center;
-      color: #282828;
-      margin-bottom: 4.6vw;
-    }
-
-    .device-list {
-      .device {
-        position: relative;
-        padding: 2.6vw 0;
-        border-bottom: 0.1vw solid #c2c2c2;
-        cursor: pointer;
 
+      .page-top {
+        height: 46vw;
+        background: fetch('h5-banner-record-device');
+        background-size: auto 46vw;
+        .logo {
+          display: block;
+          width: 14.8vw;
+          height: 14.8vw;
+          border-radius: 50%;
+          background: #fff;
+        }
         .name {
-          margin-bottom: 2.2vw;
+          font-size: 4vw;
+          color: #fff;
         }
+      }
 
-        .label {
-          font-size: 3.4vw;
-          color: #666;
-        }
+      .page-content {
+        box-sizing: border-box;
+        padding: 8vw 7vw;
 
-        .content {
-          font-size: 3.4vw;
+        .page-title {
+          font-size: 4.2vw;
+          font-weight: bold;
+          text-align: center;
           color: #282828;
+          margin-bottom: 4.6vw;
         }
-        .status {
-          &.success {
-            .content {
-              color: #f3920d;
+
+        .device-list {
+          .device {
+            position: relative;
+            padding: 2.6vw 0;
+            border-bottom: 0.1vw solid #c2c2c2;
+            cursor: pointer;
+
+            .name {
+              margin-bottom: 2.2vw;
             }
-          }
-          &.warning {
-            .content {
-              color: #1890ff;
+
+            .label {
+              font-size: 3.4vw;
+              color: #666;
             }
-          }
-          &.danger {
+
             .content {
-              color: #f94b4b;
+              font-size: 3.4vw;
+              color: #282828;
+            }
+            .status {
+              &.success {
+                .content {
+                  color: #f3920d;
+                }
+              }
+              &.warning {
+                .content {
+                  color: #1890ff;
+                }
+              }
+              &.danger {
+                .content {
+                  color: #f94b4b;
+                }
+              }
             }
-          }
-        }
 
-        &::after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          display: block;
-          width: 20px;
-          height: 20px;
-          background: url(~assets/theme-images/common/h5-icon-detail-more.png)
-            no-repeat center;
-          background-size: 18px;
+            &::after {
+              content: '';
+              position: absolute;
+              right: 0;
+              top: 50%;
+              transform: translateY(-50%);
+              display: block;
+              width: 20px;
+              height: 20px;
+              background: url(~assets/theme-images/common/h5-icon-detail-more.png)
+                no-repeat center;
+              background-size: 18px;
+            }
+          }
         }
       }
     }

pages/_template/ross/record/message.vue

@@ -34,81 +34,84 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 768px) {
   .page {
-    min-height: calc(100vh - 80px - 80px);
-    background: #fff;
-  }
-  .page-content {
-    width: 432px;
-    padding-top: 140px;
+    @include useTheme() {
+      min-height: calc(100vh - 80px - 80px);
+      background: #fff;
 
-    .icon-submit-succsss {
-      width: 64px;
-      height: 64px;
-      background: url(~assets/theme-images/common/pc-icon-submit-success.png)
-        no-repeat center;
-      background-size: 64px;
-    }
+      .page-content {
+        width: 432px;
+        padding-top: 140px;
 
-    .tip {
-      font-size: 24px;
-      font-weight: bold;
-      color: #1890ff;
-    }
-    .label {
-      font-size: 18px;
-      color: #282828;
-      line-height: 1.6;
-    }
-    .record-btn {
-      width: 98px;
-      height: 36px;
-      color: #fff;
-      font-size: 14px;
-      text-align: center;
-      line-height: 36px;
-      border-radius: 4px;
-      cursor: pointer;
-      @include themify($themes) {
-        background: themed('color');
+        .icon-submit-succsss {
+          width: 64px;
+          height: 64px;
+          background: url(~assets/theme-images/common/pc-icon-submit-success.png)
+            no-repeat center;
+          background-size: 64px;
+        }
+
+        .tip {
+          font-size: 24px;
+          font-weight: bold;
+          color: #1890ff;
+        }
+        .label {
+          font-size: 18px;
+          color: #282828;
+          line-height: 1.6;
+        }
+        .record-btn {
+          width: 98px;
+          height: 36px;
+          color: #fff;
+          font-size: 14px;
+          text-align: center;
+          line-height: 36px;
+          border-radius: 4px;
+          cursor: pointer;
+          background: fetch('color');
+        }
       }
     }
   }
 }
 
 @media screen and (max-width: 768px) {
-  .page-content {
-    padding: 0 9.2vw;
-    padding-top: 25.2vw;
+  .page {
+    @include useTheme() {
+      .page-content {
+        padding: 0 9.2vw;
+        padding-top: 25.2vw;
 
-    .icon-submit-succsss {
-      width: 12vw;
-      height: 12vw;
-      background: url(~assets/theme-images/common/h5-icon-submit-success.png)
-        no-repeat center;
-      background-size: 12vw;
-    }
+        .icon-submit-succsss {
+          width: 12vw;
+          height: 12vw;
+          background: url(~assets/theme-images/common/h5-icon-submit-success.png)
+            no-repeat center;
+          background-size: 12vw;
+        }
 
-    .tip {
-      font-size: 4.2vw;
-      font-weight: bold;
-      color: #1890ff;
-    }
-    .label {
-      font-size: 3.4vw;
-      color: #282828;
-      line-height: 1.6;
-    }
-    .record-btn {
-      width: 36vw;
-      height: 8.8vw;
-      color: #fff;
-      font-size: 3.2vw;
-      text-align: center;
-      line-height: 8.8vw;
-      border-radius: 0.4vw;
-      cursor: pointer;
-      @include themify($themes) {
-        background: themed('color');
+        .tip {
+          font-size: 4.2vw;
+          font-weight: bold;
+          color: #1890ff;
+        }
+        .label {
+          font-size: 3.4vw;
+          color: #282828;
+          line-height: 1.6;
+        }
+        .record-btn {
+          width: 36vw;
+          height: 8.8vw;
+          color: #fff;
+          font-size: 3.2vw;
+          text-align: center;
+          line-height: 8.8vw;
+          border-radius: 0.4vw;
+          cursor: pointer;
+          background: fetch('color');
+        }
       }
     }
   }