合并

src/api/system/homepage.js

+import request from '@/utils/request'
+
+// 查询首页待办
+export function todoCount(data) {
+    return request({
+        url: '/caseApplication/todoCount',
+        method: 'get',
+        params: data
+    })
+}

src/views/caseManagement/caseList.vue

                         icon="el-icon-edit">查看缴费单</el-button>
                     <el-button size="mini" type="text" icon="el-icon-edit" @click="evidenceUpload(scope.row)"
                         v-hasPermi="['caseManagement:list:evidenceEdit']" v-if="scope.row.caseFlowId <= 9">上传证据</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-edit"
-                        v-if="scope.row.caseFlowId == 15 || scope.row.caseFlowId == 16 || scope.row.caseFlowId == 17"
-                        @click="caseFilingDetails(scope.row)">归档详情</el-button>
-                    <div class="btnList" v-for="(item) in buttonList" :key="item.id">
+                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.caseFlowId == 15 ||
+                        scope.row.caseFlowId == 16 ||
+                        scope.row.caseFlowId == 17
+                        " @click="caseFilingDetails(scope.row)">归档详情</el-button>
+                    <div class="btnList" v-for="item in buttonList" :key="item.id">
                         <el-button size="mini" type="text" icon="el-icon-tickets" @click="caseClick(scope.row, item.id)"
-                            v-if="item.id == scope.row.caseFlowId && checkPermi([item.buttonAuthFlag]) && scope.row.signButtonFlag != 1">{{
-                                item.nodeName }}</el-button>
+                            v-if="item.id == scope.row.caseFlowId &&
+                                checkPermi([item.buttonAuthFlag]) &&
+                                scope.row.signButtonFlag != 1
+                                ">{{ item.nodeName }}</el-button>
                     </div>
                 </template>
             </el-table-column>
 </template>
 
 <script>
-import { caseApplicationList, caseApplicationSelectById, submitCaseApply, selectPaymentDetail, sealApply, selectSealUrl, listCaseLogRecord, msCaseFile, msCaseSign, listDeptApplied, msCaseSignUrlApplyPC } from '@/api/caseManagement/caseManagement.js'
-import { listDept } from '@/api/system/dept.js'
-import { queryCaseFlowInfo } from '@/api/caseprocessManagement/caseprocessManagement.js'
+import {
+    caseApplicationList,
+    caseApplicationSelectById,
+    submitCaseApply,
+    selectPaymentDetail,
+    sealApply,
+    selectSealUrl,
+    listCaseLogRecord,
+    msCaseFile,
+    msCaseSign,
+    listDeptApplied,
+    msCaseSignUrlApplyPC,
+} from "@/api/caseManagement/caseManagement.js";
+import { listDept } from "@/api/system/dept.js";
+import { queryCaseFlowInfo } from "@/api/caseprocessManagement/caseprocessManagement.js";
 import moment from "moment";
-import addCase from './components/addCase.vue'
-import evidenceDialog from './components/evidenceDialog.vue';
-import caseCompressionPackage from './components/caseCompressionPackage.vue';
-import mediationCaseDetails from './components/mediationCaseDetails.vue'
-import mediationCaseLog from './components/mediationCaseLog.vue'
+import addCase from "./components/addCase.vue";
+import evidenceDialog from "./components/evidenceDialog.vue";
+import caseCompressionPackage from "./components/caseCompressionPackage.vue";
+import mediationCaseDetails from "./components/mediationCaseDetails.vue";
+import mediationCaseLog from "./components/mediationCaseLog.vue";
 import payDialog from "./components/payDialog.vue";
