Guoxiaohuan 5 years ago
parent
commit
0bacaf8583
2 changed files with 1221 additions and 1153 deletions
  1. 708 709
      src/views/appeal/index.vue
  2. 513 444
      src/views/audit/index.vue

File diff suppressed because it is too large
+ 708 - 709
src/views/appeal/index.vue


+ 513 - 444
src/views/audit/index.vue

@@ -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)+'&nbsp;&nbsp;今天'}}</p>
+                                <p v-if='item1.date==yesterday' class='date MicrYaHei'>{{formatterStr(item1.date)+'&nbsp;&nbsp;昨天'}}</p>
+                                <p class='date MicrYaHei' v-if='item1.date!=today&&item1.date!=yesterday'>
+                                    {{formatterStr(item1.date)+'&nbsp;&nbsp;'}}
+                                    <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>