From 30e858fa504b268b9b436afca0a1259cf6e8c488 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 19 八月 2025 11:01:40 +0800
Subject: [PATCH] 优化
---
admin/src/components/business/OperaWorkorderDetailSheWindow.vue | 673 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 496 insertions(+), 177 deletions(-)
diff --git a/admin/src/components/business/OperaWorkorderDetailSheWindow.vue b/admin/src/components/business/OperaWorkorderDetailSheWindow.vue
index 24ecc6e..8a21f88 100644
--- a/admin/src/components/business/OperaWorkorderDetailSheWindow.vue
+++ b/admin/src/components/business/OperaWorkorderDetailSheWindow.vue
@@ -1,203 +1,522 @@
<template>
<GlobalWindow
- :title="title"
- :visible.sync="visible"
- :confirm-working="isWorking"
- @confirm="confirm"
- >
- <el-form :model="form" ref="form" :rules="rules">
- <el-form-item label="鍒涘缓浜虹紪鐮�" prop="creator">
- <el-input v-model="form.creator" placeholder="璇疯緭鍏ュ垱寤轰汉缂栫爜" v-trim/>
- </el-form-item>
- <el-form-item label="鍒涘缓鏃堕棿" prop="createDate">
- <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ垱寤烘椂闂�"></el-date-picker>
- </el-form-item>
- <el-form-item label="鏇存柊浜虹紪鐮�" prop="editor">
- <el-input v-model="form.editor" placeholder="璇疯緭鍏ユ洿鏂颁汉缂栫爜" v-trim/>
- </el-form-item>
- <el-form-item label="鏇存柊鏃堕棿" prop="editDate">
- <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ユ洿鏂版椂闂�"></el-date-picker>
- </el-form-item>
- <el-form-item label="鏄惁鍒犻櫎0鍚� 1鏄�" prop="isdeleted">
- <el-input v-model="form.isdeleted" placeholder="璇疯緭鍏ユ槸鍚﹀垹闄�0鍚� 1鏄�" v-trim/>
- </el-form-item>
- <el-form-item label="鎵�灞炲垎绫荤紪锛堝叧鑱攃ategory)" prop="categoryId">
- <el-input v-model="form.categoryId" placeholder="璇疯緭鍏ユ墍灞炲垎绫荤紪锛堝叧鑱攃ategory)" v-trim/>
- </el-form-item>
- <el-form-item label="澶囨敞" prop="remark">
- <el-input v-model="form.remark" placeholder="璇疯緭鍏ュ娉�" v-trim/>
- </el-form-item>
- <el-form-item label="鐘舵�� 0寰呯‘璁�/寰呭垵瀹� 1寰呭垎閰�/寰呯粓瀹� 2寰呭鐞� 3 宸叉挙鍥� 4宸插鐞�" prop="status">
- <el-input v-model="form.status" placeholder="璇疯緭鍏ョ姸鎬� 0寰呯‘璁�/寰呭垵瀹� 1寰呭垎閰�/寰呯粓瀹� 2寰呭鐞� 3 宸叉挙鍥� 4宸插鐞�" v-trim/>
- </el-form-item>
- <el-form-item label="鎺掑簭鐮�" prop="sortnum">
- <el-input v-model="form.sortnum" placeholder="璇疯緭鍏ユ帓搴忕爜" v-trim/>
- </el-form-item>
- <el-form-item label="绫诲瀷 0浣嶇疆璐ｄ换浜� 1鐝暱 2鐗╀笟涓荤 3宸ョ▼甯� 4SHE璐熻矗浜� 5SHE宸ュ崟閭鎶勯�佷汉" prop="type">
- <el-input v-model="form.type" placeholder="璇疯緭鍏ョ被鍨� 0浣嶇疆璐ｄ换浜� 1鐝暱 2鐗╀笟涓荤 3宸ョ▼甯� 4SHE璐熻矗浜� 5SHE宸ュ崟閭鎶勯�佷汉" v-trim/>
- </el-form-item>
- <el-form-item label="涓婃姤浜哄憳缂栫爜锛堝叧鑱攎ember)" prop="memberId">
- <el-input v-model="form.memberId" placeholder="璇疯緭鍏ヤ笂鎶ヤ汉鍛樼紪鐮侊紙鍏宠仈member)" v-trim/>
- </el-form-item>
- <el-form-item label="閮ㄩ棬缂栫爜" prop="companyId">
- <el-input v-model="form.companyId" placeholder="璇疯緭鍏ラ儴闂ㄧ紪鐮�" v-trim/>
- </el-form-item>
- <el-form-item label="涓婃姤鏃堕棿" prop="submitDate">
- <el-input v-model="form.submitDate" placeholder="璇疯緭鍏ヤ笂鎶ユ椂闂�" v-trim/>
- </el-form-item>
- <el-form-item label="SHE娑夊強浜哄憳绫诲瀷 0鏈汉 1鍚屼簨 2渚涘簲鍟�" prop="memberType">
- <el-input v-model="form.memberType" placeholder="璇疯緭鍏HE娑夊強浜哄憳绫诲瀷 0鏈汉 1鍚屼簨 2渚涘簲鍟�" v-trim/>
- </el-form-item>
- <el-form-item label="SHE娑夊強浜哄憳浼佷笟缂栫爜闆嗗悎" prop="memberQwids">
- <el-input v-model="form.memberQwids" placeholder="璇疯緭鍏HE娑夊強浜哄憳浼佷笟缂栫爜闆嗗悎" v-trim/>
- </el-form-item>
- <el-form-item label="SHE娑夊強浜哄憳渚涘簲鍟嗛泦鍚�" prop="memberNames">
- <el-input v-model="form.memberNames" placeholder="璇疯緭鍏HE娑夊強浜哄憳渚涘簲鍟嗛泦鍚�" v-trim/>
- </el-form-item>
- <el-form-item label="鍙戠敓鍦扮偣/浣嶇疆缂栫爜锛堝叧鑱攃ategory锛�" prop="localtionId">
- <el-input v-model="form.localtionId" placeholder="璇疯緭鍏ュ彂鐢熷湴鐐�/浣嶇疆缂栫爜锛堝叧鑱攃ategory锛�" v-trim/>
- </el-form-item>
- <el-form-item label="鏄惁澶栭儴灏卞尰 0鍚� 1鏄�" prop="outJiuyi">
- <el-input v-model="form.outJiuyi" placeholder="璇疯緭鍏ユ槸鍚﹀閮ㄥ氨鍖� 0鍚� 1鏄�" v-trim/>
- </el-form-item>
- <el-form-item label="鏄惁鍖诲姟瀹� 0鍚� 1鏄�" prop="isYiwushi">
- <el-input v-model="form.isYiwushi" placeholder="璇疯緭鍏ユ槸鍚﹀尰鍔″ 0鍚� 1鏄�" v-trim/>
- </el-form-item>
- <el-form-item label="鏄惁鍙椾激 0鍚� 1鏄�" prop="isHurted">
- <el-input v-model="form.isHurted" placeholder="璇疯緭鍏ユ槸鍚﹀彈浼� 0鍚� 1鏄�" v-trim/>
- </el-form-item>
- <el-form-item label="鏄惁鍜屽伐浣滅浉鍏�" prop="workRelated">
- <el-input v-model="form.workRelated" placeholder="璇疯緭鍏ユ槸鍚﹀拰宸ヤ綔鐩稿叧" v-trim/>
- </el-form-item>
- <el-form-item label="浜嬩欢璇存槑" prop="eventInfo">
- <el-input v-model="form.eventInfo" placeholder="璇疯緭鍏ヤ簨浠惰鏄�" v-trim/>
- </el-form-item>
- <el-form-item label="閭欢閫氱煡浜哄憳缂栫爜闆嗗悎" prop="emialMemberIds">
- <el-input v-model="form.emialMemberIds" placeholder="璇疯緭鍏ラ偖浠堕�氱煡浜哄憳缂栫爜闆嗗悎" v-trim/>
- </el-form-item>
- <el-form-item label="浼佷笟寰俊閫氱煡浜哄憳缂栫爜闆嗗悎" prop="qwnoticeMemberIds">
- <el-input v-model="form.qwnoticeMemberIds" placeholder="璇疯緭鍏ヤ紒涓氬井淇￠�氱煡浜哄憳缂栫爜闆嗗悎" v-trim/>
- </el-form-item>
- <el-form-item label="鍙戠幇鏃堕棿" prop="happenTime">
- <el-input v-model="form.happenTime" placeholder="璇疯緭鍏ュ彂鐜版椂闂�" v-trim/>
- </el-form-item>
- <el-form-item label="椋庨櫓绫诲瀷(鍏宠仈category锛�" prop="typeId">
- <el-date-picker v-model="form.typeId" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ラ闄╃被鍨�(鍏宠仈category锛�"></el-date-picker>
- </el-form-item>
- <el-form-item label="椋庨櫓鎻忚堪" prop="riskInfo">
- <el-input v-model="form.riskInfo" placeholder="璇疯緭鍏ラ闄╂弿杩�" v-trim/>
- </el-form-item>
- <el-form-item label="褰撳墠鐗╀笟涓荤缂栫爜锛堝叧鑱攎ember锛�" prop="managerId">
- <el-input v-model="form.managerId" placeholder="璇疯緭鍏ュ綋鍓嶇墿涓氫富绠＄紪鐮侊紙鍏宠仈member锛�" v-trim/>
- </el-form-item>
- <el-form-item label="褰撳墠澶勭悊浜哄憳缂栫爜锛堝叧鑱攎ember)" prop="dealerId">
- <el-input v-model="form.dealerId" placeholder="璇疯緭鍏ュ綋鍓嶅鐞嗕汉鍛樼紪鐮侊紙鍏宠仈member)" v-trim/>
- </el-form-item>
- <el-form-item label="鍒嗛厤鏃堕棿" prop="dispatchTime">
- <el-date-picker v-model="form.dispatchTime" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ垎閰嶆椂闂�"></el-date-picker>
- </el-form-item>
- <el-form-item label="鍒嗛厤澶囨敞" prop="dispatchInfo">
- <el-input v-model="form.dispatchInfo" placeholder="璇疯緭鍏ュ垎閰嶅娉�" v-trim/>
- </el-form-item>
- <el-form-item label="澶勭悊鏃堕棿" prop="dealTime">
- <el-date-picker v-model="form.dealTime" value-format="yyyy-MM-dd" placeholder="璇疯緭鍏ュ鐞嗘椂闂�"></el-date-picker>
- </el-form-item>
- <el-form-item label="澶勭悊澶囨敞" prop="dealInfo">
- <el-input v-model="form.dealInfo" placeholder="璇疯緭鍏ュ鐞嗗娉�" v-trim/>
- </el-form-item>
- <el-form-item label="DCA闂缂栫爜" prop="problemId">
- <el-input v-model="form.problemId" placeholder="璇疯緭鍏CA闂缂栫爜" v-trim/>
- </el-form-item>
- <el-form-item label="DCA闂鏁伴噺" prop="problemNum">
- <el-input v-model="form.problemNum" placeholder="璇疯緭鍏CA闂鏁伴噺" v-trim/>
- </el-form-item>
- <el-form-item label="浣嶇疆鍦扮偣璺緞鍚嶇О" prop="locationName">
- <el-input v-model="form.locationName" placeholder="璇疯緭鍏ヤ綅缃湴鐐硅矾寰勫悕绉�" v-trim/>
- </el-form-item>
- <el-form-item label="宸ュ崟鍙�" prop="code">
- <el-input v-model="form.code" placeholder="璇疯緭鍏ュ伐鍗曞彿" v-trim/>
- </el-form-item>
- </el-form>
+ :title="title"
+ width="85%"
+ :visible.sync="visible"
+ :confirm-working="isWorking"
+ @confirm="confirm">
+ <div class="modal_wrap">
+ <div class="modal_content">
+ <div class="header">
+<!-- <img v-if="info.status == '0'" class="head_bg"
+ src="@/assets/task/bg_shenhe_fail@2x.png" alt="">-->
+ <img v-if="info.status == '4' || info.status == '3'||info.status == '5'||info.status == '6'" class="head_bg"
+ src="@/assets/task/bg_shenhe_pass@2x.png" alt="">
+ <img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt="">
+ <div class="left">
+ <div class="h1">{{ cateList[type] }}</div>
+ <div class="time">鎻愪氦鏃堕棿锛歿{ info.createDate }}</div>
+ </div>
+ <div class="right" :style="(info.status ==0 ||info.status ==1 || info.status ==2)?'min-width: 90px':''" :class="{ scs: info.status == '3' || info.status == '4' || info.status == '5', msg: info.status == '6' }">{{statusMap[info.status] }}</div>
+ </div>
+ <div class="info">
+ <div class="title">宸ュ崟淇℃伅</div>
+ <div class="list">
+ <div class="item">
+ <div class="label">鍛樺伐濮撳悕</div>
+ <div class="value">{{ info.memberName }} - {{ info.memberPhone || '[鏃犳墜鏈哄彿]' }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鎵�灞為儴闂�</div>
+ <div class="value">{{ info.companyName }} </div>
+ </div>
+ <div class="item">
+ <div class="label">涓婃姤鏃堕棿</div>
+ <div class="value">{{ info.submitDate +' '}}</div>
+ </div>
+ <div class="item">
+ <div class="label">娑夊強浜哄憳</div>
+ <div class="value" v-if="info.memberType == 2">渚涘簲鍟�-{{info.memberNames}}</div>
+ <div class="value" v-else-if="info.memberType == 1">鍚屼簨-{{info.memberNames}}</div>
+ <div class="value" v-else>鏈汉</div>
+ </div>
+ <div class="item">
+ <div class="label">鍙戠幇鏃堕棿</div>
+ <div class="value">{{ info.happenTime }}</div>
+ </div>
+ <div class="item">
+ <div class="label">澶栭儴灏卞尰</div>
+ <div class="value">{{ info.outJiuyi == "0" ? "鍚�" : "鏄�" }}</div>
+ </div>
+ <div class="item" v-if="info.outJiuyi == '0'">
+ <div class="label">鍖诲姟瀹�</div>
+ <div class="value">{{ info.isYiwushi == "0" ? "鍚�" : "鏄�" }}</div>
+ </div>
+ <div class="item" v-if="info.isYiwushi == '0'">
+ <div class="label">鏄惁鍙椾激</div>
+ <div class="value">{{ info.isHurted == "0" ? "鍚�" : "鏄�" }}</div>
+ </div>
+ <div class="item">
+ <div class="label">浼ゅ绫诲瀷</div>
+ <div class="value">{{ info.typeName }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鍜屽伐浣滅浉鍏�</div>
+ <div class="value">{{ info.workRelated == "0" ? "鍚�" : "鏄�" }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鍙戠敓鍦扮偣</div>
+ <div class="value">{{ info.locationName }}</div>
+ </div>
+ <div class="item">
+ <div class="label">鍏蜂綋浣嶇疆</div>
+ <div class="value">{{ info.remark }}</div>
+ </div>
+ <div class="item">
+ <div class="label">浜嬩欢璇存槑</div>
+ <div class="value">{{ info.eventInfo || '-'}}</div>
+ </div>
+ <div class="item" style="width: 100%">
+ <div class="label">鍥剧墖</div>
+ <div class="value" v-if="info.multifileList ==null || !info.multifileList.length">鏃�</div>
+ <div class="value" v-if="info.multifileList !=null && info.multifileList.length">
+ <div v-for="item in info.multifileList" :key="item.id" style="display: inline;margin-right: 20px">
+ <video
+ v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')"
+ ref="videoRef"
+ controls
+ preload="auto"
+ style="width: 80px;height: 80px;object-fit: contain;"
+ :src="item.fileurlFull"
+ />
+ <el-image
+ v-else-if="item.fileurlFull"
+ style="width:80px; height: 80px"
+ :src="item.fileurlFull"
+ :preview-src-list="[item.fileurlFull]">
+ </el-image>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="side" v-if="false">
+ <div class="side_title">鎿嶄綔鍘嗗彶</div>
+ <div class="list" v-if=" info.logList != null && info.logList.length != 0
+ ">
+ <div class="item" v-for="(item, index) in infologList" :key="item.id">
+ <div class="separate" v-if="index < info.logList.length - 1"></div>
+ <div class="info">
+ <img src="@/assets/icons/ic_tongguo.png" class="iconnew" v-if="item.status == 2" />
+ <img src="@/assets/icons/ic_dangqian.png" class="iconnew" v-if="item.status == 1" />
+ <img src="@/assets/icons/ic_jujue.png" class="iconnew" v-if="item.status == 3" />
+ <img src="@/assets/icons/ic_grey.png" class="iconnew" v-if="item.status == null || item.status == 0" />
+ <div style="display: inline" v-if="item.approveType != 1">
+ <img v-if="item.faceImg != null && item.faceImg != ''" :src="item.faceImg" class="avatar" alt="" />
+ <img v-if="item.faceImg == null || item.faceImg == ''" src="@/assets/avatar/man.png" class="avatar"
+ alt="" />
+ </div>
+ <div style="display: inline" v-if="item.approveType == 1">
+ <img v-if="item.type != 1" src="@/assets/icons/ic_duoren.png" class="avatar" alt="" />
+ <img v-if="item.type == 1" src="@/assets/icons/ic_chaosong.png" class="avatar" alt="" />
+ </div>
+ <div class="content">
+ <div class="line">
+ <div class="name">{{ item.title }}</div>
+ <div class="time">{{ item.checkDate }}</div>
+ </div>
+ <div class="line">
+ <div class="company">
+ {{ item.memberName }}
+ <div style="display: inline" v-if="item.statusInfo != null && item.statusInfo != ''">
+ 锛�<span :class="{ padding: item.statusInfo == '澶勭悊涓�' || item.status == '1' }">{{
+ item.statusInfo || ""
+ }}</span>锛�
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div v-if="
+ item.approveType != 1 &&
+ item.checkInfo != null &&
+ item.checkInfo != ''
+ " class="remark">
+ {{ item.checkInfo || "" }}
+ </div>
+ <div v-if="item.approveType == 1" class="childList">
+ <div class="m_content company" v-for="item1 in item.approveList" :key="item1.id">
+ <img v-if="item1.faceImg != null && item1.faceImg != ''" :src="item1.faceImg" class="avatar" alt="" />
+ <img v-if="item1.faceImg == null || item1.faceImg == ''" src="../../assets/avatar/man.png" class="avatar"
+ alt="" />
+ <span> {{ item1.memberName }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- -->
+ <template v-slot:footer>
+ <el-button @click="close">杩斿洖</el-button>
+ </template>
</GlobalWindow>
</template>
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
+import {getById } from '@/api/business/workorder'
export default {
name: 'OperaWorkorderWindow',
extends: BaseOpera,
components: { GlobalWindow },
data () {
return {
- // 琛ㄥ崟鏁版嵁
- form: {
- id: null,
- creator: '',
- createDate: '',
- editor: '',
- editDate: '',
- isdeleted: '',
- categoryId: '',
- remark: '',
- status: '',
- sortnum: '',
- type: '',
- memberId: '',
- companyId: '',
- submitDate: '',
- memberType: '',
- memberQwids: '',
- memberNames: '',
- localtionId: '',
- outJiuyi: '',
- isYiwushi: '',
- isHurted: '',
- workRelated: '',
- eventInfo: '',
- emialMemberIds: '',
- qwnoticeMemberIds: '',
- happenTime: '',
- typeId: '',
- riskInfo: '',
- managerId: '',
- dealerId: '',
- dispatchTime: '',
- dispatchInfo: '',
- dealTime: '',
- dealInfo: '',
- problemId: '',
- problemNum: '',
- locationName: '',
- code: ''
+ id: '',
+ type: null,
+ title: '宸ュ崟璇︽儏',
+ info: {},
+ statusMap: {
+ 0: '澶勭悊涓�',
+ 1: '澶勭悊涓�',
+ 2: '澶勭悊涓�',
+ 3: '宸插鐞�',
+ 4: '宸插鐞�',
+ 5: '宸插鐞�'
},
- // 楠岃瘉瑙勫垯
- rules: {
+ cateList: {
+ 0: 'SHE浜嬩欢宸ュ崟',
+ 1: 'DCA浜嬩欢鎻愪氦璁板綍',
+ 2: 'DCA浜嬩欢宸ュ崟',
+ 3: '璺岀粖婊戜簨浠跺伐鍗�'
}
}
},
- created () {
- this.config({
- api: '/business/workorder',
- 'field.id': 'id'
- })
- },
- methods:{
- /**
- * 鎵撳紑绐楀彛
- *
- * @param title 绐楀彛鏍囬
- * @param target 琛屽璞★紙浠呯紪杈戦渶璇ュ弬鏁帮級
- */
+ methods: {
open (title, target) {
this.title = title
this.visible = true
- this.$nextTick(() => {
- for (const key in this.form) {
- this.form[key] = target[key]
+ this.info = target
+ this.getDetail()
+ this.type = this.info.type
+ },
+ close () {
+ this.visible = false
+ },
+ getDetail () {
+ getById(this.info.id).then(res => {
+ this.info = res
+ if (this.info.logList && this.info.logList.length > 0) {
+ this.info.logList.forEach(item => {
+ if (item.approveList && item.approveList.length == 1 && item.type !== 1) {
+ item.title = item.approveList[0].title
+ item.faceImg = item.approveList[0].faceImg
+ item.memberName = item.approveList[0].memberName
+ item.statusInfo = item.approveList[0].statusInfo
+ item.approveList = []
+ }
+ })
}
})
- }
+ },
+ reject () { },
+ handleAvatarSuccess () { },
+ beforeAvatarUpload () { }
}
}
</script>
+
+<style lang="scss" scoped>
+@import "@/assets/style/variables.scss";
+
+.upload_box {
+ width: 84px;
+ height: 84px;
+ border-radius: 4px;
+ background-color: #f7f7f7;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #999999;
+ border: 1px solid #e4e4e4;
+
+ .icon {
+ font-size: 24px;
+ }
+
+ .text {
+ font-size: 12px;
+ }
+}
+
+.side_title {
+ font-weight: 600;
+ font-size: 18px;
+ color: #111111;
+ margin-bottom: 20px;
+ margin-left: 20px;
+ margin-top: 20px;
+}
+
+.modal_wrap {
+ display: flex;
+ height: auto;
+
+ .modal_content {
+ flex: 1;
+ padding: 0px 30px;
+ border-radius: 8px;
+ overflow: hidden;
+ height: 100%;
+
+ .title {
+ font-weight: 600;
+ font-size: 18px;
+ color: #333333;
+ margin-bottom: 20px;
+ margin-top: 30px;
+ }
+
+ .info {
+ .list {
+ display: flex;
+ flex-wrap: wrap;
+
+ .item {
+ display: flex;
+ width: 50%;
+ font-size: 14px;
+ margin-bottom: 20px;
+
+ &:nth-of-type(2n) {
+ width: 50%;
+ }
+
+ .label {
+ color: #888888;
+ width: 100px;
+ }
+
+ .value {
+ width: calc(100% - 100px);
+ color: #111111;
+ }
+ }
+ }
+ }
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ vertical-align: center;
+ padding: 20px 30px;
+ margin: 0 -30px;
+ border-radius: 8px 8px 0 0;
+ position: relative;
+
+ .head_bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ z-index: 9;
+ }
+
+ .h1 {
+ font-weight: 600;
+ font-size: 22px;
+ color: #111111;
+ margin-bottom: 8px;
+ }
+
+ .time {
+ font-size: 14px;
+ color: #999999;
+ }
+
+ .right {
+ height: 40px;
+ font-size: 16px;
+ color: #ffffff;
+ line-height: 40px;
+ padding: 0 20px;
+ background: #207ff7;
+ box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16);
+ border-radius: 16px 0px 16px 0px;
+ position: relative;
+ z-index: 99;
+ }
+
+ .scs {
+ background-color: #00BA67;
+ }
+
+ .msg {
+ background-color: #ED4545;
+ }
+ }
+
+ .table_info {
+ .name_wrap {
+ display: flex;
+ align-items: center;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 12px;
+ }
+
+ .content {
+ .line {
+ display: flex;
+ }
+
+ .tag {
+ color: #b2cbf9;
+ border: 1px solid #b2cbf9;
+ padding: 0px 4px;
+ border-radius: 4px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+
+ .side {
+ height: 100%;
+ width: 420px;
+ background: #ffffff;
+ border-left: 20px solid #f7f7f7;
+
+ .list {
+ .item {
+ padding: 8px 0;
+ position: relative;
+
+ .separate {
+ position: absolute;
+ border-left: 2px dashed #cccccc;
+ left: 31px;
+ height: calc(100% - 30px);
+ top: 49px;
+ }
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin: 0 12px 0 16px;
+ //border: 1px solid;
+ }
+
+ .childList {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: 100px;
+ }
+
+ .company {
+ font-size: 13px;
+ color: #888888;
+
+ .status {
+ color: $primaryColor;
+ }
+ }
+
+ .m_content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 4px;
+ }
+
+ .info {
+ display: flex;
+ align-items: center;
+ margin-left: 20px;
+
+ .icon {
+ position: relative;
+ z-index: 11;
+ color: #53b76f;
+ font-size: 24px;
+ }
+
+ .icon1 {
+ position: relative;
+ z-index: 11;
+ color: deepskyblue;
+ font-size: 24px;
+ }
+
+ .icon2 {
+ position: relative;
+ z-index: 11;
+ color: #dc362e;
+ font-size: 24px;
+ }
+
+ .iconnew {
+ width: 24px;
+ height: 24px;
+ }
+
+ .icon3 {
+ position: relative;
+ z-index: 11;
+ color: gray;
+ font-size: 24px;
+ }
+
+ .content {
+ flex: 1;
+
+ .line {
+ display: flex;
+ justify-content: space-between;
+ align-content: center;
+ margin-bottom: 6px;
+
+ .status {
+ color: #888888;
+ }
+
+ .padding {
+ color: $primaryColor;
+ }
+
+ .name {
+ font-weight: 600;
+ font-size: 16px;
+ color: #111111;
+ }
+
+ .time {
+ color: #888888;
+ }
+ }
+ }
+ }
+
+ .remark {
+ background: #f7f7f7;
+ border-radius: 4px;
+ padding: 13px 15px;
+ color: #666666;
+ margin-left: 100px;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3