技术认证H5

pages/frontend/skill_cert/dev_comment.vue

@@ -1,224 +1,260 @@
 <template>
-  <div class="lenrn_content" style="margin: 20px 0 30px !important">
+<div class="comment-main" :class="{
+    'comment-mobile':mobile
+  }">
     <el-container>
-      <el-container>
         <el-container>
-          <el-header>
-            <el-steps align-center :active="active" style="padding-top: 20px" finish-status="success">
-              <el-step title="申请认证"></el-step>
-              <el-step title="审核通过"></el-step>
-              <el-step title="对接面试"></el-step>
-              <el-step title="面试评价"></el-step>
-            </el-steps>
-            <el-divider></el-divider>
-          </el-header>
-          <el-main>
-            <el-form v-if="active==4" style="margin-top: 60px" ref="form"  label-width="30px">
-              <el-form-item>
-                <div class="title">面试专业度（面试水平，面试态度）</div>
-                <el-select v-model="info.invite_experience" placeholder="请选择分数">
-                  <el-option
-                    v-for="item in fenshu"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-
-              <el-form-item>
-                <div class="title">技术专业度（技术水平）</div>
-                <el-select v-model="info.invite_skill" placeholder="请选择分数">
-                  <el-option
-                    v-for="item in fenshu"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-
-              <el-form-item>
-                <div class="title">对面试官进行评价</div>
-                <el-input v-model="info.inter_memo" show-word-limit maxlength="200" ></el-input>
-              </el-form-item>
-
-              <el-form-item>
-                <el-button @click="submitData" type="primary">确认提交</el-button>
-              </el-form-item>
-            </el-form>
-          </el-main>
+            <el-container>
+                <el-header>
+                    <el-steps align-center :active="active" style="padding-top: 20px" finish-status="success">
+                        <el-step title="申请认证"></el-step>
+                        <el-step title="审核通过"></el-step>
+                        <el-step title="对接面试"></el-step>
+                        <el-step title="面试评价"></el-step>
+                    </el-steps>
+                    <el-divider></el-divider>
+                </el-header>
+                <el-main>
+                    <el-form v-if="active==4" style="margin-top: 60px" ref="form" label-width="0px">
+                        <el-form-item>
+                            <div class="title">面试专业度（面试水平，面试态度）</div>
+                            <el-select v-model="info.invite_experience" placeholder="请选择分数">
+                                <el-option v-for="item in fenshu" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <div class="title">技术专业度（技术水平）</div>
+                            <el-select v-model="info.invite_skill" placeholder="请选择分数">
+                                <el-option v-for="item in fenshu" :key="item.value" :label="item.label" :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <div class="title">对面试官进行评价</div>
+                            <el-input v-model="info.inter_memo" show-word-limit maxlength="200"></el-input>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="submitData" type="primary">确认提交</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-main>
+            </el-container>
         </el-container>
-      </el-container>
     </el-container>
-  </div>
+</div>
 </template>
 
 <script>
