901 lines
22 KiB
Vue
901 lines
22 KiB
Vue
<template>
|
||
<!-- 订单详情类型表单与表单设计 -->
|
||
<div class="step-orde-form-box">
|
||
<div class="order-top">
|
||
<div style="display: flex">
|
||
<div class="tb-box">
|
||
<img src="/public/img/11.jpg" style="height: 30px" />
|
||
</div>
|
||
<div class="title-box">
|
||
<p class="title">{{ obj.gdbt }}</p>
|
||
<div class="text-box">
|
||
<span>20208447578</span>
|
||
<div class="text-box-left">
|
||
<span
|
||
class="dian"
|
||
:class="{ bj2: obj.gdzt == '2', color1: obj.gdzt == '3', bj4: obj.gdzt == '4' }"
|
||
></span>
|
||
<span>{{obj.gdzt == '1'? '待处理': obj.gdzt == '2'? '已完结': obj.gdzt =='3'? '已退回': '已撤销'}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<FormView
|
||
:ref="(el) => (formViewRef[orderTopData.refKey] = el)"
|
||
formType="add"
|
||
handleType="returnData"
|
||
showType="view"
|
||
:defaultData="orderTopData.defaultData"
|
||
:showButton="false"
|
||
:formId="orderTopData.id"
|
||
></FormView>
|
||
</div>
|
||
<div class="steps" v-if="type != 'ycx'">
|
||
<el-steps :active="type == 'ywj' ? 1 : active" align-center>
|
||
<template v-for="(item, index) in stepList" :key="index">
|
||
<el-step :title="item.title" :description="item.description" :icon="Avatar">
|
||
<template #title>
|
||
<div
|
||
class="bzts"
|
||
:class="{
|
||
acitive: index == 1,
|
||
color1: index == 1 && type == 'yth',
|
||
color2: index == 1 && type == 'ywj'
|
||
}"
|
||
>
|
||
<span>{{ item.tooltip }}</span>
|
||
<div
|
||
class="box"
|
||
:class="{
|
||
border: index == 1,
|
||
border1: index == 1 && type == 'yth',
|
||
border2: index == 1 && type == 'ywj'
|
||
}"
|
||
></div>
|
||
</div>
|
||
<div style="line-height: 32px">{{ item.title }}</div>
|
||
<div v-if="index != 1" class="bubble">{{ item.text }}</div>
|
||
</template>
|
||
</el-step>
|
||
</template>
|
||
</el-steps>
|
||
</div>
|
||
<template v-for="item in cardList" :key="item.id">
|
||
<div class="card flex justify-center mt-20px">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="item.type == 'exploit'">
|
||
<FormView
|
||
formType="view"
|
||
handleType="returnData"
|
||
showType="view"
|
||
:defaultData="ddxxData"
|
||
:showButton="false"
|
||
:formId="item.id"
|
||
></FormView>
|
||
</template>
|
||
<template v-if="item.type == 'design'">
|
||
<LowTable :tableId="item.id" :enhanceData="item.enhanceData"> </LowTable>
|
||
</template>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="pljl">
|
||
<div class="pt-10px" style="display: flex; align-items: center; margin-bottom: 20px">
|
||
<span class="span"></span><span>评论记录</span>
|
||
</div>
|
||
<alert :data="listData"></alert>
|
||
<!-- <div class="list-box" v-for="(item, index) in listData" :key="index">
|
||
<div class="list-box-top">
|
||
<div class="list-box-top-left">
|
||
<div class="img"
|
||
><Icon icon="mingcute:user-3-fill" width="1024" height="1024" style="color: #fff"
|
||
/></div>
|
||
<p>
|
||
<span style="font-size: 14px; color: #666">{{ item.name }}</span> {{ item.sj }}</p
|
||
>
|
||
</div>
|
||
<div class="list-box-top-right">X</div>
|
||
</div>
|
||
<div class="list-box-bottom">{{ item.content }}</div>
|
||
</div>
|
||
<div>
|
||
<el-input v-model="input" style="width: 92.5%; height: 60px" placeholder="请输入评论内容" />
|
||
<el-button type="primary" class="el-buttons">发布</el-button>
|
||
</div> -->
|
||
</div>
|
||
<div class="footer">
|
||
<div class="pt-5px" style="display: flex; align-items: center; margin-bottom: 20px">
|
||
<span class="span"></span><span>操作记录</span>
|
||
</div>
|
||
<div class="footer-list pt-20px">
|
||
<el-steps :space="150" :active="czjlData.length" direction="vertical">
|
||
<template v-for="(item, index) in czjlData" :key="index">
|
||
<el-step :title="item.title" :description="item.description" last>
|
||
<template #title>
|
||
<div class="content flex h-100px">
|
||
<div
|
||
class="w-35px h-35px bg-#CCCCCC flex items-center justify-center mr-7px mt-10px ml-10px"
|
||
style="border-radius: 50%"
|
||
>
|
||
<Icon icon="mingcute:user-3-fill" :size="28" class="c-white" />
|
||
</div>
|
||
<div class="text-12px mt-10px grid grid-rows-3">
|
||
<div>
|
||
<span class="c-#999">
|
||
<span style="font-size: 14px; color: #666">{{ item.name }}</span>
|
||
{{ item.text }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span class="text c-#666">{{ item.content }}</span>
|
||
</div>
|
||
<div class="lzgd">
|
||
<span class="c-#666">来自工单：</span
|
||
><span style="color: #999 !important">{{ item.gd }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-12px ml-auto pr-40px mt-20px">
|
||
<div class="flex items-center">
|
||
<Icon icon="mingcute:time-line" :size="14" style="color: #999" />
|
||
<span class="c-#999" style="margin-left: 5px">{{ item.time }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="content-top">
|
||
<div class="list-box-top-left">
|
||
<div class="img"
|
||
><Icon icon="mingcute:user-3-fill" :size="28" style="color: #fff"
|
||
/></div>
|
||
<p>
|
||
<span style="font-size: 14px; color: #666">{{ item.name }}</span>
|
||
{{ item.text }}</p
|
||
>
|
||
</div>
|
||
<div class="list-box-top-right">
|
||
<Icon
|
||
icon="mingcute:time-line"
|
||
width="1024"
|
||
height="1024"
|
||
style="color: #999"
|
||
/>
|
||
<span style="margin-left: 5px">{{ item.time }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="content-bottom">
|
||
<div>
|
||
<p class="text">{{ item.content }}</p>
|
||
</div>
|
||
<div class="lzgd">
|
||
<span>来自工单：</span
|
||
><span style="color: #999 !important">{{ item.gd }}</span>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
</el-step>
|
||
</template>
|
||
</el-steps>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Avatar } from '@element-plus/icons-vue'
|
||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||
import alert from '@/views/lowTemplate/generalPage/workReport/components/alert.vue'
|
||
|
||
defineOptions({ name: 'OrderForm' })
|
||
interface Props {
|
||
type?: string //控件名称
|
||
obj: {
|
||
gdbt: string
|
||
gdzt: string
|
||
}
|
||
}
|
||
|
||
const popupShow = defineModel({ default: false, type: Boolean })
|
||
const props = defineProps<Props>()
|
||
|
||
|
||
const listData = reactive([
|
||
{
|
||
id: 1,
|
||
imgUrl:
|
||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||
name: '赵小刚',
|
||
time: '2019-03-23 22:31',
|
||
content: '这个客户是我们的重点客户，请相关同事尽快帮忙落实解决。'
|
||
},
|
||
{
|
||
id: 2,
|
||
imgUrl:
|
||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||
name: '赵小刚',
|
||
time: '2019-03-23 22:31',
|
||
content: '这个客户是我们的重点客户，请相关同事尽快帮忙落实解决。'
|
||
},
|
||
{
|
||
id: 3,
|
||
imgUrl:
|
||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||
name: '赵小刚',
|
||
time: '2019-03-23 22:31',
|
||
content: '这个客户是我们的重点客户，请相关同事尽快帮忙落实解决。'
|
||
}
|
||
])
|
||
|
||
const orderTopData = ref({
|
||
type: 'exploit',
|
||
refKey: 'gdgl',
|
||
id: '1844943768151142401',
|
||
defaultData: {
|
||
gdbh: '202062976600',
|
||
gdbt: '处理客户反馈问题',
|
||
gdzt: 1,
|
||
lx: props.type
|
||
}
|
||
})
|
||
|
||
const active = ref(0)
|
||
|
||
const stepList = ref([
|
||
{
|
||
title: '小明',
|
||
tooltip: '提交',
|
||
description: '2020-11-25 23:26:08',
|
||
text: '已等待12小时30分钟'
|
||
},
|
||
{
|
||
title: '赵小刚',
|
||
tooltip: `${props.type == 'yth' ? '退回' : '完结'}`,
|
||
description: '待处理'
|
||
}
|
||
])
|
||
|
||
const czjlData = ref([
|
||
{
|
||
title: '',
|
||
description: '08-23',
|
||
text: '销售经理',
|
||
name: '赵小刚',
|
||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||
gd: '工单标题',
|
||
time: '2020-12-23 22:31'
|
||
},
|
||
{
|
||
title: '',
|
||
description: '08-23',
|
||
text: '销售经理',
|
||
name: '赵小刚',
|
||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||
gd: '工单标题',
|
||
time: '2020-12-23 22:31'
|
||
},
|
||
{
|
||
title: '',
|
||
description: '08-23',
|
||
text: '销售经理',
|
||
name: '赵小刚',
|
||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||
gd: '工单标题',
|
||
time: '2020-12-23 22:31'
|
||
},
|
||
{
|
||
title: '',
|
||
description: '08-23',
|
||
text: '销售经理',
|
||
name: '赵小刚',
|
||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||
gd: '工单标题',
|
||
time: '2020-12-23 22:31'
|
||
},
|
||
{
|
||
title: '',
|
||
description: '08-23',
|
||
text: '销售经理',
|
||
name: '赵小刚',
|
||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||
gd: '工单标题',
|
||
time: '2020-12-23 22:31'
|
||
}
|
||
])
|
||
|
||
const ddxxData = ref({
|
||
gdbh: '20208447578',
|
||
glkh: 1,
|
||
gldd: 1,
|
||
gdzz: 1,
|
||
jycd: 1,
|
||
tjry: '李小明',
|
||
tjbm: '销售部',
|
||
clry: '赵小刚',
|
||
clbm: '技术部',
|
||
tjsj: '2020-11-25 23:26:08',
|
||
csry: '无',
|
||
gdms: '客户反馈产品使用中遇到问题，希望技术协助。'
|
||
})
|
||
|
||
const cardList = ref([
|
||
{
|
||
title: '工单详情',
|
||
type: 'exploit',
|
||
id: '1845002998170267649',
|
||
defaultData: ddxxData.value
|
||
},
|
||
{
|
||
title: '附件记录',
|
||
type: 'design',
|
||
id: '1845012516400803842',
|
||
enhanceData: {
|
||
hideHeader: 'disabled'
|
||
}
|
||
}
|
||
])
|
||
|
||
const formViewRef = ref({})
|
||
const formData = ref({})
|
||
|
||
const setNextForm = () => {
|
||
const currStep = orderTopData.value
|
||
if (currStep.id) {
|
||
setTimeout(async () => {
|
||
// const formRef = formViewRef.value[currStep.refKey].controlRef
|
||
// const data = await formRef.handleSubmit(true)
|
||
}, 600)
|
||
|
||
// formData.value[currStep.refKey] = data
|
||
}
|
||
}
|
||
setNextForm()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.step-orde-form-box {
|
||
.order-top {
|
||
display: flex;
|
||
height: 80px;
|
||
padding: 20px 25px;
|
||
margin-bottom: 20px;
|
||
background-color: #fff;
|
||
border: 1px solid rgb(233 233 233 / 100%);
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.tb-box {
|
||
display: flex;
|
||
width: 50px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
justify-content: center;
|
||
text-align: center;
|
||
background: #52c1f5;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-box {
|
||
margin-left: 20px;
|
||
|
||
.title {
|
||
padding: 0;
|
||
margin: 0;
|
||
margin-bottom: 5px;
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #666;
|
||
}
|
||
|
||
.text-box {
|
||
display: flex;
|
||
font-family: '微软雅黑', sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666;
|
||
align-items: center;
|
||
|
||
.text-box-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.dian {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
margin-right: 5px;
|
||
margin-left: 10px;
|
||
background: #f90;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.steps {
|
||
width: calc(90% + 40px);
|
||
height: 90px;
|
||
padding: 60px 0 30px;
|
||
margin: 0 auto 20px;
|
||
background-color: #fff;
|
||
border: 1px solid rgb(233 233 233 / 100%);
|
||
border-radius: 10px;
|
||
|
||
::v-deep(.el-steps) {
|
||
margin-top: 9px;
|
||
|
||
.el-step {
|
||
.el-step__head.is-process {
|
||
color: #409eff;
|
||
|
||
.el-step__icon.is-text {
|
||
color: white;
|
||
background-color: #409eff;
|
||
border-color: #409eff;
|
||
}
|
||
}
|
||
|
||
.el-step__icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
color: #fff;
|
||
background: #ccc;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.el-step__head {
|
||
.el-step__line {
|
||
top: 30px;
|
||
height: 5px;
|
||
margin-right: 40px;
|
||
margin-left: 40px;
|
||
}
|
||
|
||
.el-step__icon.is-text {
|
||
width: 25px;
|
||
height: 30px;
|
||
|
||
.el-step__icon-inner {
|
||
font-size: 20px;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-step__main {
|
||
.el-step__title {
|
||
// position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 25px;
|
||
color: #666;
|
||
}
|
||
|
||
.el-step__description {
|
||
height: 28px;
|
||
font-size: 12px;
|
||
line-height: 28px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .card > .el-card {
|
||
width: calc(90% + 40px);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.card {
|
||
width: 100%;
|
||
|
||
// &>::v-deep(.crud){
|
||
// width: calc(90% + 40px);
|
||
// }
|
||
|
||
::v-deep(.el-card) {
|
||
// width: calc(90% + 40px);
|
||
|
||
.el-card__header {
|
||
height: 60px;
|
||
background-color: #f9f9f9;
|
||
|
||
.card-header {
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.el-card__body {
|
||
.avue-crud {
|
||
.el-card {
|
||
margin: 0 auto;
|
||
border-radius: 0;
|
||
|
||
.el-table__header {
|
||
height: 55px;
|
||
|
||
th {
|
||
height: 55px;
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #666;
|
||
background-color: #f2f2f2;
|
||
}
|
||
}
|
||
|
||
.el-table__body {
|
||
.el-table__row {
|
||
.el-table__cell {
|
||
font-size: 14px;
|
||
border-right: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .avue--detail .el-col,
|
||
::v-deep .avue--detail .el-row {
|
||
border: 0 !important;
|
||
}
|
||
|
||
// ::v-deep .avue--detail .el-row {
|
||
// border-top: 1px solid #fff !important;
|
||
// border-left: 1px solid #fff !important;
|
||
// }
|
||
|
||
.bzts {
|
||
position: absolute;
|
||
top: 25px;
|
||
width: 64px;
|
||
height: 26px;
|
||
margin-top: -70px;
|
||
margin-left: -3px;
|
||
line-height: 26px;
|
||
color: #fff;
|
||
text-align: center;
|
||
background: #409eff;
|
||
inherits: 0;
|
||
|
||
.box {
|
||
position: absolute;
|
||
top: 26px;
|
||
left: 25px;
|
||
z-index: 999999999999999999;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 8px solid #409eff;
|
||
border-right: 10px solid transparent;
|
||
border-left: 8px solid transparent;
|
||
}
|
||
}
|
||
|
||
.bubble {
|
||
position: absolute;
|
||
top: -20px;
|
||
right: -80px;
|
||
padding: 2px 8px;
|
||
font-family: '微软雅黑', sans-serif;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
color: #999;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.acitive {
|
||
background: #ccc !important;
|
||
}
|
||
|
||
.border {
|
||
border-top: 8px solid #ccc !important;
|
||
}
|
||
|
||
.pljl {
|
||
// display: flex;
|
||
margin: 30px 50px;
|
||
|
||
.span {
|
||
display: inline-block;
|
||
width: 7px;
|
||
height: 19px;
|
||
margin-right: 10px;
|
||
background: #409eff;
|
||
}
|
||
|
||
::v-deep(.el-alert) {
|
||
.el-alert__description {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
// .list-box {
|
||
// width: 100%;
|
||
// padding: 20px;
|
||
// margin-bottom: 20px;
|
||
// background: #fcfcfc;
|
||
// border: 1px solid #e9e9e9;
|
||
|
||
// .list-box-top {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
|
||
// .list-box-top-left {
|
||
// display: flex;
|
||
// font-family: '微软雅黑', sans-serif;
|
||
// font-size: 12px;
|
||
// font-weight: 400;
|
||
// color: #999;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
|
||
// .img {
|
||
// display: flex;
|
||
// width: 28px;
|
||
// height: 28px;
|
||
// margin-right: 10px;
|
||
// background: #ccc;
|
||
// border-radius: 50%;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
// .list-box-bottom {
|
||
// font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
// font-style: normal;
|
||
// font-weight: 400;
|
||
// line-height: 22px;
|
||
// color: #999;
|
||
// text-align: left;
|
||
// }
|
||
// }
|
||
}
|
||
|
||
.footer {
|
||
margin: 30px 50px;
|
||
margin-bottom: 0;
|
||
|
||
.span {
|
||
display: inline-block;
|
||
width: 7px;
|
||
height: 19px;
|
||
margin-right: 10px;
|
||
background: #409eff;
|
||
}
|
||
|
||
.footer-list {
|
||
width: 100%;
|
||
// height: 200px;
|
||
// padding: 20px;
|
||
|
||
::v-deep(.el-steps) {
|
||
.el-step.is-vertical {
|
||
.el-step__head {
|
||
&::after {
|
||
top: 20px !important;
|
||
width: 1px !important;
|
||
}
|
||
|
||
.el-step__line {
|
||
top: -10px;
|
||
bottom: -10px;
|
||
width: 1px;
|
||
margin-top: 25px;
|
||
background-color: #f2f2f2;
|
||
|
||
.el-step__line-inner {
|
||
border-color: #f2f2f2;
|
||
border-width: 0 !important;
|
||
}
|
||
}
|
||
|
||
.el-step__icon {
|
||
width: 10px !important;
|
||
height: 10px;
|
||
margin-top: 9px;
|
||
margin-left: 7px;
|
||
overflow: hidden;
|
||
|
||
.el-step__icon-inner {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-step__main {
|
||
.el-step__description.is-finish {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-step:last-child {
|
||
.el-step__head::after {
|
||
position: absolute;
|
||
top: 25px;
|
||
right: 11px;
|
||
z-index: 1;
|
||
display: block;
|
||
width: 10%;
|
||
height: 110px;
|
||
background-color: #f2f2f2;
|
||
border-color: red;
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 53px;
|
||
width: 95.5%;
|
||
// padding: 10px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 5px rgb(0 0 0 / 9.8%);
|
||
|
||
// .content-top {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// width: 100%;
|
||
|
||
// .list-box-top-left {
|
||
// display: flex;
|
||
// font-family: '微软雅黑', sans-serif;
|
||
// font-size: 12px;
|
||
// font-weight: 400;
|
||
// color: #999;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
|
||
// .img {
|
||
// display: flex;
|
||
// width: 35px;
|
||
// height: 35px;
|
||
// margin-right: 10px;
|
||
// background: #ccc;
|
||
// border-radius: 50%;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// }
|
||
// }
|
||
|
||
// .list-box-top-right {
|
||
// display: flex;
|
||
// font-family: '微软雅黑', sans-serif;
|
||
// font-size: 12px;
|
||
// font-weight: 400;
|
||
// line-height: 20px;
|
||
// color: #999;
|
||
// align-items: center;
|
||
// }
|
||
// }
|
||
|
||
// .content-bottom {
|
||
// margin-top: -10px;
|
||
// margin-left: 40px;
|
||
// font-size: 12px;
|
||
|
||
// p {
|
||
// padding: 0;
|
||
// margin: 0;
|
||
// }
|
||
|
||
// .text {
|
||
// font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
// font-size: 12px;
|
||
// font-style: normal;
|
||
// font-weight: 400;
|
||
// line-height: 20px;
|
||
// color: #666;
|
||
// text-align: left;
|
||
// }
|
||
|
||
// .lzgd {
|
||
// font-family: '微软雅黑', sans-serif;
|
||
// font-size: 12px;
|
||
// font-style: normal;
|
||
// font-weight: 400;
|
||
// color: #666;
|
||
// text-align: left;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep(.el-steps) {
|
||
.el-step__head {
|
||
.el-step__line {
|
||
background-color: var(--el-color-info-light-7);
|
||
}
|
||
|
||
.el-step__icon {
|
||
width: 30px;
|
||
}
|
||
|
||
&.is-finish {
|
||
.el-step__line {
|
||
background-color: var(--el-color-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-step:not(:last-child) {
|
||
.el-step__head {
|
||
&.is-process::before {
|
||
position: absolute;
|
||
top: calc(50% + 11px);
|
||
right: -40px;
|
||
z-index: 1;
|
||
display: block;
|
||
width: 50%;
|
||
height: 5px;
|
||
background-color: var(--el-color-primary);
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-textarea__inner {
|
||
padding: 10px !important;
|
||
color: #7e667e !important;
|
||
background: #fcfcfc !important;
|
||
}
|
||
|
||
::v-deep .el-input__wrapper {
|
||
border-radius: 0;
|
||
}
|
||
|
||
::v-deep .el-buttons {
|
||
height: 60px;
|
||
padding: 20px 30px;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.color1 {
|
||
background: #f56c6c !important;
|
||
}
|
||
|
||
.border1 {
|
||
border-top: 8px solid #f56c6c !important;
|
||
}
|
||
|
||
.color2 {
|
||
background: #19be6b !important;
|
||
}
|
||
|
||
.border2 {
|
||
border-top: 8px solid #19be6b !important;
|
||
}
|
||
|
||
.bj2 {
|
||
background: #19be6b !important;
|
||
}
|
||
|
||
.bj4 {
|
||
background: #ccc !important;
|
||
}
|
||
</style>
|