-import respondentPay from "./components/respondentPay.vue"
-import paymentdetailsDialog from './components/paymentdetailsDialog.vue'
-import caseAcceptance from './components/caseAcceptance.vue'
-import selectMediator from './components/selectMediator.vue'
-import confirmMediator from './components/confirmMediator.vue'
-import departmentMediator from './components/departmentMediator.vue'
-import timeConfirm from './components/timeConfirm.vue'
-import mediation from './components/mediation.vue'
-import confirmMediation from './components/confirmMediation.vue'
-import caseFilingDetailsPage from './components/caseFilingDetailsPage.vue'
+import respondentPay from "./components/respondentPay.vue";
+import paymentdetailsDialog from "./components/paymentdetailsDialog.vue";
+import caseAcceptance from "./components/caseAcceptance.vue";
+import selectMediator from "./components/selectMediator.vue";
+import confirmMediator from "./components/confirmMediator.vue";
+import departmentMediator from "./components/departmentMediator.vue";
+import timeConfirm from "./components/timeConfirm.vue";
+import mediation from "./components/mediation.vue";
+import confirmMediation from "./components/confirmMediation.vue";
+import caseFilingDetailsPage from "./components/caseFilingDetailsPage.vue";
 export default {
     name: "caseList",
     dicts: ["case_flow_node"],
         payDialog,
         paymentdetailsDialog,
         caseAcceptance,
-        selectMediator,//调解员弹窗
+        selectMediator, //调解员弹窗
         confirmMediator,
         departmentMediator,
         timeConfirm,
         mediation,
         confirmMediation,
         caseFilingDetailsPage,
-        respondentPay
+        respondentPay,
     },
     data() {
         return {
             // 校验表单
             rules: {},
             dataList: [],
-            addVisable: false,//新增弹窗
+            addVisable: false, //新增弹窗
             openPay: false, //缴费弹框
-            openResPay: false,//被申请人缴费弹窗
+            openResPay: false, //被申请人缴费弹窗
             formPayDetail: {},
             formResPayDetail: {},
             payId: null,
             resPayId: null,
             payForm: {},
             resPayForm: {},
-            openCompressedPackages: false,//压缩包导入弹窗
-            processVisable: false,//案件详情
-            showcaseLog: false,//案件日志
-            openDialog: false,//确认缴费和缴费详情
+            openCompressedPackages: false, //压缩包导入弹窗
+            processVisable: false, //案件详情
+            showcaseLog: false, //案件日志
+            openDialog: false, //确认缴费和缴费详情
             detailform: {}, //缴费详情数据
-            evidenceVisable: false,//证据修改弹窗
-            mediationVisable: false,//待调解弹窗
+            evidenceVisable: false, //证据修改弹窗
+            mediationVisable: false, //待调解弹窗
             mediationData: {},
-            payTitle: "",//缴费标题
-            resPayTitle: '',//被申请人缴费标题
-            paymentConfirma: {},//缴费确认
-            showAcceptance: false,//案件受理弹框
-            caseAcceptanceData: {},//案件受理数据
-            mediatorVisable: false,//选择调解员弹窗
-            timeVisable: false,//预约时间弹窗
-            confirmVisable: false,//确认时间/调解员
-            caseFlowNumber: {},//案件流程数据
-            caselogDataArr: [],//案件日志数据
+            payTitle: "", //缴费标题
+            resPayTitle: "", //被申请人缴费标题
+            paymentConfirma: {}, //缴费确认
+            showAcceptance: false, //案件受理弹框
+            caseAcceptanceData: {}, //案件受理数据
+            mediatorVisable: false, //选择调解员弹窗
+            timeVisable: false, //预约时间弹窗
+            confirmVisable: false, //确认时间/调解员
+            caseFlowNumber: {}, //案件流程数据
+            caselogDataArr: [], //案件日志数据
             flagLoading: true, //案件日志弹框loading
-            confirmTionVisable: false,//确认调解书弹窗
-            addModifyData: null,//新增修改传的参数
-            showarchiveDetails: false,//归档详情弹窗
+            confirmTionVisable: false, //确认调解书弹窗
+            addModifyData: null, //新增修改传的参数
+            showarchiveDetails: false, //归档详情弹窗
             detailsAwardNum: {},
             flagLoadingS: true,
             formPayDetailAffiliate: {},
             caseData: {},
             evidenceData: {},
             caseDisabled: false,
-            caseTime: '',
+            caseTime: "",
             deptList: [],
-            payTitle: '',
+            payTitle: "",
             tabFlag: false,
             confirmData: {},
             departmentVisable: false,
             timeConfirmData: {},
             confirmTionData: {},
             buttonList: [],
-            caseStausArr: [],//案件状态
+            caseStausArr: [], //案件状态
             isapplicant: true, //判断角色申请人或非申请人
-            caseFilingData: {}
+            caseFilingData: {},
         };
     },
     created() {
-        this.getList(this.queryParams);
-        this.listDeptFn()
-        this.getButtonList()
+        // this.getList(this.queryParams);
+        this.listDeptFn();
+        // this.getButtonList()
+        queryCaseFlowInfo({
+            pageNum: 1,
+            pageSize: 100000,
+        }).then((res) => {
+            res.rows.forEach((item) => {
+                if (item.id != 17) {
+                    this.buttonList.push(item);
+                }
+                this.caseStausArr.push(item);
+            });
+            if (this.$route.query.caseFlowId) {
+                let querydata = Number(this.$route.query.caseFlowId);
+                if (querydata > 0) {
+                    this.$set(this.queryParams, 'caseFlowId', querydata)
+                }
+            }
+            this.getList(this.queryParams);
+        });
     },
     methods: {
         /**所有按钮事件 */
                 this.timeConfirm(val);
             } else if (type == 9) {
                 // 调解
-                this.mediationClick(val)
+                this.mediationClick(val);
             } else if (type == 10) {
                 // 确认调解书
-                this.confirmMediation(val)
+                this.confirmMediation(val);
             } else if (type == 11) {
                 // 签名
-                this.msCaseSignUrlApplyPCFn(val)
+                this.msCaseSignUrlApplyPCFn(val);
             } else if (type == 12) {
                 // 用印申请
-                this.consultantApplica(val)
+                this.consultantApplica(val);
             } else if (type == 13) {
                 // 用印
-                this.departmentApplica(val)
+                this.departmentApplica(val);
             } else if (type == 14) {
                 // 归档
                 this.caseFiling(val);
             } else if (type == 15) {
                 // 申请人签收
-                this.signMediation(val)
+                this.signMediation(val);
             } else if (type == 16) {
                 // 被申请人签收
-                this.receivedMediation(val)
+                this.receivedMediation(val);
             } else if (type == 17) {
                 //结束
             } else if (type == 44) {
                 // 被申请人缴费
-                this.resPayStatus(val)
+                this.resPayStatus(val);
             }
         },
         /**查询按钮列表 */
