病案首页质控以及其他优化

src/api/case-front-sheet/index.js

@@ -328,4 +328,44 @@ export function getExportableDclData(data) {
         method: 'post',
         data
     })
-}
+}
+
+export function submitQualityVerification(data) {
+    return request({
+        url: '/caseFrontSheet/submitQualityVerification',
+        method: 'post',
+        data
+    })
+}
+
+export function fetchQualityVerifications(data) {
+    return request({
+        url: '/caseFrontSheet/fetchQualityVerifications',
+        method: 'post',
+        data
+    })
+}
+
+export function executeAudit(data) {
+    return request({
+        url: '/caseFrontSheet/executeAudit',
+        method: 'post',
+        data
+    })
+}
+
+export function fetchAuditHistories(data) {
+    return request({
+        url: '/caseFrontSheet/fetchAuditHistories',
+        method: 'post',
+        data
+    })
+}
+
+export function fetchAuditCount(data) {
+    return request({
+        url: '/caseFrontSheet/fetchAuditCount',
+        method: 'post',
+        data
+    })
+}

src/components/cy/dialog/src/useCyDialog.ts

@@ -78,12 +78,14 @@ export function UseCyDialog(props: IsCyDialog, emit: any) {
         if (props.fullScreen) {
             return {
                 height: `calc(100% - ${state.headerHeight}px - ${state.footerHeight}px)`,
-                padding: props.bodyPadding
+                padding: props.bodyPadding,
+                overflowY: 'auto',
             }
         } else {
             return {
                 height: props.bodyHeight,
-                padding: props.bodyPadding
+                padding: props.bodyPadding,
+                overflowY: 'auto',
             }
         }
     })

src/components/inpatient/frontsheet-printpage/AuditHistory.vue

