From 6565eb74d006296fe67a386e1c48abdb0f2fe7c2 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 12 五月 2025 09:21:32 +0800
Subject: [PATCH] feat
---
laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue | 901 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 709 insertions(+), 192 deletions(-)
diff --git a/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue b/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue
index 8765f17..d31d6ae 100644
--- a/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue
+++ b/laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue
@@ -1,146 +1,218 @@
<template>
- <el-dialog
- :title="dialogTitle"
- :visible.sync="visible"
- width="80%"
- :close-on-click-modal="false"
- @close="handleClose"
- >
- <div class="approval-dialog">
- <!-- 左侧审批内容 -->
- <div class="approval-content">
- <Card class="approval-content-card">
- <template style="position: relative">
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <span>项目课题方案信息</span>
- </div>
- </div>
- <el-form
- ref="form"
- :model="form"
- :rules="rules"
- inline
- label-position="top"
- style="margin-top: 38px"
- >
- <el-form-item prop="name" label="项目课题方案名称">
- <el-input v-model="form.name" placeholder="请输入" />
- </el-form-item>
- <el-form-item prop="description" label="项目阶段">
- <el-input v-model="form.description" placeholder="请输入" />
- </el-form-item>
- <el-form-item prop="description" label="项目课题方案编号">
- <el-input v-model="form.description" placeholder="请输入" />
- </el-form-item>
- </el-form>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>一 、实验目的</div>
- </div>
- </div>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>二 、实验拆料和设备</div>
- </div>
- </div>
- <div class="item-title">
- <span>1.实验材料</span>
- </div>
- <div class="item-title">
- <span>2.实验设备</span>
- </div>
+ <div>
+ <el-dialog
+ title="实验方案详情"
+ :visible.sync="visible"
+ width="80%"
+ :close-on-click-modal="false"
+ @close="handleClose"
+ >
+ <div class="approval-dialog">
+ <!-- 左侧审批内容 -->
+ <div class="approval-content">
+ <Card class="approval-content-card">
+ <template style="position: relative">
+ <el-form
+ ref="form"
+ :model="form"
+ :rules="rules"
+ inline
+ label-position="top"
+ :disabled="type === 'view'"
+ >
+ <div class="header-title" style="margin-bottom: 38px">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>所属实验调度</div>
+ </div>
+ </div>
+ <Table :data="groupTableData" :total="0" :height="null">
+ <el-table-column
+ type="index"
+ label="序号"
+ width="80"
+ ></el-table-column>
+ <el-table-column
+ prop="groupName"
+ label="组别"
+ ></el-table-column>
+ <el-table-column prop="remark" label="备注"></el-table-column>
+ </Table>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>三 、检测方法及开发</div>
- </div>
- </div>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>四 、实验步骤</div>
- </div>
- </div>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>五 、数据采集及分析</div>
- </div>
- </div>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <div>六 、结果评估</div>
- </div>
- </div>
- <div class="header-title">
- <div class="header-title-left">
- <img src="@/assets/public/headercard.png" />
- <span>注意事项</span>
- </div>
- </div>
- </template>
- <SelectMember ref="selectMember" />
- </Card>
- </div>
- <!-- 右侧审批流程 -->
- <div class="approval-flow">
- <div class="flow-content">
- <approval-process
- :status="form.status"
- :submit-time="form.createTime"
- :approver="form.approver"
- :approve-time="form.approveTime"
- />
+ <div class="header-title" style="margin-bottom: 38px">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <span>基础信息</span>
+ </div>
+ </div>
+
+ <div class="add-group">
+ <span>组别列表</span>
+ </div>
+ <Table
+ :data="groupTableData"
+ :total="0"
+ :height="null"
+ class="groupTable"
+ >
+ <el-table-column
+ type="index"
+ label="序号"
+ width="80"
+ ></el-table-column>
+ <el-table-column
+ prop="groupName"
+ label="组别"
+ ></el-table-column>
+ <el-table-column prop="remark" label="备注"></el-table-column>
+ </Table>
+
+ <div style="padding-left: 25px; margin-top: 20px">
+ <el-form-item prop="testTime" label="试验时间">
+ <el-date-picker
+ v-model="form.testTime"
+ type="datetime"
+ placeholder="选择日期时间"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ />
+ </el-form-item>
+ </div>
+ <div class="add-group">
+ <div>*</div>
+ <span>实验人员</span>
+ </div>
+ <div class="member-list">
+ <div v-for="item in 3" :key="item" class="member-list-card">
+ <div class="member-item">
+ <div class="member-title">
+ {{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
+ </div>
+ <div
+ :class="
+ item == 1 || item == 2 || item == 3
+ ? 'member-name-box'
+ : 'flex1'
+ "
+ >
+ <div
+ :class="
+ item == 1 || item == 2 || item == 3
+ ? 'member-name-box'
+ : 'member-name-box-2'
+ "
+ >
+ <div
+ v-for="i in memberList(item)"
+ :key="i"
+ class="member-name"
+ >
+ 张三
+ </div>
+ </div>
+ </div>
+ <div class="member-change" v-if="type !== 'view'">
+ <div class="member-change-btn">修改</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="header-title" style="margin-bottom: 38px">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>一、实验目的</div>
+ </div>
+ </div>
+ <AiEditor
+ ref="purposeEditor"
+ v-model="form.purpose"
+ height="200px"
+ placeholder="请输入实验目的..."
+ />
+
+ <div class="header-title" style="margin-bottom: 38px">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>二、工艺参数及路线</div>
+ </div>
+ </div>
+ <AiEditor
+ ref="processEditor"
+ v-model="form.process"
+ height="200px"
+ placeholder="请输入工艺参数及路线..."
+ />
+
+ <div class="header-title" style="margin-bottom: 38px">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>三、实验材料及设备</div>
+ </div>
+ </div>
+ <ViewDynamicComponent
+ title="实验材料"
+ :components="form.materialsAndEquipment || []"
+ />
+ <ViewDynamicComponent
+ title="实验所用设备"
+ :components="form.materialsAndEquipment || []"
+ />
+
+ <div class="header-title" style="margin-bottom: 38px">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>四、实验操作步骤记录</div>
+ </div>
+ </div>
+
+ <div class="step-list" v-for="(item, idx) in form.operationSteps" :key="idx">
+ <div class="step-list-item">
+ <div class="step-list-item-title">
+ 步骤{{ idx + 1 }}：{{ item.stepName }}
+ </div>
+ </div>
+ <ViewDynamicComponent
+ :ref="'stepContent' + idx"
+ :components="[item]"
+ />
+ </div>
+ </el-form>
+ </template>
+ </Card>
</div>
- </div>
- </div>
- <div class="approval-dialog-approve">
- <div class="status">
- <div class="status-title">审批结果</div>
- <div class="status-content">
- <div
- class="resolve"
- :class="status == '1' && 'activeStatus'"
- @click.stop="status = 1"
- >
- 通过
- </div>
- <div
- class="reject"
- :class="status == '2' && 'activeStatus'"
- @click.stop="status = 2"
- >
- 驳回
+ <!-- 右侧审批流程 -->
+ <div class="approval-flow" v-if="type === 'view'">
+ <div class="flow-content">
+ <approval-process
+ :status="form.status"
+ :submit-time="form.createTime"
+ :approver="form.approver"
+ :approve-time="form.approveTime"
+ />
</div>
</div>
</div>
- <div class="remark">
- <div class="remark-title">审批意见</div>
- <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
- </div>
- </div>
- <div slot="footer" class="dialog-footer">
- <el-button @click="handleClose">取 消</el-button>
- <el-button type="primary" @click="handleApprove" v-if="type === 'approve'"
- >通过</el-button
- >
- </div>
- </el-dialog>
+ </el-dialog>
+ <SignatureCanvas
+ :visible="signatureDialogVisible"
+ @confirm="handleSignatureConfirm"
+ />
+ </div>
</template>
<script>
-import ApprovalProcess from '@/components/approvalProcess'
+import ApprovalProcess from "@/components/approvalProcess";
+import SignatureCanvas from "@/components/SignatureCanvas.vue";
+import ViewDynamicComponent from "@/components/DynamicComponent/ViewDynamicComponent.vue";
+import AiEditor from "@/components/AiEditor/index.vue";
export default {
name: "ApprovalDialog",
components: {
- ApprovalProcess
+ ApprovalProcess,
+ SignatureCanvas,
+ ViewDynamicComponent,
+ AiEditor,
},
props: {
visible: {
@@ -162,35 +234,214 @@
planName: "",
planCode: "",
stage: "",
+ testDate: "",
+ testName: "",
+ testCode: "",
+ testTime: "",
creator: "",
createTime: "",
approvalComment: "",
- status: "pending",
+ status: "approved",
approver: "",
- approveTime: ""
+ approveTime: "",
+ materialsAndEquipment: [
+ {
+ id: 1,
+ type: "richText",
+ data: {
+ content:
+ "<p>1. 实验材料说明</p><p>2. 设备使用说明</p><p>3. 安全注意事项</p>",
+ },
+ },
+ {
+ id: 2,
+ type: "customTable",
+ data: {
+ headers: [
+ { name: "材料名称", type: "text" },
+ { name: "规格", type: "text" },
+ { name: "数量", type: "text" },
+ { name: "用途", type: "text" },
+ ],
+ rows: [
+ {
+ 材料名称: "催化剂A",
+ 规格: "工业级",
+ 数量: "100g",
+ 用途: "反应催化剂",
+ updateTime: "2024-01-01 12:00:00",
+ },
+ {
+ 材料名称: "溶剂B",
+ 规格: "分析纯",
+ 数量: "500ml",
+ 用途: "反应溶剂",
+ updateTime: "2024-01-01 12:00:00",
+ },
+ ],
+ },
+ },
+ {
+ id: 3,
+ type: "fileUpload",
+ data: {
+ fileList: [
+ {
+ name: "材料安全说明书.pdf",
+ url: "https://example.com/msds.pdf",
+ },
+ {
+ name: "设备操作手册.docx",
+ url: "https://example.com/manual.docx",
+ },
+ ],
+ },
+ },
+ {
+ id: 4,
+ type: "imageGallery",
+ data: {
+ images: [
+ {
+ url: "https://example.com/equipment1.jpg",
+ title: "实验设备1",
+ description: "主要反应设备",
+ },
+ {
+ url: "https://example.com/equipment2.jpg",
+ title: "实验设备2",
+ description: "辅助设备",
+ },
+ ],
+ },
+ },
+ ],
+ operationSteps: [
+ {
+ id: 7,
+ type: "richText",
+ data: {
+ content:
+ "<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>",
+ },
+ },
+ {
+ id: 8,
+ type: "customTable",
+ data: {
+ headers: [
+ { name: "步骤", type: "text" },
+ { name: "操作内容", type: "text" },
+ { name: "操作人", type: "user" },
+ { name: "操作图片", type: "image" },
+ ],
+ rows: [
+ {
+ 步骤: "步骤1",
+ 操作内容: "称取催化剂",
+ 操作人: ["1"],
+ 操作图片: [{ url: "https://example.com/step1.jpg" }],
+ updateTime: "2024-01-01 12:00:00",
+ },
+ {
+ 步骤: "步骤2",
+ 操作内容: "加入溶剂",
+ 操作人: ["2"],
+ 操作图片: [{ url: "https://example.com/step2.jpg" }],
+ updateTime: "2024-01-01 12:00:00",
+ },
+ ],
+ },
+ },
+ ],
},
- radio1: 1,
- rules: {},
+ rules: {
+ planName: [
+ {
+ required: true,
+ message: "请输入项目课题方案名称",
+ trigger: "blur",
+ },
+ ],
+ planCode: [
+ {
+ required: true,
+ message: "请输入项目课题方案编号",
+ trigger: "blur",
+ },
+ ],
+ stage: [{ required: true, message: "请输入项目阶段", trigger: "blur" }],
+ testDate: [
+ { required: true, message: "请选择试验日期", trigger: "change" },
+ ],
+ testName: [
+ { required: true, message: "请输入实验名称", trigger: "blur" },
+ ],
+ testCode: [
+ { required: true, message: "请输入实验编号", trigger: "blur" },
+ ],
+ testTime: [
+ { required: true, message: "请选择试验时间", trigger: "change" },
+ ],
+ },
+ imgSrc: "",
+ signatureDialogVisible: false,
status: "1",
remark: "",
+ groupTableData: [],
+ taskTableData: [],
};
},
computed: {
dialogTitle() {
- return this.type === "approve" ? "审批" : "审批详情";
+ return this.type === "approve" ? "确认实验调度" : "实验调度详情";
},
},
watch: {
data: {
handler(val) {
if (val) {
- this.form = { ...val };
+ // 深拷贝数据，避免直接修改props
+ this.form = JSON.parse(
+ JSON.stringify({
+ ...this.form,
+ ...val,
+ // 确保这些字段存在，如果不存在则使用默认值
+ materialsAndEquipment: val.materialsAndEquipment || [],
+ operationSteps: val.operationSteps || [],
+ })
+ );
+ console.log("接收到的数据：", this.form);
+ }
+ },
+ immediate: true,
+ deep: true,
+ },
+ visible: {
+ handler(val) {
+ if (val && this.type === "view") {
+ // 当弹窗打开且是查看模式时，获取详情数据
+ this.getPlanDetail();
}
},
immediate: true,
},
},
methods: {
+ memberList(i) {
+ switch (i) {
+ case 1:
+ return [1];
+ case 2:
+ return [1];
+ case 3:
+ return [1, 2, 3, 4, 5, 6, 7, 8];
+ case 4:
+ return [1, 2, 3, 4, 5, 6, 7, 8];
+ default:
+ break;
+ }
+ },
handleClose() {
this.$emit("update:visible", false);
this.form.approvalComment = "";
@@ -215,6 +466,145 @@
status: "rejected",
});
},
+ memberList(item) {
+ return item === 1 ? 2 : item === 2 ? 3 : 1;
+ },
+ openSignature() {
+ this.signatureDialogVisible = true;
+ },
+ handleSignatureConfirm(imageData) {
+ console.log("imageData imageData", imageData);
+ this.signatureDialogVisible = false;
+ this.imgSrc = imageData;
+
+ // 这里处理签名确认后的逻辑
+ // this.$confirm('确认该实验调度吗？', '提示', {
+ // confirmButtonText: '确定',
+ // cancelButtonText: '取消',
+ // type: 'warning'
+ // }).then(() => {
+ // // 这里可以将签名图片数据(imageData)连同其他数据一起提交到后端
+ // this.$message.success('确认成功');
+ // this.signatureDialogVisible = false;
+ // this.getTableData();
+ // }).catch(() => {
+ // this.signatureDialogVisible = false;
+ // });
+ },
+ // 获取方案详情
+ async getPlanDetail() {
+ try {
+ // TODO: 替换为实际的接口调用
+ // const { data } = await this.$api.getPlanDetail({ planCode: this.data.planCode });
+
+ // 模拟接口返回数据
+ const mockDetailData = {
+ planCode: this.data.planCode,
+ planName: "2024年度实验室设备升级方案",
+ stage: "设备升级实验",
+ testDate: "2024-03-15",
+ testTime: "2024-03-15 14:00:00",
+ tester: "张三",
+ creator: "张三",
+ createTime: "2024-03-15",
+ status: "pending",
+ approver: "李四",
+ approveTime: "2024-03-16",
+ materialsAndEquipment: [
+ {
+ id: 1,
+ type: "richText",
+ data: {
+ content:
+ "<p>1. 实验材料说明</p><p>2. 设备使用说明</p><p>3. 安全注意事项</p>",
+ },
+ },
+ {
+ id: 2,
+ type: "customTable",
+ data: {
+ headers: [
+ { name: "材料名称", type: "text" },
+ { name: "规格", type: "text" },
+ { name: "数量", type: "text" },
+ { name: "用途", type: "text" },
+ ],
+ rows: [
+ {
+ 材料名称: "催化剂A",
+ 规格: "工业级",
+ 数量: "100g",
+ 用途: "反应催化剂",
+ updateTime: "2024-01-01 12:00:00",
+ },
+ {
+ 材料名称: "溶剂B",
+ 规格: "分析纯",
+ 数量: "500ml",
+ 用途: "反应溶剂",
+ updateTime: "2024-01-01 12:00:00",
+ },
+ ],
+ },
+ },
+ {
+ id: 3,
+ type: "fileUpload",
+ data: {
+ fileList: [
+ {
+ name: "材料安全说明书.pdf",
+ url: "https://example.com/msds.pdf",
+ },
+ {
+ name: "设备操作手册.docx",
+ url: "https://example.com/manual.docx",
+ },
+ ],
+ },
+ },
+ {
+ id: 4,
+ type: "imageUpload",
+ data: {
+ images: [
+ {
+ url: "https://example.com/equipment1.jpg",
+ title: "实验设备1",
+ description: "主要反应设备",
+ },
+ {
+ url: "https://example.com/equipment2.jpg",
+ title: "实验设备2",
+ description: "辅助设备",
+ },
+ ],
+ },
+ },
+ ],
+ operationSteps: [
+ {
+ id: 4,
+ type: "richText",
+ data: {
+ content:
+ "<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>",
+ },
+ },
+ ],
+ };
+
+ // 更新表单数据
+ this.form = {
+ ...this.form,
+ ...mockDetailData,
+ };
+ } catch (error) {
+ console.error("获取方案详情失败：", error);
+ this.$message.error("获取方案详情失败");
+ this.handleClose();
+ }
+ },
},
};
</script>
@@ -226,7 +616,7 @@
.approval-dialog {
display: flex;
- height: 300px;
+ height: 60vh;
.approval-content {
flex: 1;
@@ -261,6 +651,10 @@
}
}
+.approval-dialog-approve {
+ margin-top: 26px;
+}
+
.approval-content-card {
height: calc(100% - 100px) !important;
box-shadow: none !important;
@@ -271,12 +665,12 @@
align-items: center;
flex-wrap: wrap;
gap: 13px;
+ margin-top: 38px;
.header-title-left {
display: flex;
align-items: center;
gap: 13px;
- margin-top: 38px;
img {
width: 12px;
@@ -314,6 +708,8 @@
}
.header-title:first-child {
+ margin-top: 0 !important;
+
.header-title-left {
margin-top: 0;
}
@@ -340,63 +736,184 @@
}
.approval-dialog-approve {
- padding: 38px 20px;
- display: flex;
- align-content: center;
- .status {
- margin-right: 40px;
- }
- // align-items: center;
- .status-title {
- color: #222222;
- font-family: "SourceHanSansCN-Medium";
- line-height: 14px;
- margin-bottom: 16px;
- }
- .status-content {
- display: flex;
- align-items: center;
- gap: 16px;
- background: #ffffff;
- border-radius: 10px;
- border: 1px solid rgba(4, 156, 154, 0.5);
- .resolve {
- border-radius: 10px;
- font-size: 16px;
- padding: 5px 55px;
- font-weight: 400;
- color: #333333;
- cursor: pointer;
- }
- .reject {
- border-radius: 10px;
- font-size: 16px;
- padding: 5px 55px;
- font-weight: 400;
- color: #333333;
- cursor: pointer;
- }
- .activeStatus {
- background: #ebfefd;
- color: #049c9a;
- box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
- border-radius: 10px;
- }
- }
- .remark-title {
- color: #222222;
- font-family: "SourceHanSansCN-Medium";
- line-height: 14px;
- margin-bottom: 16px;
+ img {
+ border: 2px dashed #049c9a;
}
}
-.dialog-footer{
- align-items: center;
- display: flex;
- justify-content: center;
- button{
- width: 150px;
+.add-group {
+ padding-left: 25px;
+ margin-top: 14px;
+ display: flex;
+ align-items: center;
+ margin-bottom: 19px;
+
+ div {
+ color: #f56c6c;
+ }
+
+ span {
+ font-weight: 500;
+ font-size: 14px;
+ color: #222222;
+ line-height: 21px;
+ margin: 0 32px 0 8px;
+ }
+}
+
+.groupTable {
+ width: 65%;
+ padding-left: 40px;
+}
+
+.rwuTable {
+ width: 85%;
+ padding-left: 40px;
+}
+
+.member-list {
+ margin-top: 18px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 28px;
+ margin-left: 38px;
+
+ .member-list-card {
+ width: 280px;
+ height: 300px;
+ border-radius: 8px;
+ border: 1px solid #dcdfe6;
+
+ &:nth-child(1) {
+ background: linear-gradient(
+ to bottom,
+ rgba(4, 156, 154, 0.2) 0%,
+ rgba(5, 242, 194, 0) 70%
+ );
}
+
+ &:nth-child(2) {
+ background: linear-gradient(
+ to bottom,
+ rgba(5, 160, 193, 0.2) 0%,
+ rgba(5, 242, 194, 0) 70%
+ );
+ }
+
+ &:nth-child(3) {
+ background: linear-gradient(
+ to bottom,
+ rgba(255, 77, 79, 0.2) 0%,
+ rgba(255, 242, 194, 0) 70%
+ );
+ }
+
+ &:nth-child(4) {
+ background: linear-gradient(
+ to bottom,
+ rgba(250, 199, 20, 0.21) 0%,
+ rgba(255, 242, 194, 0) 70%
+ );
+ }
+
+ .member-item {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .member-title {
+ margin-top: 20px;
+ width: 100%;
+ font-family: "Source Han Sans CN Bold Bold";
+ font-weight: bold;
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.8);
+ line-height: 16px;
+ text-align: center;
+ }
+
+ .flex1 {
+ flex: 1;
+ }
+
+ .member-name-box {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .member-name-box-2 {
+ flex: 1;
+ padding: 0 20px;
+ padding-top: 40px;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ justify-items: center;
+ align-items: start;
+ }
+
+ .member-name {
+ width: 60px;
+ height: 60px;
+ background: #7d8b79;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 60px;
+ font-weight: 500;
+ font-size: 16px;
+ color: #ffffff;
+ margin: 0;
+ }
+
+ .member-change {
+ display: flex;
+ justify-content: center;
+ padding: 10px 0;
+ margin-top: auto;
+ cursor: pointer;
+
+ .member-change-btn {
+ background: #fff1f0;
+ border-radius: 4px;
+ border: 1px solid #ffccc7;
+ padding: 1px 8px;
+ font-weight: 400;
+ font-size: 12px;
+ color: #ff4d4f;
+ }
+ }
+ }
+ }
+}
+
+.step-list {
+ background: #eff8fa;
+ padding: 20px;
+ .step-list-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 25px;
+ background: #ffffff;
+ .step-list-item-title {
+ font-weight: 500;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.8);
+ line-height: 20px;
+ flex-wrap: wrap;
+ flex: 1;
+ }
+ }
+}
+
+.dialog-footer {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ button {
+ width: 150px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.7.1