新增模板主题-手动配置

.env.development

@@ -2,19 +2,19 @@
 EVN = 'development'
 
 # 网站地址
-LOCALHOSE = 'https://zp.caimei365.com'
+LOCALHOSE = 'https://zp-b.caimei365.com'
 # LOCALHOSE = 'http://192.168.2.81:8888'
 # LOCALHOSE = 'http://192.168.1.102:8888'
 
 # 接口api地址
-BASE_URL = 'https://zplma.caimei365.com'
+BASE_URL = 'https://zplma-b.caimei365.com'
 # BASE_URL = 'http://192.168.2.68:8012'
 
 # 静态资源文件地址
 STATIC_URL = 'https://static.caimei365.com/www/authentic'
 
 # 采美网
-CIMEI_LOCAL = 'https://www.caimei365.com'
+CIMEI_LOCAL = 'https://www-b.caimei365.com'
 
 # 项目运行地址
 HOST = '192.168.2.92'

components/LdmLogin/index.vue

@@ -193,7 +193,9 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           font-size: 16px;
-          color: #a62645;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
         }
       }
@@ -265,7 +267,9 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           font-size: 3.2vw;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
         }
       }

components/SimpleLogin/index.vue

@@ -14,7 +14,7 @@
                 maxlength="11"
               />
             </div>
-            <div class="form-item mb-4 code">
+            <div class="form-item mb-4 code" v-if="formType !== 'login'">
               <input
                 type="text"
                 placeholder="验证码"
@@ -24,7 +24,29 @@
               />
               <span class="send" @click="onSend">{{ sendCodeBtnText }}</span>
             </div>
-            <div class="submit" @click="onSubmit">登录</div>
+            <div class="form-item mb-4">
+              <input
+                type="text"
+                placeholder="密码"
+                v-model="formData.password"
+                maxlength="11"
+              />
+            </div>
+            <div class="form-item mb-4" v-if="formType === 'register'">
+              <input
+                type="text"
+                placeholder="确认密码"
+                v-model="formData.confirmPwd"
+              />
+            </div>
+            <div class="submit" @click="onSubmit">{{ submitText }}</div>
+            <div
+              class="flex justify-between control mt-2"
+              v-if="formType === 'login'"
+            >
+              <span class="forget">忘记密码</span>
+              <span class="regist">立即注册</span>
+            </div>
           </div>
         </div>
       </div>
@@ -37,14 +59,23 @@ import { mapGetters } from 'vuex'
 import { isMobile } from '@/utils/validator'
 export default {
   name: 'simple-login',
+  props: {
+    type: {
+      type: String,
+      default: 'login',
+    },
+  },
   data() {
     return {
+      formType: 'login',
       show: false,
       sendStatus: 0,
       formData: {
         authUserId: '',
         mobile: '',
         verifyCode: '',
+        password: '',
+        confirmPwd: '',
       },
       timer: null,
     }
@@ -56,11 +87,28 @@ export default {
         ? '发送验证码'
         : `再次发送${this.sendStatus}s`
     },
+    submitText() {
+      return this.formType === 'login'
+        ? '登录'
+        : this.formType === 'forget'
+        ? '确定'
+        : '提交'
+    },
+  },
+  created() {
+    this.formType = this.type
   },
   watch: {
     loginVisiable() {
       this.show = this.loginVisiable
     },
+    type: {
+      handler: function (nval) {
+        this.formType = nval
+        console.log(nval)
+      },
+      immediate: true,
+    },
   },
   methods: {
     async onSubmit() {
@@ -183,14 +231,39 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           font-size: 16px;
-          color: #bc1724;
           cursor: pointer;
+          @include themify($themes) {
+            color: themed('color');
+          }
         }
       }
+
+      .control {
+        font-size: 14px;
+
+        .forget,
+        .regist {
+          cursor: pointer;
+        }
+        .forget {
+          color: #666;
+
+          &:hover {
+            @include themify($themes) {
+              color: themed('color');
+            }
+          }
+        }
+        .regist {
+          @include themify($themes) {
+            color: themed('color');
+          }
+        }
+      }
+
       .submit {
         width: 326px;
         height: 46px;
-        background: #bc1724;
         font-size: 16px;
         color: #fff;
         text-align: center;
@@ -198,8 +271,14 @@ export default {
         transition: all 0.4s;
         cursor: pointer;
 
+        @include themify($themes) {
+          background: themed('color');
+        }
+
         &:hover {
-          background-color: #960915;
+          @include themify($themes) {
+            background: themed('hover-color');
+          }
         }
       }
     }
@@ -253,14 +332,18 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           font-size: 3.2vw;
-          color: #bc1724;
           cursor: pointer;
+          @include themify($themes) {
+            color: themed('color');
+          }
         }
       }
       .submit {
         width: 62vw;
         height: 8.8vw;
-        background: #bc1724;
+        @include themify($themes) {
+          background: themed('color');
+        }
         font-size: 3.2vw;
         color: #fff;
         text-align: center;

components/SimplePagination/index.vue

@@ -90,11 +90,16 @@ export default {
           .van-pagination__item {
             margin-left: 4px;
             margin-right: 4px;
-            color: #bc1724;
+
+            @include themify($themes) {
+              color: themed('color');
+            }
 
             &:active {
               color: #fff;
-              background-color: #bc1724;
+              @include themify($themes) {
+                background-color: themed('color');
+              }
             }
           }
 
@@ -107,12 +112,16 @@ export default {
             }
 
             &:hover {
-              color: #bc1724;
+              @include themify($themes) {
+                color: themed('color');
+              }
             }
           }
 
           .van-pagination__item--active {
-            background-color: #bc1724 !important;
+            @include themify($themes) {
+              background-color: themed('color') !important;
+            }
             color: #fff;
           }
         }
