更新美丽街区和家园接口

dist/assets/zoom-out.6d61a6fc.js → dist/assets/zoom-out.68504aa3.js

-import{d as e,p as A,a,r,o as l,b as t,F as s,f as o,g as k,e as n,t as f,w as i,j as c,h as y,c as u,y as d}from"./index.88f89a27.js";var g=e({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"},align:{type:String,default:"horizontal"}}});const p=i("data-v-42bff056");A("data-v-42bff056");const v={key:1},z={class:"count-group"},w=c(" / ");a();const m=p(((e,A,a,i,c,y)=>{const u=r("m-count");return l(),t("div",{class:["brief-container",{vertical:"vertical"===e.align}]},[(l(!0),t(s,null,o(e.list,(A=>(l(),t("div",{key:A.name},[A.icon?(l(),t("img",{key:0,src:A.icon,style:`width:${e.size};height:${e.size}`},null,12,["src"])):k("",!0),Array.isArray(A.value)?(l(),t("div",v,[n("div",z,[n(u,{class:"count orange-count",value:A.value[0],style:{color:e.color}},null,8,["value","style"]),w,n(u,{class:"count",value:A.value[1]},null,8,["value"])]),n("p",null,f(A.name),1)])):(l(),t("div",{key:2,class:{center:!A.icon}},[n(u,{class:"count",style:{color:e.color},value:A.value},null,8,["style","value"]),n("p",null,f(A.name),1)],2))])))),128))],2)}));g.render=m,g.__scopeId="data-v-42bff056";var S=e({name:"Circle",props:{type:{type:String,default:"circle"},color:{type:[String,Array],default:["#0094FF","#1DF9FF"]},value:{type:Number,default:0},name:{type:String,default:""},showInfo:{type:Boolean,default:!0},rate:{type:Number,default:1.8},strokeWidth:{type:Number,default:6},gapDegree:{type:Number,default:0}},setup(e){const A=y(null),a=u((()=>Array.isArray(e.color)?{"0%":e.color[0],"100%":e.color[1]}:e.color)),r=u((()=>A.value?A.value.clientWidth/(e.rate||1.8):0));return{circleWrapperRef:A,strokeColor:a,width:r}}});const U=i("data-v-4d97637b");A("data-v-4d97637b");const E={ref:"circleWrapperRef",class:"circle-wrapper"};a();const h=U(((e,A,a,s,o,k)=>{const i=r("a-progress");return l(),t("div",E,[n(i,{"class-name":"circle-progress",width:e.width,"stroke-color":e.strokeColor,percent:e.value,type:e.type,"show-info":e.showInfo,"stroke-width":e.strokeWidth,"gap-degree":e.gapDegree,"trail-color":"rgba(255,255,255,0.1)"},null,8,["width","stroke-color","percent","type","show-info","stroke-width","gap-degree"]),d(e.$slots,"default",{},(()=>[n("p",null,f(e.name),1)]))],512)}));S.render=h,S.__scopeId="data-v-4d97637b";var B="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAP1BMVEUykf8ykf8ykf80kv8yk/8zkf8zkf8xkP8xkf8zkf8zkv8ykv8ykf8zkv8ykf80k/8zkv8zk/8zkf8zkf8zkf/igqmIAAAAFHRSTlMzmWbjSvOlc1/t2cG3jVY7zItaQXkfsHMAAAC2SURBVEjH7dfJCsMgFIVhbZwyT+f9n7VdFRe5HkywpMF//6EoiirT4GSNUbLlWgHqZEDFFZ/AzuIw6zj2EPMUrzJeKTZWstZQrMyoDxtN2dWew0sszGk8tUjUTkk8INlQCvNpl1swnoy9JnkZO9CciC3HVsQArxzWSkw/HYfxe4WEXOwR5TNxH+M+E7sYu0y899HA+/9s1e/xosUWfLrhee647US8ddRud30NVfxIfOVTduk7+AYjTFmjwJvA3AAAAABJRU5ErkJggg==",M="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAXVBMVEUykf8ykf80kf8wkf8zkf80kf8zkv80kv8zkf8zkv8ykf8ykf8ykf8zkv8ykv8zkf80kv8zkf8ykP8zkf8wkf8ykf8xkP8zkf80k/8zkf8zkf81kv8zk/8ykv8zkf/dH+VkAAAAHnRSTlMz3/s69U9I5O7n2/LHbWjO6NSK0V5WU0FApJCDeE2m+wgLAAAA20lEQVRIx+3XyQ6CMBSF4VJawEqZwfm8/2NKjcQFNB2IiMq/uSHhW92SUBLF8CyOSG+9NQGIZ8CGN+yGZYHJgsYCF9BUW2Do2lliOsoe09E70Rfh8NUNQDE8WODrHprixoh7qys14RD6AivMJrLFjIzj/4AvLJFqVjTJnDEDhHqmQOmKD/1MhtPtio9zMEmA/HlcU2ecibxVU4q8W3jPwwcceuCKMqnmme6lKw7pGvYcL7znOu0es0z5+/fMOW8V5uMyAzb0SSy0+BSYEtUK/4Y2/Lt4zqVs1nXwDgeteZHQ3Mt5AAAAAElFTkSuQmCC",N="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP8zkv80kv80k/8zkf825nviAAAABXRSTlMz65/jSamIpAgAAABkSURBVDjLY3AOxQNMGEzxSQczhDLgAaGj0rSXZhJUwCetGhqET1o0NBCfNDCOR6VJkFZEyR5CaNJMaNlHAVWaEU1agIA0AcPxO20whdpQlwZmInKyICIDD9ayZeRI46/mCFSSAPzEgRk4Bsk7AAAAAElFTkSuQmCC",C="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP80kv8zkv80k/8zkf8mH/+kAAAABXRSTlMz6+OfSXfpA8YAAABHSURBVDjLY3AKxQNUGFTxSQcxhDLgAaGj0qPSI0raECV7CKNJM6NlHwNUaUY0aQEC0gQMx++0wRRqo9Kj0gMrTaCaI1BJAgAZlmm5TBaU5QAAAABJRU5ErkJggg==";export{g as _,S as a,N as b,C as c,M as d,B as e};
+import{d as e,p as A,a,r,o as l,b as t,F as s,f as o,g as k,e as n,t as c,w as f,j as i,h as y,c as u,y as d}from"./index.758c37c1.js";var g=e({name:"Brief",props:{list:{type:Array,required:!0},color:{type:String,default:null},size:{type:String,default:"0.22rem"},align:{type:String,default:"horizontal"}}});const p=f("data-v-42bff056");A("data-v-42bff056");const v={key:1},z={class:"count-group"},w=i(" / ");a();const m=p(((e,A,a,f,i,y)=>{const u=r("m-count");return l(),t("div",{class:["brief-container",{vertical:"vertical"===e.align}]},[(l(!0),t(s,null,o(e.list,(A=>(l(),t("div",{key:A.name},[A.icon?(l(),t("img",{key:0,src:A.icon,style:`width:${e.size};height:${e.size}`},null,12,["src"])):k("",!0),Array.isArray(A.value)?(l(),t("div",v,[n("div",z,[n(u,{class:"count orange-count",value:A.value[0],style:{color:e.color}},null,8,["value","style"]),w,n(u,{class:"count",value:A.value[1]},null,8,["value"])]),n("p",null,c(A.name),1)])):(l(),t("div",{key:2,class:{center:!A.icon}},[n(u,{class:"count",style:{color:e.color},value:A.value},null,8,["style","value"]),n("p",null,c(A.name),1)],2))])))),128))],2)}));g.render=m,g.__scopeId="data-v-42bff056";var S=e({name:"Circle",props:{type:{type:String,default:"circle"},color:{type:[String,Array],default:["#0094FF","#1DF9FF"]},value:{type:Number,default:0},name:{type:String,default:""},showInfo:{type:Boolean,default:!0},rate:{type:Number,default:1.8},strokeWidth:{type:Number,default:6},gapDegree:{type:Number,default:0}},setup(e){const A=y(null),a=u((()=>Array.isArray(e.color)?{"0%":e.color[0],"100%":e.color[1]}:e.color)),r=u((()=>A.value?A.value.clientWidth/(e.rate||1.8):0));return{circleWrapperRef:A,strokeColor:a,width:r}}});const U=f("data-v-4d97637b");A("data-v-4d97637b");const E={ref:"circleWrapperRef",class:"circle-wrapper"};a();const h=U(((e,A,a,s,o,k)=>{const f=r("a-progress");return l(),t("div",E,[n(f,{"class-name":"circle-progress",width:e.width,"stroke-color":e.strokeColor,percent:e.value,type:e.type,"show-info":e.showInfo,"stroke-width":e.strokeWidth,"gap-degree":e.gapDegree,"trail-color":"rgba(255,255,255,0.1)"},null,8,["width","stroke-color","percent","type","show-info","stroke-width","gap-degree"]),d(e.$slots,"default",{},(()=>[n("p",null,c(e.name),1)]))],512)}));S.render=h,S.__scopeId="data-v-4d97637b";var B="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAP1BMVEUykf8ykf8ykf80kv8yk/8zkf8zkf8xkP8xkf8zkf8zkv8ykv8ykf8zkv8ykf80k/8zkv8zk/8zkf8zkf8zkf/igqmIAAAAFHRSTlMzmWbjSvOlc1/t2cG3jVY7zItaQXkfsHMAAAC2SURBVEjH7dfJCsMgFIVhbZwyT+f9n7VdFRe5HkywpMF//6EoiirT4GSNUbLlWgHqZEDFFZ/AzuIw6zj2EPMUrzJeKTZWstZQrMyoDxtN2dWew0sszGk8tUjUTkk8INlQCvNpl1swnoy9JnkZO9CciC3HVsQArxzWSkw/HYfxe4WEXOwR5TNxH+M+E7sYu0y899HA+/9s1e/xosUWfLrhee647US8ddRud30NVfxIfOVTduk7+AYjTFmjwJvA3AAAAABJRU5ErkJggg==",M="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAXVBMVEUykf8ykf80kf8wkf8zkf80kf8zkv80kv8zkf8zkv8ykf8ykf8ykf8zkv8ykv8zkf80kv8zkf8ykP8zkf8wkf8ykf8xkP8zkf80k/8zkf8zkf81kv8zk/8ykv8zkf/dH+VkAAAAHnRSTlMz3/s69U9I5O7n2/LHbWjO6NSK0V5WU0FApJCDeE2m+wgLAAAA20lEQVRIx+3XyQ6CMBSF4VJawEqZwfm8/2NKjcQFNB2IiMq/uSHhW92SUBLF8CyOSG+9NQGIZ8CGN+yGZYHJgsYCF9BUW2Do2lliOsoe09E70Rfh8NUNQDE8WODrHprixoh7qys14RD6AivMJrLFjIzj/4AvLJFqVjTJnDEDhHqmQOmKD/1MhtPtio9zMEmA/HlcU2ecibxVU4q8W3jPwwcceuCKMqnmme6lKw7pGvYcL7znOu0es0z5+/fMOW8V5uMyAzb0SSy0+BSYEtUK/4Y2/Lt4zqVs1nXwDgeteZHQ3Mt5AAAAAElFTkSuQmCC",N="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP8zkv80kv80k/8zkf825nviAAAABXRSTlMz65/jSamIpAgAAABkSURBVDjLY3AOxQNMGEzxSQczhDLgAaGj0rSXZhJUwCetGhqET1o0NBCfNDCOR6VJkFZEyR5CaNJMaNlHAVWaEU1agIA0AcPxO20whdpQlwZmInKyICIDD9ayZeRI46/mCFSSAPzEgRk4Bsk7AAAAAElFTkSuQmCC",C="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAElBMVEUykf8ykP80kv8zkv80k/8zkf8mH/+kAAAABXRSTlMz6+OfSXfpA8YAAABHSURBVDjLY3AKxQNUGFTxSQcxhDLgAaGj0qPSI0raECV7CKNJM6NlHwNUaUY0aQEC0gQMx++0wRRqo9Kj0gMrTaCaI1BJAgAZlmm5TBaU5QAAAABJRU5ErkJggg==";export{g as _,S as a,N as b,C as c,M as d,B as e};

dist/index.html

@@ -6,9 +6,9 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京东路街道</title>
-<script type="module" crossorigin src="./assets/index.88f89a27.js"></script>
+<script type="module" crossorigin src="./assets/index.758c37c1.js"></script>
   <link rel="modulepreload" href="./assets/vendor.f603cf3b.js">
-  <link rel="stylesheet" href="./assets/index.e57cf26a.css">
+  <link rel="stylesheet" href="./assets/index.4f8473de.css">
 </head>
 
 <body>

src/ajax/api.ts

@@ -123,8 +123,6 @@ export default {
   GET_BEAUTY_HOME: '/service-special-nandong/public/beautifulHomes', // 美丽家园
   GET_BEAUTY_HOME_EXECUTE:
     '/service-special-nandong/public/beautifulHome/threeYearStatistics', // 美丽家园项目实施情况
-  GET_BEAUTY_HOME_STATISTICS:
-    '/service-special-nandong/public/beautifulHome/projectTypeStatisticsWithYear', // 美丽家园项目分类统计
   GET_EVENTS: '/service-special-nandong/public/compairs', // 事件
   GET_WISDOM_OLD: '/service-special-nandong/public/wisdom/0', // 智慧养老
 }

src/view/main.vue

@@ -6,7 +6,12 @@
     gap="0.05rem"
   >
     <m-title area="title">南东城运</m-title>
-    <m-map ref="map" width="71vw" @complete="handleMapComplete" />
+    <m-map
+      ref="map"
+      width="71vw"
+      @complete="handleMapComplete"
+      @event="onMapClick"
+    />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
     </m-animate>
@@ -111,7 +116,9 @@ export default defineComponent({
       }
     })
     const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
-
+    const onMapClick = (data: any) => {
+      console.log('click: ', data)
+    }
     return {
       map,
       curViewType,
@@ -122,6 +129,7 @@ export default defineComponent({
       handleMapComplete,
       selectArea,
       handleZoom,
+      onMapClick,
     }
   },
 })

