zyuas.com/src/view/Products/Software.vue

<template>
  <div id="Software">
    <div class="container text-center">
      <h3>无人机软件与服务</h3>
      <p style="color:#b2b2b2">深度洞察，更快捷的实现企业数字化转型</p>
    </div>
    <div class="container">
      <ul class="accordion-container col-md-12 hidden-xs hidden-sm">
        <li class="accordion-item" v-for="(item, index) in largeList" :key="index"
            :style="{backgroundImage: 'url(' + item.backgroundImage + ')'}" @click="AccordingClick(item.id)">
          <p class="accordion-title" v-for="(title, titleIndex) in item.titles" :key="titleIndex">{{ title }}</p>
        </li>
      </ul>
      <!--移动端-->
      <VerticalList :items="smallList" @item-click="AccordingClick"/>

    </div>
  </div>
</template>
<script>
import {WOW} from 'wowjs'
import VerticalList from '../../components/VerticalList.vue'

export default {
  name: 'Software',
  components: {VerticalList},
  data() {
    return { // 移动端显示
      smallList: [
        {
          id: 'section-1',
          title: '大疆司空2',
          sm_title: '全面掌握现场动态，打破信息壁垒，团队高效协作',
          img: require('@/assets/img/software_icon1.png')
        }, {
          id: 'section-2',
          title: '大疆智图',
          // sm_title: '一款以摄影测量技术为核心的的三维重建软件，可支持各类可见光精准高效二三维重建、大疆激光雷达的数据处理。',
          img: require('@/assets/img/software_icon2.png')
        }, {
          id: 'section-3',
          title: '飞行咨询服务',
          img: require('@/assets/img/software3.png')

        }
      ],
      // web显示
      largeList: [
        {
          id: '大疆司空2',
          backgroundImage: require('@/assets/img/software1.png'),
          titles: "大疆司空2",
          sm_title: '一站式无人机任务管理云平台，带来全面、实时的态势感知，实现团队信息高效聚合、处理与同步。'
        }, {
          id: '大疆智图',
          backgroundImage: require('@/assets/img/software2.png'),
          titles: "大疆智图",
          // sm_title: '一款以摄影测量技术为核心的的三维重建软件，可支持各类可见光精准高效二三维重建、大疆激光雷达的数据处理。 大疆智图与大疆行业无人机和负载可形成完美搭配，形成面向测绘、电力、应急、建筑、交通、农业等垂直领域完整的应用解决方案。'
        }, {
          id: '飞行咨询服务',
          backgroundImage: require('@/assets/img/software3.png'),
          titles: "飞行咨询服务",
        }
      ]
    }
  },
  mounted() {
    var wow = new WOW();
    wow.init();
  },
  methods: {
    AccordingClick(id) {
      this.$router.push({
        name: 'servicedetail', //todo
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style scoped>
.accordion-container {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: black;

  .accordion-item {
    list-style: none;
    height: 500px;
    transition: width 0.5s;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    &:not(:hover) {
      width: 33%;
    }

    &:hover {
      width: 800px;

      &::after {
        opacity: 1;
      }
    }

    &::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.1);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s;
    }

    .accordion-title {
      font-family: var(--font-family-base);
      font-weight: var(--font-weight-light);
      color: #fff;
      font-size: 20px;
      margin-bottom: 220px;
      z-index: 2;
    }
  }
}

</style>