@@ -134,7 +143,9 @@ export default {
 
           &:active {
             color: #fff;
-            background-color: #bc1724;
+            @include themify($themes) {
+              background-color: themed('color');
+            }
           }
         }
       }

components/SimpleTabs/index.vue

@@ -100,9 +100,13 @@ export default {
         }
 
         &.active {
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           &::after {
-            background-color: #bc1724;
+            @include themify($themes) {
+              background-color: themed('color');
+            }
           }
         }
       }
@@ -143,9 +147,13 @@ export default {
 
         &.active {
           font-size: 4.6vw;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           &::after {
-            background-color: #bc1724;
+            @include themify($themes) {
+              background-color: themed('color');
+            }
           }
         }
       }

layouts/app.vue

@@ -1,36 +1,47 @@
 <template>
-  <div class="layout" v-if="isMounted">
-    <div class="header">
-      <div class="navbar flex justify-between items-center">
-        <div class="logo flex items-center" @click="backHome">
-          <img
-            src="https://static.caimei365.com/www/authentic/h5/icon-logo.png"
-          />
-          <span>认证通</span>
-        </div>
-        <div class="user-info">
-          <template v-if="accessToken">
-            <span v-text="userInfo.mobile"></span>
-            <span class="underline logout" @click="logout">退出登录</span>
-          </template>
-          <template v-else>
-            <div
-              class="login pr-3 pl-3 border rounded-sm border-white leading-6"
-              @click="onLogin"
-            >
-              登录
-            </div>
-          </template>
+  <div :class="themeClass">
+    <div class="layout" v-if="isMounted">
+      <div class="header">
+        <div class="navbar flex justify-between items-center">
+          <div class="logo flex items-center" @click="backHome">
+            <img
+              src="https://static.caimei365.com/www/authentic/h5/icon-logo.png"
+            />
+            <span>认证通</span>
+          </div>
+          <div class="user-info">
+            <template v-if="accessToken">
+              <span v-text="userInfo.mobile"></span>
+              <span class="underline logout" @click="logout">退出登录</span>
+            </template>
+            <template v-else>
+              <div class="flex justify-center">
+                <div
+                  class="login pr-3 pl-3 rounded-sm border-white leading-6"
+                  @click="onLogin"
+                >
+                  登录
+                </div>
+                |
+                <div
+                  class="register pr-3 pl-3 rounded-sm border-white leading-6"
+                  @click="onRegister"
+                >
+                  注册
+                </div>
+              </div>
+            </template>
+          </div>
         </div>
       </div>
+      <div class="content">
+        <nuxt />
+      </div>
+      <div class="footer flex justify-center items-center">
+        - 由采美网提供技术支持 -
+      </div>
+      <SimpleLogin :type="formType"></SimpleLogin>
     </div>
-    <div class="content">
-      <nuxt />
-    </div>
-    <div class="footer flex justify-center items-center">
-      - 由采美网提供技术支持 -
-    </div>
-    <SimpleLogin></SimpleLogin>
   </div>
 </template>
 
