proginn-frontend/pages/credit/index.vue

<template>
  <div class="credit" :class="{isMobile: mobile}">
    <credit-common-title />
    <section class="contentArea" >
      <div class="screen">
        <div class="screenTop">
          <div class="title">{{screen.title}}</div>
          <div class="line"/>
          <div class="subTitle">{{screen.subTitle}}</div>
        </div>
        <div class="screenList">
          <div class="cell" v-for="(item, index) in screen.children" :key="'screen'+index">
            <div class="cellImg">
              <img :src="item.img" alt="">
            </div>
            <div class="cellBot">
              <div class="cellTitle">{{item.title}}</div>
              <div class="cellSubTitle">{{item.subTitle}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="trust">
        <div class="trustTop">
          <div class="title">{{trust.title}}</div>
          <div class="line"/>
        </div>
        <div class="trustList">
          <div
            class="cell"
            v-for="(item, index) in trust.children"
            :key="'trust'+index"
          >
            <div class="cellImg">
              <img :src="item.img" alt="">
            </div>
            <div class="cellRight">
              <div class="cellTitle">{{item.title}}</div>
              <div class="cellSubTitle">{{item.subTitle}}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="bottomArea">
      <img class="img"
        :src="indexBottomBg"
      />
      <div class="wordBox">
        <p class="word">努力打造未来全网通用的技术信用基础，敬请期待</p>
      </div>
    </section>
  </div>
</template>

<script>
  import CreditCommonTitle from '@/components/credit/header.vue'

  export default {
    layout: "opacity_header",
    components: { CreditCommonTitle },
    head() {
      return {
        title: '程序员客栈技术信用-程序员技术开发能力认证，企业程序员背调专用数据平台',
        meta: [ {
          'name': 'keywords',
          'content': '技术信用,程序员背调,程序员技术能力认证'
        }, {
          'name': 'description',
          'content': '程序员客栈技术信用平台依托多年的程序员数据，提供程序员技能等级认证，服务口碑，就业情况数据核实。为每一位入驻的程序员提供真实有效符合自身能力的技术信用认证，给用工单位提供所录用的程序员以往从业经历或者服务历史口碑的准确报告；对接程序员和用工企业，找出最适合程序员发展的平台，为用工单位提供最合适的程序员人选。程序员技术信用认证、程序员背景调查，请认准程序员客栈技术信用平台！'
        } , {
          'name': 'h1',
          'content': '技术信用'
        } ]
      }
    },
    asyncData({app}) {
      return {
        mobile: app.$deviceType.isMobile(),
        indexBottomBg: app.$deviceType.isMobile() ? require('@/assets/img/credit/indexBottomMobile.png') :
          require('@/assets/img/credit/indexBottom@2x.png')
      }
    },
    data() {
      return {
        screen: {
          title: '技术信用场景',
          subTitle: '利用30万+程序员多年沉淀的真实数据打造信用智能引擎。致力解决企业方、程序员之间的合作信任问题',
          children: [
            {
              img: require('@/assets/img/credit/11.png'),
              title: '资质认证',
              subTitle: '审查考核程序员的专项技能经验，颁发全网通用的资质证书'
            }, {
              img: require('@/assets/img/credit/12.png'),
              title: '智能匹配',
              subTitle: '基于技术信用，结合企业方对行业经验、技能、地区等需求，匹配推荐最合适的技术人才'
            }, {
              img: require('@/assets/img/credit/13.png'),
              title: '技术背调',
              subTitle: '根据企业方委托，核验候选人身份、学历、工作经历，评估过往表现、技术水平，提供详尽的报告。'
            }
          ]
        },
        trust: {
          title: '真实可信的信用数据',
          children: [
            {
              img: require('@/assets/img/credit/21.png'),
              title: '海量的客观数据',
              subTitle: '开发者签约、资质认证、背调等场景，客观数据自动化校验+人工核实，积累了海量的程序员数据。'
            }, {
              img: require('@/assets/img/credit/22.png'),
              title: '真实的交易评价',
              subTitle: '平台以往数年的项目交易，企业方均会对程序员进行多个维度的评价，实际合作评价更加真实可靠。'
            }, {
              img: require('@/assets/img/credit/23.png'),
              title: '专业技术能力评测',
              subTitle: '严选行业经验5-10年、面试经历丰富的资深技术大牛担任面试官，对认证或背调对象的专业能力进行全面、深入的考察，形成技术背调报告。'
            }
          ]
        },
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {}
  }
</script>

<style scope lang="scss">
  @import "../../assets/css/credit/index.scss";
</style>