nuxtProject/pages/product/shiChangYingXiao.vue

<template>
  <div class="client-platform-page client-exam-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>
    </div>

    <!--  市场部 销售部  -->
    <div class="client-shichang-xiaoshou client-container">
      <div class="nav-btns">
        <span @click="changeStatus('shichang')" :class="{active: curActive}">市场部</span>
        <span @click="changeStatus('xiaoshou')" :class="{active: !curActive}">销售部</span>
      </div>

      <p v-if="curActive">
        市场部是销售决策部门信息的提供者和参谋，是把产品、服务信息传达给目标客户的企划者和执行者。
        在变幻莫测的市场上，市场部为企业辩路、寻路、带路，对企业的发展起着至关重要的作用。
      </p>

      <p v-else>
        销售部是以产品销售为主要工作的部门。负责总体的营销活动，决定公司的营销策略和措施，
        并对营销工作进行评估和监控，包括公共关系、销售、客户服务等。
      </p>
    </div>

    <!--  岗位职责  -->
    <div class="client-gangwei-box">

      <gangwei-list  v-if="curActive" label="岗位职责" :list="shichang" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>

      <gangwei-list  v-else label="岗位职责" :list="xiaoshou" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>

    </div>

    <!--  部分课程列表  -->
    <div class="platform-course-list client-container">
      <h4>部分课程列表</h4>

      <mtaTable v-if="curActive" :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>

      <mtaTable v-else :data="tableData2" :config="tableConfig" @shi-kan="shiKan"></mtaTable>

      <div class="btn-groups center">
        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
    <!--  申请方案  -->
    <applicationDialog :visible.sync="telDl"></applicationDialog>
  </div>
</template>

<script>
import mtaTable from "~/components/common/mtaTable";
import videoDialog from "~/components/common/videoDialog";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import {BannerImgs, shichangyingxiao_shichang, shichangyingxiao_xiaoshou} from "~/defaultConfig";
import gangweiList from "~/components/common/layout/desComp/gangweiList";
import applicationDialog from "~/components/common/applicationDialog";
import applyBtn from "~/components/common/applyBtn";


/**
 * @ 产品与服务 -> 课程资源 -> 市场营销
 */

export default {
  name: "professionalQuality",
  layout:   'templateB',
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.shichangyingxiao}),
    ]
    const [res1] = await Promise.all(arr);
    return {
      bannerList: res1.data.data || [],
    }
  },
  components: {
    mtaTable, videoDialog,applicationDialog,applyBtn,
    freeTrialBtn,onlineInformationBtn, gangweiList},
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      tableConfig: [
        {
          label: '课程名称',
          key: 'name'
        },
        {
          label: '使用行业',
          key: 'hangye'
        },
        {
          label: '使用人群',
          key: 'renqun'
        }
      ],
      tableData: [
        {
          name: '如何分析营销环境',
          shikanUrl: 'https://spdb.mtavip.com/f813728dc8fc41deaf79f6b2e77a0924/b15429d54c4a48539389fa79e0417760-abed0e92e4daa63adf70e162177497ad-fd.mp4',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '市场调查必备知识',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '低成本营销策略',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '如何进行有效的品牌调查',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '铁军式营销',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '区域市场管理的重点',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '区域市场运作的认知与思考',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '创新营销',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '商务谈判的共赢之路',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '企业微信营销管理全攻略',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
      ],
      tableData2: [
        {
          name: '高品质沟通与说服力',
          shikanUrl: 'https://spdb.mtavip.com/e6a69ffb67794f67a4954171dc306ee8/f0c35aeb8b2b42fca6e53b0e8c88d38b-ee89153189f93dd72235278de24d2e69-fd.mp4',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '攻心销售',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '如何处理客户异议',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '如何客服沟通障碍',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '销售团队建设与管理',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场专员'
        },
        {
          name: '大客户销售与管理',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '销量倍增--激活经销商',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '如何打造销售团队的激励体系',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '原来这样销售可以百分百成交',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
        {
          name: '商务谈判锦囊妙计',
          shikanUrl: '',
          hangye: '全行业',
          renqun: '市场经理'
        },
      ],
      curVideo: '',
      visible: false,
      curActive: true,
      telDl: false,
    }
  },
  computed: {
    shichang() {
      return shichangyingxiao_shichang
    },
    xiaoshou() {
      return shichangyingxiao_xiaoshou
    },
  },
  methods: {
    shiKan({url}) {
      this.visible = true;
      this.curVideo = url;
    },
    changeStatus(code) {
      if (code === 'shichang') {
        this.curActive = true;
      } else {
        this.curActive = false;
      }
    },
    onApplyBtnActive() {
      this.telDl = true;
    },
    onApplyBtnActiveH5() {
      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/shiChangYingXiao',}});
    },
  }
}
</script>

<style lang="scss" scoped>

.client-shichang-xiaoshou {
  margin: 0 auto;
  text-align: center;
  .nav-btns {
    width: 460px;
    height: 80px;
    margin: 46px auto 70px;
    border-radius: 80px;
    border: 1px solid #00b96b;
    display: flex;
    align-items: center;
    padding: 5px;

    span  {
      width: 50%;
      height: 100%;
      line-height: 80px;
      text-align: center;
      cursor: pointer;
      display: inline-block;
      border-radius: 80px;
      outline: none;



      &.active {
        background: #00b96b;
        color: #fff;
      }
    }
  }
}

.platform-course-list {
  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 98px;
  }
}

@media (max-width: 768px) {

  .btn-groups {
    margin-top: 10%;
    margin-bottom: 10%;
  }

  .platform-course-list {
    h4 {
      font-size: 20px;
      margin-bottom: 10%;
    }
  }


  .client-shichang-xiaoshou {
    margin: 0 auto;
    text-align: center;
    .nav-btns {
      width: 80%;
      height: 40px;
      margin: 25px auto 35px;
      border-radius: 40px;
      border: 1px solid #00b96b;
      display: flex;
      align-items: center;
      padding: 3px;

      span  {
        display: inline-block;
        width: 50%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        border-radius: 40px;
        outline: none;

        &.active {
          background: #00b96b;
          color: #fff;
        }
      }
    }
  }

}
</style>