-        getButtonList() {
-            queryCaseFlowInfo({
-                pageNum: 1,
-                pageSize: 100000
-            }).then(res => {
-                console.log(res)
-                res.rows.forEach(item => {
-                    if (item.id != 17) {
-                        this.buttonList.push(item)
-                    }
-                    this.caseStausArr.push(item)
-                });
-            })
-        },
+        getButtonList() { },
         /** 新增案件 */
         addCase() {
             this.addModifyData = 1;
         },
         /** 修改案件 */
         eidtNodeprocess(row) {
-            this.addModifyData = 3
+            this.addModifyData = 3;
             this.addVisable = true;
             this.caseData = row;
-            this.$set(this.caseData, 'flag', 2)
+            this.$set(this.caseData, "flag", 2);
             this.caseDisabled = false;
             this.tabFlag = false;
         },
             //         this.$modal.msgSuccess("立案申请成功");
             //     })
             //     .catch(() => { });
-            msCaseSignUrlApplyPC({ caseId: row.id }).then(res => {
+            msCaseSignUrlApplyPC({ caseId: row.id }).then((res) => {
                 console.log(res, "PPPPPPPPPPPPPPPPPPPP");
                 window.open(res.data.sealUrl);
-            })
+            });
         },
         /** 选择调解员 */
         selectMediator(val) {
         /** 时间改变处理 */
         caseTimeChange() {
             if (this.caseTime) {
-                this.queryParams.startTime = moment(
-                    this.caseTime[0]
-                ).format("YYYY-MM-DD HH:mm:ss");
-                this.queryParams.endTime = moment(
-                    this.caseTime[1]
-                ).format("YYYY-MM-DD HH:mm:ss");
+                this.queryParams.startTime = moment(this.caseTime[0]).format(
+                    "YYYY-MM-DD HH:mm:ss"
+                );
+                this.queryParams.endTime = moment(this.caseTime[1]).format(
+                    "YYYY-MM-DD HH:mm:ss"
+                );
             } else {
-                this.queryParams.startTime = '';
-                this.queryParams.endTime = '';
+                this.queryParams.startTime = "";
+                this.queryParams.endTime = "";
             }
-
         },
         /** 获取所有部门 */
         listDeptFn() {
-            listDeptApplied().then(res => {
+            listDeptApplied().then((res) => {
                 this.deptList = res.data;
-            })
+            });
         },
         /** 修改证据 */
         evidenceUpload(row) {
                 this.dataList = response.rows;
                 this.total = response.total;
                 this.loading = false;
-            })
+            });
         },
         // 法律顾问用印申请
         consultantApplica(row) {
             let paramsValue = {
                 caseId: row.id,
                 batchNumber: "",
-                caseFlowId: row.caseFlowId
-            }
-            this.$modal.confirm("你确定要用印申请吗？").then((res) => {
-                sealApply(paramsValue).then(res => {
-                    this.getList(this.queryParams);
-                    this.$modal.msgSuccess("用印申请成功");
+                caseFlowId: row.caseFlowId,
+            };
+            this.$modal
+                .confirm("你确定要用印申请吗？")
+                .then((res) => {
+                    sealApply(paramsValue).then((res) => {
+                        this.getList(this.queryParams);
+                        this.$modal.msgSuccess("用印申请成功");
+                    });
                 })
-            }).catch(() => {
-
-            })
+                .catch(() => { });
         },
         // 部门长用印申请
         departmentApplica(row) {
-            this.$modal.confirm("你确定要用印确认吗？").then((res) => {
-                let paramsValue = {
-                    caseId: row.id
-                }
-                selectSealUrl(paramsValue).then(res => {
-                    window.open(res.data.sealUrl)
-                    this.$modal.confirm("你确认用印了吗？").then((res) => {
-                        this.getList(this.queryParams);
-                    }).catch(() => {
-
-                    })
+            this.$modal
+                .confirm("你确定要用印确认吗？")
+                .then((res) => {
+                    let paramsValue = {
+                        caseId: row.id,
+                    };
+                    selectSealUrl(paramsValue).then((res) => {
+                        window.open(res.data.sealUrl);
+                        this.$modal
+                            .confirm("你确认用印了吗？")
+                            .then((res) => {
+                                this.getList(this.queryParams);
+                            })
+                            .catch(() => { });
+                    });
                 })
-            }).catch(() => {
-
-            })
+                .catch(() => { });
         },
         // 案件受理
         caseAccep(row) {
-            this.caseAcceptanceData = row
-            this.showAcceptance = true
+            this.caseAcceptanceData = row;
+            this.showAcceptance = true;
         },
         cancelAcceptance() {
-            this.showAcceptance = false
+            this.showAcceptance = false;
         },
         // 缴费确认
         paymentconfirmationRow(row, type) {
-            this.paymentConfirma = row
-            console.log(this.paymentConfirma)
+            this.paymentConfirma = row;
+            console.log(this.paymentConfirma);
             this.paymentDetails({
-                id: row.id
-            })
-            this.openDialog = true
-            this.payTitle = "缴费确认"
+                id: row.id,
+            });
+            this.openDialog = true;
+            this.payTitle = "缴费确认";
             this.flag = 0;
-            this.detailform = {}
+            this.detailform = {};
             if (type == 3) {
                 // 申请人
-                this.isapplicant = true
+                this.isapplicant = true;
             } else {
-                this.isapplicant = false
+                this.isapplicant = false;
             }
         },
         cancelpaymentdetails() {
-            this.openDialog = false
+            this.openDialog = false;
         },
         // 查看缴费确认
         viewpaymentformRow(row) {
             this.paymentDetails({
-                id: row.id
-            })
-            this.payTitle = "缴费单详情"
+                id: row.id,
+            });
+            this.payTitle = "缴费单详情";
             this.flag = 1;