@@ -0,0 +1,68 @@
+<template>
+  <CyDialog title="质控记录" body-width="650px" :show-cancel-button="false" confirm-text="关闭">
+    <el-timeline style="max-width: 600px">
+      <el-timeline-item v-for="item in histories" :timestamp="item.applicationTime" placement="top">
+        <el-card>
+          <h4>
+            患者：{{ item.patName }} / {{ item.patNo }} / {{ item.times }}
+          </h4>
+          <p>审核结果：{{ item.auditRemark }}</p>
+          <p style="font-size: 12px; color: dimgray">
+            <span>审核人：{{ item.auditStaffName }}</span>
+            <span style="margin-left: 32px">审核时间：{{ item.auditTime }}</span>
+          </p>
+          <img :src="item.auditState === 'APPROVED' ? approveImg : rejectImg" alt="" class="img-state">
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+
+    <div
+        v-if="histories.length === 0"
+        style="font-size: 36px;
+        height: 86%;
+        color: #777777;
+        display: flex;
+        align-items: center;
+        justify-content: center"
+    >
+      没有有效的质控记录
+    </div>
+
+  </CyDialog>
+</template>
+
+<script setup lang="ts">
+import CyDialog from "@/components/cy/dialog/src/CyDialog.vue";
+import {fetchAuditHistories} from "@/api/case-front-sheet";
+import rejectImg from "@/assets/reject.png"
+import approveImg from "@/assets/approved.png"
+
+const props = defineProps({
+  patinfo: {
+    type: Object,
+    required: true,
+  }
+})
+
+const histories = ref([])
+
+onMounted(() => {
+  fetchAuditHistories(props.patinfo).then(res => {
+    console.log(res)
+    histories.value = res
+  })
+})
+</script>
+
+<style scoped>
+:deep(.el-card) {
+  position: relative;
+}
+
+.img-state {
+  width: 64px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>

src/components/inpatient/frontsheet-printpage/RejectAudit.vue

@@ -0,0 +1,79 @@
+<template>
+  <CyDialog
+      title="质控驳回"
+      body-width="300px"
+      body-height="300px"
+      :confirm-click="handleClickConfirm"
+  >
+    <div class="line-wrapper">
+      <div class="line-left">患者姓名：</div>
+      <div class="line-right">{{verification.patName}}</div>
+    </div>
+    <div class="line-wrapper">
+      <div class="line-left">住院号：</div>
+      <div class="line-right">{{verification.patNo}}</div>
+    </div>
+    <div class="line-wrapper">
+      <div class="line-left">住院次数：</div>
+      <div class="line-right">{{verification.times}}</div>
+    </div>
+    <div class="line-wrapper">
+      <div class="line-left">医生姓名：</div>
+      <div class="line-right">{{verification.doctorName}}</div>
+    </div>
+    <div class="line-wrapper">
+      <div class="line-left">驳回理由：</div>
+    </div>
+    <div class="line-wrapper" style="padding: 0 24px">
+      <el-input
+          v-model="remark"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入驳回理由"
+      />
+    </div>
+  </CyDialog>
+</template>
+
+<script lang="ts" setup>
+import CyDialog from "@/components/cy/dialog/src/CyDialog.vue";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import {executeAudit} from "@/api/case-front-sheet";
+
+const props = defineProps({
+  verification: {
+    type: Object,
+    required: true,
+  }
+})
+
+const remark = ref('')
+
+function handleClickConfirm(next) {
+  if (!remark.value) {
+    xcMessage.error('驳回理由不能为空！');
+    return
+  }
+  props.verification.auditState = 'REJECTED'
+  props.verification.auditRemark = remark.value
+  executeAudit(props.verification).then(res => {
+    next(res)
+  })
+}
+</script>
+
+<style scoped>
+.line-wrapper {
+  display: flex;
+  margin: 12px 0;
+}
+.line-left {
+  width: 100px;
+  text-align: right;
+  padding-right: 8px;
+}
+.line-right {
+  text-align: left;
+  padding-left: 30px;
+}
+</style>

src/router/modules/dashboard.js

@@ -605,6 +605,11 @@ const route = [
                 component: createNameComponent(() => import('@/views/hospitalization/case-front-sheet/AllCaseFrontSheet.vue')),
                 meta: {title: '病案首页汇总'},
             },
+            {
+                path: 'casefrntsht/frontSheetQuality',
+                component: createNameComponent(() => import('@/views/hospitalization/case-front-sheet/FrontSheetQuality.vue')),
+                meta: {title: '病案首页质控'},
+            },
             {
                 path: 'casefrntsht/frontSheetExport',
                 component: createNameComponent(() => import('@/views/hospitalization/case-front-sheet/FrontSheetExport.vue')),

src/utils/cy-use/useDateRange.tsx

@@ -64,10 +64,6 @@ export default function useDateRange(paramsProps?: ElDatePickerType) {
     const modelValue: Ref<any[]> = ref(props!.modelDefaultValues ?? [])
     const dateRange: Ref<{ start: string, end: string }> = ref({start: '', end: ''})
 
-    watch(() => modelValue.value, () => {
-        dateRange.value = elDateRangeAddTime(modelValue.value)
-    }, {immediate: true})
-
     if (props.shortcutsIndex !== null) {
         modelValue.value = shortcuts[props.shortcutsIndex].value
     } else if (props.aFewDaysAgo !== null) {
@@ -76,6 +72,9 @@ export default function useDateRange(paramsProps?: ElDatePickerType) {
         })
     }
 
+    watch(() => modelValue.value, () => {
+        dateRange.value = elDateRangeAddTime(modelValue.value)
+    }, {immediate: true})
     function CyDateRange(dateProps: any) {
         return (<div style="display: inline-flex;vertical-align: middle;width:220px">
             <ElDatePicker

src/views/hospitalization/case-front-sheet/AllCaseFrontSheet.vue

@@ -729,6 +729,7 @@ const exportSpecialDataExel = (flag) => {
     doctorName: '管床医生',
   }
   if (flag === 1) {
+    fields.beenUnArchived = '解除签收次数'
     fields.lateDays = '迟交天数'
     fields.signDate = '签收日期'
     fields.zyDismissWayName = '是否死亡'
@@ -814,12 +815,9 @@ const nullPatient = () => {
 const showMessageDrawer = ref(false)
 const beforePrint = (flag) => {
   if (nullPatient()) return
-  const param = {
+  executePrintVerify({
     sheet: sheet.value,
-    opType: 2,
-    printOption: flag,
-  }
-  executePrintVerify(param).then(() => {
+  }).then(() => {
     execPrint(flag)
   }).catch((e) => {
     forceVerifies.value = e.data.force

src/views/hospitalization/case-front-sheet/FillCaseFrontSheet.vue

@@ -15,6 +15,19 @@
       <el-divider direction="vertical"></el-divider>
       <el-button type="primary" icon="Edit" @click="openYbDiag" v-if="inOutStatus === 1">医保诊断</el-button>
       <el-button type="primary" icon="Upload" @click="saveVerify(1)">保存首页</el-button>
+
+      <!--  <el-button type="primary" icon="Document" @click="beforeSubmitAudit">申请质控审核</el-button> -->
+
+      <el-dropdown trigger="click" type="primary" @command="sheetQualityVerification" style="margin: 0 8px">
+        <el-button type="primary">病案质控审核<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="applyVerification">申请审核</el-dropdown-item>
+            <el-dropdown-item command="verificationRecord">审核记录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
       <el-button type="success" icon="Printer" @click="beforePrint(1)">打印正面</el-button>
       <el-button type="success" icon="Printer" @click="beforePrint(2)">打印反面</el-button>
       <el-button type="primary" icon="PieChart" @click="setlUplaodClick" v-if="inOutStatus === 2">结算清单质控
@@ -144,9 +157,10 @@
             <div>
               工作单位及地址:
               <input id="unitName" v-model="patient.unitName" style="margin-right: 0; width: 145px"/>
-              /<input id="unitPlace" v-model.trim="patient.unitPlace" style="width: 145px"/> 单位电话: <input id="unitPhone"
-                                                                                                         v-model="patient.unitPhone"
-                                                                                                         style="width: 80px"/>
+              /<input id="unitPlace" v-model.trim="patient.unitPlace" style="width: 145px"/> 单位电话: <input
+                id="unitPhone"
+                v-model="patient.unitPhone"
+                style="width: 80px"/>
               邮编:
               <input id="unitZipCode" v-model="patient.unitZipCode" style="width: 50px" maxlength="6"/>
             </div>
@@ -990,7 +1004,8 @@ import {
   getSsfzSurgeriesByIcd,
   increaseDiagWeight,
   selectSiDiagByBaDiag,
-  isMedinsSetl} from '@/api/case-front-sheet'
+  isMedinsSetl, submitQualityVerification, fetchAuditCount
+} from '@/api/case-front-sheet'
 import maleIcon from '@/assets/male-icon.png'
 import femaleIcon from '@/assets/female-icon.png'
 import {ElMessage, ElNotification} from 'element-plus'
@@ -1003,6 +1018,10 @@ import Sleep from '@/utils/sleep'
 import {smoothScrollTableColumn} from '@/utils/el-table-scroll'
 import {regions} from '@/data/region'
 import PageLayer from "@/layout/PageLayer";
+import CyMessageBox from "@/components/cy/message-box";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import useDialogToJs from "@/components/js-dialog-comp/useDialogToJs";
+import AuditHistory from "@/components/inpatient/frontsheet-printpage/AuditHistory.vue";
 
 const userWards = ref([])
 const currentWard = ref('')
@@ -1695,24 +1714,108 @@ const setlUplaodClick = () => {
 
 const saveVerify = (opType) => {
   if (nullPatient()) return
-  const param = {
-    opType,
-    sheet: patient.value,
-  }
-  executeSaveVerify(param)
-      .then(() => {
-        ElMessage({
-          message: '操作成功。',
-          type: 'success',
-          duration: 2500,
-          showClose: true,
-        })
-      })
-      .catch((e) => {
-        forceVerifies.value = e.data
-        showMessageDrawer.value = true
+  fetchAuditCount({
+    patNo: patient.value.bah,
+    times: patient.value.admissTimes,
+  }).then(res => {
+    if (res.approved > 0) {
+      xcMessage.error('此患者病案首页质控审核已通过，无法保存。')
+      return
+    }
+    executeSaveVerify({
+      opType,
+      sheet: patient.value
+    }).then(() => {
+      ElMessage({
+        message: '操作成功。',
+        type: 'success',
+        duration: 2500,
+        showClose: true,
       })
+    }).catch((e) => {
+      forceVerifies.value = e.data
+      showMessageDrawer.value = true
+    })
+  })
+}
+
+function sheetQualityVerification(command) {
+  if (command === 'applyVerification') {
+    beforeSubmitAudit()
+  } else {
+    useDialogToJs(AuditHistory, {
+      patinfo: {
+        patNo: patient.value.bah,
+        times: patient.value.admissTimes
+      }
+    })
+  }
+}
+
+function beforeSubmitAudit() {
+  if (nullPatient()) {
+    return
+  }
+  fetchAuditCount({
+    patNo: patient.value.bah,
+    times: patient.value.admissTimes,
+  }).then(res => {
+    if (res.approved > 0) {
+      xcMessage.error('此患者的质控审核已通过，无需再次申请。')
+      return
+    }
+    if (res.initial > 0) {
+      xcMessage.error('此患者有未被处理的质控审核，请勿重复提交。')
+      return;
+    }
+    executePrintVerify({
+      sheet: patient.value,
+    }).then(() => {
+      submitAuditConfirm()
+    }).catch((e) => {
+      forceVerifies.value = e.data.force
+      adviceVerifies.value = e.data.advice
+      showMessageDrawer.value = true
+      if (e.data.force.length === 0) {
+        submitAuditConfirm()
+      }
+    })
+  })
 }
+
+function submitAuditConfirm() {
+  CyMessageBox.confirm({
+    type: 'warning',
+    title: '提示',
+    message: `质控审核通过后，病案将进入锁定状态，无法再次修改。确定要提交质控审核吗？`
+  }).then(() => {
+    executeSubmitAudit()
+  }).catch(() => {
+  })
+}
+
+function executeSubmitAudit() {
+  const params = {
+    patNo: patient.value.bah,
+    times: patient.value.admissTimes,
+    patName: patient.value.name,
+    patGender: filterPatGender(),
+  }
+  submitQualityVerification(params).then(() => {
+    xcMessage.success('提交成功')
+  })
+}
+
+function filterPatGender() {
+  if (patient.value.sex === 1 || patient.value.sex === '1') {
+    return 'MALE'
+  }
+  if (patient.value.sex === 2 || patient.value.sex === '2') {
+    return 'FEMALE'
+  }
+  return 'UNKNOWN'
+}
+
 const dismissShowSearch = (flag) => {
   setTimeout(() => {
     if (flag === 1) {
@@ -1722,21 +1825,18 @@ const dismissShowSearch = (flag) => {
     }
   }, 100)
 }
+
 const beforePrint = (page) => {
   if (nullPatient()) return
-  const param = {
-    opType: 4,
-    sheet: patient.value,
-    page: page
+  const params = {
+    patNo: patient.value.bah,
+    times: patient.value.admissTimes
   }
-  executePrintVerify(param).then(() => {
-    execPrint(page)
-  }).catch((e) => {
-    forceVerifies.value = e.data.force
-    adviceVerifies.value = e.data.advice
-    showMessageDrawer.value = true
-    if (e.data.force.length === 0) {
-      execPrint(page)
+  fetchAuditCount(params).then(res => {
+    if (res.approved > 0) {
+      execPrint(page);
+    } else {
+      xcMessage.error("病案首页质控审核未通过，无法打印。")
     }
   })
 }

src/views/hospitalization/case-front-sheet/FrontSheetQuality.vue

@@ -0,0 +1,308 @@
+<template>
+  <CyFlex>
+    <template #header>
+      <div style="padding: 6px 4px; background-color: white; border-radius: 4px">
+        <CyDateRange/>
+        <el-select
+            v-model="auditInquiryRequest.state"
+            @change="handleStateChanged"
+            style="width: 90px">
+          <el-option label="未质控" value="INITIAL"></el-option>
+          <el-option label="已通过" value="APPROVED"></el-option>
+        </el-select>
+        <el-input
+            v-model="auditInquiryRequest.patNo"
+            clearable
+            placeholder="住院号"
+            style="width: 110px"
+            @keyup.enter="querySearch" />
+        <el-divider direction="vertical"></el-divider>
+        <el-button icon="Search" type="primary" @click="querySearch">检索</el-button>
+        <span v-if="auditInquiryRequest.state === 'INITIAL'" style="margin: 0 12px">
+          <el-button icon="DataLine" type="primary" @click="basicControl">基础质控</el-button>
+          <el-button icon="Check" type="success" @click="approveAudit">审核通过</el-button>
+          <el-button icon="Close" type="danger" @click="rejectAudit">审核不通过</el-button>
+        </span>
+        <el-button icon="Clock" type="info" @click="viewAuditHistory">审核记录</el-button>
+      </div>
+    </template>
+    <CyFlex tab-position="vertical">
+      <template #header>
+        <div style="margin-top: 4px;height: calc(100% - 4px)">
+          <CyVxeTable>
+            <VxeColumn title="姓名" width="80">
+              <template #default="{row}">
+                <img :src="row.patGender === 'MALE' ? maleIcon : femaleIcon" class="sex-icon"/>
+                {{ row.patName }}
+              </template>
+            </VxeColumn>
+            <VxeColumn title="住院号" width="90">
+              <template #default="{row}">
+              <span style="font-weight: bold; color: black">{{ row.patNo }}</span
+              >-{{ row.times }}
+              </template>
+            </VxeColumn>
+            <VxeColumn title="医生" field="doctorName" width="70"></VxeColumn>
+            <VxeColumn title="申请时间" field="applicationTime" width="135"></VxeColumn>
+          </CyVxeTable>
+        </div>
+      </template>
+
+      <template #content>
+        <div style="margin-top: 4px;height: calc(100% - 4px)">
+          <FullPage :dics="dics" :patient="sheet"/>
+        </div>
+      </template>
+    </CyFlex>
+
+    <el-drawer v-model="showMessageDrawer" title="首页基础质控结果">
+      <div class="page-inner">
+        <div v-if="forceVerifies.length === 0 && adviceVerifies.length === 0" class="no-verify-message">暂无校验内容
+        </div>
+        <div v-show="forceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">
+          以下条目为强制要求，请完善。
+        </div>
+        <div v-for="(item, index) in forceVerifies" :key="index" :style="messageColor(index)" class="message-item"
+             @click="currentMessageIndex = index">
+          {{ index + 1 }}、{{ item.name }}
+        </div>
+        <div v-show="adviceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">
+          以下条目为建议执行，不做强制要求。
+        </div>
+        <div v-for="(item, index) in adviceVerifies" :key="index"
+             style="padding: 6px; margin-bottom: 6px; border-radius: 4px; background: #eea7a752; color: #ff2b2b">
+          {{ index + 1 }}、{{ item.name }}
+        </div>
+      </div>
+    </el-drawer>
+    <div class="rightside-btn" @click="showMessageDrawer = !showMessageDrawer">首页基础质控结果</div>
+  </CyFlex>
+
+</template>
+
+<script setup lang="ts">
+import {autopsies, haveOrNot, yesOrNo} from './common'
+import {onMounted, reactive} from 'vue'
+import store from '@/store'
+import {operations} from '@/data'
+import {
+  executeAudit,
+  executePrintVerify,
+  fetchQualityVerifications,
+  getAllDictionary,
+  getSheetInfo
+} from '@/api/case-front-sheet'
+import maleIcon from '@/assets/male-icon.png'
+import femaleIcon from '@/assets/female-icon.png'
+import FullPage from "@/components/inpatient/frontsheet-printpage/FullPage.vue";
+import useDateRange from "@/utils/cy-use/useDateRange";
+import useVxeTable from "@/utils/cy-use/useVxeTable";
+import CyFlex from "@/components/cy/flex/src/CyFlex.vue";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import {CyMessageBox} from "@/components/cy/message-box";
+import RejectAudit from "@/components/inpatient/frontsheet-printpage/RejectAudit.vue";
+import AuditHistory from "@/components/inpatient/frontsheet-printpage/AuditHistory.vue";
+import useDialogToJs from "@/components/js-dialog-comp/useDialogToJs";
+
+const windowSize = store.state.app.windowSize
+const userName = store.state.user.info.name
+const tableHeight = windowSize.h
+
+const {CyDateRange, dateRange} = useDateRange({shortcutsIndex: 1, clearable: false})
+const auditInquiryRequest = reactive({
+  state: 'INITIAL',
+  patNo: ''
+})
+
+const currentRow = ref({})
+const {CyVxeTable, querySearch} = useVxeTable<{
+  patNo: string,
+  times: number
+}>({
+  keyField: 'id',
+  mountedQuery: true,
+  remoteSearch: () => fetchQualityVerifications({
+    start: dateRange.value.start,
+    end: dateRange.value.end,
+    state: auditInquiryRequest.state,
+    patNo: auditInquiryRequest.patNo
+  }),
+  tableProps: {
+    onCellClick: ({row}) => {
+      currentRow.value = row
+      fetchSheetInfo(row.patNo, row.times)
+    }
+  }
+})
+
+const sheet = ref(initSheet())
+const dics = ref({})
+
+function handleStateChanged() {
+  querySearch()
+  sheet.value = initSheet()
+}
+function initSheet() {
+  return {
+    disdiagList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+    surgeryList: [{}, {}, {}, {}, {}],
+  }
+}
+
+const fetchSheetInfo = (patNo, times) => {
+  if (patNo !== sheet.value.bah || times !== sheet.value.admissTimes) {
+    forceVerifies.value = []
+    adviceVerifies.value = []
+  }
+  const params = {
+    bah: patNo,
+    times: times,
+    inOutFlag: 2
+  }
+  getSheetInfo(params).then((res) => {
+    sheet.value = res
+  })
+}
+
+const nullPatient = () => {
+  if (!sheet.value.bah) {
+    xcMessage.warning('请先选择患者！')
+    return true
+  }
+  return false
+}
+
+const showMessageDrawer = ref(false)
+const basicControl = () => {
+  if (nullPatient()) return
+  executePrintVerify({
+    sheet: sheet.value,
+  }).then(() => {
+    xcMessage.success('基础质控通过。')
+  }).catch((e) => {
+    forceVerifies.value = e.data.force
+    adviceVerifies.value = e.data.advice
+    showMessageDrawer.value = true
+  })
+}
+
+const forceVerifies = ref([])
+const adviceVerifies = ref([])
+const currentMessageIndex = ref(null)
+const messageColor = (id) => {
+  return currentMessageIndex.value === id ?
+      {
+        background: '#ff2b2b',
+        color: 'white',
+      } :
+      {
+        background: '#eea7a752',
+        color: '#ff2b2b',
+      };
+}
+
+function approveAudit() {
+  if (nullPatient()) {
+    return
+  }
+  CyMessageBox.confirm({
+    title: '提示',
+    message: '确定审核通过吗？',
+    type: 'warning'
+  }).then(() => {
+    currentRow.value.auditState = 'APPROVED'
+    currentRow.value.auditRemark = '审核通过'
+    currentRow.value.sheet = sheet.value
+    executeAudit(currentRow.value).then((res) => {
+      xcMessage.success(res)
+      querySearch()
+    })
+  }).catch(() => {});
+}
+
+function rejectAudit() {
+  if (nullPatient()) {
+    return
+  }
+  useDialogToJs(RejectAudit, { verification: currentRow.value }).then((res) => {
+    xcMessage.success(res)
+    querySearch()
+  })
+}
+
+function viewAuditHistory() {
+  useDialogToJs(AuditHistory, { patinfo: currentRow.value })
+}
+
+onMounted(() => {
+  getAllDictionary().then((res) => {
+    res.getOperations = operations
+    res.getYesOrNo = yesOrNo
+    res.getHaveOrNot = haveOrNot
+    res.getAutopsies = autopsies
+    dics.value = res
+  })
+})
+</script>
+
+<style scoped>
+:deep(.el-dialog__body) {
+  padding-top: 0;
+}
+
+:deep(.el-drawer__header) {
+  margin-bottom: 8px;
+}
+
+:deep(.el-checkbox) {
+  margin-right: 15px;
+}
+
+:deep(.el-checkbox__label) {
+  padding-left: 4px;
+}
+
+.page-inner {
+  padding: 0 20px 10px 26px;
+  border-radius: 12px;
+  text-align: justify;
+}
+
+.message-item {
+  padding: 6px;
+  margin-bottom: 6px;
+  border-radius: 4px;
+}
+
+.message-item:hover {
+  cursor: pointer;
+}
+
+.rightside-btn {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: white;
+  border-radius: 4px;
+  width: 20px;
+  height: 135px;
+  position: fixed;
+  background: rgb(238, 98, 5);
+  top: 260px;
+  right: 10px;
+  cursor: pointer;
+}
+
+.no-verify-message {
+  width: 100%;
+  text-align: center;
+  margin-top: 50px;
+  font-size: 18px;
+  color: gray;
+}
+
+.img-state:hover {
+  scale: 1.08;
+  cursor: pointer;
+}
+</style>