feat: 店铺二维码弹窗背景文字颜色配置

src/base/ShopItem/ShopItem.vue

@@ -22,7 +22,13 @@
       <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
         <div v-if="isActive && isRow" class="qrcode-modal" @click="deactivate">
           <div class="content" @click.stop="void 0">
-            <div class="close" @click="deactivate"></div>
+            <div
+              class="close"
+              :style="{
+                backgroundImage: `url(${theme.images.brandQrcodeClose}) `
+              }"
+              @click="deactivate"
+            ></div>
             <QRCodeFromText
               class="qrcode"
               :size="135"
@@ -42,7 +48,7 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 
 const store = useStore()
-const { currentFloor, config } = storeToRefs(store)
+const { currentFloor, config, theme } = storeToRefs(store)
 
 const props = defineProps({
   shop: Object,
@@ -248,7 +254,7 @@ const deactivate = () => store.SET_SHOP(null)
     height: 300px;
     left: 391px;
     bottom: 427px;
-    background: rgba(255, 255, 255, 0.8);
+    background: var(--brand-qrcodeBg, rgba(255, 255, 255, 0.8));
     box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(7px);
     border-radius: var(--global-radius, 12px);
@@ -261,7 +267,7 @@ const deactivate = () => store.SET_SHOP(null)
       height: 56px;
       right: 8px;
       top: 8px;
-      background: center / cover no-repeat url(./close.png);
+      background: center / cover no-repeat;
     }
     .qrcode {
       width: 150px;
@@ -277,7 +283,7 @@ const deactivate = () => store.SET_SHOP(null)
       line-height: 23px;
       text-align: center;
       margin-top: 27px;
-      color: rgba(0, 0, 0, 0.8);
+      color: var(--brand-qrcodeTextColor, rgba(0, 0, 0, 0.8));
     }
   }
 }

src/themes/business/style.json

@@ -63,7 +63,9 @@
     "color": "rgba(0, 0, 0, 0.8)",
     "metaColor": "rgba(0, 0, 0, 0.6)",
     "floorNameColor": "rgba(0, 0, 0, 0.8)",
-    "floorMetaColor": "rgba(0, 0, 0, 0.6)"
+    "floorMetaColor": "rgba(0, 0, 0, 0.6)",
+    "qrcodeBg": "rgba(255, 255, 255, 0.8)",
+    "qrcodeTextColor": "rgba(0, 0, 0, 0.8)"
   },
   "food": {
     "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)",

src/themes/dark/style.json

@@ -63,7 +63,9 @@
     "color": "#FFFFFF",
     "metaColor": "rgba(255, 255, 255, 0.6)",
     "floorNameColor": "#FFFFFF",
-    "floorMetaColor": "rgba(255, 255, 255, 0.8)"
+    "floorMetaColor": "rgba(255, 255, 255, 0.8)",
+    "qrcodeBg": "rgba(0, 0, 0, 0.8)",
+    "qrcodeTextColor": "#FFFFFF"
   },
   "food": {
     "background": "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)",

src/themes/fashion/style.json

@@ -63,7 +63,9 @@
     "color": "rgba(0, 0, 0, 0.8)",
     "metaColor": "rgba(0, 0, 0, 0.6)",
     "floorNameColor": "#fff",
-    "floorMetaColor": "rgba(255, 255, 255, 0.8)"
+    "floorMetaColor": "rgba(255, 255, 255, 0.8)",
+    "qrcodeBg": "rgba(255, 255, 255, 0.8)",
+    "qrcodeTextColor": "rgba(0, 0, 0, 0.8)"
   },
   "food": {
     "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)",

src/themes/highend/style.json

@@ -63,7 +63,9 @@
     "color": "rgba(0, 0, 0, 0.8)",
     "metaColor": "rgba(0, 0, 0, 0.6)",
     "floorNameColor": "#fff",
-    "floorMetaColor": "rgba(255, 255, 255, 0.8)"
+    "floorMetaColor": "rgba(255, 255, 255, 0.8)",
+    "qrcodeBg": "rgba(255, 255, 255, 0.8)",
+    "qrcodeTextColor": "rgba(0, 0, 0, 0.8)"
   },
   "food": {
     "background": "linear-gradient(180deg, rgba(219, 194, 161, 0) 0%, #DBC2A1 100%, #DBC2A1 100%)",

src/themes/luxury/style.json

@@ -63,7 +63,9 @@
     "color": "rgba(0, 0, 0, 0.8)",
     "metaColor": "rgba(0, 0, 0, 0.6)",
     "floorNameColor": "rgba(0, 0, 0, 0.8)",
-    "floorMetaColor": "rgba(0, 0, 0, 0.6)"
+    "floorMetaColor": "rgba(0, 0, 0, 0.6)",
+    "qrcodeBg": "rgba(255, 255, 255, 0.8)",
+    "qrcodeTextColor": "rgba(0, 0, 0, 0.8)"
   },
   "food": {
     "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)",

src/themes/main/style.json

@@ -63,7 +63,9 @@
     "color": "rgba(0, 0, 0, 0.8)",
     "metaColor": "rgba(0, 0, 0, 0.6)",
     "floorNameColor": "rgba(0, 0, 0, 0.8)",
-    "floorMetaColor": "rgba(0, 0, 0, 0.6)"
+    "floorMetaColor": "rgba(0, 0, 0, 0.6)",
+    "qrcodeBg": "rgba(255, 255, 255, 0.8)",
+    "qrcodeTextColor": "rgba(0, 0, 0, 0.8)"
   },
   "food": {
     "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)",

src/views/Guide/grid.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13ZM15 5V9H19V5H15ZM15 15V19H19V15H15ZM5 5V9H9V5H5ZM5 15V19H9V15H5Z" fill="black" fill-opacity="0.4"/>
-</svg>

src/views/Guide/gridActive.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 3H11V11H3V3ZM3 13H11V21H3V13ZM13 3H21V11H13V3ZM13 13H21V21H13V13ZM15 5V9H19V5H15ZM15 15V19H19V15H15ZM5 5V9H9V5H5ZM5 15V19H9V15H5Z" fill="black" fill-opacity="0.8"/>
-</svg>

src/views/Guide/row.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="black" fill-opacity="0.4"/>
-</svg>

src/views/Guide/rowActive.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="black" fill-opacity="0.8"/>
-</svg>