soc_web/src/views/system/user/extend.vue

<template>
  <div class="app-container">
    <div class="user-extend">
      <div class="info-box">
        <el-descriptions size="medium" border>
          <template #title>
            <h3 class="title">
              <i class="el-icon-collection-tag"></i>
              基础信息
            </h3>
          </template>
          <el-descriptions-item v-for="v in dataInfo" :label="v.label" :key="v.key">{{ v.value }}</el-descriptions-item>
          <el-descriptions-item label="角色">{{ roleName }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ sex }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ status }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="info-box">
        <h3 class="title">
          <i class="el-icon-collection-tag"></i>
          安保部门从业人员补充信息
        </h3>
        <el-form inline :model="formData" :rules="rules" ref="form" label-position="left" label-width="140px">
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <!-- <el-form-item label="是否专职" prop="isFullTime">

                <el-switch v-model="formData.isFullTime" active-value="1" inactive-value="0"></el-switch>
              </el-form-item> -->
              <el-form-item label="是否专职" prop="isFullTime">
                <el-radio-group v-model="formData.isFullTime">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no"
                    :key="`${dict.value}`"
                    :label="dict.value"

                  >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="持证上岗通过情况" prop="certificateWork" label-width="180">
                <el-switch v-model="formData.certificateWork" active-value="1" inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8">

              <el-form-item label="持证上岗未通过原因" v-if="formData.certificateWork == 0" label-width="240"
                            prop="certificateFailReason">
                <el-select style="width: 225px;" v-model="formData.certificateFailReason" placeholder="请选择未通过原因">
                  <el-option v-for="dict in dict.type.post_no_pass" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8" :lg="8">
              <el-form-item label="专业技术职业资格" v-if="formData.certificateWork != 0" label-width="240"
                            prop="professionalQualifications">
                <el-input style="width: 240px;" maxlength="50" v-model="formData.professionalQualifications"
                          placeholder="请输入初级以上证书名称">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>


            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="所属部门" prop="deptId">
                <el-select style="width: 217px;" v-model="formData.deptId" placeholder="请选择所属部门">
                  <el-option v-for="dict in dict.type.department_name" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="现任职务" prop="duties">
                <el-select style="width: 217px;" v-model="formData.duties" placeholder="请选择现任职务">
                  <el-option v-for="dict in dict.type.current_position" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item prop="entryTime" label="现任职日期">
                <el-date-picker style="width: 270px;" v-model="formData.entryTime"  align="right"
                                type="date" placeholder="选择现任职日期">
                </el-date-picker>
              </el-form-item>
            </el-col>


          </el-row>
          <el-row>

            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="用工形式" prop="workType">
                <el-select style="width: 217px;" v-model="formData.workType" placeholder="请选择用工形式">
                  <el-option v-for="dict in dict.type.sys_work_type" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="学历取得方式" prop="educationType">
                <el-select style="width: 217px;" v-model="formData.educationType" placeholder="请选择学历取得方式">
                  <el-option v-for="dict in dict.type.sys_education_type" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="最高学历" prop="highestEducation">
                <el-select style="width: 270px;" v-model="formData.highestEducation" placeholder="请选择最高学历">
                  <el-option v-for="dict in dict.type.sys_highest_education" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>

            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item prop="bornTime" label="出生日期">
                <el-date-picker v-model="formData.bornTime" @change="startDateChanged"
                                :picker-options="startDatepickerOptions" align="right" type="date" placeholder="选择出生日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="参加工作时间" prop="workTime">
                <el-date-picker style="width: 217px;" v-model="formData.workTime"
                                align="right" type="date" placeholder="请选择参加工作时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="身份证号码" prop="idCard">
                <el-input maxlength="18" style="width: 270px;" v-model="formData.idCard"
                          placeholder="请输入身份证号码">
                </el-input>
              </el-form-item>
            </el-col>


          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="分管领导姓名" prop="responsibilitiesLeaderName">
                <el-input maxlength="50" style="width: 217px;" v-model="formData.responsibilitiesLeaderName"
                          placeholder="请输入分管领导姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <el-form-item label="分管领导职务" prop="responsibilitiesLeaderDuties">
                <el-select style="width: 217px;" v-model="formData.responsibilitiesLeaderDuties" placeholder="请选择分管领导职务">
                  <el-option v-for="dict in dict.type.sys_duties" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8">
              <el-form-item label="专业技术职业资格" v-if="formData.certificateWork != 0" label-width="240"
                            prop="professionalQualifications">
                <el-input style="width: 280px;" maxlength="50" v-model="formData.professionalQualifications"
                          placeholder="请输入初级以上证书名称">
                </el-input>
              </el-form-item>
            </el-col> -->

            <el-col :xs="24" :sm="12" :md="8" :lg="8">
              <el-form-item label="金融安全防范工程专家" prop="financialExperts" label-width="240">
                <el-select style="width: 210px;" v-model="formData.financialExperts" placeholder="请选择金融安全防范工程专家">
                  <el-option v-for="dict in dict.type.administrative_level" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <el-form-item v-if="formData.certificateWork != 0" label="上传初级以上专业技术职业资格证书">
                <imgs-upload :limit="5" v-model="formData.qualificationCertificateUrl" :fileSize="2"></imgs-upload>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </div>
      <div style="padding-top: 10px; margin-left: 42%">
        <el-button type="primary" @click="saveExtend" v-hasPermi="['system:information:edit']" size="small">提交</el-button>
        <el-button type="primary" @click="nosaveExtend" size="small">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import uploadpng from "@/assets/images/upload.png";
