|
|
@@ -1,402 +1,46 @@
|
|
|
<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 class="cate">
|
|
|
+ <!-- 头部banner -->
|
|
|
+ <div class="common-banner"><img :src="bannerImg" alt="" srcset=""></div>
|
|
|
+ <div class="cate-list">
|
|
|
+ <div :class="[`cate-bg cate${index + 1}`, index % 2 == 0 ? 'bg-white' : 'bg-silver']" v-for="(item, index) in cateList" :key="index">
|
|
|
+ <div :class="['w1200 cate-item']" >
|
|
|
+ <div class="item-content" v-if="index % 2 == 0">
|
|
|
+ <div class="item-left">
|
|
|
+ <img :src="item.imgUrl" v-scroll-reveal.reset="{ origin: 'left', distance: '100px', duration: 1500 }" data-scroll-reveal="enter left and move 100px over 1.5s" alt="" srcset="">
|
|
|
+ </div>
|
|
|
+ <div class="item-right">
|
|
|
+ <div class="title" v-scroll-reveal.reset="{ delay: 250, origin: 'top', distance: '40px', easing: 'ease-in-out', duration: 1000 }">{{item.title}}</div>
|
|
|
+ <div class="dec" v-scroll-reveal.reset="{ delay: 350, origin: 'bottom', distance: '30px', duration: 1000 }">{{item.desc}}</div>
|
|
|
+ <div class="btn" v-scroll-reveal.reset="{ delay: 450, easing: 'ease-in-out', scale: 0.85 }" @click="navPage(item)">了解详情</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content" v-else>
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="title" v-scroll-reveal.reset="{ origin: 'right', distance: '80px', duration: 1000, easing: 'ease-in-out' }" data-scroll-reveal="enter right and move 80px over 1s" >{{item.title}}</div>
|
|
|
+ <div class="dec" v-scroll-reveal.reset="{ delay: 350, origin: 'left', distance: '40px', duration: 1000 }" data-scroll-reveal="wait 0.35s, then enter left and move 40px over 1s">{{item.desc}}</div>
|
|
|
+ <div class="btn" v-scroll-reveal.reset="{ delay: 450, easing: 'ease-in-out', scale: 0.85 }" @click="navPage(item)">了解详情</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-right">
|
|
|
+ <img v-scroll-reveal.reset="{ delay: 550, origin: 'right', distance: '80px', duration: 1000 }" data-scroll-reveal="wait 0.55s, then enter right and move 80px over 1s" :src="item.imgUrl" alt="" srcset="">
|
|
|
+ </div>
|
|
|
</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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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: '克鲁德',
|
|
|
- }
|
|
|
-]
|
|
|
+var slideUp = {
|
|
|
+ distance: '150%',
|
|
|
+ origin: 'bottom',
|
|
|
+ opacity: null
|
|
|
+};
|
|
|
|
|
|
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'})`
|
|
|
- // }
|
|
|
- },
|
|
|
+ computed: {},
|
|
|
head() {
|
|
|
return {
|
|
|
title: "逻辑狗官网-中德智慧教育",
|
|
|
@@ -416,32 +60,76 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- ListData,
|
|
|
- currentTabId: 0,
|
|
|
- goodsData: arr,
|
|
|
- productList,
|
|
|
- netList,
|
|
|
- tsList,
|
|
|
- jcList,
|
|
|
- yxList,
|
|
|
- kldList,
|
|
|
- bannerImg: require('~/assets/images/products/banner-list.png')
|
|
|
+ bannerImg: require('~/assets/images/products/product_banner.png'),
|
|
|
+ cateList: [
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_01@2x.png'),
|
|
|
+ url: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_02@2x.png'),
|
|
|
+ url: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 3,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_03@2x.png'),
|
|
|
+ url: '3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 4,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_04@2x.png'),
|
|
|
+ url: '4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 5,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_05@2x.png'),
|
|
|
+ url: '5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 6,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_06@2x.png'),
|
|
|
+ url: '6'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 7,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_07@2x.png'),
|
|
|
+ url: '7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 8,
|
|
|
+ title: '逻辑狗-思维游戏系列',
|
|
|
+ desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
|
|
|
+ imgUrl: require('~/assets/images/products/cate_img_08@2x.png'),
|
|
|
+ url: '8'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- components: {
|
|
|
- ProdList
|
|
|
- },
|
|
|
+ components: {},
|
|
|
mounted () {
|
|
|
- if (process.browser) {
|
|
|
- new WOW({
|
|
|
- offset: 0,
|
|
|
- live: true
|
|
|
- }).init()
|
|
|
- }
|
|
|
+ // this.scrollReveal.reveal('item-content .title', slideUp);
|
|
|
},
|
|
|
methods: {
|
|
|
- handleTag(tab) {
|
|
|
- this.currentTabId = tab.id
|
|
|
+ navPage(item) {
|
|
|
+ this.$router.push({ path: '/product/detail', query: {
|
|
|
+ id: item.url
|
|
|
+ } });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -450,252 +138,104 @@ export default {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@import "~static/common/style.sass";
|
|
|
-
|
|
|
-.List-container {
|
|
|
- background-color: #F0F2F5;
|
|
|
-}
|
|
|
-.banner-img {
|
|
|
+$bg-silver: #F7FBFF;
|
|
|
+$bg-white: #FFFFFF;
|
|
|
+.common-banner {
|
|
|
width: 100%;
|
|
|
- // height: 806px;
|
|
|
- height: 595px;
|
|
|
- margin-bottom: 120px;
|
|
|
+ height: 521px;
|
|
|
+ position: relative;
|
|
|
+ font-size: 0;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 0px;
|
|
|
+ right: 0px;
|
|
|
+ z-index: 1;
|
|
|
+ -webkit-transform: translateX(-50%);
|
|
|
+ transform: translateX(-50%);
|
|
|
+ max-width: 2560px;
|
|
|
+ max-height: 521px;
|
|
|
+ height: 521px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
}
|
|
|
-.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;
|
|
|
+
|
|
|
+.cate-list {
|
|
|
+ .cate-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 530px;
|
|
|
+ }
|
|
|
+ .cate-item {
|
|
|
+ height: 100%;
|
|
|
+ .item-content {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ height: 100%;
|
|
|
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;
|
|
|
+ width: 639px;
|
|
|
+ height: 400px;
|
|
|
+ display: block;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ width: 558px;
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 48px;
|
|
|
+ margin-bottom: 29px;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.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 {
|
|
|
- &.selectTabs {
|
|
|
- a {
|
|
|
- color: #0D5CFA;
|
|
|
- // font-size: 42px !important;
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
+ .dec {
|
|
|
+ width: 558px;
|
|
|
+ height: 47px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ background: #0D5CFA;
|
|
|
+ box-shadow: 0px 4px 11px 0px rgba(115, 161, 253, 0.6);
|
|
|
+ border-radius: 23px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .item-right {
|
|
|
+ font-size: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .title {
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
- a {
|
|
|
- font-size: 24px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: #747885;
|
|
|
- line-height: 33px;
|
|
|
+ .btn {
|
|
|
+ align-self: flex-end;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
+ .item-left {
|
|
|
+ font-size: 0;
|
|
|
+ .btn {
|
|
|
+
|
|
|
}
|
|
|
- // img {
|
|
|
- // width: 75px;
|
|
|
- // height: 30px;
|
|
|
- // transition: transform 1s;
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes fadeOutDown {
|
|
|
- from {
|
|
|
- opacity: 1;
|
|
|
+ .bg-silver {
|
|
|
+ background: $bg-silver;
|
|
|
}
|
|
|
-
|
|
|
- to {
|
|
|
- opacity: 0;
|
|
|
- -webkit-transform: translate3d(0, 100%, 0);
|
|
|
- transform: translate3d(0, 100%, 0);
|
|
|
+ .bg-white {
|
|
|
+ background: $bg-white;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|
chending1994
