Browse Source

页面优化整理

yuwenjun1997 2 years ago
parent
commit
16b7ee02eb

+ 1 - 1
.env.development

@@ -23,4 +23,4 @@ HOST = '192.168.2.92'
 PORT = '8888'
 
 # HTTPS flag
-HTTPS = false
+HTTPS = true

+ 1 - 24
apis/module/common.js

@@ -1,19 +1,6 @@
-/*
- * queryStringify
- * 将k-v的对象序列化转成 url?k=v&k1=v1;
- */
-const queryStringify = function (search = {}) {
-  return Object.entries(search)
-    .reduce(
-      (t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
-      Object.keys(search).length ? '?' : ''
-    )
-    .replace(/&$/, '')
-}
-
 export default ($axios) => {
   const commonApis = {}
-  
+
   // 订阅号用户登录
   commonApis.customLogin = (data) =>
     $axios.post('/wx/user/login/subscribe/verify/code', data)
@@ -57,15 +44,5 @@ export default ($axios) => {
   // 获取城市列表(列表)
   commonApis.fetchAllCityList = () => $axios.get('/wx/address/select/all')
 
-  // 高德地图api : 将坐标转化为高德地图坐标
-  commonApis.assistant = (params = {}) =>
-    fetch(
-      'https://restapi.amap.com/v3/assistant/coordinate/convert' +
-        queryStringify(params)
-    )
-  // 百度地图api:将坐标转化为百度地图坐标
-  commonApis.assistantBaidu = (params = {}) =>
-    fetch('https://api.map.baidu.com/geoconv/v1' + queryStringify(params))
-
   return commonApis
 }

+ 11 - 0
assets/css/global.css

@@ -1,3 +1,14 @@
 .__nuxt-error-page svg {
   display: inline-block;
 }
+
+@media screen and (min-width: 768px) {
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: #ddd;
+  }
+}

+ 0 - 2
layouts/app-ross.vue

@@ -6,10 +6,8 @@
           <div class="logo flex items-center" @click="backHome">
             <img
               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="flex justify-center items-center">

+ 1 - 6
layouts/app.vue

@@ -4,12 +4,7 @@
       <div class="header" v-show="showHeader">
         <div class="navbar flex justify-between items-center">
           <div class="logo flex items-center" @click="backHome">
-            <img
-              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 />
+            <img src="~/assets/theme-images/common/icon-logo.png" />
             <span>认证通</span>
           </div>
           <div class="user-info">

+ 7 - 3
mixins/clubList.js

@@ -5,6 +5,7 @@ import { drawLogo, debounce } from '@/utils'
 export default {
   data() {
     return {
+      active: false,
       isRequest: false, // 是否发起请求
       finished: true, // 列表加载是否完毕(加载完了所有数据)
       loadingMore: false, // 是否正在加载
@@ -51,10 +52,13 @@ export default {
         duration: 0,
       })
       try {
-        const resLocation = await geolocation()
-        this.listQuery.lngAndLat = `${resLocation.position.lng},${resLocation.position.lat}`
+        if (process.env.HTTPS === 'true' || true) {
+          const resLocation = await geolocation()
+          this.listQuery.lngAndLat = `${resLocation.position.lng},${resLocation.position.lat}`
+        }
       } catch (error) {
-        this.$toast('获取定位信息失败')
+        // this.$toast('获取定位信息失败')
+        console.log(error)
       } finally {
         this.filterClubList()
       }

+ 2 - 2
pages/_template/app/approve/index.vue

@@ -31,7 +31,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['supplierInfo', 'routePrefix', 'themeName']),
+    ...mapGetters(['supplierInfo', 'routePrefix']),
   },
   created() {
     this.list = this.generateList()
@@ -51,7 +51,7 @@ export default {
         },
         {
           id: 3,
-          name: this.themeName === 'ross' ? '体疗师认证' : '医师认证',
+          name: '医师认证',
           path: '/approve/personnel/operate',
         },
       ]

+ 4 - 4
pages/_template/ldm/approve/club/index.vue

@@ -14,7 +14,7 @@
           <input
             type="text"
             placeholder="搜索店铺"
-            v-model="listQuery.clubName"
+            v-model="listQuery.authParty"
             @keyup.enter="onSearch"
           />
         </div>
@@ -38,9 +38,9 @@
             :key="item.authId"
             @click="toDetail(item)"
           >
-            <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
+            <img class="cover" :src="item.logo || drawLogo(item.authParty)" />
             <div class="info">
-              <div class="name" v-text="item.clubName"></div>
+              <div class="name" v-text="item.authParty"></div>
               <div class="line"></div>
               <div class="mobile">{{ item.mobile || '暂无' }}</div>
               <div class="address">
@@ -76,7 +76,7 @@ export default {
       listQuery: {
         authUserId: '',
         lngAndLat: '',
-        clubName: '',
+        authParty: '',
         provinceId: '',
         cityId: '',
         townId: '',

+ 0 - 1
plugins/axios.js

@@ -2,7 +2,6 @@
 import initApi from '@/apis/index'
 import Vue from 'vue'
 import { Dialog, Toast } from 'vant'
-// import {} from ''
 
 export default function (context) {
   const { $axios, redirect, store } = context

+ 0 - 12
utils/download-link.js

@@ -1,12 +0,0 @@
-import handleClipboard from '@/utils/clipboard'
-import { isWeChat } from '@/utils/validator'
-import { downloadUrlLink } from '@/utils/index'
-
-// 通过链接下载
-export default function downloadLink(link, $event) {
-  if (isWeChat()) {
-    return handleClipboard(link, $event, '下载链接已复制到剪切板')
-  } else {
-    downloadUrlLink(link)
-  }
-}

+ 0 - 40
utils/index.js

@@ -1,5 +1,3 @@
-import { Progress } from 'element-ui'
-
 // 绘制logo
 export function drawLogo(text = '', len = 4) {
   if (text.length > 4) {
@@ -118,44 +116,6 @@ export function debounce(func, wait, immediate) {
   }
 }
 
-// 生成a标签下载文件
-export function downloadUrlLink(url) {
-  console.log(url)
-  const a = document.createElement('a')
-  a.setAttribute('download', true)
-  a.setAttribute('href', url)
-  a.setAttribute('target', '_blank')
-  a.style.display = 'none'
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-}
-
-// 下载方式2
-export async function downloadWithUrl(downUrl, fileName, self) {
-  const h = self.$createElement
-  const notification = self.$notify({
-    title: '提示',
-    message: h('div', {}, [
-      h('div', {}, `正在下载${fileName},请勿重复操作!`),
-      h(Progress, { props: { percentage: 100 } }),
-    ]),
-    duration: 0,
-  })
-  try {
-    const data = await fetch(downUrl)
-    const res = await data.blob()
-    const a = document.createElement('a')
-    a.href = URL.createObjectURL(res)
-    a.download = fileName
-    a.click()
-  } catch (err) {
-    self.$message.error(`下载${fileName}失败`)
-  } finally {
-    notification.close()
-  }
-}
-
 export function callMobile(mobile) {
   if (!mobile) return
   const a = document.createElement('a')

+ 2 - 2
utils/map-utils.js

@@ -55,6 +55,6 @@ export async function mapNavigate(options = {}, origin) {
     options.locationUrl = `https://uri.amap.com/marker?position=${options.lng},${options.lat}&name=${options.title}&coordinate=gaode&callnative=0`
   }
   // return
-  // window.open(options.locationUrl)
-  window.location.href = options.locationUrl
+  window.open(options.locationUrl, '_blank')
+  // window.location.href = options.locationUrl
 }

+ 0 - 57
utils/old-routes.js

@@ -1,57 +0,0 @@
-/**
- * 旧版本路由重定向映射
- *
- */
-
-const oldRoutes = [
-  {
-    path: '/entry/approve',
-    redirect: '/app/approve',
-  },
-  {
-    path: '/entry/doc',
-    redirect: '/app/database/article',
-  },
-  {
-    path: '/entry/feedback',
-    redirect: '/app/feedback',
-  },
-  {
-    path: '/home',
-    redirect: '/app',
-  },
-  {
-    path: '/approve',
-    redirect: '/app/approve',
-  },
-  {
-    path: '/approve/page',
-    redirect: '/app/approve',
-  },
-  {
-    path: '/approve/club',
-    redirect: '/app/approve/club',
-  },
-  {
-    path: '/approve/club/detail',
-    redirect: '/app/approve/club/detail',
-  },
-  {
-    path: '/approve/device',
-    redirect: '/app/approve/device',
-  },
-  {
-    path: '/approve/device/detail',
-    redirect: '/app/approve/device/detail',
-  },
-  {
-    path: '/approve/doctor',
-    redirect: '/app/approve/personnel',
-  },
-  {
-    path: '/approve/doctor/detail',
-    redirect: '/app/approve/personnel/detail',
-  },
-]
-
-export default oldRoutes

+ 0 - 320
views/NormalHomePage.vue

@@ -1,320 +0,0 @@
-<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>

+ 0 - 365
views/RossHomePage.vue

@@ -1,365 +0,0 @@
-<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);
-    padding-bottom: 16vw;
-    @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>