src/view/right/beauty-home-in-station.vue

@@ -86,19 +86,16 @@ export default defineComponent({
           params: { workstationId: workstationId.value },
         })
         .then((res) => {
-          const data = res?.data?.content
-          summary.value = Object.keys(data).map((key: string) => ({
-            name: data[key].year + '年',
-            value: data[key].projectCount || 0,
-          }))
-        })
-      ajax
-        .get({
-          url: api.GET_BEAUTY_HOME_STATISTICS,
-          params: { workstationId: workstationId.value },
-        })
-        .then((res) => {
-          beautyHome.value = res?.data?.content || []
+          const data = res?.data?.content || []
+          const beautyHomeTypes: any[] = []
+          summary.value = data.map((item: any) => {
+            beautyHomeTypes.push(...item.statistics)
+            return {
+              name: item.implementYear + '年',
+              value: item.num || 0,
+            }
+          })
+          beautyHome.value = beautyHomeTypes
         })
 
       const { content } = (
@@ -138,29 +135,33 @@ export default defineComponent({
       {
         name: '小区微更新',
         value:
-          beautyHome.value.filter((e) => e.projectType == '小区微更新')
-            ?.length || 0,
+          beautyHome.value
+            .filter((e) => e.projectType == '小区微更新')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon31,
       },
       {
         name: '门岗规范化',
         value:
-          beautyHome.value.filter((e) => e.projectType == '门岗规范化')
-            ?.length || 0,
+          beautyHome.value
+            .filter((e) => e.projectType == '门岗规范化')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon32,
       },
       {
         name: '充电桩',
         value:
-          beautyHome.value.filter((e) => e.projectType == '充电桩')?.length ||
-          0,
+          beautyHome.value
+            .filter((e) => e.projectType == '充电桩')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon33,
       },
       {
         name: '雨污混接',
         value:
-          beautyHome.value.filter((e) => e.projectType == '雨污混接')?.length ||
-          0,
+          beautyHome.value
+            .filter((e) => e.projectType == '雨污混接')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon34,
       },
     ])

src/view/right/beauty-home.vue

@@ -74,42 +74,48 @@ export default defineComponent({
     const beautyHome = ref<any[]>([])
     const summary = ref<{ name: string; value: any }[]>([])
     ajax.get({ url: api.GET_BEAUTY_HOME_EXECUTE }).then((res) => {
-      const data = res?.data?.content
-      summary.value = Object.keys(data).map((key: string) => ({
-        name: data[key].year + '年',
-        value: data[key].projectCount || 0,
-      }))
-    })
-    ajax.get({ url: api.GET_BEAUTY_HOME_STATISTICS }).then((res) => {
-      beautyHome.value = res?.data?.content || []
+      const data = res?.data?.content || []
+      const beautyHomeTypes: any[] = []
+      summary.value = data.map((item: any) => {
+        beautyHomeTypes.push(...item.statistics)
+        return {
+          name: item.implementYear + '年',
+          value: item.num || 0,
+        }
+      })
+      beautyHome.value = beautyHomeTypes
     })
     const situation = computed<BriefProp[]>(() => [
       {
         name: '小区微更新',
         value:
-          beautyHome.value.filter((e) => e.projectType == '小区微更新')
-            ?.length || 0,
+          beautyHome.value
+            .filter((e) => e.projectType == '小区微更新')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon31,
       },
       {
         name: '门岗规范化',
         value:
-          beautyHome.value.filter((e) => e.projectType == '门岗规范化')
-            ?.length || 0,
+          beautyHome.value
+            .filter((e) => e.projectType == '门岗规范化')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon32,
       },
       {
         name: '充电桩',
         value:
-          beautyHome.value.filter((e) => e.projectType == '充电桩')?.length ||
-          0,
+          beautyHome.value
+            .filter((e) => e.projectType == '充电桩')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon33,
       },
       {
         name: '雨污混接',
         value:
-          beautyHome.value.filter((e) => e.projectType == '雨污混接')?.length ||
-          0,
+          beautyHome.value
+            .filter((e) => e.projectType == '雨污混接')
+            ?.reduce((acc, cur) => acc + cur?.typeNum || 0, 0) || 0,
         icon: icon34,
       },
     ])

src/view/right/beauty-street.vue

@@ -51,27 +51,24 @@ export default defineComponent({
       ],
       source: [],
     })
-    ajax.get({ url: api.GET_BEAUTY_STREET_STATISTICS }).then((res) => {
-      const data = res?.data?.content
+    ajax.get({ url: api.GET_BEAUTY_STREET_EXECUTE }).then((res) => {
+      const data = res?.data?.content || []
       const result: any = {}
-      Object.keys(data).forEach((key) => {
-        result[data[key].year + '年'] = data[key].data || []
+      summary.value = data.map((item: any) => {
+        result[item.implementYear + '年'] = item.statistics || []
+        return {
+          name: item.implementYear + '年',
+          value: item.num || 0,
+        }
       })
+      curYear.value = summary.value?.[0]?.name || ''
       list.value = result
-      ajax.get({ url: api.GET_BEAUTY_STREET_EXECUTE }).then((res) => {
-        const data = res?.data?.content
-        summary.value = Object.keys(data).map((key: string) => ({
-          name: data[key].year + '年',
-          value: data[key].projectCount || 0,
-        }))
-        curYear.value = summary.value?.[0]?.name || ''
-        setBarData()
-      })
+      setBarData()
     })
     function setBarData() {
       barData.value.source = list.value[curYear.value]?.map((item: any) => ({
         name: item.projectType,
-        value: item.projectTypeCount || 0,
+        value: item.typeNum || 0,
       }))
     }
 

src/view/right/complain.vue

@@ -26,7 +26,7 @@
             <template
               v-if="
                 classChartData.dimensions &&
-                  classChartData.dimensions.length > 0
+                classChartData.dimensions.length > 0
               "
             >
               <div>
@@ -262,9 +262,10 @@ export default defineComponent({
         &.wrapper
           display flex
           >div
-            width 46%
+            width 60%
             height 100%
             &:first-child
+              flex 1
               $center()
               flex-direction column
               font-size .12rem

src/view/right/police.vue

 <template>
   <m-card title="110非警情">
-    <div>
-      <m-sub2 :addition="{ value: String(newFind.newFind), unit: '近30mins' }">
-        最新发现
-      </m-sub2>
-      <Brief :list="sumList" color="#fff" />
-      <!-- <div v-if="showChart" class="chart">
-        <m-line :dataset="lineData" :option="lineOption" />
-      </div> -->
-    </div>
-    <div class="gate-wrapper">
-      <m-sub2>门岗值守分布</m-sub2>
-      <div class="gate">
-        <p>直管公房</p>
-        <Summary :list="zggfList" :avatar="avatar7" />
-      </div>
-      <div class="gate">
-        <p>社会物业</p>
-        <Summary :list="shwyList" :avatar="avatar7" />
+    <div class="wrapper">
+      <div>
+        <m-sub2
+          :addition="{ value: String(newFind.newFind), unit: '近30mins' }"
+        >
+          最新发现
+        </m-sub2>
+        <Brief :list="sumList" color="#fff" />
+        <!-- <div v-if="showChart" class="chart">
+          <m-line :dataset="lineData" :option="lineOption" />
+        </div> -->
       </div>
-    </div>
-    <div>
-      <m-sub2>平安地图</m-sub2>
-      <div class="safe-map">
-        <div>
-          <p
-            v-for="(item, index) in safeMap"
-            :key="item.cmtName"
-            :class="{ show: index === curIndex }"
-            @click="clickStreetName(item, index)"
-          >
-            <span>{{ item.cmtName }}</span>
-            <m-count class="count" :value="item.score" />
-          </p>
+      <div class="gate-wrapper">
+        <m-sub2>门岗值守分布</m-sub2>
+        <div class="gate">
+          <p>直管公房</p>
+          <Summary :list="zggfList" :avatar="avatar7" />
         </div>
-        <div>
-          <img src="@/assets/images/map.png" />
+        <div class="gate">
+          <p>社会物业</p>
+          <Summary :list="shwyList" :avatar="avatar7" />
+        </div>
+      </div>
+      <div>
+        <m-sub2>平安地图</m-sub2>
+        <div class="safe-map">
+          <div>
+            <p
+              v-for="(item, index) in safeMap"
+              :key="item.cmtName"
+              :class="{ show: index === curIndex }"
+              @click="clickStreetName(item, index)"
+            >
+              <span>{{ item.cmtName }}</span>
+              <m-count class="count" :value="item.score" />
+            </p>
+          </div>
+          <div>
+            <img src="@/assets/images/map.png" />
+          </div>
         </div>
       </div>
     </div>
@@ -173,6 +177,12 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import ('../../components/MyComponent/main.styl')
+.wrapper
+  width 100%
+  height 100%
+  display flex
+  flex-direction column
+  justify-content space-between
 .chart
   width 100%
   height 1.4rem
@@ -186,16 +196,17 @@ export default defineComponent({
 .safe-map
   display flex
   $card-bg2()
-  padding .05rem .1rem
+  padding .1rem
   margin .1rem 0
   >div
     &:first-child
       cursor pointer
-      flex 1.7
+      flex 1.2
       display flex
       flex-wrap wrap
       >p
-        width 33.3%
+        width 50%
+        padding .01rem 0
         span
           color #ccc
         .count