行业监管

src/App.vue

@@ -49,7 +49,7 @@ html, body
   background url('/src/assets/images/map.png') center/100% 100% no-repeat
   color #fff
 .orange-count
-  font-size .16rem
+  font-size .14rem
   font-weight bold
   background-clip text
   -webkit-background-clip text

src/utils/component-list.ts

@@ -3,6 +3,7 @@ import PropertyFeatures from '@/view/components/property-features.vue' // 物业
 import PartyLead from '@/view/components/party-lead.vue' // 党建引领
 import PublicEarning from '@/view/components/public-earning.vue' // 公共收益
 import Bid from '@/view/components/bid.vue' // 招投标
+import IndustrySupervision from '@/view/components/industry-supervision.vue' // 行业监管
 
 export default {
   w1: Property,
@@ -10,10 +11,11 @@ export default {
   w3: PartyLead,
   w4: PublicEarning,
   w5: Bid,
+  w6: IndustrySupervision,
 }
 
 export const components = {
-  物业: ['w1', 'w2', 'w3', 'w4', 'w5'],
+  物业: ['w1', 'w2', 'w3', 'w4', 'w5', 'w6'],
   市场: [],
   修缮: [],
   保障: [],

src/view/components/industry-supervision.vue

+<template>
+  <m-card title="行业监管">
+    <div class="summary">
+      <div class="rate">
+        <div>
+          <div>
+            <span>
+              <m-count class="count orange-count" :value="31" />/<m-count
+                :value="50"
+              />
+            </span>
+            <p>督查</p>
+          </div>
+          <div>
+            <span> <m-count class="count orange-count" :value="31" />% </span>
+            <p>整改率</p>
+          </div>
+        </div>
+        <div>
+          <div>
+            <span> <m-count class="count" :value="90" />% </span>
+            <p>日查</p>
+          </div>
+          <div>
+            <span> <m-count class="count" :value="82" />% </span>
+            <p>双周查</p>
+          </div>
+          <div>
+            <span> <m-count class="count" :value="76" />% </span>
+            <p>月查</p>
+          </div>
+        </div>
+      </div>
+      <div class="month">
+        <p>房办月查完成情况</p>
+        <div>
+          <span v-for="(_, i) in new Array(12)" :key="i">
+            {{ i + 1 }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <m-sub>重大事件清单</m-sub>
+    <div class="content">
+      <div class="title">
+        <p>小区名称</p>
+        <span class="line" />
+        <span>上报主题</span>
+      </div>
+      <div class="info">
+        <div>
+          <span>事件类型</span>
+          <p>事件类型</p>
+        </div>
+        <div>
+          <span>人员伤亡</span>
+          <p>0人</p>
+        </div>
+        <div>
+          <span>财产损失</span>
+          <p>0元</p>
+        </div>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+
+.summary
+  display flex
+  .rate
+    width 45%
+    >div
+      >div
+        display inline-block
+        width 33.3%
+      .count
+        font-size .14rem
+        color #fff
+      span,
+      p
+        font-size .09rem
+        color #ccc
+  .month
+    flex 1
+    $box()
+    padding .05rem .1rem
+    display flex
+    flex-direction column
+    margin .04rem 0
+    >div
+      margin-top .04rem
+      flex 1
+      display grid
+      grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr
+      grid-template-rows 1fr 1fr
+      grid-gap .04rem
+      span
+        $center()
+        border-radius .02rem
+        background $green
+.content
+  $box()
+  padding .04rem .1rem
+  margin-bottom .04rem
+  .title
+    display flex
+    align-items center
+    .line
+      flex 1
+      height 0
+      border-bottom .01rem dashed $blue
+      margin 0 .05rem
+  .info
+    display flex
+    >div
+      flex 1
+
+      span
+        color #ccc
+        font-size .08rem
+</style>