ross界面图片修改

assets/themes/variables/normal.scss

@@ -6,9 +6,17 @@ $mormalTuple: (
   // pc端
   pc-banner-home: url(~/assets/theme-images/app/pc-banner-home.png),
   pc-banner-approve: url(~/assets/theme-images/app/pc-banner-approve.png),
+  pc-banner-club: url(~/assets/theme-images/app/pc-banner-club.png),
+  pc-banner-device: url(~/assets/theme-images/app/pc-banner-device.png),
+  pc-banner-doctor: url(~/assets/theme-images/app/pc-banner-doctor.png),
+  pc-banner-feedback: url(~/assets/theme-images/app/pc-banner-feedback.png),
+  pc-banner-doc: url(~/assets/theme-images/app/pc-banner-doc.png),
   pc-banner-register: url(~/assets/theme-images/app/pc-banner-home.png),
   pc-banner-record-club: url(~/assets/theme-images/app/pc-banner-home.png),
   pc-banner-record-device: url(~/assets/theme-images/app/pc-banner-home.png),
+  pc-entry-club-bg: url(~/assets/theme-images/app/pc-entry-club-bg.png),
+  pc-entry-device-bg: url(~/assets/theme-images/app/pc-entry-device-bg.png),
+  pc-entry-doctor-bg: url(~/assets/theme-images/app/pc-entry-doctor-bg.png),
   pc-icon-home-approve: url(~/assets/theme-images/app/pc-icon-home-approve.png),
   pc-icon-home-doc: url(~/assets/theme-images/app/pc-icon-home-doc.png),
   pc-icon-home-edit: url(~/assets/theme-images/app/pc-icon-home-edit.png),
@@ -21,9 +29,17 @@ $mormalTuple: (
   //  h5 端
   h5-banner-home: url(~/assets/theme-images/app/h5-banner-home.png),
   h5-banner-approve: url(~/assets/theme-images/app/h5-banner-approve.png),
+  h5-banner-club: url(~/assets/theme-images/app/h5-banner-club.png),
+  h5-banner-device: url(~/assets/theme-images/app/h5-banner-device.png),
+  h5-banner-doctor: url(~/assets/theme-images/app/h5-banner-doctor.png),
+  h5-banner-feedback: url(~/assets/theme-images/app/h5-banner-feedback.png),
+  h5-banner-doc: url(~/assets/theme-images/app/h5-banner-doc.png),
   h5-banner-register: url(~/assets/theme-images/app/h5-banner-home.png),
   h5-banner-record-club: url(~/assets/theme-images/app/pc-banner-home.png),
   h5-banner-record-device: url(~/assets/theme-images/app/pc-banner-home.png),
+  h5-entry-club-bg: url(~/assets/theme-images/app/h5-entry-club-bg.png),
+  h5-entry-device-bg: url(~/assets/theme-images/app/h5-entry-device-bg.png),
+  h5-entry-doctor-bg: url(~/assets/theme-images/app/h5-entry-doctor-bg.png),
   h5-icon-home-approve: url(~/assets/theme-images/app/h5-icon-home-approve.png),
   h5-icon-home-doc: url(~/assets/theme-images/app/h5-icon-home-doc.png),
   h5-icon-home-edit: url(~/assets/theme-images/app/h5-icon-home-edit.png),

assets/themes/variables/ross.scss

@@ -6,9 +6,17 @@ $rossTuple: (
   // pc端
   pc-banner-home: url(~/assets/theme-images/ross/pc-banner-home.png),
   pc-banner-approve: url(~/assets/theme-images/ross/pc-banner-approve.png),
+  pc-banner-club: url(~/assets/theme-images/ross/pc-banner-club.png),
+  pc-banner-device: url(~/assets/theme-images/ross/pc-banner-device.png),
+  pc-banner-doctor: url(~/assets/theme-images/ross/pc-banner-doctor.png),
+  pc-banner-feedback: url(~/assets/theme-images/ross/pc-banner-feedback.png),
+  pc-banner-doc: url(~/assets/theme-images/ross/pc-banner-doc.png),
   pc-banner-register: url(~/assets/theme-images/ross/pc-banner-register.png),
   pc-banner-record-club: url(~/assets/theme-images/ross/pc-banner-record.png),
   pc-banner-record-device: url(~/assets/theme-images/ross/pc-banner-record.png),
+  pc-entry-club-bg: url(~/assets/theme-images/ross/pc-entry-club-bg.png),
+  pc-entry-device-bg: url(~/assets/theme-images/ross/pc-entry-device-bg.png),
+  pc-entry-doctor-bg: url(~/assets/theme-images/ross/pc-entry-doctor-bg.png),
   pc-icon-home-approve: url(~/assets/theme-images/ross/pc-icon-home-approve.png),
   pc-icon-home-doc: url(~/assets/theme-images/ross/pc-icon-home-doc.png),
   pc-icon-home-edit: url(~/assets/theme-images/ross/pc-icon-home-edit.png),
@@ -17,13 +25,22 @@ $rossTuple: (
   pc-icon-address: url(~/assets/theme-images/ross/pc-icon-address.png),
   pc-icon-mobile: url(~/assets/theme-images/ross/pc-icon-mobile.png),
   pc-icon-navigation: url(~/assets/theme-images/ross/pc-icon-navigation.png),
-  pc-icon-feedback-submit: url(~/assets/theme-images/ross/pc-icon-feedback-submit.png),
+  pc-icon-feedback-submit:
+    url(~/assets/theme-images/ross/pc-icon-feedback-submit.png),
   //  h5 端
   h5-banner-home: url(~/assets/theme-images/ross/h5-banner-home.png),
   h5-banner-approve: url(~/assets/theme-images/ross/h5-banner-approve.png),
+  h5-banner-club: url(~/assets/theme-images/ross/h5-banner-club.png),
+  h5-banner-device: url(~/assets/theme-images/ross/h5-banner-device.png),
+  h5-banner-doctor: url(~/assets/theme-images/ross/h5-banner-doctor.png),
+  h5-banner-feedback: url(~/assets/theme-images/ross/h5-banner-feedback.png),
+  h5-banner-doc: url(~/assets/theme-images/ross/h5-banner-doc.png),
   h5-banner-register: url(~/assets/theme-images/ross/h5-banner-register.png),
   h5-banner-record-club: url(~/assets/theme-images/ross/pc-banner-record.png),
   h5-banner-record-device: url(~/assets/theme-images/ross/pc-banner-record.png),
+  h5-entry-club-bg: url(~/assets/theme-images/ross/h5-entry-club-bg.png),
+  h5-entry-device-bg: url(~/assets/theme-images/ross/h5-entry-device-bg.png),
+  h5-entry-doctor-bg: url(~/assets/theme-images/ross/h5-entry-doctor-bg.png),
   h5-icon-home-approve: url(~/assets/theme-images/ross/h5-icon-home-approve.png),
   h5-icon-home-doc: url(~/assets/theme-images/ross/h5-icon-home-doc.png),
   h5-icon-home-edit: url(~/assets/theme-images/ross/h5-icon-home-edit.png),
@@ -32,6 +49,6 @@ $rossTuple: (
   h5-icon-address: url(~/assets/theme-images/ross/h5-icon-address.png),
   h5-icon-mobile: url(~/assets/theme-images/ross/h5-icon-mobile.png),
   h5-icon-navigation: url(~/assets/theme-images/ross/h5-icon-navigation.png),
-  h5-icon-feedback-submit: url(~/assets/theme-images/ross/h5-icon-feedback-submit.png),
+  h5-icon-feedback-submit:
+    url(~/assets/theme-images/ross/h5-icon-feedback-submit.png),
 );
-  

components/SimpleLogin/index.vue

@@ -389,6 +389,7 @@ export default {
         line-height: 46px;
         transition: all 0.4s;
         cursor: pointer;
+        border-radius: 4px;
 
         @include themify($themes) {
           background: themed('color');
@@ -492,6 +493,7 @@ export default {
         text-align: center;
         line-height: 8.8vw;
         transition: all 0.4s;
+        border-radius: 4px;
 
         @include themify($themes) {
           background: themed('color');

layouts/app.vue

@@ -5,8 +5,11 @@
         <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"
+              src="~/assets/theme-images/ross/ross-logo-f.png"
+              v-if="themeName === 'ross'"
+              class="ross"
             />
+            <img src="~/assets/theme-images/common/icon-logo.png" v-else />
             <span>认证通</span>
           </div>
           <div class="user-info">
@@ -225,6 +228,13 @@ export default {
           display: block;
           width: 44px;
           height: 44px;
+
+          &.ross {
+            width: 85px;
+            height: 27px;
+            margin-right: 15px;
+            transform: translateY(-2px);
+          }
         }
         span {
           font-size: 24px;
@@ -288,6 +298,13 @@ export default {
           display: block;
           width: 8vw;
           height: 8vw;
+
+          &.ross {
+            width: 12.2vw;
+            height: 3.9vw;
+            margin-right: 1.9vw;
+            transform: translateY(-1vw);
+          }
         }
         span {
           font-size: 4vw;

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

@@ -251,7 +251,9 @@ export default {
   }
   .page-top {
     height: 420px;
-    background: url('~assets/theme-images/common/pc-banner-club.png');
+    @include themify($themes) {
+      background: themed('pc-banner-club');
+    }
     background-size: auto 420px;
 
     .logo {
@@ -393,7 +395,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url('~assets/theme-images/common/h5-banner-club.png');
+    @include themify($themes) {
+      background: themed('h5-banner-club');
+    }
     background-size: auto 46vw;
 
     .logo {

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

@@ -129,7 +129,9 @@ export default {
   }
   .page-top {
     height: 420px;
-    background: url('~assets/theme-images/common/pc-banner-device.png');
+    @include themify($themes) {
+      background: themed('pc-banner-device');
+    }
     background-size: auto 420px;
 
     .logo {
@@ -218,7 +220,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url('~assets/theme-images/common/h5-banner-device.png');
+    @include themify($themes) {
+      background: themed('h5-banner-device');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

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

@@ -153,7 +153,9 @@ export default {
   }
   .page-top {
     height: 420px;
-    background: url('~assets/theme-images/common/pc-banner-device.png');
+    @include themify($themes) {
+      background: themed('pc-banner-device');
+    }
     background-size: auto 420px;
 
     .logo {
@@ -259,7 +261,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url('~assets/theme-images/common/h5-banner-device.png');
+    @include themify($themes) {
+      background: themed('h5-banner-device');
+    }
     background-size: auto 46vw;
 
     .logo {

pages/_template/app/approve/index.vue

@@ -2,10 +2,7 @@
   <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 class="name mt-2" v-text="supplierInfo.shopName + '正品授权'"></div>
     </div>
     <div class="page-content">
       <div class="list">
@@ -16,7 +13,7 @@
           @click="toDetail(item)"
         >
           <div class="icon-image" :class="'item' + item.id"></div>
-          <div class="line mt-3 mb-3"></div>
+          <div class="mt-3 mb-3"></div>
           <div class="name" v-text="item.name"></div>
         </div>
       </div>
@@ -148,13 +145,19 @@ export default {
       }
 
       &:nth-child(1) {
-        background-image: url(~assets/theme-images/common/pc-section-bg-club.png);
+        @include themify($themes) {
+          background-image: themed('pc-entry-club-bg');
+        }
       }
       &:nth-child(2) {
-        background-image: url(~assets/theme-images/common/pc-section-bg-device.png);
+        @include themify($themes) {
+          background-image: themed('pc-entry-device-bg');
+        }
       }
       &:nth-child(3) {
-        background-image: url(~assets/theme-images/common/pc-section-bg-doctor.png);
+        @include themify($themes) {
+          background-image: themed('pc-entry-doctor-bg');
+        }
       }
     }
   }
@@ -224,13 +227,19 @@ export default {
       }
 
       &:nth-child(1) {
-        background-image: url(~assets/theme-images/common/h5-banner-club.png);
+        @include themify($themes) {
+          background-image: themed('pc-entry-club-bg');
+        }
       }
       &:nth-child(2) {
-        background-image: url(~assets/theme-images/common/h5-banner-device.png);
+        @include themify($themes) {
+          background-image: themed('pc-entry-device-bg');
+        }
       }
       &:nth-child(3) {
-        background-image: url(~assets/theme-images/common/h5-banner-doctor.png);
+        @include themify($themes) {
+          background-image: themed('pc-entry-doctor-bg');
+        }
       }
     }
   }

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

@@ -137,8 +137,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 420px;
-    background: url('~assets/theme-images/common/pc-banner-doctor.png')
-      no-repeat center;
+    @include themify($themes) {
+      background: themed('pc-banner-doctor') no-repeat center;
+    }
     background-size: auto 420px;
 
     .logo {
@@ -250,7 +251,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url('~assets/theme-images/common/h5-banner-doctor.png');
+    @include themify($themes) {
+      background: themed('h5-banner-doctor') no-repeat center;
+    }
     background-size: auto 46vw;
 
     .logo {

pages/_template/app/database/article.vue

@@ -147,7 +147,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(~assets/theme-images/common/pc-banner-doc.png);
+    @include themify($themes) {
+      background: themed('pc-banner-doc');
+    }
     background-size: auto 360px;
     .logo {
       display: block;
@@ -228,7 +230,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(~assets/theme-images/common/h5-banner-doc.png);
+    @include themify($themes) {
+      background: themed('h5-banner-doc');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

pages/_template/app/database/file.vue

@@ -154,7 +154,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(~assets/theme-images/common/pc-banner-doc.png);
+    @include themify($themes) {
+      background: themed('pc-banner-doc');
+    }
     background-size: auto 360px;
     .logo {
       display: block;
@@ -253,7 +255,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(~assets/theme-images/common/h5-banner-doc.png);
+    @include themify($themes) {
+      background: themed('h5-banner-doc');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

pages/_template/app/database/image.vue

@@ -167,7 +167,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(~assets/theme-images/common/pc-banner-doc.png);
+    @include themify($themes) {
+      background: themed('pc-banner-doc');
+    }
     background-size: auto 360px;
     .logo {
       display: block;
@@ -255,7 +257,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(~assets/theme-images/common/h5-banner-doc.png);
+    @include themify($themes) {
+      background: themed('h5-banner-doc');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

pages/_template/app/database/package.vue

@@ -150,7 +150,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(~assets/theme-images/common/pc-banner-doc.png);
+    @include themify($themes) {
+      background: themed('pc-banner-doc');
+    }
     background-size: auto 360px;
     .logo {
       display: block;
@@ -225,7 +227,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(~assets/theme-images/common/h5-banner-doc.png);
+    @include themify($themes) {
+      background: themed('h5-banner-doc');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

pages/_template/app/database/video.vue

@@ -162,7 +162,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(~assets/theme-images/common/pc-banner-doc.png);
+    @include themify($themes) {
+      background: themed('pc-banner-doc');
+    }
     background-size: auto 360px;
     .logo {
       display: block;
@@ -258,7 +260,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(~assets/theme-images/common/h5-banner-doc.png);
+    @include themify($themes) {
+      background: themed('h5-banner-doc');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

pages/_template/app/feedback/index.vue

@@ -68,7 +68,9 @@ export default {
 @media screen and (min-width: 768px) {
   .page-top {
     height: 360px;
-    background: url(~assets/theme-images/common/pc-banner-doc.png);
+    @include themify($themes) {
+      background: themed('pc-banner-feedback');
+    }
     background-size: auto 360px;
     .logo {
       display: block;
@@ -176,7 +178,9 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     height: 46vw;
-    background: url(~assets/theme-images/common/h5-banner-doc.png);
+    @include themify($themes) {
+      background: themed('h5-banner-feedback');
+    }
     background-size: auto 46vw;
     .logo {
       display: block;

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

@@ -397,6 +397,7 @@ export default {
       .button {
         width: 295px;
         height: 50px;
+        border-radius: 4px;
 
         cursor: pointer;
 
@@ -497,6 +498,7 @@ export default {
       .button {
         width: 85.6vw;
         height: 12vw;
+        border-radius: 4px;
 
         cursor: pointer;
 

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

@@ -149,7 +149,7 @@ export default {
         width: 1030px;
         height: 400px;
         background: #fff;
-        background-image: url(~assets/theme-images/common/pc-link-register-section-bg.png);
+        background-image: url(~assets/theme-images/common/pc-icon-link-register.png);
         background-repeat: no-repeat;
         background-position: 580px center;
         box-sizing: border-box;

pages/_template/app/index.vue

@@ -1,318 +1,22 @@
 <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 class="page-content">
-      <keep-alive>
-        <div class="list">
-          <div
-            class="section flex flex-col justify-center items-center mt-6 mb-6 rounded-md"
-            v-for="item in list"
-            :key="item.id"
-            @click="toDetail(item)"
-            @mouseover="onMouseover(item)"
-            @mouseleave="onMouselevel(item)"
-          >
-            <div class="icon-image" :class="'item' + item.id"></div>
-            <div class="name mt-4" v-text="item.name"></div>
-          </div>
-        </div>
-      </keep-alive>
-    </div>
+  <div>
+    <RossHomePage v-if="themeName === 'ross'"></RossHomePage>
+    <NormalHomePage v-else></NormalHomePage>
   </div>
 </template>
 
 <script>
+import NormalHomePage from '@/views/NormalHomePage.vue'
+import RossHomePage from '@/views/RossHomePage.vue'
 import { mapGetters } from 'vuex'
-import { toAuthorization } from '~/utils'
-import { isWeChat } from '~/utils/validator'
 export default {
   layout: 'app',
-  data() {
-    return {
-      list: [],
-    }
+  components: {
+    NormalHomePage,
+    RossHomePage,
   },
   computed: {
-    ...mapGetters([
-      'supplierInfo',
-      'authUserId',
-      'appId',
-      'routePrefix',
-      'accountType',
-    ]),
-  },
-  created() {
-    this.initEntryItems()
-  },
-  beforeDestroy() {
-    this.$removeStorage(this.routePrefix, 'login_redicret')
-  },
-  methods: {
-    // 初始化入口图标
-    initEntryItems() {
-      this.list = [
-        {
-          id: 0,
-          name: '正品授权申请入口',
-          path: '/form/club-register',
-          active: false,
-        },
-        {
-          id: 1,
-          name: '正品授权',
-          path: '/approve',
-          active: false,
-        },
-        {
-          id: 2,
-          name: '资料库',
-          path: '/database/article',
-          active: false,
-        },
-        {
-          id: 3,
-          name: '意见反馈',
-          path: '/feedback',
-          active: false,
-        },
-      ]
-    },
-
-    toDetail(item) {
-      const hasLogin = this.$store.getters.accessToken
-      // 保存登录重定向路由
-      this.$setStorage(
-        this.routePrefix,
-        'login_redicret',
-        this.routePrefix + item.path
-      )
-      if (item.id > 1 && !hasLogin) {
-        // 在微信浏览器中使用微信授权登录
-        if (isWeChat() && this.appId && this.accountType === 2) {
-          const payload = {
-            authUserId: this.authUserId,
-            routePrefix: this.routePrefix,
-          }
-          return toAuthorization(this.appId, payload)
-        }
-        this.$toast({ message: '请先登录', duration: 1000 })
-        this.$store.commit('app/SHOW_LOGIN')
-        return
-      }
-
-      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
-      if (!isPc) return
-      item.active = true
-    },
-    onMouselevel(item) {
-      const isPc = this.$store.getters.isPc
-      if (!isPc) return
-      item.active = false
-    },
+    ...mapGetters(['themeName']),
   },
 }
 </script>
-
-<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-content {
-    width: 1200px;
-    margin: 0 auto;
-    overflow: hidden;
-
-    .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;
-
-      .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');
-          }
-        }
-
-        &.item1 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-approve');
-          }
-        }
-
-        &.item2 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-doc');
-          }
-        }
-
-        &.item3 {
-          @include themify($themes) {
-            background-image: themed('pc-icon-home-feedback');
-          }
-        }
-      }
-
-      &:hover {
-        transform: translateY(-10px);
-
-        @include themify($themes) {
-          background-color: themed('color');
-        }
-
-        .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;
-          }
-
-          &.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;
-        }
-      }
-
-      .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);
-
-      .icon {
-        width: 20vw;
-        height: 20vw;
-      }
-
-      .name {
-        font-size: 4.8vw;
-        color: #404040;
-      }
-
-      .icon-image {
-        width: 86px;
-        height: 86px;
-        background-size: 86px 86px;
-        background-repeat: no-repeat;
-        background-position: center;
-
-        &.item0 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-edit');
-          }
-        }
-
-        &.item1 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-approve');
-          }
-        }
-
-        &.item2 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-doc');
-          }
-        }
-
-        &.item3 {
-          @include themify($themes) {
-            background-image: themed('h5-icon-home-feedback');
-          }
-        }
-      }
-    }
-  }
-}
-</style>

views/NormalHomePage.vue

@@ -0,0 +1,320 @@
+<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 class="page-content">
+      <keep-alive>
+        <div class="list">
+          <div
+            class="section flex flex-col justify-center items-center mt-6 mb-6"
+            v-for="item in list"
+            :key="item.id"
+            @click="toDetail(item)"
+            @mouseover="onMouseover(item)"
+            @mouseleave="onMouselevel(item)"
+          >
+            <div class="icon-image" :class="'item' + item.id"></div>
+            <div class="name mt-4" v-text="item.name"></div>
+          </div>
+        </div>
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { toAuthorization } from '~/utils'
+import { isWeChat } from '~/utils/validator'
+export default {
+  name: 'NormalHomePage',
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'supplierInfo',
+      'authUserId',
+      'appId',
+      'routePrefix',
+      'accountType',
+    ]),
+  },
+  created() {
+    this.initEntryItems()
+  },
+  beforeDestroy() {
+    this.$removeStorage(this.routePrefix, 'login_redicret')
+  },
+  methods: {
+    // 初始化入口图标
+    initEntryItems() {
+      this.list = [
+        {
+          id: 0,
+          name: '正品授权申请入口',
+          path: '/form/club-register',
+          active: false,
+        },
+        {
+          id: 1,
+          name: '正品授权',
+          path: '/approve',
+          active: false,
+        },
+        {
+          id: 2,
+          name: '资料库',
+          path: '/database/article',
+          active: false,
+        },
+        {
+          id: 3,
+          name: '意见反馈',
+          path: '/feedback',
+          active: false,
+        },
+      ]
+    },
+
+    toDetail(item) {
+      const hasLogin = this.$store.getters.accessToken
+      // 保存登录重定向路由
+      this.$setStorage(
+        this.routePrefix,
+        'login_redicret',
+        this.routePrefix + item.path
+      )
+      if (item.id > 1 && !hasLogin) {
+        // 在微信浏览器中使用微信授权登录
+        if (isWeChat() && this.appId && this.accountType === 2) {
+          const payload = {
+            authUserId: this.authUserId,
+            routePrefix: this.routePrefix,
+          }
+          return toAuthorization(this.appId, payload)
+        }
+        this.$toast({ message: '请先登录', duration: 1000 })
+        this.$store.commit('app/SHOW_LOGIN')
+        return
+      }
+
+      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
+      if (!isPc) return
+      item.active = true
+    },
+    onMouselevel(item) {
+      const isPc = this.$store.getters.isPc
+      if (!isPc) return
+      item.active = false
+    },
+  },
+}
+</script>
+
+<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-content {
+    width: 1200px;
+    margin: 0 auto;
+    overflow: hidden;
+
+    .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;
+
+      .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');
+          }
+        }
+
+        &.item1 {
+          @include themify($themes) {
+            background-image: themed('pc-icon-home-approve');
+          }
+        }
+
+        &.item2 {
+          @include themify($themes) {
+            background-image: themed('pc-icon-home-doc');
+          }
+        }
+
+        &.item3 {
+          @include themify($themes) {
+            background-image: themed('pc-icon-home-feedback');
+          }
+        }
+      }
+
+      &:hover {
+        transform: translateY(-10px);
+
+        @include themify($themes) {
+          background-color: themed('color');
+        }
+
+        .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;
+          }
+
+          &.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;
+        }
+      }
+
+      .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;
+      }
+
+      .icon-image {
+        width: 86px;
+        height: 86px;
+        background-size: 86px 86px;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &.item0 {
+          @include themify($themes) {
+            background-image: themed('h5-icon-home-edit');
+          }
+        }
+
+        &.item1 {
+          @include themify($themes) {
+            background-image: themed('h5-icon-home-approve');
+          }
+        }
+
+        &.item2 {
+          @include themify($themes) {
+            background-image: themed('h5-icon-home-doc');
+          }
+        }
+
+        &.item3 {
+          @include themify($themes) {
+            background-image: themed('h5-icon-home-feedback');
+          }
+        }
+      }
+    }
+  }
+}
+</style>

views/RossHomePage.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="page">
+    <div class="page-top">
+      <img class="logo" src="~/assets/theme-images/ross/ross-logo.png" />
+      <span></span>
+      <div class="name mt-2">来自西班牙殿堂级创新技术</div>
+    </div>
+    <div class="page-content">
+      <keep-alive>
+        <div class="list">
+          <div
+            class="section flex flex-col justify-center items-center"
+            v-for="item in list"
+            :key="item.id"
+            @click="toDetail(item)"
+            @mouseover="onMouseover(item)"
+            @mouseleave="onMouselevel(item)"
+          >
+            <div class="icon-image" :class="'item' + item.id"></div>
+            <div class="name mt-4" v-text="item.name"></div>
+          </div>
+        </div>
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { toAuthorization } from '~/utils'
+import { isWeChat } from '~/utils/validator'
+export default {
+  name: 'RossHomePage',
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'supplierInfo',
+      'authUserId',
+      'appId',
+      'routePrefix',
+      'accountType',
+    ]),
+  },
+  created() {
+    this.initEntryItems()
+  },
+  beforeDestroy() {
+    this.$removeStorage(this.routePrefix, 'login_redicret')
+  },
+  methods: {
+    // 初始化入口图标
+    initEntryItems() {
+      this.list = [
+        {
+          id: 0,
+          name: '正品授权申请入口',
+          path: '/form/club-register',
+          active: false,
+        },
+        {
+          id: 1,
+          name: '正品授权',
+          path: '/approve',
+          active: false,
+        },
+        {
+          id: 2,
+          name: '资料库',
+          path: '/database/article',
+          active: false,
+        },
+        {
+          id: 3,
+          name: '意见反馈',
+          path: '/feedback',
+          active: false,
+        },
+      ]
+    },
+
+    toDetail(item) {
+      const hasLogin = this.$store.getters.accessToken
+      // 保存登录重定向路由
+      this.$setStorage(
+        this.routePrefix,
+        'login_redicret',
+        this.routePrefix + item.path
+      )
+      if (item.id > 1 && !hasLogin) {
+        // 在微信浏览器中使用微信授权登录
+        if (isWeChat() && this.appId && this.accountType === 2) {
+          const payload = {
+            authUserId: this.authUserId,
+            routePrefix: this.routePrefix,
+          }
+          return toAuthorization(this.appId, payload)
+        }
+        this.$toast({ message: '请先登录', duration: 1000 })
+        this.$store.commit('app/SHOW_LOGIN')
+        return
+      }
+
+      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
+      if (!isPc) return
+      item.active = true
+    },
+    onMouselevel(item) {
+      const isPc = this.$store.getters.isPc
+      if (!isPc) return
+      item.active = false
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+// pc 端
+@media screen and (min-width: 768px) {
+  .page {
+    min-height: calc(100vh - 160px);
+    @include themify($themes) {
+      background-size: auto 100%;
+      background: themed('pc-banner-home') no-repeat center;
+    }
+  }
+
+  .page-top {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 75px 0 129px;
+    .logo {
+      display: block;
+      width: 119px;
+    }
+
+    span {
+      display: block;
+      width: 46px;
+      height: 3px;
+      margin: 40px 0 32px;
+      @include themify($themes) {
+        background: themed('color');
+      }
+    }
+
+    .name {
+      color: #fff;
+      font-size: 34px;
+    }
+  }
+
+  .page-content {
+    width: 1200px;
+    margin: 0 auto;
+
+    .list {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .section {
+      width: 284px;
+      height: 260px;
+      margin-left: auto;
+      margin-right: auto;
+      background: rgba(255, 255, 255, 0.69);
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 0.4s;
+
+      &:hover {
+        transform: translateY(-10px);
+      }
+
+      &:nth-child(2n-1) {
+        transform: translateY(60px);
+
+        &:hover {
+          transform: translateY(50px);
+        }
+      }
+
+      .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');
+          }
+        }
+
+        &.item1 {
+          @include themify($themes) {
+            background-image: themed('pc-icon-home-approve');
+          }
+        }
+
+        &.item2 {
+          @include themify($themes) {
+            background-image: themed('pc-icon-home-doc');
+          }
+        }
+
+        &.item3 {
+          @include themify($themes) {
+            background-image: themed('pc-icon-home-feedback');
+          }
+        }
+      }
+
+      &:hover {
+        @include themify($themes) {
+          background: url(~assets/theme-images/ross/pc-icon-approve-hover.png)
+            no-repeat center;
+          background-size: 100% auto;
+        }
+
+        .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;
+          }
+
+          &.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;
+        }
+      }
+
+      .icon {
+        width: 86px;
+        height: 86px;
+      }
+
+      .name {
+        font-size: 24px;
+        color: #404040;
+      }
+    }
+  }
+}
+
+// 移动 端
+@media screen and (max-width: 768px) {
+  .page {
+    min-height: calc(100vh - 12.8vw - 12.4vw);
+    @include themify($themes) {
+      background: themed('h5-banner-home') no-repeat center;
+      background-size: cover;
+    }
+  }
+
+  .page-top {
+    padding: 11.5vw 7.2vw 15.5vw;
+    .logo {
+      display: block;
+      width: 14.3vw;
+    }
+
+    span {
+      display: block;
+      width: 7.2vw;
+      height: 0.5vw;
+      background: #fff;
+      margin: 6.2vw 0 4vw;
+    }
+
+    .name {
+      font-size: 4.8vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    .list {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      padding: 0 7.2vw;
+    }
+
+    .section {
+      width: 41vw;
+      height: 38vw;
+      box-shadow: 0px 0.4vw 2vw rgba(0, 6, 32, 0.08);
+      margin-bottom: 8.8vw;
+      border-radius: 4px;
+
+      &:nth-child(2n-1) {
+        transform: translateY(16vw);
+      }
+
+      .icon {
+        width: 16vw;
+        height: 16vw;
+      }
+
+      .name {
+        font-size: 4vw;
+        color: #fff;
+      }
+
+      .icon-image {
+        width: 16vw;
+        height: 16vw;
+        background-size: 16vw 16vw;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &.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;
+        }
+
+        &.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;
+        }
+      }
+
+      @include themify($themes) {
+        background: url(~assets/theme-images/ross/h5-icon-approve-hover.png)
+          no-repeat center;
+        background-size: 100% auto;
+      }
+    }
+  }
+}
+</style>