@@ -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;