Merge remote-tracking branch 'origin/main'

collect_information/.env.development

@@ -1,7 +1,7 @@
 # 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config
 TARO_APP_ID="wx0acd1c4fcf94bdd3"
-TARO_APP_BASE_API="http://172.10.10.93:8765"
+# TARO_APP_BASE_API="http://172.10.10.93:8765"
-# TARO_APP_BASE_API="https://www.hnjinglian.cn:5678"
+TARO_APP_BASE_API="https://www.hnjinglian.cn:5678"
 
 
 

collect_information/src/subPages/police/dailyInspection/dailyInspection.vue

@@ -114,7 +114,7 @@ import { ref, computed, reactive, watch } from 'vue'
 import api from '@/request/index'
 import { useDailyStore } from '@/store/daily'
 
-const picker_search = ref()
+// const picker_search = ref()
 const starRating = ref<any[]>([])
 const store = useDailyStore()
 const daily = computed(() => store.getdailyinspection)
@@ -166,7 +166,7 @@ const assessmentCriteriaRulesByCkProjectId = async function (ckProjectId) {
   //   title: '加载中...',
   //   mask: true,
   // })
-  const res = await api.get<StarRating[]>(`/m2/sa/assessmentCriteriaRulesByCkProjectId`, { ckProjectId })
+  const res = await api.get<StarRating[]>(`/mp/sa/assessmentCriteriaRulesByCkProjectId`, { ckProjectId })
 
   res.data?.forEach((item) => {
     item.currentScore = 0
@@ -203,7 +203,7 @@ const assessmentCriteriaRulesByCkProjectId = async function (ckProjectId) {
 const selectorCheckedType = ref<string>('')
 const selectorType = ref<CkProjectListByType[]>()
 const ckProjectListByType = async function (type) {
-  const res = await api.get<CkProjectListByType[]>(`/m2/sa/ckProjectListByType`, { type })
+  const res = await api.get<CkProjectListByType[]>(`/mp/sa/ckProjectListByType`, { type })
   console.log(res.data)
 
   if (res.data?.length === 0) {
@@ -229,18 +229,18 @@ const onChangeType = function (e: any) {
 
 const selector = ref<UnitEnterprisesUnitList[]>()
 const selectorCopy = ref<UnitEnterprisesUnitList[]>()
-const selectorChecked = ref<string>('')
+// const selectorChecked = ref<string>('')
-const onChange = function (e: any) {
+// const onChange = function (e: any) {
-  try {
+//   try {
-    let index = Number(e.detail.value)
+//     let index = Number(e.detail.value)
-    selectorChecked.value = selector.value?.[index].label as string
+//     selectorChecked.value = selector.value?.[index].label as string
-    let type = selector.value?.[index].extData.type.value
+//     let type = selector.value?.[index].extData.type.value
-    ckProjectListByType(type)
+//     ckProjectListByType(type)
-    _form.enterprisesUnitId = selector.value?.[index].value as string
+//     _form.enterprisesUnitId = selector.value?.[index].value as string
-  } catch (error) {
+//   } catch (error) {
-    console.log('🚀 ~ onChange ~ error:', error)
+//     console.log('🚀 ~ onChange ~ error:', error)
-  }
+//   }
-}
+// }
 
 const getUnitEnterprisesUnitList = async function () {
   const res = await api.get<UnitEnterprisesUnitList[]>(`/policeIndex/getUnitEnterprisesUnitList`)
@@ -326,7 +326,7 @@ const onSubmit = async function () {
   }
   Object.assign(assessmentRecordParams, _form)
   assessmentRecordParams.assessmentRecordDetails = [...assessmentRecordDetails.value]
-  const result = await api.post('/m2/sa/submitAssessmentRecord', assessmentRecordParams)
+  const result = await api.post('/mp/sa/submitAssessmentRecord', assessmentRecordParams)
 
   clearData() //清空数据
   if (result.code === 200) {

collect_information/src/subPages/police/myEnterprisesUnit/projectDetails/projectDetails.vue

@@ -111,7 +111,7 @@ const projectDetailsTable = async () => {
       current: current.value,
     },
   }
-  const resp = await api.post<PagerVo<ServiceProjectSecurityUserPagerVo>>('/miniProgramUser/securityUserPager', queryParams)
+  const resp = await api.post<PagerVo<ServiceProjectSecurityUserPagerVo>>('/mp/user/securityUserPager', queryParams)
   securityUserList.value = [...securityUserList.value, ...resp.data!.records]
   total.value = resp.data!.total
   isRefresher.value = false

policeManagement/src/global.d.ts

@@ -97,6 +97,9 @@ interface OptionsResponse {
     DeleteFlag: Option[];
 }
 
-
+interface TypeEnum<T> {
+    value: string;
+    label: string
+}
 
 

policeManagement/src/types/views/serviceManagement.ts

@@ -0,0 +1,24 @@
+import { BaseTableRowRecord } from "@/types/components/table";
+
+export interface serviceProjectSaveOrUpdateParams_ extends BaseTableRowRecord {
+    snowFlakeId: string
+    enterprisesUnitId: string,
+    enterprisesUnitName: string,
+    projectManagerMiniProgramUserId: string,
+    projectManagerMiniProgramUserName: string,
+    name: string,
+    type: TypeEnum<string>,
+    twoType: BaseEnum<any>,
+    outsourceName: string,
+    isFiling: BaseEnum<number>,
+    idNumber: string,
+    serviceArea: number,
+    buildingTotal: number,
+    houseTotal: number,
+    staffTotal: number,
+    securityUserTotal: number,
+    remark: string,
+    createUserName: string,
+    createTime: string,
+    enterprisesUnitAdministrativeDivisionCodes: Record<string, any>
+}

policeManagement/src/views/query/publicUnit.vue

@@ -1,12 +1,24 @@
 <template>
   <div>
-    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions" :scroll="{ x }">
+    <TableProMax
+      :expandedRowRender="expandedRowRender"
+      :expand-column-width="50"
+      :defaultExpandAllRows="false"
+      ref="tableRef"
+      :request-api="reqApi"
+      :columns="columns"
+      :searchFormOptions="searchFormOptions"
+      :scroll="{ x }"
+    >
       <template #tableHeader>
         <a-space>
           <a-button type="primary" @click="saveOrUpdateEnterprisesUnit">新增企事业单位</a-button>
         </a-space>
       </template>
     </TableProMax>
+    <a-modal v-model:open="visible" :title="serviceTitle" @ok="submit" @cancel="closeModal">
+      <FormProMax ref="formRef" v-model:value="formParams" :form-item-options="formItemOptions" />
+    </a-modal>
   </div>
 </template>
 
@@ -18,7 +30,7 @@ import { AutoComplete, Button, Input, message, Modal, Space } from 'ant-design-v
 import { debounce } from 'lodash-es'
 import FormProMax from '@/components/form/FormProMax.vue'
 import api from '@/axios'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import TableProMax from '@/components/table/TableProMax.vue'
 import { TableProMaxProps } from '@/types/components/table/index.ts'
 import { ComponentExposed } from 'vue-component-type-helpers'
@@ -26,13 +38,13 @@ import { dictSelectNodes } from '@/config/dict.ts'
 import { publicUnitPagerQueryParams } from '@/types/views/publicUnit.ts'
 import { FormProMaxItemOptions } from '@/types/components/form//index.ts'
 import { FormExpose } from 'ant-design-vue/es/form/Form'
+import { serviceProjectSaveOrUpdateParams_ } from '@/types/views/serviceManagement'
 type _FormType = EnterprisesUnitSaveOrUpdateParams & {
   contactPersonInfoName?: string
   contactPersonInfoTelephone?: string
 }
 type TableProps = TableProMaxProps<publicUnitPagerQueryParams>
 
-// const reqApi: TableProps['requestApi'] = (params) => api.post('/enterprisesUnit/pager', params) //分页
 const reqApi: TableProps['requestApi'] = (params) => api.post('/eu/pager', params) //分页
 const tableRef = ref<ComponentExposed<typeof TableProMax>>(null)
 const columns: TableProps['columns'] = [
@@ -162,8 +174,6 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
               initMarker(_mapRef.value?.mapInstance)
             }}
             onSearch={debounce((val: string) => {
-              console.log('onSearch___________________', val)
-
               //@ts-ignore
               const auto = new AMap.AutoComplete({
                 city: city,
@@ -171,7 +181,6 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
                 citylimit: true,
               })
               auto.search(val, (status, result) => {
-                console.log('🚀 ~ auto.search ~ status, result:', status, result)
                 if (status === 'complete') {
                   // 生成组件需要数据
                   autoAddress.value = result.tips?.map((e) => {
@@ -281,7 +290,7 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
     content: () => <FormProMax ref={_formRef} v-model:value={_formParams.value} formItemOptions={_formOptions.value} />,
     onOk: async () => {
       await _formRef.value?.validate()
-      // const resp = await api.post('/enterprisesUnit/saveOrUpdate', {
+
       const resp = await api.post('/eu/add_upd', {
         ..._formParams.value,
         contactPersonInfo: {
@@ -292,7 +301,6 @@ const saveOrUpdateEnterprisesUnit = (params: _FormType, callback: Function) => {
       message.success(resp.message)
       await tableRef.value?.requestGetTableData()
 
-      // reqApi(params)
       callback && callback()
     },
   })
@@ -313,4 +321,347 @@ const searchFormOptions = reactive<TableProps['searchFormOptions']>({
     label: '手机号',
   },
 })
+type _TableProps = TableProMaxProps<any>
+const isRecruitSecurityHidden = ref<boolean>(false)
+const visible = ref(false)
+const serviceTitle = ref('新增服务项目')
+const idNumberDisabled = ref<boolean>(true)
+const formRef = ref<FormExpose>(null)
+const enterprisesUnitId = ref('')
+const netType = computed(() => {
+  //@ts-ignore
+  return formParams.value.type === 'security' ? dictSelectNodes('ServiceProjectTwoType') : dictSelectNodes('UserType' as any)
+})
+const formParams = ref<{
+  snowFlakeId?: string
+  enterprisesUnitId: string
+  securityUnitId: string
+  administrativeDivisionCodes?: null
+  projectManagerMiniProgramUserId?: string
+  projectManagerMiniProgramUserName?: string
+  name: string
+  type: string
+  twoType?: number
+  outsourceName?: string
+  isFiling?: number
+  idNumber?: string
+  serviceArea?: number
+  buildingTotal?: number
+  houseTotal?: number
+  staffTotal?: number
+  securityUserTotal?: number
+  remark?: string
+}>({
+  name: '',
+  enterprisesUnitId: null,
+  type: 'security',
+  securityUnitId: null,
+})
+const securityUnitIdList = ref<any>([])
+const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdateParams_>>({
+  name: {
+    type: 'input',
+    label: '服务项目名称',
+    required: true,
+  },
+
+  securityUnitId: {
+    type: 'select',
+    label: '保安单位',
+    required: true,
+    options: securityUnitIdList,
+  },
+  type: {
+    type: 'radioGroup',
+    label: '服务类型',
+    //@ts-ignore
+    options: dictSelectNodes('ServiceProjectType'),
+    required: true,
+    componentsProps: {
+      onChange: (e) => {
+        if (e.target?.value === 'security') {
+          isRecruitSecurityHidden.value = false
+          formParams.value.twoType = null
+        } else {
+          formParams.value.twoType = null
+          isRecruitSecurityHidden.value = true
+        }
+      },
+    },
+  },
+  twoType: {
+    required: true,
+    type: 'radioGroup',
+    label: '二级类型',
+    options: netType,
+    componentsProps: {
+      onChange: (e) => {
+        if (e.target.value !== 'outsource') {
+          idNumberDisabled.value = true
+          formParams.value.outsourceName = ''
+        } else {
+          idNumberDisabled.value = false
+        }
+      },
+    },
+  },
+  outsourceName: {
+    type: 'input',
+    label: '外包公司名称',
+    hidden: idNumberDisabled as any,
+  },
+  isFiling: {
+    required: true,
+    type: 'radioGroup',
+    label: '是否备案',
+    options: dictSelectNodes('IsOrNot'),
+  },
+  idNumber: {
+    type: 'input',
+    label: '保安服务许可证',
+  },
+  serviceArea: {
+    type: 'inputNumber',
+    label: '服务区域面积',
+  },
+  buildingTotal: {
+    type: 'inputNumber',
+    label: '楼栋数量',
+    componentsProps: {
+      formatter: (value: any) => {
+        return Math.round(value) ? Math.round(value) : ('' as any)
+      },
+      min: 0,
+    },
+  },
+  houseTotal: {
+    type: 'inputNumber',
+    label: '户数',
+    componentsProps: {
+      formatter: (value: any) => {
+        return Math.round(value) ? Math.round(value) : ('' as any)
+      },
+      min: 0,
+    },
+  },
+  staffTotal: {
+    type: 'inputNumber',
+    label: '工作人员数量',
+    componentsProps: {
+      formatter: (value: any) => {
+        return Math.round(value) ? Math.round(value) : ('' as any)
+      },
+      min: 0,
+    },
+  },
+  securityUserTotal: {
+    type: 'inputNumber',
+    label: '保安人员数量',
+    componentsProps: {
+      formatter: (value: any) => {
+        return Math.round(value) ? Math.round(value) : ('' as any)
+      },
+      min: 0,
+    },
+  },
+  remark: {
+    type: 'inputTextArea',
+    label: '备注',
+  },
+})
+
+const _tableRef = ref<ComponentExposed<typeof TableProMax>>(null)
+const expandedRowRender: TableProMaxProps['expandedRowRender'] = ({ record }) => {
+  const _columns: _TableProps['columns'] = [
+    {
+      dataIndex: 'name',
+      title: '服务项目名称',
+    },
+    {
+      dataIndex: 'type',
+      title: '服务类型',
+      customRender: ({ text }) => <a-tag>{text?.label}</a-tag>,
+    },
+    {
+      dataIndex: 'twoType',
+      title: '二级类型',
+      customRender: ({ text }) => <a-tag>{text?.label}</a-tag>,
+    },
+    {
+      dataIndex: 'outsourceName',
+      title: '外包公司名称',
+      customRender: ({ record }) => {
+        if (record.twoType.value === 'outsource') {
+          return record.outsourceName
+        }
+      },
+    },
+    {
+      dataIndex: 'isFiling',
+      title: '是否备案',
+      customRender: ({ text }) => <a-tag>{text?.label}</a-tag>,
+    },
+    {
+      dataIndex: 'idNumber',
+      title: '保安服务许可证',
+    },
+
+    {
+      dataIndex: 'serviceArea',
+      title: '服务区域面积',
+    },
+    {
+      dataIndex: 'buildingTotal',
+      title: '楼栋数量',
+    },
+
+    {
+      dataIndex: 'houseTotal',
+      title: '户数',
+    },
+    {
+      dataIndex: 'staffTotal',
+      title: '工作人员数量',
+    },
+    {
+      dataIndex: 'securityUserTotal',
+      title: '保安人员数量',
+    },
+    {
+      dataIndex: 'remark',
+      title: '备注',
+    },
+    {
+      dataIndex: 'createUserInfo',
+      title: '创建人',
+      customRender: ({ record }) => {
+        return (
+          <div>
+            <p>创建人：{record.createUserInfo.name} </p>
+
+            <p>创建人单位：{record.createUserInfo.unitName} </p>
+          </div>
+        )
+      },
+    },
+    {
+      dataIndex: 'createTime',
+      title: '创建时间',
+    },
+    {
+      dataIndex: 'opt',
+      title: '操作',
+      fixed: 'right',
+
+      customRender({ record }) {
+        return (
+          <a-space>
+            <a-button
+              class='btn-warn'
+              onClick={async () => {
+                visible.value = true
+                serviceTitle.value = '编辑服务项目'
+                idNumberDisabled.value = record.twoType.value !== 'outsource'
+                formParams.value.securityUnitId = record.securityUnitId //企事业单位id
+                formParams.value.enterprisesUnitId = record.enterprisesUnitId //企事业单位id
+                formParams.value.snowFlakeId = record.snowFlakeId //id
+                formParams.value.projectManagerMiniProgramUserId = record.projectManagerMiniProgramUserId //项目经理小程序用户id
+                formParams.value.name = record.name
+                formParams.value.type = record.type.value //服务类型
+                formParams.value.twoType = record.twoType.value //二级类型
+                formParams.value.outsourceName = record.outsourceName //外包公司名称
+                formParams.value.isFiling = record.isFiling.value //是否备案
+                formParams.value.remark = record.remark //备注
+                formParams.value.idNumber = record.idNumber //证件号(保安服务许可证/备案证
+                formParams.value.serviceArea = record.serviceArea //服务区域面积
+                formParams.value.buildingTotal = record.buildingTotal //楼栋数量
+                formParams.value.houseTotal = record.houseTotal //户数
+                formParams.value.staffTotal = record.staffTotal //工作人员数量
+                formParams.value.securityUserTotal = record.securityUserTotal //保安人员数量
+              }}
+            >
+              编辑
+            </a-button>
+            <a-popconfirm
+              title='确认删除账号吗?'
+              onConfirm={async () => {
+                const resp = await api.delete('/m2/eu/deleteSpById', {
+                  serviceProjectId: record.snowFlakeId,
+                })
+                message.success(resp.message)
+                await _tableRef.value?.requestGetTableData()
+              }}
+            >
+              <a-button danger>删除</a-button>
+            </a-popconfirm>
+          </a-space>
+        )
+      },
+    },
+  ]
+  const _reqApi: _TableProps['requestApi'] = async () => {
+    // @ts-ignore
+    return await api.get('/m2/eu/listSp', { enterprisesUnitId: record?.snowFlakeId })
+  }
+  return (
+    <TableProMax
+      ref={_tableRef}
+      size='small'
+      columns={_columns}
+      requestApi={_reqApi}
+      isPagination={false}
+      v-slots={{
+        tableHeader: (_) => {
+          return (
+            <Space>
+              <Button type={'primary'} onClick={() => addService(record)}>
+                新增服务项目
+              </Button>
+            </Space>
+          )
+        },
+      }}
+    />
+  )
+}
+
+const closeModal = async () => {
+  visible.value = false
+  formParams.value = {
+    securityUnitId: '',
+    enterprisesUnitId: '',
+    administrativeDivisionCodes: '',
+    name: '',
+    type: 'security',
+    idNumber: '',
+    serviceArea: null,
+    buildingTotal: null,
+    houseTotal: null,
+    staffTotal: null,
+    securityUserTotal: null,
+    remark: '',
+  }
+  formRef.value.resetFields()
+  enterprisesUnitId.value = ''
+  serviceTitle.value = '新增服务项目'
+  idNumberDisabled.value = false
+}
+
+const submit = async () => {
+  await formRef.value.validate()
+  const serviceProjectSaveOrUpdateParams = { ...formParams.value }
+  const resp = await api.post('/m2/eu/add_upd_sp', serviceProjectSaveOrUpdateParams)
+  message.success(resp.message)
+  await _tableRef.value.requestGetTableData()
+  await closeModal()
+}
+
+onMounted(async () => {
+  const res = await api.get('/management/listSecurityUnit')
+  securityUnitIdList.value = res.data
+})
+const addService = function (record) {
+  formParams.value.enterprisesUnitId = record.snowFlakeId //企事业单位Id
+  visible.value = true
+}
 </script>

securityManagement/src/views/login.vue

@@ -2,13 +2,13 @@
   <div class="root">
     <div class="header">
       <img src="@/assets/vue.svg" alt="Logo" height="33" width="33"/>
-      <div class="logo-text">超级后台</div>
+      <div class="logo-text">保安后台</div>
     </div>
     <div class="container">
       <div class="left-banner"></div>
       <div class="login-card">
         <div class="title">
-          欢迎来到超级后台
+          欢迎来到保安后台
         </div>
         <a-tabs class="account-tab" v-model:active-key="activeKey">
           <a-tab-pane :key="0" tab="账号登录">

securityManagement/src/views/serviceManagement/index.vue

@@ -83,7 +83,7 @@ const formParams = ref<{
   type:string,
   twoType?: number,
   outsourceName?:string,
-  isFiling?:number,
+  isFiling:number,
   idNumber?: string,
   serviceArea?:number,
   buildingTotal?:number,
@@ -94,7 +94,8 @@ const formParams = ref<{
 }>({
   name:'',
   enterprisesUnitId:null,
-  type:'security'
+  type:'security',
+  isFiling:0
 })
 
 const columns: TableProps['columns'] = [
@@ -315,6 +316,7 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
     type: 'radioGroup',
     label: '二级类型',
     options:netType,
+    required: true,
     componentsProps:{
        onChange:(e)=>{
          if(e.target.value !== "outsource"){
@@ -334,6 +336,7 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
   isFiling:{
     type: 'radioGroup',
     label: '是否备案',
+    required: true,
     options:dictSelectNodes('IsOrNot'),
   },
   idNumber: {
@@ -399,6 +402,7 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
 
 const UnitId = ref('')
 const submit = async()=>{
+  console.log(13123)
   await formRef.value.validate()
   const snowFlakeId = ref('')
   if (serviceTitle.value === '新增服务项目') {
@@ -444,13 +448,13 @@ const closeModal = async()=>{
        houseTotal:null,
        staffTotal:null,
        securityUserTotal:null,
-       remark:''
+       remark:'',
+       isFiling:0
    }
     formRef.value.resetFields()
     enterprisesUnitId.value = ''
     serviceTitle.value = '新增服务项目'
-    // isRecruitSecurityHidden.value = false
+    idNumberDisabled.value = true
-    idNumberDisabled.value = false
 }
 const addServiceProjects = () => {
   visible.value = true

securityManagement/src/views/test.vue.bak

@@ -1,114 +0,0 @@
-<template>
-  <div class="search" id="search">
-    <a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input>
-    <div v-if="valueInput">
-      <ul>
-        <li v-for="item in searchResults" :key="item.id">{{item}}</li>
-      </ul>
-    </div>
-    <div v-else >
-      没有找到相关结果
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import {onMounted, ref,} from "vue";
-const valueInput = ref('')
-const list = ref([])
-const dataList = ref([
-  {
-    id:0,
-    value:'齐家园'
-  },
-  {
-    id:1,
-    value:'刘德华'
-  },
-  {
-    id:2,
-    value:'张学友'
-  },{
-    id:3,
-    value:'黎明'
-  },
-  {
-    id:4,
-    value:'家具城'
-  },
-  {
-    id:5,
-    value:'左岸春天'
-  },
-  {
-    id:6,
-    value:'麦德龙商城'
-  },
-  {
-    id:7,
-    value:'世纪酒店'
-  },
-  {
-    id:8,
-    value:'四方小学'
-  },
-  {
-    id:9,
-    value:'海洋半岛'
-  },
-  {
-    id:10,
-    value:'育英小学'
-  },
-  {
-    id:11,
-    value:'明德小学'
-  },{
-    id:12,
-    value:'希望小学',
-  }
-])
-const searchResults =  ref([])
-const searchInput = (e:any)=>{
-  valueInput.value = e.target.value
-  if (!valueInput.value) {
-    searchResults.value = []
-    return;
-  }else{
-    searchResults.value =  list.value.filter(item =>
-        item.toLowerCase().includes(valueInput.value.toLowerCase())
-    );
-  }
-}
-// watch(()=>valueInput.value,(value)=>{
-//    if(!value){
-//      searchResults.value = []
-//    }
-// })
-
-onMounted(()=>{
-  dataList.value.map((item)=>{
-    return list.value.push(item.value)
-  })
-})
-</script>
-
-
-
-<style scoped lang="scss">
-.search{
-  padding: 0 10px;
-  overflow: hidden;
-  border: 1px solid #4e71f2;
-  margin: 1px 5px;
-  border-radius: 10px;
-  width: 30%;
-  .ceShi{
-    height: 300px;
-    background: #ccc;
-  }
-}
-.nut-input{
-  padding: 20rpx 20rpx;
-  margin: 5px 0;
-}
-</style>