-            this.detailform = {}
-            this.openDialog = true
+            this.detailform = {};
+            this.openDialog = true;
         },
         // 缴费详情
         paymentDetails(val) {
-            selectPaymentDetail(val).then(res => {
+            selectPaymentDetail(val).then((res) => {
                 this.detailform = res.data;
-            })
+            });
         },
         //案件流程
         caseFlow(row) {
-            this.caseFlowNumber = row
-            this.processVisable = true
+            this.caseFlowNumber = row;
+            this.processVisable = true;
         },
         cancelViewProcess() {
-            this.processVisable = false
+            this.processVisable = false;
         },
         //案件日志
         caseLog(row) {
-            this.caseLogNumber = row
-            this.showcaseLog = true
+            this.caseLogNumber = row;
+            this.showcaseLog = true;
             this.flagLoading = true;
-            listCaseLogRecord({ caseId: row.id }).then(res => {
-                this.caselogDataArr = res.data
+            listCaseLogRecord({ caseId: row.id }).then((res) => {
+                this.caselogDataArr = res.data;
                 this.flagLoading = false;
-            })
+            });
         },
         cancelcaseLog() {
-            this.showcaseLog = false
+            this.showcaseLog = false;
         },
         // 案件送达
         caseFiling(row) {
-            console.log(row.id)
+            console.log(row.id);
             let paramValues = {
-                ids: [row.id]
-            }
-            this.$modal.confirm("你确定要案件送达吗？").then((res) => {
-                msCaseFile(paramValues).then(res => {
-                    this.$modal.msgSuccess("案件送达成功");
-                    this.getList(this.queryParams);
+                ids: [row.id],
+            };
+            this.$modal
+                .confirm("你确定要案件送达吗？")
+                .then((res) => {
+                    msCaseFile(paramValues).then((res) => {
+                        this.$modal.msgSuccess("案件送达成功");
+                        this.getList(this.queryParams);
+                    });
                 })
-            }).catch(() => {
-
-            })
+                .catch(() => { });
         },
         //申请人签收调解书
         signMediation(row) {
-            this.$modal.confirm("你确定要签收调解书吗？").then((res) => {
-                this.signingMediationAgreement({ caseId: row.id, isSignApply: 1 })
-            }).catch(() => {
-
-            })
+            this.$modal
+                .confirm("你确定要签收调解书吗？")
+                .then((res) => {
+                    this.signingMediationAgreement({ caseId: row.id, isSignApply: 1 });
+                })
+                .catch(() => { });
         },
         //被申请人签收调解书
         receivedMediation(row) {
-            this.$modal.confirm("你确定要签收调解书吗？").then((res) => {
-                this.signingMediationAgreement({ caseId: row.id, isSignRespon: 1 })
-            }).catch(() => {
-
-            })
+            this.$modal
+                .confirm("你确定要签收调解书吗？")
+                .then((res) => {
+                    this.signingMediationAgreement({ caseId: row.id, isSignRespon: 1 });
+                })
+                .catch(() => { });
         },
         // 申请人和被申请人签收调解书接口
         signingMediationAgreement(val) {
-            console.log(val)
-            msCaseSign(val).then(res => {
+            console.log(val);
+            msCaseSign(val).then((res) => {
                 this.$modal.msgSuccess("签收成功");
                 this.getList(this.queryParams);
-            })
+            });
         },
         //归档详情
         caseFilingDetails(val) {
             this.showarchiveDetails = true;
             this.caseFilingData = val;
-            let vals = { id: val.id }
-            caseApplicationSelectById(vals).then(res => {
-                res.data.affiliate.respondentSex = Number(res.data.affiliate.respondentSex)
-                this.detailsAwardNum = res.data
-                console.log(this.detailsAwardNum)
-                this.flagLoadingS = false
-            })
+            let vals = { id: val.id };
+            caseApplicationSelectById(vals).then((res) => {
+                res.data.affiliate.respondentSex = Number(
+                    res.data.affiliate.respondentSex
+                );
+                this.detailsAwardNum = res.data;
+                console.log(this.detailsAwardNum);
+                this.flagLoadingS = false;
+            });
         },
         cancelDetail() {
-            this.showarchiveDetails = false
-        }
-
+            this.showarchiveDetails = false;
+        },
     },
 };
 </script>

