nuxtProject/pages/solution/transportation.vue

<template>
  <div class="client-exam-page client-platform-page">
    <!-- 广告图位置 -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner">
        <div class="client-container mta-hidden-xs">
          <div class="banner-btn-groups">
            <onlineInformationBtn class="online-information-btn btn-item" />
          </div>
        </div>
      </div>
    </div>

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

    <!--  交通运输培训痛点  -->
    <div class="client-tongdian-box client-container">
      <h4>交通运输培训痛点</h4>
      <ul>
        <li>
          <div>
            <i></i>
            <p>员工分布各地，常年都在船上车上，集中培训考核非常困哪</p>
          </div>
        </li>
        <li>
          <div>
            <i></i>
            <p>老员工离职，带走工作经验，新人重新摸索经验</p>
          </div>
        </li>
        <li>
          <div>
            <i></i>
            <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
          </div>
        </li>
      </ul>
    </div>


    <!--  青谷解决方案  -->
    <div class="platform-products-services client-container">
      <h4 class="client-title">青谷解决方案</h4>
      <template v-for="(item,index) in productList">
        <img-card-lv2 :option="item" v-if="item.lv == 2" :key="index">
          <div class="btn-groups">
            <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
          </div>
        </img-card-lv2>
        <img-card-lv1 :option="item" v-if="item.lv == 1" :key="index">
          <div class="btn-groups">
            <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
          </div>
        </img-card-lv1>
      </template>
    </div>

    <!--  交通运输类课程案例  -->
    <div class="client-anli-box client-container">
      <h4>交通运输类课程案例</h4>
      <p>青谷软件可为交通运输行业行业定制电子化课程</p>
      <ul>
        <li>
          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
    </div>

    <!--  立即咨询  -->
    <desWithCode source="transportation"></desWithCode>

    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>

  </div>
</template>

<script>
import chanPinTiYan from "~/components/common/chanPinTiYan";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import {BannerImgs} from "~/defaultConfig";
import videoDialog from "~/components/common/videoDialog";
import videoCard from "~/components/common/videoCard";
import desWithCode from "~/components/common/layout/desComp/desWithCode";
import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
import imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1";

/**
 * @ 解决方案 -> 交通运输
 */
export default {
  name: "transportation",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard, desWithCode, imgCardLv2, imgCardLv1},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaotongyunshu}),
    ];
    const [res2] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
      productList: [
        {
          content: {
            title: '高效智能的在线培训系统',
            list: [
              {
                value: '支持在线课程、学习地图、直播教学、培训计划等强大的企业培训系统功能',
              },
              {
                value: '支持多类型课件，图文、文档、视频、音频及站外链接任意选择，在线学习形式更丰富',
              },
              {
                value: '一键设置课程关联考试，实时记录学时进度，让学员学习状况一目了然',
              },
            ],
            order: 2,
            num: '01',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi',
          lv: 2,
        },
        {
          content: {
            title: '简单易上手的在线考试系统',
            list: [
              {
                value: '考试系统使用方便，操作简单，节约成本，无需独立开发',
              },
              {
                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
              },
              {
                value: '支持万人同时在线，超高并发安全稳定运行',
              },
            ],
            order: 1,
            num: '02',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi',
          lv: 2,
        },
        {
          content: {
            title: '帮助企业构建自主课程体系',
            des: '基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。',
            list: [
              {
                value: '职业素养',
              },
              {
                value: '领导能力',
              },
              {
                value: '人力资源',
              },
              {
                value: '市场营销',
              },
              {
                value: '行政管理',
              },
              {
                value: '财务管理',
              },
              {
                value: '客服服务',
              },
              {
                value: '产品运营',
              },
              {
                value: '生产采购',
              },
            ],
            order: 2,
            num: '03',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi',
          lv: 1,
        },
        {
          content: {
            title: '多端口个性化设置随心选择',
            list: [
              {
                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
              },
              {
                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
              },
              {
                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
              },
            ],
            order: 1,
            num: '04',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi',
          lv: 2,
        }
      ],
    }
  },
  methods: {
    showVideo({url}) {
      this.curVideo = url;
      this.visible = true;
    }
  }
}
</script>

<style lang="scss" scoped>

.client-tongdian-box {

  ul {

    li {
      &:nth-child(1) {
        div {
          background-image: url("~static/gangweiIcon/z91.png");

          i {
            background-image: url('~static/gangweiIcon/z105.png');
          }
        }
      }
      &:nth-child(2) {
        div {
          background-image: url("~static/gangweiIcon/z92.png");
          i {
            background-image: url('~static/gangweiIcon/z97.png');
          }
        }
      }
      &:nth-child(3) {
        div {
          background-image: url("~static/gangweiIcon/z93.png");
          i {
            background-image: url('~static/gangweiIcon/z103.png');
          }
        }
      }
    }
  }
}

.platform-products-services {
  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    margin-top: 140px;
    margin-bottom: 120px;
  }
  .btn-groups {
    margin-top: 50px;
  }
}


@media (max-width: 768px) {


  .client-tongdian-box {
    ul {
      li {
        &:nth-child(1) {
          div {
            background-image: none;

            i {
              background-image: url('~static/gangweiIcon/z105.png');
            }
          }
        }
        &:nth-child(2) {
          div {
            background-image: none;
            i {
              background-image: url('~static/gangweiIcon/z97.png');
            }
          }
        }
        &:nth-child(3) {
          div {
            background-image: none;
            i {
              background-image: url('~static/gangweiIcon/z103.png');
            }
          }
        }
      }
    }
  }


}
</style>