zhongde-website/pages/product/list.vue

<template>
  <section class="List-container">
   <img class="banner-img" :src="bannerImg" alt="" srcset="">
   <div class="content w1200">
     <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> -->
        <ul class="cate-nav tab-box thinking-cate-nav">
          <li :class="['tabs-item', 'cp',  currentTabId === tab.id ? 'selectTabs': '']" @click="handleTag(tab)" v-for="tab in ListData" :key="tab.id">
            <!-- <nuxt-link to="/">{{ tab.label }}</nuxt-link> -->
            <a href="javascript:void(0)">{{ tab.label }}</a>
          </li>
        </ul>
        <div class="bottom-line">
          <div class="bottom-line-img">
            <div :style="lineStyle" class="line-img-box"></div>
            <!-- <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://zhongdezhihui.tmall.com" target="_blank" class="enter-label cp">进入商城</a>
       </div>
     </div> -->
     <div class="goods">
      <prod-list v-if="currentTabId == 0" :productList="productList"></prod-list>
      <prod-list v-if="currentTabId == 1" :productList="netList"></prod-list>
      <prod-list v-if="currentTabId == 2" :productList="jcList"></prod-list>
      <prod-list v-if="currentTabId == 3" :productList="tsList"></prod-list>
      <prod-list v-if="currentTabId == 4" :productList="yxList"></prod-list>
      <prod-list v-if="currentTabId == 5" :productList="kldList"></prod-list>
       <!--  (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')
}
import ProdList from "~/components/products/prodList";

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)
}

