From 1c4494b0ef26c943c35e496e42dbb238df041d45 Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Tue, 31 Jan 2023 13:39:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E8=B6=85=E9=87=8F=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Index/Index.vue | 40 +++++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/views/Index/Index.vue b/src/views/Index/Index.vue
index 9288074..e219202 100644
--- a/src/views/Index/Index.vue
+++ b/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;