From 5c70bef7b26b747b8992c67f4bed0b4aaf75a14f Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Thu, 26 Sep 2024 09:45:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E6=88=B7=E7=AB=AF=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=B1=95=E7=A4=BA=E9=87=8D=E5=81=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/base/ShopItem/ShopItem.vue | 203 ++++++++++++---------------------
 src/base/ShopItem/arrow.png    | Bin 332 -> 0 bytes
 src/base/ShopItem/arrow.vue    |  12 ++
 src/base/ShopItem/loc.png      | Bin 912 -> 0 bytes
 src/base/ShopItem/loc.vue      |  26 +++++
 src/base/ShopItem/picsCom.vue  |  77 +++++++++++++
 6 files changed, 189 insertions(+), 129 deletions(-)
 delete mode 100644 src/base/ShopItem/arrow.png
 create mode 100644 src/base/ShopItem/arrow.vue
 delete mode 100644 src/base/ShopItem/loc.png
 create mode 100644 src/base/ShopItem/loc.vue
 create mode 100644 src/base/ShopItem/picsCom.vue

diff --git a/src/base/ShopItem/ShopItem.vue b/src/base/ShopItem/ShopItem.vue
index 6d18170..9faa3da 100644
--- a/src/base/ShopItem/ShopItem.vue
+++ b/src/base/ShopItem/ShopItem.vue
@@ -58,25 +58,19 @@
       <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
         <div v-if="isActive && pics && pics.length" class="pic-modal" @click="deactivate">
           <div class="content" @click.stop="void 0">
-            <img loading="lazy" :src="'./static/offline' + shop.logoUrl" alt="" class="logo" />
-            <div class="name">{{ switchLanguage(shop, 'shopName') }}</div>
-            <div class="meta"><img src="./loc.png" class="loc" />{{ shop.floor }}</div>
-            <img class="close" src="./close.png" @click="deactivate" />
-            <QRCodeFromText
-              class="qrcode"
-              :size="135"
-              :text="`${config.mobileNav}?code=${currentFloor.projectCode}&s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
-            ></QRCodeFromText>
-            <div class="qrcode-meta">扫码导航<img src="./arrow.png" class="arrow" /></div>
-            <div class="pics">
-              <EffectFade :list="pics || []">
-                <template v-slot="{ item }">
-                  <div class="pics-wrapper">
-                    <img class="banner" :src="item" alt="" />
-                  </div>
-                </template>
-              </EffectFade>
+            <div class="header">
+              <img loading="lazy" :src="'./static/offline' + shop.logoUrl" alt="" class="logo" />
+              <div class="name">{{ switchLanguage(shop, 'shopName') }}</div>
+              <div class="meta"><loc />{{ shop.floor }}</div>
+              <img class="close" src="./close.png" @click="deactivate" />
+              <QRCodeFromText
+                class="qrcode"
+                :size="100"
+                :text="`${config.mobileNav}?code=${currentFloor.projectCode}&s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
+              ></QRCodeFromText>
+              <div class="qrcode-meta">扫码导航 <arrow /></div>
             </div>
+            <picsCom :pics="pics"></picsCom>
           </div></div></Transition
     ></Teleport>
   </div>
@@ -87,7 +81,10 @@ import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { computed } from 'vue'
-import EffectFade from '@/components/EffectFade/EffectFade.vue'
+import loc from './loc.vue'
+import arrow from './arrow.vue'
+import picsCom from './picsCom.vue'
+
 const store = useStore()
 const { currentFloor, config, theme, showMap, path, shopPicsMap } = storeToRefs(store)
 const isBrandShowMap = computed(() => showMap.value && (path.value === '/brand' || path.value === '/foods'))