@@ -47,7 +58,11 @@ export default {
       'appId',
       'accountType',
       'routePrefix',
+      'themeName',
     ]),
+    themeClass() {
+      return `theme-${this.themeName}`
+    },
   },
   head() {
     return {
@@ -57,6 +72,7 @@ export default {
   data() {
     return {
       isMounted: false,
+      formType: 'login',
     }
   },
   mounted() {
@@ -81,6 +97,11 @@ export default {
       // 保存用户AppId
       this.$store.commit('user/SET_AUTH_USER_ID', authUserId)
 
+      // 设置页面主题
+      if (authUserId === parseInt(62)) {
+        this.$store.commit('app/SET_PAGE_THEME', 'ross')
+      }
+
       // 获取用户信息
       let userInfo = this.$getStorage(routePrefix, 'userInfo')
       if (userInfo && userInfo.authUserId === authUserId) {
@@ -131,6 +152,13 @@ export default {
         }
         return toAuthorization(this.appId, payload)
       }
+      this.formType = 'login'
+      this.$store.commit('app/SHOW_LOGIN')
+    },
+
+    onRegister() {
+      this.formType = 'register'
+      console.log(this.formType)
       this.$store.commit('app/SHOW_LOGIN')
     },
 
@@ -170,6 +198,7 @@ export default {
   .layout {
     padding-top: 80px;
     user-select: none;
+
     .header {
       position: fixed;
       top: 0;
@@ -204,8 +233,15 @@ export default {
         font-size: 16px;
 
         .login,
+        .register,
         .logout {
           cursor: pointer;
+
+          &:hover {
+            @include themify($themes) {
+              color: themed('color');
+            }
+          }
         }
       }
     }

nuxt.config.js

@@ -39,8 +39,9 @@ export default {
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
+    '@nuxtjs/style-resources',
     // https://go.nuxtjs.dev/tailwindcss
-    '@nuxtjs/tailwindcss',
+    '@nuxtjs/tailwindcss'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
@@ -61,6 +62,9 @@ export default {
     filenames: {
       chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
     },
+    styleResources: {
+      scss: './themes/themeMixin.scss'
+    }
   },
 
   // 配置 Nuxt.js 应用是开发模式还是生产模式

package-lock.json

@@ -2120,6 +2120,17 @@
         "http-proxy-middleware": "^1.0.6"
       }
     },
+    "@nuxtjs/style-resources": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@nuxtjs/style-resources/-/style-resources-1.2.1.tgz",
+      "integrity": "sha512-sOp71gCBNuGK2jchybTtVab83yB7jnSr+hw6DAKDgAGX/jrMYUyxRc9tiFxe+8YDSnqghTgQrkEkqPsfS4D4sg==",
+      "dev": true,
+      "requires": {
+        "consola": "^2.15.3",
+        "glob-all": "^3.2.1",
+        "sass-resources-loader": "^2.2.4"
+      }
+    },
     "@nuxtjs/tailwindcss": {
       "version": "4.2.1",
       "resolved": "https://registry.npmmirror.com/@nuxtjs/tailwindcss/-/tailwindcss-4.2.1.tgz",
@@ -6031,6 +6042,58 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-all": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/glob-all/-/glob-all-3.3.0.tgz",
+      "integrity": "sha512-30gCh9beSb+YSAh0vsoIlBRm4bSlyMa+5nayax1EJhjwYrCohX0aDxcxvWVe3heOrJikbHgRs75Af6kPLcumew==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "dev": true,
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -12040,6 +12103,75 @@
         }
       }
     },
+    "sass-resources-loader": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmmirror.com/sass-resources-loader/-/sass-resources-loader-2.2.5.tgz",
+      "integrity": "sha512-po8rfETH9cOQACWxubT/1CCu77KjxwRtCDm6QAXZH99aUHBydwSoxdIjC40SGp/dcS/FkSNJl0j1VEojGZqlvQ==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.1.0",
+        "glob": "^7.1.6",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "async": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmmirror.com/async/-/async-3.2.4.tgz",
+          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",

package.json

@@ -30,6 +30,7 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
+    "@nuxtjs/style-resources": "^1.2.1",
     "@nuxtjs/tailwindcss": "^4.2.1",
     "cross-env": "^7.0.3",
     "eslint-config-prettier": "^8.3.0",

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

@@ -264,11 +264,13 @@ export default {
         align-items: center;
         width: 72px;
         height: 32px;
-        border: 1px solid #bc1724;
         border-radius: 4px;
         background-color: #ffe6e8;
         font-size: 16px;
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+          border: 1px solid themed('color');
+        }
         cursor: pointer;
 
         &::after {
@@ -320,10 +322,12 @@ export default {
           align-items: center;
           width: 80px;
           height: 32px;
-          background: #bc1724;
           border-radius: 4px;
           font-size: 14px;
           color: #ffffff;
+          @include themify($themes) {
+            background: themed('color');
+          }
         }
       }
     }
@@ -429,11 +433,13 @@ export default {
         align-items: center;
         width: 14.4vw;
         height: 6.4vw;
-        border: 0.1vw solid #bc1724;
         border-radius: 0.4vw;
         background-color: #ffe6e8;
         font-size: 3.2vw;
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+          border: 1px solid themed('color');
+        }
 
         &::after {
           content: '';
@@ -480,10 +486,12 @@ export default {
           align-items: center;
           width: 15.8vw;
           height: 6.4vw;
-          background: #bc1724;
           border-radius: 0.4vw;
           font-size: 3vw;
           color: #ffffff;
+          @include themify($themes) {
+            background: themed('color');
+          }
         }
       }
     }

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