src/views/caseManagement/components/mediation.vue

         this.caseApplicationSelectByIdFn({
           id: this.mediationData.id
         });
-        this.getUser();
+        this.getUser(); 
       }
     }
   },
       secretaryRoleByUserId({
         userId: this.userId
       }).then(res => {
-        this.isSecretaryRole = res.data.isSecretaryRole;
+         this.isSecretaryRole = res.data.isSecretaryRole;
+         if(this.recordArrMediate){
+          this.isSecretaryRole = false
+        }
       })
     },
     /**上传地址*/

src/views/index.vue

 <template>
   <div class="app-container home">
-    调解系统
+    <div class="header">
+      <div class="iconTitle"></div>
+      <div class="headerMain">我的待办</div>
+    </div>
+    <div class="homeMain">
+      <div class="cardList" v-for="(item, index) in pendingTasks" :key="index" @click="pushPage(item.caseFlowId)">
+        <div class="badge">{{item.caseCount}}</div>
+        <div class="cardMain">
+          <img class="iconImg" src="@/assets/images/daiban.png" alt="" />
+        </div>
+        <div class="cardMain">
+          <div class="imgTitle">{{ item.caseStatusName }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { todoCount } from "@/api/system/homepage.js";
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
-      version: "3.8.6"
+      version: "3.8.6",
+      pendingTasks: [], //案件代办状态
     };
   },
