feat: 高端样式

src/base/ShopItem/ShopItem.vue

@@ -63,7 +63,7 @@ const deactivate = () => store.SET_SHOP(null)
 .group-item {
   width: 230px;
   height: 200px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--brand-background);
   border-radius: 8px;
   overflow: hidden;
   .logo-wrapper {
@@ -149,7 +149,7 @@ const deactivate = () => store.SET_SHOP(null)
     flex-direction: column;
     width: 230px;
     height: 242px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
+    background: var(--food-background);
     border-radius: 40px;
     align-items: center;
     .logo-wrapper {

src/components/ActivitiesList/ActivitiesList.vue

@@ -95,8 +95,8 @@ const { config } = storeToRefs(store)
     position: relative;
     width: 944px;
     height: 532px;
-    background: #ffffff;
-    border-radius: 16px;
+    background: var(--activities-detailBg);
+    border-radius: var(--activities-radius);
     overflow: hidden;
     margin-bottom: 24px;
     &.d {
@@ -159,13 +159,13 @@ const { config } = storeToRefs(store)
           justify-content: center;
           width: 234px;
           height: 100%;
-          background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+          background: var(--activities-btnBg);
           box-shadow: 0px 15px 24px rgba(173, 196, 236, 0.25);
           font-weight: 700;
           font-size: 18px;
           line-height: 21px;
           text-align: center;
-          color: #ffffff;
+          color: var(--activities-btnColor);
         }
       }
     }
@@ -177,7 +177,7 @@ const { config } = storeToRefs(store)
       height: 100%;
       display: flex;
       z-index: 0;
-      background: #ffffff;
+      background: var(--activities-detailBg);
       .backscroll {
         position: relative;
         flex: 1;

src/components/KeyboardByLetter/KeyboardByLetter.vue

@@ -71,7 +71,7 @@ function handleLetter(item, index) {
       width: 104px;
     }
     &.active {
-      background: linear-gradient(180deg, #435acd 0%, #749cf3 100%);
+      background: var(--search-keyboardActiveBg);
       color: #fff;
     }
   }

src/components/KeyboardByWritten/KeyboardByWritten.vue

@@ -5,7 +5,15 @@
         <div class="word" @click="handleWord(item, index)" :class="{ active: wordIdx === index }" v-for="(item, index) of wordsList" :key="item">{{ item }}</div>
       </div>
     </ScrollView>
-    <Written @result="getWordList" :width="552" :height="196" background-color="#ffffff" fill-font-size="48px" fill-style="rgba(0, 0, 0, 0.02)" stroke-style="#516DD8" />
+    <Written
+      @result="getWordList"
+      :width="552"
+      :height="196"
+      background-color="#ffffff"
+      fill-font-size="48px"
+      fill-style="rgba(0, 0, 0, 0.02)"
+      :stroke-style="theme.search.writeColor"
+    />
     <div class="del" @click="del">
       <img src="../../assets/images/search/del.svg" class="del-icon" alt="" />
     </div>
@@ -16,8 +24,12 @@
 import { ref } from 'vue'
 import Written from '../Written/Written.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
-
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/store/root'
 const wordsList = ref([])
+const store = useStore()
+const { theme } = storeToRefs(store)
+
 function getWordList(list) {
   wordsList.value = list
 }
@@ -70,7 +82,7 @@ function del() {
       color: rgba(0, 0, 0, 0.6);
       &.active {
         color: #fff;
-        background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+        background: var(--search-keyboardActiveBg);
       }
     }
   }

src/components/PublicComponent/Tabs.vue

@@ -117,7 +117,7 @@ const goPage = item => {
         right: 0;
         bottom: 0;
         margin: auto;
-        background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+        background: var(--menu-barBg);
         border-radius: 2px 2px 0px 0px;
       }
     }

src/components/Search/Search.vue

@@ -2,11 +2,11 @@
   <Dialog @close="close">
     <div class="search-content">
       <div class="bar">
-        <div class="icon"></div>
+        <div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div>
         <div class="stick"></div>
         <div v-if="!keywords" class="placeholder">请输入中英文<span class="meta">首字母</span>查询，例如 XBK (星巴克)</div>
         <input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" />