@@ -251,8 +251,11 @@ export default {
   }
   .page-top {
     height: 420px;
-    background: url(https://static.caimei365.com/www/authentic/pc/bg-club.png);
-    background-size: auto 420px;
+    @include themify($themes) {
+      background: themed('banner-club-pc');
+      background-size: auto 420px;
+    }
+
     .logo {
       display: block;
       width: 120px;
@@ -293,7 +296,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 
@@ -390,8 +395,11 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(https://static.caimei365.com/www/authentic/h5/bg-club.png);
-    background-size: auto 46vw;
+    @include themify($themes) {
+      background: themed('banner-club-pc');
+      background-size: auto 46vw;
+    }
+
     .logo {
       display: block;
       width: 14.8vw;
@@ -424,7 +432,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 

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

@@ -129,8 +129,11 @@ export default {
   }
   .page-top {
     height: 420px;
-    background: url(https://static.caimei365.com/www/authentic/pc/bg-device.png);
-    background-size: auto 420px;
+    @include themify($themes) {
+      background: themed('banner-device-pc');
+      background-size: auto 420px;
+    }
+
     .logo {
       display: block;
       width: 120px;
@@ -164,7 +167,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 
@@ -215,8 +220,10 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(https://static.caimei365.com/www/authentic/h5/bg-device.png);
-    background-size: auto 46vw;
+    @include themify($themes) {
+      background: themed('banner-device-h5');
+      background-size: auto 46vw;
+    }
     .logo {
       display: block;
       width: 14.8vw;
@@ -243,7 +250,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 

pages/_template/app/approve/device/list.vue

@@ -153,8 +153,11 @@ export default {
   }
   .page-top {
     height: 420px;
-    background: url(https://static.caimei365.com/www/authentic/pc/bg-device.png);
-    background-size: auto 420px;
+    @include themify($themes) {
+      background: themed('banner-device-pc');
+      background-size: auto 420px;
+    }
+
     .logo {
       display: block;
       width: 120px;
@@ -188,7 +191,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 
@@ -256,8 +261,11 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(https://static.caimei365.com/www/authentic/h5/bg-club.png);
-    background-size: auto 46vw;
+    @include themify($themes) {
+      background: themed('banner-device-h5');
+      background-size: auto 46vw;
+    }
+
     .logo {
       display: block;
       width: 14.8vw;
@@ -284,7 +292,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 

pages/_template/app/approve/index.vue

@@ -75,8 +75,10 @@ export default {
   }
   .page-top {
     height: 360px;
-    background: url(https://static.caimei365.com/www/authentic/pc/bg-approve.png);
-    background-size: auto 360px;
+    @include themify($themes) {
+      background: themed('banner-approve-pc');
+      background-size: auto 360px;
+    }
     .logo {
       display: block;
       width: 120px;
@@ -115,7 +117,9 @@ export default {
       .line {
         width: 24px;
         height: 2px;
-        background-color: #bc1724;
+        @include themify($themes) {
+          background-color: themed('color');
+        }
       }
       .name {
         font-size: 20px;
@@ -139,8 +143,10 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(https://static.caimei365.com/www/authentic/h5/bg-approve.png);
-    background-size: auto 46vw;
+    @include themify($themes) {
+      background: themed('banner-approve-h5');
+      background-size: auto 46vw;
+    }
     .logo {
       display: block;
       width: 14.8vw;
@@ -167,7 +173,9 @@ export default {
       .line {
         width: 4.2vw;
         height: 0.3vw;
-        background-color: #bc1724;
+        @include themify($themes) {
+          background-color: themed('color');
+        }
       }
       .name {
         font-size: 4.2vw;

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

@@ -137,9 +137,11 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 420px;
-    background: url(https://static.caimei365.com/www/authentic/pc/bg-doctor.png)
-      no-repeat center;
-    background-size: auto 420px;
+    @include themify($themes) {
+      background: themed('banner-personnel-operate-pc') no-repeat center;
+      background-size: auto 420px;
+    }
+
     .logo {
       display: block;
       width: 120px;
@@ -173,7 +175,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 
@@ -247,8 +251,11 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(https://static.caimei365.com/www/authentic/h5/bg-doctor.png);
-    background-size: auto 46vw;
+    @include themify($themes) {
+      background: themed('banner-personnel-operate-h5');
+      background-size: auto 46vw;
+    }
+
     .logo {
       display: block;
       width: 14.8vw;
@@ -279,7 +286,9 @@ export default {
       color: #404040;
 
       span {
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 

pages/_template/app/database/article.vue

@@ -185,7 +185,9 @@ export default {
 
       &:hover {
         .name {
-          color: #bc1724 !important;
+          @include themify($themes) {
+            color: themed('color') !important;
+          }
         }
       }
 

pages/_template/app/database/file.vue

@@ -196,7 +196,9 @@ export default {
 
       &:hover {
         .name {
-          color: #bc1724 !important;
+          @include themify($themes) {
+            color: themed('color') !important;
+          }
         }
       }
 
@@ -226,7 +228,9 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           font-size: 16px;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
 
           &::before {
@@ -314,7 +318,9 @@ export default {
           right: 0;
           bottom: 2.4vw;
           font-size: 3.2vw;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
           margin-top: 1.2vw;
         }

pages/_template/app/database/image.vue

@@ -224,7 +224,9 @@ export default {
           bottom: 0;
           right: 0;
           position: absolute;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           font-size: 16px;
           cursor: pointer;
         }
@@ -317,7 +319,9 @@ export default {
           bottom: 2.4vw;
           right: 0;
           position: absolute;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           font-size: 3.6vw;
           cursor: pointer;
         }

pages/_template/app/database/package.vue

@@ -206,7 +206,9 @@ export default {
           top: 50%;
           transform: translateY(-50%);
           font-size: 16px;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
           &::after {
             content: '>';
@@ -280,7 +282,9 @@ export default {
           bottom: 50%;
           transform: translateY(50%);
           font-size: 3.2vw;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
 
           &::after {

pages/_template/app/database/video.vue

@@ -221,7 +221,9 @@ export default {
         }
         .download {
           font-size: 16px;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
           margin-top: 8px;
         }
@@ -321,7 +323,9 @@ export default {
           right: 0;
           bottom: 2.4vw;
           font-size: 3.2vw;
-          color: #bc1724;
+          @include themify($themes) {
+            color: themed('color');
+          }
           cursor: pointer;
           margin-top: 1.2vw;
         }

pages/_template/app/feedback/index.vue

@@ -111,7 +111,9 @@ export default {
       margin-right: auto;
       border-radius: 4px;
       font-size: 16px;
-      background-color: #bc1724;
+      @include themify($themes) {
+        background-color: themed('color');
+      }
       color: #fff;
       transition: all 0.2s;
       cursor: pointer;
@@ -203,7 +205,9 @@ export default {
       height: 11.6vw;
       border-radius: 0.2vw;
       font-size: 4vw;
-      background-color: #bc1724;
+      @include themify($themes) {
+        background-color: themed('color');
+      }
       color: #fff;
 
       &.disabled {

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <img class="logo" :src="supplierInfo.logo" />
+      <div
+        class="name mt-2"
+        v-text="supplierInfo.shopName + '正品授权申请'"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app',
+  computed: {
+    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// pc 端
+@media screen and (min-width: 768px) {
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('banner-club-register');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+}
+</style>

pages/_template/app/index.vue

@@ -40,49 +40,61 @@ export default {
       list: [],
     }
   },
-  asyncData() {
-    return {
-      list: [
+  computed: {
+    ...mapGetters([
+      'supplierInfo',
+      'authUserId',
+      'appId',
+      'routePrefix',
+      'accountType',
+      'themeName',
+    ]),
+  },
+  created() {
+    this.initEntryItems()
+  },
+  beforeDestroy() {
+    this.$removeStorage(this.routePrefix, 'login_redicret')
+  },
+  methods: {
+    // 初始化入口图标
+    initEntryItems() {
+      this.list = [
         {
           id: 0,
+          name: '申请入口',
+          image: `${this.themeName}-icon-edit.png`,
+          hover: `icon-edit-active.png`,
+          path: '/form/club-register',
+          active: false,
+        },
+        {
+          id: 1,
           name: '授权认证',
-          image: 'icon-approve.png',
-          hover: 'icon-approve-active.png',
+          image: `${this.themeName}-icon-approve.png`,
+          hover: `icon-approve-active.png`,
           path: '/approve',
           active: false,
         },
         {
-          id: 1,
+          id: 2,
           name: '资料库',
-          image: 'icon-doc.png',
-          hover: 'icon-doc-active.png',
+          image: `${this.themeName}-icon-doc.png`,
+          hover: `icon-doc-active.png`,
           path: '/database/article',
           active: false,
         },
         {
-          id: 2,
+          id: 3,
           name: '意见反馈',
-          image: 'icon-feedback.png',
-          hover: 'icon-feedback-active.png',
+          image: `${this.themeName}-icon-feedback.png`,
+          hover: `icon-feedback-active.png`,
           path: '/feedback',
           active: false,
         },
-      ],
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'supplierInfo',
-      'authUserId',
-      'appId',
-      'routePrefix',
-      'accountType',
-    ]),
-  },
-  beforeDestroy() {
-    this.$removeStorage(this.routePrefix, 'login_redicret')
-  },
-  methods: {
+      ]
+    },
+
     toDetail(item) {
       const hasLogin = this.$store.getters.accessToken
       // 保存登录重定向路由
@@ -91,7 +103,7 @@ export default {
         'login_redicret',
         this.routePrefix + item.path
       )
-      if (item.id > 0 && !hasLogin) {
+      if (item.id > 1 && !hasLogin) {
         // 在微信浏览器中使用微信授权登录
         if (isWeChat() && this.appId && this.accountType === 2) {
           const payload = {
@@ -104,8 +116,14 @@ export default {
         this.$store.commit('app/SHOW_LOGIN')
         return
       }
-      const url = this.routePrefix + item.path
-      this.$router.push(url)
+      
+      if (item.id === 0) {
+        const url = this.routePrefix + item.path
+        this.$router.push(url)
+      } else {
+        const url = this.routePrefix + item.path
+        this.$router.push(url)
+      }
     },
     onMouseover(item) {
       const isPc = this.$store.getters.isPc
@@ -126,8 +144,10 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(https://static.caimei365.com/www/authentic/pc/bg-home.png);
-    background-size: auto 360px;
+    @include themify($themes) {
+      background: themed('banner-home-pc');
+      background-size: auto 360px;
+    }
     .logo {
       display: block;
       width: 120px;
@@ -153,7 +173,7 @@ export default {
     }
 
     .section {
-      width: 380px;
+      width: 284px;
       height: 260px;
       margin-left: auto;
       margin-right: auto;
@@ -162,7 +182,9 @@ export default {
       cursor: pointer;
 
       &:hover {
-        background-color: #bc1724;
+        @include themify($themes) {
+          background-color: themed('color');
+        }
         transform: translateY(-10px);
 
         .name {
@@ -187,8 +209,10 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(https://static.caimei365.com/www/authentic/h5/bg-home.png);
-    background-size: auto 46vw;
+    @include themify($themes) {
+      background: themed('banner-home-h5');
+      background-size: auto 46vw;
+    }
     .logo {
       display: block;
       width: 14.8vw;

pages/auth/index.vue

@@ -175,12 +175,16 @@ export default {
         top: 50%;
         transform: translateY(-50%);
         font-size: 3.4vw;
-        color: #bc1724;
+        @include themify($themes) {
+          color: themed('color');
+        }
       }
     }
 
     .submit {
-      background: #bc1724;
+      @include themify($themes) {
+        background: themed('color');
+      }
       font-size: 3.2vw;
       color: #fff;
       text-align: center;

store/app.js

@@ -4,6 +4,7 @@ const state = () => ({
   static: `${process.env.STATIC_URL}/pc`,
   loginVisiable: false,
   routePrefix: '', // 路由前缀
+  themeName: 'normal',
 })
 
 const mutations = {
@@ -27,6 +28,10 @@ const mutations = {
   SET_ROUTE_PREFIX(state, prefix) {
     state.routePrefix = prefix
   },
+  // 设置主题
+  SET_PAGE_THEME(state, name) {
+    state.themeName = name
+  },
 }
 
 const actions = {}

store/getters.js

@@ -5,6 +5,7 @@ export default {
   static: (state) => state.app.static,
   routePrefix: (state) => state.app.routePrefix,
   loginVisiable: (state) => state.app.loginVisiable,
+  themeName: (state) => state.app.themeName,
   // 用户相关
   userInfo: (state) => state.user.userInfo,
   authUserId: (state) => state.user.authUserId,

themes/themeMixin.scss

@@ -0,0 +1,28 @@
+@import './themeVariable.scss';
+
+$theme-map: null;
+@mixin themify($themes: $themes) {
+  @each $theme-name, $map in $themes {
+    // & 表示父级元素
+    // !global 表示覆盖原来的
+    .theme-#{$theme-name} & {
+      $theme-map: () !global;
+      // 循环合并键值对
+      @each $key, $value in $map {
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      // 表示包含 下面函数 themed()
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}

themes/themeVariable.scss

@@ -0,0 +1,84 @@
+@import './variable.scss';
+
+$themes: (
+  normal: (
+    color: $color-red,
+    hover-color: $color-red-hover,
+    // pc端
+    banner-home-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-home.png'),
+    banner-approve-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-approve.png'),
+    banner-club-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-club.png'),
+    banner-device-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-device.png'),
+    banner-personnel-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-approve.png'),
+    banner-personnel-operate-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-doctor.png'),
+    banner-database-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-doc.png'),
+    banner-feedback-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-doc.png'),
+    banner-club-register:
+      url('https://static.caimei365.com/www/authentic/pc/ross-bg-club-register.png'),
+    // 移动端
+    banner-home-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-home.png'),
+    banner-approve-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-approve.png'),
+    banner-club-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-club.png'),
+    banner-device-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-device.png'),
+    banner-personnel-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-approve.png'),
+    banner-personnel-operate-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-doctor.png'),
+    banner-database-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-doc.png'),
+    banner-feedback-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-doc.png'),
+  ),
+  ross: (
+    color: $color-yellow,
+    hover-color: $color-yellow-hover,
+    // pc端
+    banner-home-pc:
+      url('https://static.caimei365.com/www/authentic/pc/ross-bg-home.png'),
+    banner-approve-pc:
+      url('https://static.caimei365.com/www/authentic/pc/ross-bg-approve.png'),
+    banner-club-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-club.png'),
+    banner-device-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-device.png'),
+    banner-personnel-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-approve.png'),
+    banner-personnel-operate-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-doctor.png'),
+    banner-database-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-doc.png'),
+    banner-feedback-pc:
+      url('https://static.caimei365.com/www/authentic/pc/bg-doc.png'),
+    banner-club-register:
+      url('https://static.caimei365.com/www/authentic/pc/ross-bg-club-register.png'),
+    // 移动端
+    banner-home-h5:
+      url('https://static.caimei365.com/www/authentic/h5/ross-bg-home.png'),
+    banner-approve-h5:
+      url('https://static.caimei365.com/www/authentic/h5/ross-bg-approve.png'),
+    banner-club-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-club.png'),
+    banner-device-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-device.png'),
+    banner-personnel-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-approve.png'),
+    banner-personnel-operate-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-doctor.png'),
+    banner-database-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-doc.png'),
+    banner-feedback-h5:
+      url('https://static.caimei365.com/www/authentic/h5/bg-doc.png'),
+  ),
+);

themes/variable.scss

@@ -0,0 +1,4 @@
+$color-red: #bc1724;
+$color-red-hover: #960915;
+$color-yellow: #f3920d;
+$color-yellow-hover: #d68616;