Merge pull request 'fix: 修改工单详情状态显示' (#179) from dj into master
Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/179
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
<script setup>
|
||||
import { nextTick, onMounted, reactive, ref, watch } from "vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { MoreFilled, Check, Download, VideoPlay } from "@element-plus/icons-vue";
|
||||
import { time } from "echarts";
|
||||
import { defineExpose } from "vue";
|
||||
import { defineProps } from "vue";
|
||||
import { orderGetDetails } from "@/api/order/order.js"
|
||||
import {nextTick, onMounted, reactive, ref, watch} from "vue";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import {MoreFilled, Check, Download, VideoPlay} from "@element-plus/icons-vue";
|
||||
import {time} from "echarts";
|
||||
import {defineExpose} from "vue";
|
||||
import {defineProps} from "vue";
|
||||
import {orderGetDetails} from "@/api/order/order.js"
|
||||
import Voice from '@/components/voice/index.vue'
|
||||
//控制显示隐藏
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
rowData: Object
|
||||
rowData: Object
|
||||
})
|
||||
|
||||
let opsCallList = ref([]);
|
||||
@@ -20,428 +20,434 @@ let orderContent = ref([]);
|
||||
const voiceRef = ref()
|
||||
const rowUrl = ref()
|
||||
const open = (row) => {
|
||||
dialogVisible.value = true;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
// console.log(123);
|
||||
const data = await orderGetDetails({
|
||||
orderNumber:props.rowData.orderNumber,
|
||||
alarmObject :props.rowData.alarmObject,
|
||||
alarmUnit :props.rowData.alarmUnit
|
||||
})
|
||||
// console.log("111", data);
|
||||
return data
|
||||
// console.log(123);
|
||||
const data = await orderGetDetails({
|
||||
orderNumber: props.rowData.orderNumber,
|
||||
alarmObject: props.rowData.alarmObject,
|
||||
alarmUnit: props.rowData.alarmUnit
|
||||
})
|
||||
// console.log("111", data);
|
||||
return data
|
||||
|
||||
}
|
||||
let contentState0 = [
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "orderData.value",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "--",
|
||||
type: "primary",
|
||||
icon: MoreFilled,
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "--",
|
||||
size: "large",
|
||||
// icon: Check,
|
||||
// color: "#0bbd87",
|
||||
},
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "orderData.value",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "--",
|
||||
type: "primary",
|
||||
icon: MoreFilled,
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "--",
|
||||
size: "large",
|
||||
// icon: Check,
|
||||
// color: "#0bbd87",
|
||||
},
|
||||
];
|
||||
let contentState1 = [
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "orderData.value",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "2022-07-20 20:00:00",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "--",
|
||||
size: "large",
|
||||
type: "primary",
|
||||
icon: MoreFilled,
|
||||
},
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "orderData.value",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "2022-07-20 20:00:00",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "--",
|
||||
size: "large",
|
||||
type: "primary",
|
||||
icon: MoreFilled,
|
||||
},
|
||||
];
|
||||
let contentState2 = [
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "orderData.value",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "2022-07-20 20:00:00",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "2022-07-20 20:00:00",
|
||||
size: "large",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
},
|
||||
{
|
||||
content: "待处理",
|
||||
timestamp: "orderData.value",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "已处理",
|
||||
timestamp: "2022-07-20 20:00:00",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
size: "large",
|
||||
},
|
||||
{
|
||||
content: "结单",
|
||||
timestamp: "2022-07-20 20:00:00",
|
||||
size: "large",
|
||||
icon: Check,
|
||||
color: "#0bbd87",
|
||||
},
|
||||
];
|
||||
|
||||
watch(() => props.rowData, (newRowData) => {
|
||||
if (newRowData) {
|
||||
// console.log(getData(newRowData));
|
||||
getData(newRowData).then((data) => {
|
||||
opsCallList.value = []
|
||||
orderData.value = data.data
|
||||
if (newRowData) {
|
||||
// console.log(getData(newRowData));
|
||||
getData(newRowData).then((data) => {
|
||||
opsCallList.value = []
|
||||
orderData.value = data.data
|
||||
|
||||
//电话拨打记录
|
||||
const dataDetails = data.data.opsCallList
|
||||
// console.log(dataDetails);
|
||||
const theData = [{ createTime: '', data: [] }]
|
||||
|
||||
dataDetails.forEach(for1data => {
|
||||
// console.log(for1data.createTime, '--------');
|
||||
for (let i = 0; i < theData.length; i++) {
|
||||
// console.log(theData[i]);
|
||||
if (theData[i].createTime === for1data.createTime) {
|
||||
theData[i].data.push(for1data)
|
||||
break;
|
||||
} else if (theData[i].createTime === '') {
|
||||
theData[i].createTime = for1data.createTime
|
||||
theData[i].data.push(for1data)
|
||||
} else {
|
||||
theData.push({ createTime: '', data: [] })
|
||||
}
|
||||
}
|
||||
});
|
||||
// theData.pop()
|
||||
// theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
|
||||
// console.log(theData);
|
||||
theData.forEach(item => {
|
||||
item.data.forEach(info => {
|
||||
if (info.answeredTime !== null) {
|
||||
// console.log(info.answeredTime);
|
||||
let startIndex = info.answeredTime.indexOf(' ') + 1;
|
||||
let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
|
||||
info.answeredTime = timeOnly.replace(/:/g, ':')
|
||||
// info.answeredTime = timeOnly
|
||||
}
|
||||
})
|
||||
// item.data.sort((a, b) => a.answeredTime - b.answeredTime)
|
||||
opsCallList.value.push(item)
|
||||
})
|
||||
|
||||
//工单时间线
|
||||
orderContent.value = []
|
||||
// console.log(orderData.value);
|
||||
// orderData.value.orderState='2'
|
||||
if (orderData.value.orderState === '0') {
|
||||
inputOrderContent(contentState0)
|
||||
}
|
||||
else if (orderData.value.orderState === '1') {
|
||||
inputOrderContent(contentState1)
|
||||
}
|
||||
else if (orderData.value.orderState === '2') {
|
||||
inputOrderContent(contentState2)
|
||||
}
|
||||
// console.log(orderContent.value);
|
||||
//电话拨打记录
|
||||
const dataDetails = data.data.opsCallList
|
||||
// console.log(dataDetails);
|
||||
const theData = [{createTime: '', data: []}]
|
||||
|
||||
dataDetails?.forEach(for1data => {
|
||||
// console.log(for1data.createTime, '--------');
|
||||
for (let i = 0; i < theData.length; i++) {
|
||||
// console.log(theData[i]);
|
||||
if (theData[i].createTime === for1data.createTime) {
|
||||
theData[i].data.push(for1data)
|
||||
break;
|
||||
} else if (theData[i].createTime === '') {
|
||||
theData[i].createTime = for1data.createTime
|
||||
theData[i].data.push(for1data)
|
||||
} else {
|
||||
theData.push({createTime: '', data: []})
|
||||
}
|
||||
}
|
||||
});
|
||||
// theData.pop()
|
||||
// theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
|
||||
// console.log(theData);
|
||||
theData.forEach(item => {
|
||||
item.data.forEach(info => {
|
||||
if (info.answeredTime !== null) {
|
||||
// console.log(info.answeredTime);
|
||||
let startIndex = info.answeredTime.indexOf(' ') + 1;
|
||||
let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
|
||||
info.answeredTime = timeOnly.replace(/:/g, ':')
|
||||
// info.answeredTime = timeOnly
|
||||
}
|
||||
})
|
||||
}
|
||||
// item.data.sort((a, b) => a.answeredTime - b.answeredTime)
|
||||
opsCallList.value.push(item)
|
||||
})
|
||||
|
||||
//工单时间线
|
||||
orderContent.value = []
|
||||
console.log(orderData.value);
|
||||
// orderData.value.orderState='2'
|
||||
if (orderData.value.orderState === '0') {
|
||||
inputOrderContent(contentState0)
|
||||
} else if (orderData.value.orderState === '1') {
|
||||
inputOrderContent(contentState1)
|
||||
} else if (orderData.value.orderState === '2') {
|
||||
inputOrderContent(contentState2)
|
||||
}
|
||||
// console.log(orderContent.value);
|
||||
|
||||
})
|
||||
}
|
||||
}, {
|
||||
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
||||
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
||||
});
|
||||
const inputOrderTime = (item, index) => {
|
||||
{
|
||||
if (index === 0) {
|
||||
item.timestamp = orderData.value.operationTime || '--'
|
||||
} else if (index === 1) {
|
||||
// item.timestamp = orderData.value.processedTime || '--'
|
||||
} else {
|
||||
// item.timestamp = orderData.value.completionTime || '--'
|
||||
}
|
||||
{
|
||||
if (index === 0) {
|
||||
item.timestamp = orderData.value.operationTime || '--'
|
||||
} else if (index === 1) {
|
||||
// item.timestamp = orderData.value.processedTime || '--'
|
||||
} else {
|
||||
// item.timestamp = orderData.value.completionTime || '--'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const inputOrderContent = (contentState) => {
|
||||
contentState.map((item, index) => {
|
||||
inputOrderTime(item, index)
|
||||
})
|
||||
contentState.forEach(item => {
|
||||
orderContent.value.push(item)
|
||||
})
|
||||
contentState.map((item, index) => {
|
||||
inputOrderTime(item, index)
|
||||
})
|
||||
contentState.forEach(item => {
|
||||
orderContent.value.push(item)
|
||||
})
|
||||
}
|
||||
|
||||
const openRecord = () => {
|
||||
if ( props.rowData.recordUrl !== null) {
|
||||
voiceRef.value.open(true)
|
||||
rowUrl.value = props.rowData.recordUrl
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '暂无语音',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
if (props.rowData.recordUrl !== null) {
|
||||
voiceRef.value.open(true)
|
||||
rowUrl.value = props.rowData.recordUrl
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '暂无语音',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const downloadRecord = () => {
|
||||
if(props.rowData.recordUrl === null){
|
||||
ElMessage({
|
||||
message: '暂无语音',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
if (props.rowData.recordUrl === null) {
|
||||
ElMessage({
|
||||
message: '暂无语音',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
open,
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header class="header"><span>工单号：</span>
|
||||
<span>{{ rowData.orderNumber || '--' }}</span>
|
||||
</el-header>
|
||||
<el-container class="main-container">
|
||||
<el-aside width="200px" :style="{ position: 'static' }">
|
||||
<div class="aside-content">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in orderContent" :key="index"
|
||||
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
||||
:size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
|
||||
<p style="font-size: 17px;"> {{ activity.content }}</p>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main :style="{ position: 'static' }" class="main-content">
|
||||
<div class="top">
|
||||
<div class="info">
|
||||
<!-- <span>创始人：{{ rowData.createBy }}</span> -->
|
||||
<span>处理人：{{ rowData.operationUser || '--' }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>工单名称：{{ rowData.orderName || '--' }}</span>
|
||||
<span>关单人：{{ rowData.knotter || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<div>工单内容：</div>
|
||||
<div class="textBox">
|
||||
<el-scrollbar>
|
||||
<div class="text">{{ rowData.orderContent || '暂无工单内容' }}</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <div>通话记录：</div>-->
|
||||
<!-- <div class="textBox">-->
|
||||
<!-- <el-scrollbar>-->
|
||||
<!-- <div class="text">{{ rowData.processedContent || '暂无通话记录' }}</div>-->
|
||||
<!-- </el-scrollbar>-->
|
||||
<!-- </div>-->
|
||||
<el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header class="header"><span>工单号：</span>
|
||||
<span>{{ rowData.orderNumber || '--' }}</span>
|
||||
</el-header>
|
||||
<el-container class="main-container">
|
||||
<el-aside width="200px" :style="{ position: 'static' }">
|
||||
<div class="aside-content">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="(activity, index) in orderContent" :key="index"
|
||||
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
||||
:size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
|
||||
<p style="font-size: 17px;"> {{ activity.content }}</p>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main :style="{ position: 'static' }" class="main-content">
|
||||
<div class="top">
|
||||
<div class="info">
|
||||
<!-- <span>创始人：{{ rowData.createBy }}</span> -->
|
||||
<span>处理人：{{ rowData.operationUser || '--' }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>工单名称：{{ rowData.orderName || '--' }}</span>
|
||||
<span>关单人：{{ rowData.knotter || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<div>工单内容：</div>
|
||||
<div class="textBox">
|
||||
<el-scrollbar>
|
||||
<div class="text">{{ rowData.orderContent || '暂无工单内容' }}</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <div>通话记录：</div>-->
|
||||
<!-- <div class="textBox">-->
|
||||
<!-- <el-scrollbar>-->
|
||||
<!-- <div class="text">{{ rowData.processedContent || '暂无通话记录' }}</div>-->
|
||||
<!-- </el-scrollbar>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<div>录音信息：</div>
|
||||
<div class="textBox—record">
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<div>录音信息：</div>
|
||||
<div class="textBox—record">
|
||||
|
||||
<el-button @click="openRecord" type="primary" :icon="VideoPlay"
|
||||
style="margin-right: 10px ;">播放录音
|
||||
</el-button>
|
||||
<voice ref="voiceRef" title="录音详情" :rowUrl="rowUrl" />
|
||||
<a :href=rowData.recordUrl download>
|
||||
<el-button type="primary" :icon="Download"
|
||||
@click="downloadRecord">下载录音</el-button>
|
||||
</a>
|
||||
<!-- <el-scrollbar> -->
|
||||
<!-- <div class="text">{{ rowData.recordUrl }}</div> -->
|
||||
<!-- </el-scrollbar> -->
|
||||
</div>
|
||||
<el-button @click="openRecord" type="primary" :icon="VideoPlay"
|
||||
style="margin-right: 10px ;">播放录音
|
||||
</el-button>
|
||||
<voice ref="voiceRef" title="录音详情" :rowUrl="rowUrl"/>
|
||||
<a :href=rowData.recordUrl download>
|
||||
<el-button type="primary" :icon="Download"
|
||||
@click="downloadRecord">下载录音
|
||||
</el-button>
|
||||
</a>
|
||||
<!-- <el-scrollbar> -->
|
||||
<!-- <div class="text">{{ rowData.recordUrl }}</div> -->
|
||||
<!-- </el-scrollbar> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div>电话拨打记录：</div>
|
||||
<div class="timebox">
|
||||
<div>
|
||||
<el-scrollbar height="20vh">
|
||||
<p v-if="opsCallList.length === 0">暂无电话拨打记录</p>
|
||||
<el-timeline style="max-width: 99%" class="timeline">
|
||||
<el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
|
||||
icon="MoreFilled" type="primary" size="large">
|
||||
<div class="custom-card">
|
||||
<div style="font-weight: bold">{{ activity.createTime }}</div>
|
||||
<template v-if="activity.data&&activity.data.length>0">
|
||||
<div v-for="(info, index) in activity.data" :key="index">
|
||||
<div class="timeline-row">
|
||||
<span :style="{ color: '#a8abb2' }">{{
|
||||
info.callIdNumber
|
||||
}}</span>
|
||||
<PointTag dictType="call_status" :value="info.callState"
|
||||
class="tag"/>
|
||||
<!-- <span :style="{
|
||||
color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
|
||||
}">{{ info.callState }}</span> -->
|
||||
<span class="span-3th" :style="{ color: '#a8abb2' }">{{
|
||||
info.answeredTime || '00:00:00'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div>电话拨打记录：</div>
|
||||
<div class="timebox">
|
||||
<div>
|
||||
<el-scrollbar height="20vh">
|
||||
<p v-if="opsCallList.length === 0">暂无电话拨打记录</p>
|
||||
<el-timeline style="max-width: 99%" class="timeline">
|
||||
<el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
|
||||
icon="MoreFilled" type="primary" size="large">
|
||||
<div class="custom-card">
|
||||
<div style="font-weight: bold">{{ activity.createTime }}</div>
|
||||
<div v-for="(info, index) in activity.data" :key="index">
|
||||
<div class="timeline-row">
|
||||
<span :style="{ color: '#a8abb2' }">{{ info.callIdNumber
|
||||
}}</span>
|
||||
<PointTag dictType="call_status" :value="info.callState"
|
||||
class="tag" />
|
||||
<!-- <span :style="{
|
||||
color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
|
||||
}">{{ info.callState }}</span> -->
|
||||
<span class="span-3th" :style="{ color: '#a8abb2' }">{{
|
||||
info.answeredTime || '00:00:00' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>暂无电话拨打记录</p>
|
||||
</template>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
font-size: 27px;
|
||||
color: black;
|
||||
font-size: 27px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: white;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
.main-content span {
|
||||
padding-bottom: 5px;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 5px;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.main-content .info {
|
||||
border-bottom: 1.5px solid #e4e7ed;
|
||||
margin-bottom: 50px;
|
||||
font-size: 17px;
|
||||
border-bottom: 1.5px solid #e4e7ed;
|
||||
margin-bottom: 50px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.main-content .body {
|
||||
font-size: 17px;
|
||||
color: black
|
||||
font-size: 17px;
|
||||
color: black
|
||||
}
|
||||
|
||||
.main-content .body .textBox {
|
||||
width: 100%;
|
||||
min-height: 10vh;
|
||||
max-height: 15vh;
|
||||
border: 1.5px solid #e4e7ed;
|
||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
min-height: 10vh;
|
||||
max-height: 15vh;
|
||||
border: 1.5px solid #e4e7ed;
|
||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.main-content .body .textBox—record {
|
||||
width: 100%;
|
||||
min-height: 10vh;
|
||||
// max-height: 15vh;
|
||||
// border: 1.5px solid #e4e7ed;
|
||||
// box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
// margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
min-height: 10vh;
|
||||
// max-height: 15vh;
|
||||
// border: 1.5px solid #e4e7ed;
|
||||
// box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
// margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.main-content .body .text {
|
||||
resize: none;
|
||||
// overflow-y: auto;
|
||||
font-size: 16px;
|
||||
line-height: 25px
|
||||
resize: none;
|
||||
// overflow-y: auto;
|
||||
font-size: 16px;
|
||||
line-height: 25px
|
||||
}
|
||||
|
||||
.main-content .footer {
|
||||
color: black;
|
||||
font-size: 17px;
|
||||
color: black;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.main-content .timebox {
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
border: 1.5px solid #e4e7ed;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
// overflow-x: hidden;
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
border: 1.5px solid #e4e7ed;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||||
// overflow-x: hidden;
|
||||
}
|
||||
|
||||
.main-content .timeline {
|
||||
// width: 100%;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
// background-color: red;
|
||||
// width: 100%;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
// background-color: red;
|
||||
|
||||
}
|
||||
|
||||
.main-content .timeline-row {
|
||||
// border: 1px solid #000;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
// border: 1px solid #000;
|
||||
// border: 1px solid #000;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
// border: 1px solid #000;
|
||||
|
||||
}
|
||||
|
||||
.main-content .tag {
|
||||
align-items: center;
|
||||
// background-color: red;
|
||||
margin-left: 30px;
|
||||
align-items: center;
|
||||
// background-color: red;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.main-content .span-3th {
|
||||
// flex-grow: 1;
|
||||
// margin-right:;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-right: 100px;
|
||||
// flex-grow: 1;
|
||||
// margin-right:;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-right: 100px;
|
||||
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.custom-card span {
|
||||
padding-top: 10px;
|
||||
width: 20%;
|
||||
margin: 2px;
|
||||
padding-top: 10px;
|
||||
width: 20%;
|
||||
margin: 2px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user