添加了一些样式

src/components/Viewer/smViewer.scss

@@ -10,7 +10,7 @@
     height: 50%;
     position: absolute;
     left: 30%;
-    top: 7%;
+    top: 9%;
 
 }
 

src/views/cockpitNew/hysy.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="hysy">
+        <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>
+.hysy {
+    border-width: 0px;
+    position: absolute;
+    left: 9px;
+    top: 100%;
+    width: 534px;
+    height: 316px;
+    display: flex;
+}
+
+.box {
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 534px;
+    height: 316px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+</style>

src/views/cockpitNew/jsyd.vue

@@ -1,7 +1,7 @@
 <template>
-<div>
+  <div class="jsyd">
     123123
-</div>
+  </div>
 </template>
 
 <script>
@@ -31,5 +31,19 @@ export default {
 };
 </script>
 <style  scoped>
-
+.jsyd {
+  border-width: 0px;
+  position: absolute;
+  left: 9px;
+  top: 3%;
+  width: 535px;
+  height: 280px;
+  background: inherit;
+  background-color: rgba(3, 25, 67, 0.698039215686274);
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
 </style>

src/views/cockpitNew/tdsc.vue

@@ -0,0 +1,52 @@
+<template>
+<div class="tdsc">
+    1
+</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>
+.tdsc {
+    border-width: 0px;
+    position: absolute;
+    left: 9px;
+    top: 38%;
+    width: 534px;
+    height: 327px;
+    border-width: 0px;
+    width: 534px;
+    height: 327px;
+    background: inherit;
+    background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+</style>

src/views/viewer.vue

@@ -1,6 +1,8 @@
 <template>
     <div>
         <JSYD />
+        <TDSC/>
+        <HYSY/>
     </div>
 </template>
 
@@ -9,10 +11,11 @@
 
 // import JSYD from './homepage/jsyd.vue';
 import JSYD from './cockpitNew/jsyd.vue';
-
+import TDSC from './cockpitNew/tdsc.vue';
+import HYSY from './cockpitNew/hysy';
 
 export default {
-    components: {JSYD  },
+    components: {JSYD ,TDSC,HYSY },
     data() {
         return {};
     },