huangmh
/
client_iot-daoshi-template-v
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 水牌和导览箭头圆角半径配置

v1.0.1
jiannibang 4 years ago
parent
f4cd7c63b5
commit
0f02982251
14 changed files with 210 additions and 198 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/base/ShopItem/ShopItem.vue
  2. 10
      src/components/PublicComponent/PublicComponent.vue
  3. BIN
      src/store/arrows/8001.png
  4. BIN
      src/store/arrows/8002.png
  5. BIN
      src/store/arrows/8003.png
  6. BIN
      src/store/arrows/8004.png
  7. BIN
      src/store/arrows/8005.png
  8. BIN
      src/store/arrows/8006.png
  9. BIN
      src/store/arrows/8007.png
  10. BIN
      src/store/arrows/8008.png
  11. 128
      src/themes/fashion/style.json
  12. 130
      src/themes/highend/style.json
  13. 128
      src/themes/main/style.json
  14. 2
      src/views/Billboard/Billboard.vue

4
src/base/ShopItem/ShopItem.vue
View File

@ -107,6 +107,8 @@ const deactivate = () => store.SET_SHOP(null)
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left: 7px; margin-left: 7px;
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
border-radius: var(--guide-arrowRadius);
} }
&.isRow { &.isRow {
display: flex; display: flex;
@ -138,6 +140,8 @@ const deactivate = () => store.SET_SHOP(null)
.dir { .dir {
width: 32px; width: 32px;
height: 32px; height: 32px;
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
border-radius: var(--guide-arrowRadius);
} }
} }
&.isFood { &.isFood {

10
src/components/PublicComponent/PublicComponent.vue
View File

@ -77,11 +77,11 @@ onMounted(() => {
}, 30000) }, 30000)
store.SET_CURRENT_THEME('highend') store.SET_CURRENT_THEME('highend')
// let i = 0
// setInterval(() => {
// i++
// store.SET_CURRENT_THEME(['main', 'fashion', 'highend'][i % 3])
// }, 10000)
let i = 0
setInterval(() => {
i++
store.SET_CURRENT_THEME(['main', 'fashion', 'highend'][i % 3])
}, 10000)
window.addEventListener('touchend', checkHandleScreen) window.addEventListener('touchend', checkHandleScreen)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {

BIN
src/store/arrows/8001.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/store/arrows/8002.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/store/arrows/8003.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 896 B

BIN
src/store/arrows/8004.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/store/arrows/8005.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/store/arrows/8006.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/store/arrows/8007.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 895 B

BIN
src/store/arrows/8008.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

128
src/themes/fashion/style.json
View File

@ -1,65 +1,67 @@
{ {
"global": {
"background": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)"
},
"weather": {
"iconColor": "#fff",
"textColor": "#fff"
},
"time": {
"timeColor": "#fff",
"monthColor": "#fff",
"weekColor": "#f0b92b"
},
"searchBar": {
"backBorderRadius": "100px",
"background": "rgba(255, 255, 255, 0.6)",
"border": "2px solid #ffffff",
"borderRadius": "100px",
"placeholderColor": "rgba(0, 0, 0, 0.6)",
"stickBg": "#747ED3"
},
"menu": {
"bg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
"bg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
"bg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
"bg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
"bg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
"activeBg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
"activeBg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
"activeBg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
"activeBg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
"activeBg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
"color": "#ffffff",
"activeColor": "#ffffff",
"indexColor": "#FFFFFF"
},
"index": {
"recTitleColor": "#fff",
"guideBackground": "rgba(255, 255, 255, 0.6)",
"guideBorder": "2px solid rgba(255, 255, 255, 0.6)",
"guideTopBg": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)",
"guideQrcodeBg": "#ffffff",
"foodBg": "rgba(255, 255, 255, 0.6)",
"recBg": "rgba(255, 255, 255, 0.6)",
"recBorder": "2px solid rgba(255, 255, 255, 0.6)"
},
"brand": {
"floorNameColor": "#fff",
"floorMetaColor": "rgba(255, 255, 255, 0.8)"
},
"carousel": {
"titleColor": "#fff",
"introColor": "#fff"
},
"map": {
"background": "#dee2f6"
},
"billboard": {
"background": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)"
},
"guide": {
"floorBg": "linear-gradient(90deg, #302159 0%, #7756b4 96.35%)",
"allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6257d7 0%, #f191c0 100%), #dee6f6"
}
"global": {
"background": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)"
},
"weather": {
"iconColor": "#fff",
"textColor": "#fff"
},
"time": {
"timeColor": "#fff",
"monthColor": "#fff",
"weekColor": "#f0b92b"
},
"searchBar": {
"backBorderRadius": "100px",
"background": "rgba(255, 255, 255, 0.6)",
"border": "2px solid #ffffff",
"borderRadius": "100px",
"placeholderColor": "rgba(0, 0, 0, 0.6)",
"stickBg": "#747ED3"
},
"menu": {
"bg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
"bg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
"bg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
"bg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
"bg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
"activeBg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
"activeBg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
"activeBg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
"activeBg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
"activeBg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
"color": "#ffffff",
"activeColor": "#ffffff",
"indexColor": "#FFFFFF"
},
"index": {
"recTitleColor": "#fff",
"guideBackground": "rgba(255, 255, 255, 0.6)",
"guideBorder": "2px solid rgba(255, 255, 255, 0.6)",
"guideTopBg": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)",
"guideQrcodeBg": "#ffffff",
"foodBg": "rgba(255, 255, 255, 0.6)",
"recBg": "rgba(255, 255, 255, 0.6)",
"recBorder": "2px solid rgba(255, 255, 255, 0.6)"
},
"brand": {
"floorNameColor": "#fff",
"floorMetaColor": "rgba(255, 255, 255, 0.8)"
},
"carousel": {
"titleColor": "#fff",
"introColor": "#fff"
},
"map": {
"background": "#dee2f6"
},
"billboard": {
"background": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)",
"arrowRadius": "100px"
},
"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"
}
} }

