zhongde-website/pages/product/detail.vue

<template>
  <div class="detail">
    <common-banner :img="bannerImg"></common-banner>
    <!-- 分类 -->
    <div class="tabList w1200">
      <div :class="['tab-item', currentTab == item.id ? 'active' : '' ]" v-for="(item, index) in tabList" :key="index" @click="handleClick(item)">
        {{item.title}}
        <span></span>
      </div>
    </div>

    <!-- 分类图 -->
    <div class="cate-img w1200">
      <img v-if="currenCate" :src="currenCate.cateImg" alt="" srcset="">
    </div>

    <!-- 分类信息 -->
    <div class="cate-main">
      <div class="cate-content w1200">
        <div class="cate-title">{{ currenCate.title }}</div>
        <div class="cate-des">{{ currenCate.desc }}</div>
        <div class="cate-product-list">
          <div class="product-item" v-for="(item, index) in currenCate.productList" :key="index">
            <div class="img-wrap"><img :src="item.productImg" alt="" srcset=""></div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonBanner from '@/components/common/banner';
import cateData from './data.js';
export default {
  data() {
    return {
      currentTab: 1,
      currenCate: {},
      bannerImg: require('~/assets/images/products/product_banner.png'),
      cateImg: require('~/assets/images/products/cate_banner_01.png'),
      productImg: require('~/assets/images/goods/product_jc_01.jpg'),
      tabList: [
        {
          id: 1,
          title: '逻辑狗系列',
        },
        {
          id: 2,
          title: '春夏秋冬系列',
        },
        {
          id: 3,
          title: '聪明书系列',
        },
        {
          id: 4,
          title: '逻辑狗-入学准备系列',
        },
        {
          id: 5,
          title: '思维魔法我的pad-lvk系列',
        },
        {
          id: 6,
          title: '与克鲁德一起听说读系列',
        },
        {
          id: 7,
          title: '蚂蚁沙丘系列',
        },
        {
          id: 8,
          title: '中华小熊猫系列'
        }
      ]
    }
  },

  asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
    const id = query.id;
    const data = cateData.find(item => item.id == id) || cateData[0];
    return {
      currentTab: id,
      currenCate: data,
    }
  },

  components: {
    CommonBanner
  },

  methods: {
    handleClick(item) {
      const id = item.id;
      this.currentTab = id;
      const data = cateData.find(item => item.id == id) || cateData[0];
      this.currenCate = data;
      console.log(this.cateData);
    }
  }
  
}
</script>

<style lang="scss" scoped>
.tabList {
  display: flex;
  justify-content: space-between;
  .tab-item {
    position: relative;
    margin: 21px 0 28px;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    &.active {
      font-size: 15px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 21px;
      span {
        position: absolute;
        bottom: -6px;
        display: block;
        width: 39px;
        box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
      }
    }
    &:hover {
      span {
        position: absolute;
        bottom: -6px;
        display: block;
        width: 39px;
        box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
      }
    }
    span {
      width: 0px;
      height: 2px;
      background: #236AFA;
      border-radius: 20px;
      left: 0px;
      right: 0px;
      margin: 0 auto;
      transition: all .3s ease-in-out;
    }
  }
}
.cate-img {
  font-size: 0;
  img {
    width: 100%;
  }
}
.cate-main {
  margin: 80px 0;
  .cate-title {
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 48px;
    text-align: center;
  }
  .cate-des {
    margin-top: 14px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #646A7E;
    line-height: 24px;
  }
  .cate-product-list {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    .product-item {
      margin: 0 22px 20px 0;
      width: 283px;
      height: 380px;
      background: #FFFFFF;
      box-shadow: 0px 2px 17px 0px rgba(208, 231, 253, 0.74);
      border-radius: 20px;
      text-align: center;
      transition: transform .3s ease-in-out;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:hover {
        transform: translate3d(0,-8px,0);
      }
      .title {
        margin-top: 36px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
      }
    }
  }
  .img-wrap {
    padding-top: 20px;
    font-size: 0;
    img {
      width: 240px;
      height: 263px;
      object-fit: cover;
    }
  }
}

</style>