zhongde-website/pages/product/course.vue

<template>
  <section class="Course-container">
    <!-- <div  class="wow wow animate__animated animate__fadeInUp"> -->
      <!-- animate__delay-.2s -->
      <!-- class="wow animate__animated animate__rotateIn " -->
    <component :is="comName" >
      <div class="course-change">
        <div class="tabs">
          <!-- <img src="http://res.training.luojigou.vip/FhHOYFM_rwtBGKZ9OCDgGs0PvGNw?imageView2/0/q/50|imageslim" alt=""> -->
          <div class="tags-box">
            <div :class="['tabs-item', currentTabId === tab.id ? 'active' : '']"
              @click="changeTabgs(tab)"
              v-for="tab in tabsData" :key="tab.id">
              <img class="cp" :src="currentTabId !== tab.id ? tab.imgUrl : tab.activeImgUrl" :srcset=" currentTabId !== tab.id ? `${tab.srcsetImg[0]} 1x, ${tab.srcsetImg[1]} 2x` : `${tab.srcsetActiveImg[0]} 1x, ${tab.srcsetActiveImg[1]} 2x`" alt="">
              <section class="cp" :style="{color: currentTabId === tab.id ? '#2169FA' : '#000'}">
                {{tab.label}}
              </section>
            </div>
          </div>
        </div>
        <!-- <div class="line" >
          <img :style="lineStyle" src="http://res.training.luojigou.vip/FrCpRmLbuGygO2NdcTJrbFGMSqYS?imageView2/0/q/50|imageslim" alt="">
        </div> -->
      </div>
      <!-- <Label class="label" :labelProps="labelProps" v-solt:label /> -->
      <Label class="label" :labelProps="labelProps" />
    </component>
   <!-- </div>  -->
  </section>
</template>

<script>
import Xcx from '@/components/products/xcx.vue'
import Label from '@/components/products/label.vue'
import H5 from '@/components/products/h5'
import Pc from '@/components/products/pc'
import Parent from '@/components/products/parent'
import Teacher from '@/components/products/teacher'

if (process.browser) { 
    var {WOW} = require('wowjs')
  }
// console.log(Xcx);
const tabsData = Object.freeze([
  {
    id: 0,
    // imgUrl: 'http://res.training.luojigou.vip/FkSnoRtRQ4WY_f3M3TQEJcn_du_Z?imageView2/0/q/50|imageslim',
    // activeImgUrl: 'http://res.training.luojigou.vip/FnzQdBDxbMr-Ek5HlcWCQ_Dk12zn?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/tab_xcx_nor.png'),
    activeImgUrl: require('~/assets/images/products/tab_xcx_active.png'),
    srcsetImg: [require('~/assets/images/products/tab_xcx_nor.png'), require('~/assets/images/products/tab_xcx_nor@2x.png')],
    srcsetActiveImg: [require('~/assets/images/products/tab_xcx_active.png'),require('~/assets/images/products/tab_xcx_active@2x.png')],
    label: '小程序课堂'
  },
  {
    id: 1,
    // imgUrl: 'http://res.training.luojigou.vip/FuV6EjLrPYoiFII0iLYQlW51Bemq?imageView2/0/q/50|imageslim',
    // activeImgUrl: 'http://res.training.luojigou.vip/FoRYr27YPRQ5dcZy6hjWkqCB3bUc?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/tab_h5_nor.png'),
    activeImgUrl: require('~/assets/images/products/tab_h5_active.png'),
    srcsetImg: [require('~/assets/images/products/tab_h5_nor.png'), require('~/assets/images/products/tab_h5_nor@2x.png')],
    srcsetActiveImg: [require('~/assets/images/products/tab_h5_active.png'), require('~/assets/images/products/tab_h5_active@2x.png')],
    label: '微信H5课堂'
  },
  {
    id: 2,
    // imgUrl: 'http://res.training.luojigou.vip/FsVRp9Lk4Cyp5O_JNBe49kfz7vZh?imageView2/0/q/50|imageslim',
    // activeImgUrl: 'http://res.training.luojigou.vip/FhFDmhtts6iIWXD_Z16JOmMeqbh6?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/tab_pc_nor.png'),
    activeImgUrl: require('~/assets/images/products/tab_pc_active.png'),
    srcsetImg: [require('~/assets/images/products/tab_pc_nor.png'), require('~/assets/images/products/tab_pc_nor@2x.png')],
    srcsetActiveImg: [require('~/assets/images/products/tab_pc_active.png'), require('~/assets/images/products/tab_pc_active@2x.png')],
    label: 'PC端独立课堂'
  },
  {
    id: 3,
    // imgUrl: 'http://res.training.luojigou.vip/FsGTOeaPqx7Ipow75LJYM8ETlKew?imageView2/0/q/50|imageslim',
    // activeImgUrl: 'http://res.training.luojigou.vip/FqmqyLMeRxdvj__Z618fkgVHJV7J?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/tab_parent_nor.png'),
    activeImgUrl: require('~/assets/images/products/tab_parent_active.png'),
    srcsetImg: [require('~/assets/images/products/tab_pc_nor.png'), require('~/assets/images/products/tab_pc_nor@2x.png')],
    srcsetActiveImg: [require('~/assets/images/products/tab_pc_active.png'), require('~/assets/images/products/tab_pc_active@2x.png')],
    label: '家长端APP'
  },
  {
    id: 4,
    // imgUrl: 'http://res.training.luojigou.vip/FgoA_S33kLvcoMktbN4ORQO9Kfc8?imageView2/0/q/50|imageslim',
    // activeImgUrl: 'http://res.training.luojigou.vip/Fgm-DUhf4ySZc6uEX2IZXzP-NdzS?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/tab_teacher_nor.png'),
    activeImgUrl: require('~/assets/images/products/tab_teacher_active.png'),
    srcsetImg: [require('~/assets/images/products/tab_teacher_nor.png'), require('~/assets/images/products/tab_teacher_nor@2x.png')],
    srcsetActiveImg: [require('~/assets/images/products/tab_teacher_active.png'), require('~/assets/images/products/tab_teacher_active@2x.png')],
    label: '园长端APP'
  },
])