-        <img src="./clear.png" class="clear" v-if="keywords" @click="clear" />
+        <img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" />
       </div>
       <div class="top" v-if="!showVoice">
         <div class="facs">
@@ -38,9 +38,7 @@
 
       <Voice @handle-question="showClassify = true" v-if="showVoice" />
     </div>
-    <div class="search-btn" @click="close">
-      <img src="../../assets/images/search/back.png" alt="" />
-    </div>
+    <img :src="theme.images.searchClose" class="search-btn" @click="close" />
   </Dialog>
 </template>
 
@@ -68,7 +66,7 @@ const { _handleFacility } = useFacilityNav()
 const router = useRouter()
 
 const store = useStore()
-const { indexList, shopList, facilityList, config, showVoice } = storeToRefs(store)
+const { indexList, shopList, facilityList, config, showVoice, theme } = storeToRefs(store)
 
 const hotRecommend = computed(() => indexList.value.hotSearch ?? [])
 const showClassify = ref(false)
@@ -135,9 +133,9 @@ onBeforeUnmount(() => {
   right: 40px;
   bottom: 302px;
   left: 40px;
-  background: linear-gradient(180deg, #e0e3ee 0%, #d4d9e7 100%);
+  background: var(--search-background);
   backdrop-filter: blur(10px);
-  border-radius: 24px;
+  border-radius: var(--searchBar-borderRadius);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -153,9 +151,10 @@ onBeforeUnmount(() => {
     top: -55px;
     left: 28px;
     right: 28px;
-    background: #ffffff;
+    background: var(--search-barBackground);
+    border: var(--searchBar-border);
     box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
-    border-radius: 24px;
+    border-radius: var(--searchBar-borderRadius);
     display: flex;
     align-items: center;
     padding-right: 10px;
@@ -164,21 +163,21 @@ onBeforeUnmount(() => {
     .icon {
       width: 56px;
       height: 56px;
-      background: center / cover no-repeat url(./icon.png);
+      background: center / cover no-repeat;
     }
     .stick {
       width: 4px;
       height: 38px;
-      background: linear-gradient(180deg, #6c7ca6 0%, #879aca 100%);
+      background: var(--searchBar-stickBg);
       margin: 0 32px;
     }
     .placeholder {
       font-weight: 700;
       font-size: 20px;
       line-height: 23px;
-      color: rgba(0, 0, 0, 0.2);
+      color: var(--searchBar-placeholderColor);
       .meta {
-        color: rgba(81, 109, 216, 1);
+        color: var(--search-placeholderMetaColor);
       }
     }
     .input {
@@ -190,15 +189,12 @@ onBeforeUnmount(() => {
       font-weight: 700;
       font-size: 48px;
       line-height: 59px;
-      color: rgba(0, 0, 0, 0.8);
+      color: var(--searchBar-color);
     }
     .clear {
       display: flex;
       width: 80px;
       height: 80px;
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 24px;
-      padding: 16px;
     }
     .voice-icon {
       width: 190px;
@@ -207,11 +203,12 @@ onBeforeUnmount(() => {
   .top {
     height: 460px;
     background: rgba(255, 255, 255, 0.6);
-    border-radius: 16px;
+    border-radius: var(--searchBar-borderRadius);
     margin: 10px 10px 48px 10px;
     display: flex;
     justify-content: space-between;
     padding-left: 46px;
+    overflow: hidden;
     .facs {
       width: 300px;
       padding-top: 111px;
@@ -298,10 +295,5 @@ onBeforeUnmount(() => {
   width: 120px;
   height: 120px;
   z-index: 52;
-  background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
-  border-radius: 24px;
-  img {
-    width: 56px;
-  }
 }
 </style>

src/themes/fashion/style.json

@@ -18,7 +18,8 @@
     "border": "2px solid #ffffff",
     "borderRadius": "100px",
     "placeholderColor": "rgba(0, 0, 0, 0.6)",
-    "stickBg": "#747ED3"
+    "stickBg": "#747ED3",
+    "color": "rgba(0, 0, 0, 0.8)"
   },
   "menu": {
     "bg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
@@ -33,7 +34,8 @@
     "activeBg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
     "color": "#ffffff",
     "activeColor": "#ffffff",
-    "indexColor": "#FFFFFF"
+    "indexColor": "#FFFFFF",
+    "barBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)"
   },
   "index": {
     "recTitleColor": "#fff",
@@ -46,9 +48,13 @@
     "recBorder": "2px solid rgba(255, 255, 255, 0.6)"
   },
   "brand": {
+    "background": "rgba(255, 255, 255, 0.6)",
     "floorNameColor": "#fff",
     "floorMetaColor": "rgba(255, 255, 255, 0.8)"
   },
+  "food": {
+    "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)"
+  },
   "carousel": {
     "titleColor": "#fff",
     "introColor": "#fff"
@@ -65,6 +71,22 @@
   "guide": {
     "floorBg": "linear-gradient(90deg, #302159 0%, #7756b4 96.35%)",
     "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6257d7 0%, #f191c0 100%), #dee6f6",
-    "arrowRadius": "100px"
+    "arrowRadius": "100px",
+    "floorColor": "#FFFFFF",
+    "floorActiveColor": "rgba(0, 0, 0, 0.8)",
+    "floorActiveBg": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%)"
+  },
+  "search": {
+    "background": "linear-gradient(180deg, #E0E3EE 0%, #D4D9E7 100%)",
+    "barBackground": "#FFFFFF",
+    "placeholderMetaColor": "rgba(81, 109, 216, 1)",
+    "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
+    "writeColor": "#516DD8"
+  },
+  "activities": {
+    "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",
+    "btnColor": "#FFFFFF",
+    "detailBg": "#FFFFFF",
+    "radius": "16px"
   }
 }

src/themes/highend/style.json

@@ -18,7 +18,8 @@
     "border": "2px solid rgba(255, 255, 255, 0.2)",
     "borderRadius": "12px",
     "placeholderColor": "rgba(255, 255, 255, 0.4)",
-    "stickBg": "#D3AB80"
+    "stickBg": "#D3AB80",
+    "color": "#FFFFFF"
   },
   "menu": {
     "bg1": "#fff",
@@ -33,7 +34,8 @@
     "activeBg5": "#6E5E54",
     "color": "rgba(0, 0, 0, 0.6)",
     "activeColor": "rgba(0, 0, 0, 0.8)",
-    "indexColor": "#FFFFFF"
+    "indexColor": "#FFFFFF",
+    "barBg": "#4D4441"
   },
   "index": {
     "recTitleColor": "#fff",
@@ -47,9 +49,13 @@
     "recBorder": "none"
   },
   "brand": {
+    "background": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)",
     "floorNameColor": "#fff",
     "floorMetaColor": "rgba(255, 255, 255, 0.8)"
   },
+  "food": {
+    "background": "linear-gradient(180deg, rgba(219, 194, 161, 0) 0%, #DBC2A1 100%, #DBC2A1 100%)"
+  },
   "carousel": {
     "titleColor": "#fff",
     "introColor": "#fff"
@@ -66,6 +72,22 @@
   "guide": {
     "floorBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)",
     "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #64554D 0%, #B39B85 100%), #F2EEE8",
-    "arrowRadius": "4px"
+    "arrowRadius": "4px",
+    "floorColor": "rgba(0, 0, 0, 0.6)",
+    "floorActiveColor": "rgba(0, 0, 0, 0.8)",
+    "floorActiveBg": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%)"
+  },
+  "search": {
+    "background": "linear-gradient(180deg, #BA9B7A 0%, #DBC2A1 100%)",
+    "barBackground": "#4D4441",
+    "placeholderMetaColor": "rgba(211, 171, 128, 1)",
+    "keyboardActiveBg": "linear-gradient(180deg, #BA9B7A 0%, #DBC2A1 100%)",
+    "writeColor": "#E4CEB1"
+  },
+  "activities": {
+    "btnBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)",
+    "btnColor": "rgba(0, 0, 0, 0.8)",
+    "detailBg": "linear-gradient(180deg, #BA9B7A 0%, #DBC2A1 100%)",
+    "radius": "12px"
   }
 }

src/themes/main/style.json

@@ -18,7 +18,8 @@
     "border": "none",
     "borderRadius": "24px",
     "placeholderColor": "rgba(0, 0, 0, 0.2)",
-    "stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)"
+    "stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)",
+    "color": "rgba(0, 0, 0, 0.8)"
   },
   "menu": {
     "bg1": "rgba(255, 255, 255, 0.4)",
@@ -33,7 +34,8 @@
     "activeBg5": "#ffffff",
     "color": "rgba(0, 0, 0, 0.4)",
     "activeColor": "rgba(0, 0, 0, 0.8)",
-    "indexColor": "rgba(0, 0, 0, 0.8)"
+    "indexColor": "rgba(0, 0, 0, 0.8)",
+    "barBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)"
   },
   "index": {
     "recTitleColor": "rgba(0, 0, 0, 0.8)",
@@ -46,9 +48,13 @@
     "recBorder": "none"
   },
   "brand": {
+    "background": "rgba(255, 255, 255, 0.6)",
     "floorNameColor": "rgba(0, 0, 0, 0.8)",
     "floorMetaColor": "rgba(0, 0, 0, 0.6)"
   },
+  "food": {
+    "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)"
+  },
   "carousel": {
     "titleColor": "rgba(0, 0, 0, 0.8)",
     "introColor": "rgba(0, 0, 0, 0.6)"
@@ -65,6 +71,22 @@
   "guide": {
     "floorBg": "linear-gradient(113.71deg, #435acd 0%, #749cf3 100%)",
     "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6",
-    "arrowRadius": "100px"
+    "arrowRadius": "100px",
+    "floorColor": "#FFFFFF",
+    "floorActiveColor": "rgba(0, 0, 0, 0.8)",
+    "floorActiveBg": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%)"
+  },
+  "search": {
+    "background": "linear-gradient(180deg, #E0E3EE 0%, #D4D9E7 100%)",
+    "barBackground": "#fff",
+    "placeholderMetaColor": "rgba(81, 109, 216, 1)",
+    "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
+    "writeColor": "#516DD8"
+  },
+  "activities": {
+    "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",
+    "btnColor": "#FFFFFF",
+    "detailBg": "#FFFFFF",
+    "radius": "16px"
   }
 }

src/views/Guide/Guide.vue

@@ -50,14 +50,10 @@
     <div class="shop-list-wrapper">
       <BrandScroll v-if="initiated" :shop="shop" :need-focus="true" @click="handleShop" :list="selectedShopList" :isRow="isRow" :config="config" />
       <div class="switch">
-        <div :class="{ btn: true, active: !isRow }" @click="isRow = false">
-          <img v-if="isRow" src="./grid.svg" />
-          <img v-else src="./gridActive.svg" />
-        </div>
-        <div :class="{ btn: true, active: isRow }" @click="isRow = true">
-          <img v-if="!isRow" src="./row.svg" />
-          <img v-else src="./rowActive.svg" />
-        </div>
+        <img class="btn" v-if="isRow" :src="theme.images.grid" />
+        <img class="btn" v-else :src="theme.images.gridActive" />
+        <img class="btn" v-if="!isRow" :src="theme.images.row" />
+        <img class="btn" v-else :src="theme.images.rowActive" />
       </div>
     </div>
   </View>
@@ -80,7 +76,7 @@ const isRow = ref(false)
 const store = useStore()
 const formatMap = ref({})
 const facMap = ref({})
-const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap, shop } = storeToRefs(store)
+const { currentBuildingFloorsList, currentFloor, config, currentFloorShopMap, shop, theme } = storeToRefs(store)
 
 try {
   const facs = window.Map_QM.getAllIcon()
@@ -373,7 +369,7 @@ watch(
 
     /* W/100% */
 
-    color: #ffffff;
+    color: var(--guide-floorColor);
     transition: all 0.5s;
     &.all {
       width: 150px;
@@ -401,8 +397,8 @@ watch(
       }
     }
     &.active {
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
-      color: rgba(0, 0, 0, 0.8);
+      background: var(--guide-floorActiveBg);
+      color: var(--guide-floorActiveColor);
     }
   }
 }
@@ -422,18 +418,8 @@ watch(
       display: flex;
       width: 48px;
       height: 48px;
-      background: rgba(255, 255, 255, 0.4);
-      border-radius: 8px;
       justify-content: center;
       align-items: center;
-
-      img {
-        width: 24px;
-        height: 24px;
-      }
-      &.active {
-        background: #ffffff;
-      }
     }
     .btn + .btn {
       margin-left: 8px;