| | |
| | | <template> |
| | | <div class="particularsdiv"> |
| | | <div class="left-course"> |
| | | <div class="left-course" :class="{ 'left-collapsed': isLeftCollapsed }"> |
| | | <div class="postfilx"> |
| | | <div class="title">工作进程</div> |
| | | <div> |
| | | <div class="title"> |
| | | 工作进程 |
| | | <el-button |
| | | class="collapse-btn" |
| | | @click="toggleLeftCollapse" |
| | | :icon=" |
| | | isLeftCollapsed ? 'el-icon-arrow-right' : 'el-icon-arrow-left' |
| | | " |
| | | size="mini" |
| | | > |
| | | </el-button> |
| | | </div> |
| | | <div v-show="!isLeftCollapsed"> |
| | | <el-steps direction="vertical" :active="workflow"> |
| | | <el-step title="潜在捐献" icon="el-icon-user"> |
| | | <template slot="description" v-if="donatebaseinfo.createtime"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 右侧数据 --> |
| | | <div style="background: #fff; width: 80%;"> |
| | | <div class="right-content" :class="{ 'right-expanded': isLeftCollapsed }"> |
| | | <!-- 顶部数据 --> |
| | | <div class="boxdiv"> |
| | | <div class="top-text">捐献案例信息</div> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="报告时间" align="left" prop="reporttime"> |
| | | <el-form-item label="报告日期" align="left" prop="reporttime"> |
| | | <el-date-picker |
| | | clearable |
| | | size="small" |
| | | v-model="form.reporttime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="选择报告时间" |
| | | placeholder="选择报告日期" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-col :span="6" v-if="form.treatmenthospitalno"> |
| | | <el-form-item |
| | | align="left" |
| | | label="医疗机构" |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-col :span="6" v-if="form.treatmentdeptname"> |
| | | <el-form-item label="科室" prop="treatmentdeptno"> |
| | | <el-input |
| | | v-model="form.treatmentdeptname" |
| | |
| | | > |
| | | <el-row> |
| | | <el-col :span="8"> |
| | | <el-form-item label="住院号" prop="inpatientno"> |
| | | <el-input v-model="form.inpatientno" placeholder="住院号" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="16"> |
| | | <el-form-item label="疾病诊断" prop="diagnosisname"> |
| | | <el-form-item |
| | | label="所在医疗机构" |
| | | label-width="120px" |
| | | prop="currentMedicalInstitution" |
| | | > |
| | | <el-input |
| | | v-model="form.diagnosisname" |
| | | placeholder="请输入疾病诊断名称" |
| | | v-model="form.currentMedicalInstitution" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-form-item |
| | | label-width="150px" |
| | | label="所在医疗机构科室" |
| | | prop="currentDept" |
| | | > |
| | | <el-input v-model="form.currentDept" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="8"> |
| | | <el-form-item |
| | | label="首次医疗机构" |
| | | label-width="120px" |
| | | prop="firstMedicalInstitution" |
| | | > |
| | | <el-input |
| | | v-model="form.firstMedicalInstitution" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-form-item |
| | | label-width="150px" |
| | | label="首次医疗机构科室" |
| | | prop="firstDept" |
| | | > |
| | | <el-input v-model="form.firstDept" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row> |
| | | <!-- <el-col :span="6"> |
| | | <el-form-item label="民族" prop="nation"> |
| | |
| | | <el-col :span="6"> |
| | | <el-form-item label="国籍" prop="nationality"> |
| | | <el-input v-model="form.nationality" placeholder="请输入国籍" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <!-- <el-row> |
| | | <el-col :span="6"> |
| | | <el-form-item label="职业" prop="occupation"> |
| | | <el-select v-model="form.occupation" placeholder="请选择职业"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_occupation || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="学历" prop="education"> |
| | | <el-select v-model="form.education" placeholder="请选择学历"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_education || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> --> |
| | | <el-row> |
| | | <el-col :span="6"> |
| | | <el-form-item |
| | | label="所在医疗机构" |
| | | prop="currentMedicalInstitution" |
| | | > |
| | | <el-input |
| | | v-model="form.currentMedicalInstitution" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-form-item |
| | | label-width="150px" |
| | | label="所在医疗机构科室" |
| | | prop="currentDept" |
| | | > |
| | | <el-input v-model="form.currentDept" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="6"> |
| | | <el-form-item label="首次医疗机构" prop="firstMedicalInstitution"> |
| | | <el-input |
| | | v-model="form.firstMedicalInstitution" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-form-item |
| | | label-width="150px" |
| | | label="首次医疗机构科室" |
| | | prop="firstDept" |
| | | > |
| | | <el-input v-model="form.firstDept" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | /> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-col :span="4"> |
| | | <el-form-item label="住院号" prop="inpatientno"> |
| | | <el-input v-model="form.inpatientno" placeholder="住院号" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="9"> |
| | | <el-form-item align="left" label="血型" prop="bloodtype"> |
| | | <el-radio-group v-model="form.bloodtype"> |
| | | <el-radio |
| | |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" :pull="1"> |
| | | <el-col :span="9" :pull="1"> |
| | | <el-form-item label="Rh(D)" align="left" prop="rhyin"> |
| | | <el-radio-group v-model="form.rhyin"> |
| | | <el-radio |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="16"> |
| | | <el-form-item label="疾病诊断" prop="diagnosisname"> |
| | | <el-input |
| | | v-model="form.diagnosisname" |
| | | placeholder="请输入疾病诊断名称" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- <el-row> |
| | | <el-col :span="6"> |
| | | <el-form-item label="职业" prop="occupation"> |
| | | <el-select v-model="form.occupation" placeholder="请选择职业"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_occupation || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="学历" prop="education"> |
| | | <el-select v-model="form.education" placeholder="请选择学历"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_education || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> --> |
| | | |
| | | <el-row> |
| | | <el-form-item label="疾病类型" align="left" prop="diseasetype"> |
| | | <el-checkbox-group v-model="form.diseasetype"> |
| | |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="15" align="left"> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="15"> |
| | | <el-form-item label="其他情况" prop="othercases"> |
| | | <el-checkbox-group v-model="form.othercases"> |
| | | <el-checkbox |
| | | v-for="dict in dict.type.sys_OtherCases || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | > |
| | | {{ dict.label }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item align="left" label="本人意愿 " prop="selfwill"> |
| | | <el-checkbox-group v-model="form.selfwill"> |
| | | <el-checkbox |
| | | v-for="dict in dict.type.sys_SelfWill || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | > |
| | |
| | | </el-row> |
| | | </div> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item align="left" label="本人意愿 " prop="selfwill"> |
| | | <el-checkbox-group v-model="form.selfwill"> |
| | | <el-checkbox |
| | | v-for="dict in dict.type.sys_SelfWill || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | > |
| | | {{ dict.label }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="主要亲属" prop="majorrelatives"> |
| | |
| | | <el-form-item label-width="100px" label="捐献决定"> |
| | | <el-checkbox-group v-model="organdecision"> |
| | | <el-checkbox |
| | | v-for="item in organselection" |
| | | v-for="item in fixedOrganSelection" |
| | | :key="item" |
| | | :label="item" |
| | | >{{ item }} |
| | | </el-checkbox> |
| | | <el-checkbox |
| | | v-if="shouldShowConditionalOrgan" |
| | | :key="conditionalOrgan" |
| | | :label="conditionalOrgan" |
| | | >{{ conditionalOrgan }}</el-checkbox |
| | | > |
| | | </el-checkbox-group> |
| | | <el-input |
| | | v-if="organdecision.includes('其他')" |
| | |
| | | prop="organno" |
| | | /> --> |
| | | <el-table-column |
| | | label="分配系统编号" |
| | | align="center" |
| | | width="120" |
| | | prop="caseno" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.caseno" |
| | | placeholder="分配系统编号" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="分配接收时间" |
| | | align="center" |
| | | width="200" |
| | |
| | | </el-date-picker> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="分配系统编号" |
| | | align="center" |
| | | width="120" |
| | | prop="caseno" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.caseno" |
| | | placeholder="分配系统编号" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="受体姓氏" |
| | | align="center" |
| | |
| | | <org-selecter |
| | | ref="tranHosSelect" |
| | | :org-type="'4'" |
| | | :filterable="true" |
| | | :dataList="dataList" |
| | | v-model="scope.row.transplanthospitalno" |
| | | /> |
| | |
| | | label-position="right" |
| | | > |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item |
| | | align="left" |
| | | label="捐献类别" |
| | | prop="donationcategory" |
| | | > |
| | | <el-radio-group v-model="witnessform.donationcategory"> |
| | | <el-radio |
| | | v-for="dict in dict.type.sys_DonationCategory || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | <el-col :span="10"> |
| | | <el-form-item label="捐献医院" prop="donateHospital "> |
| | | <el-input |
| | | v-model="witnessform.donateHospital" |
| | | placeholder="请输入捐献医院" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> </el-row> |
| | | <el-row> |
| | | <el-col :span="6"> |
| | | <el-form-item |
| | |
| | | <el-col :span="6"> |
| | | <el-form-item |
| | | align="left" |
| | | label="死亡原因" |
| | | label-width="120px" |
| | | prop="deathreason" |
| | | > |
| | | <el-input |
| | | v-model="witnessform.deathreason" |
| | | placeholder="请输入死亡原因" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item |
| | | align="left" |
| | | label="死亡时间" |
| | | label-width="120px" |
| | | prop="deathtime" |
| | |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item |
| | | align="left" |
| | | label="死亡原因" |
| | | label-width="120px" |
| | | prop="deathreason" |
| | | label="捐献类别" |
| | | prop="donationcategory" |
| | | > |
| | | <el-input |
| | | v-model="witnessform.deathreason" |
| | | placeholder="请输入死亡原因" |
| | | /> |
| | | <el-radio-group v-model="witnessform.donationcategory"> |
| | | <el-radio |
| | | v-for="dict in dict.type.sys_DonationCategory || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> </el-row> |
| | | |
| | | <el-row> |
| | | <el-col :span="6"> |
| | | <el-form-item |
| | |
| | | /> |
| | | </template> |
| | | </el-table-column> --> |
| | | <el-table-column |
| | | label="获取开始时间" |
| | | align="center" |
| | | width="200" |
| | | prop="organStartTime" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-date-picker |
| | | clearable |
| | | size="small" |
| | | style="width: 100%" |
| | | v-model="scope.row.organStartTime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="请输入获取开始时间" |
| | | > |
| | | </el-date-picker> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | v-if="organgettimetrue" |
| | | label="器官离体时间" |
| | |
| | | v-model="scope.row.organgetdoct" |
| | | placeholder="请输入医师姓名" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="获取开始时间" |
| | | align="center" |
| | | width="200" |
| | | prop="organStartTime" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-date-picker |
| | | clearable |
| | | size="small" |
| | | style="width: 100%" |
| | | v-model="scope.row.organStartTime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="请输入获取开始时间" |
| | | > |
| | | </el-date-picker> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-row v-if="accomplishform.isbodydonation"> |
| | | <el-col :span="6"> |
| | | <el-form-item align="left" label="遗体捐献" prop="isbodydonation"> |
| | | <el-radio-group v-model="accomplishform.isbodydonation"> |
| | |
| | | return { |
| | | infoid: 736, |
| | | drawer: false, |
| | | isLeftCollapsed: false, |
| | | form: { |
| | | donorno: "", |
| | | reporterno: "", |
| | |
| | | infoid: null |
| | | }, |
| | | kinshiplist: ["配偶", "父亲", "母亲", "子女", "受托人"], |
| | | organselection: [ |
| | | |
| | | // 固定的选项列表(移除了"遗体") |
| | | fixedOrganSelection: [ |
| | | "肝脏", |
| | | "双肾", |
| | | "左肾", |
| | | "右肾", |
| | | "肾脏", |
| | | "单左肾", |
| | | "单右肾", |
| | | "心脏", |
| | | "肺脏", |
| | | "胰腺", |
| | | "小肠", |
| | | "双眼组织", |
| | | "遗体", |
| | | "其他" |
| | | ], |
| | | |
| | | // 需要条件显示的选项 |
| | | conditionalOrgan: "遗体", |
| | | |
| | | //选择器官表单 |
| | | organList: { |
| | |
| | | ], |
| | | sex: [{ required: true, message: "性别不能为空", trigger: "blur" }], |
| | | age: [{ required: true, message: "请输入年龄", trigger: "blur" }], |
| | | treatmenthospitalno: [ |
| | | { required: true, message: "请选择医疗机构", trigger: "blur" } |
| | | ], |
| | | // treatmenthospitalno: [ |
| | | // { required: true, message: "请选择医疗机构", trigger: "blur" } |
| | | // ], |
| | | bloodtype: [ |
| | | { required: true, message: "请选择ABO血型", trigger: "blur" } |
| | | ], |
| | |
| | | ] |
| | | }, |
| | | // 各级明细效验 |
| | | medicinerules: {}, |
| | | medicinerules: { |
| | | illnessoverview: [ |
| | | { required: true, message: "请输入病情概况", trigger: "blur" } |
| | | ], |
| | | diagnosisname: [ |
| | | { required: true, message: "请输入疾病诊断", trigger: "blur" } |
| | | ], |
| | | hospitalassessdoctor: [ |
| | | { required: true, message: "请输入院级评估医生", trigger: "blur" } |
| | | ], |
| | | provincialassessdoctor: [ |
| | | { required: true, message: "请输入省级评估医生", trigger: "blur" } |
| | | ], |
| | | coreteamassessdoctor: [ |
| | | { required: true, message: "请输入核心成员评估医生", trigger: "blur" } |
| | | ], |
| | | }, |
| | | affirmrules: { |
| | | name: [ |
| | | { required: true, message: "亲属姓名不能为空", trigger: "blur" } |
| | |
| | | this.Getnetworkheader(); |
| | | this.getdataList(); |
| | | this.infoid = this.$route.query.id; |
| | | }, |
| | | computed: { |
| | | // 计算属性:决定是否显示“遗体”选项 |
| | | shouldShowConditionalOrgan() { |
| | | // 当选中项中包含“遗体”时,才显示它 |
| | | return this.organdecision.includes(this.conditionalOrgan); |
| | | } |
| | | }, |
| | | mounted() { |
| | | // this.id = this.$route.query.id; |
| | |
| | | }); |
| | | } |
| | | }, |
| | | // 切换侧边隐藏 |
| | | toggleLeftCollapse() { |
| | | this.isLeftCollapsed = !this.isLeftCollapsed; |
| | | }, |
| | | /** 保存主表按钮 */ |
| | | |
| | | submitForm() { |
| | | this.$refs["form"].validate(valid => { |
| | | console.log("提交的数据们:", this.form); |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .particularsdiv { |
| | | display: -webkit-box; |
| | | display: flex; |
| | | background-color: #f5f7fa; |
| | | height: 100%; |
| | | height: 100vh; |
| | | overflow: hidden; |
| | | transition: all 0.3s ease; |
| | | |
| | | // 左侧工作进程栏 |
| | | .left-course { |
| | | background: #fff; |
| | | width: 17vw; |
| | | width: 220px; |
| | | min-width: 220px; |
| | | text-align: center; |
| | | margin: 20px 10px; |
| | | padding: 10px; |
| | | margin-top: 0; |
| | | min-height: 888px; |
| | | margin: 0; |
| | | padding: 0; |
| | | height: 100%; |
| | | box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); |
| | | transition: all 0.3s ease; |
| | | position: relative; |
| | | z-index: 100; |
| | | |
| | | &.left-collapsed { |
| | | width: 64px; // 改为固定宽度,而不是0 |
| | | min-width: 64px; // 保持最小宽度 |
| | | transform: translateX(0); // 移除平移 |
| | | |
| | | // 折叠状态下隐藏步骤内容,只显示标题和按钮 |
| | | .postfilx > div:last-child { |
| | | opacity: 0; |
| | | visibility: hidden; |
| | | pointer-events: none; // 禁用交互 |
| | | } |
| | | |
| | | .title { |
| | | padding: 15px 5px; // 调整内边距适应窄宽度 |
| | | |
| | | .collapse-btn { |
| | | margin: 0 auto; // 按钮居中 |
| | | } |
| | | } |
| | | } |
| | | |
| | | .postfilx { |
| | | width: 15vw; |
| | | text-align: center; |
| | | margin: 20px 10px; |
| | | padding: 10px; |
| | | margin-top: 0; |
| | | // z-index: 999; |
| | | // position: -webkit-sticky; |
| | | // position: fixed; |
| | | // top: 50; |
| | | } |
| | | |
| | | .title { |
| | | background: #22a2c3; |
| | | margin-bottom: 20px; |
| | | padding: 10px 0; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .upload-demo { |
| | | text-align: center; |
| | | } |
| | | |
| | | .pdfimg { |
| | | display: flex; // text-align: center; |
| | | width: 100%; |
| | | height: 600px; |
| | | |
| | | .box-pdf { |
| | | width: 400px; |
| | | margin-right: 30px; |
| | | border: 1px solid #dcdfe6; |
| | | -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), |
| | | 0 0 6px 0 rgba(0, 0, 0, 0.04); |
| | | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); // <- Add this to fix. |
| | | } |
| | | |
| | | .pdftit { |
| | | width: 200px; |
| | | padding: 20px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .pdftit:hover { |
| | | background: #c0cef7; |
| | | } |
| | | |
| | | .pdfimgmin { |
| | | width: 60%; |
| | | |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 0; |
| | | margin: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .title { |
| | | background: #22a2c3; |
| | | margin-bottom: 0; |
| | | padding: 15px 10px; |
| | | color: #fff; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | position: relative; |
| | | transition: all 0.3s ease; |
| | | min-height: 54px; // 确保标题区域有固定高度 |
| | | box-sizing: border-box; |
| | | |
| | | .collapse-btn { |
| | | background: rgba(255, 255, 255, 0.2); |
| | | border: none; |
| | | color: #fff; |
| | | width: 32px; // 稍微增大确保可点击区域 |
| | | height: 32px; |
| | | padding: 0; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | transition: all 0.3s ease; |
| | | flex-shrink: 0; // 防止按钮被压缩 |
| | | |
| | | &:hover { |
| | | background: rgba(255, 255, 255, 0.3); |
| | | transform: scale(1.1); |
| | | } |
| | | |
| | | // 确保图标居中显示 |
| | | .el-icon { |
| | | margin: 0; |
| | | } |
| | | } |
| | | |
| | | // 折叠状态下调整标题文字 |
| | | |
| | | } |
| | | |
| | | // 折叠状态下隐藏完整标题文字 |
| | | &.left-collapsed .title { |
| | | &:after { |
| | | opacity: 0; |
| | | } |
| | | } |
| | | |
| | | > div:last-child { |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | padding: 20px 15px; |
| | | transition: all 0.3s ease; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pdfimgmins { |
| | | font-size: 28px; |
| | | width: 60%; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .Ticket-button { |
| | | margin-top: 10px; |
| | | .Ticket-button{ |
| | | text-align: right; |
| | | padding-right: 66px; |
| | | margin-right: 50px; |
| | | } |
| | | // 右侧内容区域 |
| | | .right-content { |
| | | flex: 1; |
| | | background: #fff; |
| | | transition: all 0.3s ease; |
| | | overflow-y: auto; |
| | | margin: 0; |
| | | |
| | | .boxdiv { |
| | | max-width: 85vw; |
| | | font-size: 18px; |
| | | padding: 0 30px; |
| | | padding-bottom: 10px; |
| | | margin-top: 10px; |
| | | &.right-expanded { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .top-text { |
| | | text-align: center; |
| | | font-size: 23px; |
| | | font-weight: 600; |
| | | margin: 20px 0; |
| | | margin-bottom: 30px; |
| | | .boxdiv { |
| | | width: 100%; |
| | | max-width: none; |
| | | font-size: 18px; |
| | | padding: 0 30px; |
| | | padding-bottom: 20px; |
| | | margin-top: 0; |
| | | |
| | | .top-text { |
| | | text-align: center; |
| | | font-size: 23px; |
| | | font-weight: 600; |
| | | margin: 20px 0; |
| | | margin-bottom: 30px; |
| | | padding-top: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-step__head.is-finish { |
| | | color: #22a2c3; |
| | | border-color: #22a2c3; |
| | | // 步骤样式优化 |
| | | ::v-deep .el-steps { |
| | | &.el-steps--vertical { |
| | | height: 100%; |
| | | |
| | | .el-step { |
| | | margin-bottom: 15px; |
| | | |
| | | .el-step__head { |
| | | &.is-finish { |
| | | color: #22a2c3; |
| | | border-color: #22a2c3; |
| | | } |
| | | } |
| | | |
| | | .el-step__title { |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | |
| | | &.is-finish { |
| | | color: #22a2c3; |
| | | } |
| | | } |
| | | |
| | | .el-step__description { |
| | | font-size: 12px; |
| | | color: #666; |
| | | line-height: 1.5; |
| | | |
| | | &.is-finish { |
| | | color: #22a2c3; |
| | | } |
| | | |
| | | p { |
| | | margin: 4px 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-step__title.is-finish { |
| | | color: #22a2c3; |
| | | // 响应式设计 |
| | | @media (max-width: 768px) { |
| | | .particularsdiv { |
| | | flex-direction: column; |
| | | |
| | | .left-course { |
| | | width: 100%; |
| | | height: auto; |
| | | max-height: 300px; |
| | | |
| | | &.left-collapsed { |
| | | width: 100%; // 移动端保持全宽 |
| | | min-width: 100%; |
| | | height: 60px; // 只显示标题栏高度 |
| | | max-height: 60px; |
| | | |
| | | .postfilx > div:last-child { |
| | | display: none; // 完全隐藏内容而不是透明 |
| | | } |
| | | } |
| | | |
| | | .postfilx { |
| | | .title { |
| | | .collapse-btn { |
| | | transform: rotate(0deg); // 保持正常方向 |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .right-content { |
| | | margin-left: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-step__description.is-finish { |
| | | color: #22a2c3; |
| | | // 滚动条样式优化 |
| | | .left-course ::-webkit-scrollbar { |
| | | width: 4px; |
| | | } |
| | | |
| | | :v-deep .el-select { |
| | | display: inline-block; |
| | | position: relative; |
| | | width: 80%; |
| | | .left-course ::-webkit-scrollbar-track { |
| | | background: #f1f1f1; |
| | | } |
| | | :v-deep .el-tabs__nav-scroll { |
| | | overflow: auto; |
| | | |
| | | .left-course ::-webkit-scrollbar-thumb { |
| | | background: #c1c1c1; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | .left-course ::-webkit-scrollbar-thumb:hover { |
| | | background: #a8a8a8; |
| | | } |
| | | </style> |