const productList =  [
  {
    title: '逻辑狗 小学提升版一阶段7岁以上儿童思维训练早教玩具益智启蒙',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557258829143',
    tag: '提升版',
  },
  {
    title: '逻辑狗 小学提升版二阶段8岁以上儿童早教玩具益智启蒙卡',
    price: '238.00',
    imgUrl: require('~/assets/images/goods/product_ts_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557170896436',
    tag: '提升版',
  },
  {
    title: '逻辑狗小学提升版三阶段9岁以上幼儿童思维学习早教玩具套装益智',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_03.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557361647798',
    tag: '提升版',
  },
  {
    title: '逻辑狗 小学提升版四阶段10岁以上数学幼儿启蒙早教玩具 中德直营',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557303754261',
    tag: '提升版',
  },
  {
    title: '逻辑狗 中德智慧小学提升版 五阶段11岁儿童启蒙 学习玩具套装',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_05.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557171748143',
    tag: '提升版',
  },
  {
    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_jc_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557253273047',
    tag: '基础版',
  },
  {
    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
    price: '102.60',
    imgUrl: require('~/assets/images/goods/product_jc_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557164956835',
    tag: '基础版',
  },
  {
    title: '中德智慧逻辑狗 智力开发小学基础版三阶段幼儿童学习早教玩具',
    price: '140.60',
    imgUrl: require('~/assets/images/goods/product_jc_03.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557356687077',
    tag: '基础版',
  },
  {
    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
    price: '102.60',
    imgUrl: require('~/assets/images/goods/product_jc_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557165744732',
    tag: '基础版',
  },
  {
    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
    price: '102.60',
    imgUrl: require('~/assets/images/goods/product_jc_05.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557298602723',
    tag: '基础版',
  }
]

const netList = [
  {
    title: '逻辑狗2岁3-4岁幼儿园教材版家庭思维训练第一阶段益智玩具板全套',
    price: '150.10',
    imgUrl: require('~/assets/images/goods/product_net_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557288434799',
    tag: '网络版',
  },
  {
    title: '逻辑狗4-5岁二阶段幼儿教材家庭网络版思维训练早教益智玩具正版',
    price: '150.10',
    imgUrl: require('~/assets/images/goods/product_net_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557250281576',
    tag: '网络版',
  },
  {
    title: '逻辑狗5-6岁三阶段幼儿园教材家庭网络版思维训练早教益智玩具板',
    price: '150.10',
    imgUrl: require('~/assets/images/goods/product_net_03.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557162976102',
    tag: '网络版',
  },
  {
    title: '德国逻辑狗6-7岁四阶段幼儿园教材网络版思维训练早教益智玩具童',
    price: '150.10',
    imgUrl: require('~/assets/images/goods/product_net_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557163156598',
    tag: '网络版',
  },
  {
    title: '逻辑狗6岁以上五阶段 幼儿园教材家庭思维训练网络版早教益智玩具',
    price: '188.10',
    imgUrl: require('~/assets/images/goods/product_net_05.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557251913436',
    tag: '网络版',
  },
  {
    title: '逻辑狗3-7岁幼儿网络版大礼包思维益智启蒙早教玩具',
    price: '836.00',
    imgUrl: require('~/assets/images/goods/product_net_06.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557163904721',
    tag: '网络版',
  },
]

const tsList = [
  {
    title: '逻辑狗 小学提升版一阶段7岁以上儿童思维训练早教玩具益智启蒙',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557258829143',
    tag: '提升版',
  },
  {
    title: '逻辑狗 小学提升版二阶段8岁以上儿童早教玩具益智启蒙卡',
    price: '238.00',
    imgUrl: require('~/assets/images/goods/product_ts_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557170896436',
    tag: '提升版',
  },
  {
    title: '逻辑狗小学提升版三阶段9岁以上幼儿童思维学习早教玩具套装益智',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_03.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557361647798',
    tag: '提升版',
  },
  {
    title: '逻辑狗 小学提升版四阶段10岁以上数学幼儿启蒙早教玩具 中德直营',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557303754261',
    tag: '提升版',
  },
  {
    title: '逻辑狗 中德智慧小学提升版 五阶段11岁儿童启蒙 学习玩具套装',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_ts_05.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557171748143',
    tag: '提升版',
  }
]

const jcList = [
  {
    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
    price: '198.00',
    imgUrl: require('~/assets/images/goods/product_jc_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557253273047',
    tag: '基础版',
  },
  {
    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
    price: '102.60',
    imgUrl: require('~/assets/images/goods/product_jc_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557164956835',
    tag: '基础版',
  },
  {
    title: '中德智慧逻辑狗 智力开发小学基础版三阶段幼儿童学习早教玩具',
    price: '140.60',
    imgUrl: require('~/assets/images/goods/product_jc_03.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557356687077',
    tag: '基础版',
  },
  {
    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
    price: '102.60',
    imgUrl: require('~/assets/images/goods/product_jc_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557165744732',
    tag: '基础版',
  },
  {
    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
    price: '102.60',
    imgUrl: require('~/assets/images/goods/product_jc_05.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557298602723',
    tag: '基础版',
  }
]

const yxList = [
  {
    title: '逻辑狗数学起跑线5-7岁幼儿园教材 家庭逻辑思维训练益智早教玩具',
    price: '150.10',
    imgUrl: require('~/assets/images/goods/product_yx_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=557305378054',
    tag: '幼小衔接',
  },
  {
    title: '逻辑狗5-7岁思维语言/数学幼儿园早教益智玩具板训练全套幼小衔接',
    price: '159.60',
    imgUrl: require('~/assets/images/goods/product_yx_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=603397367168',
    tag: '幼小衔接',
  },
]

const kldList = [
  {
    title: '逻辑狗 克鲁德幼儿二阶段5-6岁启蒙读物儿童益智 早教故事点读',
    price: '264.10',
    imgUrl: require('~/assets/images/goods/product_kld_01.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=569135310952',
    tag: '克鲁德',
  },
  {
    title: '逻辑狗 克鲁德幼儿三阶段6岁以上启蒙读物儿童早教故事 点读语言',
    price: '292.60',
    imgUrl: require('~/assets/images/goods/product_kld_02.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=569135982554',
    tag: '克鲁德',
  },
  {
    title: '逻辑狗新品克鲁德一起听 幼儿一阶段4-5岁启蒙读物儿童早教益智',
    price: '245.00',
    imgUrl: require('~/assets/images/goods/product_kld_03.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=610967139958',
    tag: '克鲁德',
  },
  {
    title: '逻辑狗克鲁德聪明笔幼儿早教机学习点读机0-3-6益智故事机双英语',
    price: '568.10',
    imgUrl: require('~/assets/images/goods/product_kld_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=575248706980',
    tag: '克鲁德',
  },
  {
    title: '逻辑狗新品 克鲁德聪明点读笔 幼儿早教益智机学习机0-3-6双英语',
    price: '598.00',
    imgUrl: require('~/assets/images/goods/product_kld_04.jpg'),
    linkUrl: 'https://detail.tmall.com/item.htm?id=624651060206',
    tag: '克鲁德',
  }
]

export default {
  name: 'ListPage',
  computed: {
    lineStyle () {
      let site = 190 * this.currentTabId + 42* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
      if( site === 0 ) {
        site = -0
      }
      return `transform: translateX(${site + 'px'})`
    },
    // 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,
      productList,
      netList,
      tsList,
      jcList,
      yxList,
      kldList,
      bannerImg: require('~/assets/images/products/banner-list.png')
    }
  },
  components: {
    ProdList
  },
  mounted () {
     if (process.browser) { 
      new WOW({
        offset: 0,   
        live: true
      }).init()
     } 
  },
  methods: {
    handleTag(tab) {
      this.currentTabId = tab.id
    }
  }

}
</script>

<style scoped lang="scss">
@import "~static/common/style.sass";

.List-container {
  background-color: #F0F2F5;
}
.banner-img {
  width: 100%;
  // height: 806px;
  height: 595px;
  margin-bottom: 120px;
}
.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, sans-serif;
  //       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, sans-serif;
        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, sans-serif;
          .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, sans-serif;
              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, sans-serif;
          font-weight:600;
        }
      }
    }
  }
 
}
 .selectTabs {
    color: #0D5CFA !important;
    // font-size: 42px !important;
    font-family:PingFangSC-Semibold, sans-serif;
    font-weight:600
  }



.cp {
  cursor: pointer;
}

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

.fade {
  animation: fadeOutDown;
}

.tabs {
  .tab-box {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    .tabs-item {
      a {
        font-size: 24px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color: #747885;
        line-height: 33px;
      }
    }
  }
  .bottom-line {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    .bottom-line-img {
      width: 100%;
      .line-img-box {
        width: 46px;
        height: 4px;
        background-color: $theme_color_fu;
        box-shadow: 0px 2px 8px 0px rgba(111, 159, 254, 0.8);
        border-radius: 100px;
        transition: transform 1s;
      }
      // img {
      //   width: 75px;
      //   height: 30px;
      //   transition: transform 1s;
      // }
    }
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

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

</style>