From 74eeaaf48df9b04062a4701cc5efe3e56b3b5245 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 18 三月 2024 14:34:20 +0800
Subject: [PATCH] refactor:抽离标题组件

---
 src/views/screen/components/wrapper-title/index.vue    |   40 ++++++++++++++++++++
 src/views/screen/components/screen-car/index.vue       |   14 +++++++
 src/views/screen/components/screen-detection/index.vue |   29 +++-----------
 src/views/screen/components/screen-face/index.vue      |   30 +++------------
 4 files changed, 66 insertions(+), 47 deletions(-)

diff --git a/src/views/screen/components/screen-car/index.vue b/src/views/screen/components/screen-car/index.vue
new file mode 100644
index 0000000..6389d59
--- /dev/null
+++ b/src/views/screen/components/screen-car/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="car-container">
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-detection/index.vue b/src/views/screen/components/screen-detection/index.vue
index 714358d..923c948 100644
--- a/src/views/screen/components/screen-detection/index.vue
+++ b/src/views/screen/components/screen-detection/index.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="detection-container">
-    <div class="title-container">
-      <span class="title">杩愯鐩戞帶鏁版嵁</span>
-    </div>
+    <wrapper-title :title="'杩愯鐩戞帶鏁版嵁'"></wrapper-title>
+
     <div class="detection-content">
       <div class="water-item">
         <dv-water-level-pond :config="config1" style="width:100px;height:100px" />
@@ -29,7 +28,11 @@
 </template>
 
 <script>
+import WrapperTitle from '../wrapper-title/index'
 export default {
+  components: {
+    WrapperTitle
+  },
   data() {
     return {
       config1: {
@@ -58,26 +61,6 @@
 </script>
 
 <style lang="scss" scoped>
-.title-container {
-  background-image: url("../../../../assets/images/screen/title_bg.png");
-  background-size: 231px 100%;
-  background-repeat: no-repeat;
-  height: 38px;
-  width: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-
-  .title {
-    margin-left: 20px;
-    margin-top: -2px;
-    color: #fff;
-    letter-spacing: 2px;
-    font-size: 20px;
-    font-style: italic;
-  }
-}
 
 .detection-content {
   width: 100%;
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
index 0f4a90c..86f9029 100644
--- a/src/views/screen/components/screen-face/index.vue
+++ b/src/views/screen/components/screen-face/index.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="face-container">
-    <div class="title-container">
-      <span class="title">浜鸿劯鏁版嵁瓒嬪娍</span>
-    </div>
+    <wrapper-title :title="'浜鸿劯鏁版嵁瓒嬪娍'"></wrapper-title>
+
     <div class="face-content">
       <div class="data-plane">
         <dv-border-box-13 class="plane">
@@ -48,10 +47,14 @@
 </template>
 
 <script>
+import WrapperTitle from '../wrapper-title/index'
 import * as echarts from 'echarts';
 let lineChart = null;
 export default {
   name: 'ScreenFace',
+  components: {
+    WrapperTitle
+  },
   data() {
     return {
       dataList: {
@@ -137,27 +140,6 @@
 </script>
 
 <style lang="scss" scoped>
-.title-container {
-  background-image: url("../../../../assets/images/screen/title_bg.png");
-  background-size: 231px 100%;
-  background-repeat: no-repeat;
-  height: 38px;
-  width: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-
-  .title {
-    margin-left: 20px;
-    margin-top: -2px;
-    color: #fff;
-    letter-spacing: 2px;
-    font-size: 20px;
-    font-style: italic;
-  }
-}
-
 .face-content {
   background: rgba(67, 102, 155, 0.3);
   border: 1px solid rgba(47, 91, 157, 0.8);
diff --git a/src/views/screen/components/wrapper-title/index.vue b/src/views/screen/components/wrapper-title/index.vue
new file mode 100644
index 0000000..9e7593f
--- /dev/null
+++ b/src/views/screen/components/wrapper-title/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="title-container">
+    <span class="title">{{ title }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WrapperTitle',
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title-container {
+  background-image: url("../../../../assets/images/screen/title_bg.png");
+  background-size: 231px 100%;
+  background-repeat: no-repeat;
+  height: 38px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+  .title {
+    margin-left: 20px;
+    margin-top: -2px;
+    color: #fff;
+    letter-spacing: 2px;
+    font-size: 20px;
+    font-style: italic;
+  }
+}
+</style>
\ No newline at end of file

--
Gitblit v1.8.0