feat: 增加首页文字颜色配置

src/components/PublicComponent/PublicComponent.vue

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

src/themes/fashion/style.json

@@ -43,6 +43,8 @@
     "guideBorder": "2px solid rgba(255, 255, 255, 0.6)",
     "guideTopBg": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)",
     "guideQrcodeBg": "#ffffff",
+    "guideColor": "#000000",
+    "guideMetaColor": "rgba(0, 0, 0, 0.6)",
     "foodBg": "rgba(255, 255, 255, 0.6)",
     "recBg": "rgba(255, 255, 255, 0.6)",
     "recBorder": "2px solid rgba(255, 255, 255, 0.6)"

src/themes/highend/style.json

@@ -43,6 +43,8 @@
     "guideBorder": "none",
     "guideTopBg": "linear-gradient(180deg, #64554D 0%, #B39B85 100%)",
     "guideQrcodeBg": "rgba(255, 255, 255, 0.4)",
+    "guideColor": "#000000",
+    "guideMetaColor": "rgba(0, 0, 0, 0.6)",
     "foodBg": "linear-gradient(180deg, #64554D 0%, #B39B85 100%)",
     "foodBorder": "4px solid #6E5E54",
     "recBg": "linear-gradient(180deg, #64554D 0%, #B39B85 100%)",

src/themes/index.js

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

src/themes/luxury/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/luxury/style.json

@@ -0,0 +1,94 @@
+{
+  "global": {
+    "background": "bottom / cover no-repeat",
+    "appBackground": "#E7E7E7"
+  },
+  "weather": {
+    "iconColor": "#000",
+    "textColor": "#000"
+  },
+  "time": {
+    "timeColor": "#000",
+    "monthColor": "#000",
+    "weekColor": "#D3AB80"
+  },
+  "searchBar": {
+    "backBorderRadius": "24px",
+    "background": "#fff",
+    "border": "2px solid rgba(210, 169, 126, 1)",
+    "borderRadius": "24px",
+    "placeholderColor": "rgba(0, 0, 0, 0.2)",
+    "stickBg": "#D3AB80",
+    "color": "rgba(0, 0, 0, 0.8)"
+  },
+  "menu": {
+    "bg1": "rgba(255, 255, 255, 0.4)",
+    "bg2": "rgba(255, 255, 255, 0.4)",
+    "bg3": "rgba(255, 255, 255, 0.4)",
+    "bg4": "rgba(255, 255, 255, 0.4)",
+    "bg5": "rgba(255, 255, 255, 0.4)",
+    "activeBg1": "#ffffff",
+    "activeBg2": "#ffffff",
+    "activeBg3": "#ffffff",
+    "activeBg4": "#ffffff",
+    "activeBg5": "#ffffff",
+    "color": "rgba(0, 0, 0, 0.4)",
+    "activeColor": "rgba(0, 0, 0, 0.8)",
+    "indexColor": "rgba(0, 0, 0, 0.8)",
+    "barBg": "#D3AB80"
+  },
+  "index": {
+    "recTitleColor": "rgba(0, 0, 0, 0.8)",
+    "guideBackground": "#6E5E54",
+    "guideBorder": "none",
+    "guideTopBg": "linear-gradient(180deg, #D2A97E 0%, #EDD59E 100%)",
+    "guideQrcodeBg": "rgba(255, 255, 255, 0.2)",
+    "guideColor": "#fff",
+    "guideMetaColor": "rgba(255, 255, 255, 0.8)",
+    "foodBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
+    "recBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
+    "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)"
+  },
+  "map": {
+    "background": "#E7E7E7"
+  },
+  "billboard": {
+    "background": "center / cover no-repeat",
+    "arrowRadius": "100px",
+    "titleColor": "#000000",
+    "metaColor": "rgba(0, 0, 0, 0.6)"
+  },
+  "guide": {
+    "floorBg": "#FFFFFF",
+    "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #D2A97E 0%, #EDD59E 100%), #E7E7E7",
+    "arrowRadius": "100px",
+    "floorColor": "rgba(0, 0, 0, 0.8)",
+    "floorActiveColor": "#FFFFFF",
+    "floorActiveBg": "linear-gradient(180deg, #D2A97E 0%, #EDD59E 100%)"
+  },
+  "search": {
+    "background": "linear-gradient(180deg, #E9E9E9 0%, #C9C9C9 100%)",
+    "barBackground": "#fff",
+    "placeholderMetaColor": "rgba(211, 171, 128, 1)",
+    "keyboardActiveBg": "linear-gradient(180deg, #D2A97E 0%, #EDD59E 100%)",
+    "writeColor": "#D3AB80"
+  },
+  "activities": {
+    "btnBg": "#D3AB80",
+    "btnColor": "#FFFFFF",
+    "detailBg": "#FFFFFF",
+    "radius": "16px"
+  }
+}

