feat: 当前楼层展示

src/components/BrandScroll/BrandScroll.vue

@@ -3,7 +3,7 @@
     <div class="brand-content">
       <div class="groups" v-for="item of list" v-show="item.shopList.length" :key="item.name">
         <h1 class="info">
-          {{ item.name }}<span class="meta">/ {{ item.shopList.length }}个</span>
+          {{ item.name }}<span class="meta">/ {{ item.shopList.length }}个</span> <span v-if="item.name === currentFloor.floor" class="current">您在本层</span>
         </h1>
         <TransitionGroup name="zoom" mode="out-in" tag="div" :class="{ group: true, isRow }">
           <ShopItem :config="config" :isRow="isRow" :isFood="isFood" :shop="shop" @click="handleShop(shop)" v-for="shop of item.shopList" :key="shop.shopId" />
@@ -17,6 +17,12 @@
 import { ref, nextTick, watch } from 'vue'
 import ShopItem from '@/base/ShopItem/ShopItem.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/store/root'
+
+const store = useStore()
+const { currentFloor } = storeToRefs(store)
+
 const scroll = ref(null)
 const props = defineProps({
   list: Array,
@@ -99,6 +105,18 @@ watch(
     line-height: 23px;
     color: rgba(0, 0, 0, 0.6);
   }
+  .current {
+    display: flex;
+    width: 96px;
+    height: 27px;
+    background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+    font-size: 16px;
+    color: #ffffff;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    margin-left: 12px;
+  }
 }
 .group {
   display: grid;