nuxtProject/pages/Industrydetails/traffic.vue

<template>
  <!-- 交通运输-详情页 -->
  <div class="client-traffic-page">

    <!-- 交通运输banner栏 -->
    <div class="traffic-banner"></div>

    <!-- 交通运输的发展现状 -->
    <div class="industrydetails-develop-box">
      <h4 class="client-title">交通运输行业的发展现状</h4>
      <div class="client-container">
        <p>现代交通运输正朝着高速化，大型化，专业化和网络化方向发展，各种运输方式之间的市场竞争也已全面展开。由于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输系统规划与管理、物流系统工程等方面专业知识，并能独立从事汽车运用与管理、物流系统规划设计与管理的复合型高级工程技术人才，人才的培养格外重要。</p>
        <img :src="developImg" alt="交通运输的发展现状" />
      </div>
    </div>

    <!-- 我们的系统为您改变了什么 -->
    <div class="traffic-change-box">
      <h4 class="client-title">我们的系统为您改变了什么</h4>
      <div class="client-container">
        <div class="industrydetails-content tc">
          <div class="change-content-left">
            <h5>传统培训手段的问题</h5>
            <ul>
              <li><i></i><p>统一组织培训或考试难度非常大</p></li>
              <li><i></i><p>安全学习无法长期反复培训</p></li>
              <li><i></i><p>培训考试成本高、耗费精力</p></li>
              <li><i></i><p>员工分布各地，常年都在船上车上，集中学习困难</p></li>
            </ul>
          </div>
          <div class="change-content-right">
            <h5>我们能解决的问题</h5>
            <ul>
              <li><i></i><p>即学即练，使学习效果更显著，效率增倍</p></li>
              <li><i></i><p>长期反复进行安全培训，来巩固知识，加强意识</p></li>
              <li><i></i><p>解决线下难以组织高频、统一进度的培训和考试的问题</p></li>
              <li><i></i><p>完善的后台统计功能，有效定位学员薄弱的知识点</p></li>
              <li><i></i><p>费用、人力和时间成本降低90%以上</p></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'traffic',
        layout:     'templateB',
        data() {
          return {
            // 发展现状img
            developImg:   require(`~/static/images/client/industrydetails/traffic-develop-img.png`),
          }
        },
    };
</script>

<style scoped>

</style>