zhongde-website/pages/product/list.vue

<template>
  <section class="List-container">
   <img class="banner-img" src="http://res.training.luojigou.vip/FphsjI9yxTarY2GnAEiKY3ZKEPxc?imageView2/0/q/50|imageslim" alt="" srcset="">
   <div class="content">
     <div class="tabs">
       <div class="tab-box">
         <div :class="['tabs-item', 'cp',  currentTabId === tab.id ? 'selectTabs': '']" @click="handleTag(tab)" v-for="tab in ListData" :key="tab.id">
          {{tab.label}}
        </div>
       </div>
        <div class="bottom-line">
          <div class="bottom-line-img">
            <img :style="lineStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt="">
          </div>
        </div>
     </div>
     <div class="screen">
       <div class="left">
        <div class="screen-label">排序:</div>
        <div class="cp screen-item">默认</div>
        <div class="cp screen-item">价格</div>
        <div class="cp screen-item">销量</div>
        <div class="cp screen-item">最新上架</div>
       </div>
       
       <div class="right">
         <img src="http://res.training.luojigou.vip/Fmzni1iBgNG7OKMenDAm1JPkntZY?imageView2/0/q/50|imageslim" alt="">
         <a href="https://luojigou.tmall.com/view_shop.htm?spm=a220m.1000858.0.0.7ab635e3dkMJPU&shop_id=116502316&rn=73bef63c0bdf2ed0304c3fded46b96a7" target="_blank" class="enter-label cp">进入商城</a>
       </div>
     </div>
     <div class="goods">
       <!--  (index + 1) % 3 === 0 ? 'animate__fadeIn' : '',
          index  % 3 === 0 ? 'animate__fadeIn' : '' -->
       <div :class="['goods-item', 'wow',  'animate__animated',  
          'animate__lightSpeedInLeft'
          ]" 
          v-for="(item, index) in goodsData" :key="index">
         <div class="top"> 
           <img class="flag-img" :src="item.flagImg" alt="">
           <img class="goods-img" :src="item.goodsImg" alt="" />
         </div>
         <div class="bottom">
           <div class="left">
             <div class="label th">
               {{item.label}}
             </div>
             <div class="text th">
               {{item.text}}
             </div>
             <div class="price">
               <div class="price-now">
                 <span style="fontSize: 20px">¥</span>  {{ item.pirceNew}}
               </div>
               <div class="price-old">
                 <span> <span style="fontSize: 18px"> ¥</span>{{item.priceOld}}</span>
                 <span class="lineation"></span>
               </div>
               
             </div>
           </div>
           <div class="right ">
             销量{{item.sales}}笔
           </div>
         </div>
       </div>
     </div>
   </div>
  </section>
</template>

<script>
if (process.browser) { 
      var {WOW} = require('wowjs')
  
  }
const ListData = Object.freeze([
  {
    id: 0,
    label: '全部'
  },
  {
    id: 1,
    label: '幼儿网络版'
  },
  {
    id: 2,
    label: '数学起跑线'
  },
  {
    id: 3,
    label: '小学基础班'
  },
  {
    id: 4,
    label: '小学提升版'
  },
  {
    id: 5,
    label: '幼小衔接'
  }
])
const goodsData = Object.freeze([
  {
    flagImg:  require('~/assets/images/index/product_tag.png'),
    goodsImg: require('~/assets/images/index/product.png'),
    label: '逻辑狗得儿童绘画成本很低得故事',
    text: '逻辑狗得儿童绘画成本很低得故事得介绍解释觉得我空气jade哦亲',
    pirceNew: 89,
    priceOld: 109.00,
    sales: 88
  }
])

let arr  = []
for(let i = 0; i < 20; i ++) {
  arr.push(...goodsData)
}
export default {
  name: 'ListPage',
  computed: {
    lineStyle () {
       
      let site = 190 * this.currentTabId + 40* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
      if( site === 0 ) {
        site = -5
      }
      return `transform: translateX(${site + 'px'})`
    }
  },
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  data () {
    return {
      ListData,
      currentTabId: 0,
      goodsData: arr
 
    }
  },
  mounted () {
     if (process.browser) { 
         new WOW({
              offset: 0,   
              live: true
         }).init()
     } 
  },
  methods: {
    handleTag(tab) {
      this.currentTabId = tab.id
    }
  }

}
</script>

<style scoped lang="scss">
.List-container {
  background-color: #F0F2F5;
}
.banner-img {
  width: 100%;
  height: 878px;
  margin-bottom: 193px;
}
.content {
  padding-bottom: 300px;
  margin: 0 auto;
  width: 1214px;
  .tabs {
    .tab-box {
      width: 1214px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      .tabs-item {
        color: #747885;
        font-size: 32px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
      }
    }
    .bottom-line {
      display: flex;
      justify-content: center;
      .bottom-line-img {
        width: 1214px;
          img {
          width: 75px;
          height: 30px;
          transition: transform 1s;
        }
      }
      
    }
  }
  .screen {
    margin-top: 121px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7F7F7F;
    font-size: 18px;
    .left {
       display: flex;
        align-items: center;
      .screen-label {
        margin-right: 30px;
      }
      .screen-item {
        color: #ccc;
        padding: 6px 18px;
        border: 1px solid #cccccc;
        font-size: 16px;
        margin-right: 36px;
      }
    }
    .right {
      width: 141px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 42px;
        height: 42px;
      }
      .enter-labe {
        color: #2F2F2F;
        font-size: 25px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
   
      }
      .enter-labe :hover {
        color: red;
      }
    }
  }
  .goods {
    margin-top: 81px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    .goods-item {
      width: 372px;
      height: 372px;
      border-radius: 18px;
      position: relative;
      margin-top: 39px;
      .top {
        overflow: hidden;
        .flag-img {
          width: 52px;
          height: 24px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }
        .goods-img {
          width: 372px;
          height: 250px;

        }
        .goods-img:hover {
          transform: scale(1.2);
          transition: transform 1s;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        background: #FFFFFF;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        .left {
          width: 250px;
          font-family:PingFangSC-Regular,PingFang SC;
          .label {
            color: #343E30;
            font-size: 20px;
            width: 108px;
          }
          .text {
            color: #898A8C;
            font-size: 12px;
            width: 100%;
          }
          .price {
            width: 140px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 9px;
            .price-now {
              color: #EA0B4A;
              font-size: 34px;
              font-family:PingFangSC-Semibold,PingFang SC;
              font-weight:600;
            }
            .price-old {
              color: #D4D7D9;
              font-size: 22px;
              position: relative;
              .lineation {
                height: 1px;
                width: 55px !important;
                position: absolute;
                top: 50%;
                border-top: solid #D4D7D9 1px;
                display: block;
              }
            }
          }
        }
        .right {
          display: flex;
          align-items: flex-end;
          margin-bottom: 10px;
          color: #0D5CFA;
          font-size: 13px;
          font-family:PingFangSC-Semibold,PingFang SC;
          font-weight:600;
        }
      }
    }
  }
 
}
 .selectTabs {
    color: #0D5CFA !important;
    // font-size: 42px !important;
    font-family:PingFangSC-Semibold,PingFang SC;
    font-weight:600
  }



.cp {
  cursor: pointer;
}

.th {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.fade {
  animation: fadeOutDown;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

</style>