Selaa lähdekoodia

添加移动端 header不跳转模板

2.调整小标题 描述样式
martin.ma 4 vuotta sitten
vanhempi
commit
ba9ef79478

+ 85 - 0
components/wx_header_no_jump.vue

@@ -0,0 +1,85 @@
+<template>
+  <section class="wx-header" :class="appendClass">
+    <img class="logo" src="https://stacdn.proginn.com/image/common/logo3@2x.png" alt="icon" >
+
+     <el-button class="text" type="text" style="font-size: 18px;">
+        <i class="el-icon-tickets" style="width: 40px;"></i>
+      </el-button>
+
+    <!-- <el-dropdown class="nav-dropdown">
+
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>
+          <a class="workstation text" href="https://www.proginn.com/cat/">
+            <i class="el-icon-service"></i><span>程序员</span>
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <a class="workstation text" href="https://jishuin.proginn.com/">
+            <i class="el-icon-message"></i><span>技术圈</span>
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <a class="workstation text" href="https://support.proginn.com/">
+            <i class="el-icon-question"></i><span>帮助</span>
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <a class="workstation text" href="https://inn.proginn.com/sites/index.html">
+            <i class="el-icon-phone"></i><span>合作伙伴</span>
+          </a>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown> -->
+  </section>
+</template>
+
+<script>
+export default {
+  methods: {
+    jumpTo() {
+      location.href = this.$store.state.domainConfig.siteUrl
+    }
+  },
+  computed: {
+    appendClass () {
+      let appendClass = ''
+      const routeName = this.$route.name
+
+      if (routeName.indexOf('SeoLearnList') > -1 ||
+          routeName.indexOf('SeoConsultList') > -1 ||
+          routeName.indexOf('SeoSkillList') > -1) {
+        appendClass = 'wx-header-custom-list'
+      } else if (routeName.indexOf('SeoLearnDetail') > -1 ||
+          routeName.indexOf('SeoConsultUser') > -1 ||
+          routeName.indexOf('SeoSkillDetail') > -1) {
+        appendClass = 'wx-header-custom-detail'
+      }
+
+      return appendClass
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wx-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 64px;
+  padding: 0 20px;
+  background: white;
+}
+.logo {
+  width: auto;
+  height: 32px;
+}
+.text, .text i {
+  color: #333;
+}
+.text span {
+  padding-left: 10px;
+}
+</style>

+ 101 - 0
layouts/default_mobile_header_no_jump.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="container" id="markIsAppWebview" :data-app="deviceType.app">
+    <proginn-header v-if="deviceType.pc"/>
+     <wx-header-no-jump v-else-if="!deviceType.app && (deviceType.android || deviceType.ios) && !isWeixinApp"></wx-header-no-jump>
+    <nuxt class="main"/>
+    <proginn-footer v-if="deviceType.pc && !noneCommonFooter"/>
+  </div>
+</template>
+
+<script>
+  import ProginnHeader from "@/components/header";
+  import ProginnFooter from "@/components/footer";
+  import WxHeaderNoJump from "@/components/wx_header_no_jump";
+  import {mapState, mapMutations} from "vuex";
+  import Stats from "@/mixins/stats";
+
+  export default {
+    components: {
+      ProginnHeader,
+      ProginnFooter,
+      WxHeaderNoJump
+    },
+    data() {
+      return {
+        isWeixinApp: true
+      }
+    },
+    mixins: [Stats],
+    computed: {
+      ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"])
+    },
+    mounted() {
+      console.log("route.path", this.$route);
+      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
+      this.checkTerminal();
+      window.addEventListener("resize", this.checkInnerWidth);
+      // 修改密码处理
+      if (
+        this.$route.path.includes("/setting/check/change_mobile") ||
+        this.$route.path.includes("/setting/check/real_info")
+      ) {
+        // 如果上页不是验证码页面,则认为是复制地址过来,强制踢出
+        if (
+          localStorage.getItem("proginn-history") !== "/setting/check/old_mobile"
+        ) {
+          this.$message("请验证旧手机号。");
+          setTimeout(() => {
+            this.$router.replace("/setting/check/old_mobile");
+          }, 1500);
+        }
+      } else {
+        localStorage.removeItem("proginn-history");
+      }
+    },
+    methods: {
+      ...mapMutations(["updateIsPC", "updateIsWeixin"]),
+      checkTerminal() {
+        this.updateIsPC({
+          isPC: window.innerWidth > 960
+        });
+        this.updateIsWeixin({
+          isWeixin: window.navigator.userAgent
+            .toLowerCase()
+            .match(/MicroMessenger/i)
+        });
+      }
+    }
+  };
+</script>
+
+
+<style>
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .main {
+    min-width: 1000px;
+    min-height: calc(100vh - 376px);
+    margin: 20px 0 30px !important;
+  }
+
+  .__nuxt-error-page .title {
+    font-size: 100%;
+  }
+
+  @media screen and (max-width: 960px) {
+    .main {
+      min-width: auto;
+    }
+  }
+</style>

+ 43 - 8
pages/frontend/skill_cert/invite_comment.vue

@@ -17,12 +17,18 @@
           <el-main>
             <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"
@@ -33,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"
@@ -52,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"
@@ -69,7 +86,10 @@
               </el-form-item>
 
               <el-form-item>
-                <div class="title">最终定级(评级标准链接:https://proginn.feishu.cn/docs/doccnFJSsH0KZ9cTfQNpSRrZ4Of)</div>
+                <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/>
@@ -93,6 +113,7 @@
 <script>
   import { mapState } from "vuex";
   export default {
+    layout: "default_mobile_header_no_jump",
     head: {
       title: '技术认证面试回访',
     },
@@ -205,6 +226,20 @@
         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 {