样式修改

src/views/cockpitNew/gdbh.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="gdbh">
+        <div class="box">
+
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() { }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped>
+.gdbh {
+    border-width: 0px;
+    position: absolute;
+    left: 1366px;
+    top: 118px;
+    width: 535px;
+    height: 280px;
+    display: flex;
+}
+
+.box {
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 13px;
+    letter-spacing: normal;
+    color: #333333;
+    text-align: center;
+    line-height: normal;
+    text-transform: none;
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 535px;
+    height: 280px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+}
+</style>

src/views/cockpitNew/stxf.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="stxf">
+        <div class="box">
+
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() { }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped>
+.stxf {
+    border-width: 0px;
+    position: absolute;
+    left: 1366px;
+    top: 411px;
+    width: 535px;
+    height: 331px;
+    display: flex;
+}
+
+.box {
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 13px;
+    letter-spacing: normal;
+    color: #333333;
+    text-align: center;
+    line-height: normal;
+    text-transform: none;
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 535px;
+    height: 280px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+}
+</style>

src/views/cockpitNew/wpjg.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="wpjg">
+        <div class="box">
+
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() { }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped>
+.wpjg {
+    border-width: 0px;
+    position: absolute;
+    left: 1366px;
+    top: 751px;
+    width: 535px;
+    height: 316px;
+    display: flex;
+}
+
+.box {
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 13px;
+    letter-spacing: normal;
+    color: #333333;
+    text-align: center;
+    line-height: normal;
+    text-transform: none;
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 535px;
+    height: 280px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    box-shadow: none;
+}
+</style>

src/views/viewer.vue

@@ -4,6 +4,8 @@
         <TDSC/>
         <HYSY/>
         <TDSY/>
+        <GDBH/>
+        <STXF/>
     </div>
 </template>
 
@@ -11,13 +13,15 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 
 // import JSYD from './homepage/jsyd.vue';
-import JSYD from './cockpitNew/jsyd.vue';
-import TDSC from './cockpitNew/tdsc.vue';
+import JSYD from './cockpitNew/jsyd';
+import TDSC from './cockpitNew/tdsc';
 import HYSY from './cockpitNew/hysy';
 import TDSY from './cockpitNew/tdsy';
+import GDBH from './cockpitNew/gdbh';
+import STXF from './cockpitNew/stxf';
 
 export default {
-    components: {JSYD ,TDSC,HYSY,TDSY },
+    components: {JSYD ,TDSC,HYSY,TDSY ,GDBH,STXF},
     data() {
         return {};
     },