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

<template>
  <!--  立即咨询  -->
  <div class="service-code-box mta-hidden-xs" :class="pageData.topClass" :style="pageData.topStyle">
    <h4>{{ pageData.title }}</h4>
    <p v-if="pageData.p1" class="jinglu-weixin">{{ pageData.p1 }}</p>
    <img :src="imgUrl" alt="">
    <p v-if="pageData.p2" class="kefu-weixin">{{ 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/code-bj01.png'), // 企业培训
      bg2: require('static/codeImage/code-bj02.png'), // 教育机构+食品餐饮
    }
  },
  computed: {
    pageData() {
      const title = '立即扫码资讯，领取您的专属解决方案';
      const p1 = '马上扫码添加客户经理';
      const p2 = '扫码添加客服微信';
      let result = {};
      switch (this.source) {
        case 'exam':
          // 严肃考试
           result = Object.assign({title, p2}, {topClass: 'kefu'}, {topStyle: ''}, {imgUrl: this.imgUrl});
           break;
        case 'peixun':
          // 企业培训
          result = Object.assign({
            title,
            p1
          }, {topClass: 'jingli'}, {topStyle: `background-image: url(${this.bg1})`}, {imgUrl: this.imgUrl2});
          break;
        case 'education':
          // 解决方案 -> 教育机构
        case 'biteAndSup':
          // 解决方案 -> 食品餐饮
        case 'erupt':
          // 解决方案 -> 万人高并发
        case 'transportation':
          // 解决方案 -> 交通运输
        case 'financial':
          // 解决方案 -> 金融保险
        case 'medical':
          // 解决方案 -> 医疗行业
        case 'privatization':
          // 解决方案 -> 私有化部署
        case 'government':
        // 解决方案 -> 政府机构
        case 'news':
        // 客户案例
        case 'energy':
          // 解决方案 -> 能源化工
          result = Object.assign({
            title,
            p2
          }, {topClass: 'kefu-leve-bj'}, {topStyle: `background-image: url(${this.bg2})`}, {imgUrl: this.imgUrl});
          break;
      }
      return result;
    },
  }
}
</script>

<style lang="scss" scoped>
.service-code-box {
  width: 100%;
  height: 440px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  background-repeat: no-repeat;
  padding: 100px 0 83px;
  background-size: cover;

  h4 {font-size: 30px;text-align: center;margin: 0 0 45px;color: #fff;}

  img {width: 142px;height: 142px;margin: 0 auto;}

  p {font-size: 18px;text-align: center;margin: 24px 0 0;color: #fff;}

  // 客服---(纯白色背景)
  &.kefu {
    background-color: #FAFAFA;
    h4,p {color: #333;}
  }

  // 经理---（/背景为弧形的光）
  &.jingli {
    height: 360px;padding: 62px 0 62px;
    h4 {margin: 0 0 30px;}
    p{margin: 0 0 16px;}
  }

  // 客服带背景图---(背景为菱形的光)
  &.kefu-leve-bj {}


}
</style>