nuxtProject/components/common/layout/desComp/desWithCode.vue

<template>
  <!--  立即咨询  -->
  <div class="client-zixun-code mta-hidden-xs" :class="pageData.topClass" :style="pageData.topStyle">
    <h4>{{ pageData.title }}</h4>
    <p v-if="pageData.p1" class="p1">{{ pageData.p1 }}</p>
    <img :src="imgUrl" alt="">
    <p v-if="pageData.p2" class="p2">{{ pageData.p2 }}</p>
  </div>
</template>

<script>
export default {
  name: "desWithCode",
  props: {
    source: {
      type: String,
    }
  },
  data() {
    return {
      imgUrl: require('static/codeImage/code_kefu.png'), // 客服二维码
      imgUrl2: require('static/codeImage/code_jingli.png'), // 经理二维码
      bg1: require('static/codeImage/bg01.png'), // 企业培训
      bg2: require('static/codeImage/bg01.png'), // 教育机构+食品餐饮
    }
  },
  computed: {
    pageData() {
      const title = '立即扫码资讯，领取您的专属解决方案';
      const p1 = '马上扫码添加客户经理';
      const p2 = '扫码添加客服微信';
      let result = {};
      switch (this.source) {
        case 'exam':
          // 严肃考试
          result = Object.assign({title, p2}, {topClass: 'kefu'}, {topStyle: 'background: none'}, {imgUrl: this.imgUrl});
        case 'peixun':
          // 企业培训
          result = Object.assign({
            title,
            p1
          }, {topClass: 'jingli'}, {topStyle: `background: url(${this.bg1})`}, {imgUrl: this.imgUrl2});
        case 'education':
          // 解决方案 -> 教育机构
        case 'bitAnsSup':
          // 解决方案 -> 食品餐饮
        case 'erupt':
          // 解决方案 -> 万人高并发
        case 'transportation':
          // 解决方案 -> 交通运输
        case 'financial':
          // 解决方案 -> 金融保险
        case 'medical':
          // 解决方案 -> 医疗行业
        case 'privatization':
          // 解决方案 -> 私有化部署
        case 'government':
        // 解决方案 -> 政府机构
        case 'news':
        // 客户案例
        case 'energy':
          // 解决方案 -> 能源化工
          result = Object.assign({
            title,
            p2
          }, {topClass: 'kefu_level2'}, {topStyle: `background: url(${this.bg2})`}, {imgUrl: this.imgUrl});
      }
      return result;
    },
  }
}
</script>

<style lang="scss" scoped>
.client-zixun-code {
  width: 100%;
  background: green;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;

  h4 {
    text-align: center;
    font-size: 30px;
    height: 30px;
  }

  img {
    text-align: center;
    margin: 0 auto;
    width: 142px;
    height: 142px;

  }

  p {
    text-align: center;
    height: 18px;
  }

  // 客服
  &.kefu {
    height: 440px;

    h4 {
      color: #333;
      margin-top: 62px;
      margin-bottom: 43px;
    }

    p.p2 {
      font-size: 18px;
      color: #333;
      margin-bottom: 81px;
      margin-top: 24px;
    }
  }

  // 经理
  &.jingli {
    height: 360px;

    h4 {
      color: #fff;
      margin-top: 62px;
      margin-bottom: 30px;
    }

    p.p1 {
      font-size: 18px;
      color: #fff;
      margin-bottom: 16px;
    }

    img {
      margin-bottom: 60px;
    }
  }

  &.kefu_level2 {
    height: 360px;

    h4 {
      color: #fff;
      margin-top: 62px;
      margin-bottom: 43px;
    }

    p.p2 {
      font-size: 18px;
      color: #fff;
      margin-bottom: 81px;
      margin-top: 24px;
    }
  }


}
</style>