745 lines
21 KiB
Vue
745 lines
21 KiB
Vue
<template>
|
||
<div class="mainBox">
|
||
<!-- 第一部分：姓名和电话 -->
|
||
<div class="titleOut">第一步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">添加客户</span>
|
||
</div>
|
||
<el-form :model="step1Form" ref="step1Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step1Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.phone"
|
||
placeholder="电话"
|
||
maxlength="11"
|
||
show-word-limit
|
||
:rules="[
|
||
{ required: true, message: '请输入电话号码', trigger: 'blur' },
|
||
{ pattern: /^[0-9]{10,11}$/, message: '请输入有效的电话号码', trigger: ['blur', 'change'] }
|
||
]"
|
||
></el-input>
|
||
</el-col>
|
||
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step1Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step1Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step1Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step1Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 第二部分：姓名和销售 -->
|
||
<div class="titleOut">第二步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">用户配置销售</span>
|
||
</div>
|
||
<el-form :model="step2Form" ref="step2Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step2Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<!-- <el-input-->
|
||
<!-- size="mini"-->
|
||
<!-- v-model="field.xiaoshou"-->
|
||
<!-- placeholder="销售"-->
|
||
<!-- :rules="[{ required: true, message: '请输入销售数据', trigger: 'blur' }]"-->
|
||
<!-- ></el-input>-->
|
||
|
||
<el-select size="mini" v-model="field.xiaoshou" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in saleList"
|
||
:key="item.id"
|
||
:label="item.username"
|
||
:value="item.username">
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
|
||
<el-col :span="4">
|
||
<el-button size="mini" :disabled="step2Form.fields.length<1" type="danger"
|
||
@click.prevent="removeField(index, 'step2Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step2Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step2Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step2Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 第三部分：姓名和金额 -->
|
||
<div class="titleOut">第三步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">用户充值</span>
|
||
</div>
|
||
<el-form :model="step3Form" ref="step3Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step3Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.money"
|
||
placeholder="金额"
|
||
:rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step3Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step3Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step3Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step3Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 第四部部分：姓名和金额 -->
|
||
<div class="titleOut">第四步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">产品下单</span>
|
||
</div>
|
||
<el-form :model="step4Form" ref="step4Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step4Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.money"
|
||
placeholder="金额"
|
||
:rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-date-picker
|
||
v-model="field.stime"
|
||
type="date"
|
||
size="mini"
|
||
placeholder="销售时间"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step4Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step4Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step4Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step4Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 第五部部分：姓名和金额 -->
|
||
<div class="titleOut">第五步 <span style="margin: 0 10px">-</span> <span style="font-size: 20px">确认支付</span>
|
||
</div>
|
||
<el-form :model="step5Form" ref="step5Form" label-width="100px" class="demo-dynamic">
|
||
<el-form-item
|
||
v-for="(field, index) in step5Form.fields"
|
||
:label=" ''+(index + 1)+'.'"
|
||
:key="field.key"
|
||
:prop="'fields.' + index"
|
||
>
|
||
<el-row :gutter="24">
|
||
<el-col :span="4">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.name"
|
||
placeholder="姓名"
|
||
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.money"
|
||
placeholder="金额"
|
||
:rules="[{ required: true, message: '请输入金额', trigger: 'blur' }]"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-date-picker
|
||
v-model="field.stime"
|
||
type="date"
|
||
size="mini"
|
||
placeholder="开始时间"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-date-picker
|
||
v-model="field.etime"
|
||
type="date"
|
||
size="mini"
|
||
placeholder="结束时间"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button size="mini" type="danger" @click.prevent="removeField(index, 'step5Form', 'fields')">删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<ul class="typeStyle">
|
||
<li>分类1：
|
||
<el-input
|
||
size="mini"
|
||
v-model="field.type1"
|
||
placeholder="请输入分类1"
|
||
:rules="[{ required: true, message: '请输入分类1', trigger: 'blur' }]"
|
||
></el-input>
|
||
</li>
|
||
<li>分类2：
|
||
<el-input
|
||
:disabled="!field.type1"
|
||
size="mini"
|
||
v-model="field.type2"
|
||
placeholder="请输入分类2"
|
||
:rules="[{ required: true, message: '请输入分类2', trigger: 'blur' }]"
|
||
></el-input>
|
||
</li>
|
||
<li>分类3：
|
||
<el-input
|
||
size="mini"
|
||
:disabled="!field.type1||!field.type2"
|
||
v-model="field.type3"
|
||
placeholder="请输入分类3"
|
||
:rules="[{ required: true, message: '请输入分类3', trigger: 'blur' }]"
|
||
></el-input>
|
||
</li>
|
||
</ul>
|
||
</el-form-item>
|
||
<!-- 提交和添加字段按钮 -->
|
||
<el-form-item>
|
||
<el-button size="mini" type="primary" @click="submitForm('step5Form')">提交</el-button>
|
||
<el-button size="mini" @click="addField('step5Form', 'fields')">新增条目</el-button>
|
||
<!-- <el-button size="mini" @click="resetForm('step5Form')">重置</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
reqAddSaleRevenueFive, reqAddSaleRevenueFour,
|
||
reqAddSaleRevenueOne,
|
||
reqAddSaleRevenueTHree,
|
||
reqAddSaleRevenueTwo
|
||
} from "@/api/operation/importSalesRevenue";
|
||
import {reqGetSaleManList} from "@/api/operation/analyze";
|
||
|
||
export default {
|
||
name: "importSalesRevenue",
|
||
data() {
|
||
return {
|
||
saleList: [],
|
||
// 第一部分的表单数据
|
||
step1Form: {
|
||
fields: [{key: Date.now(), phone: '', name: ''}],
|
||
},
|
||
// 第二部分的表单数据
|
||
step2Form: {
|
||
fields: [{key: Date.now(), name: '', xiaoshou: ''}],
|
||
},
|
||
// 第三部分的表单数据
|
||
step3Form: {
|
||
fields: [{key: Date.now(), name: '', money: ''}],
|
||
},
|
||
// 第四部分的表单数据
|
||
step4Form: {
|
||
fields: [{key: Date.now(), name: '', money: '', stime: ''}],
|
||
},
|
||
step5Form: {
|
||
fields: [{key: Date.now(), name: '', money: '', stime: '', etime: '', type1: '', type2: '', type3: ''}],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
reqGetSaleManList().then(res => {
|
||
if (res.status) {
|
||
this.saleList = res.data
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
console.log(this[formName].fields);
|
||
if (formName === 'step1Form') {
|
||
reqAddSaleRevenueOne({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
this[formName].fields = [{key: Date.now(), phone: '', name: ''}]
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else if (formName === 'step2Form') {
|
||
reqAddSaleRevenueTwo({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else if (formName === 'step3Form') {
|
||
reqAddSaleRevenueTHree({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else if (formName === 'step4Form') {
|
||
reqAddSaleRevenueFour({data: this[formName].fields}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
} else {
|
||
let res = []
|
||
let arr = this[formName].fields
|
||
for (let i = 0; i < arr.length; i++) {
|
||
let item = {
|
||
name: arr[i].name,
|
||
money: arr[i].money,
|
||
stime: arr[i].stime,
|
||
etime: arr[i].etime,
|
||
resource_type: ''
|
||
}
|
||
if (arr[i].type3) {
|
||
item.resource_type = arr[i].type1 + "-" + arr[i].type2 + "-" + arr[i].type3
|
||
} else if (arr[i].type2) {
|
||
item.resource_type = arr[i].type1 + "-" + arr[i].type2
|
||
} else {
|
||
item.resource_type = arr[i].type1
|
||
}
|
||
res.push(item)
|
||
}
|
||
// let ploay = {
|
||
// data: res
|
||
// }
|
||
reqAddSaleRevenueFive({data: res}).then(res => {
|
||
if (res.status) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
} else {
|
||
console.log('提交出错！');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
this[formName].fields = [{key: Date.now(), name: '', phone: '', xiaoshou: '', money: ''}].filter(f => {
|
||
if (formName === 'step1Form') return f.phone !== undefined;
|
||
if (formName === 'step2Form') return f.xiaoshou !== undefined;
|
||
if (formName === 'step3Form') return f.money !== undefined;
|
||
});
|
||
},
|
||
addField(formName, fieldType) {
|
||
this[formName][fieldType].push({
|
||
key: Date.now(),
|
||
name: '',
|
||
phone: formName === 'step1Form' ? '' : undefined,
|
||
xiaoshou: formName === 'step2Form' ? '' : undefined,
|
||
money: formName === 'step3Form' ? '' : undefined,
|
||
});
|
||
},
|
||
removeField(index, formName, fieldType) {
|
||
this[formName][fieldType].splice(index, 1);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.mainBox {
|
||
padding: 24px;
|
||
height: calc(100vh - 100px);
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
||
overflow-y: auto;
|
||
|
||
// 步骤容器样式
|
||
.step-container {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 24px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 步骤标题样式
|
||
.titleOut {
|
||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
padding: 16px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
|
||
&::before {
|
||
content: '';
|
||
width: 6px;
|
||
height: 20px;
|
||
background: white;
|
||
margin-right: 12px;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
|
||
// 表单样式优化
|
||
.demo-dynamic {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
|
||
::v-deep .el-form-item {
|
||
margin-bottom: 20px;
|
||
padding: 16px;
|
||
border-radius: 6px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background-color: #f8fafc;
|
||
}
|
||
|
||
&:last-of-type {
|
||
background: none;
|
||
border-top: 1px dashed #e4e7ed;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-form-item__label {
|
||
font-weight: 600;
|
||
color: #606266;
|
||
font-size: 14px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
// 输入框样式
|
||
::v-deep .el-input,
|
||
::v-deep .el-select,
|
||
::v-deep .el-date-editor {
|
||
width: 100%;
|
||
|
||
.el-input__inner {
|
||
border-radius: 4px;
|
||
transition: all 0.3s;
|
||
|
||
&:focus {
|
||
border-color: #409eff;
|
||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 按钮样式
|
||
::v-deep .el-button {
|
||
border-radius: 4px;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
|
||
&.el-button--primary {
|
||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||
border: none;
|
||
|
||
&:hover {
|
||
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
&.el-button--danger {
|
||
background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
|
||
border: none;
|
||
|
||
&:hover {
|
||
background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
|
||
}
|
||
|
||
&:disabled {
|
||
background: #c0c4cc;
|
||
transform: none;
|
||
box-shadow: none;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
|
||
&.el-button--default {
|
||
&:hover {
|
||
color: #409eff;
|
||
border-color: #409eff;
|
||
transform: translateY(-1px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 分类样式优化
|
||
.typeStyle {
|
||
padding: 16px;
|
||
margin-top: 16px;
|
||
// background: #f8fafc;
|
||
border-radius: 6px;
|
||
// border-left: 4px solid #409eff;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
min-width: 200px;
|
||
|
||
&::before {
|
||
content: '•';
|
||
color: #409eff;
|
||
margin-right: 8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.el-input {
|
||
flex: 1;
|
||
margin-left: 8px;
|
||
|
||
&.is-disabled .el-input__inner {
|
||
background-color: #f5f7fa;
|
||
border-color: #e4e7ed;
|
||
color: #c0c4cc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式设计
|
||
@media (max-width: 768px) {
|
||
.mainBox {
|
||
padding: 16px;
|
||
}
|
||
|
||
.demo-dynamic {
|
||
padding: 12px;
|
||
|
||
::v-deep .el-row {
|
||
margin: 0 -8px;
|
||
}
|
||
|
||
::v-deep .el-col {
|
||
padding: 0 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
.typeStyle {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
|
||
li {
|
||
min-width: 100%;
|
||
}
|
||
}
|
||
|
||
// 小屏幕下按钮堆叠
|
||
::v-deep .el-form-item:last-of-type {
|
||
.el-button {
|
||
margin-bottom: 8px;
|
||
width: 100%;
|
||
|
||
& + .el-button {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 步骤进度指示器（可选添加）
|
||
.step-progress {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 24px;
|
||
padding: 0 20px;
|
||
|
||
.step {
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: #e4e7ed;
|
||
z-index: 1;
|
||
}
|
||
|
||
&:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
.step-number {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: #e4e7ed;
|
||
color: #909399;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 8px;
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.step-title {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
&.active {
|
||
.step-number {
|
||
background: #409eff;
|
||
color: white;
|
||
}
|
||
|
||
.step-title {
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加载和状态提示优化
|
||
::v-deep .el-message {
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
||
&.el-message--success {
|
||
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||
border-color: #91d5ff;
|
||
}
|
||
|
||
&.el-message--error {
|
||
background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
|
||
border-color: #ffccc7;
|
||
}
|
||
}
|
||
|
||
// 表单验证状态
|
||
::v-deep .el-form-item.is-error {
|
||
.el-input__inner,
|
||
.el-textarea__inner {
|
||
border-color: #f56c6c;
|
||
|
||
&:focus {
|
||
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-form-item.is-success {
|
||
.el-input__inner,
|
||
.el-textarea__inner {
|
||
border-color: #67c23a;
|
||
}
|
||
}
|
||
</style>
|