招投标

src/utils/component-list.ts

@@ -2,16 +2,18 @@ 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' // 公共收益
+import Bid from '@/view/components/bid.vue' // 招投标
 
 export default {
   w1: Property,
   w2: PropertyFeatures,
   w3: PartyLead,
   w4: PublicEarning,
+  w5: Bid,
 }
 
 export const components = {
-  物业: ['w1', 'w2', 'w3', 'w4'],
+  物业: ['w1', 'w2', 'w3', 'w4', 'w5'],
   市场: [],
   修缮: [],
   保障: [],

src/view/components/bid.vue

+<template>
+  <m-card title="招投标">
+    <div class="sum">
+      <div>
+        <m-sub>公开招投标数</m-sub>
+        <span>招标中 <m-count class="count" :value="31" /></span>
+        <span>已完成 <m-count class="count" :value="24" /></span>
+      </div>
+      <div>
+        <m-sub>邀请招标</m-sub>
+        <span>招标中 <m-count class="count" :value="31" /></span>
+        <span>已完成 <m-count class="count" :value="24" /></span>
+      </div>
+    </div>
+    <div class="rate">
+      <Circle
+        class="circle"
+        color="#F7B500"
+        rail-color="#0091FF"
+        :value="30"
+        :show-info="false"
+      />
+      <div class="des">
+        <p>
+          前期物业招标
+          <m-count class="count" style="color: #f7b500" :value="120" />
+        </p>
+        <p>
+          业主大会公开招标
+          <m-count class="count" style="color: #0091ff" :value="350" />
+        </p>
+      </div>
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts" setup>
+import Circle from './circle.vue'
+</script>
+
+<style lang="stylus" scoped>
+@import  '../../components/MyComponent/main.styl'
+.sum
+  display flex
+  >div
+    flex 1
+    margin 0 .05rem
+    .count
+      font-size .14rem
+      margin-left .04rem
+      color #fff
+      font-weight bold
+    span
+      margin 0 .04rem
+      color #ccc
+      &:last-child
+        float right
+.rate
+  display flex
+  margin-top .05rem
+  padding-left .1rem
+  .circle
+    width 24%
+  .des
+    flex 1
+    display flex
+    flex-direction column
+    justify-content center
+    margin-left .3rem
+    .count
+      font-size .14rem
+      margin-left .1rem
+</style>

src/view/components/circle.vue

@@ -56,7 +56,7 @@ defineProps({
   background-repeat no-repeat
   background-size 100% 100%
   background-position center
-  padding 6%
+  padding .05rem
   box-sizing border-box
   .circle-item
     width 100%

src/view/components/party-lead.vue

@@ -97,26 +97,26 @@ const barOption = {
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
 
-  .content
-    text-align center
-    white-space nowrap
-  .sum
-    display flex
-    >div
-      flex 1
-      &.rate
-        box-sizing border-box
-        padding .06rem
-      &.cross
-        flex 1.4
-        margin .08rem .05rem
-        $box()
-        $center()
-        flex-direction column
-        .count
-          color $orange
-          font-size .12rem
-  .chart
-    width 100%
-    height 1.1rem
+.content
+  text-align center
+  white-space nowrap
+.sum
+  display flex
+  >div
+    flex 1
+    &.rate
+      box-sizing border-box
+      padding .06rem
+    &.cross
+      flex 1.4
+      margin .08rem .05rem
+      $box()
+      $center()
+      flex-direction column
+      .count
+        color $orange
+        font-size .12rem
+.chart
+  width 100%
+  height 1.1rem
 </style>

src/view/components/public-earning.vue

@@ -6,12 +6,12 @@
         <p>收入（季度）</p>
         <div>
           <div>
-            <p class="count"><m-count :value="100" />元</p>
+            <p class="count"><m-count :value="100" /><span>元</span></p>
             <p>总额</p>
           </div>
           |
           <div>
-            <p class="count"><m-count :value="180" />个</p>
+            <p class="count"><m-count :value="180" /><span>个</span></p>
             <p>小区</p>
           </div>
         </div>
@@ -20,12 +20,12 @@
         <p>支出（季度）</p>
         <div>
           <div>
-            <p class="count"><m-count :value="169" />元</p>
+            <p class="count"><m-count :value="169" /><span>元</span></p>
             <p>总额</p>
           </div>
           |
           <div>
-            <p class="count"><m-count :value="156" />个</p>
+            <p class="count"><m-count :value="156" /><span>个</span></p>
             <p>小区</p>
           </div>
         </div>
@@ -56,10 +56,14 @@
         flex 1
         text-align center
         .count
-          font-size .12rem
+          font-size .14rem
           color $yellow
           font-family $font-din
           font-weight bold
+          >span
+            color #ccc
+            font-size .09rem
+            font-weight normal
         >p
           color #ccc
 </style>