公共收益

src/components/MyComponent/main.styl

@@ -24,7 +24,7 @@ $primary-bg = rgba(49,94,139,.3)
 $primary-border = rgba(91,213,255,.5)
 $blue = #2F86EE
 $edge = #00f2ff
-$yellow = #ffd400
+$yellow = #EDB872
 $green = #4F953B
 $edge = #00f2ff
 $orange = #F7933E

src/utils/component-list.ts

 import Property from '@/view/components/property.vue' // 物业
 import PropertyFeatures from '@/view/components/property-features.vue' // 物业体征
 import PartyLead from '@/view/components/party-lead.vue' // 党建引领
+import PublicEarning from '@/view/components/public-earning.vue' // 公共收益
 
 export default {
   w1: Property,
   w2: PropertyFeatures,
   w3: PartyLead,
+  w4: PublicEarning,
+}
+
+export const components = {
+  物业: ['w1', 'w2', 'w3', 'w4'],
+  市场: [],
+  修缮: [],
+  保障: [],
 }

src/view/components/component-modal.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
 import { computed, PropType, ref, watch } from 'vue'
-import list from '@/utils/component-list'
+import list, { components } from '@/utils/component-list'
 
 const props = defineProps({
   modelValue: {
@@ -61,10 +61,10 @@ watch(
 
 const curTab = ref('1')
 const tabs = [
-  { name: '物业', key: '1', list: ['w1', 'w2', 'w3'] },
-  { name: '市场', key: '2', list: [] },
-  { name: '修缮', key: '3', list: [] },
-  { name: '保障', key: '4', list: [] },
+  { name: '物业', key: '1', list: components['物业'] },
+  { name: '市场', key: '2', list: components['市场'] },
+  { name: '修缮', key: '3', list: components['修缮'] },
+  { name: '保障', key: '4', list: components['保障'] },
 ]
 const componentKeys = computed(
   () => tabs.find((e) => e.key === curTab.value)?.list || [],

src/view/components/property.vue

@@ -74,7 +74,7 @@ const list = [
         text-align center
         .count
           font-size .12rem
-          color #EDB872
+          color $yellow
           font-family $font-din
           font-weight bold
         >p

src/view/components/public-earning.vue

+<template>
+  <m-card title="公共收益">
+    <m-sub :addition="{ value: 6000, unit: '元' }"> 存量总额 </m-sub>
+    <div class="wrapper">
+      <div>
+        <p>收入（季度）</p>
+        <div>
+          <div>
+            <p class="count"><m-count :value="100" />元</p>
+            <p>总额</p>
+          </div>
+          |
+          <div>
+            <p class="count"><m-count :value="180" />个</p>
+            <p>小区</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p>支出（季度）</p>
+        <div>
+          <div>
+            <p class="count"><m-count :value="169" />元</p>
+            <p>总额</p>
+          </div>
+          |
+          <div>
+            <p class="count"><m-count :value="156" />个</p>
+            <p>小区</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <m-sub :addition="{ value: 1684, unit: '万元' }">维修资金总额</m-sub>
+  </m-card>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+
+.wrapper
+  display flex
+  justify-content space-between
+  margin .05rem 0
+  >div
+    width 48%
+    $box()
+    padding .06rem .1rem
+    >div
+      display flex
+      align-items center
+      margin-top .05rem
+      >div
+        flex 1
+        text-align center
+        .count
+          font-size .12rem
+          color $yellow
+          font-family $font-din
+          font-weight bold
+        >p
+          color #ccc
+</style>