-  import { mapState } from "vuex";
-  export default {
+import {
+    mapState
+} from "vuex";
+export default {
     head: {
-      title: '技术认证面试回访',
+        title: '技术认证面试回访',
     },
-    data () {
-      return {
-        fenshu: [{
-          value: '1',
-          label: '1分'
-        }, {
-          value: '2',
-          label: '2分'
-        }, {
-          value: '3',
-          label: '3分'
-        }, {
-          value: '4',
-          label: '4分'
-        }, {
-          value: '5',
-          label: '5分'
-        }],
-        active:4,
-        id:0,
-        sign:"",
-        info:{},
-      }
-    },
-    mounted () {
-      var id = this.$route.query.id ? this.$route.query.id : 0;
-      var sign = this.$route.query.sign ? this.$route.query.sign : "";
-      this.id=id;
-      this.sign=sign;
-      if (id!=0 && sign!="") {
-        this.getDetail();
-      }
+    data() {
+        return {
+            fenshu: [{
+                value: '1',
+                label: '1分'
+            }, {
+                value: '2',
+                label: '2分'
+            }, {
+                value: '3',
+                label: '3分'
+            }, {
+                value: '4',
+                label: '4分'
+            }, {
+                value: '5',
+                label: '5分'
+            }],
+            active: 4,
+            id: 0,
+            sign: "",
+            info: {},
+        }
     },
-    methods: {
-      async getDetail() {
-        let res=await this.$axios.$post('/uapi/cert/invite_comment', {id:this.id,sign:this.sign});
-        if (res.status === 1) {
-          this.info=res.data.info;
+    asyncData({
+        app
+    }) {
+        return {
+            mobile: app.$deviceType.isMobile(),
         }
-      },
-      async submitData() {
-        var data=JSON.stringify(this.info);
-        let res=await this.$axios.$post('/uapi/cert/dev_comment_add', {id:this.id,sign:this.sign,data:data});
-        if (res.status === 1) {
-          this.$message.success('操作成功！')
+    },
+    mounted() {
+        var id = this.$route.query.id ? this.$route.query.id : 0;
+        var sign = this.$route.query.sign ? this.$route.query.sign : "";
+        this.id = id;
+        this.sign = sign;
+        if (id != 0 && sign != "") {
+            this.getDetail();
         }
-      },
+    },
+    methods: {
+        async getDetail() {
+            let res = await this.$axios.$post('/uapi/cert/invite_comment', {
+                id: this.id,
+                sign: this.sign
+            });
+            if (res.status === 1) {
+                this.info = res.data.info;
+            }
+        },
+        async submitData() {
+            var data = JSON.stringify(this.info);
+            let res = await this.$axios.$post('/uapi/cert/dev_comment_add', {
+                id: this.id,
+                sign: this.sign,
+                data: data
+            });
+            if (res.status === 1) {
+                this.$message.success('操作成功！')
+            }
+        },
     }
-  }
+}
 </script>
 
-<style scope lang="scss">
-  @import "@/assets/css/consult/create.scss";
-  .el-select .el-input{
-    width: 925px !important;
+<style lang="scss">
+@import "@/assets/css/consult/create.scss";
+.comment-main{
+    background-color: white;
+    margin:20px auto 30px;
+    overflow: hidden;
   }
-  .common-upload {
+.comment-main{
+    .el-select {
+      width: 100%;
+      // max-width: 925px;
+       .el-input{
+        width: 100%;
+      }
+    }
+  }
+  .comment-mobile{
+    width:100%;
+    overflow: hidden;
+    .title{
+      word-break: break-all;
+      line-height: 1.5;
+      margin-bottom: 20px;
+    }
+    .el-radio__label{
+      word-break: break-all;
+    }
+    .label-tips{
+      max-width: 100%;
+      width: 100%;
+      display: block;
+      word-break: break-all;
+    }
+
+
+    .el-radio{
+      display: block;
+      overflow: hidden;
+      .el-radio__input{
+        float: left;
+      }
+      .el-radio__label{
+        margin-left: 16px;
+        display: block;
+        white-space: normal;
+        line-height: 1.5;
+        position: relative;
+        top: -3px;
+      }
+    }
+
+  }
+
+.common-upload {
     display: flex;
     align-items: end;
+
     .look-img {
-      margin-left: 14px;
-      .text {
-        font-size: 14px;
-        font-family: PingFangSC, PingFangSC-Medium;
-        font-weight: 500;
-        color: #308eff;
-        cursor: pointer;
-      }
-      .text-hover:hover {
-        position: relative;
+        margin-left: 14px;
+
+        .text {
+            font-size: 14px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            color: #308eff;
+            cursor: pointer;
+        }
+
+        .text-hover:hover {
+            position: relative;
+
+            .img {
+                display: block;
+            }
+        }
+
         .img {
-          display: block;
+            background: #fff;
+            border: 1px solid #e0e5ed;
+            box-shadow: 0px 2px 20px 0px rgba(22, 40, 63, 0.15);
+            border-radius: 10px;
+            text-align: center;
+            position: relative;
+            position: absolute;
+            top: -120px;
+            left: 0;
+            width: 300px;
+            height: 120px;
+            display: none;
+            transition: all ease .3s;
+
+            .active-img2 {
+                width: 234px;
+                height: 71px;
+                background-size: cover;
+                overflow: hidden;
+                margin-top: 24px;
+            }
+
+            .active-img1 {
+                width: 262px;
+                height: 78px;
+                background-size: cover;
+                overflow: hidden;
+                margin-top: 22px;
+            }
         }
-      }
-      .img {
-        background: #fff;
-        border: 1px solid #e0e5ed;
-        box-shadow: 0px 2px 20px 0px rgba(22,40,63,0.15);
-        border-radius: 10px;
-        text-align: center;
-        position: relative;
-        position: absolute;
-        top: -120px;
-        left: 0;
-        width: 300px;
-        height: 120px;
-        display: none;
-        transition: all ease .3s;
-        .active-img2 {
-          width: 234px;
-          height: 71px;
-          background-size: cover;
-          overflow: hidden;
-          margin-top: 24px;
+
+        .img:after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-right: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-top: 10px solid #e0e5ed;
+            border-left: 10px solid transparent;
+            position: absolute;
+            left: 24px;
+            bottom: -20px;
         }
-        .active-img1 {
-          width: 262px;
-          height: 78px;
-          background-size: cover;
-          overflow: hidden;
-          margin-top: 22px;
+
+        .img:before {
+            content: '';
+            width: 0;
+            height: 0;
+            border-right: 9px solid transparent;
+            border-bottom: 9px solid transparent;
+            border-top: 9px solid #fff;
+            border-left: 9px solid transparent;
+            position: absolute;
+            left: 25px;
+            bottom: -18px;
+            z-index: 1;
         }
-      }
-      .img:after {
-        content: '';
-        width: 0;
-        height: 0;
-        border-right: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-top: 10px solid #e0e5ed;
-        border-left: 10px solid transparent;
-        position: absolute;
-        left: 24px;
-        bottom: -20px;
-      }
-      .img:before {
-        content: '';
-        width: 0;
-        height: 0;
-        border-right: 9px solid transparent;
-        border-bottom: 9px solid transparent;
-        border-top: 9px solid #fff;
-        border-left: 9px solid transparent;
-        position: absolute;
-        left: 25px;
-        bottom: -18px;
-        z-index: 1;
-      }
     }
-  }
-</style>
-<style>
-  .el-select .el-input {
-    width: 130px;
-  }
-  .avatar-uploader img{max-width: 200px}
-  .input-with-select .el-input-group__prepend {
-    background-color: #fff;
-  }
-  .lenrn_content{width: 1000px;margin: 0px auto;background: white}
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  input[type="number"]{
-    -moz-appearance: textfield !important;
-  }
-  .el-form-item__content .content-field span{line-height: normal}
-  .cropper-content{
-    width: 100%;
-    height: 300px;
-  }
-  .cropper {
-    width: 100%;
-    height: 240px;
-  }
-  .btnGroup{
-    float: right;
-    margin-top: 10px;
-    margin-right: 15px;
-  }
+}
 </style>

pages/frontend/skill_cert/invite_comment.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="lenrn_content" style="margin: 20px 0 30px !important">
+  <div class="comment-main" :class="{
+    'comment-mobile':mobile
+  }" >
     <el-container>
       <el-container>
         <el-container>
@@ -13,14 +15,20 @@
             <el-divider></el-divider>
           </el-header>
           <el-main>
-            <el-form v-if="active==4" style="margin-top: 60px" ref="form"  label-width="30px">
+            <el-form v-if="active==4" style="margin-top: 60px" ref="form"  label-width="0px">
               <el-form-item>
-                <div class="title">对开发者【技术栈】进行评价（可从技术基础，技术深度和广度谈谈反馈和结论）</div>
+                <div class="title">
+                  <p>对开发者【技术栈】进行评价</p>
+                  <p>可从技术基础，技术深度和广度谈谈反馈和结论</p>
+                </div>
                 <el-input v-model="info.dev_kf" show-word-limit maxlength="200" ></el-input>
               </el-form-item>
 
               <el-form-item>
-                <div class="title">【技术栈】掌握水平打分（1最低，5最高）</div>
+                <div class="title">
+                  <p>【技术栈】掌握水平打分</p>
+                  <p>1最低，5最高</p>
+                </div>
                 <el-select v-model="info.dev_study" placeholder="请选择分数">
                   <el-option
                     v-for="item in fenshu"
@@ -31,14 +39,19 @@
                 </el-select>
               </el-form-item>
 
-
               <el-form-item>
-                <div class="title">对开发者【经验/项目经历】进行评价（可从开发年限，项目经验和管理/主导经验谈谈反馈和结论）</div>
+                <div class="title">
+                    <p>对开发者【经验/项目经历】进行评价</p>
+                    <p>可从开发年限，项目经验和管理/主导经验谈谈反馈和结论</p>
+                </div>
                 <el-input v-model="info.dev_skill" show-word-limit maxlength="200" ></el-input>
               </el-form-item>
 
               <el-form-item>
-                <div class="title">【经验/项目】工程能力打分（1最低，5最高）</div>
+                <div class="title">
+                  <p>【经验/项目】工程能力打分</p>
+                  <p>1最低，5最高</p>
+                </div>
                 <el-select v-model="info.dev_skill_base" placeholder="请选择分数">
                   <el-option
                     v-for="item in fenshu"
@@ -50,12 +63,18 @@
               </el-form-item>
 
               <el-form-item>
-                <div class="title">对开发者【整体映像】进行评价（可从学习能力，交流难度，整体表现进行评价）</div>
+                <div class="title">
+                  <p>对开发者【整体映像】进行评价</p>
+                  <p>可从学习能力，交流难度，整体表现进行评价</p>
+                </div>
                 <el-input v-model="info.dev_memo" show-word-limit maxlength="200" ></el-input>
               </el-form-item>
 
               <el-form-item>
-                <div class="title">【整体映像】非技术能力打分（1最低，5最高）</div>
+                <div class="title">
+                  <p>【整体映像】非技术能力打分</p>
+                  <p>1最低，5最高</p>
+                 </div>
                 <el-select v-model="info.dev_experience" placeholder="请选择分数">
                   <el-option
                     v-for="item in fenshu"
@@ -67,14 +86,17 @@
               </el-form-item>
 
               <el-form-item>
-                <div class="title">最终定级（评级标准链接：https://proginn.feishu.cn/docs/doccnFJSsH0KZ9cTfQNpSRrZ4Of）</div>
-                <el-radio v-model="info.level" label="1">技术1级：特定场景(包括低代码工具，二次开发)或某一小模块下，能独立开发</el-radio><br>
-                <el-radio v-model="info.level" label="2">技术2级：垂直领域上，熟练开发常见应用</el-radio><br>
-                <el-radio v-model="info.level" label="3">技术3级：垂直领域上，解决较复杂问题，独当一面</el-radio><br>
-                <el-radio v-model="info.level" label="4">技术4级：垂直领域上，能解决绝大部分问题；有大项目经验及一定的技术广度；</el-radio><br>
-                <el-radio v-model="info.level" label="5">技术5级：垂直领域的专家，主导过大型项目，能从产品架构上去考虑问题</el-radio><br>
-                <el-radio v-model="info.level" label="6">技术6级：更深的架构能力，更高的前瞻性，行业内丰富的经验或垂直领域的更高级专家</el-radio><br>
-                <el-radio v-model="info.level" label="0">技术0级【慎选】：完全不能独立开发</el-radio>
+                <div class="title">
+                  <p>最终定级</p>
+                  <p>评级标准链接：https://proginn.feishu.cn/docs/doccnFJSsH0KZ9cTfQNpSRrZ4Of</p>
+                </div>
+                <el-radio v-model="info.level" label="1">技术1级：特定场景(包括低代码工具，二次开发)或某一小模块下，能独立开发</el-radio><br/>
+                <el-radio v-model="info.level" label="2">技术2级：垂直领域上，熟练开发常见应用</el-radio><br/>
+                <el-radio v-model="info.level" label="3">技术3级：垂直领域上，解决较复杂问题，独当一面</el-radio><br/>
+                <el-radio v-model="info.level" label="4">技术4级：垂直领域上，能解决绝大部分问题；有大项目经验及一定的技术广度；</el-radio><br/>
+                <el-radio v-model="info.level" label="5">技术5级：垂直领域的专家，主导过大型项目，能从产品架构上去考虑问题</el-radio><br/>
+                <el-radio v-model="info.level" label="6">技术6级：更深的架构能力，更高的前瞻性，行业内丰富的经验或垂直领域的更高级专家</el-radio><br/>
+                <el-radio v-model="info.level" label="0">技术0级【慎选】：完全不能独立开发</el-radio><br/>
               </el-form-item>
 
               <el-form-item>
@@ -91,6 +113,7 @@
 <script>
   import { mapState } from "vuex";
   export default {
+    layout: "default_mobile_header_no_jump",
     head: {
       title: '技术认证面试回访',
     },
@@ -127,6 +150,11 @@
         this.getDetail();
       }
     },
+    asyncData({app}) {
+    return {
+      mobile: app.$deviceType.isMobile(),
+    }
+  },
     methods: {
       async getDetail() {
         let res=await this.$axios.$post('/uapi/cert/invite_comment', {id:this.id,sign:this.sign});
@@ -147,9 +175,73 @@
 
 <style scope lang="scss">
   @import "@/assets/css/consult/create.scss";
-  .el-select .el-input{
-    width: 925px !important;
+
+  .comment-main{
+    background-color: white;
+    margin:20px auto 30px;
+    overflow: hidden;
   }
+
+  .comment-mobile{
+    width:100%;
+    overflow: hidden;
+    .title{
+      word-break: break-all;
+      line-height: 1.5;
+      margin-bottom: 20px;
+    }
+    .el-radio__label{
+      word-break: break-all;
+    }
+    .label-tips{
+      max-width: 100%;
+      width: 100%;
+      display: block;
+      word-break: break-all;
+    }
+
+
+    .el-radio{
+      display: block;
+      overflow: hidden;
+      .el-radio__input{
+        float: left;
+      }
+      .el-radio__label{
+        margin-left: 16px;
+        display: block;
+        white-space: normal;
+        line-height: 1.5;
+        position: relative;
+        top: -3px;
+      }
+    }
+
+  }
+  .comment-main{
+    .el-select {
+      width: 100%;
+      // max-width: 925px;
+       .el-input{
+        width: 100%;
+      }
+    }
+
+    .title{
+        p{
+          // line-height:1.5;
+        }
+        p:nth-of-type(1){
+          font-size: 14px;
+          color:#000;
+        }
+        p:nth-of-type(2){
+          font-size: 13px;
+          color:#666;
+        }
+      }
+  }
+
   .common-upload {
     display: flex;
     align-items: end;
@@ -225,34 +317,4 @@
     }
   }
 </style>
-<style>
-  .el-select .el-input {
-    width: 130px;
-  }
-  .avatar-uploader img{max-width: 200px}
-  .input-with-select .el-input-group__prepend {
-    background-color: #fff;
-  }
-  .lenrn_content{width: 1000px;margin: 0px auto;background: white}
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  input[type="number"]{
-    -moz-appearance: textfield !important;
-  }
-  .el-form-item__content .content-field span{line-height: normal}
-  .cropper-content{
-    width: 100%;
-    height: 300px;
-  }
-  .cropper {
-    width: 100%;
-    height: 240px;
-  }
-  .btnGroup{
-    float: right;
-    margin-top: 10px;
-    margin-right: 15px;
-  }
-</style>
+