708 lines
17 KiB
Vue
708 lines
17 KiB
Vue
|
<template>
|
|||
|
<div class="sidebar-container">
|
|||
|
|
<div class="sidebarTop">
|
|||
|
|
<div class="sidebarHeader">
|
|||
|
|
<img
|
|||
|
|
:src="
|
|||
|
|
userInfo.headPath ? userInfo.headPath : userInfo.countryCircularIcon
|
|||
|
|
"
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="nameCountry">
|
|||
|
|
<div class="username">{{ userInfo.memberName }}</div>
|
|||
|
|
<img :src="userInfo.countrySquareIcon" alt="" />
|
|||
|
|
</div>
|
|||
|
|
<!-- 如果是0表示没有奖衔 只显示等级徽章!-->
|
|||
|
|
<div class="gradeClass">
|
|||
|
|
<img
|
|||
|
|
@error="defaultSrc"
|
|||
|
|
v-if="userInfo.gradeIcon || defaultSrc == true"
|
|||
|
|
@click="goRouter(1)"
|
|||
|
|
:src="userInfo.gradeIcon"
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="honor_wrapper">
|
|||
|
|
<div class="honor1">
|
|||
|
|
<div class="honor-title-wrapper">
|
|||
|
|
<div>荣誉奖衔</div>
|
|||
|
|
<div class="honor-title">{{ userInfo.pkAwardsVal }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--! 用户卡片信息 -->
|
|||
|
|
<div class="awardscard">
|
|||
|
|
<div class="user-cards" @click="clickTap">
|
|||
|
|
<div class="user-cards-left">
|
|||
|
|
<div class="progress-wrapper">
|
|||
|
|
<div class="progress-wrapper__label">昨日业绩</div>
|
|||
|
|
<div
|
|||
|
|
:class="
|
|||
|
|
awards.aNewPv != 0 && awards.bNewPv != 0
|
|||
|
|
? 'schedule1'
|
|||
|
|
: 'schedule'
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="current-schedule"
|
|||
|
|
:style="{
|
|||
|
|
width: yesPercent(awards.aNewPv, awards.bNewPv),
|
|||
|
|
}"
|
|||
|
|
></div>
|
|||
|
|
<div class="cha">
|
|||
|
|
左区 {{ awards.aNewPv }}万/右区 {{ awards.bNewPv }}万
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-wrapper">
|
|||
|
|
<div class="progress-wrapper__label">当月业绩</div>
|
|||
|
|
<div
|
|||
|
|
:class="
|
|||
|
|
awards.aMonthPv != 0 && awards.bMonthPv != 0
|
|||
|
|
? 'schedule1'
|
|||
|
|
: 'schedule'
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="current-schedule"
|
|||
|
|
:style="{
|
|||
|
|
width: yesPercent(awards.aMonthPv, awards.bMonthPv),
|
|||
|
|
}"
|
|||
|
|
></div>
|
|||
|
|
<div class="cha">
|
|||
|
|
左区 {{ awards.aMonthPv }}万/右区 {{ awards.bMonthPv }}万
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-wrapper">
|
|||
|
|
<div class="progress-wrapper__label">历史业绩</div>
|
|||
|
|
<div
|
|||
|
|
:class="
|
|||
|
|
awards.aSumPv != 0 && awards.bSumPv != 0
|
|||
|
|
? 'schedule1'
|
|||
|
|
: 'schedule'
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="current-schedule"
|
|||
|
|
:style="{
|
|||
|
|
width: yesPercent(awards.aSumPv, awards.bSumPv),
|
|||
|
|
}"
|
|||
|
|
></div>
|
|||
|
|
<div class="cha">
|
|||
|
|
左区 {{ awards.aSumPv }}万/右区 {{ awards.bSumPv }}万
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 会员有效!-->
|
|||
|
|
<div
|
|||
|
|
class="create-time"
|
|||
|
|
v-if="userInfo.pkCountry == 1 && userInfo.expireDate"
|
|||
|
|
>
|
|||
|
|
有效期：{{ userInfo.expireDate }}
|
|||
|
|
</div>
|
|||
|
|
<!-- 注册时间!-->
|
|||
|
|
<div class="create-time">注册时间：{{ userInfo.registerTime }}</div>
|
|||
|
|
<div class="countDown">
|
|||
|
|
<div class="divs">{{ userDay }}</div>
|
|||
|
|
<div class="margin-s">天</div>
|
|||
|
|
<div class="divs">{{ userHr }}</div>
|
|||
|
|
<div class="margin-s">时</div>
|
|||
|
|
<div class="divs">{{ userMin }}</div>
|
|||
|
|
<div class="margin-s">分</div>
|
|||
|
|
<div class="divs">{{ userSec }}</div>
|
|||
|
|
<div class="margin-s">秒</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 站内信 -->
|
|||
|
|
<div class="znBox">
|
|||
|
|
<div class="zntitle">站内信</div>
|
|||
|
|
<div class="znCenter">
|
|||
|
|
<!-- <div class="znrightword" @click="goMore(2)">查看更多</div>-->
|
|||
|
|
<div class="znContent">
|
|||
|
|
<vue-seamless-scroll
|
|||
|
|
v-if="listData.length > 0"
|
|||
|
|
:class-option="optionSingleHeightTime"
|
|||
|
|
:data="listData"
|
|||
|
|
class="seamless-warp"
|
|||
|
|
>
|
|||
|
|
<ul class="item">
|
|||
|
|
<li v-for="(item, index) in listData" :key="index">
|
|||
|
|
<span class="title" v-text="item.title"></span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</vue-seamless-scroll>
|
|||
|
|
|
|||
|
|
<el-empty
|
|||
|
|
v-else
|
|||
|
|
:image-size="100"
|
|||
|
|
description="暂无站内信"
|
|||
|
|
></el-empty>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-if="listData.length > 0"
|
|||
|
|
class="more"
|
|||
|
|
@click="goMore(2)"
|
|||
|
|
style="margin: 20px 0 0 0"
|
|||
|
|
>
|
|||
|
|
查看更多>>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as sid from "@/api/sidebaruserinfo.js";
|
|||
|
|
import { mapGetters } from "vuex";
|
|||
|
|
import user from "@/store/modules/user";
|
|||
|
|
import { repurchase } from "@/api";
|
|||
|
|
export default {
|
|||
|
|
name: "sidebarUserInfo",
|
|||
|
|
computed: {
|
|||
|
|
user() {
|
|||
|
|
return user;
|
|||
|
|
},
|
|||
|
|
...mapGetters(["userInfo"]),
|
|||
|
|
|
|||
|
|
optionSingleHeightTime() {
|
|||
|
|
return {
|
|||
|
|
step: 0.6, // 数值越大速度滚动越快
|
|||
|
|
limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
|
|||
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|||
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|||
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|||
|
|
singleHeight: 14, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|||
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|||
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
countTime: 11183423,
|
|||
|
|
userDay: 0,
|
|||
|
|
userHr: 0,
|
|||
|
|
awards: {},
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 5,
|
|||
|
|
},
|
|||
|
|
userMin: 0,
|
|||
|
|
userSec: 0,
|
|||
|
|
_interval: "",
|
|||
|
|
toLiveBtn: "",
|
|||
|
|
isHandImg: true,
|
|||
|
|
listData: [], //站内信列表
|
|||
|
|
feedbackTypeList: [], //意见反馈类型列表
|
|||
|
|
feedbackForm: {
|
|||
|
|
type: "",
|
|||
|
|
idea: "",
|
|||
|
|
},
|
|||
|
|
ksList: [],
|
|||
|
|
userPrice: 0,
|
|||
|
|
awardPrice: 0,
|
|||
|
|
awardsList: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getData();
|
|||
|
|
this.countdown();
|
|||
|
|
this.getUserAwards();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
beforeDestroy() {
|
|||
|
|
clearInterval(this._interval);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
clickTap() {
|
|||
|
|
this.$router.push({
|
|||
|
|
path: "/personal",
|
|||
|
|
query: {
|
|||
|
|
id: 5,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getUserKs() {
|
|||
|
|
repurchase({ wallType: this.remIndex1 }).then((res) => {
|
|||
|
|
this.ksList = res.rows;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
defaultSrc() {
|
|||
|
|
this.isHandImg = false;
|
|||
|
|
},
|
|||
|
|
yesPercent(left, right) {
|
|||
|
|
left = parseFloat(left);
|
|||
|
|
right = parseFloat(right);
|
|||
|
|
if (isNaN(left) || isNaN(right)) {
|
|||
|
|
return "-";
|
|||
|
|
}
|
|||
|
|
return right + left == 0
|
|||
|
|
? "0%"
|
|||
|
|
: Math.round((left / (right + left)) * 10000) / 100.0 + "%";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 倒计时事件
|
|||
|
|
countdown() {
|
|||
|
|
const that = this;
|
|||
|
|
that._interval = setInterval(() => {
|
|||
|
|
let time = new Date(this.userInfo.registerTime).getTime() / 1000;
|
|||
|
|
let time1 = new Date().getTime() / 1000;
|
|||
|
|
let time2 = parseInt(time1 - time);
|
|||
|
|
that.countTime = time2;
|
|||
|
|
that.countTime++;
|
|||
|
|
let day = parseInt(that.countTime / 60 / 60 / 24);
|
|||
|
|
let hr = parseInt((that.countTime / 60 / 60) % 24);
|
|||
|
|
let min = parseInt((that.countTime / 60) % 60);
|
|||
|
|
let sec = parseInt(that.countTime % 60);
|
|||
|
|
day = day > 9 ? day : "0" + day;
|
|||
|
|
hr = hr > 9 ? hr : "0" + hr;
|
|||
|
|
min = min > 9 ? min : "0" + min;
|
|||
|
|
sec = sec > 9 ? sec : "0" + sec;
|
|||
|
|
// that.toLiveBtn = `${day}天${hr}时${min}分${sec}秒`
|
|||
|
|
that.userDay = day;
|
|||
|
|
that.userHr = hr;
|
|||
|
|
that.userMin = min;
|
|||
|
|
that.userSec = sec;
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
//跳转详情页
|
|||
|
|
goMore(index) {
|
|||
|
|
//1公告 2站内信
|
|||
|
|
this.$router.push({
|
|||
|
|
path: "/noticeLists",
|
|||
|
|
query: { index: index },
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//提交意见反馈
|
|||
|
|
submitFeed(formName) {
|
|||
|
|
if (this.feedbackForm.type == "" || this.feedbackForm.type == undefined) {
|
|||
|
|
this.$message({
|
|||
|
|
message: "请选择反馈类型",
|
|||
|
|
type: "error",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.feedbackForm.idea == "" || this.feedbackForm.idea == undefined) {
|
|||
|
|
this.$message({
|
|||
|
|
message: "请输入反馈内容",
|
|||
|
|
type: "error",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.$refs[formName].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.$confirm("是否确认提交意见反馈" + "?", "", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
cancelButtonText: "取消",
|
|||
|
|
type: "warning",
|
|||
|
|
}).then((_) => {
|
|||
|
|
sid.saveFeedBack(this.feedbackForm).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.$message({
|
|||
|
|
message: "提交成功",
|
|||
|
|
type: "success",
|
|||
|
|
});
|
|||
|
|
this.$refs.feedbackForm.clearValidate();
|
|||
|
|
this.getFeedBackList();
|
|||
|
|
this.feedbackForm = { type: "", idea: "" };
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取用户真实奖衔
|
|||
|
|
getUserAwards() {
|
|||
|
|
sid.getUserAwards().then((res) => {
|
|||
|
|
this.awards = res.data;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getData() {
|
|||
|
|
//functionType 公告1 站内信2
|
|||
|
|
sid.getNoticeList({ functionType: 2 }).then((res) => {
|
|||
|
|
this.listData = res.rows;
|
|||
|
|
});
|
|||
|
|
sid.getFeedbackType().then((res) => {
|
|||
|
|
this.feedbackTypeList = res.data;
|
|||
|
|
});
|
|||
|
|
sid.memberAwards().then((res) => {
|
|||
|
|
this.awardsList = res.data;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
goRouter(index) {
|
|||
|
|
//1等级2奖衔
|
|||
|
|
this.$router.push({
|
|||
|
|
path: "/roadtoGrowth",
|
|||
|
|
query: { index: index },
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.avatar {
|
|||
|
|
img {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.user-name {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 18px;
|
|||
|
|
//width: 100px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.styleColors0 {
|
|||
|
|
color: #f64e49;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.styleColors1 {
|
|||
|
|
color: #85b9fe;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.styleColors2 {
|
|||
|
|
color: #6be8b0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-con {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 5px 0 15px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more {
|
|||
|
|
color: #41b2ff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-input--suffix .el-input__inner {
|
|||
|
|
background: #fff !important;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-input--suffix .el-input__inner {
|
|||
|
|
background: #fff !important;
|
|||
|
|
}
|
|||
|
|
.seamless-warp {
|
|||
|
|
//height: 196px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
line-height: 14px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 12px;
|
|||
|
|
.item {
|
|||
|
|
margin: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-left: -40px;
|
|||
|
|
li {
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sidebar-container {
|
|||
|
|
width: 380px;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
background: #ffffff;
|
|||
|
|
box-shadow: 5px 5px 20px 0px rgba(233, 233, 233, 0.5);
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
opacity: 1;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
.sidebarTop {
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
.sidebarHeader {
|
|||
|
|
img {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.nameCountry {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
.username {
|
|||
|
|
font-size: 22px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
}
|
|||
|
|
img {
|
|||
|
|
width: 39px;
|
|||
|
|
height: 26px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.gradeClass {
|
|||
|
|
display: flex;
|
|||
|
|
width: 200px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
img {
|
|||
|
|
width: 55px;
|
|||
|
|
//height: 45px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.create-time {
|
|||
|
|
margin: 10px auto 10px auto;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.countDown {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 0 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
.margin-s {
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
.divs {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
//width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 8px 8px 8px 8px;
|
|||
|
|
opacity: 1;
|
|||
|
|
border: 1px solid #979797;
|
|||
|
|
color: #c8161d;
|
|||
|
|
font-size: 18px;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.celebrity {
|
|||
|
|
text-align: center;
|
|||
|
|
.celebrity-content {
|
|||
|
|
display: flex;
|
|||
|
|
height: 180px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-left: -40px;
|
|||
|
|
// height: 135px;
|
|||
|
|
//padding: 0 30px 0 0;
|
|||
|
|
justify-content: center;
|
|||
|
|
//align-items: center;
|
|||
|
|
.celebrity-list {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
img {
|
|||
|
|
width: 66px;
|
|||
|
|
height: 66px;
|
|||
|
|
margin-left: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin: 30px 0 15px 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.awardscard {
|
|||
|
|
width: 346px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
background: url("~@/assets/images/id-card-bg.png") no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
//background: linear-gradient(180deg, #f8d869 0%, #f48b1f 100%);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
position: relative;
|
|||
|
|
.user-cards {
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
padding: 16px 10px;
|
|||
|
|
// position: absolute;
|
|||
|
|
z-index: 1;
|
|||
|
|
// display: flex;
|
|||
|
|
.user-card-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
img {
|
|||
|
|
width: 145px;
|
|||
|
|
height: 145px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.user-cards-left {
|
|||
|
|
.rank {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
margin: 5px 10px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.lines {
|
|||
|
|
height: 1px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
.experience {
|
|||
|
|
font-size: 8px;
|
|||
|
|
margin: 15px 0 0 0px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 0px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
color: #fff;
|
|||
|
|
span {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.ju_text1 {
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ju_text2 {
|
|||
|
|
color: #fb3024;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 12px;
|
|||
|
|
padding: 0 3px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.schedule {
|
|||
|
|
// width: 149px;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 16px;
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
margin: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.schedule1 {
|
|||
|
|
// width: 149px;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 16px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
margin: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.current-schedule {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 30%;
|
|||
|
|
background: #fea43c;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
}
|
|||
|
|
.progress-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
.progress-wrapper:first-child {
|
|||
|
|
margin-top: 0px;
|
|||
|
|
}
|
|||
|
|
.progress-wrapper__label {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.cha {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
font-size: 12px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.state {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #fff;
|
|||
|
|
margin: 10px 0 0 0px;
|
|||
|
|
span {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.znBox {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
border-top: 5px solid rgba(0, 0, 0, 0.05);
|
|||
|
|
// border-bottom: 5px solid rgba(0, 0, 0, 0.05);
|
|||
|
|
padding: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
.zntitle {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.znCenter {
|
|||
|
|
.znContent {
|
|||
|
|
height: 220px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yt1 {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
.hisImg {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.honor_wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
.honor1 {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 10px 0 0px 0;
|
|||
|
|
|
|||
|
|
.honor-title-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.honor-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .ideaselect .el-input__inner {
|
|||
|
|
width: 260px;
|
|||
|
|
border-radius: 6px 6px 6px 6px;
|
|||
|
|
//background: rgba(0, 0, 0, 0.05) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .ideainput .el-textarea__inner {
|
|||
|
|
width: 260px;
|
|||
|
|
height: 160px;
|
|||
|
|
border-radius: 10px 10px 10px 10px;
|
|||
|
|
//background: rgba(0, 0, 0, 0.05) !important;
|
|||
|
|
}
|
|||
|
|
</style>
|