初步改造

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

 <template>
-  <div class="card-wrapper">
+  <div class="card-wrapper" :class="{ 'no-bg': noBg }">
     <div class="card-title">
-      {{ title }}
-      <img class="tri" src="@/assets/images/modal-head-tri.png" />
-      <img class="tri" src="@/assets/images/modal-head-tri.png" />
+      <p>
+        {{ title }}
+      </p>
     </div>
     <div class="card-content">
+      <span class="border" />
+      <span class="border" />
       <slot />
     </div>
   </div>
@@ -13,25 +15,18 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import flag from '@/assets/images/card-model2-flag.png'
 
-export interface AdditionProp {
-  name?: string
-  value?: number
-  unit?: string
-}
 export default defineComponent({
-  name: 'Mode3',
+  name: 'Mode1',
   props: {
     title: {
       type: String as PropType<string>,
       required: true,
     },
-  },
-  setup() {
-    return {
-      flag,
-    }
+    noBg: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
 })
 </script>
@@ -39,36 +34,49 @@ export default defineComponent({
 <style scoped lang="stylus">
 @import '../main.styl'
 .card-wrapper
-  $full()
+  &.no-bg
+    .card-title
+      margin-bottom 0
+    .card-content
+      background transparent
   .card-title
     display flex
-    background linear-gradient(to bottom, transparent, rgba(0,148,255,.3))
-    position relative
-    color #D0EBEC
-    font-family $font-zcool
-    font-size $card-title-size
-    height .2rem
-    padding-left .2rem
     align-items center
-    font-size .13rem
+    background linear-gradient(to right, rgba(59,85,102,.8), transparent)
+    position relative
+    border-bottom .01rem solid rgba(105,110,114,.15)
+    margin-bottom .05rem
+    &:before
+      content ''
+      display block
+      position absolute
+      left 0
+      width .02rem
+      height 60%
+      background #FADB71
+    >p
+      color $card-title-color
+      font-size $card-title-size
+      font-weight bold
+      margin 0
+      margin-left .1rem
+  .card-content
+    position relative
     box-sizing border-box
-    border-bottom .01rem solid $primary-border
-    .tri
+    background rgba(105,110,114,.15)
+    padding .05rem .08rem
+    &.no-bg
+      background transparent
+    >.border
+      display block
       position absolute
+      top 0
       left 0
-      width .2rem
+      bottom 0
+      width .01rem
       &:nth-of-type(2)
         left auto
         right 0
-        transform rotate(180deg)
-  .card-content
-    display flex
-    flex-direction column
-    justify-content space-around
-    position relative
-    box-sizing border-box
-    padding .02rem .05rem
-    overflow hidden !important
     >div
       $full()
 </style>

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

+<template>
+  <div class="card-wrapper">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ModeBorder2',
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../main.styl'
+.card-wrapper
+  $blur()
+  box-sizing border-box
+  background rgba(29,42,65,.9)
+  display flex
+  flex-direction column
+</style>

src/components/MyComponent/MyCard/my-card.vue

@@ -15,9 +15,10 @@ import mode1 from './mode-1.vue'
 import mode2 from './mode-2.vue'
 import mode3 from './mode-3.vue'
 import modeBorder from './mode-border.vue'
+import modeBorder2 from './mode-border2.vue'
 import '../main.styl'
 
-type ModeType = '1' | '2' | '3' | 'border'
+type ModeType = '1' | '2' | '3' | 'border' | 'border2'
 
 export default defineComponent({
   name: 'MyCard',
@@ -57,6 +58,8 @@ export default defineComponent({
           return mode3
         case 'border':
           return modeBorder
+        case 'border2':
+          return modeBorder2
         default:
           return mode1
       }

src/view/left/manage-basic.vue

 <template>
-  <m-card mode="border">
-    <m-card class="card" title="管理基数">
+  <m-card mode="border2">
+    <m-card class="card" mode="3" title="管理基数">
       <div class="basic">
         <div v-for="item in basicList" :key="item.name">
-          <p>
-            <img :src="item.icon" />
-            {{ item.name }}
-          </p>
+          <p>{{ item.name }}</p>
           <p>
             <m-count
               class="count"
@@ -16,9 +13,10 @@
             <span>{{ item.unit }}</span>
           </p>
         </div>
+        <img src="@/assets/images/manage-basic.png" />
       </div>
     </m-card>
-    <m-card class="card" title="指挥体系">
+    <m-card class="card" mode="2" no-bg title="指挥体系">
       <div class="command">
         <div class="flag">
           <img src="@/assets/images/wangge.png" />
@@ -35,12 +33,8 @@
         </div>
       </div>
     </m-card>
-    <m-card class="card" title="网格力量">
+    <m-card class="card" mode="2" no-bg title="网格力量">
       <div class="table">
-        <div>
-          <p>部门</p>
-          <p>人员</p>
-        </div>
         <div v-for="(item, i) in gridList" :key="i">
           <p>{{ item.department }}</p>
           <p>{{ item.persons }}</p>
@@ -56,8 +50,9 @@ import pic1 from '@/assets/images/pic1.png'
 import pic2 from '@/assets/images/pic2.png'
 import pic3 from '@/assets/images/pic3.png'
 import pic4 from '@/assets/images/pic4.png'
-import avatar1 from '@/assets/images/avatar1.png'
-import avatar2 from '@/assets/images/avatar2.png'
+import avatar3 from '@/assets/images/avatar3.png'
+import avatar4 from '@/assets/images/avatar4.png'
+import avatar5 from '@/assets/images/avatar5.png'
 import store from '@/store'
 
 export default defineComponent({
@@ -107,17 +102,17 @@ export default defineComponent({
       } = stationInfo.value
       return [
         {
-          img: avatar1,
+          img: avatar3,
           name: gridId,
           type: '网格长',
         },
         {
-          img: avatar2,
+          img: avatar4,
           name: viceGridId,
           type: '副网格长',
         },
         {
-          img: avatar1,
+          img: avatar5,
           name: sheriffId,
           type: '警长',
         },
@@ -173,18 +168,26 @@ export default defineComponent({
     flex 1
 .basic
   $full()
-  display flex
-  flex-direction column
-  justify-content space-around
-  padding .05rem 0
+  position relative
+  $center()
+  >img
+    height 80%
   >div
-    display flex
-    align-items center
-    justify-content space-between
-    height 22%
-    background linear-gradient(to right, rgba(30,251,255,.2), transparent)
-    border-left .02rem solid $secondary-color
-    padding 0 .2rem
+    position absolute
+    &:nth-of-type(1)
+      top .1rem
+      left .3rem
+      text-align right
+    &:nth-of-type(2)
+      top .1rem
+      right .3rem
+    &:nth-of-type(3)
+      bottom .1rem
+      left .3rem
+      text-align right
+    &:nth-of-type(4)
+      bottom .1rem
+      right .3rem
     img
       width .26rem
       height @width
@@ -227,23 +230,15 @@ export default defineComponent({
       span
         color #ccc
 .table
-  border .01rem solid $blue
+  display flex
+  flex-direction column
+  justify-content space-around
+  $full()
   >div
     display flex
-    background $table-bg(.15)
-    &:first-child
-      background $table-bg()
-    &+div
-      border-top inherit
-    p
-      flex 1
-      line-height 2
-      padding 0 .05rem
-      overflow hidden
-      text-overflow ellipsis
-      white-space nowrap
-      &+p
-        border-left .01rem solid $blue
-      &:first-child
-        flex 0.4
+    justify-content space-between
+    padding .03rem .1rem
+    background rgba(70,83,97,.4)
+    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .03rem
 </style>

src/view/right/convenient.vue

 <template>
-  <m-card title="便民设施">
+  <m-card mode="3" title="便民设施">
     <div>
       <m-sub>为老服务</m-sub>
       <div class="old">

src/view/right/duty-analysis.vue

 <template>
-  <m-card title="勤务分析">
+  <m-card title="勤务分析" mode="3">
     <div class="nav">
       <div>
         <Tabs :list="tabs" horizontal @select="curTab = $event" />

src/view/right/duty.vue

 <template>
-  <m-card title="勤务">
+  <m-card title="勤务" mode="3">
     <Brief class="brief" :list="summary" />
     <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
     <div class="details">

src/view/right/public-work.vue

 <template>
   <div class="public-work">
-    <m-card mode="border">
+    <m-card mode="border2">
       <div class="convnient"><Convenient /></div>
       <div class="beauty"><BeautyHome /></div>
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <div class="duty"><Duty /></div>
       <div class="neighbor"><BussinessEntry /></div>
     </m-card>
-    <m-card mode="border">
+    <m-card mode="border2">
       <div class="analysis"><DutyAnalysis /></div>
       <!-- <div class="task"><KeyTask /></div> -->
     </m-card>