样式调整

src/views/cockpit/common/Title.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="title">
+        <div class="icon"></div>
+        <span>{{ title }}</span>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    props: {
+        title: {
+            type: String,
+            default: '标题',
+        },
+
+    },
+    data() {
+        return {
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() { }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style lang="scss" scoped>
+
+.title {
+    border-width: 0px;
+    line-height: 3.5vh;
+    height: 4vh;
+    background: no-repeat;
+    background-size: 100%;
+    background-image: url("/static/images/overview/titlebox.gif");
+
+    span {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bold;
+        margin-left: 3vw;
+    }
+}
+</style>

src/views/cockpit/jcbd.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="jcbd">
-        <div class="title">
-            <div class="icon"></div>
-            <span>基础本底</span>
-        </div>
+
+        <Title :title="'基础本底'" ></Title>
         <div class="content">
             <div class="item" v-for="(item, index) in obj">
                 <div class="icon">
@@ -25,9 +23,10 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
+import Title from './common/Title.vue';
 
 export default {
-    components: {},
+    components: { Title },
     data() {
         return {
             obj: [
@@ -123,22 +122,6 @@ export default {
 
 }
 
-.title {
-    border-width: 0px;
-    width: 100%;
-    height: 40px;
-    background: no-repeat;
-    background-image: url("/static/images/overview/titlebox.gif");
-
-    span {
-        color: #fff;
-        font-size: 14px;
-        font-weight: bold;
-        position: relative;
-        bottom: 1.8rem;
-        right: 1rem;
-    }
-}
 
 
 .content {