diff --git a/src/base/ShopItem/ShopItem.vue b/src/base/ShopItem/ShopItem.vue index d86b3e0..6809371 100644 --- a/src/base/ShopItem/ShopItem.vue +++ b/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 { diff --git a/src/components/ActivitiesList/ActivitiesList.vue b/src/components/ActivitiesList/ActivitiesList.vue index f64f726..23e6118 100644 --- a/src/components/ActivitiesList/ActivitiesList.vue +++ b/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; diff --git a/src/components/KeyboardByLetter/KeyboardByLetter.vue b/src/components/KeyboardByLetter/KeyboardByLetter.vue index 6463998..70ff122 100644 --- a/src/components/KeyboardByLetter/KeyboardByLetter.vue +++ b/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; } } diff --git a/src/components/KeyboardByWritten/KeyboardByWritten.vue b/src/components/KeyboardByWritten/KeyboardByWritten.vue index 0791bfd..fe7844e 100644 --- a/src/components/KeyboardByWritten/KeyboardByWritten.vue +++ b/src/components/KeyboardByWritten/KeyboardByWritten.vue @@ -5,7 +5,15 @@
{{ item }}
- +
@@ -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); } } } diff --git a/src/components/PublicComponent/Tabs.vue b/src/components/PublicComponent/Tabs.vue index 7b2b755..aca0012 100644 --- a/src/components/PublicComponent/Tabs.vue +++ b/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; } } diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue index aaf07a9..0547c45 100644 --- a/src/components/Search/Search.vue +++ b/src/components/Search/Search.vue @@ -2,11 +2,11 @@
-
+
请输入中英文首字母查询,例如 XBK (星巴克)
- +
@@ -38,9 +38,7 @@
-
- -
+
@@ -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; - } } diff --git a/src/themes/fashion/grid.png b/src/themes/fashion/grid.png new file mode 100644 index 0000000..098b5cf Binary files /dev/null and b/src/themes/fashion/grid.png differ diff --git a/src/themes/fashion/gridActive.png b/src/themes/fashion/gridActive.png new file mode 100644 index 0000000..368f960 Binary files /dev/null and b/src/themes/fashion/gridActive.png differ diff --git a/src/themes/fashion/row.png b/src/themes/fashion/row.png new file mode 100644 index 0000000..e310d9d Binary files /dev/null and b/src/themes/fashion/row.png differ diff --git a/src/themes/fashion/rowActive.png b/src/themes/fashion/rowActive.png new file mode 100644 index 0000000..a9a6359 Binary files /dev/null and b/src/themes/fashion/rowActive.png differ diff --git a/src/themes/fashion/searchClear.png b/src/themes/fashion/searchClear.png new file mode 100644 index 0000000..44fa019 Binary files /dev/null and b/src/themes/fashion/searchClear.png differ diff --git a/src/themes/fashion/searchClose.png b/src/themes/fashion/searchClose.png new file mode 100644 index 0000000..a24127f Binary files /dev/null and b/src/themes/fashion/searchClose.png differ diff --git a/src/themes/fashion/style.json b/src/themes/fashion/style.json index fba919b..23e41f7 100644 --- a/src/themes/fashion/style.json +++ b/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" } } diff --git a/src/themes/highend/grid.png b/src/themes/highend/grid.png new file mode 100644 index 0000000..0f077e1 Binary files /dev/null and b/src/themes/highend/grid.png differ diff --git a/src/themes/highend/gridActive.png b/src/themes/highend/gridActive.png new file mode 100644 index 0000000..91c99ce Binary files /dev/null and b/src/themes/highend/gridActive.png differ diff --git a/src/themes/highend/row.png b/src/themes/highend/row.png new file mode 100644 index 0000000..49d6f20 Binary files /dev/null and b/src/themes/highend/row.png differ diff --git a/src/themes/highend/rowActive.png b/src/themes/highend/rowActive.png new file mode 100644 index 0000000..866e7b8 Binary files /dev/null and b/src/themes/highend/rowActive.png differ diff --git a/src/themes/highend/searchClear.png b/src/themes/highend/searchClear.png new file mode 100644 index 0000000..ed947a6 Binary files /dev/null and b/src/themes/highend/searchClear.png differ diff --git a/src/themes/highend/searchClose.png b/src/themes/highend/searchClose.png new file mode 100644 index 0000000..c10f99b Binary files /dev/null and b/src/themes/highend/searchClose.png differ diff --git a/src/themes/highend/style.json b/src/themes/highend/style.json index 9bedb35..7fde472 100644 --- a/src/themes/highend/style.json +++ b/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" } } diff --git a/src/themes/main/grid.png b/src/themes/main/grid.png new file mode 100644 index 0000000..098b5cf Binary files /dev/null and b/src/themes/main/grid.png differ diff --git a/src/themes/main/gridActive.png b/src/themes/main/gridActive.png new file mode 100644 index 0000000..368f960 Binary files /dev/null and b/src/themes/main/gridActive.png differ diff --git a/src/themes/main/row.png b/src/themes/main/row.png new file mode 100644 index 0000000..e310d9d Binary files /dev/null and b/src/themes/main/row.png differ diff --git a/src/themes/main/rowActive.png b/src/themes/main/rowActive.png new file mode 100644 index 0000000..a9a6359 Binary files /dev/null and b/src/themes/main/rowActive.png differ diff --git a/src/themes/main/searchClear.png b/src/themes/main/searchClear.png new file mode 100644 index 0000000..840894a Binary files /dev/null and b/src/themes/main/searchClear.png differ diff --git a/src/themes/main/searchClose.png b/src/themes/main/searchClose.png new file mode 100644 index 0000000..101bbb3 Binary files /dev/null and b/src/themes/main/searchClose.png differ diff --git a/src/themes/main/style.json b/src/themes/main/style.json index 75ea4d3..a4d8adb 100644 --- a/src/themes/main/style.json +++ b/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" } } diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue index 0c6968b..b3bdc8a 100644 --- a/src/views/Guide/Guide.vue +++ b/src/views/Guide/Guide.vue @@ -50,14 +50,10 @@
-
- - -
-
- - -
+ + + +
@@ -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;