公共服务 right-1 complete

src/assets/style/reset.css

-.ant-progress-circle .ant-progress-text {
-  color: #fff;
-  font-size: 0.2rem;
-  font-weight: bold;
-}

src/assets/style/reset.styl

+@import '../../components/MyComponent/main.styl'
+$color-main = #5BD5FF
+
+#app
+  .ant-progress-circle
+    .ant-progress-text
+      color #fff
+      font-size 0.2rem
+      font-weight bold
+  .ant-select
+    z-index 99
+    font-size .08rem
+    color $color-main
+    min-width .6rem
+    .ant-select-selector
+      border .01rem solid $color-main
+      border-radius 0
+      background rgba(0,0,0,0.3)
+      height .2rem
+      padding 0 .04rem
+      .ant-select-selection-item
+        line-height .2rem
+    .ant-select-arrow
+      color $color-main
+      font-size .08rem
+      right .05rem
+      width auto
+      height auto
+      margin-top -0.04rem
+.ant-select-dropdown
+  color $color-main
+  background rgba(0,0,0,0.4)
+  border-radius 0
+  font-size .08rem
+  .ant-select-item
+    color #fff
+    font-size .08rem
+    line-height .12rem
+    &:hover
+    &.ant-select-item-option-active
+      background transparent
+      color $color-main
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    color $color-main
+    background rgba(0,0,0,0.4)
+    font-size .08rem
+    font-weight bold
\ No newline at end of file

src/components/MyComponent/MyCard/mode-2.vue

