整体背景添加修改

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.inlineSuggest.showToolbar": "onHover"
+}

src/assets/less/uStyle.css

@@ -55,7 +55,12 @@
   flex: auto;
 }
 .visualization-common-border {
-  border: 1px solid #000;
   width: 100%;
   height: calc(100% - 26px);
+  border: 1px solid #000;
+  border-width: 8px 0 0 6px;
+  /* 变相设置边距 */
+  border-image: url('../visualization/moduleBdBg.png') 4 4 fill;
+  border-image-repeat: stretch;
+  position: relative;
 }

src/assets/less/uStyle.less

@@ -14,7 +14,11 @@
 .f-auto{ flex: auto; }
 
 .visualization-common-border{
-  border: 1px solid #000;
   width: 100%;
   height: calc(100% - 26px);
+  border: 1px solid #000;
+  border-width: 8px 0 0 6px; /* 变相设置边距 */
+  border-image: url('../visualization/moduleBdBg.png') 4 4 fill;
+  border-image-repeat: stretch;
+  position: relative;
 }

src/views/modules_guAn/visualization/components/commonTitle.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="visualization-common-title">
-    标题
+    <div class="module-title">{{ title }}</div>
   </div>
 </template>
 
 <script>
 export default {
   name: '',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  },
   data () {
     return {
     }
@@ -25,6 +31,15 @@ export default {
 </style>
 <style lang="less" scoped>
   .visualization-common-title{
-    height: 26px;
+    width: 100%;
+    height: 22px;
+    background: url(../../../../assets/visualization/moduleTitle.png) no-repeat left bottom;
+    background-size: 100% 10px;
+    .module-title{
+      color: #18B4C8;
+      font-style: italic; /* 设置文字为斜体 */
+      margin-left: 15px;
+      letter-spacing: 0.05em;
+    }
   }
 </style>

src/views/modules_guAn/visualization/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="visualization-container">
     <!-- 头部标题区域 -->
-    <div class="top-title-container">
-      项目
+    <div class="top-title-container u-flex-jac">
+      <div class="title-content">
+        <span class="text">高温高湿试验项目</span>
+      </div>
     </div>
     <!-- 数据内容区域 -->
     <div class="content-container u-flex">
@@ -18,7 +20,7 @@
         </div>
         <div class="left-bottom-con">
           <!-- 左下 -->
-          <running-state></running-state>
+          <test-information></test-information>
         </div>
       </div>
       <!-- 中间部分 -->
@@ -29,10 +31,10 @@
         <div class="centen-bottom-con u-flex-jab">
           <!-- 中间 -->
           <div class="center-bottom-left">
-            <test-information></test-information>
+            <running-state></running-state>
           </div>
           <div class="center-bottom-right">
-            <test-status-info></test-status-info>
+            <equipment-info></equipment-info>
           </div>
         </div>
       </div>
@@ -40,11 +42,11 @@
       <div class="right-container">
         <div class="right-top-con">
           <!-- 右上 -->
-          <equipment-info></equipment-info>
+          <mode-info></mode-info>
         </div>
         <div class="right-center-con">
           <!-- 右中 -->
-          <mode-info></mode-info>
+          <test-status-info></test-status-info>
         </div>
         <div class="right-bottom-con">
           <!-- 右下 -->
@@ -97,16 +99,43 @@ export default {
   .visualization-container{
     width: 100%;
     height: 100vh;
+    background: url(../../../assets/visualization/pageBg.png) no-repeat;
+    background-size: cover;
     // 头部标题区域
     .top-title-container{
       position: fixed;
       top: 0;
-      left: 35%;
-      right: 35%;
-      border: 1px solid #000;
+      left: 0;
+      right: 0;
+      // border: 1px solid #000;
       height: 70px;
       text-align: center;
-      line-height: 70px;
+      // line-height: 22px;
+      .title-content{
+        width: 700px;
+        height: 100%;
+        background: url(../../../assets/visualization/pageTitleBg.png) no-repeat center center;
+        background-size: auto 100%;
+        .text{
+          font-size: 24px;
+          font-weight: 1000;
+          letter-spacing: .2em;
+          text-shadow: 2px 2px 2px rgb(10, 37, 92);
+          position: relative;
+          font-family: serif;
+          &::before{
+            // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
+            content: '高温高湿试验项目';
+            position: absolute;
+            z-index: 10;
+            background-image: linear-gradient(to bottom, #ffffff, #8DD4F7);
+            -webkit-background-clip: text;
+            color: transparent;
+            // 去除集成父级样式
+            text-shadow: none;
+          }
+        }
+      }
     }
     // 数据内容区域
     .content-container{
@@ -141,11 +170,11 @@ export default {
           height: 30%;
           padding: 0 12px;
           .center-bottom-left{
-            flex: 1;
+            flex: 1.4;
             height: 100%;
           }
           .center-bottom-right{
-            flex: 1.2;
+            flex: 1;
             height: 100%;
             padding-left: 12px;
           }

src/views/modules_guAn/visualization/modules/DataCurve.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="data-curve-module">
-    <common-title></common-title>    
+    <common-title title="数据查看和提取"></common-title>    
     <div class="visualization-common-border">
 
     </div>

src/views/modules_guAn/visualization/modules/EquipmentInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="equipment-info-module">
-    <common-title></common-title>    
-    <div class="visualization-common-border">
+    <common-title title="设备基本运行情况"></common-title>    
+    <div class="">
 
     </div>
   </div>

src/views/modules_guAn/visualization/modules/ModeInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mode-info-module">
-    <common-title></common-title>    
+    <common-title title="系统模式信息"></common-title>    
     <div class="visualization-common-border">
 
     </div>

src/views/modules_guAn/visualization/modules/RunningState.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="running-state-module">
-    <common-title></common-title>    
+    <common-title title="程序运行状态"></common-title>    
     <div class="visualization-common-border">
 
     </div>

src/views/modules_guAn/visualization/modules/SurveillanceVideo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="surveillance-video-module">
-    <common-title></common-title>    
+    <common-title title="安防监控视频"></common-title>    
     <div class="visualization-common-border">
 
     </div>

src/views/modules_guAn/visualization/modules/TestInformation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="test-information-module">
-    <common-title></common-title>    
+    <common-title title="试验信息"></common-title>    
     <div class="visualization-common-border">
 
     </div>

src/views/modules_guAn/visualization/modules/TestStatusInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="test-statusInfo-module">
-    <common-title></common-title>    
+    <common-title title="试验状态信息"></common-title>    
     <div class="visualization-common-border">
 
     </div>

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="yuzhi-curve-module">
-    <common-title></common-title>    
+    <common-title title="预制曲线"></common-title>    
     <div class="visualization-common-border">
 
     </div>