4.11

assets/css/credit/index.scss

@@ -0,0 +1,222 @@
+@import "../scssCommon";
+
+.credit {
+  position: relative;
+  margin: -85px 0 0;
+  width: 100%;
+  background-color: #fff;
+
+  .contentArea {
+    width: 1000px;
+    margin: 57px auto 57px auto;
+
+    .screen {
+      width: 100%;
+
+      .screenTop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .title {
+          font-weight: 600;
+          color: rgba(50, 50, 50, 1);
+          font-size: 36px;
+          line-height: 50px;
+        }
+        .line {
+          margin: 16px 0;
+          width: 44px;
+          height: 3px;
+          background: rgba(48, 142, 255, 1);
+          border-radius: 1.5px;
+        }
+        .subTitle {
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(153, 153, 153, 1);
+          line-height: 20px;
+        }
+      }
+
+      .screenList {
+        margin-top: 30px;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        display: flex;
+
+        .cell {
+          width:324px;
+          height:361px;
+          background:rgba(255,255,255,1);
+          box-shadow:0 6px 23px 0 rgba(13,24,36,0.07);
+          border-radius:8px;
+
+          .cellImg {
+            font-size: 0;
+            img {
+              width: 324px;
+              height: 220px;
+            }
+          }
+
+          .cellBot {
+            padding: 8px;
+            height: 141px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+
+            .cellTitle {
+              text-align: center;
+              font-weight: 500;
+              color: rgba(17, 28, 45, 1);
+              font-size:20px;
+              line-height:28px;
+            }
+            .cellSubTitle {
+              margin-top: 10px;
+              text-align: left;
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(126, 134, 147, 1);
+              line-height: 20px;
+            }
+          }
+        }
+      }
+
+    }
+
+    .trust {
+      width: 100%;
+      margin-top: 77px;
+
+      .trustTop {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .title {
+          font-weight: 600;
+          color: rgba(50, 50, 50, 1);
+          font-size: 36px;
+          line-height: 50px;
+        }
+        .line {
+          margin: 16px 0;
+          width: 44px;
+          height: 3px;
+          background: rgba(48, 142, 255, 1);
+          border-radius: 1.5px;
+        }
+      }
+
+      .trustList {
+        margin-top: 30px;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+
+
+        .cell {
+          width: 100%;
+          height: 300px;
+          border-radius: 8px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+
+
+
+          .cellImg {
+            flex-shrink: 0;
+            font-size: 0;
+
+            img {
+              width: 481px;
+              height: 300px;
+            }
+          }
+
+          .cellRight{
+            width: 482px;
+            margin-left: 35px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+
+            .cellTitle {
+              text-align: left;
+              font-size:34px;
+              font-weight:600;
+              color:rgba(34,34,34,1);
+              line-height:48px;
+            }
+            .cellSubTitle {
+              margin-top: 17.44px;
+              font-size:17px;
+              font-weight:400;
+              color:rgba(51,51,51,1);
+              line-height:24px;
+            }
+          }
+
+          &:nth-child(even) {
+            flex-direction: row-reverse;
+            .cellRight {
+              margin-left: 0;
+              margin-right: 35px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .bottomArea {
+    position: relative;
+    width: 100%;
+
+    .img {
+      left: 0;
+      top: 0;
+      width: auto;
+      vertical-align: middle;
+    }
+
+    .wordBox {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      p {
+        position: absolute;
+        font-size:36px;
+        font-weight:300;
+        color:rgba(255,255,255,1);
+        line-height:64px;
+        letter-spacing:5px;
+      }
+    }
+  }
+}
+
+
+@media screen and (min-width: 960px) {
+
+}

assets/css/credit/pages/identify.scss

@@ -0,0 +1,71 @@
+.creditIndex {
+  position: relative;
+  margin: -85px 0 0;
+  width: 100%;
+
+  .contentArea {
+    width: 1000px;
+    margin: 0 auto 57px auto;
+
+    .list {
+      .cell {
+        margin-top: 20px;
+        padding: 38px 40px 38px 29px;
+        background: #fff;
+        border-radius: 8px;
+
+        .cellBody {
+          height: 64px;
+          display: flex;
+          align-items: center;
+
+          .left {
+            width: 64px;
+            height: 64px;
+            img{
+              width: 64px;
+              height: 64px;
+            }
+          }
+          .center {
+            margin-left: 17px;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            width: 718px;
+            .title {
+              font-size:22px;
+              font-weight:600;
+              color:rgba(51,51,51,1);
+              line-height:30px;
+            }
+            .subTitle {
+              margin-top: 10px;
+              font-size:12px;
+              font-weight:400;
+              color:rgba(153,153,153,1);
+              line-height:17px;
+            }
+          }
+          .right {
+            margin-left: 15px;
+            width:115px;
+            height:48px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background:rgba(236,236,236,1);
+            border-radius:2px;
+            p {
+              font-size:14px;
+              font-weight:500;
+              color:rgba(102,102,102,1);
+              line-height:20px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

assets/css/credit/pages/index.scss

@@ -0,0 +1,91 @@
+.creditIndex {
+  position: relative;
+  margin: -85px 0 0;
+  width: 100%;
+
+  .contentArea {
+    width: 1000px;
+    margin: 0 auto 57px auto;
+
+    .list {
+
+      .cell {
+        margin-top: 20px;
+        padding: 55px 40px 20px 40px;
+        background: #fff;
+        border-radius: 8px;
+
+
+        .cellBody {
+          height: 108px;
+          display: flex;
+          align-items: center;
+
+          .left {
+            width: 108px;
+            height: 108px;
+            img{
+              width: 108px;
+              height: 108px;
+            }
+          }
+          .center {
+            margin-left: 37px;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            width: 718px;
+            .title {
+              font-size:25px;
+              font-weight:600;
+              color:rgba(51,51,51,1);
+              line-height:36px;
+            }
+            .subTitle {
+              margin-top: 10px;
+              font-size:14px;
+              font-weight:400;
+              color:rgba(153,153,153,1);
+              line-height:20px;
+            }
+          }
+          .right {
+            margin-left: 50px;
+            height: 14px;
+            width: 8px;
+            background: url('~@/assets/img/credit/rightIcon.png') no-repeat;
+            background-size: cover;
+          }
+        }
+
+        .lines {
+          width: 100%;
+          height: 1px;
+          background-color: rgba(244,244,244,1);
+          margin: 60px auto 20px auto;
+        }
+
+        .cellBottom {
+          display: flex;
+
+          .bottomBox {
+            margin-left: 13px;
+            height: 38px;
+            min-width: 106px;
+            padding: 9px 25px;
+            font-size:14px;
+            font-weight:500;
+            color:rgba(102,102,102,1);
+            line-height:20px;
+
+            background:rgba(255,255,255,1);
+            box-shadow:0 6px 23px 0 rgba(13,24,36,0.07);
+            border-radius:2px;
+          }
+        }
+
+      }
+    }
+  }
+
+}

assets/css/scssCommon.scss

@@ -0,0 +1,10 @@
+
+@function pxtovw($px) {
+  @return $px / 18 * 1vw
+}
+
+@media screen and (min-width: 960px) {
+  @function pxtovw($px) {
+    @return $px / 3.75 * 1vw
+  }
+}

components/credit/header.vue

@@ -0,0 +1,112 @@
+<template>
+  <section class="topArea">
+    <div class="topImage">
+      <img :src="data.bgImg" 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>
+      </div>
+      <div class="right">
+        <img :src="data.mapImg" alt="">
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default: function () {
+          return {
+            icon: '',
+            title: '技术信用',
+            subTitle: '真实可信赖的程序员能力与口碑评估体系',
+            bgImg: require('@/assets/img/credit/bgTop1@2x.png'),
+            mapImg: require('@/assets/img/credit/indexMap@2x.png'),
+            isNormal: true
+          }
+        }
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .topArea {
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+    .bgImage {
+      img {
+        width: 100%;
+        vertical-align: middle;
+      }
+    }
+    .topContent {
+      position: absolute;
+      top: 85px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 1000px;
+      left: 50%;
+      transform: translateX(-50%);
+      height: calc(100% - 85px);
+
+      .left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: left;
+
+        .titleBox {
+          display: flex;
+          height: 66px;
+          align-items: center;
+
+          .icon {
+            width: 50px;
+            height: 50px;
+            margin-right: 10px;
+          }
+
+          .title {
+            font-size: 47px;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 1);
+            line-height: 66px;
+          }
+        }
+
+        .subWord {
+          margin-top: 12px;
+          font-size: 30px;
+          font-weight: 300;
+          color: rgba(255, 255, 255, 1);
+          line-height: 42px;
+
+          &.sub {
+            font-size:16px;
+            line-height:22px;
+          }
+        }
+      }
+
+      .right {
+        margin-left: 50px;
+        img {
+          width: 21.22vw;
+          height: 19.61vw;
+        }
+      }
+    }
+  }
+
+</style>

components/header.vue

@@ -28,7 +28,7 @@
           <el-dropdown-item>
             <a
               class="workstation"
-              :href="baseUrl+'/?from=proginn'"
+              href="http://www.binstd.com/?from=proginn"
               style="display: flex; align-items: center;"
             >
               <img
@@ -560,5 +560,6 @@ span.other-icon {
 }
 #proginn-header.transparent .nickname {
   color: white;
+
 }
 </style>

pages/credit/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="credit">
+    <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="@/assets/img/credit/indexBottom.png"/>
+      <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: '驻场工作招聘，2019年最新驻场工作招聘信息-程序员客栈',
+        meta: [ {
+          'name': 'keywords',
+          'content': '驻场招聘,驻场工作招聘,2019年最新驻场招聘信息'
+        }, {
+          'name': 'descrption',
+          'content': '程序员客栈提供全国各地城市IT驻场工作最新招聘信息，核实企业资质，让有工作需求的程序员能得到一份满意的驻场工作；对程序员从业者能力进行严格把关，保障企业能在驻场招聘平台找到靠谱的程序员，确保项目正常进行。找工作、招聘合格的程序员，就上程序员客栈驻场招聘平台！'
+        } ]
+      }
+    },
+    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年、面试经历丰富的资深技术大牛担任面试官，对认证或背调对象的专业能力进行全面、深入的考察，形成技术背调报告。'
+            }
+          ]
+        }
+      }
+    },
+    mounted() {
+
+    },
+    methods: {}
+  }
+</script>
+
+<style scope lang="scss">
+  @import "../../assets/css/credit/index.scss";
+</style>

pages/credit/pages/identify.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="creditIndex">
+    <credit-common-title :data="topAreaData"/>
+    <section class="contentArea">
+      <div class="list">
+        <div class="cell" v-for="(item, index) in list" v-key="'creditIndexList' + index">
+          <div class="cellBody">
+            <div class="left">
+              <img :src="item.icon" alt="">
+            </div>
+            <div class="center">
+              <p class="title">{{item.title}}</p>
+              <p class="subTitle">{{item.subTitle}}</p>
+            </div>
+            <div class="right">
+              <p>暂未开发</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+  import CreditCommonTitle from '@/components/credit/header.vue'
+
+  /**
+   * 首页
+   */
+  export default {
+    layout: "opacity_header",
+    components: { CreditCommonTitle },
+    head() {
+      return {
+        title: '驻场工作招聘，2019年最新驻场工作招聘信息-程序员客栈',
+        meta: [ {
+          'name': 'keywords',
+          'content': '驻场招聘,驻场工作招聘,2019年最新驻场招聘信息'
+        }, {
+          'name': 'descrption',
+          'content': '程序员客栈提供全国各地城市IT驻场工作最新招聘信息，核实企业资质，让有工作需求的程序员能得到一份满意的驻场工作；对程序员从业者能力进行严格把关，保障企业能在驻场招聘平台找到靠谱的程序员，确保项目正常进行。找工作、招聘合格的程序员，就上程序员客栈驻场招聘平台！'
+        } ]
+      }
+    },
+    data() {
+      return {
+        topAreaData: {
+          icon: require('@/assets/img/credit/identifyIcon.png'),
+          title: '身份特征',
+          subTitle: '   我们会从您的实名认证信息、学历信息、驾驶证、职业证书等信息，来进行考察您的身份特征',
+          bgImg: require('@/assets/img/credit/identifyBg.png'),
+          mapImg: require('@/assets/img/credit/identifyMap.png'),
+        },
+        list: [
+          {
+          icon: require('@/assets/img/credit/identifyIcon1.png'),
+          title: '实名认证',
+          subTitle: '通过实名认证，提高技术信用',
+          jumpUrl: '',
+          rightName: '暂未开发'
+        }, {
+          icon: require('@/assets/img/credit/identifyIcon2.png'),
+          title: '最高学历认证',
+          subTitle: '通过最高学历认证，提高技术信用',
+          jumpUrl: '',
+          rightName: '暂未开发'
+        }, {
+          icon: require('@/assets/img/credit/identifyIcon3.png'),
+          title: '驾驶证',
+          subTitle: '绑定驾驶证，提高技术信用',
+          jumpUrl: '',
+          rightName: '暂未开发'
+        }],
+      }
+    },
+    mounted() {
+
+    },
+    methods: {}
+  }
+</script>
+
+<style scope lang="scss">
+  @import "../../../assets/css/credit/pages/identify.scss";
+</style>

pages/credit/pages/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="creditIndex">
+    <credit-common-title/>
+    <section class="contentArea">
+      <div class="list">
+        <div class="cell" v-for="(item, index) in list" v-key="'creditIndexList' + index">
+          <div class="cellBody">
+            <div class="left">
+              <img :src="item.icon" alt="">
+            </div>
+            <div class="center">
+              <p class="title">{{item.title}}</p>
+              <p class="subTitle">{{item.subTitle}}</p>
+            </div>
+            <div class="right"></div>
+          </div>
+          <div class="lines"></div>
+          <div class="cellBottom">
+            <p class="bottomBox"
+              v-for="(item1, index1) in item.children"
+              v-key="'children' + index + index1">
+              {{item1.name}}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+  import CreditCommonTitle from '@/components/credit/header.vue'
+
+  /**
+   * 首页
+   */
+  export default {
+    layout: "opacity_header",
+    components: { CreditCommonTitle },
+    head() {
+      return {
+        title: '驻场工作招聘，2019年最新驻场工作招聘信息-程序员客栈',
+        meta: [ {
+          'name': 'keywords',
+          'content': '驻场招聘,驻场工作招聘,2019年最新驻场招聘信息'
+        }, {
+          'name': 'descrption',
+          'content': '程序员客栈提供全国各地城市IT驻场工作最新招聘信息，核实企业资质，让有工作需求的程序员能得到一份满意的驻场工作；对程序员从业者能力进行严格把关，保障企业能在驻场招聘平台找到靠谱的程序员，确保项目正常进行。找工作、招聘合格的程序员，就上程序员客栈驻场招聘平台！'
+        } ]
+      }
+    },
+    data() {
+      return {
+        list: [ {
+          icon: require('@/assets/img/credit/indexIcon0.png'),
+          title: '身份特征',
+          subTitle: '我们会从您的实名认证信息、学历信息、驾驶证、职业证书等信息，来考察您的身份特征',
+          jumpUrl: '', //跳转至身份特征页
+          children: [ { name: '实名认证'}, { name: '最高学历认证' }, { name: '驾驶证' }]
+        },{
+          icon: require('@/assets/img/credit/indexIcon0.png'),
+          title: '项目经历',
+          subTitle: '我们会从您在程序员客栈，远程工作实际项目评价，来动态考察您的项目经历',
+          jumpUrl: '', //跳转至技能水平页
+          children: [ { name: '整包项目'}, { name: '云端工作' }, { name: '雇佣项目' }]
+        }, {
+          icon: require('@/assets/img/credit/indexIcon0.png'),
+          title: '专业经历',
+          subTitle: '我们会从您在程序员客栈，远程工作专业经历认证信息，来动态考察您的专业经历',
+          jumpUrl: '', //跳转至项目经验页
+          children: [ { name: '工作经历'}, { name: '产品经理认证' }, { name: '项目经理认证' }, { name: '自由工作着' }]
+        },  {
+          icon: require('@/assets/img/credit/indexIcon0.png'),
+          title: '社会信用',
+          subTitle: '我们会从工商信息、失信记录、金融风险、芝麻信用等第三方信用机构，来考察您的社会信用',
+          jumpUrl: '', //跳转至社会信用页
+          children: [ { name: '工商信息' }, { name: '失信记录' }, { name: '金融风险' }, { name: '芝麻信用' }, ]
+        } ]
+      }
+    },
+    mounted() {
+
+    },
+    methods: {}
+  }
+</script>
+
+<style scope lang="scss">
+  @import "../../../assets/css/credit/pages/index.scss";
+</style>