feat: 横板导览楼层背景配置

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)",

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)",

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)",

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)",

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",

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)",

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