平台应收结算页面

src/views/platform/index.vue

@@ -30,7 +30,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item label="业务来源">
-                  <el-select v-model="receivableForm.typeAttr" placeholder="请选择" clearable>
+                <el-select v-model="receivableForm.typeAttr" placeholder="请选择" clearable>
                   <el-option label="团队" value="5"></el-option>
                   <el-option label="个代" value="6"></el-option>
                   <el-option label="渠道" value="7"></el-option>
@@ -134,7 +134,7 @@
             <el-button class="radius-2px width-100" type="primary" @click="addShow = true">添加应收</el-button>
           </div>
           <div class="col-108 m-r-8">
-            <el-button class="radius-2px width-100" type="primary">批量结算</el-button>
+            <el-button class="radius-2px width-100" type="primary" @click="batchSettle">批量结算</el-button>
           </div>
           <div class="col-108 m-r-8">
             <el-button class="radius-2px width-100" type="primary" @click="dropdownCommand('删除')">删除</el-button>
@@ -146,8 +146,9 @@
             <el-button class="radius-2px width-100" @click="handleBatchEdit">批量修改比例</el-button>
           </span>
         </el-row>
-        <el-table :data="receiveData" :height="isTrue?'calc(100% - 446px)':'calc(100% - 346px)'" style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef1"
-          @select="handleSelectChange1" @select-all="handleSelectAll1">
+        <el-table :data="receiveData" :height="isTrue ? 'calc(100% - 446px)' : 'calc(100% - 346px)'"
+          style="width: 100%; margin-top: 20px;" ref="ReceiveDataRef1" @select="handleSelectChange1"
+          @select-all="handleSelectAll1">
           <el-table-column type="selection" width="80"></el-table-column>
           <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
           <el-table-column prop="typeAttrName" label="业务来源" width="120"></el-table-column>
@@ -334,8 +335,9 @@
             <el-button class="radius-2px width-100" @click="handleBatchEdit">批量修改比例</el-button>
           </span>
         </el-row>
-        <el-table :data="receiveData" :height="isTrue?'calc(100% - 396px)':'calc(100% - 296px)'" style="width: 100%; margin-top: 20px" ref="ReceiveDataRef2"
-          @select="handleSelectChange2" @select-all="handleSelectAll2">
+        <el-table :data="receiveData" :height="isTrue ? 'calc(100% - 396px)' : 'calc(100% - 296px)'"
+          style="width: 100%; margin-top: 20px" ref="ReceiveDataRef2" @select="handleSelectChange2"
+          @select-all="handleSelectAll2">
           <el-table-column type="selection" width="80"></el-table-column>
           <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
           <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
@@ -539,7 +541,7 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage,ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
@@ -778,38 +780,42 @@ let invoiceShow = ref(false)
 let invoiceRadio = ref(null)
 const handleInvoiceSubmit = () => {
   myRouter.push({
-    name: 'Ticket',
+    name: 'Platformticket',
     query: {
       id: invoiceRadio.value,
       selectedList: JSON.stringify(selectedList.value),
-      invoiceType: activeName.value == '1' ? '1' : activeName.value == '2' ? '3' : ''
+      invoiceType: "5"
     }
   })
 }
