|
@@ -1,473 +1,542 @@
|
|
|
<template>
|
|
|
- <div class="appealBox">
|
|
|
- <div class="top">
|
|
|
- <Head :headText="headText"></Head>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <div class="appealContainer">
|
|
|
- <div class="appeal-left">
|
|
|
- <div class="appeal-left-top">
|
|
|
- <span class="appeal-left-top-span Micbold">待审核</span>
|
|
|
- <el-select v-model="value" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in appealOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="appeal-left-box">
|
|
|
- <p class="date MicrYaHei">{{'--'}}</p>
|
|
|
- <div
|
|
|
- class="appeal-left-div"
|
|
|
- v-for="(item,index) in auditArr"
|
|
|
- :key="index"
|
|
|
- @click="appealClick(item,index)"
|
|
|
- :class="{border:index==isactive}"
|
|
|
- >
|
|
|
- <div class="time">
|
|
|
- <span>{{item.pushTime?formatter(item.pushTime):'--'}} {{item.title||'--'}}</span>
|
|
|
- <span>
|
|
|
- <img src="../../assets/tp.png" alt />
|
|
|
- <span v-if="item.pics">{{item.pics.length}}</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <span>申请人:{{'--'}}</span>
|
|
|
- <span>申请时间:{{item.updateTime?formatter1(item.updateTime):'--'}}</span>
|
|
|
- <span>申请原因:{{item.reasonType||'--'}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class='appealBox'>
|
|
|
+ <div class='top'>
|
|
|
+ <Head :headText='headText'></Head>
|
|
|
</div>
|
|
|
- <div class="appeal-right">
|
|
|
- <div class="title Micbold">未执行申诉单</div>
|
|
|
- <div class="detailContainer">
|
|
|
- <div class="nav MicrYaHei">
|
|
|
- <span>项目名称:{{'--'}}</span>
|
|
|
- <span>申请人:{{auditObj.applyUser||'--'}}</span>
|
|
|
- <span>申请时间:{{auditObj.updateTime?formatter1(auditObj.updateTime):'--'}}</span>
|
|
|
- </div>
|
|
|
- <div class="cont1 MicrYaHei">申诉未执行指令:{{auditObj.title||'--'}}</div>
|
|
|
- <div class="cont2">
|
|
|
- <audit-table :tableList="tableList"></audit-table>
|
|
|
- </div>
|
|
|
- <div class="cont3">
|
|
|
- <span class="Micbold">策略评价</span>
|
|
|
- <span class="MicrYaHei">{{auditObj.judgement||'--'}}</span>
|
|
|
- </div>
|
|
|
- <div class="cont4">
|
|
|
- <span class="Micbold">申请原因</span>
|
|
|
- <span>
|
|
|
- <el-select size="mini" v-model="auditObj.reasonType" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <textarea placeholder="填写申请原因" style="color:#606266;" v-model="auditObj.reason"></textarea>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <upload-img :souseArr="auditObj.pics || []"></upload-img>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="opinion">
|
|
|
- <span class="opinion-title Micbold">审批意见</span>
|
|
|
- <div class="opinion-bottom MicrYaHei">
|
|
|
- <input type="text" v-model="comment" :class="{isRed: isRed}" @blur="check"/>
|
|
|
- <span @click="approvalOpinion(auditObj,'reject')">不同意</span>
|
|
|
- <span @click="approvalOpinion(auditObj,'approve')">同意</span>
|
|
|
+ <div class='bottom'>
|
|
|
+ <div class='appealContainer'>
|
|
|
+ <div class='appeal-left'>
|
|
|
+ <div class='appeal-left-top'>
|
|
|
+ <span class='appeal-left-top-span Micbold'>待审核</span>
|
|
|
+ <el-select v-model='value' placeholder='请选择'>
|
|
|
+ <el-option v-for='item in appealOptions' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class='appeal-left-box'>
|
|
|
+ <div v-for='(item1,index) in auditArr' :key='index'>
|
|
|
+ <div v-if='item1.date'>
|
|
|
+ <p class='date MicrYaHei' v-if='item1.date==today'>{{formatterStr(item1.date)+' 今天'}}</p>
|
|
|
+ <p v-if='item1.date==yesterday' class='date MicrYaHei'>{{formatterStr(item1.date)+' 昨天'}}</p>
|
|
|
+ <p class='date MicrYaHei' v-if='item1.date!=today&&item1.date!=yesterday'>
|
|
|
+ {{formatterStr(item1.date)+' '}}
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==0'>星期日</span>
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==1'>星期一</span>
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==2'>星期二</span>
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==3'>星期三</span>
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==4'>星期四</span>
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==5'>星期五</span>
|
|
|
+ <span v-if='formatter3(formatters(item1.date))==6'>星期六</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class='appeal-left-div'
|
|
|
+ v-for='(item,index) in item1.children'
|
|
|
+ :key='index'
|
|
|
+ @click='appealClick(item,index)'
|
|
|
+ :class='{border:index==isactive}'
|
|
|
+ >
|
|
|
+ <div class='time'>
|
|
|
+ <span>{{item.pushTime?formatter(item.pushTime):'--'}} {{item.title||'--'}}</span>
|
|
|
+ <span>
|
|
|
+ <img src='../../assets/tp.png' alt />
|
|
|
+ <span v-if='item.pics'>{{item.pics.length}}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class='content'>
|
|
|
+ <span>申请人:{{'--'}}</span>
|
|
|
+ <span>申请时间:{{item.updateTime?formatter1(item.updateTime):'--'}}</span>
|
|
|
+ <span>申请原因:{{item.reasonType||'--'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='appeal-right'>
|
|
|
+ <div class='title Micbold'>未执行申诉单</div>
|
|
|
+ <div class='detailContainer'>
|
|
|
+ <div class='nav MicrYaHei'>
|
|
|
+ <span>项目名称:{{'--'}}</span>
|
|
|
+ <span>申请人:{{auditObj.applyUser||'--'}}</span>
|
|
|
+ <span>申请时间:{{auditObj.updateTime?formatter1(auditObj.updateTime):'--'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class='cont1 MicrYaHei'>申诉未执行指令:{{auditObj.title||'--'}}</div>
|
|
|
+ <div class='cont2'>
|
|
|
+ <audit-table :tableList='tableList'></audit-table>
|
|
|
+ </div>
|
|
|
+ <div class='cont3'>
|
|
|
+ <span class='Micbold'>策略评价</span>
|
|
|
+ <span class='MicrYaHei'>{{auditObj.judgement||'--'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class='cont4'>
|
|
|
+ <span class='Micbold'>申请原因</span>
|
|
|
+ <span>
|
|
|
+ <el-select size='mini' v-model='auditObj.reasonType' placeholder='请选择'>
|
|
|
+ <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
+ </el-select>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <textarea placeholder='填写申请原因' style='color:#606266;' v-model='auditObj.reason'></textarea>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <upload-img :souseArr='auditObj.pics || []'></upload-img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='opinion'>
|
|
|
+ <span class='opinion-title Micbold'>审批意见</span>
|
|
|
+ <div class='opinion-bottom MicrYaHei'>
|
|
|
+ <input type='text' v-model='comment' :class='{isRed: isRed}' />
|
|
|
+ <span @click='approvalOpinion(auditObj,"reject")'>不同意</span>
|
|
|
+ <span @click='approvalOpinion(auditObj,"approve")'>同意</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import Head from "../main/index";
|
|
|
-import AuditTable from "./auditTable";
|
|
|
-import uploadImg from "../../components/uploadImg";
|
|
|
-import { queryWorkflow, queryChillerExecuteInfo } from "@/api/appeal/appeal.js";
|
|
|
-import { updateWorkflow } from "@/api/audit/audit.js";
|
|
|
-import { querySimpleInfo } from "@/api/appeal/appeal.js";
|
|
|
+import Head from '../main/index'
|
|
|
+import AuditTable from './auditTable'
|
|
|
+import uploadImg from '../../components/uploadImg'
|
|
|
+import { queryWorkflow, queryChillerExecuteInfo } from '@/api/appeal/appeal.js'
|
|
|
+import { updateWorkflow } from '@/api/audit/audit.js'
|
|
|
+import { querySimpleInfo } from '@/api/appeal/appeal.js'
|
|
|
|
|
|
-var moment = require("moment");
|
|
|
-import "moment/locale/zh-cn";
|
|
|
+var moment = require('moment')
|
|
|
+import 'moment/locale/zh-cn'
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- headText: "申诉审核",
|
|
|
- isactive: 0, //默认第一个
|
|
|
- appealOptions: [
|
|
|
- {
|
|
|
- value: "0",
|
|
|
- label: "按未执行策略的时间"
|
|
|
- }
|
|
|
- ],
|
|
|
- resonOptions: [
|
|
|
- {
|
|
|
- value: "1",
|
|
|
- label: "策略原因"
|
|
|
- }
|
|
|
- ],
|
|
|
- resonValue: "1",
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "0",
|
|
|
- label: "策略原因"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "1",
|
|
|
- label: "设备原因"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "2",
|
|
|
- label: "其他"
|
|
|
- }
|
|
|
- ],
|
|
|
- auditArr: [],
|
|
|
- auditObj: {},
|
|
|
- value: "0",
|
|
|
- comment: "",
|
|
|
- souseArr: [],
|
|
|
- tableList: [],
|
|
|
- isRed: false
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- Head,
|
|
|
- AuditTable,
|
|
|
- uploadImg
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.query();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- check() {
|
|
|
- this.isRed = !this.comment
|
|
|
- return this.isRed
|
|
|
- },
|
|
|
- quertName(id) {
|
|
|
- querySimpleInfo(id, {}).then(res => {
|
|
|
- this.auditObj.applyUser = res.realname;
|
|
|
- });
|
|
|
- },
|
|
|
- approvalOpinion(item, type) {
|
|
|
- let params = {
|
|
|
- postParams: {
|
|
|
- id: item.id,
|
|
|
- commit: type,
|
|
|
- comment: this.comment,
|
|
|
- roles: [1002],
|
|
|
- updateUser: item.updateUser
|
|
|
- }
|
|
|
- };
|
|
|
- if(this.check()) return
|
|
|
- updateWorkflow(params).then(res => {
|
|
|
- if (res.result == "success") {
|
|
|
- this.$message.success("操作成功");
|
|
|
- } else {
|
|
|
- this.$message.error("操作失败: " + res.message);
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ headText: '申诉审核',
|
|
|
+ isactive: 0, //默认第一个
|
|
|
+ appealOptions: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '按未执行策略的时间'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ resonOptions: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '策略原因'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ resonValue: '1',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '策略原因'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '设备原因'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '其他'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ auditArr: [],
|
|
|
+ auditObj: {},
|
|
|
+ value: '0',
|
|
|
+ comment: '',
|
|
|
+ souseArr: [],
|
|
|
+ tableList: [],
|
|
|
+ isRed: false,
|
|
|
+ auditArr1: [],
|
|
|
+ yesterday: '',
|
|
|
+ today: '',
|
|
|
+ day: ''
|
|
|
}
|
|
|
- this.query();
|
|
|
- });
|
|
|
},
|
|
|
- formatter(date) {
|
|
|
- return moment.unix(date / 1000).format("YYYY.MM.DD hh:mm");
|
|
|
+ components: {
|
|
|
+ Head,
|
|
|
+ AuditTable,
|
|
|
+ uploadImg
|
|
|
},
|
|
|
- formatter1(date) {
|
|
|
- return moment.unix(date / 1000).format("YYYY.MM.DD");
|
|
|
+ mounted() {
|
|
|
+ this.today = this.formatter2(moment(new Date()))
|
|
|
+ this.yesterday = this.formatter2(moment(new Date()).add(-1, 'days'))
|
|
|
+ this.day = this.formatter2(moment(new Date()).add(-3, 'days'))
|
|
|
+ this.query()
|
|
|
},
|
|
|
- appealClick(item, index) {
|
|
|
- this.auditObj = item;
|
|
|
- this.quertName(item.updateUser);
|
|
|
- this.isactive = index;
|
|
|
- let params = {
|
|
|
- postParams: {
|
|
|
- criteria: {
|
|
|
- id: item.commandId
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- queryChillerExecuteInfo(params).then(res => {
|
|
|
- const list = res.data || [{}, {}, {}];
|
|
|
- this.tableList = Object.values(list[0]).map(i => i || {});
|
|
|
- this.tableList[0].title = "当前运行状态";
|
|
|
- this.tableList[1].title = "推送策略";
|
|
|
- this.tableList[2].title = "执行策略";
|
|
|
- });
|
|
|
- },
|
|
|
- query() {
|
|
|
- let params = {
|
|
|
- postParams: {
|
|
|
- criteria: {
|
|
|
- projectId: this.$store.state.projectId,
|
|
|
- trackerId: 3,
|
|
|
- status: 302
|
|
|
- },
|
|
|
- withColumns: ["customAttribute"]
|
|
|
- }
|
|
|
- };
|
|
|
- queryWorkflow(params).then(res => {
|
|
|
- this.auditArr = res.content ? res.content : [];
|
|
|
- if (this.auditArr.length > 0) {
|
|
|
- this.auditObj = this.auditArr[0];
|
|
|
- this.quertName(this.auditObj.applyUser);
|
|
|
- this.appealClick(this.auditObj, 0);
|
|
|
+ methods: {
|
|
|
+ check() {
|
|
|
+ this.isRed = !this.comment
|
|
|
+ return this.isRed
|
|
|
+ },
|
|
|
+ quertName(id) {
|
|
|
+ querySimpleInfo(id, {}).then(res => {
|
|
|
+ this.auditObj.applyUser = res.realname
|
|
|
+ })
|
|
|
+ },
|
|
|
+ approvalOpinion(item, type) {
|
|
|
+ let params = {
|
|
|
+ postParams: {
|
|
|
+ id: item.id,
|
|
|
+ commit: type,
|
|
|
+ comment: this.comment,
|
|
|
+ roles: [1002],
|
|
|
+ updateUser: item.updateUser
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.check()) return
|
|
|
+ updateWorkflow(params).then(res => {
|
|
|
+ if (res.result == 'success') {
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ } else {
|
|
|
+ this.$message.error('操作失败: ' + res.message)
|
|
|
+ }
|
|
|
+ this.query()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formatterStr(str) {
|
|
|
+ if (str) {
|
|
|
+ return str.substring(0, 4) + '.' + str.substring(4, 6) + '.' + str.substring(6, 8)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatters(date) {
|
|
|
+ return moment(date).valueOf()
|
|
|
+ },
|
|
|
+ formatter(date) {
|
|
|
+ return moment.unix(date / 1000).format('YYYY.MM.DD hh:mm')
|
|
|
+ },
|
|
|
+ formatter1(date) {
|
|
|
+ return moment.unix(date / 1000).format('YYYY.MM.DD')
|
|
|
+ },
|
|
|
+ formatter3(date) {
|
|
|
+ return moment.unix(date / 1000).format('d')
|
|
|
+ },
|
|
|
+ formatter2(date) {
|
|
|
+ return moment.unix(date / 1000).format('YYYYMMDD')
|
|
|
+ },
|
|
|
+ appealClick(item, index) {
|
|
|
+ console.log(item)
|
|
|
+ console.log(index)
|
|
|
+ this.auditObj = item
|
|
|
+ this.quertName(item.updateUser)
|
|
|
+ this.isactive = index
|
|
|
+ let params = {
|
|
|
+ postParams: {
|
|
|
+ criteria: {
|
|
|
+ id: item.commandId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ queryChillerExecuteInfo(params).then(res => {
|
|
|
+ const list = res.data || [{}, {}, {}]
|
|
|
+ this.tableList = Object.values(list[0]).map(i => i || {})
|
|
|
+ this.tableList[0].title = '当前运行状态'
|
|
|
+ this.tableList[1].title = '推送策略'
|
|
|
+ this.tableList[2].title = '执行策略'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ unique(array) {
|
|
|
+ var res = []
|
|
|
+ for (var i = 0, len = array.length; i < len; i++) {
|
|
|
+ var current = array[i]
|
|
|
+ if (res.indexOf(current) === -1) {
|
|
|
+ res.push(current)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res
|
|
|
+ },
|
|
|
+ query() {
|
|
|
+ let params = {
|
|
|
+ postParams: {
|
|
|
+ criteria: {
|
|
|
+ projectId: this.$store.state.projectId,
|
|
|
+ trackerId: 3,
|
|
|
+ status: 302,
|
|
|
+ createTime: {
|
|
|
+ $gte: this.day + '000000'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ orders: [
|
|
|
+ {
|
|
|
+ column: 'createTime',
|
|
|
+ asc: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ withColumns: ['customAttribute']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ queryWorkflow(params).then(res => {
|
|
|
+ let arr = []
|
|
|
+ this.auditArr1 = res.content ? res.content : []
|
|
|
+ if (this.auditArr1.length > 0) {
|
|
|
+ this.auditArr1.forEach(el => {
|
|
|
+ arr.push(this.formatter2(el.createTime))
|
|
|
+ })
|
|
|
+ let arrNew = this.unique(arr)
|
|
|
+ arrNew.forEach(item => {
|
|
|
+ let obj1 = {
|
|
|
+ date: item,
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ this.auditArr.push(obj1)
|
|
|
+ console.log(this.auditArr)
|
|
|
+ })
|
|
|
+ this.auditArr.forEach(item => {
|
|
|
+ this.auditArr1.forEach(item2 => {
|
|
|
+ if (item.date == this.formatter2(item2.createTime)) {
|
|
|
+ item.children.push(item2)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.auditObj = this.auditArr[0].children[0]
|
|
|
+ this.quertName(this.auditObj.applyUser)
|
|
|
+ this.appealClick(this.auditObj, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- });
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.appealBox {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- .top {
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- flex: 1;
|
|
|
- .appealContainer {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- background: rgba(247, 249, 250, 1);
|
|
|
- border-top: 1px solid #e4e5e7;
|
|
|
- margin-top: 5px;
|
|
|
- .appeal-left {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- max-width: 460px;
|
|
|
- min-width: 350px;
|
|
|
- padding-left: 20px;
|
|
|
- .appeal-left-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 12px;
|
|
|
- padding-top: 112px;
|
|
|
- .appeal-left-top-span {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 21px;
|
|
|
- }
|
|
|
- }
|
|
|
- .appeal-left-box {
|
|
|
- flex: 1;
|
|
|
- overflow: scroll;
|
|
|
- margin-bottom: 24px;
|
|
|
- .date {
|
|
|
- height: 18px;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(141, 147, 153, 1);
|
|
|
- line-height: 16px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .appeal-left-div {
|
|
|
- margin-bottom: 8px;
|
|
|
- padding: 16px 20px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(228, 230, 231, 1);
|
|
|
- .time {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 12px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- span:nth-of-type(2) {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ .top {
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ flex: 1;
|
|
|
+ .appealContainer {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ background: rgba(247, 249, 250, 1);
|
|
|
+ border-top: 1px solid #e4e5e7;
|
|
|
+ margin-top: 5px;
|
|
|
+ .appeal-left {
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: ArialMT;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 16px;
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- line-height: 20px;
|
|
|
+ flex-direction: column;
|
|
|
+ max-width: 460px;
|
|
|
+ min-width: 350px;
|
|
|
+ padding-left: 20px;
|
|
|
+ .appeal-left-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-top: 112px;
|
|
|
+ .appeal-left-top-span {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ }
|
|
|
}
|
|
|
- span:nth-of-type(2) {
|
|
|
- margin: 4px 0;
|
|
|
+ .appeal-left-box {
|
|
|
+ flex: 1;
|
|
|
+ overflow: scroll;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ .date {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(141, 147, 153, 1);
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .appeal-left-div {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(228, 230, 231, 1);
|
|
|
+ .time {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: ArialMT;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 16px;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ span {
|
|
|
+ display: block !important;
|
|
|
+ height: 22px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin: 4px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ border: 1px solid rgba(0, 145, 255, 1);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- .border {
|
|
|
- border: 1px solid rgba(0, 145, 255, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .appeal-right {
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- margin-left: 28px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: #fff;
|
|
|
- .title {
|
|
|
- height: 32px;
|
|
|
- font-size: 24px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 32px;
|
|
|
- padding-top: 148px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .detailContainer {
|
|
|
- overflow: auto;
|
|
|
- // min-width: 762px;
|
|
|
- padding: 0 100px;
|
|
|
- padding-bottom: 24px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- margin-bottom: 100px;
|
|
|
+ .appeal-right {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 28px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+ .title {
|
|
|
+ height: 32px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 32px;
|
|
|
+ padding-top: 148px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .detailContainer {
|
|
|
+ overflow: auto;
|
|
|
+ // min-width: 762px;
|
|
|
+ padding: 0 100px;
|
|
|
+ padding-bottom: 24px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ margin-bottom: 100px;
|
|
|
|
|
|
- .nav {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 40px;
|
|
|
- margin-bottom: 12px;
|
|
|
- span {
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 19px;
|
|
|
- }
|
|
|
- }
|
|
|
- .cont1 {
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 19px;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
- .cont2 {
|
|
|
- margin-bottom: 24px;
|
|
|
- }
|
|
|
- .cont3 {
|
|
|
- margin-bottom: 24px;
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- span:nth-of-type(1) {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 21px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- span:nth-of-type(2) {
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- line-height: 19px;
|
|
|
- }
|
|
|
- }
|
|
|
- .cont4 {
|
|
|
- margin-bottom: 8px;
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- span:nth-of-type(1) {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 21px;
|
|
|
- }
|
|
|
- span:nth-of-type(2) {
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
- span:nth-of-type(3) {
|
|
|
- textarea {
|
|
|
- width: 762px;
|
|
|
- height: 64px;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(195, 199, 203, 1);
|
|
|
- color: rgba(195, 199, 203, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .opinion {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- background: rgba(247, 249, 250, 1);
|
|
|
- box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.08);
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- padding: 16px 32px;
|
|
|
- .opinion-title {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 21px;
|
|
|
- margin-bottom: 8px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .opinion-bottom {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .isRed{
|
|
|
- border:1px solid #F54E45;
|
|
|
- }
|
|
|
- input {
|
|
|
- flex: 1;
|
|
|
- height: 32px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(195, 199, 203, 1);
|
|
|
- margin-right: 32px;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 80px;
|
|
|
- height: 32px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(195, 199, 203, 1);
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 35, 41, 1);
|
|
|
- line-height: 32px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- span:nth-of-type(1) {
|
|
|
- margin-right: 12px;
|
|
|
+ .nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ span {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont1 {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .cont2 {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .cont3 {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont4 {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ margin: 8px 0;
|
|
|
+ }
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ textarea {
|
|
|
+ width: 762px;
|
|
|
+ height: 64px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
|
+ color: rgba(195, 199, 203, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opinion {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(247, 249, 250, 1);
|
|
|
+ box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.08);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ padding: 16px 32px;
|
|
|
+ .opinion-title {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .opinion-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .isRed {
|
|
|
+ border: 1px solid #f54e45;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ height: 32px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
|
+ margin-right: 32px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 35, 41, 1);
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|