pc网页版软测宝
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

553 lines
18 KiB

12 months ago
<template>
<div>
<div class="fixhead">
<div style="width: 1300px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;">
<div @click="tishou" class="logoimg">
<img src="/assets/loginreg/logo.png" alt="">
</div>
<div v-if='disnonelog' class='header'>
<!-- <div v-if="menulist&&menulist.length>0" class='headermenu'>
<el-menu class="topmenuitem" active-text-color="#0066EB" mode="horizontal">
<span v-for="(item, index1) in menulist" :key="index1">
<el-menu-item :index="item.link">
<a v-if="item.stepHref" :href="item.href" target="blank" >
<p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
<p v-else style="color:#0066EB">{{item.title}}</p>
</a>
<router-link v-else :to='item.link'>
<p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
<p v-else style="color:#0066EB">{{item.title}}</p>
</router-link>
</el-menu-item>
<el-submenu :index="item.link" v-if="item.submenu && item.submenu.length>0">
<el-menu-item v-for="(subitem, subkey) in item.submenu" :key="subkey" :index="subitem.link">
<a v-if="subitem.stepHref" :href="subitem.href" target="blank" >
<p v-if="!subitem.highlight" >{{subitem.title}}</p>
<p v-else style="color:#0066EB">{{subitem.title}}</p>
</a>
<router-link :to='subitem.link'>
<p v-if="!subitem.highlight">{{subitem.title}}</p>
<p v-else style="color:#0066EB">{{subitem.title}}</p>
</router-link>
</el-menu-item>
</el-submenu>
</span>
</el-menu>
</div> -->
<div v-if="menulist&&menulist.length>0" class='headermenu'>
<div v-for="(item, key) in menulist" :key="key" class="topmenuitem">
<a v-if="item.stepHref" :href="item.href" target="blank" >
<p class='menutitl' v-if="!item.highlight" >{{item.title}}</p>
<p v-else style="color:#0066EB">{{item.title}}</p>
</a>
<router-link v-else :to="item.link">
<!-- <router-link v-else :to="item.link == '/market' ||item.link == '/college' ? '':item.link"> -->
<p class='menutitl' v-if="!item.highlight" >{{item.title}}<i v-if="item.submenu && item.submenu.length>0" class="el-icon-caret-bottom"></i></p>
<p v-else style="color:#0066EB">{{item.title}}<i v-if="item.submenu && item.submenu.length>0" class="el-icon-caret-bottom"></i></p>
</router-link>
<div v-if="item.submenu && item.submenu.length>0" class='submenuwarp' >
<div v-for="(subitem, subkey) in item.submenu" :key="subkey" v-show="subitem.show">
<a v-if="item.stepHref" :href="subitem.href" target="blank" >
<p class='menutitlChild' v-if="!subitem.highlight" >{{subitem.title}}</p>
<p v-else style="color:#0066EB">{{subitem.title}}</p>
</a>
<router-link :to='subitem.link' class="submenop">
<p class='menutitlChild' v-if="!subitem.highlight" >{{subitem.title}}</p>
<p v-else style="color:#0066EB">{{subitem.title}}</p>
</router-link>
</div>
</div>
</div>
</div>
</div>
<div v-if='disnonelog' class="worker">
<div v-if='disnonelog' style="display:flex;font-size:14px;">
<el-divider direction="vertical"></el-divider>
<div v-if="token" style="display:flex;">
<div class="permissions" @click="mypermissions('workbench')">
<img style="margin-right:10px" src="/assets/home/gongzuotai.png" alt="">
<p style="width:50px;">工作台</p>
</div>
12 months ago
<div class="permissions" @click="mypermissions('message')" style="margin-right:10px">
<el-badge :value="messageCount" :max="100" :hidden="messageCount==0" :class="messageCount>0?'baggeitem':'baggeitemda'">
<img style="margin-right:5px" src="/assets/home/xiaoxi.png" alt="">
</el-badge>
<p style="margin-left:5px;width:65px;">站内消息</p>
</div>
<div class="predropdown">
<el-dropdown trigger="click" placement='bottom' >
<div class="avatar-wrapper">
<img style="width:54px;height:54px;margin:13px 0 5px 0px;cursor:pointer;border-radius:50%" :src="userinform.avatar" alt="">
12 months ago
</div>
<el-dropdown-menu slot="dropdown" style="top:66px!important">
<el-dropdown-item @click.native="mypermissions('imembers')">个人中心</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div v-else style="display:flex;align-items: center">
<div class="loginbtn" @click="jump('log')">登录</div>
<div class="regbtn" @click="jump('reg')">注册</div>
</div>
</div>
</div>
<div v-else style='display:flex;align-items:center;height:80px;margin-left:70%'>
<img src="/assets/loginreg/dianhua.png" alt="">
<p style="font-size: 18px;font-weight: bold;color: #595959;margin-left:10px">咨询热线010-80750213</p>
</div>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
import {mapGetters} from "vuex";
import store from "@/store";
import {listMyMessageCount} from '@/api/system/message'
export default {
props:['menulist'],
data(){
return {
searchcontent:'',
disnonelog:true,
messageCount: 0,
cartCount: 0
}
},
computed: {
...mapGetters(['token','logindate','avatar','userinform']),
12 months ago
count() {
return store.getters.messageCount;  //需要监听的数据
},
cartCountW() {
return store.getters.cartCount; //需要监听的数据
},
},
created() {
if(this.token){
listMyMessageCount().then(response => {
this.messageCount = response.data;
this.cartCount = response.cartCount;
store.commit('SET_MESSAGECOUNT', this.messageCount);
store.commit('SET_CARTCOUNT', this.cartCount);
}).catch(()=>{
// console.log('请求失败')
})
}
},
watch:{
$route:{
handler(val, old) {
if(!val.query.type){
this.disnonelog=true;
}else{
this.disnonelog=false;
}
if(this.menulist && this.menulist.length>0){
// console.log('菜单栏',this.menulist)
if(val.name=='home'){
let activehome=this.menulist.filter(item=>item.title=='首页')
activehome[0].highlight=true
// console.log('首页',activehome)
}else{
let activehome=this.menulist.filter(item=>item.title=='首页')
activehome[0].highlight=false
}
if(val.path.indexOf('/market')===0){
let activeName=this.menulist.filter(item=>item.title=='工具服务')
activeName[0].highlight=true
// console.log('工具市场',activeName)
}else{
let activeName=this.menulist.filter(item=>item.title=='工具服务')
activeName[0].highlight=false
}
12 months ago
if(val.path.indexOf('/crowdsourcing')===0){
// console.log('众包市场路由')
let activeNamecrowd=this.menulist.filter(item=>item.title=='众包服务')
activeNamecrowd[0].highlight=true
// console.log('众包市场',activeNamecrowd)
}else{
let activeNamecrowd=this.menulist.filter(item=>item.title=='众包服务')
activeNamecrowd[0].highlight=false
}
if(val.path.indexOf('/ability')===0){
// console.log('众包市场路由')
let activeNamecrowd=this.menulist.filter(item=>item.title=='人才服务')
activeNamecrowd[0].highlight=true
// console.log('众包市场',activeNamecrowd)
}else{
let activeNamecrowd=this.menulist.filter(item=>item.title=='人才服务')
activeNamecrowd[0].highlight=false
}
if(val.path.indexOf('/college')===0){
let activecollege=this.menulist.filter(item=>item.title=='培训服务')
activecollege[0].highlight=true
// console.log('培训学院',activecollege)
}else{
let activecollege=this.menulist.filter(item=>item.title=='培训服务')
activecollege[0].highlight=false
}
// if(val.path.indexOf('/news')===0){
// // console.log('行业动态')
// let activeindusty=this.menulist.filter(item=>item.title=='行业动态')
// activeindusty[0].highlight=true
// // console.log('众包市场',activeindusty)
// }else{
// let activeindusty=this.menulist.filter(item=>item.title=='行业动态')
// activeindusty[0].highlight=false
// }
if(val.path.indexOf('/about')===0){
let activeabout=this.menulist.filter(item=>item.title=='关于我们')
activeabout[0].highlight=true
// console.log('关于我们',activeabout)
}else{
let activeabout=this.menulist.filter(item=>item.title=='关于我们')
activeabout[0].highlight=false
}
}
// console.log('路由--', val,old)
},
immediate:true
},
count(newVal, oldVal) {
this.messageCount = newVal;
},
cartCountW(newVal, oldVal) {
this.cartCount = newVal;
}
},
mounted(){
// console.log('this.disnonelog',this.disnonelog,this.token)
},
destroyed() {
},
methods:{
//跳转登录/注册
jump(type){
this.$router.push(`/login?type=${type}`)
},
//logo跳转首页
tishou(){
this.$router.push('/')
},
//我的功能
mypermissions(type){
let currentdata=Date.parse(new Date());
let logindate=this.logindate;
let timedifference=currentdata-(parseInt(logindate)+432000000);
if(timedifference>0){
this.$confirm('登录状态失效,请您重新登录' , '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=> {
this.$router.push('/login?type=log')
}).catch(()=>{
// console.log('取消')
})
}else{
if(type=='message'){
this.$router.push('/console/message')
}else if(type=='shopping'){
this.$router.push('/console/cart')
}else if(type=='workbench'){
this.$router.push('/console/myparticipate')
}else if(type=='imembers'){
this.$router.push('/console/profile')
}
// console.log('跳转对应的页面');
}
},
//退出登录
logout() {
this.$confirm('确定退出登录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
// this.$router.push('/login?type=log')
})
})
},
}
}
</script>
<style scoped>
*{margin:0;padding:0}
.fixhead{
position:fixed;
top:0;
z-index:99;
background:#FFFFFF;
width:100%;
box-shadow: 0 6px 9px 0 rgb(0 0 0 / 6%);
}
.reg{
height:88px;
width:100%;
background-image: url('/organmanage/assets/reg/nav.png');
background-size:100% 88px;
background-repeat:no-repeat;
}
.header{
/* width:100%; */
height:78px;
text-align:center;
display: flex;
position: relative;
}
.header /deep/ .el-menu.el-menu--horizontal {
border: none;
}
.header /deep/ .el-menu-item {
padding: 10px 15px;
height: 78px;
font-size: 15px;
color: #000000;
font-weight: bold;
}
.header /deep/ .el-submenu__title {
font-size: 15px;
color: #000000;
font-weight: bold;
}
.headermenu{
width:680px;
display:flex;
margin:0 auto;
justify-content: space-between;
align-content: center;
flex-direction: row;
text-align:center;
line-height:78px;
/* margin:0 30px 0 10px; */
}
.topmenuitem{
/* width: 120px; */
height:78px;
font-weight:400;
position:relative;
}
.topmenuitem a{
text-decoration: none;
font-size:15px;
color: #000000;
font-weight: bold;
}
.topmenuitem:hover{
/* border-bottom:3px solid #FFFF; */
}
.menutitl {
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1A1A1A;
line-height: 78px;
}
.menutitl:hover {
color:#0066EB;
}
.menutitlChild {
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1A1A1A;
line-height: 40px;
}
.menutitlChild:hover {
color:#0066EB;
}
.topmenuitem:hover .menutitl{
/* font-size:18px; */
/* color:#0066EB; */
}
.topmenuitem>>>a.is-active{
/* font-size:18px; */
color:#0066EB;
}
.topmenuitem:hover .submenuwarp{
display:initial;
}
.submenuwarp{
position:absolute;
left:0px;
top: 77px;
width:200px;
background-color: #FFFFFF;
/* background-color: #FEB45FFF; */
z-index:3;
display:flex;
flex-direction:column;
display:none;
border-radius: 2px;
padding: 0 10px;
/* border: 1px solid #ccc; */
}
/* .submenuwarp::before {
content: "";
display: block;
position: absolute;
left: 24px;
top: -13px;
border-width: 6px;
border-style: dashed solid dashed dashed;
border-color:transparent transparent #CCC transparent;
} */
.submenop {
text-decoration:none;
line-height:40px;
text-align:left;
color:#000;
}
.submenudd:hover{
background-color:#FFF3EDFF;
/* color:#FEB45FFF; */
}
.submenuwarp .submenudd{
width:200px;
height:36px;
font-size:14px !important;
display:block;
line-height:36px;
color:#333333FF;
}
.logoimg{
/* cursor:pointer;
position:absolute;
margin-left:20%;
margin-top:10px;
z-index:99 */
}
@media screen and (max-width: 1700px) {
.logoimg{
/* cursor:pointer;
position:absolute;
margin-left:10%;
margin-top:10px */
}
.headermenu{
width:680px;
}
.worker{
/* position:absolute;
margin-left:74%!important;
height:80px;
margin-top:-80px */
}
}
@media screen and (max-width: 1500px) {
.logoimg{
/* cursor:pointer;
position:absolute;
margin-left:5%;
margin-top:10px */
}
.worker{
/* position:absolute;
margin-left:70%!important;
height:80px;
margin-top:-80px */
}
}
.worker{
/* position:absolute;
margin-left:70%;
height:80px;
margin-top:-80px */
}
.worker>>>.el-divider--vertical{
height: 27px;
background: #1A1A1A;
opacity: 0.15;
margin:25px 10px 25px 15px;
}
.loginbtn{
margin-left:20px;
width:60px;
height:30px;
font-size:15px;
color:rgba(255,255,255,1);
background: linear-gradient(45deg, #2978EE, #0066EB);
border:none;
border-radius:6px;
line-height:30px;
cursor:pointer;
text-align:center;
}
.regbtn{
margin-left:20px;
width:60px;
height:30px;
font-size:15px;
color:#0066EB;
background:transparent;
border: 1px solid #0066EB;
border-radius:6px;
line-height:30px;
cursor:pointer;
text-align:center;
}
.permissions{
display:flex;
align-items:center;
margin-left:10px;
cursor:pointer;
}
.avatar-wrapper img:hover{
opacity:0.5;
/* transition: 0.3s; */
}
.baggeitem {
margin-top:5px;
margin-right:15px;
}
.baggeitemda {
margin-top:5px;
/* margin-right:10px; */
}
.el-dropdown-menu__item{
padding:0px 20px!important;
/* margin: 10px 0!important; */
}
.el-dropdown-menu{
top: 60px !important;
margin-top:10px!important;
}
.tostnew {
position: absolute;
top: -13px;
right: -23px;
}
.tostnewimg {
width: 58px;
height: 26px;
}
.tostnewtext {
position: absolute;
top: 16px;
right: 5px;
white-space: nowrap;
font-weight: 500;
font-size: 12px !important;
color: #FFFFFF;
line-height: 26px !important;
}
</style>