src/themes/main/style.json

@@ -43,6 +43,8 @@
     "guideBorder": "none",
     "guideTopBg": "linear-gradient(180deg, #435acd 0%, #749cf3 100%)",
     "guideQrcodeBg": "rgba(255, 255, 255, 0.2)",
+    "guideColor": "#000000",
+    "guideMetaColor": "rgba(0, 0, 0, 0.6)",
     "foodBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
     "recBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
     "recBorder": "none"

src/views/Billboard/Billboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="billboard">
+  <div class="billboard" :style="{ backgroundImage: theme.images.billboardBackgroundImg ? `url(${theme.images.billboardBackgroundImg})` : '' }">
     <div class="ip"></div>
     <div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })"></div>
     <div class="header" :style="{ backgroundImage: `url(${theme.images.billBoardBg})` }">

src/views/Index/Index.vue

@@ -22,7 +22,7 @@
               <div class="meta">{{ guideDesc }}</div>
               <img src="./guideImg.svg" />
             </div>
-            <div class="meta1">当前位置<img src="./pos.svg" /></div>
+            <div class="meta1">当前位置<img :src="theme.images.loc" /></div>
             <div class="meta2">{{ bf }}</div>
             <div class="bottom-right">
               <QRCodeFromText
@@ -236,7 +236,7 @@ getActivityList(3).then(({ data }) => {
           font-size: 14px;
           line-height: 16px;
           text-align: center;
-          color: rgba(0, 0, 0, 0.6);
+          color: var(--index-guideMetaColor);
           .qrcode {
             position: absolute;
             width: 84px;
@@ -254,7 +254,7 @@ getActivityList(3).then(({ data }) => {
           font-weight: 700;
           font-size: 20px;
           line-height: 23px;
-          color: rgba(0, 0, 0, 0.6);
+          color: var(--index-guideMetaColor);
           margin-bottom: 6px;
           img {
             width: 20px;
@@ -266,7 +266,7 @@ getActivityList(3).then(({ data }) => {
           font-weight: 900;
           font-size: 32px;
           line-height: 38px;
-          color: #000000;
+          color: var(--index-guideColor);
         }
       }
       .food,

src/views/Index/pos.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 17.4167L14.125 13.2917C14.9408 12.4759 15.4963 11.4365 15.7213 10.3049C15.9463 9.17337 15.8308 8.00051 15.3892 6.93465C14.9477 5.86878 14.2 4.95777 13.2408 4.31682C12.2815 3.67587 11.1537 3.33377 10 3.33377C8.8463 3.33377 7.71851 3.67587 6.75924 4.31682C5.79997 4.95777 5.05229 5.86878 4.61076 6.93465C4.16923 8.00051 4.05368 9.17337 4.27871 10.3049C4.50374 11.4365 5.05926 12.4759 5.875 13.2917L10 17.4167ZM10 19.7734L4.69667 14.47C3.64779 13.4211 2.93349 12.0847 2.64411 10.6299C2.35473 9.17504 2.50326 7.66704 3.07092 6.2966C3.63858 4.92616 4.59987 3.75483 5.83324 2.93072C7.0666 2.10661 8.51665 1.66675 10 1.66675C11.4834 1.66675 12.9334 2.10661 14.1668 2.93072C15.4001 3.75483 16.3614 4.92616 16.9291 6.2966C17.4968 7.66704 17.6453 9.17504 17.3559 10.6299C17.0665 12.0847 16.3522 13.4211 15.3033 14.47L10 19.7734ZM10 10.8334C10.442 10.8334 10.866 10.6578 11.1785 10.3452C11.4911 10.0326 11.6667 9.60871 11.6667 9.16668C11.6667 8.72466 11.4911 8.30073 11.1785 7.98817C10.866 7.67561 10.442 7.50002 10 7.50002C9.55798 7.50002 9.13405 7.67561 8.82149 7.98817C8.50893 8.30073 8.33334 8.72466 8.33334 9.16668C8.33334 9.60871 8.50893 10.0326 8.82149 10.3452C9.13405 10.6578 9.55798 10.8334 10 10.8334ZM10 12.5C9.11595 12.5 8.2681 12.1488 7.64298 11.5237C7.01786 10.8986 6.66667 10.0507 6.66667 9.16668C6.66667 8.28263 7.01786 7.43478 7.64298 6.80966C8.2681 6.18454 9.11595 5.83335 10 5.83335C10.8841 5.83335 11.7319 6.18454 12.357 6.80966C12.9821 7.43478 13.3333 8.28263 13.3333 9.16668C13.3333 10.0507 12.9821 10.8986 12.357 11.5237C11.7319 12.1488 10.8841 12.5 10 12.5Z" fill="black" fill-opacity="0.6"/>
-</svg>