feat: 首页滚动品牌超量滚动

src/views/Index/Index.vue

@@ -38,8 +38,10 @@
             <h1>推荐美食</h1>
             <h2>此时此刻，美食正在等你</h2>
           </div>
-          <div class="grid">
-            <img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
+          <div class="marquee">
+            <div class="grid" :style="foodList.length <= 12 ? '' : `animation: marquee ${foodList.length}s linear infinite;`">
+              <img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
+            </div>
           </div>
         </div>
         <div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
@@ -47,8 +49,10 @@
             <h1>推荐品牌</h1>
             <h2>心动之选，拥抱美好生活</h2>
           </div>
-          <div class="grid">
-            <img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
+          <div class="marquee">
+            <div class="grid" :style="shopList.length <= 12 ? '' : `animation: marquee ${shopList.length}s linear infinite;`">
+              <img class="item" v-for="shop of shopList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
+            </div>
           </div>
         </div>
 
@@ -91,7 +95,7 @@ const router = useRouter()
 const store = useStore()
 const { indexList, currentFloor, buildingList, shopList, sidebarList, config, theme } = storeToRefs(store)
 const guideDesc = ref('')
-const foodList = computed(() => shopList.value.filter(({ isSpecial }) => isSpecial).slice(0, 12) ?? [])
+const foodList = computed(() => shopList.value.filter(({ isSpecial }) => isSpecial) ?? [])
 const hotRecommend = computed(() => indexList.value.hotSearch.slice(0, 5) ?? [])
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
 const activityList = ref([])
@@ -118,7 +122,19 @@ getActivityList(3).then(({ data }) => {
   console.log(data.activityList)
 })
 </script>
-
+<style lang="scss">
+@keyframes marquee {
+  from {
+    transform: translateY(0);
+  }
+  95% {
+    transform: translateY(calc(-100% + 389px - 40px - 15px));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+</style>
 <style lang="scss" scoped>
 .index-container {
   display: flex;
@@ -270,11 +286,14 @@ getActivityList(3).then(({ data }) => {
     .food,
     .rec {
       position: absolute;
+      display: flex;
+      flex-direction: column;
       top: 40px;
       left: 447px;
       width: 565px;
       height: 557px;
       h1 {
+        z-index: 1;
         font-weight: 900;
         font-size: 56px;
         line-height: 66px;
@@ -282,11 +301,18 @@ getActivityList(3).then(({ data }) => {
         margin-bottom: 8px;
       }
       h2 {
+        z-index: 1;
         font-weight: 700;
         font-size: 16px;
         line-height: 19px;
         color: rgba(255, 255, 255, 0.8);
       }
+
+      .marquee {
+        z-index: 0;
+        flex: 1;
+        overflow: hidden;
+      }
       .grid {
         margin-top: 40px;
         display: grid;
@@ -312,6 +338,7 @@ getActivityList(3).then(({ data }) => {
       align-items: center;
       overflow: hidden;
       .title {
+        z-index: 1;
         margin-top: 4px;
         width: 549px;
         background: center / cover no-repeat url(./foodBg.png);
@@ -331,6 +358,7 @@ getActivityList(3).then(({ data }) => {
       align-items: center;
       overflow: hidden;
       .title {
+        z-index: 1;
         margin-top: 8px;
         width: 549px;
         background: center / cover no-repeat;