Part Left Complete

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "animate.css": "^4.1.1",
+    "ant-design-vue": "^2.0.0",
     "axios": "^0.21.1",
     "countup.js": "^2.0.7",
     "dayjs": "^1.10.4",
@@ -18,7 +19,7 @@
     "normalize.css": "^8.0.1",
     "qs": "^6.9.6",
     "vue": "^3.0.5",
-    "vuex": "^4.0.0-rc.2"
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.22",

src/App.vue

@@ -44,15 +44,15 @@ html, body
   user-select none
   font-size 16vh
   line-height 1.5
-  color #fff
-p
+  p
     margin 0
 #app
   width 100%
   height 100%
   overflow hidden
   font-size .1rem
-  background url('/src/assets/images/background.jpg') center/cover no-repeat
+  background url('@/assets/images/background.jpg') center/cover no-repeat
+  color #fff
 
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {

src/assets/style/reset.css

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

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

@@ -32,12 +32,12 @@ export default defineComponent({
 .card-wrapper
   .card-title
     display flex
-    background url('/src/assets/images/card-mode1-header.png') left bottom / 100% 60% no-repeat
+    background url('@/assets/images/card-mode1-header.png') left bottom / 100% 60% no-repeat
     >p
       color $card-title-color
       font-size $card-title-size
       font-weight bold
-      background url('/src/assets/images/card-mode1-title.png') left bottom / 100% 60% no-repeat
+      background url('@/assets/images/card-mode1-title.png') left bottom / 100% 60% no-repeat
       padding 0 .2rem
       margin 0
   .card-content

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

@@ -28,7 +28,7 @@ export default defineComponent({
 .card-wrapper
   .card-title
     display flex
-    background url('/src/assets/images/card-mode2-header.png') center / cover no-repeat
+    background url('@/assets/images/card-mode2-header.png') center / cover no-repeat
     color $card-title-color
     font-size $card-title-size
     height .2rem

src/components/MyComponent/MyEmpty/my-empty.vue

 <template>
   <div class="my-empty">
-    <img src="/src/assets/images/no-data.png" />
+    <img src="@/assets/images/no-data.png" />
     <p>— {{ text }} —</p>
   </div>
 </template>

src/components/MyComponent/MyModal/my-modal.vue

@@ -23,19 +23,19 @@
             </p>
             <div>
               <img
-                src="/src/assets/images/modal-flag.png"
+                src="@/assets/images/modal-flag.png"
                 draggable="false"
                 class="flag"
               />
               <img
-                src="/src/assets/images/close-btn.png"
+                src="@/assets/images/close-btn.png"
                 draggable="false"
                 class="close-btn"
                 @click.prevent="closeModal"
               />
             </div>
             <img
-              src="/src/assets/images/modal-title-left.png"
+              src="@/assets/images/modal-title-left.png"
               draggable="false"
               class="left"
             />

src/components/MyComponent/MyStep/my-step.vue

@@ -111,7 +111,7 @@ export default defineComponent({
       width .1rem
       height @width
       border-radius 50%
-      background url('../../../assets/images/true.png') center center / 60% 60% no-repeat
+      background url('@/assets/images/true.png') center center / 60% 60% no-repeat
       background-color $edge
     .none
       width .06rem

src/components/MyComponent/MySub/my-sub.vue

@@ -2,7 +2,7 @@
   <div class="my-sub">
     <span />
     <p><slot /></p>
-    <img src="/src/assets/images/sub-dot.png" />
+    <img src="@/assets/images/sub-dot.png" />
   </div>
 </template>
 

src/components/MyComponent/MyTitle/my-title.vue

 <template>
   <div class="my-title">
-    <img src="/src/assets/images/title-bg.png" class="bg" />
+    <img src="@/assets/images/title-bg.png" class="bg" />
     <div class="date">
       <span>{{ date }}</span>
       <span>{{ time }}</span>
@@ -106,9 +106,9 @@ export default defineComponent({
       padding .03rem .1rem
       box-sizing border-box
       margin-left .1rem
-      background url('/src/assets/images/btn-bg.png') 100% / 100% no-repeat
+      background url('@/assets/images/btn-bg.png') 100% / 100% no-repeat
       cursor pointer
       &:hover
       &.on
-        background url('/src/assets/images/btn-bg-on.png') 100% / 100% no-repeat
+        background url('@/assets/images/btn-bg-on.png') 100% / 100% no-repeat
 </style>

src/components/MyComponent/main.styl

@@ -21,11 +21,12 @@ $border(color = #000, width = 0.01rem)
   border width solid color
 
 $primary-color = #47B3FF
+$secondary-color = #5BD5FF
 $primary-bg = rgba(49,94,139,.3)
 $primary-border = rgba(91,213,255,.5)
 $blue = #2F86EE
+$yellow = #ffd400
 $edge = #00f2ff
-$secondary-color = #5BD5FF
 
 $card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
 $card-title-color = #fff
@@ -36,3 +37,5 @@ $table-title-bg =rgba(2,27,53,.5)
 $table-content-bg = rgba(2,27,53,.2)
 $table-content-hover-color = $primary-color
 $table-content-hover-bg = $primary-bg
+
+$font-color = #70A7E0
\ No newline at end of file

src/main.ts

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

src/view/components/brief.vue

+<template>
+  <div class="brief-container">
+    <div v-for="item in list" :key="item.name">
+      <img v-if="item.icon" :src="`@/assets/images/${item.icon}`" />
+      <div :class="{ center: !item.icon }">
+        <m-count class="count" :value="item.value" />
+        <p>{{ item.name }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export interface BriefProp {
+  name: string
+  value: number
+  icon?: string
+}
+export default defineComponent({
+  name: 'Brief',
+  props: {
+    list: {
+      type: Array as PropType<BriefProp[]>,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.brief-container
+  display flex
+  justify-content space-around
+  align-items center
+  >div
+    display flex
+    align-items center
+    >img
+      width .22rem
+      height @width
+      margin-right .05rem
+    >div
+      font-weight bold
+      .count
+        font-size .13rem
+        color $yellow
+      p
+        color #ccc
+      &.center
+        text-align center
+</style>

src/view/components/circle.vue

+<template>
+  <div ref="circleWrapperRef" class="circle-wrapper">
+    <a-progress
+      type="circle"
+      :width="width"
+      :stroke-color="strokeColor"
+      :percent="value"
+    />
+    <p v-if="name">{{ name }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue'
+
+export default defineComponent({
+  name: 'Circle',
+  props: {
+    color: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: ['#0094FF', '#1DF9FF'],
+    },
+    value: {
+      type: Number as PropType<number>,
+      default: 0,
+    },
+    name: {
+      type: String as PropType<string>,
+      default: '',
+    },
+  },
+  setup(props) {
+    const circleWrapperRef = ref<HTMLElement | null>(null)
+    const strokeColor = computed(() => {
+      if (Array.isArray(props.color)) {
+        return {
+          '0%': props.color[0],
+          '100%': props.color[1],
+        }
+      }
+      return props.color
+    })
+    const width = computed(() => {
+      if (circleWrapperRef.value) {
+        console.log('width', circleWrapperRef.value.clientWidth)
+
+        return circleWrapperRef.value.clientWidth / 1.8
+      }
+      return 0
+    })
+    return {
+      circleWrapperRef,
+      strokeColor,
+      width,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.circle-wrapper
+  width 100%
+  height 100%
+  $center()
+  flex-direction column
+  >p
+    margin-top .1rem
+    font-size .12rem
+    font-weight bold
+</style>

src/view/components/sub-title.vue

+<template>
+  <div class="sub-title">
+    <p><slot /></p>
+    <span />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SubTitle',
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.sub-title
+  display flex
+  align-items center
+  margin .04rem 0
+  p
+    color $secondary-color
+    margin-right .1rem
+    font-weight bold
+  span
+    flex 1
+    display block
+    height .01rem
+    background $primary-border
+</style>

src/view/components/summary.vue

+<template>
+  <div class="summary-container">
+    <div v-for="item in list" :key="item.name">
+      <p>
+        <m-count class="count" :value="item.value" />
+        <span class="unit">{{ item.unit }}</span>
+      </p>
+      <p>{{ item.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export interface SummaryProp {
+  name: string
+  value: number
+  unit?: string
+}
+export default defineComponent({
+  name: 'Summary',
+  props: {
+    list: {
+      type: Array as PropType<SummaryProp[]>,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.summary-container
+  width 100%
+  min-height .4rem
+  background url('@/assets/images/msg-wrapper.png') 100% / 100% 100% no-repeat
+  display flex
+  align-items center
+  justify-content space-around
+  >div
+    text-align center
+    margin-left -0.1rem
+    &:first-child
+      .count
+        color $yellow
+    p
+      .count
+        font-weight bold
+        margin-right .01rem
+      .unit
+        color #aaa
+        font-size .09rem
+      &:last-child
+        color $font-color
+        font-weight bold
+</style>

src/view/components/tabs.vue

+<template>
+  <div class="tabs-container">
+    <div
+      v-for="tab in list"
+      :key="tab.key"
+      :class="{ on: curTabKey === tab.key }"
+      @click.prevent="handleSelect(tab.key)"
+    >
+      <img src="@/assets/images/tri.png" />
+      <p>{{ tab.name }}</p>
+      <img src="@/assets/images/tri.png" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue'
+
+export interface TabsProp {
+  name: string
+  key: string
+}
+
+export default defineComponent({
+  name: 'Tabs',
+  props: {
+    list: {
+      type: Array as PropType<TabsProp[]>,
+      required: true,
+    },
+  },
+  emits: ['select'],
+  setup(props, ctx) {
+    const curTabKey = ref(props.list[0].key)
+    const handleSelect = (key: string) => {
+      curTabKey.value = key
+      ctx.emit('select', key)
+    }
+    return {
+      curTabKey,
+      handleSelect,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.tabs-container
+  width .25rem
+  height 100%
+  display flex
+  flex-direction column
+  border-right .01rem solid $primary-border
+  >div
+    flex 1
+    display flex
+    flex-direction column
+    width inherit
+    cursor pointer
+    &.on
+    &:hover
+      background url('@/assets/images/tab-on.png') 100% / 100% 100% no-repeat
+    img
+      width 100%
+      &:last-child
+        transform rotate(180deg)
+    p
+      display flex
+      align-items center
+      text-align center
+      padding 0 .02rem
+      min-height .5rem
+      font-size .11rem
+</style>

src/view/left/left-component.vue

@@ -3,12 +3,12 @@
     <m-card class="card" title="指挥体系">
       <div class="command">
         <div class="flag">
-          <img src="/src/assets/images/zheng.png" />
-          <img src="/src/assets/images/jing.png" />
+          <img src="@/assets/images/zheng.png" />
+          <img src="@/assets/images/jing.png" />
         </div>
         <div class="leader">
           <div v-for="(item, i) in leaders" :key="i">
-            <img :src="`/src/assets/images/${item.img}`" />
+            <img :src="`@/assets/images/${item.img}`" />
             <div>
               <p>{{ item.type }}</p>
               <span>{{ item.name }}</span>
@@ -42,7 +42,7 @@
         <m-sub>单兵巡查边量</m-sub>
         <div class="btns">
           <div v-for="btn in btns" :key="btn.name">
-            <img :src="`/src/assets/images/${btn.icon}`" />
+            <img :src="`@/assets/images/${btn.icon}`" />
             {{ btn.name }}
           </div>
         </div>
@@ -55,15 +55,37 @@
         </div>
       </div>
     </m-card>
-    <m-card class="card" title="党建和经济"></m-card>
+    <m-card class="card" title="党建和经济">
+      <div class="party">
+        <Tabs :list="tabList" @select="setCurTab" />
+        <div v-if="curTab === 'economic'" class="content economic">
+          <div v-for="circle in economicList" :key="circle.name">
+            <Cricle :value="circle.value" :name="circle.name" />
+          </div>
+        </div>
+        <div v-else class="content party">
+          <SubTitle>街道党员人数</SubTitle>
+          <Summary :list="partySummary" />
+          <SubTitle>物业"三驾马车"</SubTitle>
+          <Brief :list="propertySummary" />
+        </div>
+      </div>
+    </m-card>
   </m-card>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTitle from '../components/sub-title.vue'
+import Summary, { SummaryProp } from '../components/summary.vue'
+import Brief, { BriefProp } from '../components/brief.vue'
+import Cricle from '../components/circle.vue'
 
 export default defineComponent({
   name: 'LeftComponent',
+  components: { Tabs, SubTitle, Summary, Brief, Cricle },
+
   setup() {
     const leaders = ref([
       {
@@ -137,33 +159,105 @@ export default defineComponent({
         phone: '13652103974',
       },
     ])
+    const curTab = ref('party')
+    const setCurTab = (tab: string) => (curTab.value = tab)
+    const tabList = ref<TabsProp[]>([
+      {
+        key: 'party',
+        name: '党建引领',
+      },
+      {
+        key: 'economic',
+        name: '经济',
+      },
+    ])
+    const partySummary = ref<SummaryProp[]>([
+      {
+        name: '全部',
+        value: 165,
+        unit: '人',
+      },
+      {
+        name: '政府单位',
+        value: 20,
+        unit: '人',
+      },
+      {
+        name: '企业',
+        value: 45,
+        unit: '人',
+      },
+      {
+        name: '群众',
+        value: 100,
+        unit: '人',
+      },
+    ])
+    const propertySummary = ref<BriefProp[]>([
+      {
+        name: '居委会',
+        value: 10,
+        icon: 'icon3.png',
+      },
+      {
+        name: '业委会',
+        value: 15,
+        icon: 'icon4.png',
+      },
+      {
+        name: '物业企业',
+        value: 20,
+        icon: 'icon5.png',
+      },
+      {
+        name: '交叉任职',
+        value: 5,
+      },
+    ])
+    const economicList = ref([
+      {
+        name: '商办空置率',
+        value: 88,
+      },
+      {
+        name: '综合商业体使用率',
+        value: 88,
+      },
+    ])
     return {
       leaders,
       dutyTableData,
       btns,
       soldierList,
+      curTab,
+      setCurTab,
+      tabList,
+      partySummary,
+      propertySummary,
+      economicList,
     }
   },
 })
 </script>
 
 <style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
 .card
   flex 1
   &:first-child
-    flex 2
+    flex 2.1
 .command
   display flex
   .flag
     display flex
     flex-direction column
     justify-content space-around
-    margin-right .3rem
+    margin 0 .3rem 0 .05rem
     >img
       display block
-      width .34rem
+      width .3rem
       height @width
-      margin .05rem 0
+      margin .04rem 0
   .leader
     display flex
     flex-wrap wrap
@@ -172,10 +266,10 @@ export default defineComponent({
       display flex
       align-items center
       p
-        font-size .12rem
+        font-size .11rem
         font-weight bold
       img
-        width .3rem
+        width .28rem
         height @width
         margin-right .1rem
       span
@@ -189,7 +283,7 @@ export default defineComponent({
       width .01rem
       height .14rem
       margin 0 .2rem
-      background #5bd5ff
+      background $secondary-color
     >div
       flex 1
       >p
@@ -203,7 +297,7 @@ export default defineComponent({
     >div
       display flex
       align-items center
-      color #47B3FF
+      color $primary-color
       margin-left .2rem
       cursor pointer
       transition .3s ease-in-out
@@ -219,12 +313,28 @@ export default defineComponent({
     justify-content space-between
     >div
       width 30%
-      background url('/src/assets/images/border.png') 100% / 100% 100% no-repeat
+      background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
       padding .05rem .1rem
       box-sizing border-box
       span
-        color #47B3FF
+        color $primary-color
         cursor pointer
+        &:hover
+          text-decoration underline
+.party
+  display flex
+  .content
+    padding-left .1rem
+    flex 1
+    &.party
+      display flex
+      flex-direction column
+      justify-content space-around
+      padding-bottom .1rem
+    &.economic
+      display flex
+      >div
+        flex 1
 </style>
 <style lang="stylus">
 $blue = #2F86EE

vite.config.js

@@ -8,10 +8,9 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '/@': resolve(__dirname, './src'),
     },
   },
-  // build: {
-  //   base: './',
-  // },
-  // assetsDir: 'assets',
+  base: './',
+  assetsDir: 'src/assets',
 })