feat: 深色初版

src/components/PublicComponent/PublicComponent.vue

@@ -76,7 +76,7 @@ onMounted(() => {
     send(`type:online`)
   }, 30000)
 
-  store.SET_CURRENT_THEME('business')
+  store.SET_CURRENT_THEME('dark')
   // let i = 0
   // setInterval(() => {
   //   i++

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

@@ -0,0 +1,98 @@
+{
+  "global": {
+    "background": "linear-gradient(162.44deg, #3E3D59 0%, #262837 100%)",
+    "appBackground": "#DEE6F6",
+    "radius": "8px"
+  },
+  "weather": {
+    "iconColor": "#FFFFFF",
+    "textColor": "#FFFFFF"
+  },
+  "time": {
+    "timeColor": "#FFFFFF",
+    "monthColor": "#FFFFFF",
+    "weekColor": "#516DD8"
+  },
+  "searchBar": {
+    "backBorderRadius": "8px",
+    "background": "#fff",
+    "border": "none",
+    "borderRadius": "8px",
+    "placeholderColor": "rgba(0, 0, 0, 0.2)",
+    "stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)",
+    "color": "rgba(0, 0, 0, 0.8)"
+  },
+  "menu": {
+    "bg1": "rgba(255, 255, 255, 0.1)",
+    "bg2": "rgba(255, 255, 255, 0.1)",
+    "bg3": "rgba(255, 255, 255, 0.1)",
+    "bg4": "rgba(255, 255, 255, 0.1)",
+    "bg5": "rgba(255, 255, 255, 0.1)",
+    "activeBg1": "#ffffff",
+    "activeBg2": "#ffffff",
+    "activeBg3": "#ffffff",
+    "activeBg4": "#ffffff",
+    "activeBg5": "#ffffff",
+    "color": "rgba(0, 0, 0, 0.8)",
+    "activeColor": "#fff",
+    "indexColor": "#FFFFFF",
+    "barBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)"
+  },
+  "index": {
+    "recTitleColor": "#FFFFFF",
+    "guideBackground": "#516DD8",
+    "guideBorder": "none",
+    "guideTopBg": "linear-gradient(180deg, #3A6EE2 0%, #72C1ED 100%)",
+    "guideQrcodeBg": "rgba(255, 255, 255, 0.2)",
+    "guideColor": "#000000",
+    "guideMetaColor": "rgba(0, 0, 0, 0.8)",
+    "foodBg": "linear-gradient(180deg, #1D1D22 0%, #6D719C 100%)",
+    "foodBorder": "none",
+    "recBg": "linear-gradient(180deg, #1D1D22 0%, #6D719C 100%)",
+    "recBorder": "none"
+  },
+  "brand": {
+    "background": "rgba(0, 0, 0, 0.2)",
+    "floorNameColor": "#FFFFFF",
+    "floorMetaColor": "rgba(255, 255, 255, 0.8)"
+  },
+  "food": {
+    "background": "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)"
+  },
+  "carousel": {
+    "titleColor": "#FFFFFF",
+    "introColor": "rgba(255, 255, 255, 0.8)"
+  },
+  "map": {
+    "background": "#DEE6F6"
+  },
+  "billboard": {
+    "background": "linear-gradient(162.44deg, #3E3D59 0%, #262837 100%)",
+    "arrowRadius": "100px",
+    "titleColor": "#FFFFFF",
+    "metaColor": "rgba(255, 255, 255, 0.6)"
+  },
+  "guide": {
+    "floorBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)",
+    "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), #dee6f6",
+    "arrowRadius": "100px",
+    "floorColor": "#FFFFFF",
+    "floorActiveColor": "rgba(0, 0, 0, 0.8)",
+    "floorActiveBg": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%)",
+    "currentBg": "linear-gradient(99.5deg, #F0B92B 0%, #F9D556 100%)",
+    "currentColor": "rgba(0, 0, 0, 0.8)"
+  },
+  "search": {
+    "background": "linear-gradient(180deg, #494B63 0%, #5A5D82 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": "linear-gradient(180deg, #494B63 0%, #5A5D82 100%)",
+    "radius": "8px"
+  }
+}

src/themes/index.js

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

src/views/Index/Index.vue

@@ -43,8 +43,8 @@
               <img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
             </div>
           </div>
-          <div v-else class="rec" :style="{ backgroundImage: `url(${theme.images.recBg})` }" @click="goPage({ title: '品牌列表', path: '/brand' })">
-            <div class="title">
+          <div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
+            <div class="title" :style="{ backgroundImage: `url(${theme.images.recBg})` }">
               <h1>推荐品牌</h1>
               <h2>心动之选，拥抱美好生活</h2>
             </div>