整体简单排版布局

src/components/MonitorComponents/MonitorCard/mode4.vue

+<template>
+<div class="card-wrapper">
+  <div class="card-title" :style="`color:${color};background-image:url(${require('@/assets/images/mode4-bg.png')})`">
+    <img v-if="icon" :src="icon"/>
+    {{title}}
+  </div>
+  <div class="card-content">
+    <slot />
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Mode4',
+  props: {
+    icon: {},
+    title: {
+      type: String,
+      default: '标题',
+    },
+    color: {
+      type: String,
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.card-wrapper
+  padding 0 !important
+  .card-title
+    display flex
+    align-items center
+    color #fff
+    font-size 1.2rem
+    font-weight bold
+    height 3rem
+    padding 0 0.5rem
+    background-size 90% 70%
+    background-position left center
+    background-repeat no-repeat
+    background-color #063a6f
+    >img
+      width 1.4rem
+      margin-right 0.5rem
+  .card-content
+    background #052749
+    padding 1rem
+</style>

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -117,7 +117,7 @@ export default {
     height 100%
     top 0
     left 0
-    animation shine 2.5s linear reverse infinite
+    // animation shine 2.5s linear reverse infinite
   >p
     text-shadow 0 0.2rem 0.4rem #25e7f6
     background-clip text
@@ -125,6 +125,8 @@ export default {
     color #25e7f6
     -webkit-text-fill-color transparent
     background-image linear-gradient(to bottom, #fff, #25e7f6)
+    z-index 10
+    padding-bottom 1rem
 @keyframes shine {
   0% {
     opacity 1

src/views/main.vue

@@ -2,37 +2,35 @@
   <m-grid
     :template="[
       'title title title',
-      'box1 . box4',
-      'box1 . box3',
-      'box2 box2 box3',
+      'box1 . box5',
+      'box2 . box5',
+      'box3 . box6',
+      'box4 . box6',
     ]"
-    columns="1fr 2fr 1fr"
-    rows="4rem 1fr 1fr 1fr"
-    gap="0.8rem"
+    columns="1fr 2.5fr 1fr"
+    rows="5rem 1fr 2fr 1fr 2fr"
+    gap="0"
     :bgImg="require('@/assets/images/stars-bg.png')"
-    style="paddingTop: 0"
+    style="padding: 0"
   >
-    <m-title area="title" hideDate hideTime :bgImg="require('@/assets/images/title-bg.png')">测试专题</m-title>
-    <m-card area="box1" title="题目">
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia fugit dicta explicabo blanditiis dolorum ratione aliquid, consequuntur facere ex saepe consectetur! At, accusamus fuga placeat vero soluta facilis odio esse.
+    <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
+    <m-card area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
     </m-card>
-    <m-card area="box2">
-      box2
+    <m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
     </m-card>
-    <m-card area="box3">
-      abc
+    <m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
     </m-card>
-    <m-card area="box4">
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint pariatur quaerat hic consectetur qui omnis, exercitationem quo, molestias magnam aperiam asperiores non modi officiis quod delectus temporibus iusto necessitatibus quam.
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus animi fugiat officiis facere inventore quisquam assumenda aliquid, nulla quam, voluptate possimus. Cum ea possimus mollitia animi nemo at! Totam, porro?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus deserunt reiciendis iure ipsum asperiores dicta nostrum veritatis impedit voluptatum ducimus quia, eius incidunt sequi blanditiis, explicabo fuga error perspiciatis a?
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint totam minima et commodi, doloremque veritatis ex, reiciendis nesciunt quaerat eligendi ullam cupiditate deleniti quisquam. Sapiente error commodi iusto accusamus minima.
+    <m-card area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
+    </m-card>
+    <m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
+    </m-card>
+    <m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
     </m-card>
   </m-grid>
 </template>
 
 <script>
 export default {
-  name: 'Test',
+  name: 'Main',
 }
 </script>