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