修改

马宇豪

2024-11-13 12a7587eb12e3d33809ef9c169dd76b20ac707c4

 src/views/safetyReview/expertManage/checkProgress/index.vue

@@ -1,333 +1,57 @@
<template>
    <div class="form-container">
          <div class="main-title" style="font-size: 24px;font-weight: bolder;text-align: center;margin: 40px 0">专家信息录入</div>
          <div class="main_form">
            <el-form :model="state.form" :rules="state.rules" ref="ruleFormRef" label-width="200px">
              <el-row>
                <el-col :span="20">
                  <el-form-item label="专业类别" prop="profession">
                    <el-cascader
                        style="width: 100%"
                        v-model="state.form.profession"
                        :options="state.expertsType"
                        :props="{ expandTrigger: 'hover',value: 'id',label: 'classifyName' }"
                        @change="professionChange"></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <!--        <el-row>-->
              <!--          <el-col :span="20">-->
              <!--            <el-form-item label="填报日期" prop="date">-->
              <!--              <el-date-picker-->
              <!--                style="width: 100%"-->
              <!--                v-model="form.date"-->
              <!--                type="date"-->
              <!--                placeholder="选择日期">-->
              <!--              </el-date-picker>-->
              <!--            </el-form-item>-->
              <!--          </el-col>-->
              <!--        </el-row>-->
              <el-row>
                <el-col :span="20">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="state.form.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="state.form.sex">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker
                        style="width: 100%"
                        v-model="state.form.birthday"
                        value-format="YYYY-MM-DD 00:00:00"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="state.form.phone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="职称" prop="title">
                    <!--              <el-select v-model="form.title" placeholder="请选择" style="width: 100%">-->
                    <!--                <el-option-->
                    <!--                  v-for="item in professionalList"-->
                    <!--                  :key="item.value"-->
                    <!--                  :label="item.label"-->
                    <!--                  :value="item.value">-->
                    <!--                </el-option>-->
                    <!--              </el-select>-->
                    <el-input v-model="state.form.title"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="证件照" prop="electronicPhoto">
                    <el-upload accept="image/*" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'证件照')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='1' v-model:file-list="state.fileList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'证件照')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="state.form.idCard"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="在岗情况" prop="dutyStatus">
                    <el-radio-group v-model="state.form.dutyStatus">
                      <el-radio :label="0">在岗</el-radio>
                      <el-radio :label="1">退休</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="单位全称" prop="companyName">
                    <el-input v-model="state.form.companyName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="单位地址">
                    <el-input v-model="state.form.companyAddress"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="所在部门">
                    <el-input v-model="state.form.deptName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="职务">
                    <el-input v-model="state.form.job"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="单位电话">
                    <el-input v-model="state.form.companyTelephone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="传真号码">
                    <el-input v-model="state.form.faxNum"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="电子邮箱">
                    <el-input v-model="state.form.email"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="毕业学校">
                    <el-input v-model="state.form.graduationSchool"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="最高学历" prop="degree">
                    <el-input v-model="state.form.degree"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="所学专业">
                    <el-input v-model="state.form.speciality"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="现从事的专业及方向">
                    <el-input v-model="state.form.currentProfession"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="支撑方向_安全生产" prop="supportDirectionSafety">
                    <!--              <el-radio-group v-model="form.supportDirectionSafety">-->
                    <!--                <el-radio v-for="item in directionList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>-->
                    <!--              </el-radio-group>-->
                    <el-checkbox-group v-model="state.form.supportDirectionSafety">
                      <el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="支撑方向_防灾减灾救灾" prop="supportDirectionPrevention">
                    <!--              <el-radio-group v-model="form.supportDirectionPrevention">-->
                    <!--                <el-radio v-for="item in directionList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>-->
                    <!--              </el-radio-group>-->
                    <el-checkbox-group v-model="state.form.supportDirectionPrevention">
                      <el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="支撑方向_应急救援" prop="supportDirectionEmergency">
                    <!--              <el-radio-group v-model="form.supportDirectionEmergency">-->
                    <!--                <el-radio v-for="item in directionList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>-->
                    <!--              </el-radio-group>-->
                    <el-checkbox-group v-model="state.form.supportDirectionEmergency">
                      <el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="工作简历">
                    <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'简历')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.resumeList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'简历')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="发明、著作、学术论文情况（何时、何地出版或发表）">
                    <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'著作')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.inventionList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'著作')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="受过何种奖励">
                    <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'奖励')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.rewardList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'奖励')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="应急管理相关工作主要业绩及研究成果">
                    <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'研究')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.achievementList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'研究')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="专家本人意见">
                    <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'本人')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.proAdviceList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'本人')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="推荐单位意见">
                    <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'单位')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.adviceList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'单位')" :before-remove="beforeRemove">
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="补充说明">
                    <el-input v-model="state.form.remark" type="textarea" :autosize="{ minRows: 2}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-dialog v-model="imgDialog">
              <img w-full :src="state.dialogImageUrl" alt="">
            </el-dialog>
          </div>
      <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0">
        <el-button type="primary" @click="onSubmit(ruleFormRef)" size="large" v-preReClick style="width: 40%">确认</el-button>
      </div>
  <div class="form-container">
    <el-dialog
        v-model="dialogVisible"
        title="专家申请进度查询"
        width="550px"
        :before-close="handleClose"
        center
    >
      <el-form :model="state.form" size="default" ref="formRef" :rules="state.formRules" label-width="110px" >
        <el-form-item label="身份证号:" prop="idCard">
          <el-input v-model.trim="state.form.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model.trim="state.form.phone" placeholder="请输入申报时预留的手机号"></el-input>
        </el-form-item>
        <el-form-item label="业务处室:" prop="roomId">
          <el-select v-model="state.form.roomId"  style="width: 100%" class="m-2" placeholder="请选择申请的业务处室">
            <el-option
                v-for="item in state.agencyList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>进度查询</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="pro-map">
      <button class="pro-btn-active">申请提交</button>
      <button class="pro-btn">
        <span>待评定</span>
      </button>
      <button class="pro-btn">
        专家入库
      </button>
      <button class="pro-btn">
        专家证书下载
      </button>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs, defineEmits, nextTick, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus"