const childLabelData = Object.freeze([
  {
    // imgUrl: 'http://res.training.luojigou.vip/FhtCI0QNlGfUD8ag9J6oWgQgNfZl?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/en_xcx.png'),
    label: '小程序课堂',
    firstText: '中德智慧教学通',
    secoendText: '好老师教育服务平台'
  },
  {
    // imgUrl: 'http://res.training.luojigou.vip/FhtCI0QNlGfUD8ag9J6oWgQgNfZl?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/en_xcx.png'),
    label: 'H5课堂',
    firstText: '给每个公众号装上强大的移动课堂',
    secoendText: ''
  },
  {
    // imgUrl: 'http://res.training.luojigou.vip/Fu5OdPJa9vbxGjpYwGh6n-IysLQE?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/en_classroom.png'),
    label: 'PC端独立课堂',
    firstText: '家长宝宝一站式服务平台',
    secoendText: ''
  },
  {
    // imgUrl: 'http://res.training.luojigou.vip/FtLPk1zWRF5EBAbJrousaqoPqg_y?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/en_parent.png'),
    label: '家长APP',
    firstText: '家长宝宝一站式服务平台',
    secoendText: ''
  },
  {
    imgUrl: require('~/assets/images/products/en_teach.png'),
    // imgUrl: 'http://res.training.luojigou.vip/Fu5OdPJa9vbxGjpYwGh6n-IysLQE?imageView2/0/q/50|imageslim',
    label: '教师端APP',
    firstText: '家长宝宝一站式服务平台',
    secoendText: ''
  },
])
export default {
  name: 'CoursePage',
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  components: {
    Xcx,
    Label,
    H5,
    Pc,
    Parent,
    Teacher
  },
  mounted () {
    if (process.browser) { 
      new WOW({
        offset: 0,   
        live: true
      }).init()
    } 
  },
  computed: {
    lineStyle () {
      let site = 250 * this.currentTabId  
      if (site === 250) {
        site = 245
      }
      return `transform: translateX(${site + 'px'})`
    },
    labelProps () {
      return this.childLabelData.slice(this.currentTabId, this.currentTabId + 1)[0]
    }
  },
  data () {
    return {
      tabsData,
      currentTabId: 0,
      comName: 'Xcx',
      childLabelData,
    }
  },
  methods: {
    changeTabgs (tab) {
      this.currentTabId = tab.id
      switch (tab.id) {
        case 0:
          this.comName = 'Xcx'
          break;
        case 1:
          this.comName = 'H5'
          break;
        case 2:
          this.comName = 'Pc'
          break;
        case 3:
          this.comName = 'Parent'
          break;
        case 4:
          this.comName = 'Teacher'
          break;
        default:
          break;
      }
    }
  }
}
</script>

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

.Course-container {
  .course-change {
    position: relative;
    .tabs {
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 3;
      // margin-top: 106px;
      padding-top: 123px;
        img {
          width: 1200px;
          height: 179px;
        }
        .tags-box {
          padding: 48px 65px 36px;
          width: 1200px;
          background: #FFFFFF;
          box-shadow: 0px 1px 15px 0px rgba(218, 230, 255, 0.74);
          border-radius: 17px;

          display: flex;
          justify-content: space-between;
          align-items: center;
          .tabs-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            &.active {
              position: relative;
              &:after {
                content: '';                 /*CSS伪类用法*/
                position: absolute;         /*定位背景横线的位置*/
                bottom: -28px;
                background: $theme_color_fu;       /*宽和高做出来的背景横线*/
                width: 62px;
                height: 1px;
                box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.77);
              }
              // border-bottom: 1px solid $theme_color_fu;
            }
            img {
              width:  57px;
              height: 42px;
              object-fit: fill;
              margin-bottom: 30px;
            }
          }
        }
    }
    
  
    .line {
      // width: 1070px;
      position: absolute;
      left: 416px;
      top: 153px;
        img {
          width: 72px;
          height: 9px;
          transition: transform 1s;
        }
    }
  }
  .label {
    margin-top: 130px;
    margin-bottom: 55px;
  }

}

.cp {
  cursor: pointer;
}

</style>