130
src/themes/highend/style.json
View File

@ -1,66 +1,68 @@
{ {
"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"
}
"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%)",
"arrowRadius": "100px"
},
"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"
}
} }

128
src/themes/main/style.json
View File

@ -1,65 +1,67 @@
{ {
"global": {
"background": "#dee6f6"
},
"weather": {
"iconColor": "#000",
"textColor": "#000"
},
"time": {
"timeColor": "#000",
"monthColor": "#000",
"weekColor": "#516dd8"
},
"searchBar": {
"backBorderRadius": "24px",
"background": "#fff",
"border": "none",
"borderRadius": "24px",
"placeholderColor": "rgba(0, 0, 0, 0.2)",
"stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)"
},
"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)"
},
"index": {
"recTitleColor": "rgba(0, 0, 0, 0.8)",
"guideBackground": "linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%)",
"guideBorder": "none",
"guideTopBg": "linear-gradient(180deg, #435acd 0%, #749cf3 100%)",
"guideQrcodeBg": "rgba(255, 255, 255, 0.2)",
"foodBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
"recBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
"recBorder": "none"
},
"brand": {
"floorNameColor": "rgba(0, 0, 0, 0.8)",
"floorMetaColor": "rgba(0, 0, 0, 0.6)"
},
"carousel": {
"titleColor": "rgba(0, 0, 0, 0.8)",
"introColor": "rgba(0, 0, 0, 0.6)"
},
"map": {
"background": "none"
},
"billboard": {
"background": "#dee6f6"
},
"guide": {
"floorBg": "linear-gradient(113.71deg, #435acd 0%, #749cf3 100%)",
"allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6"
}
"global": {
"background": "#dee6f6"
},
"weather": {
"iconColor": "#000",
"textColor": "#000"
},
"time": {
"timeColor": "#000",
"monthColor": "#000",
"weekColor": "#516dd8"
},
"searchBar": {
"backBorderRadius": "24px",
"background": "#fff",
"border": "none",
"borderRadius": "24px",
"placeholderColor": "rgba(0, 0, 0, 0.2)",
"stickBg": "linear-gradient(180deg, #6C7CA6 0%, #879ACA 100%)"
},
"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)"
},
"index": {
"recTitleColor": "rgba(0, 0, 0, 0.8)",
"guideBackground": "linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%)",
"guideBorder": "none",
"guideTopBg": "linear-gradient(180deg, #435acd 0%, #749cf3 100%)",
"guideQrcodeBg": "rgba(255, 255, 255, 0.2)",
"foodBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
"recBg": "linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%)",
"recBorder": "none"
},
"brand": {
"floorNameColor": "rgba(0, 0, 0, 0.8)",
"floorMetaColor": "rgba(0, 0, 0, 0.6)"
},
"carousel": {
"titleColor": "rgba(0, 0, 0, 0.8)",
"introColor": "rgba(0, 0, 0, 0.6)"
},
"map": {
"background": "none"
},
"billboard": {
"background": "#dee6f6",
"arrowRadius": "100px"
},
"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"
}
} }

2
src/views/Billboard/Billboard.vue
View File

@ -362,6 +362,8 @@ watch(scrollLefts, _scrollLefts => {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 12px; margin-right: 12px;
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
border-radius: var(--billboard-arrowRadius);
} }
} }
.shop + .shop { .shop + .shop {

Write Preview
Loading…
Cancel
Save