import {verifyPhone, verifyIdCard} from "../../../../utils/validate"
import {addExpertInfo, getExpertTypes, uploadFile} from "@/api/form"
import {delPic} from "@/api/login"
import { getToken } from "@/utils/auth"
import {Base64} from "js-base64"

const imgDialog = ref(false)
const ruleFormRef = ref()
var validatePass = (rule, value, callback) => {
  if (state.fileList.length == 0) {
    callback(new Error('请上传证件照'));
  } else {
    callback();
  }
}

let validatePhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
@@ -351,255 +75,37 @@
  }
}

const dialogVisible = ref(false)
const formRef = ref()
const handleClose = () => {
  reset();
  formRef.value.clearValidate();
  dialogVisible.value = false;
}


const state = reactive({
  form:{
    name:'',
    sex:'',
    profession: [],
    bigClassify:null,
    smallClassify: null,
    birthday: '',
    phone:'',
    title: '',
    electronicPhoto: '',
    idCard: '',
    dutyStatus: null,
    companyName: '',
    companyAddress: '',
    deptName: '',
    job: '',
    companyTelephone: '',
    faxNum: '',
    email: '',
    graduationSchool: '',
    degree: '',
    speciality: '',
    currentProfession: '',
    supportDirectionSafety: [],
    supportDirectionPrevention: [],
    supportDirectionEmergency: [],
    resumeKey: '',
    paperSituationKey: '',
    rewardKey: '',
    achievementKey: '',
    personalOpinionKey: '',
    recommendUnitOpinionKey: '',
    remark: '',
    source: 1
    idCard: null,
    phone: '',
    roomId: null
  },
  expertsType: [],
  directionList: [
    {
      value: 1,
      label: '现场检查'
    },
    {
      value: 2,
      label: '调查评估'
    },
    {
      value: 3,
      label: '咨询服务'
    },
    {
      value: 4,
      label: '教育培训'
    },
    {
      value: 5,
      label: '其他'
    }
  ],
  uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
  header: {
    Authorization: 'Bearer ' + getToken()
  },
  fileList: [],
  resumeList: [],
  inventionList: [],
  rewardList: [],
  achievementList: [],
  proAdviceList: [],
  adviceList: [],
  dialogImageUrl: '',
  rules:{
    name:[{ required: true, message: '请填写姓名', trigger: 'blur' }],
    sex:[{ required: true, message: '请选择性别', trigger: 'blur' }],
    profession: [{ required: true, message: '请选择专业类别', trigger: 'blur' }],
    birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
  formRules:{
    idCard:[{ required: true, validator: verifyId, trigger: 'blur' }],
    phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
    title: [{ required: true, message: '请填写职称', trigger: 'blur' }],
    electronicPhoto: [{ required: true,validator: validatePass, trigger: 'blur' }],
    idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
    dutyStatus: [{ required: true, message: '请选择在岗情况', trigger: 'blur' }],
    companyName: [{ required: true, message: '请填写单位全称', trigger: 'blur' }],
    degree: [{ required: true, message: '请填写最高学历', trigger: 'blur' }]
    roomId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }]
  }
})

  onMounted(()=>{
    getExpertsType()
  })