@@ -423,7 +420,7 @@ const deactivate = () => store.SET_SHOP(null)
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1000;
+  z-index: 10000;
   .content {
     position: absolute;
     bottom: 0;
@@ -432,63 +429,71 @@ const deactivate = () => store.SET_SHOP(null)
     height: 870px;
     background: #fff;
     box-shadow: 0px 15px 24px 0px rgba(0, 0, 0, 0.05);
+    .header {
+      position: relative;
+      height: 180px;
+      background: var(--guide-floorBg);
+    }
     .logo {
       position: absolute;
-      top: 20px;
+      top: 30px;
       left: 68px;
-      width: 80px;
-      height: 80px;
-      border-radius: 12px;
+      width: 120px;
+      height: 120px;
+      border-radius: 16px;
       border: 1px solid var(--b-10, rgba(0, 0, 0, 0.1));
       background: var(--w-100, #fff);
-      padding: 4px;
+      padding: 10px;
     }
     .name {
       position: absolute;
-      top: 30px;
-      left: 172px;
-      color: var(--b-80, rgba(0, 0, 0, 0.8));
-      font-size: 24px;
+      top: 64px;
+      left: 220px;
+      color: var(--guide-floorColor);
+      font-size: 40px;
       font-style: normal;
       font-weight: 700;
-      line-height: 28px;
+      line-height: 47px;
     }
     .meta {
       position: absolute;
-      top: 66px;
-      left: 172px;
+      top: 123px;
+      left: 220px;
       height: 23px;
       display: inline-flex;
-      color: var(--b-60, rgba(0, 0, 0, 0.6));
+      color: var(--guide-floorColor);
       font-size: 20px;
       font-style: normal;
       font-weight: 700;
       align-items: center;
+      opacity: 0.8;
       .loc {
         width: 20px;
         height: 20px;
         margin-right: 8px;
+        fill: currentColor;
       }
     }
     .qrcode {
       position: absolute;
-      top: -50px;
-      right: 168px;
-      width: 150px;
-      height: 150px;
+      top: 30px;
+      right: 202px;
+      width: 120px;
+      height: 120px;
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: 12px;
+      border-radius: 16px;
       border: 1px solid var(--b-10, rgba(0, 0, 0, 0.1));
       background: var(--w-100, #fff);
     }
     .qrcode-meta {
       position: absolute;
       display: inline-flex;
-      top: 65px;
-      right: 334px;
-      color: var(--b-60, rgba(0, 0, 0, 0.6));
+      top: 122px;
+      right: 336px;
+      color: var(--guide-floorColor);
+      opacity: 0.6;
       font-size: 20px;
       font-style: normal;
       font-weight: 700;
@@ -502,53 +507,10 @@ const deactivate = () => store.SET_SHOP(null)
     }
     .close {
       position: absolute;
-      width: 80px;
-      height: 80px;
-      top: 20px;
-      right: 68px;
-    }
-    .pics {
-      position: absolute;
-      left: 68px;
+      width: 120px;
+      height: 120px;
+      top: 30px;
       right: 68px;
-      top: 120px;
-
-      :deep(.swiper) {
-        .swiper-pagination {
-          top: auto;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          width: auto;
-          margin: auto;
-          .swiper-pagination-bullet {
-            width: 34px !important;
-            height: 4px !important;
-            background: var(--b-10, rgba(0, 0, 0, 0.1));
-            border-radius: 6px !important;
-            opacity: inherit !important;
-            margin: 0;
-
-            &.swiper-pagination-bullet-active {
-              background: var(--VI--, #516dd8);
-              border-radius: 6px !important;
-            }
-          }
-        }
-      }
-      .pics-wrapper {
-        position: relative;
-        width: 944px;
-        height: 724px;
-        border-radius: 16px;
-        overflow: hidden;
-        .banner {
-          width: 100%;
-          height: 708px;
-          object-fit: cover;
-          border-radius: 16px;
-        }
-      }
     }
   }
 }
@@ -590,65 +552,48 @@ const deactivate = () => store.SET_SHOP(null)
       left: auto;
       right: 0;
       width: 610px;
-      height: 914px;
-      box-shadow: 0px 15px 24px 0px rgba(0, 0, 0, 0.05);
-      border-radius: 24px 24px 0 0;
+      height: 800px;
       .logo {
-        top: 40px;
-        left: 40px;
-        width: 150px;
-        height: 150px;
-        padding: 15px;
+        top: 30px;
+        left: 30px;
+        width: 120px;
+        height: 120px;
+        padding: 10px;
       }
       .name {
-        top: 74px;
-        left: 222px;
+        top: 40px;
+        right: 160px;
+        left: 180px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
       .meta {
-        top: 128px;
-        left: 222px;
+        top: 100px;
+        left: 180px;
         height: 28px;
         font-size: 24px;
       }
       .qrcode {
-        left: 40px;
-        bottom: 40px;
-        top: auto;
+        left: auto;
+        right: 30px;
+        bottom: auto;
+        top: 30px;
       }
       .qrcode-meta {
-        left: 222px;
-        bottom: 40px;
-        right: auto;
-        top: auto;
-        flex-direction: row-reverse;
+        top: 122px;
+        right: 158px;
         .arrow {
           margin-left: 0;
           margin-right: 4px;
-          transform: rotate(180deg);
         }
       }
       .close {
-        right: 40px;
-        bottom: 40px;
-        top: auto;
-      }
-      .pics {
-        position: absolute;
-        left: 15px;
-        right: 15px;
-        top: 230px;
-        .pics-wrapper {
-          width: 580px;
-          height: 451px;
-          border-radius: 16px;
-          overflow: hidden;
-          .banner {
-            width: 100%;
-            height: 435px;
-            object-fit: cover;
-            border-radius: 16px;
-          }
-        }
+        width: 80px;
+        height: 80px;
+        right: 30px;
+        bottom: auto;
+        top: -62px;
       }
     }
   }
diff --git a/src/base/ShopItem/arrow.png b/src/base/ShopItem/arrow.png
deleted file mode 100644
index b0ffc4e775036abedef9d5ce6de8b6dc5cb59842..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 332
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-Rj|IpLLF{Fa=?F~ad#zc`LAKNpw++KB6YHgFU
zr4;+c3>oLePkhT%rQe>L-Jeo-QhUWS`IZg?V`JmroU!)|kBA*?{J4Bi>^+_La!Nf7
z=YQl??BPsg(N37ZUB*_uJAuXKQ{Kh>wNC`soOjsF5yoKBnZVXy(<IAqsiTWwf@=tC
zgUTW!hEvL`m=~BN$>r`%S`>LD+WmiY=GU)(EZ++Whq6!UYd_WS>0^MXf+W8v<ED=X
z_$KtRr!~~rY+#zz!|vv=`Qw2fYIS_(YLfgt_njo_&)#<XuXW<s=7;w?ooCFPIrDG7
Zx!`Ln(=X1^K0wbhc)I$ztaD0e0su^ReF6Xg

diff --git a/src/base/ShopItem/arrow.vue b/src/base/ShopItem/arrow.vue
new file mode 100644
index 0000000..a8afc36
--- /dev/null
+++ b/src/base/ShopItem/arrow.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path class="color" d="M13.172 12.0003L8.22198 7.05026L9.63598 5.63626L16 12.0003L9.63598 18.3643L8.22198 16.9503L13.172 12.0003Z" />
+  </svg>
+</template>
+<style lang="scss" scoped>
+.arrow {
+  .color {
+    fill: var(--guide-floorColor);
+  }
+}
+</style>
diff --git a/src/base/ShopItem/loc.png b/src/base/ShopItem/loc.png
deleted file mode 100644
index ccdd7e304871ffb18ac6e66a9459d2545d2ef408..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 912
zcmV;B18@9^P)<h;3K|Lk000e1NJLTq001Ze001cn1^@s6N1|)U00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH10_jBK~#7F?U*lY
z6hRcmKS~i)(1b-G?huGpK*AXkI0*;@XEB(y=sFS<8e0WPEnrAEg8)e@Dz1_mL=lKP
zQ*kFMV7}~Z?(N=tvwvnuO~2%&JF_#hzj<%|ydH3&3!SenAx<04dfxh?e&KBD?6<RH
zM5ry`ma~DghsYp9nmd~~8#|k!p_&3F&YpX?Hu`~vpiKbjwU^L6HuoPr@$au93%S;o
z?LH#&YG;6tk$J8RweLS<tuwC8C&-pUSs$EzM+bl$JT28RRG&O#9dT)lunM||Y?7uf
zqk3S5^@^zD%s)FjLw#{qPyF9IqMpm<(AT#DeC=!#MYzha1oR8p8q7BtC(gCH-v*H3
z7>e>2XI}&D>FsT2H=V6JJ2l$zY~<#-E&9!T{fgFMYb2gIz}RRv@NIjgdiLR@H1CXk
zzr>e^Mmy7kbo*0L=CPp7kYF#IT~pp|cnEI9@-FB4{p;+mFDJgu%K5kkUH8Ouew=7<
z&rmJ4d8E`Ipm+*wX`QVQZ;R)j%KN1BQGSSCKJsNwaD-(DM+y+1>9u^r^px+I9!$iu
z7Fy0$-V$$-d3lbd$M?j0wtb+CBPV|gEdgf+p!|q7iQ`gzUum;2zKJTpCJJ5rQ$)%F
zth&PF%tM(?-{@0YYc&A0(8x@L>uaR6k(-3lHk%y#M0s!SVh%P`2FaD5SvdfYlIvKW
zckC<IDcc?)3^;89C})%J*mBr+k=@l0P(x$9U8OETaT3}D%n%=x%GyE89m?Y+v`OZ^
zjdcr2sX3)})$uCgVV#GNq0rJI!c9B~y}T*vzd3vF?2j@&$4y0<`K5XnhZ0u0e@B$*
zg*WI%TpIG`cm*R8p>&HKWLm_8;09{`FA-3RV$w=aA6kv85>_Ud_p!Xz80r|v6veck
zPI!kvc3uT|=3xdMK&A>DH_&OQQxzb!=m0V`;41$=t^*hgnYM*%0@xNZje%<l*c392
zg=+&?7c%Vvj*9vDjkm!LiWy6O8*~Ck#r{61K}tozQEfsjrG-0JG#nKRNNJFrz)@WQ
mQWBESoxuGMC9v0HEBymU1I5D%o(|Xm0000<MNUMnLSTY~8=0>F

diff --git a/src/base/ShopItem/loc.vue b/src/base/ShopItem/loc.vue
new file mode 100644
index 0000000..64240b9
--- /dev/null
+++ b/src/base/ShopItem/loc.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg class="loc" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_3157_18608)">
+      <path
+        id="Vector"
+        d="M10 17.9169L14.125 13.7919C14.9408 12.9761 15.4963 11.9367 15.7213 10.8052C15.9463 9.67362 15.8308 8.50076 15.3892 7.43489C14.9477 6.36902 14.2 5.45802 13.2408 4.81707C12.2815 4.17612 11.1537 3.83401 10 3.83401C8.8463 3.83401 7.71851 4.17612 6.75924 4.81707C5.79997 5.45802 5.05229 6.36902 4.61076 7.43489C4.16923 8.50076 4.05368 9.67362 4.27871 10.8052C4.50374 11.9367 5.05926 12.9761 5.875 13.7919L10 17.9169ZM10 20.2736L4.69667 14.9703C3.64779 13.9214 2.93349 12.585 2.64411 11.1301C2.35473 9.67528 2.50326 8.16729 3.07092 6.79685C3.63858 5.4264 4.59987 4.25507 5.83324 3.43096C7.0666 2.60686 8.51665 2.16699 10 2.16699C11.4834 2.16699 12.9334 2.60686 14.1668 3.43096C15.4001 4.25507 16.3614 5.4264 16.9291 6.79685C17.4968 8.16729 17.6453 9.67528 17.3559 11.1301C17.0665 12.585 16.3522 13.9214 15.3033 14.9703L10 20.2736ZM10 11.3336C10.442 11.3336 10.866 11.158 11.1785 10.8454C11.4911 10.5329 11.6667 10.109 11.6667 9.66693C11.6667 9.2249 11.4911 8.80098 11.1785 8.48842C10.866 8.17586 10.442 8.00026 10 8.00026C9.55798 8.00026 9.13405 8.17586 8.82149 8.48842C8.50893 8.80098 8.33334 9.2249 8.33334 9.66693C8.33334 10.109 8.50893 10.5329 8.82149 10.8454C9.13405 11.158 9.55798 11.3336 10 11.3336ZM10 13.0003C9.11595 13.0003 8.2681 12.6491 7.64298 12.024C7.01786 11.3988 6.66667 10.551 6.66667 9.66693C6.66667 8.78287 7.01786 7.93503 7.64298 7.30991C8.2681 6.68478 9.11595 6.33359 10 6.33359C10.8841 6.33359 11.7319 6.68478 12.357 7.30991C12.9821 7.93503 13.3333 8.78287 13.3333 9.66693C13.3333 10.551 12.9821 11.3988 12.357 12.024C11.7319 12.6491 10.8841 13.0003 10 13.0003Z"
+        class="color"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3157_18608">
+        <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+<style lang="scss" scoped>
+.loc {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  .color {
+    fill: var(--guide-floorColor);
+  }
+}
+</style>
diff --git a/src/base/ShopItem/picsCom.vue b/src/base/ShopItem/picsCom.vue
new file mode 100644
index 0000000..5f052fa
--- /dev/null
+++ b/src/base/ShopItem/picsCom.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { ref, defineProps } from 'vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+const current = ref()
+defineProps(['pics'])
+</script>
+<template>
+  <ScrollView class="pics" scrollbar>
+    <div class="grid">
+      <img v-for="pic in pics || []" :key="pic" class="pic" :src="pic" alt="" @click="current = pic" />
+    </div>
+    <Teleport v-if="current" to="body">
+      <div class="picDetail">
+        <img class="detail" :src="current" alt="" />
+        <img src="./close.png" class="close" @click="current = null" alt="" srcset="" />
+      </div> </Teleport
+  ></ScrollView>
+</template>
+<style lang="scss" scoped>
+.pics {
+  height: 690px;
+
+  .grid {
+    display: grid;
+    padding: 48px 68px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 24px;
+  }
+  .pic {
+    width: 170px;
+    height: 170px;
+    object-fit: cover;
+    border-radius: 16px;
+  }
+}
+.picDetail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10001;
+  background: var(--b-80, rgba(0, 0, 0, 0.8));
+  .detail {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    object-position: center;
+    z-index: 1;
+  }
+  .close {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    z-index: 2;
+    top: 30px;
+    right: 30px;
+  }
+}
+@media (min-aspect-ratio: 1/1) {
+  .pics {
+    height: 620px;
+
+    overflow: hidden;
+    .grid {
+      padding: 30px 24px;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 20px;
+    }
+  }
+}
+</style>