普通用户人才服务页面

src/page/homepage/index.vue

@@ -1,57 +1,30 @@
 <template>
     <div style="padding-top: 78px">
         <pheader :menulist="menulist"></pheader>
-            <router-view>
+        <router-view> </router-view>
-            </router-view>
         <pfooter></pfooter>
     </div>
 </template>
 <script>
- import commonheader from "@/page/common/pagecomponent/commonheader";
+import commonheader from '@/page/common/pagecomponent/commonheader'
-  import commonfooter from "@/page/common/pagecomponent/commonfooter";
+import commonfooter from '@/page/common/pagecomponent/commonfooter'
 export default {
     data() {
         return {
             menulist: [
-                    // 首页       工具市场       众包市场       培训学院       测试行业动态       关于我们  
                 { title: '首页', link: '/', highlight: false, isline: true },
                 { title: '工具服务', link: '/market', highlight: false, isline: false },
-                    // {title:'开源专区', link: '/openSource',highlight:false},
-                    // {title:'开源专区', link: '',highlight:false,
-                    //     submenu: [
-                    //         {title:'源代码扫描工具', link: '/openSourceArea/codeScanningTool', highlight:false, show: true},
-                    //         {title:'单元测试工具', link: '/openSourceArea/unitTesteTool', highlight:false, show: true},
-                    //         {title:'功能测试工具', link: '/openSourceArea/functionTesteTool', highlight:false, show: true},
-                    //         {title:'压力测试工具', link: '/openSourceArea/pressureTesteTool', highlight:false, show: true},
-                    //         {title:'接口测试工具', link: '/openSourceArea/interfaceTestTool', highlight:false, show: true},
-                    //         {title:'安全性测试工具', link: '/openSourceArea/safetyTesteTool', highlight:false, show: true},
-                    //     ]
-                    // },
-                    // {title:'解决方案', link: '',highlight:false,
-                    //     submenu: [
-                    //         {title:'CNAS咨询服务解决方案', link: '/solution/CNAS', highlight:false, show: true},
-                    //         {title:'GJB5000B咨询服务解决方案', link: '/solution/GJB5000B', highlight:false, show: true},
-                    //     ]
-                    // },
                 { title: '众包服务', link: '/crowdsourcing', highlight: false, isline: true },
                 { title: '人才服务', link: '/ability', highlight: false, isline: true },
                 { title: '培训服务', link: '/college', highlight: false, isline: true },
-                    // {title:'培训学院', link: '/college', stepHref: true, href: 'http://train.keyitest.cn/', highlight:false},
-                    // {title:'行业动态', link: '/news',highlight:false }, 
                 { title: '关于我们', link: '/about', highlight: false, isline: true },
-                ]
+            ],
         }
     },
-        components:{'pheader': commonheader, 'pfooter': commonfooter},
+    components: { pheader: commonheader, pfooter: commonfooter },
-        mounted(){
+    mounted() {},
-
+    methods: {},
-        },
-        methods:{
-
-        },
-
 }
 </script>
 <style scoped>
-
 </style>

src/page/homepage/personability/ability.vue

@@ -1,10 +1,15 @@
 <template>
     <div class="rencaifuwu">
         <!-- 在线咨询 -->
-        <div class="ijaiorenwu" @click="openDialog1('测试工程师')">
+        <!-- <div class="ijaiorenwu" @click="openDialog1('测试工程师')">
             <img class="ijaoricon" src="/assets/home/fbrwicon.png" alt="" />
             提交用人需求
+        </div> -->
+        <div class="zxzx1" @click="lookMore">
+            浏览云员工
+            <img class="cloudMore" src="/assets/ability/cloudMore.png" alt="">
         </div>
+
         <div class="zxzx" @click="zixunClick">在线咨询</div>
         <!-- 弹层 -->
         <div class="maskdialog" v-if="isshowDialog">
