<template>
|
<div>
|
<Card>
|
<el-form ref="form" :model="form" :rules="rules" inline label-position="top">
|
<div class="header-title" style="width: 100%">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>来源类型</div>
|
</div>
|
</div>
|
<div class="flex" style="margin-bottom: 20px">
|
<div class="tabs">
|
<div :class="{ active: activeTab === 'strain' }" @click="activeTab = 'strain'">
|
来源菌株
|
</div>
|
<div :class="{ active: activeTab === 'material' }" @click="activeTab = 'material'">
|
来源物资
|
</div>
|
</div>
|
</div>
|
<!-- 来源菌株 -->
|
<el-row v-if="activeTab === 'strain'" :gutter="10">
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
<el-form-item label="菌株编号" prop="strainCode" >
|
<el-input v-model="form.strainCode" class="w-380" placeholder="请输入菌株编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
<el-form-item label="菌株名称" prop="strainName" >
|
<el-input v-model="form.strainName" class="w-380" placeholder="请输入菌株名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
<el-form-item label="培养基配方" prop="formula" >
|
<el-input v-model="form.formula" class="w-380" placeholder="请输入培养基配方" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<!-- 来源物资 -->
|
<el-row v-if="activeTab === 'material'" :gutter="10">
|
<el-col :span="24">
|
<el-form-item label="来源物资、时间及批号" prop="sourceMaterialTimeBatchNumber" >
|
<el-input v-model="form.sourceMaterialTimeBatchNumber" placeholder="请输入物资编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="培养基配方" prop="formula" >
|
<el-input v-model="form.formula" placeholder="请输入培养基配方" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="分离菌落编号" prop="separateColonyNumber" >
|
<el-input v-model="form.separateColonyNumber" placeholder="请输入分离菌落编号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="header-title" style="margin-top: 20px;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>培养条件</div>
|
</div>
|
</div>
|
<el-row :gutter="10">
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
<el-form-item label="培养基" prop="cultureMedium" >
|
<el-input v-model="form.cultureMedium" class="w-380" placeholder="请输入培养基" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
<el-form-item label="培养温度" prop="temperature" >
|
<el-input v-model="form.temperature" class="w-380" placeholder="请输入培养温度" />
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
<el-form-item label="需氧类型" prop="aerobicType" >
|
<el-select v-model="form.aerobicType" class="w-380" placeholder="请选择需氧类型">
|
<el-option label="专性需氧" value="1"></el-option>
|
<el-option label="专性厌氧" value="2"></el-option>
|
<el-option label="兼性需氧" value="3"></el-option>
|
<el-option label="耐氧厌氧" value="4"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
<el-form-item label="培养时间" prop="cultureTime" >
|
<el-input v-model="form.cultureTime" class="w-380" placeholder="请输入培养时间" />
|
<!-- <el-date-picker v-model="form.cultureTime" class="w-380" placeholder="请选择培养时间" type="date" value-format="yyyy-MM-dd" /> -->
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="header-title" style="margin-top: 20px;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>一、培养皿分离记录</div>
|
</div>
|
<div class="header-title-right">
|
<el-button @click="handleAddSeparation" class="el-icon-circle-plus-outline" type="primary">
|
新增培养皿分离记录</el-button>
|
</div>
|
</div>
|
<Table :data="form.separationOfCultureDishesList" :height="null" :queryForm="queryForm" :total="0">
|
<el-table-column width="100" type="index" label="培养皿序号" />
|
<el-table-column prop="separateBacterialColoniesCode" label="分离菌落编号" />
|
<el-table-column prop="handleSignature" label="接种操作人签字" >
|
<template slot-scope="scope">
|
<el-image :preview-src-list="[scope.row.handleSignature]" style="width: 40px;" :src="scope.row.handleSignature" alt="操作人签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="操作时间" />
|
<el-table-column prop="address" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditSeparation(scope.row, scope.$index)">编辑</el-button>
|
<el-button type="text" @click="handleDeleteSeparation(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
<div class="header-title" style="margin-top: 20px;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>二、培养皿生物学形态观察记录</div>
|
</div>
|
<div class="header-title-right">
|
<el-button @click="handleAddObservation" class="el-icon-circle-plus-outline" type="primary">
|
新增观察记录</el-button>
|
</div>
|
</div>
|
<Table :data="form.observationOfPetriDishes" :height="null" :queryForm="queryForm" :total="0">
|
<el-table-column prop="separateColonyCode" label="分离菌落编号" />
|
<el-table-column prop="strength" label="形状强壮度排名" />
|
<el-table-column prop="address" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditObservation(scope.row)">编辑</el-button>
|
<el-button type="text" @click="handleDeleteObservation(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
<div class="header-title" style="margin-top: 20px;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>三、接种斜面记录</div>
|
</div>
|
<div class="header-title-right">
|
<el-button @click="handleAddInoculation" class="el-icon-circle-plus-outline" type="primary">
|
新增斜面记录</el-button>
|
</div>
|
</div>
|
<el-table :data="form.vaccinationSlopes" border style="width: 100%; margin-bottom: 16px;" :span-method="inoculationRowSpan">
|
<el-table-column prop="separateColonyCode" label="分离菌落编号" />
|
<el-table-column prop="vaccinationSlopeCode" label="接种斜面编号" />
|
<el-table-column prop="handleName" label="接种操作人" />
|
<el-table-column prop="handleSignature" label="接种操作人签字">
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.handleSignature" :preview-src-list="[scope.row.handleSignature]" style="width: 40px;" :src="scope.row.handleSignature" alt="操作人签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="handleTime" label="接种操作时间" />
|
<el-table-column prop="handleType" label="入库/废弃">
|
<template slot-scope="scope">
|
{{ scope.row.handleType === '保存' ? '入库' : '废弃' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="入库总数（只）">
|
<template slot-scope="scope">
|
<span v-if="scope.$index === firstInoculationOrDiscardIndex">{{ totalInoculationCount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="preserveSignature" label="菌种保藏人签字" >
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.preserveSignature" :preview-src-list="[scope.row.preserveSignature]" style="width: 40px;" :src="scope.row.preserveSignature" alt="操作人签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="preserveTime" label="入库保藏/废弃时间" />
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditInoculation(scope.row, scope.$index)">编辑</el-button>
|
<el-button type="text" @click="handleConfirmStorageClick(scope.row, scope.$index)">确认入库</el-button>
|
<el-button type="text" @click="handleDeleteInoculation(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="header-title" style="margin-top: 20px;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>四、菌种保藏记录</div>
|
</div>
|
<div class="header-title-right">
|
<el-button @click="handleAddPreserve" class="el-icon-circle-plus-outline" type="primary">
|
新增菌种保藏记录</el-button>
|
</div>
|
</div>
|
<Table :data="form.culturePreservations" :height="null" :queryForm="queryForm" :total="0">
|
<el-table-column prop="forPreserveCode" label="用于保藏的菌种编号" />
|
<el-table-column prop="verificationConclusion" label="实验验证结论" />
|
<el-table-column prop="preserveMethod" label="保藏方法" />
|
<el-table-column prop="preserveCode" label="保藏菌种编号" />
|
<el-table-column prop="preserveSignature" label="菌种保藏人签字">
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.preserveSignature" :preview-src-list="[scope.row.preserveSignature]" style="width: 40px;" :src="scope.row.preserveSignature" alt="签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="preserveTime" label="保藏时间" />
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditPreserve(scope.row, scope.$index)">编辑</el-button>
|
<el-button type="text" @click="handleDeletePreserve(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
<!-- 弹窗组件 -->
|
<SeparationRecordDialog
|
:visible.sync="showSeparationDialog"
|
:editData="editSeparationData"
|
@confirm="handleSeparationConfirm"
|
@close="resetSeparationEdit"
|
/>
|
<SlantRecordDialog
|
:visible.sync="showObservationDialog"
|
:editData="editObservationData"
|
@ok="handleObservationConfirm"
|
/>
|
<InoculationSlopeRecordDialog
|
:visible.sync="showInoculationDialog"
|
:editData="editInoculationData"
|
@save="handleInoculationConfirm"
|
/>
|
<PreserveStrainRecordDialog
|
:visible.sync="showPreserveDialog"
|
:editData="editPreserveData"
|
@save="handlePreserveConfirm"
|
/>
|
<ConfirmStorageDialog
|
:visible.sync="showConfirmStorageDialog"
|
:editData="editInoculationData"
|
@confirm="handleConfirmStorage"
|
/>
|
<div class="end-btn" style="margin-top: 20px;">
|
<el-button type="primary" @click="handleSubmit(1)">发送</el-button>
|
<el-button type="default" @click="handleSubmit(2)">存草稿</el-button>
|
</div>
|
</el-form>
|
</Card>
|
</div>
|
</template>
|
<script>
|
import AiEditor from "@/components/AiEditor";
|
import SeparationRecordDialog from "./separation-record-dialog.vue";
|
import SlantRecordDialog from "./SlantRecordDialog.vue";
|
import InoculationSlopeRecordDialog from "./inoculation-slope-record-dialog.vue";
|
import PreserveStrainRecordDialog from "./preserve-strain-record-dialog.vue";
|
import ConfirmStorageDialog from "./confirm-storage-dialog.vue";
|
|
import {add,detail,edit} from './service'
|
export default {
|
components: {
|
AiEditor,
|
SeparationRecordDialog,
|
SlantRecordDialog,
|
InoculationSlopeRecordDialog,
|
PreserveStrainRecordDialog,
|
ConfirmStorageDialog,
|
},
|
name: "AddBreedingRecord",
|
data() {
|
return {
|
form: {
|
id: '', // 主键
|
strainCode: '', // 菌株编号
|
strainName: '', // 菌株名称
|
formula: '', // 培养基配方
|
cultureMedium: '', // 培养基
|
cultureTime: '', // 培养时间
|
aerobicType: '', // 需氧类型
|
temperature: '', // 培养温度
|
status: '', // 状态
|
createBy: '', // 创建人
|
createTime: '', // 创建时间
|
updateBy: '', // 修改人
|
updateTime: '', // 修改时间
|
disabled: 0, // 是否删除
|
preserveSource: '', // 来源类型
|
separateColonyNumber: '', // 分离菌落编号
|
sourceMaterialTimeBatchNumber: '', // 来源物资存值批号
|
// 下面是 array 类型字段
|
culturePreservations: [],
|
observationOfPetriDishes: [],
|
separationOfCultureDishesList: [],
|
vaccinationSlopes: [],
|
// 兼容原有表单字段
|
mediumFormula: '',
|
materialCode: '',
|
materialName: '',
|
materialDescription: '',
|
planName: '',
|
planCode: '',
|
stage: '',
|
creator: '',
|
approvalComment: '',
|
approver: '',
|
approveTime: '',
|
culturePreservations: [], // 新增：菌种保藏记录数组
|
},
|
rules: {
|
strainCode: [{ required: true, message: "请输入菌株编号", trigger: "blur" }],
|
strainName: [{ required: true, message: "请输入菌株名称", trigger: "blur" }],
|
formula: [{ required: true, message: "请输入培养基配方", trigger: "blur" }],
|
cultureMedium: [{ required: true, message: "请输入培养基", trigger: "blur" }],
|
cultureTime: [{ required: true, message: "请输入培养时间", trigger: "blur" }],
|
aerobicType: [{ required: true, message: "请输入需氧类型", trigger: "blur" }],
|
temperature: [{ required: true, message: "请输入培养温度", trigger: "blur" }],
|
sourceMaterialTimeBatchNumber: [{ required: true, message: "请输入物资编号", trigger: "blur" }],
|
materialName: [{ required: true, message: "请输入物资名称", trigger: "blur" }],
|
materialDescription: [{ required: true, message: "请输入物资描述", trigger: "blur" }],
|
},
|
activeTab: "strain", // 默认显示来源菌株表单
|
fileList: [], // 附件列表
|
showChoose: false,
|
radio1: 1,
|
status: "1",
|
remark: "",
|
queryForm: {},
|
showSeparationDialog: false,
|
showObservationDialog: false,
|
showInoculationDialog: false,
|
showPreserveDialog: false,
|
showConfirmStorageDialog: false,
|
editSeparationIndex: null,
|
editSeparationData: null,
|
editObservationData: null,
|
editInoculationIndex: null,
|
editInoculationData: null,
|
editPreserveIndex: null,
|
editPreserveData: null,
|
};
|
},
|
computed: {
|
totalInoculationCount() {
|
// 只统计入库（保存）
|
return this.form.vaccinationSlopes
|
.filter(item => item.handleType === '保存')
|
.length;
|
},
|
firstInoculationOrDiscardIndex() {
|
// 第一个入库或废弃行
|
return this.form.vaccinationSlopes.findIndex(item => item.handleType === '保存' || item.handleType === '废弃');
|
}
|
},
|
mounted(){
|
if(this.$route.query.id){
|
this.getDetail()
|
}
|
},
|
methods: {
|
async getDetail(){
|
const res = await detail({id:this.$route.query.id})
|
if(res.preserveSource == 1){
|
this.activeTab = 'strain'
|
}else{
|
this.activeTab = 'material'
|
}
|
res.vaccinationSlopes = res.vaccinationSlopes.map(item => {
|
return {
|
...item,
|
handleType: item.handleType === 1 ? '保存' : '废弃'
|
}
|
})
|
this.form = res
|
},
|
handleSeparationConfirm(data) {
|
console.log('分离',data)
|
if (this.editSeparationIndex !== null) {
|
// 编辑
|
this.$set(this.form.separationOfCultureDishesList, this.editSeparationIndex, data);
|
this.resetSeparationEdit();
|
} else {
|
// 新增
|
console.log('新增',data)
|
this.form.separationOfCultureDishesList.push(data);
|
}
|
},
|
handleObservationConfirm(data) {
|
if (this.editObservationData) {
|
// 编辑
|
const index = this.form.observationOfPetriDishes.findIndex(item => item.id === data.id);
|
if (index !== -1) {
|
this.$set(this.form.observationOfPetriDishes, index, data);
|
}
|
} else {
|
// 新增
|
this.form.observationOfPetriDishes.push({
|
...data,
|
id: Date.now().toString(), // 临时ID，实际应该由后端生成
|
});
|
}
|
this.editObservationData = null;
|
},
|
handleInoculationConfirm(data) {
|
console.log('接种',data)
|
if (this.editInoculationIndex !== null) {
|
// 编辑模式：更新指定索引的数据
|
this.$set(this.form.vaccinationSlopes, this.editInoculationIndex, {
|
...data,
|
// 保留原有的ID和其他必要字段
|
id: this.form.vaccinationSlopes[this.editInoculationIndex].id
|
});
|
} else {
|
// 新增模式：添加新数据
|
this.form.vaccinationSlopes.push({
|
...data,
|
id: Date.now().toString() // 临时ID，实际应该由后端生成
|
});
|
}
|
this.showInoculationDialog = false;
|
this.editInoculationIndex = null;
|
this.editInoculationData = null;
|
},
|
handlePreserveConfirm(data) {
|
if (this.editPreserveIndex !== null) {
|
// 编辑
|
this.$set(this.form.culturePreservations, this.editPreserveIndex, data);
|
} else {
|
// 新增
|
this.form.culturePreservations.push(data);
|
}
|
this.showPreserveDialog = false;
|
this.editPreserveIndex = null;
|
this.editPreserveData = null;
|
},
|
handleSubmit(type) {
|
if(this.activeTab === 'material'){
|
this.form.preserveSource = 2
|
}else{
|
this.form.preserveSource = 1
|
}
|
|
if(type == 1){
|
this.form.isDraft = 0
|
}else{
|
this.form.isDraft = 1
|
}
|
|
this.$refs.form.validate(async (valid) => {
|
if (!valid) return;
|
try {
|
if(this.form.vaccinationSlopes.length > 0){
|
let arr = this.form.vaccinationSlopes
|
this.form.vaccinationSlopes = arr.map(item => {
|
return {
|
...item,
|
handleType: item.handleType === '保存' ? 1 : 2,
|
}
|
})
|
}
|
if(this.form.id){
|
edit(this.form).then(res => {
|
if (res.code === 200) {
|
this.$message.success('编辑成功');
|
this.$router.back();
|
} else {
|
this.$message.error('编辑失败');
|
}
|
})
|
}else{
|
add(this.form).then(res => {
|
if (res.code === 200) {
|
this.$message.success('添加成功');
|
this.$router.back();
|
} else {
|
this.$message.error('添加失败');
|
}
|
});
|
}
|
|
} catch (e) {
|
this.$message.error('添加失败');
|
}
|
});
|
},
|
handleEditSeparation(row, index) {
|
this.editSeparationIndex = index;
|
this.editSeparationData = { ...row };
|
this.showSeparationDialog = true;
|
},
|
handleDeleteSeparation(index) {
|
this.form.separationOfCultureDishesList.splice(index, 1);
|
},
|
resetSeparationEdit() {
|
this.editSeparationIndex = null;
|
this.editSeparationData = null;
|
},
|
handleAddSeparation() {
|
this.editSeparationIndex = null;
|
this.editSeparationData = null;
|
this.showSeparationDialog = true;
|
},
|
handleAddObservation() {
|
this.editObservationData = null;
|
this.showObservationDialog = true;
|
},
|
handleEditObservation(row) {
|
this.editObservationData = { ...row };
|
this.showObservationDialog = true;
|
},
|
handleDeleteObservation(index) {
|
this.form.observationOfPetriDishes.splice(index, 1);
|
},
|
handleAddInoculation() {
|
this.editInoculationIndex = null;
|
this.editInoculationData = null;
|
this.showInoculationDialog = true;
|
},
|
handleEditInoculation(row, index) {
|
this.editInoculationIndex = index;
|
// 深拷贝当前行数据，避免直接修改原数据
|
this.editInoculationData = JSON.parse(JSON.stringify(row));
|
this.showInoculationDialog = true;
|
},
|
handleConfirmStorageClick(row, index) {
|
this.editInoculationIndex = index;
|
// 深拷贝当前行数据，避免直接修改原数据
|
this.editInoculationData = JSON.parse(JSON.stringify(row));
|
this.showConfirmStorageDialog = true;
|
},
|
handleConfirmStorage(data) {
|
// 更新对应行的数据，保留原有数据并更新签名
|
if (this.editInoculationIndex !== null) {
|
this.$set(this.form.vaccinationSlopes, this.editInoculationIndex, {
|
...this.form.vaccinationSlopes[this.editInoculationIndex],
|
preserveSignature: data.preserveSignature, // 更新签名数据
|
status: '保存' // 更新状态为保存
|
});
|
}
|
this.showConfirmStorageDialog = false;
|
this.editInoculationIndex = null;
|
this.editInoculationData = null;
|
},
|
handleDeleteInoculation(index) {
|
this.form.vaccinationSlopes.splice(index, 1);
|
},
|
inoculationRowSpan({ row, rowIndex, columnIndex }) {
|
// 入库总数（只）列合并
|
if (columnIndex === 6) {
|
// 合并所有入库或废弃行
|
const mergeCount = this.form.vaccinationSlopes.filter(item => item.handleType === '保存' || item.handleType === '废弃').length;
|
if (rowIndex === this.firstInoculationOrDiscardIndex) {
|
return { rowspan: mergeCount, colspan: 1 };
|
} else if (row.handleType === '保存' || row.handleType === '废弃') {
|
return { rowspan: 0, colspan: 0 };
|
}
|
}
|
},
|
handleAddPreserve() {
|
this.editPreserveIndex = null;
|
this.editPreserveData = null;
|
this.showPreserveDialog = true;
|
},
|
handleEditPreserve(row, index) {
|
this.editPreserveIndex = index;
|
this.editPreserveData = { ...row };
|
this.showPreserveDialog = true;
|
},
|
handleDeletePreserve(index) {
|
this.form.culturePreservations.splice(index, 1);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
::v-deep(.el-form-item) {
|
width: 100%;
|
|
.el-input__inner {
|
width: 100%;
|
}
|
|
.w-380 {
|
width: 280px;
|
}
|
}
|
|
.mt-unset {
|
margin-top: unset !important;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.tabs {
|
display: flex;
|
align-items: center;
|
border: 2px solid rgba(4, 156, 154, 0.5);
|
border-radius: 10px;
|
padding: 4px;
|
|
div {
|
width: 183px;
|
height: 32px;
|
border-radius: 10px;
|
text-align: center;
|
line-height: 32px;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
|
.active {
|
background: #ebfefd;
|
color: #049c9a;
|
}
|
|
.inactive {
|
background: #fff;
|
color: #333333;
|
}
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-bottom: 20px;
|
gap: 13px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
div {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
|
}
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
}
|
|
.header-title-left :first-child {
|
margin-top: 0;
|
}
|
}
|
|
.header-title:first-child {
|
.header-title-left {
|
margin-top: 0;
|
}
|
}
|
|
.end-btn {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
|
button {
|
width: 180px;
|
height: 36px;
|
// background: #409EFF;
|
}
|
}
|
|
.member-list {
|
margin-top: 18px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 28px;
|
|
.member-list-card {
|
width: 340px;
|
height: 400px;
|
border-radius: 8px;
|
border: 1px solid #dcdfe6;
|
background: linear-gradient(to bottom,
|
rgba(5, 160, 193, 0.2) 0%,
|
rgba(5, 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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
