样式修改

src/components/Viewer/smViewer.vue

@@ -214,7 +214,5 @@ export default {
 </script>
 <style lang="scss">
 @import "smViewer";
-.cockpitNew{
-  border: 1px red solid;
-}
+
 </style>

src/views/cockpitNew/hysy.vue

@@ -37,7 +37,7 @@ export default {
     border-width: 0px;
     position: absolute;
     left: 9px;
-    top: 100%;
+    top: 66%;
     width: 534px;
     height: 316px;
     display: flex;

src/views/cockpitNew/tdsy.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="tdsy">
+        <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>
+.tdsy {
+    border-width: 0px;
+    position: absolute;
+    left: 555px;
+    top: 753px;
+    width: 800px;
+    height: 313px;
+    display: flex;
+}
+
+.box {
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 800px;
+    height: 313px;
+    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

@@ -3,6 +3,7 @@
         <JSYD />
         <TDSC/>
         <HYSY/>
+        <TDSY/>
     </div>
 </template>
 
@@ -13,9 +14,10 @@
 import JSYD from './cockpitNew/jsyd.vue';
 import TDSC from './cockpitNew/tdsc.vue';
 import HYSY from './cockpitNew/hysy';
+import TDSY from './cockpitNew/tdsy';
 
 export default {
-    components: {JSYD ,TDSC,HYSY },
+    components: {JSYD ,TDSC,HYSY,TDSY },
     data() {
         return {};
     },