refactor:抽离标题组件

ZhangXianQiang

2024-03-18 74eeaaf48df9b04062a4701cc5efe3e56b3b5245

refactor:抽离标题组件

 src/views/screen/components/screen-car/index.vue

New file
@@ -0,0 +1,14 @@
<template>
  <div class="car-container">
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

 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%;

 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);

 src/views/screen/components/wrapper-title/index.vue

New file
@@ -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>