|
@@ -2,59 +2,71 @@
|
|
|
<div>
|
|
|
<Head :headText="headText"></Head>
|
|
|
<div class="appealBox">
|
|
|
- <div class="left">
|
|
|
- <p class="title">可申诉的未知性策略</p>
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ <span>可申诉的未执行策略</span>
|
|
|
+ <span>{{data.length}}</span>
|
|
|
+ </div>
|
|
|
<div class="execute" v-for="(item,index) in data" :key="index">
|
|
|
<p class="date">{{item.date}}</p>
|
|
|
- <div class="card" v-for="(item2,index) in item.info" :key='index+"i"' @click="dump">
|
|
|
- <div class="time">执行时间:{{item2.time}}</div>
|
|
|
- <div class="advice">
|
|
|
- 策略建议 <span>冷机台数</span> {{item2.ad1}}大{{item2.ad2}}小<span>冷机出水温度</span> {{item2.temp1}}°C
|
|
|
- </div>
|
|
|
- <div class="advice">
|
|
|
- 实际执行 <span>冷机台数</span> {{item2.re1}}大{{item2.re2}}小<span>冷机出水温度</span> {{item2.temp2}}°C
|
|
|
- </div>
|
|
|
- <div class="remark">
|
|
|
- 备注:{{item2.remark}}
|
|
|
- </div>
|
|
|
- <div class="btn">
|
|
|
- <el-button size="mini">查看快照</el-button>
|
|
|
- <el-button size="mini" type="primary">申诉</el-button>
|
|
|
+ <div class="card-box">
|
|
|
+ <div class="card" v-for="(item2,index) in item.info" :key="index+'i'" @click="dump">
|
|
|
+ <div class="time">执行时间:{{item2.time}}</div>
|
|
|
+ <div class="advice">
|
|
|
+ <span>策略建议</span>
|
|
|
+ <span>冷机台数</span>
|
|
|
+ <span>{{item2.ad1}}大{{item2.ad2}}小</span>
|
|
|
+ <span>冷机出水温度</span>
|
|
|
+ <span>{{item2.temp1}}°C</span>
|
|
|
+ </div>
|
|
|
+ <div class="advice">
|
|
|
+ <span>实际执行</span>
|
|
|
+ <span>冷机台数</span>
|
|
|
+ <span>{{item2.re1}}大{{item2.re2}}小</span>
|
|
|
+ <span>冷机出水温度</span>
|
|
|
+ <span>{{item2.temp2}}°C</span>
|
|
|
+ </div>
|
|
|
+ <div class="remark">备注:{{item2.remark}}</div>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button size="mini">查看快照</el-button>
|
|
|
+ <el-button size="mini" type="primary">申诉</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="center">
|
|
|
- <p class='title'>审核中</p>
|
|
|
- <div class="card" v-for="(item,index) in review" :key='index+"w"' @click="dump">
|
|
|
+ <div class="title">
|
|
|
+ <span>审核中</span>
|
|
|
+ <span>{{review.length}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="card" v-for="(item,index) in review" :key="index" @click="dump">
|
|
|
<div class="time">
|
|
|
{{item.date}} {{item.title}}
|
|
|
- <span class="backout"><img src="../../assets/backout.png"/>撤销申请</span>
|
|
|
- </div>
|
|
|
- <div class="remark">
|
|
|
- 申请原因:{{item.reason}}
|
|
|
- </div>
|
|
|
- <div class="remark">
|
|
|
- {{item.advice}}
|
|
|
+ <span class="backout">
|
|
|
+ <img src="../../assets/backout.png" />撤销申请
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+ <div class="remark">申请原因:{{item.reason}}</div>
|
|
|
+ <div class="remark">{{item.advice}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <p class="title">审核完成/超时未审核</p>
|
|
|
- <div class="card" v-for="(item,index) in complete" :key='index+"w"' @click='dump'>
|
|
|
- <div class="remark">审批时间:{{item.time}}
|
|
|
- <span class="backout" v-if="item.sign==0">
|
|
|
- <img src="../../assets/completed.png"/> 申诉成功
|
|
|
- </span>
|
|
|
- <span class="backout" v-if="item.sign==1">
|
|
|
- <img src="../../assets/gray.png"/> 未申诉
|
|
|
- </span>
|
|
|
- <span class="backout" v-if="item.sign==2">
|
|
|
- <img src="../../assets/error.png"/> 申诉失败
|
|
|
- </span>
|
|
|
+ <div class="title">审核完成/超时未申诉</div>
|
|
|
+ <div class="card" v-for="(item,index) in complete" :key="index" @click="dump">
|
|
|
+ <div class="remark">
|
|
|
+ <div class="remark-left">审批时间:{{item.time}}</div>
|
|
|
+ <div class="remark-right">
|
|
|
+ <span :class="item.sign>5?'backout':(item.sign>2?'backout1':'backout2')">
|
|
|
+ <img :src="item.img" />
|
|
|
+ {{item.text}}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="time">
|
|
|
- {{item.date}} {{item.title}}
|
|
|
+ <span>{{item.time}}</span>
|
|
|
+ <span>{{item.date}}</span>
|
|
|
+ <span>{{item.title}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -67,275 +79,407 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
headText: "申诉审核",
|
|
|
- data:[
|
|
|
+ data: [
|
|
|
{
|
|
|
- date:'20202.01.13',
|
|
|
- info:[
|
|
|
+ date: "20202.01.13",
|
|
|
+ info: [
|
|
|
+ {
|
|
|
+ time: "08:30",
|
|
|
+ ad1: 1,
|
|
|
+ ad2: 1,
|
|
|
+ temp1: "8.0",
|
|
|
+ re1: 1,
|
|
|
+ re2: 0,
|
|
|
+ temp2: "10.0",
|
|
|
+ remark: "冷水温度过高,没有及时按策略执行"
|
|
|
+ },
|
|
|
{
|
|
|
- time:'08:30',
|
|
|
- ad1:1,
|
|
|
- ad2:1,
|
|
|
- temp1:'8.0',
|
|
|
- re1:1,
|
|
|
- re2:0,
|
|
|
- temp2:'10.0',
|
|
|
- remark:"冷水温度过高,没有及时按策略执行"
|
|
|
+ time: "08:30",
|
|
|
+ ad1: 1,
|
|
|
+ ad2: 1,
|
|
|
+ temp1: "8.0",
|
|
|
+ re1: 1,
|
|
|
+ re2: 0,
|
|
|
+ temp2: "10.0",
|
|
|
+ remark: "冷水温度过高,没有及时按策略执行"
|
|
|
},
|
|
|
{
|
|
|
- time:'08:30',
|
|
|
- ad1:1,
|
|
|
- ad2:1,
|
|
|
- temp1:'8.0',
|
|
|
- re1:1,
|
|
|
- re2:0,
|
|
|
- temp2:'10.0',
|
|
|
- remark:"冷水温度过高,没有及时按策略执行"
|
|
|
+ time: "08:30",
|
|
|
+ ad1: 1,
|
|
|
+ ad2: 1,
|
|
|
+ temp1: "8.0",
|
|
|
+ re1: 1,
|
|
|
+ re2: 0,
|
|
|
+ temp2: "10.0",
|
|
|
+ remark: "冷水温度过高,没有及时按策略执行"
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- {
|
|
|
- date:'20202.01.13',
|
|
|
- info:[
|
|
|
+ {
|
|
|
+ date: "20202.01.13",
|
|
|
+ info: [
|
|
|
{
|
|
|
- time:'08:30',
|
|
|
- ad1:1,
|
|
|
- ad2:1,
|
|
|
- temp1:'8.0',
|
|
|
- re1:1,
|
|
|
- re2:0,
|
|
|
- temp2:'10.0',
|
|
|
- remark:"冷水温度过高,没有及时按策略执行"
|
|
|
+ time: "08:30",
|
|
|
+ ad1: 1,
|
|
|
+ ad2: 1,
|
|
|
+ temp1: "8.0",
|
|
|
+ re1: 1,
|
|
|
+ re2: 0,
|
|
|
+ temp2: "10.0",
|
|
|
+ remark: "冷水温度过高,没有及时按策略执行"
|
|
|
},
|
|
|
{
|
|
|
- time:'08:30',
|
|
|
- ad1:1,
|
|
|
- ad2:1,
|
|
|
- temp1:'8.0',
|
|
|
- re1:1,
|
|
|
- re2:0,
|
|
|
- temp2:'10.0',
|
|
|
- remark:"冷水温度过高,没有及时按策略执行"
|
|
|
+ time: "08:30",
|
|
|
+ ad1: 1,
|
|
|
+ ad2: 1,
|
|
|
+ temp1: "8.0",
|
|
|
+ re1: 1,
|
|
|
+ re2: 0,
|
|
|
+ temp2: "10.0",
|
|
|
+ remark: "冷水温度过高,没有及时按策略执行"
|
|
|
}
|
|
|
]
|
|
|
- },
|
|
|
+ }
|
|
|
],
|
|
|
- review:[
|
|
|
+ review: [
|
|
|
{
|
|
|
- date:'2020.02.12 08:30',
|
|
|
- title:"策略未执行申诉",
|
|
|
- reason:'策略原因',
|
|
|
- advice:'冷水温度过高,没有及时按策略执行'
|
|
|
- },
|
|
|
- {
|
|
|
- date:'2020.02.12 08:30',
|
|
|
- title:"策略未执行申诉",
|
|
|
- reason:'策略原因',
|
|
|
- advice:'冷水温度过高,没有及时按策略执行'
|
|
|
+ date: "2020.02.12 08:30",
|
|
|
+ title: "策略未执行申诉",
|
|
|
+ reason: "策略原因",
|
|
|
+ advice: "冷水温度过高,没有及时按策略执行"
|
|
|
},
|
|
|
+ {
|
|
|
+ date: "2020.02.12 08:30",
|
|
|
+ title: "策略未执行申诉",
|
|
|
+ reason: "策略原因",
|
|
|
+ advice: "冷水温度过高,没有及时按策略执行"
|
|
|
+ }
|
|
|
],
|
|
|
- complete:[
|
|
|
+ complete: [
|
|
|
{
|
|
|
- date:'2020.02.12 08:30',
|
|
|
- title:"策略未执行申诉",
|
|
|
- time:'2020.01.30',
|
|
|
- sign:0
|
|
|
+ date: "08:30",
|
|
|
+ title: "策略未执行申诉",
|
|
|
+ time: "2020.01.30",
|
|
|
+ sign: 7,
|
|
|
+ img: require("../../assets/completed.png"),
|
|
|
+ text: "申诉成功"
|
|
|
},
|
|
|
{
|
|
|
- date:'2020.02.12 08:30',
|
|
|
- title:"策略未执行申诉",
|
|
|
- time:'2020.01.30',
|
|
|
- sign:1
|
|
|
+ date: "08:30",
|
|
|
+ title: "策略未执行申诉",
|
|
|
+ time: "2020.01.30",
|
|
|
+ sign: 5,
|
|
|
+ img: require("../../assets/gray.png"),
|
|
|
+ text: "未申诉"
|
|
|
},
|
|
|
{
|
|
|
- date:'2020.02.12 08:30',
|
|
|
- title:"策略未执行申诉",
|
|
|
- time:'2020.01.30',
|
|
|
- sign:2
|
|
|
- },
|
|
|
+ date: "08:30",
|
|
|
+ title: "策略未执行申诉",
|
|
|
+ time: "2020.01.30",
|
|
|
+ sign: 2,
|
|
|
+ img: require("../../assets/error.png"),
|
|
|
+ text: "申诉失败"
|
|
|
+ }
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
Head
|
|
|
},
|
|
|
- methods:{
|
|
|
- dump(){
|
|
|
- this.$router.push('detail')
|
|
|
+ methods: {
|
|
|
+ dump() {
|
|
|
+ this.$router.push("detail");
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.appealBox{
|
|
|
+.appealBox {
|
|
|
background: #fff;
|
|
|
display: flex;
|
|
|
- .left{
|
|
|
- width:30%;
|
|
|
- margin-right:36px;
|
|
|
- margin-left:24px;
|
|
|
- .title{
|
|
|
- font-size:16px;
|
|
|
- font-family:MicrosoftYaHeiSemibold;
|
|
|
- color:rgba(31,36,41,1);
|
|
|
- line-height:21px;
|
|
|
- }
|
|
|
- .execute{
|
|
|
- .date{
|
|
|
- font-size:12px;
|
|
|
- font-family:MicrosoftYaHei;
|
|
|
- color:rgba(141,147,153,1);
|
|
|
- line-height:16px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .card{
|
|
|
- width:415px;
|
|
|
- background:rgba(255,255,255,1);
|
|
|
- border-radius:4px;
|
|
|
- border:1px solid rgba(228,230,231,1);
|
|
|
- padding: 20px;
|
|
|
- margin-bottom:8px;
|
|
|
- cursor: pointer;
|
|
|
- .time{
|
|
|
- font-size:16px;
|
|
|
- font-family:PingFangSC-Regular,PingFang SC;
|
|
|
- font-weight:400;
|
|
|
- color:rgba(31,36,41,1);
|
|
|
- line-height:22px;
|
|
|
- }
|
|
|
- .advice{
|
|
|
- width:375px;
|
|
|
- height:40px;
|
|
|
- background:rgba(245,246,247,1);
|
|
|
- border-radius:1px;
|
|
|
- line-height:40px;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 4px;
|
|
|
- margin-top: 12px;
|
|
|
- padding-left: 16px;
|
|
|
- span{
|
|
|
- margin-left:36px;
|
|
|
- color:#8D9399;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- .remark{
|
|
|
- margin-top: 12px;
|
|
|
- color: #646C73;
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom:24px;
|
|
|
- }
|
|
|
- .btn{
|
|
|
- float: right;
|
|
|
- margin-right:20px;
|
|
|
- .el-button{
|
|
|
- width:80px;
|
|
|
- height:28px;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px;
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 420px;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: MicrosoftYaHeiSemibold;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background: rgba(245, 74, 69, 1);
|
|
|
+ border-radius: 9px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: ArialMT;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .execute {
|
|
|
+ .date {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(141, 147, 153, 1);
|
|
|
+ line-height: 16px;
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .card-box {
|
|
|
+ height: 500px;
|
|
|
+ overflow: scroll;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ .card {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(228, 230, 231, 1);
|
|
|
+ margin-top: 8px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ .time {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 22px;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .card:after{
|
|
|
- display:block;
|
|
|
- clear:both;
|
|
|
- content:"";
|
|
|
- visibility:
|
|
|
- hidden;height:0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .center{
|
|
|
- width:30%;
|
|
|
- margin-right:36px;
|
|
|
- margin-bottom:16px;
|
|
|
- .title{
|
|
|
- font-size:16px;
|
|
|
- font-family:MicrosoftYaHeiSemibold;
|
|
|
- color:rgba(31,36,41,1);
|
|
|
- line-height:21px;
|
|
|
- }
|
|
|
- .card{
|
|
|
- width:415px;
|
|
|
- background:rgba(255,255,255,1);
|
|
|
- border-radius:4px;
|
|
|
- border:1px solid rgba(228,230,231,1);
|
|
|
- padding:16px 20px;
|
|
|
- margin-bottom:8px;
|
|
|
- cursor: pointer;
|
|
|
- .time{
|
|
|
- font-size:16px;
|
|
|
- font-family:PingFangSC-Regular,PingFang SC;
|
|
|
- font-weight:400;
|
|
|
- color:rgba(31,36,41,1);
|
|
|
- line-height:22px;
|
|
|
- margin-top: 16px;
|
|
|
- .backout{
|
|
|
- font-size:14px;
|
|
|
- font-family:MicrosoftYaHei;
|
|
|
- color:rgba(0,145,255,1);
|
|
|
- line-height:22px;
|
|
|
- float: right;
|
|
|
- margin-right:20px;
|
|
|
- img{
|
|
|
+ .advice {
|
|
|
+ margin-top: 4px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(245, 246, 247, 1);
|
|
|
+ border-radius: 1px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 20px;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ }
|
|
|
+ span:nth-of-type(1),
|
|
|
+ span:nth-of-type(3),
|
|
|
+ span:nth-of-type(5) {
|
|
|
height: 22px;
|
|
|
- vertical-align: bottom;
|
|
|
- margin-right: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ }
|
|
|
+ span:nth-of-type(2),
|
|
|
+ span:nth-of-type(4) {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(141, 147, 153, 1);
|
|
|
+ }
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ width: 56px;
|
|
|
+ margin-right: 36px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(4) {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .remark {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .el-button {
|
|
|
+ width: 80px;
|
|
|
+ height: 28px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .remark{
|
|
|
- margin-top: 12px;
|
|
|
- color: #646C73;
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom:4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card:after {
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ content: "";
|
|
|
+ visibility: hidden;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 18px;
|
|
|
+ min-width: 410px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: MicrosoftYaHeiSemibold;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 18px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background: rgba(245, 74, 69, 1);
|
|
|
+ border-radius: 9px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: ArialMT;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ margin-top: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(228, 230, 231, 1);
|
|
|
+ padding: 16px 20px;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 22px;
|
|
|
+ .backout {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(0, 145, 255, 1);
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px;
|
|
|
+ img {
|
|
|
+ height: 15px;
|
|
|
+ width: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .right{
|
|
|
- .title{
|
|
|
- font-size:16px;
|
|
|
- font-family:MicrosoftYaHeiSemibold;
|
|
|
- color:rgba(31,36,41,1);
|
|
|
- line-height:21px;
|
|
|
- }
|
|
|
- .card{
|
|
|
- width:415px;
|
|
|
- background:rgba(255,255,255,1);
|
|
|
- border-radius:4px;
|
|
|
- border:1px solid rgba(228,230,231,1);
|
|
|
- padding:16px 20px;
|
|
|
- margin-bottom:8px;
|
|
|
- cursor: pointer;
|
|
|
- .time{
|
|
|
- font-size:16px;
|
|
|
- font-family:PingFangSC-Regular,PingFang SC;
|
|
|
- font-weight:400;
|
|
|
- color:rgba(31,36,41,1);
|
|
|
- line-height:22px;
|
|
|
+ }
|
|
|
+ .remark {
|
|
|
+ margin-top: 4px;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 310px;
|
|
|
+ .title {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(228, 230, 231, 1);
|
|
|
+ padding: 16px 20px;
|
|
|
+ .remark {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .remark-left {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
- .remark{
|
|
|
- margin-top: 16px;
|
|
|
- color: #646C73;
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom:16px;
|
|
|
- .backout{
|
|
|
- width:100px;
|
|
|
- height:24px;
|
|
|
- line-height: 24px;
|
|
|
- background:rgba(217,245,214,1);
|
|
|
- border-radius:12px;
|
|
|
- float: right;
|
|
|
- margin-right:20px;
|
|
|
- font-size:14px;
|
|
|
- font-family:MicrosoftYaHeiSemibold;
|
|
|
- color:#34C724;
|
|
|
- text-align: center;
|
|
|
- img{
|
|
|
- width:14px;
|
|
|
- height: 14px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
+ .remark-right {
|
|
|
+ height: 24px;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHeiSemibold;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .backout {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 14px;
|
|
|
+ background: rgba(217, 245, 214, 1);
|
|
|
+ color: rgba(52, 199, 36, 1);
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ .backout1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 14px;
|
|
|
+ background: rgba(239, 240, 241, 1);
|
|
|
+ color: rgba(141, 147, 153, 1);
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ .backout2 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 14px;
|
|
|
+ background: rgba(253, 227, 226, 1);
|
|
|
+ color: rgba(245, 78, 69, 1);
|
|
|
+ border-radius: 12px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: rgba(248, 249, 250, 1);
|
|
|
+ border-radius: 1px;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|