+  created() {
+    this.gettodoCount();
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
+    },
+    // 查询代办状态
+    gettodoCount() {
+      todoCount({}).then((res) => {
+      this.pendingTasks = res.data.toDoCountList
+      console.log(res.data.toDoCountList, "this.pendingTasks");
+      });
+    },
+    // 点击待办按钮跳转
+    pushPage(status) {
+      this.$router.push({ path: '/caseManagement/caseManagement/caseList', query: { caseFlowId: status + '' } })
     }
-  }
+  },
 };
 </script>
 
 <style scoped lang="scss">
+.home {
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  color: #676a6c;
+  overflow-x: hidden;
+  background-color: #f1f1f1;
+  height: 100vh;
+
+  .header {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+
+    .iconTitle {
+      width: 5px;
+      height: 25px;
+      background-color: #0f5c9b;
+      margin-right: 25px;
+    }
+
+    .headerMain {
+      font-size: 20px;
+    }
+  }
+
+  .homeMain {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+    .cardList {
+      width: 13%;
+      height: 200px;
+      border-radius: 30px;
+      background-color: #ffffff;
+      position: relative;
+      margin-right: 38px;
+      margin-bottom: 30px;
+
+      .badge {
+        width: 50px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        font-size: 18px;
+        font-weight: 500;
+        color: #e32a4f;
+        border-radius: 10px 30px 10px 30px;
+        background-color: #05baf1;
+        position: absolute;
+        right: 0;
+      }
 
+      .cardMain {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+
+        .iconImg {
+          width: 100px;
+          height: 110px;
+        }
+
+        .imgTitle {
+          font-size: 15px;
+          font-weight: 900;
+        }
+      }
+    }
+  }
+}
 </style>
 

src/views/login.vue

     </div>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2023 乙巢（上海）企业管理服务有限公司.</span>
+      <div>Copyright © 2023 乙巢（上海）企业管理服务有限公司.</div>
+      <div>Version：1.0.1</div>
     </div>
   </div>
 </template>
     width: 50%;
     height: 90%;
     .leftIcon {
-      height: 10%;
+      height: 20%;
       width: 100%;
-      margin: 5% 10% 1% 15%;
+      margin: 0% 10% 1% 15%;
       .Icon {
-        width: 45px;
-        height: 45px;
-        background-image: url("../assets/images/mediate.svg");
+        width: 100px;
+        height: 105px;
+        background-image: url("../assets/images/logos.png");
         background-size: cover;
       }
       div {
-        font-size: 17px;
+        font-size: 18px;
       }
     }
     .leftImage {
 }
 .el-login-footer {
   background-color: rgb(126, 131, 135);
-  height: 40px;
-  line-height: 40px;
+  height: 55px;
+  line-height: 55px;
   position: fixed;
   bottom: 0;
   width: 100%;
   font-family: Arial;
   font-size: 12px;
   letter-spacing: 1px;
+  div {
+    height: 30%;
+  }
 }
 .login-code-img {
   height: 38px;