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