4.11 更新

assets/css/credit/index.scss

@@ -125,7 +125,6 @@
         display: flex;
         flex-direction: column;
 
-
         .cell {
           width: 100%;
           height: 300px;
@@ -205,6 +204,7 @@
       align-items: center;
 
       p {
+        text-align: center;
         position: absolute;
         font-size:36px;
         font-weight:300;
@@ -214,9 +214,95 @@
       }
     }
   }
-}
 
 
-@media screen and (min-width: 960px) {
+  &.isMobile {
+    margin: 0 !important;
+    .contentArea {
+      width: 100vw;
+      margin: 57px auto 57px auto;
+      padding: 0 10px;
+
+      display: flex;
+      align-content: center;
+      flex-direction: column;
+
+      .screenTop {
+        margin: 0 auto;
+        width: 324px;
+      }
+
+      .screenList {
+        flex-direction: column;
+        .cell {
+          margin-top: 10px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+      }
+
+      .trustList {
+        justify-content: flex-start;
+        flex-direction: column;
+
+        .cell {
+          margin-top: 24px;
+          display: block;
+          width: 355px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .cellImg {
+            img {
+              width: 355px;
+              height: 222px;
+            }
+          }
 
+          .cellRight {
+            margin-top: 15px;
+            margin-left: 0;
+            width: 355px;
+            height: auto;
+            text-align: left;
+            display: block;
+            .cellTitle {
+              font-size:24px;
+              font-weight:600;
+              color:rgba(34,34,34,1);
+              line-height:33px;
+            }
+            .cellSubTitle {
+              margin-top: 6px;
+              font-size:12px;
+              font-weight:400;
+              color:rgba(51,51,51,1);
+              line-height:17px;
+            }
+          }
+        }
+      }
+    }
+    .bottomArea {
+      margin-top: 35px;
+      .wordBox {
+        p {
+          width: 355px;
+          position: absolute;
+          font-size:21px;
+          font-weight:300;
+          color:rgba(255,255,255,1);
+          line-height: 32px;
+          letter-spacing:0;
+        }
+      }
+    }
+  }
 }
+
+
+

assets/css/scssCommon.scss

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

components/credit/data.js

@@ -18,7 +18,7 @@ export default {
       }, {
         icon: require('@/assets/img/credit/identifyIcon2.png'),
         title: '最高学历认证',
-        subTitle: '通过最高学历认证，提高技术信用',
+        subTitle: '通过中国大陆教育部数据库查询学校名称、专业、学位类型、学位授予时间',
         jumpUrl: '',
         rightName: '暂未开放'
       }, {
@@ -34,7 +34,7 @@ export default {
     topAreaData: {
       icon: require('@/assets/img/credit/projectIcon.png'),
       title: '项目经验',
-      subTitle: '我们会从您在程序员客栈上绑定的个人代表性作品，以及在客栈远程工作过程中实际参与开发的项目进行考察',
+      subTitle: '我们会从您在程序员客栈上绑定的个人代表性作品，以及在客栈远程工作过程中实际参与开发的项目评价，来考察您的项目经验',
       bgImg: require('@/assets/img/credit/projectBg.png'),
       mapImg: require('@/assets/img/credit/projectMap.png'),
     },
@@ -42,19 +42,19 @@ export default {
       {
         icon: require('@/assets/img/credit/projectIcon1.png'),
         title: '整包项目',
-        subTitle: '做过的整包项目',
+        subTitle: '完成更多整包项目，提高个人远程工作项目经验',
         jumpUrl: './projectDetail/whole',
         rightName: '查看详情'
       }, {
         icon: require('@/assets/img/credit/projectIcon2.png'),
         title: '云端项目',
-        subTitle: '做过的云端项目',
+        subTitle: '完成更多云端项目，提高个人远程工作项目经验',
         jumpUrl: './projectDetail/cloud',
         rightName: '查看详情'
       }, {
         icon: require('@/assets/img/credit/projectIcon3.png'),
         title: '雇佣项目',
-        subTitle: '做过的雇佣项目',
+        subTitle: '完成更多雇佣项目，提高个人远程工作项目经验',
         jumpUrl: './projectDetail/employ',
         rightName: '查看详情'
       }],
@@ -64,7 +64,7 @@ export default {
     topAreaData: {
       icon: require('@/assets/img/credit/professionalIcon.png'),
       title: '专业经历',
-      subTitle: '我们会从您在程序员客栈远程工作过程中，按时完成项目的次数、客户全五星好评的次数、里程碑准时提交的次数进行考察。第三方芝麻信用分数',
+      subTitle: '我们会从您在程序员客栈远程工作过程中，专业经历资质认证情况，和其它专业工作经历信息，来考察您的专业经历',
       bgImg: require('@/assets/img/credit/professionalBg.png'),
       mapImg: require('@/assets/img/credit/professionalMap.png'),
     },
@@ -126,25 +126,25 @@ export default {
       {
         icon: require('@/assets/img/credit/creditIcon1.png'),
         title: '工商信息',
-        subTitle: '做过的整包项目',
+        subTitle: '通过中国大陆工商行政管理部门登记的官方注册信息查询',
         jumpUrl: '',
         rightName: '暂未开放'
       }, {
         icon: require('@/assets/img/credit/creditIcon2.png'),
         title: '失信信息',
-        subTitle: '做过的云端项目',
+        subTitle: '通过中国大陆法院公开诉讼记录数据库查询',
         jumpUrl: '',
         rightName: '暂未开放'
       }, {
         icon: require('@/assets/img/credit/creditIcon3.png'),
         title: '金融风险',
-        subTitle: '做过的雇佣项目',
+        subTitle: '通过中国大陆各大互联网金融平台查询',
         jumpUrl: '',
         rightName: '暂未开放'
       }, {
         icon: require('@/assets/img/credit/creditIcon4.png'),
         title: '芝麻信用',
-        subTitle: '做过的雇佣项目',
+        subTitle: '绑定芝麻信用，提高社会信用',
         jumpUrl: '',
         rightName: '暂未开放'
       }],

components/credit/header.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="topArea">
-    <div class="topImage">
-      <img :src="data.bgImg" alt="">
+  <section class="topArea" :class="{isMobile: mobile}">
+    <div class="bgImage">
+      <img :src="!mobile ? data.bgImg : data.bgImgMobile" alt="">
     </div>
     <div class="topContent">
       <div class="left">
@@ -11,7 +11,7 @@
         </div>
         <p :class="'subWord ' + (!data.isNormal && ' sub')">{{data.subTitle}}</p>
       </div>
-      <div class="right">
+      <div class="right" v-if="!mobile">
         <img :src="data.mapImg" alt="">
       </div>
     </div>
@@ -29,16 +29,28 @@
             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
           }
         }
       }
+    },
+    data() {
+      return {
+        mobile: false
+      }
+    },
+    mounted() {
+      console.log('this.$deviceType.isMobile()', this.$deviceType.isMobile())
+      this.mobile = this.$deviceType.isMobile()
     }
   };
 </script>
 
 <style scoped lang="scss">
