zhongde-website/pages/product/course.vue

<template>
  <section class="Course-container">
    <common-banner
      :img="bgImg"
      :height="595">
      <div class="course-header">
        <div class="content w1200">
          <div class="left">
            <div class="title">思维探索OMO</div>
            <div class="subTitle">在线教育平台，覆盖线上多场景</div>
          </div>
          <img class="bg-logo" :src="bgLogo" alt="" srcset="">
        </div>
      </div>
    </common-banner>

    <component :is="comName" >
      <div class="course-change">
        <div class="tabs">
          <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>
      <!-- <Label class="label" :labelProps="labelProps" v-solt:label /> -->
      <Label class="label" :labelProps="labelProps" />
    </component>
  </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'
import CommonBanner from "@/components/common/banner";

// console.log(Xcx);
const tabsData = Object.freeze([
  {
    id: 0,
    imgUrl: require('~/assets/images/products/tab_parent_nor.png'),
    activeImgUrl: require('~/assets/images/products/tab_parent_active.png'),
    srcsetImg: [require('~/assets/images/products/tab_parent_nor.png'), require('~/assets/images/products/tab_parent_nor@2x.png')],
    srcsetActiveImg: [require('~/assets/images/products/tab_parent_active.png'), require('~/assets/images/products/tab_parent_active@2x.png')],
    label: '逻辑狗·一起成长'
  },
  {
    id: 1,
    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: '逻辑狗·家园共育'
  },
  {
    id: 2,
    // 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: '小程序/h5'
  },
  {
    id: 3,
    // 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: '互联网矩阵'
  },
  // {
  //   id: 4,
  //   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端独立课堂'
  // },

])

const childLabelData = Object.freeze([
  {
    // imgUrl: 'http://res.training.luojigou.vip/FtLPk1zWRF5EBAbJrousaqoPqg_y?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/en_parent.png'),
    label: '逻辑狗·一起成长',
    firstText: '每天进步一点点',
    secoendText: ''
  },
  {
    imgUrl: require('~/assets/images/products/en_teach.png'),
    // imgUrl: 'http://res.training.luojigou.vip/Fu5OdPJa9vbxGjpYwGh6n-IysLQE?imageView2/0/q/50|imageslim',
    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/FhtCI0QNlGfUD8ag9J6oWgQgNfZl?imageView2/0/q/50|imageslim',
    imgUrl: require('~/assets/images/products/en_xcx.png'),
    label: '互联网矩阵',
    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: ''
  // },
])
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,
    CommonBanner
  },
  mounted () {},
  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 {
      bgImg: require("~/assets/images/course/banner-xcx.png"),
      bgLogo: require("~/assets/images/course/bgLogo.png"),
      tabsData,
      currentTabId: 0,
      comName: 'Parent',
      childLabelData,
    }
  },
  methods: {
    changeTabgs (tab) {
      this.currentTabId = tab.id
      switch (tab.id) {
        case 0:
          this.comName = 'Parent'
          break;
        case 1:
          this.comName = 'Teacher'
          break;
        case 2:
          this.comName = 'Xcx'
          break;
        case 3:
          this.comName = 'H5'
          break;
        case 4:
          this.comName = 'Pc'
          break;
        default:
          break;
      }
    }
  }
}
</script>

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

.Course-container {
  .course-header {
    height: 100%;
    padding-top: 170px;
    .content {
      height: 100%;
      position: relative;
      .left {
        text-align: left;
      }
      .title {
        font-size: 66px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 92px;
      }
      .subTitle {
        margin-top: 39px;
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
      }
      .bg-logo {
        position: absolute;
        bottom: 20px;
        right: 46px;
        width: 168px;
        height: 129px;
      }
    }
  }

  .course-change {
    position: relative;
    .tabs {
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 3;
      // margin-top: 106px;
      padding-top: 100px;
        img {
          width: 1200px;
          height: 179px;
        }
        .tags-box {
          padding: 48px 60px 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;
        }
    }
  }
}

.cp {
  cursor: pointer;
}

</style>