feat: 首页广告位

src/views/Index/Index.vue

@@ -51,14 +51,16 @@
             <div class="title">{{ switchLanguage(tab, 'title') }}</div>
           </div>
         </div>
-        <!-- <div class="cards pos">
-        <div class="card" @click="handleCard(item)" v-for="item of cardsList" :key="item.moduleType">
-          <h1 class="name">{{ item.name }}</h1>
-          <h1 class="sub-title">{{ item.nameEn }}</h1>
-          <p class="introduce">{{ switchLanguage(item, 'introduce') }}</p>
-          <img :src="config.sourceUrl + item.crossFileUrl" alt="" class="bg" />
+        <div class="r3">
+          <EffectFade :list="activityList ?? []">
+            <template v-slot="{ item }">
+              <div class="banner-wrapper">
+                <img class="banner" :src="config.sourceUrl + item.fileUrl" alt="" />
+                <div class="name">{{ item.activityName }}</div>
+              </div>
+            </template>
+          </EffectFade>
         </div>
-      </div> -->
       </div>
 
       <router-view />
@@ -72,8 +74,9 @@ import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { getBrandList } from '@/http/brand/api'
-import { getWaterfallList } from '@/http/api'
+import { getActivityList } from '@/http/api'
 import View from '@/layouts/View.vue'
+import EffectFade from '@/components/EffectFade/EffectFade.vue'
 
 const router = useRouter()
 const store = useStore()
@@ -83,6 +86,7 @@ const foodList = computed(() => shopList.value.filter(({ isSpecial }) => isSpeci
 const hotRecommend = computed(() => indexList.value.hotSearch.slice(0, 5) ?? [])
 const cardsList = computed(() => indexList.value.columnList ?? [])
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
+const activityList = ref([])
 
 getBrandList().then(({ data: { allShopNum, industryFatherList } }) => {
   const spFormat = industryFatherList.find(({ isSpecial }) => isSpecial)
@@ -94,15 +98,15 @@ const goPage = item => {
   router.push(item.path)
 }
 
-function handleCard(item) {
-  router.push('/index/waterfall?type=' + item.moduleType)
-}
-
 function handleHot(item) {
   const shop = shopList.value.find(_shop => _shop.shopId === item.shopId)
   store.SET_SHOP(shop)
   store.SET_SHOW_DETAIL(true)
 }
+getActivityList(3).then(({ data }) => {
+  activityList.value = data?.activityList ?? []
+  console.log(data.activityList)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -344,6 +348,60 @@ function handleHot(item) {
         margin-left: 24px;
       }
     }
+    .r3 {
+      margin-top: 40px;
+      width: 944px;
+      height: 531px;
+      :deep(.swiper) {
+        .swiper-pagination {
+          top: 20px;
+          right: 27px;
+          bottom: auto;
+          left: auto;
+          width: auto;
+          .swiper-pagination-bullet {
+            width: 34px !important;
+            height: 4px !important;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 6px !important;
+            opacity: inherit !important;
+            margin: 0;
+            &.swiper-pagination-bullet-active {
+              background: #ffffff;
+              border-radius: 6px !important;
+            }
+          }
+        }
+      }
+      .banner-wrapper {
+        position: relative;
+        width: 944px;
+        height: 531px;
+        border-radius: 24px;
+        overflow: hidden;
+        .banner {
+          width: 944px;
+          height: 531px;
+          object-fit: cover;
+        }
+        .name {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 944px;
+          height: 58px;
+          background: rgba(0, 0, 0, 0.4);
+          font-weight: 700;
+          font-size: 24px;
+          line-height: 58px;
+          color: #ffffff;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding: 0 30px;
+        }
+      }
+    }
   }
 
   .text {
@@ -356,83 +414,5 @@ function handleHot(item) {
       font-size: 60px;
     }
   }
-  .text-en {
-    font-size: 117px;
-    color: var(--color-white-opacity);
-    font-weight: 700;
-    text-transform: uppercase;
-    font-family: 'font_bold';
-  }
-  .top-left {
-    margin-bottom: 110px;
-  }
-
-  .scroll {
-    height: 59px;
-    overflow: hidden;
-    margin-bottom: 89px;
-    border-radius: 50px;
-    .scroll-content {
-      display: inline-block;
-      white-space: nowrap;
-      .recommend-item {
-        display: inline-block;
-        height: 59px;
-        padding: 0 32px;
-        font-weight: 700;
-        font-family: 'font_bold';
-        font-size: 16px;
-        line-height: 59px;
-        text-align: center;
-        color: var(--color-black-opacity-6);
-        background: var(--color-white-opacity);
-        border-radius: 50px;
-        margin-right: 16px;
-      }
-    }
-  }
-  .cards {
-    display: flex;
-    justify-content: center;
-    .card {
-      position: relative;
-      margin-right: 23px;
-      padding: 56px 0 0 40px;
-      width: 275px;
-      height: 564px;
-      background: #ffffff;
-      box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.04);
-      border-radius: 24px;
-
-      .name {
-        font-weight: 700;
-        font-size: 40px;
-        line-height: 47px;
-        font-family: 'font_bold';
-        color: var(--color-black-opacity-8);
-        padding-bottom: 8px;
-      }
-      .sub-title {
-        font-weight: 700;
-        font-family: 'font_bold';
-        font-size: 24px;
-        line-height: 28px;
-        text-transform: uppercase;
-        color: var(--color-black-opacity-4);
-        padding-bottom: 49px;
-      }
-      .introduce {
-        font-size: 18px;
-        line-height: 150%;
-        color: var(--color-black-opacity-4);
-      }
-      .bg {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        width: 279px;
-      }
-    }
-  }
 }
 </style>