-const handleSelectChange1 = (a, b) => {
-  if (a.length > 0) {
-    selectedList.value = a
+const handleSelectChange1 = (row: any) => {
+  let idlist = row?.map((item: any) => item.id)
+  if (idlist.length > 0) {
+    selectedList.value = idlist
   } else {
     selectedList.value = []
   }
 }
-const handleSelectChange2 = (a, b) => {
-  if (a.length > 0) {
-    selectedList.value = a
+const handleSelectChange2 = (row: any) => {
+  let idlist = row?.map((item: any) => item.id)
+  if (idlist.length > 0) {
+    selectedList.value = idlist
   } else {
     selectedList.value = []
   }
 }
-const handleSelectAll1 = (e) => {
-  if (e.length > 0) {
-    selectedList.value = e
+const handleSelectAll1 = (row: any) => {
+  let idlist = row?.map((item: any) => item.id)
+  if (idlist.length > 0) {
+    selectedList.value = idlist
   } else {
     selectedList.value = []
   }
 }
-const handleSelectAll2 = (e) => {
-  if (e.length > 0) {
-    selectedList.value = e
+const handleSelectAll2 = (row: any) => {
+  let idlist = row?.map((item: any) => item.id)
+  if (idlist.length > 0) {
+    selectedList.value = idlist
   } else {
     selectedList.value = []
   }
@@ -1004,6 +1010,25 @@ const exportPlatformReceivable = () => {
     }
   })
 }
+// 批量结算
+const batchSettle = () => {
+  if (selectedList.value.length == 0) {
+    ElMessage({
+      message: '请选择要结算的订单',
+      type: 'warning'
+    })
+    return
+  }
+  api.financeApi.getReceivableCompany({
+    incomeIds: [...selectedList.value]
+  }).then((res: any) => {
+    if (res.code == 200) {
+      options.value = res.data
+      invoiceShow.value = true
+    }
+  })
+}
+
 onMounted(() => {
   dictDetails();
   initCompany();

src/views/platform/ticket.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="ticket">
+    <div class="search-list">
+      <div class="search-left">
+        <el-select v-model="logicJudge">
+          <el-option value="and" label="并且"></el-option>
+          <el-option value="or" label="或者"></el-option>
+        </el-select>
+      </div>
+      <div class="search-right">
+        <div class="search-type" v-for="(item, index) in searchList">
+          <el-select v-model="item.name" style="margin-right: 20px; width: 200px" disabled>
+            <el-option value="companyId" label="保险公司"></el-option>
+            <el-option value="signDate" label="签单时间"></el-option>
+            <el-option value="ptlAgreement" label="出单协议"></el-option>
+            <el-option value="orderType" label="订单类型"></el-option>
+            <el-option value="signYear" label="签单年份"></el-option>
+          </el-select>
+          <el-select v-model="item.type" v-if="item.name != 'signDate'" style="margin-right: 20px; width: 150px" @change="val=>signDateSelectChange(index, val)">
+            <el-option value="等于" label="等于"></el-option>
+            <el-option value="不等于" label="不等于"></el-option>
+            <el-option value="包含" label="包含"></el-option>
+            <el-option value="不包含" label="不包含"></el-option>
+            <el-option value="为空" label="为空"></el-option>
+          </el-select>
+          <el-select v-model="item.type" v-else style="margin-right: 20px; width: 150px" @change="val=>signDateSelectChange(index, val)">
+            <el-option value="大于等于" label="大于等于"></el-option>
+            <el-option value="小于等于" label="小于等于"></el-option>
+            <el-option value="固定范围" label="固定范围"></el-option>
+            <el-option value="不在固定范围" label="不在固定范围"></el-option>
+            <el-option value="为空" label="为空"></el-option>
+          </el-select>
+          <el-select class="w-350px" v-if="item.name == 'companyId'" v-model="item.search" placeholder="请选择" clearable
+            filterable :disabled="item.type == '为空'">
+            <el-option v-for="item in companyList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+          <el-date-picker style="width: 350px" v-model="datesearch" v-if="item.name == 'signDate'"
+            :type="item.type == '大于等于' || item.type == '小于等于' ? 'date' : 'daterange'" placeholder="请选择"
+            :disabled="item.type == '为空'"  @change="handlePtlAgreementChange(index, $event)"   value-format="YYYY-MM-DD" />
+          <el-select style="width: 350px" v-model="multipleSearch" v-if="item.name == 'ptlAgreement'" multiple filterable
+            :disabled="item.type == '为空'" @change="handlePtlAgreementChange(index, $event)">
+            <el-option v-for="item in insurerContract" :key="item.id" :value="item.id" :label="item.agreementName" ></el-option>
+          </el-select>
+          <el-select style="width: 350px" v-model="orderTypesearch" v-if="item.name == 'orderType'" multiple
+            :disabled="item.type == '为空'" @change="handlePtlAgreementChange(index, $event)">
+            <el-option value="1" label="车险订单"></el-option>
+            <el-option value="2" label="代客录单"></el-option>
+            <el-option value="3" label="补录订单"></el-option>
+          </el-select>
+          <el-date-picker v-if="item.name == 'signYear'" style="width: 350px" format="YYYY"
+          value-format="YYYY" v-model="yearrangesearch" type="yearrange"
+            range-separator="-" :disabled="item.type == '为空'" @change="handlePtlAgreementChange(index, $event)" />
+          <!-- <el-icon style="margin-left: 20px; cursor:pointer;"><CircleClose /></el-icon> -->
+        </div>
+        <el-button type="primary" @click="handleSearch">搜索</el-button>
+      </div>
+    </div>
+    <div class="tips">
+      <p>应收明细</p>
+      <el-button type="primary" @click="addTicket">添加应收</el-button>
+    </div>
+    <el-table :data="tableData" style="height: calc(100% - 340px)">
+      <template #empty>
+        <div v-if="noData">暂无应收，点击<el-button link type="primary">导入应收</el-button></div>
+        <div v-else>没有符合的应收单据~</div>
+      </template>
+      <el-table-column prop="licenseNo" label="车牌号"></el-table-column>
+      <el-table-column prop="companyName" label="保险公司"></el-table-column>
+      <el-table-column prop="signingTime" label="签单时间"></el-table-column>
+      <el-table-column prop="agreementName" label="协议名称"></el-table-column>
+      <el-table-column prop="orderType" label="订单类型"></el-table-column>
+      <el-table-column prop="signYear" label="签单年份"></el-table-column>
+      <el-table-column prop="orderNo" label="订单号"></el-table-column>
+      <el-table-column prop="jqPolicyNo" label="交强保单号"></el-table-column>
+      <el-table-column prop="syPolicyNo" label="商业保单号"></el-table-column>
+      <el-table-column prop="jqPremium" label="交强险保费"></el-table-column>
+      <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例"></el-table-column>
+      <el-table-column prop="syPremium" label="商业险保费"></el-table-column>
+      <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例"></el-table-column>
+      <el-table-column label="应收金额">
+        <template #default="scope">
+          {{ scope.row.productId === '0330' || scope.row.productId === '0330034002' || scope.row.productId ===
+            '034002' ? scope.row.jqSuperviseCostsPremiums : scope.row.productId === '034001' || scope.row.productId ===
+              '0330034001' ? scope.row.sySuperviseCostsPremiums : '' }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer">
+      <el-button plain @click="handleBack">取消</el-button>
+      <el-button plain type="primary" @click="handleTicket">开票并结算</el-button>
+      <el-button type="primary" @click="handleInvoice">开票</el-button>
+    </div>
+    <el-dialog v-model="addShow" width="800" title="添加应收">
+      <div class="add-content">
+        <el-input v-model="addSearchValue" style="max-width: 500px" :placeholder="`请输入${placeholder}`"
+          class="input-with-select">
+          <template #prepend>
+            <el-select v-model="addSelectType" placeholder="请选择" style="width: 120px"
+              @change="handleAddSelectTypeChange">
+              <el-option label="订单号查询" value="1" />
+              <el-option label="交强险保单号查询" value="2" />
+              <el-option label="商业险保单号查询" value="3" />
+            </el-select>
+          </template>
+          <template #append>
+            <el-button type="primary" @click="getUnauditedOrder">搜索</el-button>
+          </template>
+        </el-input>
+        <el-table :data="selectingData" style="width: 100%;">
+          <el-table-column prop="a" label="费用状态" width="100"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
+          <el-table-column prop="jqPolicyNo" label="交强保单号" width="120"></el-table-column>
+          <el-table-column prop="syPolicyNo" label="商业保单号" width="120"></el-table-column>
+          <el-table-column prop="jqPremium" label="交强保费" width="100"></el-table-column>
+          <el-table-column prop="jqSuperviseCostsProportion" label="交强手续费比例" width="100"></el-table-column>
+          <el-table-column prop="syPremium" label="商业保费" width="100"></el-table-column>
+          <el-table-column prop="sySuperviseCostsProportion" label="商业手续费比例" width="100"></el-table-column>
+          <el-table-column prop="a" label="应收金额" width="100"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="100">
+            <template #default="scope">
+              <el-button link type="primary" @click="handleToAdd(scope.row)">添加</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <p>已添加的应收单据</p>
+        <el-table :data="selectedData" style="width: 100%;">
+          <el-table-column prop="a" label="费用状态" width="100"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" width="120"></el-table-column>
+          <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
+          <el-table-column prop="jqPolicyNo" label="交强保单号" width="120"></el-table-column>
+          <el-table-column prop="syPolicyNo" label="商业保单号" width="120"></el-table-column>
+          <el-table-column prop="jqPremium" label="交强保费" width="100"></el-table-column>
+          <el-table-column prop="jqSuperviseCostsProportion" label="交强手续费比例" width="100"></el-table-column>
+          <el-table-column prop="syPremium" label="商业保费" width="100"></el-table-column>
+          <el-table-column prop="sySuperviseCostsProportion" label="商业手续费比例" width="100"></el-table-column>
+          <el-table-column prop="a" label="应收金额" width="100"></el-table-column>
+          <el-table-column label="操作" fixed="right" width="100">
+            <template #default="scope">
+              <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="addShow = false">取消</el-button>
+        <el-button type="primary" @click="handleAddSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="countShow" width="600" title="开票并结算">
+      <el-form ref="CountForm" :model="countForm" :rules="countRules" label-width="120">
+        <el-form-item prop="invoiceParty" label="开票方">
+          <el-input v-model="countForm.invoiceParty" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivableSupervisePremium" label="应收手续费">
+          <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="overinflatedAmount" label="虚增金额">
+          <el-input v-model="countForm.overinflatedAmount" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="taxPoint" label="税点">
+          <el-input v-model="countForm.taxPoint" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivableSupervisePremium" label="应收金额">
+          <el-input v-model="countForm.receivableSupervisePremium" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="actualReceivedAmount" label="实收金额">
+          <el-input v-model="countForm.actualReceivedAmount" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item prop="receivePaymentDate" label="收款日期">
+          <el-date-picker v-model="countForm.receivePaymentDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss" />
+        </el-form-item>
+        <el-form-item prop="attachmentIds" label="收款凭证" class="upload-btn">
+          <el-upload style="margin: 0 10px 10px 0" :auto-upload="false" multiple v-if="!countForm.h"
+            :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage" drag>
+            <el-button size="large" icon="Plus" />
+          </el-upload>
+          <div class="imageDiv" v-for="(item, index) in imageUrl" :key="item">
+            <img :src="item" />
+            <div class="model">
+              <span class="icon-view" @click="handelViewImage(item, index)">
+                <el-icon>
+                  <View />
+                </el-icon>
+              </span>
+              <span class="icon-del" @click="handelDelImage(item, index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </span>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="handelCancel">取消</el-button>
+        <el-button type="primary" @click="handelComfirm(CountForm)">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import api from '@/api'
+import { useRoute, useRouter } from 'vue-router'
+
+import { ElMessage } from "element-plus";
+
+let route = useRoute()
+let router = useRouter()
+const selectedList = ref([])//选中的应收单据
+const companyList = ref()//保险公司
+const insurerContract = ref()//保险公司协议
+const multipleSearch = ref('')
+const orderTypesearch = ref('')
+const yearrangesearch = ref('')
+const datesearch = ref('')
+const countShow = ref(false)
+const  countForm = ref({})
+//获取保险公司协议
+const getByCompanyId = () => {
+  api.dispatchApi.getByCompanyIdt(route.query.id).then((res: any) => {
+    if (res.code == 200) {
+      insurerContract.value = res.data
+    }
+  })
+}
+//保险公司协议
+
+let logicJudge = ref('and')
+let searchList = ref([
+  {
+    name: 'companyId',
+    type: '等于',
+    search: ''
+  }, {
+    name: 'signDate',
+    type: '固定范围',
+    search: ''
+  }, {
+    name: 'ptlAgreement',
+    type: '等于',
+    search: ''
+  }, {
+    name: 'orderType',
+    type: '等于',
+    search: ''
+  }, {
+    name: 'signYear',
+    type: '等于',
+    search: ''
+  }
+])
+if (route.query) {
+  console.log(route.query)
+
+  selectedList.value = JSON.parse(route.query.selectedList || '[]')
+  searchList.value[0].search = route.query.id
+  getByCompanyId()
+  console.log(selectedList.value)
+}
+
+
+let noData = ref(true)
+let tableData = ref([])
+const addTicket = () => {
+  addShow.value = true
+}
+const handleSearch = () => {
+  console.log(searchList.value)
+  // router
+  api.financeApi.getSelectedReceivableList({
+    companyId: route.query.id,
+    orderNos: selectedList.value.map(item => item.orderNo),
+    searchList: searchList.value,
+    logicJudge: logicJudge.value,
+  }).then((res: any) => {
+    if (res.code == 200) {
+      tableData.value = res.data
+    }
+  })
+}
+
+let addShow = ref(false)
+let addSearchValue = ref('')
+let placeholder = ref('订单号查询')
+let addSelectType = ref('1')
+const handleAddSelectTypeChange = (e) => {
+  switch (e) {
+    case '1':
+      placeholder.value = '订单号查询'
+      break;
+    case '2':
+      placeholder.value = '交强险保单号查询'
+      break;
+    case '3':
+      placeholder.value = '商业险保单号查询'
+      break;
+  }
+}
+let selectingData = ref([])
+let selectedData = ref([])
+
+// 出单协议多选转换
+const handlePtlAgreementChange = (index: any, e: any) => {
+  console.log(e)
+  if (Array.isArray(e)) {
+    searchList.value[index].search = e.join(',') || ''
+  }else{
+    searchList.value[index].search = e|| ''
+  }
+}
+
+// 签单时间选择器改变时触发
+const signDateSelectChange = (index:any,e:any) => {
+  switch (e) {
+    case '为空':
+      searchList.value[index].search = ''
+      break;
+    case '大于等于':
+    case '小于等于':
+    searchList.value[index].search = ''
+    datesearch.value =  ''
+      break;
+  }
+}
+
+// 未审核订单查询
+const getUnauditedOrder = () => {
+  api.financeApi.getUnauditedOrder(addSearchValue.value).then((res: any) => {
+    if (res.code == 200) {
+      selectingData.value = res.data
+    }
+  })
+}
+const handleDel = (row) => {
+  selectedData.value = selectedData.value.filter(item => item.id != row.id)
+}
+const handleAddSubmit = () => {
+  if (selectedData.value.length < 1) {
+    ElMessage({
+      message: '请选择要添加的数据！',
+      type: 'warning'
+    })
+  } else {
+    api.financeApi.addReceivable(selectedData.value).then((res: any) => {
+      if (res.code == 200) {
+        ElMessage({
+          message: res.msg,
+          type: 'success'
+        })
+        addShow.value = false
+      }
+    })
+  }
+}
+
+const handleToAdd = (row) => {
+  if (selectedData.value.length < 1) {
+    selectedData.value.push(row)
+  } else {
+    if (!selectedData.value.some(item => item.id === row.id)) {
+      selectedData.value.push(row)
+    }
+  }
+  // ElMessage({
+  //     message: '该订单已被xxx添加到应收开票中',
+  //     type: 'warning'
+  // })
+}
+
+// 开票并结算
+const handleBack = () => {
+  router.back()
+}
+const handleTicket = () => {
+
+  api.financeApi.invoicingCheck({
+    incomeIds: selectedList.value.map(v => v.id),
+    companyId: route.query.id,
+    invoiceType: route.query.invoiceType
+  }).then((res: any) => {
+    if (res.code == 200) {
+      countShow.value = true
+      api.financeApi.commissionInvoicing({
+        incomeIds: selectedList.value.map(v => v.id),
+        orderNos: selectedList.value.map(v => v.orderNo),
+        companyId: route.query.id,
+        invoiceType: route.query.invoiceType
+      }).then((sub: any) => {
+        if (sub.code == 200) {
+          ElMessage({
+            message: sub.msg,
+            type: 'success'
+          })
+          api.financeApi.settlement({
+            invoicingId: sub.data.invoiceId,
+            actualReceivedAmount: sub.data.sumPrice
+          }).then((msg: any) => {
+            if (msg.code == 200) {
+              ElMessage({
+                message: msg.msg,
+                type: 'success'
+              })
+            }
+          })
+        }
+      })
+    }else{
+
+    }
+  })
+}
+const handleInvoice = () => {
+  api.financeApi.invoicingCheck({
+    incomeIds: selectedList.value.map(v => v.id),
+    companyId: route.query.id,
+    invoiceType: route.query.invoiceType
+  }).then((res: any) => {
+    if (res.code == 200) {
+      api.financeApi.commissionInvoicing({
+        incomeIds: selectedList.value.map(v => v.id),
+        orderNos: selectedList.value.map(v => v.orderNo),
+        companyId: route.query.id,
+        invoiceType: route.query.invoiceType
+      }).then((sub: any) => {
+        if (sub.code == 200) {
+          ElMessage({
+            message: sub.msg,
+            type: 'success'
+          })
+        }
+      })
+    }
+  })
+}
+
+const initData = () => {
+  // router
+    api.financeApi.getSelectedReceivableList({ orderNos: selectedList.value.map(v => v.orderNo),companyId: route.query.id}).then((res: any) => {
+    if (res.code == 200) {
+      tableData.value = res.data
+    }
+  })
+}
+// 保险公司
+const initCompany = () => {
+  api.insuranceApi.leftList('').then((res: any) => {
+    if (res.code == 200) {
+      companyList.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  initData()
+  initCompany()
+})
+
+</script>
+
+<style scoped lang="scss">
+.ticket {
+  height: calc(100vh - 135px);
+  width: calc(100% - 24px);
+  margin: 12px auto;
+  padding: 12px;
+  background: #FFFFFF;
+  overflow-y: auto;
+
+  .search-list {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .search-left {
+      width: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20px;
+    }
+
+    .search-right {
+      width: 700px;
+
+      .search-type {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .tips {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    p {
+      margin-right: 30px;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80px;
+  }
+}
+</style>