Home首页模块搭建

<template>
  <div class="home">
    <!-- 广告区 -->
    <div class="ad-banner">
      <a href="http://www.baidu.com" target="_blank">
        <img :src="require('@/assets/images/ad-banner.jpg')" alt="广告图片">
      </a>
    </div>
 
    <!-- 搜索区 -->
    <div class="search-wrapper">
      <XtxSearch />
    </div>
 
    <!-- 广告导航 -->
    <div class="ad-nav-list">
      <a href="http://www.baidu.com" target="_blank" v-for="item in adNavList" :key="item.id">
        <img :src="item.picture" alt="导航广告">
      </a>
    </div>
 
    <!-- 商品分类 -->
    <div class="category">
      <XtxBrand />
      <XtxCarousel :autoplay="true" />
      <XtxProduct :products="productList" />
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { getAdNavListAPI, getHomeProductListAPI } from '../../api/home'
import XtxBrand from '../../components/home/xtx-brand.vue'
import XtxCarousel from '../../components/common/xtx-carousel.vue'
import XtxProduct from '../../components/common/xtx-product.vue'
import XtxSearch from '../../components/common/xtx-search.vue'
 
export default {
  name: 'Home',
  components: { XtxBrand, XtxCarousel, XtxProduct, XtxSearch },
  setup () {
    // 广告导航数据
    const adNavList = ref([])
    // 获取广告导航数据
    const getAdNavList = async () => {
      const { data: res } = await getAdNavListAPI()
      if (res.code === 200) adNavList.value = res.result
    }
    getAdNavList()
 
    // 商品列表数据
    const productList = ref([])
    // 获取商品列表数据
    const getHomeProductList = async () => {
      const { data: res } = await getHomeProductListAPI()
      if (res.code === 200) productList.value = res.result
    }
    getHomeProductList()
 
    return { adNavList, productList }
  }
}
</script>
 
<style scoped>
.home {
  width: 1240px;
  margin: 0 auto;
  background: #fff;
}
.ad-banner {
  margin-top: 20px;
  text-align: center;
}
.ad-banner img {
  width: 1240px;
  height: 140px;
  display: block;
}
.search-wrapper {
  margin-top: 10px;
}
.ad-nav-list {
  margin-top: 20px;
  text-align: center;
}
.ad-nav-list a {