Browse Source

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

dev
jiannibang 4 years ago
parent
commit
0f02982251
  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. 130
      src/themes/fashion/style.json
  12. 132
      src/themes/highend/style.json
  13. 130
      src/themes/main/style.json
  14. 2
      src/views/Billboard/Billboard.vue

4
src/base/ShopItem/ShopItem.vue

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

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/store/arrows/8002.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/store/arrows/8003.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 896 B

BIN
src/store/arrows/8004.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/store/arrows/8005.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/store/arrows/8006.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/store/arrows/8007.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 895 B

BIN
src/store/arrows/8008.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

130
src/themes/fashion/style.json

@ -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"
}
}

132
src/themes/highend/style.json

@ -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"
}
}

130
src/themes/main/style.json

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

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

Loading…
Cancel
Save