|
|
@@ -1,78 +1,86 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <Head :headText="headText"></Head>
|
|
|
- <div class="appealBox">
|
|
|
- <div class="left">
|
|
|
- <div class="title">
|
|
|
- <span class="Micbold">可申诉的未执行策略</span>
|
|
|
- <span v-if="appealsArr.length>0">{{appealsArr.length}}</span>
|
|
|
- </div>
|
|
|
- <div class="execute">
|
|
|
+ <div class="appealBoxContainer">
|
|
|
+ <div class="top">
|
|
|
+ <Head :headText="headText"></Head>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="appealBox">
|
|
|
+ <div class="appealBoxLeft">
|
|
|
+ <div class="title">
|
|
|
+ <span class="Micbold">可申诉的未执行策略</span>
|
|
|
+ <span v-if="appealsArr.length>0">{{appealsArr.length}}</span>
|
|
|
+ </div>
|
|
|
<p class="date MicrYaHei">{{appealsDate?formatterStr(appealsDate):'--'}}</p>
|
|
|
- <div class="card-box">
|
|
|
- <div class="card" v-for="(item,index) in appealsArr" :key="index+'i'">
|
|
|
- <div class="time">执行时间：{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
|
|
|
- <div class="advice MicrYaHei">
|
|
|
- <span>策略建议</span>
|
|
|
- <span>冷机台数</span>
|
|
|
- <span>{{item.recommend.chillerNumSetL||'--'}}大{{item.recommend.chillerNumSetS||'--'}}小</span>
|
|
|
- <span>冷机出水温度</span>
|
|
|
- <span>{{item.real?item.real.chillWaterOutTempSet:'--'}}°C</span>
|
|
|
- </div>
|
|
|
- <div class="advice">
|
|
|
- <span>实际执行</span>
|
|
|
- <span>冷机台数</span>
|
|
|
- <span>{{item.real?item.real.chillerNumSetLOrg:'--'}}大{{item.real?item.real.chillerNumSetSOrg:'--'}}小</span>
|
|
|
- <span>冷机出水温度</span>
|
|
|
- <span>{{item.real?item.real.chillWaterOutTempSetOrg:'--'}}°C</span>
|
|
|
- </div>
|
|
|
- <div class="remark">备注：{{item.remarks||'--'}}</div>
|
|
|
- <div class="btn">
|
|
|
- <el-button size="mini" @click="viewSnapshots = true">查看快照</el-button>
|
|
|
- <el-button size="mini" type="primary" @click="menu(item)">申诉</el-button>
|
|
|
+ <div class="left">
|
|
|
+ <div class="execute">
|
|
|
+ <div class="card" v-for="(item,index) in appealsArr" :key="index+'i'">
|
|
|
+ <div class="time">执行时间：{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
|
|
|
+ <div class="advice MicrYaHei">
|
|
|
+ <span>策略建议</span>
|
|
|
+ <span>冷机台数</span>
|
|
|
+ <span>{{item.recommend.chillerNumSetL||'--'}}大{{item.recommend.chillerNumSetS||'--'}}小</span>
|
|
|
+ <span>冷机出水温度</span>
|
|
|
+ <span>{{item.real?item.real.chillWaterOutTempSet:'--'}}°C</span>
|
|
|
+ </div>
|
|
|
+ <div class="advice">
|
|
|
+ <span>实际执行</span>
|
|
|
+ <span>冷机台数</span>
|
|
|
+ <span>{{item.real?item.real.chillerNumSetLOrg:'--'}}大{{item.real?item.real.chillerNumSetSOrg:'--'}}小</span>
|
|
|
+ <span>冷机出水温度</span>
|
|
|
+ <span>{{item.real?item.real.chillWaterOutTempSetOrg:'--'}}°C</span>
|
|
|
+ </div>
|
|
|
+ <div class="remark">备注：{{item.remarks||'--'}}</div>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button size="mini" @click="viewSnapshots = true">查看快照</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="menu(item)">申诉</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
- <div class="title">
|
|
|
- <span class="Micbold">审核中</span>
|
|
|
- <span v-if="InAuditArr.length>0">{{InAuditArr.length}}</span>
|
|
|
- </div>
|
|
|
- <div class="card" v-for="(item,index) in InAuditArr" :key="index">
|
|
|
- <div class="time">
|
|
|
- <span class="time-box">
|
|
|
- <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
|
|
|
- <span>{{item.title||'--'}}</span>
|
|
|
- </span>
|
|
|
- <span class="backout" @click="backoutClick(item,'revoke')">
|
|
|
- <img src="../../assets/backout.png" />撤销申请
|
|
|
- </span>
|
|
|
+ <div class="appealBoxCenter">
|
|
|
+ <div class="title">
|
|
|
+ <span class="Micbold">审核中</span>
|
|
|
+ <span v-if="InAuditArr.length>0">{{InAuditArr.length}}</span>
|
|
|
</div>
|
|
|
- <div class="remark">申请原因：{{item.reasonType||'--'}}</div>
|
|
|
- <div class="remark">{{item.reason||'--'}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="title Micbold">审核完成/超时未申诉</div>
|
|
|
- <div class="card" v-for="(item,index) in auditCompletedArr" :key="index">
|
|
|
- <div class="remark">
|
|
|
- <div class="remark-left">审批时间：{{item.updateTime?formatter1(item.updateTime):'--'}}</div>
|
|
|
- <div class="remark-right Micbold">
|
|
|
- <span
|
|
|
- :class="item.status=='303'?'backout':(item.status=='306'?'backout1':'backout2')"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="item.status=='303'?require('../../assets/completed.png'):(item.status=='306'?require('../../assets/gray.png'):require('../../assets/error.png'))"
|
|
|
- />
|
|
|
- {{item.status=='303'?'申诉成功':(item.status=='306'?'未申诉':'申诉失败')}}
|
|
|
- </span>
|
|
|
+ <div class="center">
|
|
|
+ <div class="card" v-for="(item,index) in InAuditArr" :key="index">
|
|
|
+ <div class="time">
|
|
|
+ <span class="time-box">
|
|
|
+ <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
|
|
|
+ <span>{{item.title||'--'}}</span>
|
|
|
+ </span>
|
|
|
+ <span class="backout" @click="backoutClick(item,'revoke')">
|
|
|
+ <img src="../../assets/backout.png" />撤销申请
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="remark">申请原因：{{item.reasonType||'--'}}</div>
|
|
|
+ <div class="remark">{{item.reason||'--'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="time">
|
|
|
- <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
|
|
|
- <span>{{item.title||'--'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="appealBoxRight">
|
|
|
+ <div class="title Micbold">审核完成/超时未申诉</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="card" v-for="(item,index) in auditCompletedArr" :key="index">
|
|
|
+ <div class="remark">
|
|
|
+ <div class="remark-left">审批时间：{{item.updateTime?formatter1(item.updateTime):'--'}}</div>
|
|
|
+ <div class="remark-right Micbold">
|
|
|
+ <span
|
|
|
+ :class="item.status=='303'?'backout':(item.status=='306'?'backout1':'backout2')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="item.status=='303'?require('../../assets/completed.png'):(item.status=='306'?require('../../assets/gray.png'):require('../../assets/error.png'))"
|
|
|
+ />
|
|
|
+ {{item.status=='303'?'申诉成功':(item.status=='306'?'未申诉':'申诉失败')}}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
|
|
|
+ <span>{{item.title||'--'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -91,7 +99,11 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import Head from "../main/index";
|
|
|
-import { queryWorkflow, queryChillerExecuteInfo } from "@/api/appeal/appeal.js";
|
|
|
+import {
|
|
|
+ queryWorkflow,
|
|
|
+ queryChillerExecuteInfo,
|
|
|
+ querySimpleInfo
|
|
|
+} from "@/api/appeal/appeal.js";
|
|
|
import EvSnapshotsDialog from "../evaluate/evSnapshotsDialog";
|
|
|
import { updateWorkflow } from "@/api/audit/audit.js";
|
|
|
|
|
|
@@ -249,304 +261,334 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.appealBox {
|
|
|
- background: #fff;
|
|
|
+.appealBoxContainer {
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20px;
|
|
|
- .left {
|
|
|
+ .top {
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
flex: 1;
|
|
|
- min-width: 480px;
|
|
|
- .title {
|
|
|
+ .appealBox {
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- span:nth-of-type(1) {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- 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;
|
|
|
- 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;
|
|
|
- cursor: pointer;
|
|
|
- .time {
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 24px;
|
|
|
+ .appealBoxLeft {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // overflow: scroll;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 116px;
|
|
|
+ span:nth-of-type(1) {
|
|
|
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;
|
|
|
+ line-height: 21px;
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
- .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:nth-of-type(1),
|
|
|
- span:nth-of-type(3),
|
|
|
- span:nth-of-type(5) {
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- }
|
|
|
- span:nth-of-type(3) {
|
|
|
- width: 115px;
|
|
|
- }
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
}
|
|
|
- .btn {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- .el-button {
|
|
|
- width: 80px;
|
|
|
- height: 28px;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(141, 147, 153, 1);
|
|
|
+ line-height: 16px;
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ overflow: scroll;
|
|
|
+ .execute {
|
|
|
+ .card {
|
|
|
+ min-width: 445px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(228, 230, 231, 1);
|
|
|
+ margin-top: 8px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .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:nth-of-type(1),
|
|
|
+ span:nth-of-type(3),
|
|
|
+ span:nth-of-type(5) {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ }
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ width: 115px;
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- 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:after {
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ content: "";
|
|
|
+ visibility: hidden;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
- .time-box {
|
|
|
+ .appealBoxCenter {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 24px;
|
|
|
+ // overflow: scroll;
|
|
|
+ // height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .title {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding-top: 116px;
|
|
|
span:nth-of-type(1) {
|
|
|
- width: 140px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
- }
|
|
|
- .backout {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
- color: rgba(0, 145, 255, 1);
|
|
|
- float: right;
|
|
|
- margin-right: 20px;
|
|
|
- display: none;
|
|
|
- img {
|
|
|
- height: 15px;
|
|
|
+ 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);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .card:hover {
|
|
|
- border: 1px solid rgba(0, 145, 255, 1);
|
|
|
- }
|
|
|
- .card:hover .backout {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
+ .center {
|
|
|
+ margin: 0 18px;
|
|
|
+ min-width: 410px;
|
|
|
+ flex: 1;
|
|
|
+ overflow: scroll;
|
|
|
+ .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;
|
|
|
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- min-width: 310px;
|
|
|
- max-height: 900px;
|
|
|
- overflow: scroll;
|
|
|
- .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;
|
|
|
- cursor: pointer;
|
|
|
- .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-right {
|
|
|
- height: 24px;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- 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;
|
|
|
+ .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;
|
|
|
+ .time-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .backout {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(0, 145, 255, 1);
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px;
|
|
|
+ display: none;
|
|
|
+ img {
|
|
|
+ height: 15px;
|
|
|
+ width: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
- .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;
|
|
|
+ .card:hover {
|
|
|
+ border: 1px solid rgba(0, 145, 255, 1);
|
|
|
}
|
|
|
- .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;
|
|
|
+ .card:hover .backout {
|
|
|
+ display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .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;
|
|
|
+ .appealBoxRight {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .title {
|
|
|
+ padding-top: 116px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ overflow: scroll;
|
|
|
+ min-width: 310px;
|
|
|
+ .card {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(228, 230, 231, 1);
|
|
|
+ padding: 16px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ .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-right {
|
|
|
+ height: 24px;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
Guoxiaohuan