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"
              @click="changeTabgs(tab)"
              v-for="tab in tabsData" :key="tab.id">
              <img class="cp" :src="currentTabId !== tab.id ? tab.imgUrl : tab.activeImgUrl" 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 />
    </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',
    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',
    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',
    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',
    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',
    label: '教师端APP'
  },
])

const childLabelData = Object.freeze([
  {
    imgUrl: 'http://res.training.luojigou.vip/FhtCI0QNlGfUD8ag9J6oWgQgNfZl?imageView2/0/q/50|imageslim',
    label: '小程序课堂',
    firstText: '中德智慧教学通',
    secoendText: '好老师教育服务平台'
  },
  {
    imgUrl: 'http://res.training.luojigou.vip/FhtCI0QNlGfUD8ag9J6oWgQgNfZl?imageView2/0/q/50|imageslim',
    label: 'H5课堂',
    firstText: '给每个公众号装上强大的移动课堂',
    secoendText: ''
  },
  {
    imgUrl: 'http://res.training.luojigou.vip/Fu5OdPJa9vbxGjpYwGh6n-IysLQE?imageView2/0/q/50|imageslim',
    label: 'PC端独立课堂',
    firstText: '家长宝宝一站式服务平台',
    secoendText: ''
  },
  {
    imgUrl: 'http://res.training.luojigou.vip/FtLPk1zWRF5EBAbJrousaqoPqg_y?imageView2/0/q/50|imageslim',
    label: '家长APP',
    firstText: '家长宝宝一站式服务平台',
    secoendText: ''
  },
  {
    imgUrl: 'http://res.training.luojigou.vip/Fu5OdPJa9vbxGjpYwGh6n-IysLQE?imageView2/0/q/50|imageslim',
    label: '教师端APP',
    firstText: '家长宝宝一站式服务平台',
    secoendText: ''
  },
])
export default {
  name: 'CoursePage',
  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">
.Course-container {
  .course-change {
    position: relative;
    .tabs {
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 3;
      margin-top: 106px;
        img {
          width: 1200px;
          height: 179px;
        }
        .tags-box {
          width: 1070px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tabs-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            img {
              width:  50px;
              height: 50px;
              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>