proginn-frontend/components/credit/header.vue

<template>
  <section class="topArea" :class="{isMobile: mobile}">
    <div class="bgImage">
      <img :src="!mobile ? data.bgImg : data.bgImgMobile" alt="">
    </div>
    <div class="topContent">
      <div class="left">
        <div class="titleBox">
          <img class="icon" v-if="data.icon" :src="data.icon"/>
          <p class="title">{{data.title}}</p>
        </div>
        <p :class="'subWord ' + (!data.isNormal && ' sub')">{{data.subTitle}}</p>
        <p :class="'subWord ' + (!data.isNormal && ' sub')" style="font-size: 18px" v-if="data.creditLevel">{{data.creditLevel}}</p>
      </div>
      <div class="right" v-if="!mobile">
        <img :src="data.mapImg" alt="">
        <div class="buttonArea" v-if="data.topRightJumpList" >
          <div class="cell"
            v-for="key in Object.keys(data.topRightJumpList)"
            :class="key"
            :key="'c'+key"
            @click="jumpTo(data.topRightJumpList[key])"
          />
        </div>
      </div>
    </div>
  </section>
</template>

<script>

  export default {
    props: {
      data: {
        type: Object,
        default: function () {
          return {
            icon: '',
            title: '技术信用',
            subTitle: '真实可信赖的程序员能力与口碑评估体系',
            bgImg: require('@/assets/img/credit/bgTop1.png'),
            bgImgMobile: require('@/assets/img/credit/bgTopMobile1.png'),
            mapImg: require('@/assets/img/credit/indexMap.png'),
            isNormal: true,
            topRightJumpList: null
          }
        }
      }
    },
    data() {
      return {
        mobile: this.$deviceType.isMobile()
      }
    },
    mounted() {
    },
    methods: {
      jumpTo(url) {
        if (url) {
          location.href = url
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  @import '~@/assets/css/credit/header.scss';
</style>