onMounted(()=>{

  const getExpertsType = async ()=>{
    const res = await getExpertTypes()
    if(res.code == 200){
      state.expertsType = res.data
    }else{
      ElMessage({
        type: 'warning',
        message: res.message
      });
    }
  }

  const professionChange=(value)=> {
    console.log(value,'val')
  }



  // 图片上传
  const showTip =()=>{
    ElMessage({
      type: 'warning',
      message: '超出文件上传数量'
    });
  }

  const picSize = async (rawFile) => {
    if(rawFile.size / 1024 / 1024 > 5){
      ElMessage({
        type: 'warning',
        message: '文件大小不能超过5M'
      });
      return false
    }
  };

  const handlePictureCardPreview = (uploadFile) => {
    state.dialogImageUrl = uploadFile.url
    imgDialog.value = true;
  }

  const handleAvatarSuccess = (res, uploadFile,type) => {
    if(res.code == 200){
      if(type == '证件照'){
        state.form.electronicPhoto = res.data.path
      }else{
        uploadFile.name = res.data.path
      }
    }else{
      ElMessage({
        type: 'warning',
        message: '文件上传失败'
      })
    }
  }

  const handleRemove = (file, uploadFiles,type) => {
    if(file && file.status == 'success') {
      ElMessageBox.confirm(
          '该操作将永久删除此文件内容，是否继续？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            let path = ''
            if (type == '证件照') {
              path = state.form.electronicPhoto
            } else {
              path = file.name
            }
            const res = await delPic({path: path})
            if (res.code == 200) {
              ElMessage({
                type: 'success',
                message: '文件已删除'
              })
            } else {
              ElMessage({
                type: 'warning',
                message: res.message
              })
            }
          })
    }
  }
})

const onSubmit = async (formEl)=> {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if(state.form.supportDirectionSafety.length==0&&state.form.supportDirectionSafety.length==0&&state.form.supportDirectionSafety.length==0){
        ElMessage.warning('请至少选择一种支撑方向')
        return
      }
      let data = JSON.parse(JSON.stringify(state.form))
      data.supportDirectionSafety = data.supportDirectionSafety.join(',')
      data.supportDirectionPrevention = data.supportDirectionPrevention.join(',')
      data.supportDirectionEmergency = data.supportDirectionEmergency.join(',')
      data.bigClassify = data.profession[0]
      data.smallClassify = data.profession[1]
      data.resumeKey = state.resumeList.map(i=>i.name).join(',')
      data.paperSituationKey = state.inventionList.map(i=>i.name).join(',')
      data.rewardKey = state.rewardList.map(i=>i.name).join(',')
      data.achievementKey = state.achievementList.map(i=>i.name).join(',')
      data.personalOpinionKey = state.proAdviceList.map(i=>i.name).join(',')
      data.recommendUnitOpinionKey = state.adviceList.map(i=>i.name).join(',')
      delete data.profession
      delete data.id
      const res= await addExpertInfo(data)
      if(res.code == 200){
        ElMessage.success(res.message)
        state.form = {
          name:'',
          sex:'',
          profession: [],
          bigClassify:null,
          smallClassify: null,
          birthday: '',
          phone:'',
          title: '',
          electronicPhoto: '',
          idCard: '',
          dutyStatus: null,
          companyName: '',
          companyAddress: '',
          deptName: '',
          job: '',
          companyTelephone: '',
          faxNum: '',
          email: '',
          graduationSchool: '',
          degree: '',
          speciality: '',
          currentProfession: '',
          supportDirectionSafety: [],
          supportDirectionPrevention: [],
          supportDirectionEmergency: [],
          resumeKey: '',
          paperSituationKey: '',
          rewardKey: '',
          achievementKey: '',
          personalOpinionKey: '',
          recommendUnitOpinionKey: '',
          remark: '',
          source: 1
        }
        state.fileList = []
        state.resumeList = []
        state.inventionList = []
        state.rewardList = []
        state.achievementList = []
        state.proAdviceList = []
        state.adviceList = []
      }else{
        ElMessage.warning(res.message)
      }

    } else {
      ElMessage.warning('请完善必填信息')
    }
@@ -610,15 +116,40 @@

<style scoped lang="scss">
.form-container{
    padding: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

    :deep(.el-form .el-form-item__label) {
        font-size: 15px;
  .pro-map{
    width: 75%;
    margin-top: 40px;
    display: flex;
    justify-content: space-around;

    .pro-btn {
      width: calc(25% - 20px);
      color: #fff;
      cursor: pointer;
      border: 1px solid #000;
      border-radius: 40px 99px 99px 40px;
      padding: 2em 4em;
      background: #000;
      transition: 0.2s;
    }
    .file {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

    .pro-btn-active {
      width: calc(25% - 20px);
      color: #fff;
      cursor: pointer;
      border: 1px solid #000;
      border-radius: 40px 99px 99px 40px;
      padding: 2em 4em;
      transition: 0.2s;
      transform: translate(-0.25rem, -0.25rem);
      background: #03a9f4;
      box-shadow: 0.25rem 0.25rem #000;
    }
  }
}
</style>