+  @import '~@/assets/css/scssCommon.scss';
+
   .topArea {
     position: relative;
     width: 100%;
@@ -108,6 +120,68 @@
         }
       }
     }
+
+    &.isMobile {
+      .bgImage {
+        img {
+          width: 100vw;
+          vertical-align: middle;
+        }
+      }
+      .topContent {
+        position: absolute;
+        top: 10px;
+        width: 100%;
+        height: 175px;
+
+        .left {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          text-align: left;
+          width: 100%;
+
+          .titleBox {
+            display: flex;
+            height: 66px;
+            align-items: center;
+            justify-content: center;
+            .icon {
+              width: 50px;
+              height: 50px;
+              margin-right: 10px;
+            }
+            .title {
+              font-weight: 600;
+              color: rgba(255, 255, 255, 1);
+              font-size:36px;
+              line-height:51px;
+            }
+          }
+
+          .subWord {
+            margin-top: 6px;
+            font-size:16px;
+            line-height:22px;
+            text-align: center;
+
+            &.sub {
+              font-size:16px;
+              line-height:22px;
+            }
+          }
+        }
+
+        .right {
+          flex-shrink: 0;
+          margin-left: 50px;
+          img {
+            width: 21.22vw;
+            height: 19.61vw;
+          }
+        }
+      }
+    }
   }
 
 </style>

layouts/opacity_header.vue

@@ -30,7 +30,7 @@ export default {
     ...mapMutations(['updateIsPC', 'updateIsWeixin']),
     checkTerminal() {
       this.updateIsPC({
-        isPC: window.innerWidth > 960,
+        isPC: this.$deviceType.isPC()
       })
       this.updateIsWeixin({
         isWeixin: window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)

nuxt.config.js

@@ -60,13 +60,17 @@ module.exports = {
 		'plugins/element',
 		// 'plugins/http',
 		'plugins/nuxtAxios',
+    {
+      src:'plugins/deviceType',
+      ssr: false
+    },
 		{
 			src:'plugins/rem',
 			ssr: false
 		},
-		{ 
-			src: "plugins/vue-swiper.js", 
-			ssr: false 
+		{
+			src: "plugins/vue-swiper.js",
+			ssr: false
 		},
 		{
 			src: "plugins/g2.js",

plugins/deviceType.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import DeviceType from './utils/deviceType'
+
+Vue.use(DeviceType)

plugins/utils/deviceType.js

@@ -0,0 +1,42 @@
+export default class DeviceType {
+  static install(Vue) {
+    Vue.prototype.$deviceType = new this()
+  }
+  constructor() {
+    this.ios = false
+    this.android = false
+    this.pc = false
+    this.ios = false
+    this.ua = ''
+    if (window) {
+      this.ua = window && window.navigator && window.navigator.userAgent || ''
+    }
+    if (/(iPhone|iPad|iPod|iOS)/i.test(this.ua)) {
+      this.ios = true
+    } else if (/(Android)/i.test(this.ua)) {
+      this.android = true
+    } else {
+      this.pc = true
+    }
+  }
+  
+  isIos(){
+    return this.ios
+  }
+  
+  isAndroid() {
+    return this.android
+  }
+  
+  isMobile() {
+    return this.ios || this.android
+  }
+  
+  isPC() {
+    return this.pc
+  }
+  
+  isWx() {
+  
+  }
+}