测试代码

src/module/databoard/assets/index.css

@@ -11,24 +11,30 @@
 }
 
 .head {
-  height: 10%;
-
+  height: 70px;
+  margin-bottom: 24px;
+  display: flex;
 }
 
 .head_content {
-  background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
+  background: url(./img/HeadBg.png) 0px 0px no-repeat;
   background-position: center;
   width: 100%;
   height: 100%;
+  display: flex;
 }
 
 .text_date {
+  width: 144px;
+  height: 20px;
   overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 20.00px;
-  letter-spacing: 1.6666666269302368px;
-  text-align: left;
-  margin: 1% 0 0 6%
+  color: rgba(120, 174, 255, 1);
+  font-size: 14px;
+  /*font-weight: NaN;*/
+  text-align: center;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 20px 0 0 36px;
 }
 
 
@@ -66,13 +72,16 @@
 
 
 .text_car {
+  width: 106px;
+  height: 20px;
   overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 20.00px;
-  letter-spacing: 1.6666666269302368px;
-  font-family: Helvetica;
-  text-align: left;
-  margin: 1% 0 0 20%
+  color: rgba(120, 174, 255, 1);
+  font-size: 14px;
+  /*font-weight: NaN;*/
+  text-align: center;
+  white-space: nowrap;
+  line-height: 20px;
+  margin: 20px 32px 0 1602px;
 }
 
 

src/module/databoard/components/body/main-body.vue

+<template>
+  <div class="page">
+    <div class="head">
+      <div class="head_content">
+        <span class="text_date">2023-02-28&nbsp;12:00:00</span>
+        <span class="text_car">刷新时间：10s</span>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name:"MainBody",
+  data() {
+    return {
+    };
+  },
+  methods: {}
+};
+</script>
+<style scoped lang="css" src="../../assets/index.css"/>

src/module/databoard/index.vue

 <template>
   <div class="page">
-    <div class="head">
-      <div class="head_content">
-        <span class="text_date">2023-08-01</span>
-        <span class="text_time">17:18:29</span>
-        <span class="text_week">星期三</span>
-        <span class="text_title">联达供应链数据大屏</span>
-        <span class="text_car">刷新时间：10s</span>
-      </div>
-    </div>
+    <main-body>
+      <template>
         <div class="middle">
           <title-content-with-bord class="trade_left">
             <template  v-slot:title>营业情况</template >
@@ -209,6 +202,8 @@
             <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
           </div>
         </div>
+      </template>
+    </main-body>
   </div>
 </template>
 <script>
@@ -220,8 +215,11 @@ import TitleContent from "./components/container/title-content.vue";
 import NumWithRBMark from "./components/layout/num-with-r-b-mark.vue";
 import Card from "./components/card/card.vue";
 import ContainerWithBord from "./components/container/container-with-bord.vue";
+import MainBody from "./components/body/main-body.vue";
 export default {
-  components: {ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
+  components: {
+    MainBody,
+    ContainerWithBord, TitleContentWithBord, Card, NumWithRBMark, TitleContent, ContrastCard, InfoCard},
   data() {
     return {
       constants: {},