@@ -501,7 +506,6 @@ export default {
     },
     mounted() {
         this.quotation.phone = this.userinform.phonenumber
-
     },
     beforeDestroy() {
         // console.log('销毁了')
@@ -636,6 +640,31 @@ export default {
     z-index: 9999999999999999999999999;
 }
 
+.zxzx1 {
+    z-index: 2147483639;
+    width: 180px;
+    height: 68px;
+    position: fixed;
+    right: 16px;
+    top: 500px;
+    font-weight: 500;
+    font-size: 17px;
+    color: #ffffff;
+    cursor: pointer;
+    background: linear-gradient(0deg, #5ea6fd, #1a81f9);
+    box-shadow: 0px 1px 20px 1px rgba(13, 92, 187, 0.4);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.cloudMore {
+    width: 39px;
+    height: 33px;
+    margin-left: 10px;
+}
+
+
 .zxzx {
     z-index: 2147483639;
     width: 180px;

src/page/homepage/personability/abilityUser.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="rencaifuwu">
+        <img style="width: 100%; height: 450px; object-fit: cover" src="/assets/ability/userBanner.png" alt="" />
+        <div class="content container">
+            <div class="titlePeo" style="margin-top: 60px; margin-bottom: 50px">
+                <div class="titletopt">
+                    <img src="/assets/homepage/rihhj.png" alt="" />
+                    <p>优选企业岗位</p>
+                    <img src="/assets/homepage/lesftt.png" alt="" />
+                </div>
+            </div>
+            <div class="itemBox">
+                <div class="itemb" v-for="it in 3" :key="it" @click="dodetail">
+                    <div class="itembT">
+                        <div class="itembTT">
+                            <div class="itembTTL">嵌入式软件测试工程师(偶尔出差)</div>
+                            <div class="itembTTR">6-10K</div>
+                        </div>
+                        <div class="itembTB">
+                            <div class="itembTBit">北京</div>
+                            <div class="itembTBit">1-3年经验</div>
+                            <div class="itembTBit">本科</div>
+                            <div class="itembTBit">嵌入式</div>
+                        </div>
+                    </div>
+                    <div class="itembB">
+                        <div class="itembBL">北京关键科技股份有限公司</div>
+                        <div class="itembBR">计算机软件</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="pavan container">
+            <el-pagination
+                background
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.pageNum"
+                :page-sizes="[10, 20, 30, 50]"
+                :page-size="queryParams.pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+            >
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    data() {
+        return {
+            total: 0,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+        }
+    },
+    mounted() {},
+    beforeDestroy() {},
+    computed: {
+        ...mapGetters(['userinform', 'token']),
+    },
+    methods: {
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`)
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`)
+        },
+        dodetail() {
+            this.$router.push('/ability/detail')
+        },
+    },
+}
+</script>
+
+<style scoped>
+.container {
+    width: 1200px;
+    margin: auto;
+}
+
+.titlePeo p {
+    font-weight: bold !important;
+    font-size: 32px !important;
+    color: #1a1a1a;
+    margin: 0 15px;
+}
+.titletopt {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.pavan {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 60px;
+    margin-top: 35px;
+}
+.itemBox {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.itemb {
+    width: 585px;
+    height: 185px;
+    background: rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 4px 27px 3px rgba(16, 60, 117, 0.1);
+    border-radius: 6px;
+    margin-bottom: 30px;
+    cursor: pointer;
+    transition: all 0.2s linear;
+}
+.itemb:hover {
+    transform: scale(1.02);
+}
+.itembB {
+    width: 585px;
+    height: 60px;
+    background: linear-gradient(270deg, rgba(253, 238, 1235, 0.65), rgba(234, 241, 252, 0.65));
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 15px;
+    color: #666666;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 28px;
+    box-sizing: border-box;
+}
+.itembT {
+    width: 100%;
+    height: calc(100% - 60px);
+    padding: 30px 28px 0 28px;
+    box-sizing: border-box;
+}
+.itembTT {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 25px;
+}
+.itembTTL {
+    font-weight: bold;
+    font-size: 18px;
+    color: #000000;
+}
+.itembTTR {
+    font-weight: bold;
+    font-size: 18px;
+    color: #fb3838;
+}
+.itembTB {
+    display: flex;
+    align-items: center;
+}
+.itembTBit {
+    height: 30px;
+    line-height: 30px;
+    background: rgba(230, 231, 235, 0.3);
+    border-radius: 3px;
+    padding: 0 15px;
+    box-sizing: border-box;
+    margin-right: 20px;
+    font-weight: 500;
+    font-size: 15px;
+    color: #666666;
+}
+</style>

src/page/homepage/personability/abilityUserDetail.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="rencaifuwu">
+        <div class="topinfo">
+            <div class="container topbox">
+                <div class="topboxL">
+                    <div class="topboxLT">
+                        嵌入式软件测试工程师
+                        <span>6-10K</span>
+                    </div>
+                    <div class="topboxLM">
+                        <div class="topboxLMit">
+                            <img src="/assets/ability/userd1.png" alt="" />
+                            北京
+                        </div>
+                        <div class="topboxLMit">
+                            <img src="/assets/ability/userd2.png" alt="" />
+                            1-3年
+                        </div>
+                        <div class="topboxLMit">
+                            <img src="/assets/ability/userd3.png" alt="" />
+                            本科
+                        </div>
+                        <div class="topboxLMit">
+                            <img src="/assets/ability/userd4.png" alt="" />
+                            招2人
+                        </div>
+                        <div class="topboxLMit">
+                            <img src="/assets/ability/userd5.png" alt="" />
+                            全职
+                        </div>
+                    </div>
+                    <div class="topboxLB">申请职位</div>
+                </div>
+                <div class="topboxR">
+                    <div class="topboxRT">
+                        <div class="topboxRTIT">五险一金</div>
+                        <div class="topboxRTIT">加班补助</div>
+                        <div class="topboxRTIT">餐补</div>
+                        <div class="topboxRTIT">带薪年假</div>
+                    </div>
+                    <div class="topboxRB">北京关键科技股份有限公司</div>
+                </div>
+            </div>
+        </div>
+        <div class="content container">
+            <div class="contentTitle">职位描述</div>
+
+            <div class="skill">
+                <div class="skillit">C++test</div>
+                <div class="skillit">Testbed</div>
+                <div class="skillit">loadrunner</div>
+                <div class="skillit">jmeter</div>
+                <div class="skillit">C++</div>
+            </div>
+            <div class="contentCon">
+                岗位要求： <br />
+                1.本科及以上学历，计算机相关专业毕业； <br />2.对测试工作有兴趣，能够接受出差。
+            </div>
+            <div class="contentCon">
+                岗位技能： <br />
+                1.掌握软件测试技能、具备用例编写能力； <br />
+                2.熟练掌握C、C++语言，有白盒测试经验，有单元测试经验者优先；（非常重要条件） <br />
+                3.具有嵌入式培训、工作经历及相关行业测试经验者优先； <br />
+                4.熟悉C++test、Testbed、loadrunner、jmeter等测试工具，或具有第三方测评经验者优先录用。
+            </div>
+            <div class="contentCon">
+                岗位职责：<br />
+                1.负责嵌入式软件的单元测试、集成测试、配置项测试和系统测试，完成测试计划，测试用例编写问题单提交，测试报告编写；<br />
+                2.负责通用软件文档审查、功能测试、性能测试、兼容性、易用性、可靠性、信息安全性、维护性、可移植性测试，完成测试文档和测试报告编写；<br />
+                3.完成内部测试和第三方软件测评。
+            </div>
+            <div class="contentTitle">工作地点</div>
+            <div class="contentCon">北京市昌平区国电投中央园区</div>
+            <div class="contentTitle">入职企业</div>
+            <div class="contentCon">北京关键科技股份有限公司</div>
+        </div>
+    </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    data() {
+        return {}
+    },
+    mounted() {},
+    beforeDestroy() {},
+    computed: {
+        ...mapGetters(['userinform', 'token']),
+    },
+    methods: {},
+}
+</script>
+
+<style scoped>
+.rencaifuwu {
+    background: #f2f3f7;
+    padding-bottom: 40px;
+}
+.container {
+    width: 1200px;
+    margin: auto;
+}
+.topinfo {
+    width: 100%;
+    height: 230px;
+    background: #203e65;
+    margin-bottom: 18px;
+}
+.content {
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 40px;
+    box-sizing: border-box;
+}
+.contentTitle {
+    font-weight: bold;
+    font-size: 18px;
+    color: #1a1a1a;
+    margin: 20px 0;
+}
+.contentCon {
+    font-weight: 500;
+    font-size: 16px;
+    color: #595959;
+    margin-bottom: 20px;
+    line-height: 30px;
+}
+.skill {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.skillit {
+    height: 30px;
+    background: #f2f3f7;
+    border-radius: 3px;
+    padding: 0 15px;
+    box-sizing: border-box;
+    line-height: 30px;
+    margin-right: 11px;
+}
+
+.topbox {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.topboxR {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+}
+.topboxRT {
+    display: flex;
+    align-items: center;
+}
+.topboxRTIT {
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background: rgba(140, 158, 177, 0.3);
+    border-radius: 3px;
+    font-weight: 500;
+    font-size: 15px;
+    color: #ffffff;
+    margin-left: 11px;
+}
+.topboxRB {
+    font-weight: 500;
+    font-size: 15px;
+    color: #c1cedc;
+    margin-top: 80px;
+}
+.topboxLB {
+    width: 140px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    background: #1778f7;
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 18px;
+    color: #ffffff;
+    cursor: pointer;
+}
+.topboxLT {
+    font-weight: bold;
+    font-size: 30px;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+}
+.topboxLT span {
+    font-weight: bold;
+    font-size: 32px;
+    color: #fca362;
+    margin-left: 50px;
+}
+.topboxLM {
+    display: flex;
+    align-items: center;
+    margin: 25px 0;
+}
+.topboxLMit {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 15px;
+    color: #ffffff;
+    margin-right: 25px;
+}
+.topboxLMit img {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+}
+</style>

src/router/router.js

@@ -13,6 +13,9 @@ import crowddetails from "../page/homepage/crowdsourcing/crowddetails.vue"
 import publishtasks from "../page/homepage/crowdsourcing/publishtasks.vue"
 import train from "../page/homepage/traininstitute/train.vue"
 import ability from "../page/homepage/personability/ability.vue"
+import abilityUser from "../page/homepage/personability/abilityUser.vue"
+import abilityUserD from "../page/homepage/personability/abilityUserDetail.vue"
+
 import abilityMore from "../page/homepage/personability/abilityMore.vue"
 import abilityApply from "../page/homepage/personability/abilityApply.vue"
 import employ from "../page/homepage/employ/employ.vue"
@@ -91,6 +94,8 @@ const router = new Router({
         { path: 'crowdsourcing/publishtasks', component: publishtasks, },
         { path: 'college', component: train },
         { path: 'ability', component: ability },
+        { path: 'ability/user', component: abilityUser },
+        { path: 'ability/detail', component: abilityUserD },
         { path: 'ability/more', component: abilityMore },
         { path: 'ability/apply', component: abilityApply },
         // {path:'news',component:dynamics,},
@@ -165,6 +170,14 @@ router.beforeEach((to, from, next) => {
     }
   }
 
+  // 根据角色控制人才服务
+  if (to.path == '/ability') {
+    if (store.getters.userinform.companyStatus == 2) {
+      next()
+    } else {
+      next('/ability/user')
+    }
+  }
 
   // console.log(store.getters.companyStatus);
   let token = store.getters.token;
@@ -175,7 +188,7 @@ router.beforeEach((to, from, next) => {
   document.body.scrollTop = 0
   // firefox
   document.documentElement.scrollTop = 0
-  const meta = to.meta || {}
+  // const meta = to.meta || {}
   // store.dispatch("SET_KEYSAASDICT")