zhongde-website/pages/product/course.vue

<template>
  <section class="Course-container">
    
    <Xcx >
      <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" v-for="tab in tabsData" :key="tab.id">
            <img class="" :src="tab.imgUrl" alt="">
            <section>
              {{tab.label}}
            </section>
          </div>
        </div>
        
      </div>
    </Xcx>
  </section>
</template>

<script>
import Xcx from '@/components/products/xcx.vue'

const tabsData = Object.freeze([
  {
    id: 0,
    imgUrl: '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',
    label: '微信H5课堂'
  },
  {
    id: 2,
    imgUrl: 'http://res.training.luojigou.vip/FsVRp9Lk4Cyp5O_JNBe49kfz7vZh?imageView2/0/q/50|imageslim',
    label: 'PC端独立课堂'
  },
  {
    id: 3,
    imgUrl: 'http://res.training.luojigou.vip/FsGTOeaPqx7Ipow75LJYM8ETlKew?imageView2/0/q/50|imageslim',
    label: '家长端APP'
  },
  {
    id: 4,
    imgUrl: 'http://res.training.luojigou.vip/FgoA_S33kLvcoMktbN4ORQO9Kfc8?imageView2/0/q/50|imageslim',
    label: '教师端APP'
  },
])
export default {
  name: 'CoursePage',
  components: {
    Xcx
  },
  data () {
    return {
      tabsData,
    }
  }
}
</script>

<style scoped lang="scss">
.Course-container {
  .tabs {
    display: flex;
    justify-content: center;
    position: relative;
    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;
        }
      }
    }
  }
}
</style>