|
|
@@ -1,15 +1,18 @@
|
|
|
<template>
|
|
|
- <div id="proginn-header" :class="{transparent: transparent}">
|
|
|
+ <div id="proginn-header" :class="{ transparent: transparent }">
|
|
|
<div class="list">
|
|
|
<a :href="baseUrl" class="nav-item">
|
|
|
<img
|
|
|
class="logo"
|
|
|
- :src="transparent ? WhiteLogo : 'https://stacdn.proginn.com/image/common/logo3@2x.png'"
|
|
|
+ :src="
|
|
|
+ transparent
|
|
|
+ ? WhiteLogo
|
|
|
+ : 'https://stacdn.proginn.com/image/common/logo3@2x.png'
|
|
|
+ "
|
|
|
/>
|
|
|
</a>
|
|
|
<a :href="baseUrl" class="nav-item">首页</a>
|
|
|
- <a :href="baseUrl+'/users'" class="nav-item">程序员</a>
|
|
|
-
|
|
|
+ <a :href="baseUrl + '/users'" class="nav-item">程序员</a>
|
|
|
|
|
|
<div class="dropDownArea">
|
|
|
<el-button type="text" class="dashboard-title">技术人力</el-button>
|
|
|
@@ -18,21 +21,33 @@
|
|
|
<div class="showDropDownArea">
|
|
|
<div class="contentArea">
|
|
|
<div class="leftSelect">
|
|
|
- <div class="downCell" v-for="(item, index) in dropDownData" @mouseover="selectedDrop=index"
|
|
|
- :class="{choosed: index === selectedDrop}">
|
|
|
- <div class="cnName">{{item.title}}</div>
|
|
|
- <div class="enName">{{item.titleEn}}</div>
|
|
|
+ <div
|
|
|
+ class="downCell"
|
|
|
+ v-for="(item, index) in dropDownData"
|
|
|
+ @mouseover="selectedDrop = index"
|
|
|
+ :class="{ choosed: index === selectedDrop }"
|
|
|
+ >
|
|
|
+ <div class="cnName">{{ item.title }}</div>
|
|
|
+ <div class="enName">{{ item.titleEn }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rightShow">
|
|
|
- <div class="rightBigCell" v-for="(big, bigIndex) in dropDownData" :class="{ok: selectedDrop===bigIndex}">
|
|
|
- <a class="smallCell" v-for="(small, smallIndex) in big.list" :href="small.href">
|
|
|
+ <div
|
|
|
+ class="rightBigCell"
|
|
|
+ v-for="(big, bigIndex) in dropDownData"
|
|
|
+ :class="{ ok: selectedDrop === bigIndex }"
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ class="smallCell"
|
|
|
+ v-for="(small, smallIndex) in big.list"
|
|
|
+ :href="small.href"
|
|
|
+ >
|
|
|
<div class="cellLeftIcon">
|
|
|
- <img :src="small.icon" alt="">
|
|
|
- </div>
|
|
|
+ <img :src="small.icon" alt="" />
|
|
|
+ </div>
|
|
|
<div class="cellRightArea">
|
|
|
- <div class="cellRightName">{{small.title}}</div>
|
|
|
- <div class="cellRightDesc">{{small.desc}}</div>
|
|
|
+ <div class="cellRightName">{{ small.title }}</div>
|
|
|
+ <div class="cellRightDesc">{{ small.desc }}</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
@@ -62,22 +77,22 @@
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>
|
|
|
- <a class="workstation" :href="baseUrl+'/wo/work_todo'">
|
|
|
+ <a class="workstation" :href="baseUrl + '/wo/work_todo'">
|
|
|
<i class="el-icon-edit"></i>我的待办
|
|
|
</a>
|
|
|
</el-dropdown-item>
|
|
|
<el-dropdown-item>
|
|
|
- <a class="workstation" :href="baseUrl+'/wo/work_platform'">
|
|
|
+ <a class="workstation" :href="baseUrl + '/wo/work_platform'">
|
|
|
<i class="el-icon-date"></i>我的项目
|
|
|
</a>
|
|
|
</el-dropdown-item>
|
|
|
<el-dropdown-item>
|
|
|
- <a class="workstation" :href="baseUrl+'/wo/work_hire'">
|
|
|
+ <a class="workstation" :href="baseUrl + '/wo/work_hire'">
|
|
|
<i class="el-icon-news"></i>我的雇佣
|
|
|
</a>
|
|
|
</el-dropdown-item>
|
|
|
<el-dropdown-item>
|
|
|
- <a class="workstation" :href="baseUrl+'/wo/work_cloud'">
|
|
|
+ <a class="workstation" :href="baseUrl + '/wo/work_cloud'">
|
|
|
<i class="el-icon-service"></i>我的云端
|
|
|
</a>
|
|
|
</el-dropdown-item>
|
|
|
@@ -89,107 +104,171 @@
|
|
|
<span
|
|
|
v-if="messageCount.total > 0"
|
|
|
class="message-count message-total"
|
|
|
- >{{messageCount.total}}</span>
|
|
|
+ >{{ messageCount.total }}</span
|
|
|
+ >
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item class="message-box" @click.native="clickMessages('/message/system')">
|
|
|
+ <el-dropdown-item
|
|
|
+ class="message-box"
|
|
|
+ @click.native="clickMessages('/message/system')"
|
|
|
+ >
|
|
|
<i class="circle blue"></i>系统消息
|
|
|
- <span v-if="messageCount.system" class="message-count">{{messageCount.system}}</span>
|
|
|
+ <span v-if="messageCount.system" class="message-count">{{
|
|
|
+ messageCount.system
|
|
|
+ }}</span>
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item class="message-box" @click.native="clickMessages('/message/project')">
|
|
|
+ <el-dropdown-item
|
|
|
+ class="message-box"
|
|
|
+ @click.native="clickMessages('/message/project')"
|
|
|
+ >
|
|
|
<i class="circle orange"></i>工作通知
|
|
|
- <span v-if="messageCount.work" class="message-count">{{messageCount.work}}</span>
|
|
|
+ <span v-if="messageCount.work" class="message-count">{{
|
|
|
+ messageCount.work
|
|
|
+ }}</span>
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item class="message-box" @click.native="clickMessages('/message/comment')">
|
|
|
+ <el-dropdown-item
|
|
|
+ class="message-box"
|
|
|
+ @click.native="clickMessages('/message/comment')"
|
|
|
+ >
|
|
|
<i class="circle red"></i>评论回复
|
|
|
- <span v-if="messageCount.reply" class="message-count">{{messageCount.reply}}</span>
|
|
|
+ <span v-if="messageCount.reply" class="message-count">{{
|
|
|
+ messageCount.reply
|
|
|
+ }}</span>
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item class="message-box" @click.native="clickMessages('/message/at')">
|
|
|
+ <el-dropdown-item
|
|
|
+ class="message-box"
|
|
|
+ @click.native="clickMessages('/message/at')"
|
|
|
+ >
|
|
|
<i class="circle green"></i>@我的
|
|
|
- <span v-if="messageCount.at" class="message-count">{{messageCount.at}}</span>
|
|
|
+ <span v-if="messageCount.at" class="message-count">{{
|
|
|
+ messageCount.at
|
|
|
+ }}</span>
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item class="message-box" @click.native="clickMessages('/message/plus')">
|
|
|
+ <el-dropdown-item
|
|
|
+ class="message-box"
|
|
|
+ @click.native="clickMessages('/message/plus')"
|
|
|
+ >
|
|
|
<i class="circle pink"></i>赞及其它
|
|
|
- <span
|
|
|
- v-if="messageCount.community_other"
|
|
|
- class="message-count"
|
|
|
- >{{messageCount.community_other}}</span>
|
|
|
+ <span v-if="messageCount.community_other" class="message-count">{{
|
|
|
+ messageCount.community_other
|
|
|
+ }}</span>
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item class="message-box" @click.native="clickMessages('/message/coin')">
|
|
|
+ <el-dropdown-item
|
|
|
+ class="message-box"
|
|
|
+ @click.native="clickMessages('/message/coin')"
|
|
|
+ >
|
|
|
<i class="circle yellow"></i>收支信息
|
|
|
- <span v-if="messageCount.balance" class="message-count">{{messageCount.balance}}</span>
|
|
|
+ <span v-if="messageCount.balance" class="message-count">{{
|
|
|
+ messageCount.balance
|
|
|
+ }}</span>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
- <el-popover class="nav-popover" placement="bottom" width="226" trigger="hover">
|
|
|
+ <el-popover
|
|
|
+ class="nav-popover"
|
|
|
+ placement="bottom"
|
|
|
+ width="226"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
<div class="ref" slot="reference">
|
|
|
- <a class="nav-header" :href="baseUrl+'/wo/work_todo'">
|
|
|
+ <a class="nav-header" :href="baseUrl + '/wo/work_todo'">
|
|
|
<img class="header-user" :src="myInfo.icon_url" />
|
|
|
<img
|
|
|
v-if="myInfo.is_vip"
|
|
|
class="header-vip-icon"
|
|
|
- :src="baseUrl+`/Public/image/h5/vip_icon${vipImage}.png`"
|
|
|
+ :src="baseUrl + `/Public/image/h5/vip_icon${vipImage}.png`"
|
|
|
alt="vip-icon"
|
|
|
/>
|
|
|
</a>
|
|
|
- <span class="nickname">{{myInfo.nickname}}</span>
|
|
|
+ <span class="nickname">{{ myInfo.nickname }}</span>
|
|
|
</div>
|
|
|
<div class="menu">
|
|
|
<div v-if="myInfo.is_vip" class="vip-info vip-info-com">
|
|
|
<div class="vip-info-top">
|
|
|
<img
|
|
|
class="vip-icon"
|
|
|
- :src="baseUrl+`/Public/image/h5/vip_icon${vipImage}.png`"
|
|
|
+ :src="baseUrl + `/Public/image/h5/vip_icon${vipImage}.png`"
|
|
|
alt="vip-icon"
|
|
|
/>
|
|
|
<span class="vip-content">
|
|
|
- <span class="vip-title" :class="vipTextClass">{{vipText}}</span>
|
|
|
+ <span class="vip-title" :class="vipTextClass">{{
|
|
|
+ vipText
|
|
|
+ }}</span>
|
|
|
<br />
|
|
|
- <span class="vip-end-date">{{vipInfo.endDate}}到期</span>
|
|
|
+ <span class="vip-end-date">{{ vipInfo.endDate }}到期</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="vip-arcs">
|
|
|
- <a class="vip-arc" :class="vipTextClass" :href="baseUrl+'/type/vip/'+vipType">查看权益</a>
|
|
|
<a
|
|
|
class="vip-arc"
|
|
|
:class="vipTextClass"
|
|
|
- :href="baseUrl+'/vip/pay?number=3&product_id='+this.$store.state.userinfo.vip_type_id+'&next=/type/vip/'+vipType"
|
|
|
- >立即续费</a>
|
|
|
+ :href="baseUrl + '/type/vip/' + vipType"
|
|
|
+ >查看权益</a
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ class="vip-arc"
|
|
|
+ :class="vipTextClass"
|
|
|
+ :href="
|
|
|
+ baseUrl +
|
|
|
+ '/vip/pay?number=3&product_id=' +
|
|
|
+ this.$store.state.userinfo.vip_type_id +
|
|
|
+ '&next=/type/vip/' +
|
|
|
+ vipType
|
|
|
+ "
|
|
|
+ >立即续费</a
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="vip-items">
|
|
|
- <a class="vip-item divider" :href="baseUrl+'/wo/work_platform'">
|
|
|
+ <a class="vip-item divider" :href="baseUrl + '/wo/work_platform'">
|
|
|
<i class="el-icon-date"></i>我的项目
|
|
|
</a>
|
|
|
- <a class="vip-item" :href="baseUrl+'/wo/work_hire'">
|
|
|
+ <a class="vip-item" :href="baseUrl + '/wo/work_hire'">
|
|
|
<i class="el-icon-news"></i>我的雇佣
|
|
|
</a>
|
|
|
- <a class="vip-item" :href="baseUrl+'/wo/work_cloud'">
|
|
|
+ <a class="vip-item" :href="baseUrl + '/wo/work_cloud'">
|
|
|
<i class="el-icon-service"></i>我的云端
|
|
|
</a>
|
|
|
- <a class="vip-item divider" :href="baseUrl+`/wo/manage_homepage/`">
|
|
|
+ <a
|
|
|
+ class="vip-item divider"
|
|
|
+ :href="baseUrl + `/wo/manage_homepage/`"
|
|
|
+ >
|
|
|
<i class="el-icon-document"></i>我的主页
|
|
|
</a>
|
|
|
- <a class="vip-item" :href="baseUrl+'/credit/pages'">
|
|
|
+ <a class="vip-item" :href="baseUrl + '/credit/pages'">
|
|
|
<i class="el-icon-credit"></i>技术信用
|
|
|
</a>
|
|
|
- <a class="vip-item" :href="baseUrl+'/otherpage/user/collection'">
|
|
|
+ <a
|
|
|
+ class="vip-item"
|
|
|
+ :href="baseUrl + '/otherpage/user/collection'"
|
|
|
+ >
|
|
|
<i class="el-icon-collection"></i>收藏中心
|
|
|
</a>
|
|
|
- <a class="vip-item divider" :href="baseUrl+'/index/app'">
|
|
|
+ <a class="vip-item divider" :href="baseUrl + '/index/app'">
|
|
|
<i class="el-icon-download-app"></i>APP下载
|
|
|
</a>
|
|
|
<a class="vip-item" @click="clickQuit">
|
|
|
- <i class="el-icon-back" style="margin: 0 10px !important;"></i>退出
|
|
|
+ <i class="el-icon-back" style="margin: 0 10px !important;"></i
|
|
|
+ >退出
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
</template>
|
|
|
<div v-else>
|
|
|
- <a class="account-ctrl" style="margin-right: 40px" :href="baseUrl+'/index/app'">APP下载</a>
|
|
|
+ <a
|
|
|
+ class="account-ctrl"
|
|
|
+ style="margin-right: 40px"
|
|
|
+ :href="baseUrl + '/index/app'"
|
|
|
+ >APP下载</a
|
|
|
+ >
|
|
|
<a class="account-ctrl" :href="loginUrl">登录</a>
|
|
|
- <a class="account-ctrl" style="margin-left: 40px;" :href="baseUrl+'/user/register'">注册</a>
|
|
|
+ <a
|
|
|
+ class="account-ctrl"
|
|
|
+ style="margin-left: 40px;"
|
|
|
+ :href="baseUrl + '/user/register'"
|
|
|
+ >注册</a
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -197,7 +276,7 @@
|
|
|
|
|
|
<script>
|
|
|
import WhiteLogo from "@/assets/img/white_logo@2x.png";
|
|
|
-import DropDownData from './headers/dropDownData.js'
|
|
|
+import DropDownData from "./headers/dropDownData.js";
|
|
|
|
|
|
export default {
|
|
|
props: ["transparent"],
|
|
|
@@ -223,7 +302,7 @@ export default {
|
|
|
let userinfo = this.$store.state.userinfo;
|
|
|
return {
|
|
|
id: userinfo.vip_type_id,
|
|
|
- endDate: userinfo.vip_end_date,
|
|
|
+ endDate: userinfo.vip_end_date
|
|
|
};
|
|
|
},
|
|
|
myInfo() {
|
|
|
@@ -277,9 +356,10 @@ export default {
|
|
|
default:
|
|
|
return "";
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
+ // console.error(this.app.co)
|
|
|
if (this.myInfo && this.myInfo.nickname) {
|
|
|
this.getMessageCount();
|
|
|
}
|
|
|
@@ -287,6 +367,9 @@ export default {
|
|
|
this.baseUrl +
|
|
|
"/?loginbox=show&next=" +
|
|
|
encodeURIComponent(location.href);
|
|
|
+
|
|
|
+ this.keywork = this.$route.query.keyword;
|
|
|
+ // console.log("this.keywork = ", this.key)
|
|
|
},
|
|
|
methods: {
|
|
|
async clickQuit() {
|
|
|
@@ -296,7 +379,8 @@ export default {
|
|
|
location.href = this.baseUrl + url;
|
|
|
},
|
|
|
clickInputEnter() {
|
|
|
- window.location.href = this.kaifainUrl + "/?keyword=" + this.keywork;
|
|
|
+ console.log("location ==", this.$router.path + "/?keyword=" + this.keywork);
|
|
|
+ window.location.href = this.$route.path + "/?keyword=" + this.keywork;
|
|
|
},
|
|
|
async getMessageCount() {
|
|
|
let res = await this.$axios.$get(
|
|
|
@@ -307,162 +391,169 @@ export default {
|
|
|
if (res) {
|
|
|
this.messageCount = res.data;
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
- this.dropDownData = DropDownData(this.$store.state.domainConfig)
|
|
|
+ this.dropDownData = DropDownData(this.$store.state.domainConfig);
|
|
|
this.baseUrl = this.$store.state.domainConfig.siteUrl;
|
|
|
this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
|
|
|
this.kaifainUrl = this.$store.state.domainConfig.kaifainUrl;
|
|
|
this.jobUrl = this.$store.state.domainConfig.jobUrl;
|
|
|
- },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .dropDownArea {
|
|
|
- position: relative;
|
|
|
+.dropDownArea {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .showDropDownArea {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
+ &:hover {
|
|
|
.showDropDownArea {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- .showDropDownArea {
|
|
|
- padding-top: 60px;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- background: transparent;
|
|
|
- transform: translateX(-30%);
|
|
|
-
|
|
|
- .contentArea {
|
|
|
- display: flex;
|
|
|
- box-sizing: content-box;
|
|
|
- width: 830px;
|
|
|
- height: 440px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 6px;
|
|
|
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.06);
|
|
|
-
|
|
|
- .leftSelect {
|
|
|
- width: 180px;
|
|
|
- height: 100%;
|
|
|
- background: #f4f5f9;
|
|
|
-
|
|
|
- .downCell {
|
|
|
- height: 75px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- .cnName {
|
|
|
- height: 23px;
|
|
|
- font-size: 17px;
|
|
|
- text-align: left;
|
|
|
- color: #222222;
|
|
|
- line-height: 23px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .enName {
|
|
|
- height: 17px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: left;
|
|
|
- color: #999999;
|
|
|
- line-height: 17px;
|
|
|
- }
|
|
|
+ padding-top: 60px;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: transparent;
|
|
|
+ transform: translateX(-30%);
|
|
|
|
|
|
- &.choosed {
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
- &:after {
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- width: 3px;
|
|
|
- height: 31px;
|
|
|
- background: #308eff;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- }
|
|
|
+ .contentArea {
|
|
|
+ display: flex;
|
|
|
+ box-sizing: content-box;
|
|
|
+ width: 830px;
|
|
|
+ height: 440px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .leftSelect {
|
|
|
+ width: 180px;
|
|
|
+ height: 100%;
|
|
|
+ background: #f4f5f9;
|
|
|
+
|
|
|
+ .downCell {
|
|
|
+ height: 75px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .cnName {
|
|
|
+ height: 23px;
|
|
|
+ font-size: 17px;
|
|
|
+ text-align: left;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 23px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .enName {
|
|
|
+ height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.choosed {
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ width: 3px;
|
|
|
+ height: 31px;
|
|
|
+ background: #308eff;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightShow {
|
|
|
+ width: 650px;
|
|
|
+ background: #fff;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px 34px 14px 23px;
|
|
|
|
|
|
- .rightShow {
|
|
|
- width: 650px;
|
|
|
- background: #fff;
|
|
|
- height: 100%;
|
|
|
+ .rightBigCell {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 594px;
|
|
|
+ height: 137px;
|
|
|
+ box-shadow: 0px -1px 0px 0px #e2e8ee inset;
|
|
|
+ padding: 14px 0;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 15px 34px 14px 23px;
|
|
|
|
|
|
- .rightBigCell {
|
|
|
+ &:last-child {
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .smallCell {
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 594px;
|
|
|
- height: 137px;
|
|
|
- box-shadow: 0px -1px 0px 0px #e2e8ee inset;
|
|
|
- padding: 14px 0;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ width: 280px;
|
|
|
+ cursor: pointer;
|
|
|
box-sizing: border-box;
|
|
|
+ padding-left: 40px;
|
|
|
+ border-radius: 12px;
|
|
|
|
|
|
- &:last-child {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
+ .cellLeftIcon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
|
|
|
- .smallCell {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- width: 280px;
|
|
|
- cursor: pointer;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 40px;
|
|
|
- border-radius: 12px;
|
|
|
-
|
|
|
- .cellLeftIcon {
|
|
|
- flex-shrink: 0;
|
|
|
+ img {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .cellRightArea {
|
|
|
+ margin-left: 11px;
|
|
|
|
|
|
- .cellRightArea {
|
|
|
- margin-left: 11px;
|
|
|
- .cellRightName {
|
|
|
- height: 24px;
|
|
|
- font-size: 18px;
|
|
|
- text-align: left;
|
|
|
- color: #222222;
|
|
|
- line-height: 24px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .cellRightDesc {
|
|
|
- margin-top: 1px;
|
|
|
- height: 19px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: left;
|
|
|
- color: #999999;
|
|
|
- line-height: 19px;
|
|
|
- }
|
|
|
+ .cellRightName {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: left;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &.ok {
|
|
|
- .smallCell {
|
|
|
- background-color: rgb(238, 246, 254);
|
|
|
+ .cellRightDesc {
|
|
|
+ margin-top: 1px;
|
|
|
+ height: 19px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 19px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &.ok {
|
|
|
+ .smallCell {
|
|
|
+ background-color: rgb(238, 246, 254);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -474,12 +565,14 @@ export default {
|
|
|
background: white;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
+
|
|
|
.list {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
width: 1000px;
|
|
|
}
|
|
|
+
|
|
|
.nav-item {
|
|
|
display: flex;
|
|
|
height: 83px;
|
|
|
@@ -489,14 +582,17 @@ export default {
|
|
|
/* padding: 0 15px; */
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.nav-item:first-child {
|
|
|
padding: 0;
|
|
|
}
|
|
|
+
|
|
|
.nav-item:nth-child(n + 2):hover {
|
|
|
color: #1782d9;
|
|
|
border-top: 5px solid transparent;
|
|
|
border-bottom: 5px solid #1782d9;
|
|
|
}
|
|
|
+
|
|
|
.nav-dropdown,
|
|
|
.nav-popover {
|
|
|
--imgWidth: 28px;
|
|
|
@@ -504,20 +600,24 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.nav-popover > .ref {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.nav-header {
|
|
|
position: relative;
|
|
|
width: var(--imgWidth);
|
|
|
height: var(--imgWidth);
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
+
|
|
|
.logo {
|
|
|
width: 140px;
|
|
|
height: auto;
|
|
|
}
|
|
|
+
|
|
|
.input {
|
|
|
width: 234px;
|
|
|
height: 40px;
|
|
|
@@ -535,6 +635,7 @@ export default {
|
|
|
color: grey;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-credit {
|
|
|
background: url("~@/assets/img/header/creditIconMine.png") no-repeat;
|
|
|
background-size: cover;
|
|
|
@@ -543,6 +644,7 @@ export default {
|
|
|
vertical-align: middle;
|
|
|
margin: 0 9px !important;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-download-app {
|
|
|
background: url("~@/assets/img/header/download@2x.png") no-repeat;
|
|
|
background-size: cover;
|
|
|
@@ -551,13 +653,16 @@ export default {
|
|
|
vertical-align: middle;
|
|
|
margin: 0 9px !important;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-search::before {
|
|
|
font-size: 14px;
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
+
|
|
|
i {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
+
|
|
|
i.circle {
|
|
|
display: inline-block;
|
|
|
--width: 12px;
|
|
|
@@ -565,29 +670,37 @@ i.circle {
|
|
|
height: var(--width);
|
|
|
border-radius: calc(var(--width) / 2);
|
|
|
}
|
|
|
+
|
|
|
i.blue {
|
|
|
background: #3b83c0;
|
|
|
}
|
|
|
+
|
|
|
i.orange {
|
|
|
background: #e07b53;
|
|
|
}
|
|
|
+
|
|
|
i.red {
|
|
|
background: #d95c5c;
|
|
|
}
|
|
|
+
|
|
|
i.green {
|
|
|
background: #5bbd72;
|
|
|
}
|
|
|
+
|
|
|
i.pink {
|
|
|
background: #d9499a;
|
|
|
}
|
|
|
+
|
|
|
i.yellow {
|
|
|
background: #f2c61f;
|
|
|
}
|
|
|
+
|
|
|
.message-box {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.message-count {
|
|
|
color: white;
|
|
|
margin-left: 4px;
|
|
|
@@ -597,19 +710,23 @@ i.yellow {
|
|
|
border-radius: 9px;
|
|
|
background: grey;
|
|
|
}
|
|
|
+
|
|
|
.message-count.message-total {
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
right: -10px;
|
|
|
background: #d95c5c;
|
|
|
}
|
|
|
+
|
|
|
span.other-icon {
|
|
|
display: block;
|
|
|
margin-left: 30px;
|
|
|
}
|
|
|
+
|
|
|
.nickname {
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
+
|
|
|
.vip-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -618,50 +735,61 @@ span.other-icon {
|
|
|
width: 206px;
|
|
|
height: 120px;
|
|
|
}
|
|
|
+
|
|
|
.vip-info-top {
|
|
|
display: flex;
|
|
|
width: 142px;
|
|
|
}
|
|
|
+
|
|
|
.vip-title {
|
|
|
color: #cb9d53;
|
|
|
font-size: 16px;
|
|
|
line-height: 36px;
|
|
|
}
|
|
|
+
|
|
|
.vip-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
margin: 10px 8px 0 0;
|
|
|
}
|
|
|
+
|
|
|
.vip-end-date {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
.vip-arcs {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 142px;
|
|
|
margin-top: 11px;
|
|
|
}
|
|
|
+
|
|
|
.vip-arc {
|
|
|
flex: 1;
|
|
|
font-size: 13px;
|
|
|
color: #cb9d53;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.vip-arc:first-child {
|
|
|
border-right: 1px solid rgba(245, 245, 245, 1);
|
|
|
}
|
|
|
+
|
|
|
.vip-info-com .vip-title {
|
|
|
color: rgb(113, 177, 253);
|
|
|
}
|
|
|
+
|
|
|
.vip-info-com .vip-arc {
|
|
|
color: rgb(113, 177, 253);
|
|
|
}
|
|
|
+
|
|
|
.header-user {
|
|
|
width: var(--imgWidth);
|
|
|
height: var(--imgWidth);
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
+
|
|
|
.header-vip-icon {
|
|
|
position: absolute;
|
|
|
top: 16px;
|
|
|
@@ -669,26 +797,32 @@ span.other-icon {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
}
|
|
|
+
|
|
|
.vip-items {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.vip-item {
|
|
|
line-height: 32px;
|
|
|
color: #606266;
|
|
|
}
|
|
|
+
|
|
|
.vip-item > i {
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
+
|
|
|
.divider {
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
margin-top: 10px;
|
|
|
padding-top: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.vip-info-com .is-dev {
|
|
|
color: #cb9d53;
|
|
|
}
|
|
|
+
|
|
|
.vip-info-com .is-newly {
|
|
|
color: #308eff;
|
|
|
}
|
|
|
@@ -700,29 +834,36 @@ span.other-icon {
|
|
|
.workstation {
|
|
|
color: #606266;
|
|
|
}
|
|
|
+
|
|
|
.account-ctrl {
|
|
|
color: #606266;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
+
|
|
|
#proginn-header a {
|
|
|
text-decoration: none !important;
|
|
|
}
|
|
|
+
|
|
|
#proginn-header.transparent {
|
|
|
background: transparent;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
}
|
|
|
+
|
|
|
#proginn-header.transparent a {
|
|
|
color: white;
|
|
|
}
|
|
|
+
|
|
|
.message-box-title,
|
|
|
.dashboard-title {
|
|
|
color: #515151;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
+
|
|
|
#proginn-header.transparent .message-box-title,
|
|
|
#proginn-header.transparent .dashboard-title {
|
|
|
color: white;
|
|
|
}
|
|
|
+
|
|
|
#proginn-header.transparent .nickname {
|
|
|
color: white;
|
|
|
}
|
