diff --git a/src/themes/business/style.json b/src/themes/business/style.json index 1f992a7..b30f786 100644 --- a/src/themes/business/style.json +++ b/src/themes/business/style.json @@ -88,6 +88,7 @@ "guide": { "floorBg": "linear-gradient(113.71deg, #435acd 0%, #749cf3 100%)", "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #334B6F 0%, #728EB5 100%), #dee6f6", + "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #dee6f6", "arrowRadius": "0", "floorColor": "#FFFFFF", "floorActiveColor": "rgba(0, 0, 0, 0.8)", diff --git a/src/themes/dark/style.json b/src/themes/dark/style.json index aa0a2f8..c9543eb 100644 --- a/src/themes/dark/style.json +++ b/src/themes/dark/style.json @@ -88,6 +88,7 @@ "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", + "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #dee6f6", "arrowRadius": "100px", "floorColor": "#FFFFFF", "floorActiveColor": "rgba(0, 0, 0, 0.8)", diff --git a/src/themes/fashion/style.json b/src/themes/fashion/style.json index 8648645..23a0d55 100644 --- a/src/themes/fashion/style.json +++ b/src/themes/fashion/style.json @@ -88,6 +88,7 @@ "guide": { "floorBg": "linear-gradient(90deg, #302159 0%, #7756b4 96.35%)", "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6257d7 0%, #f191c0 100%), #dee6f6", + "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #dee6f6", "arrowRadius": "100px", "floorColor": "#FFFFFF", "floorActiveColor": "rgba(0, 0, 0, 0.8)", diff --git a/src/themes/highend/style.json b/src/themes/highend/style.json index 35b3693..b2b0d1e 100644 --- a/src/themes/highend/style.json +++ b/src/themes/highend/style.json @@ -88,6 +88,7 @@ "guide": { "floorBg": "linear-gradient(90deg, #BA9B7A 0%, #DBC2A1 100%)", "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #64554D 0%, #B39B85 100%), #F2EEE8", + "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #F2EEE8", "arrowRadius": "4px", "floorColor": "rgba(0, 0, 0, 0.6)", "floorActiveColor": "rgba(0, 0, 0, 0.8)", diff --git a/src/themes/luxury/style.json b/src/themes/luxury/style.json index 37173ae..b6f118b 100644 --- a/src/themes/luxury/style.json +++ b/src/themes/luxury/style.json @@ -86,8 +86,9 @@ "metaColor": "rgba(0, 0, 0, 0.6)" }, "guide": { - "floorBg": "#FFFFFF", + "floorBg": "linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%)", "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #D2A97E 0%, #EDD59E 100%), #E7E7E7", + "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #E7E7E7", "arrowRadius": "100px", "floorColor": "rgba(0, 0, 0, 0.8)", "floorActiveColor": "#FFFFFF", diff --git a/src/themes/main/style.json b/src/themes/main/style.json index db3b91c..ad2ba18 100644 --- a/src/themes/main/style.json +++ b/src/themes/main/style.json @@ -88,6 +88,7 @@ "guide": { "floorBg": "linear-gradient(113.71deg, #435acd 0%, #749cf3 100%)", "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6", + "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #dee6f6", "arrowRadius": "100px", "floorColor": "#FFFFFF", "floorActiveColor": "rgba(0, 0, 0, 0.8)", diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue index 9615d70..709babd 100644 --- a/src/views/Guide/Guide.vue +++ b/src/views/Guide/Guide.vue @@ -441,11 +441,10 @@ watch( z-index: 60; display: block; overflow: hidden; - background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%); + background: var(--guide-floorBg); &.all { width: calc(100vw - 510px); - background: right / 100px 100vh no-repeat linear-gradient(113.71deg, #435acd 0%, #749cf3 100%), - left / calc(100vw - 510px - 100px) 100vh no-repeat linear-gradient(113.71deg, #dee6f6 0%, #dee6f6 100%); + background: var(--guide-allFloorBgH); } &::-webkit-scrollbar { display: none; @@ -514,7 +513,7 @@ watch( font-size: 28px; line-height: 96%; text-align: center; - color: #ffffff; + color: var(--guide-floorColor); transition: all 0.5s; &.all { font-weight: 700; @@ -532,10 +531,10 @@ watch( height: 20px; display: flex; content: '您在本层'; - background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%); + background: var(--guide-currentBg); font-weight: 700; font-size: 12px; - color: rgba(0, 0, 0, 0.8); + color: var(--guide-currentColor); align-items: center; justify-content: center; }