import uplpng from "@/assets/images/upl.png";
import { getUser } from "@/api/system/user";
import TreeSelect from '@riophae/vue-treeselect'
import ImgsUpload from "@/components/ImgsUpload";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeList } from "@/api/system/public";

import { extendUserInformation } from "@/api/system/information";

export default {
  props: [],
  components: { TreeSelect ,ImgsUpload},
  dicts: ['administrative_level','sys_yes_no','sys_highest_education', "sys_work_type", "sys_duties", "sys_education_type", 'sys_department_type', 'post_no_pass', 'current_position','department_name'],
  data() {
    return {
      startDatepickerOptions: {
        disabledDate(time) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          return time.getTime() >= date;
        },
      },
      endDatepickerOptions: {
        disabledDate: this.disabledDate,
      },
      //基础信息key
      infoKeys: [
        { label: '用户名称', key: 'username' },
        { label: '用户昵称', key: 'name' },
        { label: '工号', key: 'jobNumber' },
        //  {label:'部门',key:'orgName'},
        { label: '手机', key: 'phone' },
        // {label:'性别',key:'gender'},
        // {label:'状态',key:'isLock'},
        { label: '机构', key: 'orgName' },
      ],
      dataInfo: [],
      formData: {
        deptId: null,
        duties: null,
        workType: null,
        isFullTime: "1",
        highestEducation: null,
        educationType: null,
        certificateWork: "1",
        professionalQualifications: null,
        certificateFailReason: null,
        workTime: null,
        entryTime: null,
        bornTime: null,
        responsibilitiesLeaderName: null,
        responsibilitiesLeaderDuties: null,
        qualificationCertificateUrl: null,
        userId: null,
      },
      rules: {
        financialExperts:[
          { required: true, message: '请选择金融安全防范工程专家级别', trigger: 'blur'}
        ],
        idCard:[
          { required: true, message: '请输入身份证号码', trigger: 'change'}
        ],
        deptId: [
          { required: true, message: '请选择所属部门', trigger: 'blur' },
        ],
        duties: [
          { required: true, message: '请选择职务', trigger: 'blur' },
        ],
        workType: [
          { required: true, message: '请选择用工形式', trigger: 'blur' },
        ],
        isFullTime: [
          { required: true, message: '请选择是否专职', trigger: 'blur' },
        ],
        highestEducation: [
          { required: true, message: '请选择最高学历', trigger: 'blur' },
        ],
        educationType: [
          { required: true, message: '请选择学历取得形式', trigger: 'blur' },
        ],
        certificateWork: [
          { required: true, message: '请选择是否持证上岗', trigger: 'blur' },
        ],
        workTime: [
          { required: true, message: '请选择参加工作时间', trigger: 'blur' },
        ],
        entryTime: [
          { required: true, message: '请选择入职时间', trigger: 'change' }
        ],
        bornTime: [
          { required: true, message: '请选择出生时间', trigger: 'change' }
        ],
        responsibilitiesLeaderName: [
          { required: true, message: '请输入分管领导名字', trigger: 'change' }
        ],
        responsibilitiesLeaderDuties: [
          { required: true, message: '请选择分管领导职务', trigger: 'change' }
        ],
        qualificationCertificateUrl: [
          { required: true, message: '请选择上传资格证', trigger: 'change' }
        ],
        professionalQualifications: [
          { required: true, message: '请输入初级以上相关专业技术职业资格', trigger: 'change' }
        ],
        certificateFailReason: [
          { required: true, message: '请输入持证上岗未通过原因', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      // 机构树选项
      deptList: undefined,
      // 遮罩层
      orgloading: true,
      // 选中数组
      orgids: [],
      // 选中数组
      Bankids: [],
      // 非单个停用
      single: true,
      // 非多个停用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机构物防建设表格数据
      constructionList: [],
      // 银行物防建设表格数据
      BankPhysicalDefenseConstructionList: [],
      // 弹出层标题
      orgtitle: "",
      // 弹出层标题
      Banktitle: "",
      // 是否显示弹出层
      Bankopen: false,
      // 表单参数
      Bankform: {},
      // 是否显示弹出层
      orgopen: false,
      roleName: null,
      sex: null,
      status: null,
      // 表单参数
      orgform: {},
      //2个图片信息
      uploadp: uploadpng,
      uplp: uplpng,
      //下拉框生成信息
      orgTypes: {
        orgTyp1: { label: "营业网点", value: 0 },
        orgTyp2: { label: "监控中心", value: 1 },
      },

      businessLibraryTypes: {
        businessLibraryTyp1: { label: "1类业务库", value: 1 },
        businessLibraryTyp2: { label: "2类业务库", value: 2 },
        businessLibraryTyp3: { label: "3类业务库", value: 3 },
      },
      platformBrands: {
        platformBrand1: { label: "品牌1", value: 0 },
        platformBrand2: { label: "品牌2", value: 1 },
      },
      platformSupplierBrands: {
        platformSupplierBrand1: { label: "品牌1", value: 0 },
        platformSupplierBrand2: { label: "品牌2", value: 1 },
      },
      prop: "",
      propItem: "",

      row: "",
      imgs: []
    };
  },

  computed: {
    switchModel: {
      get() {
        return this.switchValue === 1; // 将0转换为false，1转换为true
      },
      set(value) {
        this.switchValue = value ? 1 : 0; // 将false转换为0，true转换为1
      },
    },
  },
  created() {
    this.getInfo();
    this.getDeptTreeList();
  },
  mounted() {
  },
  methods: {


    getImgUrl(img) {

      this.imgs.push(img);
      console.log(this.imgs, 'imgs')
    },
    handleChange(value) {
    },
    //自定义数据
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      }
    },
    getInfo() {
      getUser(this.$route.params.userId).then((data) => {
        if (!data.data) return;
        let res = data.data;
        this.dataInfo = this.infoKeys.map((v, i) => {
          v.value = res[v.key];
          return v
        })
        this.roleName = data.roleName;
        this.sex = data.sex;
        this.status = data.status;
        //console.log(data.information.qualificationCertificateUrl, '5555')
        //let img = data.information.qualificationCertificateUrl.split(',');
        this.formData = data.information;
        //this.formData.qualificationCertificateUrl = img.map((v, i) => { return this.imageUrl(v) });
      });
    },


    saveExtend() {
      this.formData.userId = this.$route.params.userId;
     // let imgs = JSON.parse(JSON.stringify(this.imgs));
     // let qualificationCertificateUrl = imgs.toString(',');
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let data = {
            ...this.formData,
           // qualificationCertificateUrl
          }
          extendUserInformation(data).then(res => {
            this.$message.success('保存成功！')
            this.$router.go(-1)
          })
        }
      });

    },
    getExtendInfo() {
      getExtendByOrgId(this.$route.params.id).then((data) => {
        console.log(data.data);
        if (data.data != null) {
          this.orgType = data.data.orgType;
          this.weatherAreaCode = data.data.weatherAreaCode;
          this.premisesArea = data.data.premisesArea;
          this.ownership = data.data.ownership;
          this.outsideArea = data.data.outsideArea;
          this.askari = data.data.askari;
          this.remoteControl = data.data.remoteControl;
          this.selfServiceBank = data.data.selfServiceBank;
          this.lobbyEquipment = data.data.lobbyEquipment;
          this.wallPenetratingEquipment = data.data.wallPenetratingEquipment;
          this.extendId = data.data.id;
        }
      });
    },
    startDateChanged(time) {
      if (this.formData.bornTime > this.formData.entryTime) {
        if (null != this.formData.entryTime) {
          this.formData.entryTime = this.formData.bornTime;
        }
      }
    },
    disabledDate(time) {
      //小于开始日期禁止选择
      let bornTime = new Date();
      bornTime.setTime(bornTime.getTime() - 3600 * 1000 * 24);
      if (this.formData.bornTime) {
        bornTime = new Date(this.formatTime(this.formData.bornTime, 'YYYY-MM-DD'));
        bornTime.setTime(bornTime.getTime() - 3600 * 1000 * 24);
      }
      const date = new Date();
      date.setTime(date.getTime());
      return (!(new Date(bornTime).getTime() < time.getTime()) || !(time.getTime() < new Date(date).getTime()))
    },
    /** 查询机构下拉树结构 */
    getDeptTreeList() {
      deptTreeList().then(response => {
        this.deptList = response.data;
        this.defaultKeys = response.data[0];
      });
    },
    getOrgPhysicalDefenseConstructionInfo() {
      this.orgloading = true;
      let dat = { orgId: this.$route.params.id };
      listOrgPhysicalDefenseConstruction(dat).then((data) => {
        this.constructionList = data.rows;
        this.orgloading = false;
      });
    },
    getBankPhysicalDefenseConstructionInfo() {
      this.bankloading = true;
      let dat = { orgId: this.$route.params.id };
      listBankPhysicalDefenseConstruction(dat).then((data) => {

        this.BankPhysicalDefenseConstructionList = data.rows;
        this.bankloading = false;
      });
    },
    // 取消按钮
    Bankcancel() {
      this.Bankopen = false;
      this.Bankreset();
    },
    // 表单重置
    Bankreset() {
      this.Bankform = {
        id: null,
        standard: null,
        dateOfCompliance: null,
        certificateEvidence: null,
        certificate: null,
        evidence: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        orgId: null,
      };
      this.resetForm("Bankform");
    },
    // 多选框选中数据
    handleBankSelectionChange(selection) {
      this.Bankids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleBankAdd() {
      this.Bankreset();
      this.Bankopen = true;
      this.Banktitle = "添加银行物防建设";
    },
    /** 修改按钮操作 */
    handleBankUpdate(row) {
      this.Bankreset();
      const id = row.id || this.Bankids;
      getBankPhysicalDefenseConstruction(id).then((response) => {
        this.Bankform = response.data;
        this.Bankopen = true;
        this.Banktitle = "修改银行物防建设";
      });
    },
    /** 提交按钮 */
    submitBankForm() {
      this.Bankform.orgId = this.$route.params.id;
      this.$refs["Bankform"].validate((valid) => {
        if (valid) {
          if (this.Bankform.id != null) {
            updateBankPhysicalDefenseConstruction(this.Bankform).then(
              (response) => {
                this.$modal.msgSuccess("修改成功");
                this.Bankopen = false;
                this.getBankPhysicalDefenseConstructionInfo();
              }
            );
          } else {
            addBankPhysicalDefenseConstruction(this.Bankform).then(
              (response) => {
                this.$modal.msgSuccess("新增成功");
                this.Bankopen = false;
                this.getBankPhysicalDefenseConstructionInfo();
              }
            );
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleBankDelete(row) {
      const Bankids = row.id || this.Bankids;
      this.$modal
        .confirm('是否确认删除银行物防建设编号为"' + Bankids + '"的数据项？')
        .then(function () {
          return delBankPhysicalDefenseConstruction(Bankids);
        })
        .then(() => {
          this.getBankPhysicalDefenseConstructionInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    // 表单重置
    orgreset() {
      this.orgform = {
        id: null,
        standard: null,
        dateOfCompliance: null,
        certificateEvidence: null,
        certificate: null,
        evidence: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        orgId: null,
      };
      this.resetForm("orgform");
    },
    // 取消按钮
    orgcancel() {
      this.orgopen = false;
      this.orgreset();
    },
    // 多选框选中数据
    handleOrgSelectionChange(selection) {
      this.orgids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleOrgAdd() {
      this.orgreset();
      this.orgopen = true;
      this.orgtitle = "添加机构物防建设";
    },
    /** 修改按钮操作 */
    handleOrgUpdate(row) {
      this.orgreset();
      const id = row.id || this.orgids;
      getOrgPhysicalDefenseConstruction(id).then((response) => {

        this.orgform = response.data;
        this.orgopen = true;
        this.orgtitle = "修改机构物防建设";
      });
    },
    /** 提交按钮 */
    submitOrgForm() {
      this.orgform.orgId = this.$route.params.id;
      this.$refs["orgform"].validate((valid) => {
        if (valid) {
          if (this.orgform.id != null) {
            updateOrgPhysicalDefenseConstruction(this.orgform).then(
              (response) => {
                this.$modal.msgSuccess("修改成功");
                this.orgopen = false;
                this.getOrgPhysicalDefenseConstructionInfo();
              }
            );
          } else {
            addOrgPhysicalDefenseConstruction(this.orgform).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.orgopen = false;
              this.getOrgPhysicalDefenseConstructionInfo();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleOrgDelete(row) {
      const orgids = row.id || this.orgids;
      this.$modal
        .confirm('是否确认删除机构物防建设编号为"' + orgids + '"的数据项？')
        .then(function () {
          return delOrgPhysicalDefenseConstruction(orgids);
        })
        .then(() => {
          this.getOrgPhysicalDefenseConstructionInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },

    nosaveExtend() {
      this.$router.go(-1);
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    async handleFileChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      // 创建 FormData 对象并添加文件
      const formData = new FormData();
      formData.append('file', file);

      // // 发送文件到您的文件上传 API
      try {
        uploadFile(formData).then((res) => {
          console.log(res);
          // this.orgform.certificateEvidence = res.data;
        });
        // 处理上传成功的逻辑
        console.log('上传成功');
      } catch (error) {
        // 处理上传失败的逻辑
        console.log('上传失败');
      }
      // try {
      //   const response = await request.post('http://localhost:9527/dev-api/file/file/upload', formData, {
      //     headers: {
      //       'Content-Type': 'multipart/form-data',
      //     },
      //   });
      //   // 处理上传成功的逻辑
      //   console.log('上传成功', response);
      // } catch (error) {
      //   // 处理上传失败的逻辑
      //   console.log('上传失败', error);
      // }
      // 重置 input 元素，以便下次选择相同文件时仍能触发 change 事件
      event.target.value = '';
    },
  },
  fillter: {},
};
</script>

<style scoped lang="scss">
.user-extend{
  background-color: #fff;
  padding: 10px;
}
.title {
  font-size: 18px;
  text-align: left;
  color: #008CD6ff;
  height: 36px;
  line-height: 36px;
  padding-left: 8px;
  margin: 0;
}

.info-box {
  margin: 20px;
}

.demo-form-inline {}

.dialog-footer {}

.container {}

.image-container {
  display: inline-block;
  width: 200px;
  margin-right: 20px;
  /* 设置与下一个div的水平间距 */
}

.zoom-image {
  transition: transform 0.3s ease;
}

.zoom-image:hover {
  transform: scale(1.02);
}

.border-color-change {
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

.border-color-change:hover {
  border-color: #1ea8e9;
  /* 您可以将此颜色更改为所需的颜色 */
}
</style>