@@ -42,7 +42,7 @@ export default defineComponent({
   .card-content
     display flex
     flex-direction column
-    justify-content space-between
+    justify-content space-around
     position relative
     box-sizing border-box
     padding .02rem .05rem

src/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
 import MyComponent from '@/components/MyComponent'
-import { Progress } from 'ant-design-vue'
+import { Progress, Select } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
-import './assets/style/reset.css'
+import './assets/style/reset.styl'
 
-createApp(App).use(MyComponent).use(Progress).mount('#app')
+createApp(App).use(MyComponent).use(Progress).use(Select).mount('#app')

src/view/main.vue

@@ -9,12 +9,13 @@
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <LeftComponent area="left" />
     </m-animate>
-    <m-animate enter="fadeInRight" leave="fadeOutRight">
+    <!-- <m-animate enter="fadeInRight" leave="fadeOutRight">
       <PublicManage v-show="curTheme === 'manage'" area="right" />
     </m-animate>
     <m-animate enter="fadeInRight" leave="fadeOutRight">
       <PublicService v-show="curTheme === 'service'" area="right" />
-    </m-animate>
+    </m-animate> -->
+    <PublicService area="right" />
   </m-grid>
 </template>
 

src/view/right/beauty-home.vue

+<template>
+  <m-card title="美丽家园">
+    <m-sub>项目实施情况</m-sub>
+    <div class="summary">
+      <div v-for="item in summary" :key="item.name">
+        <m-count class="count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <Brief :list="situation" />
+    <m-sub :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub>
+    <div class="elev">
+      <div v-for="item in elevList" :key="item.name">
+        <m-count class="count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <m-sub>马桶改造</m-sub>
+    <Brief :list="toiletSituation" />
+    <m-progress :value="80" :msg="{ value: 80, unit: '%', name: ' ' }" />
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import Brief, { BriefProp } from '../components/brief.vue'
+
+export default defineComponent({
+  name: 'BeautyHome',
+  components: { Brief },
+  setup() {
+    const summary = ref([
+      { name: '2020年', value: 26 },
+      { name: '2019年', value: 24 },
+      { name: '2018年', value: 18 },
+    ])
+    const situation = ref<BriefProp[]>([
+      { name: '小区微更新', value: 26, icon: 'icon9.png' },
+      { name: '充电桩', value: 64, icon: 'icon10.png' },
+      { name: '雨污混接', value: 18, icon: 'icon11.png' },
+      { name: '门岗规范化', value: 12, icon: 'icon12.png' },
+    ])
+    const elevList = ref([
+      { name: '振兴', value: 9 },
+      { name: '福海', value: 5 },
+      { name: '江阴', value: 7 },
+      { name: '定兴', value: 1 },
+      { name: '新昌', value: 5 },
+      { name: '小花园', value: 5 },
+      { name: '顺天村', value: 1 },
+    ])
+    const toiletSituation = ref<BriefProp[]>([
+      { name: '已完成改造', value: 26, icon: 'icon13.png' },
+      { name: '应改造', value: 64, icon: 'icon14.png' },
+    ])
+    return {
+      summary,
+      situation,
+      elevList,
+      toiletSituation,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.summary
+  width 100%
+  display flex
+  justify-content space-between
+  >div
+    width 30%
+    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
+    text-align center
+    padding .05rem
+    .count
+      font-size .12rem
+    p
+      font-size .09rem
+      color $font-color
+.elev
+  display flex
+  flex-wrap wrap
+  >div
+    width 25%
+    text-align center
+    position relative
+    .count
+      font-size .12rem
+      font-weight bold
+    p
+      color #ccc
+    &:after
+      content '|'
+      color $primary-border
+      position absolute
+      top 50%
+      right 0
+      transform translateY(-50%)
+</style>

src/view/right/beauty-street.vue

+<template>
+  <m-card title="美丽街区" class="beauty-street">
+    <m-sub>项目实施情况</m-sub>
+    <div class="summary">
+      <div v-for="item in summary" :key="item.name">
+        <m-count class="count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+    <div class="chart">
+      <a-select v-model:value="year">
+        <a-select-option
+          v-for="item in summary"
+          :key="item.name"
+          class="my-select"
+          :value="item.name"
+          size="small"
+          dropdown-class-name="my-drop-down"
+        >
+          {{ item.name }}
+        </a-select-option>
+      </a-select>
+      <m-bar :dataset="barData" :option="barOption" />
+    </div>
+  </m-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  name: 'BeautyStreet',
+  setup() {
+    const summary = ref([
+      { name: '2020年', value: 26 },
+      { name: '2019年', value: 24 },
+      { name: '2018年', value: 18 },
+    ])
+    const barData = ref({
+      dimensions: [
+        { name: 'name', displayName: '项目' },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        { name: '架空线梳理', value: 15 },
+        { name: '店招店牌美化', value: 9 },
+        { name: '绿化整治', value: 4 },
+        { name: '外立面整治', value: 5 },
+        { name: '公共设施', value: 3 },
+      ],
+    })
+    const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
+    const barOption = ref({
+      color: [['#2DFDC7', 'rgba(42,253,195,.1)']],
+      legend: { show: false },
+      yAxis: { show: false },
+      grid: {
+        width: '105%',
+        left: '-5%',
+        right: '2%',
+        bottom: '1%',
+        top: '20%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          axisLabel: {
+            interval: 0,
+            fontSize: fontSize.value * 0.8,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(47,134,238,0.5)',
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          type: 'bar',
+          barWidth: '30%',
+          itemStyle: {
+            normal: {
+              label: {
+                show: true, //开启显示
+                position: 'top', //在上方显示
+                textStyle: {
+                  color: '#fff',
+                },
+              },
+            },
+          },
+        },
+      ],
+    })
+    const year = ref('2020年')
+    return {
+      summary,
+      fontSize,
+      barData,
+      barOption,
+      year,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.summary
+  width 100%
+  display flex
+  justify-content space-between
+  >div
+    width 30%
+    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
+    text-align center
+    padding .05rem
+    .count
+      font-size .12rem
+    p
+      font-size .09rem
+      color $font-color
+.chart
+  width 100%
+  height 1rem
+  margin-bottom .1rem
+  position relative
+</style>
+<style lang="stylus">
+.beauty-street
+  .ant-select
+    position absolute
+    right 0
+    top 0
+</style>

src/view/right/public-service.vue

 <template>
   <div class="public-service">
-    <m-card mode="border"> </m-card>
+    <m-card mode="border">
+      <div class="beauty1"><BeautyStreet /></div>
+      <div class="beauty2"><BeautyHome /></div>
+    </m-card>
     <m-card mode="border"> </m-card>
     <m-card mode="border"> </m-card>
   </div>
@@ -8,10 +11,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import BeautyStreet from './beauty-street.vue'
+import BeautyHome from './beauty-home.vue'
 
 export default defineComponent({
   name: 'PublicService',
-  setup() {},
+  components: { BeautyStreet, BeautyHome },
 })
 </script>
 
@@ -25,4 +30,8 @@ export default defineComponent({
   >div
     height 100%
     width 33%
+    .beauty1
+      flex 1
+    .beauty2
+      flex 1.6
 </style>