feat: 高端部分样式

src/components/PublicComponent/PublicComponent.vue

@@ -75,12 +75,13 @@ onMounted(() => {
   timer.value = setInterval(() => {
     send(`type:online`)
   }, 30000)
-  let i = 0
-  store.SET_CURRENT_THEME('main')
-  setInterval(() => {
-    i++
-    store.SET_CURRENT_THEME(['main', 'fashion'][i % 2])
-  }, 10000)
+
+  store.SET_CURRENT_THEME('highend')
+  // let i = 0
+  // setInterval(() => {
+  //   i++
+  //   store.SET_CURRENT_THEME(['main', 'fashion', 'highend'][i % 3])
+  // }, 10000)
   window.addEventListener('touchend', checkHandleScreen)
 })
 onBeforeUnmount(() => {

src/components/PublicComponent/SearchBar.vue

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="back" :style="{ backgroundImage: `url(${theme.images.back})` }" v-if="$route.path !== '/index'" @click="() => $router.push('/index')"></div>
     <div class="bar" @click="handleSearch">
-      <div class="icon"></div>
+      <div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div>
       <div class="stick"></div>
       <div class="placeholder">精确查询品牌/公共设施</div>
     </div>
@@ -47,12 +47,12 @@ const { theme } = storeToRefs(store)
     .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 {

src/layouts/View.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="view-container">
+  <div class="view-container" :style="{ backgroundImage: theme.images.backgroundImg ? `url(${theme.images.backgroundImg})` : '' }">
     <div :class="['bgTop', long ? 'long' : '', mid ? 'mid' : '']"></div>
     <slot />
   </div>
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/store/root'
+
+const store = useStore()
+const { theme } = storeToRefs(store)
+
 defineProps({
   long: {
     type: Boolean,

src/themes/fashion/style.json

@@ -16,7 +16,8 @@
         "background": "rgba(255, 255, 255, 0.6)",
         "border": "2px solid #ffffff",
         "borderRadius": "100px",
-        "placeholderColor": "rgba(0, 0, 0, 0.6)"
+        "placeholderColor": "rgba(0, 0, 0, 0.6)",
+        "stickBg": "#747ED3"
     },
     "menu": {
         "bg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
@@ -30,7 +31,8 @@
         "activeBg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
         "activeBg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
         "color": "#ffffff",
-        "activeColor": "#ffffff"
+        "activeColor": "#ffffff",
+        "indexColor": "#FFFFFF"
     },
     "index": {
         "recTitleColor": "#fff",

src/themes/highend/index.js

@@ -0,0 +1,10 @@
+import style from './style.json'
+function importAll(r) {
+  const obj = {}
+  r.keys().forEach(key => {
+    obj[key.replace('./', '').replace('.png', '')] = r(key)
+  })
+  return obj
+}
+const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/))
+export default { ...style, images }

src/themes/highend/style.json

@@ -0,0 +1,66 @@
+{
+    "global": {
+        "background": "center / cover no-repeat"
+    },
+    "weather": {
+        "iconColor": "#000",
+        "textColor": "#000"
+    },
+    "time": {
+        "timeColor": "#000",
+        "monthColor": "#000",
+        "weekColor": "rgba(0, 0, 0, 0.4)"
+    },
+    "searchBar": {
+        "backBorderRadius": "12px",
+        "background": "#4D4441",
+        "border": "2px solid rgba(255, 255, 255, 0.2)",
+        "borderRadius": "12px",
+        "placeholderColor": "rgba(255, 255, 255, 0.4)",
+        "stickBg": "#D3AB80"
+    },
+    "menu": {
+        "bg1": "#fff",
+        "bg2": "#fff",
+        "bg3": "#fff",
+        "bg4": "#fff",
+        "bg5": "#fff",
+        "activeBg1": "#6E5E54",
+        "activeBg2": "#6E5E54",
+        "activeBg3": "#6E5E54",
+        "activeBg4": "#6E5E54",
+        "activeBg5": "#6E5E54",
+        "color": "rgba(0, 0, 0, 0.6)",
+        "activeColor": "rgba(0, 0, 0, 0.8)",
+        "indexColor": "#FFFFFF"
+    },
+    "index": {
+        "recTitleColor": "#fff",
+        "guideBackground": "#E4CEB1",
+        "guideBorder": "none",
+        "guideTopBg": "linear-gradient(180deg, #64554D 0%, #B39B85 100%)",
+        "guideQrcodeBg": "rgba(255, 255, 255, 0.4)",
+        "foodBg": "linear-gradient(180deg, #64554D 0%, #B39B85 100%)",
+        "foodBorder": "4px solid #6E5E54",
+        "recBg": "linear-gradient(180deg, #64554D 0%, #B39B85 100%)",
+        "recBorder": "none"
+    },
+    "brand": {
+        "floorNameColor": "#fff",
+        "floorMetaColor": "rgba(255, 255, 255, 0.8)"
+    },
+    "carousel": {
+        "titleColor": "#fff",
+        "introColor": "#fff"
+    },
+    "map": {
+        "background": "#F2EEE8"
+    },
+    "billboard": {
+        "background": "linear-gradient(180deg, #342F2D 0%, #534946 100%)"
+    },
+    "guide": {
+        "floorBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)",
+        "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #64554D 0%, #B39B85 100%), #F2EEE8"
+    }
+}

src/themes/index.js

@@ -1,4 +1,5 @@
 import main from './main/index'
 import fashion from './fashion/index'
+import highend from './highend/index'
 
-export default { main, fashion }
+export default { main, fashion, highend }

src/themes/main/style.json

@@ -16,7 +16,8 @@
         "background": "#fff",
         "border": "none",
         "borderRadius": "24px",
-        "placeholderColor": "rgba(0, 0, 0, 0.2)"
+        "placeholderColor": "rgba(0, 0, 0, 0.2)",
+        "stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)"
     },
     "menu": {
         "bg1": "rgba(255, 255, 255, 0.4)",
@@ -30,7 +31,8 @@
         "activeBg4": "#ffffff",
         "activeBg5": "#ffffff",
         "color": "rgba(0, 0, 0, 0.4)",
-        "activeColor": "rgba(0, 0, 0, 0.8)"
+        "activeColor": "rgba(0, 0, 0, 0.8)",
+        "indexColor": "rgba(0, 0, 0, 0.8)"
     },
     "index": {
         "recTitleColor": "rgba(0, 0, 0, 0.8)",

src/views/Index/Index.vue

@@ -308,7 +308,7 @@ getActivityList(3).then(({ data }) => {
         margin-left: 40px;
         background: var(--index-foodBg);
         border-radius: 32px;
-        border: 4px solid rgba(246, 139, 81, 1);
+        border: var(--index-foodBorder);
         align-items: center;
         overflow: hidden;
         .title {
@@ -395,7 +395,7 @@ getActivityList(3).then(({ data }) => {
           font-size: 18px;
           line-height: 21px;
           text-align: center;
-          color: var(--menu-activeColor);
+          color: var(--menu-indexColor);
         }
       }
       .item + .item {