输入输出块完成盒子切换

src/views/dashboard/index.vue

@@ -1,7 +1,10 @@
 <template>
     <div class="container-bg">
         <el-container class="main-layout">
-            <el-aside class="left-plate"><tree-list /></el-aside>
+            <el-aside class="left-plate">
+                menu
+                <tree-list />
+            </el-aside>
             <el-container class="right-plate">
                 <el-header class="main-top">Header</el-header>
                 <el-main class="main-cont">
@@ -24,7 +27,6 @@
                                                 <span>{{ item.desc }}</span>
                                             </div>
                                         </template>
-
                                     </div>
                                     <div class="inBoxRight">
                                         <!-- 导航栏 -->
@@ -36,12 +38,22 @@
                                                 </p>
                                             </template>
                                         </div>
+                                        <!-- 输入输出控制块 -->
+                                        <div v-if="insideOrOutside">
+                                            <!-- 导航栏 -->
+                                            <div>
+                                                <div class="caseNavBox">
+                                                    <template v-for="(item, index) in inOrOutList">
+                                                        <span :class="['insideCard', { sective: selectedIndexOne === index }]"
+                                                            @click="boxChange(item, index)">
+                                                            {{ item.name }}
+                                                        </span>
+                                                    </template>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-                                <!-- <span slot="footer" class="dialog-footer">
-                    <el-button @click="detailsModal = false">取 消</el-button>
-                    <el-button type="primary" @click="detailsModal = false">确 定</el-button>
-                </span> -->
                             </el-dialog>
                         </div>
                     </div>
@@ -93,9 +105,33 @@ export default {
                 }
             ],
             selectedIndex: 0,//选中的背景
+            selectedIndexOne: 0,//选中的背景1
             ceshi: "500px",
             modelLeftList: [],//模态框内列表
             stationCid: "",
+            insideOrOutside: false,//输入输出控制块盒子
+            inOrOutList: [
+                {
+                    name: "关联图",
+                    class: "puts"
+                },
+                {
+                    name: "SV发送",
+                    class: "svgo"
+                },
+                {
+                    name: "SV接收",
+                    class: "svout"
+                },
+                {
+                    name: "GOOSE发送",
+                    class: "goosego"
+                },
+                {
+                    name: "GOOSE接收",
+                    class: "gooseout"
+                }
+            ]
         };
     },
 
@@ -109,6 +145,12 @@ export default {
     methods: {
         goUrl(item, index) {
             this.selectedIndex = index;
+            console.log(item,'item1');
+            if(item.name == "输入输出控制块"){
+                this.insideOrOutside = true
+            }else{
+                this.insideOrOutside = false
+            }
             // 执行你的跳转逻辑
         },
         // 拿到首页左侧站点
@@ -130,12 +172,21 @@ export default {
         // 切换盒子
         insideBox(row) {
             console.log(row, 'row');
+        },
+        // 输入与输出控制块切换盒子
+        boxChange(row, num) {
+            this.selectedIndexOne = num
         }
     },
 }
 </script>
 
 <style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
 /* 模态框内左侧盒子 */
 .inBoxLeft {
     width: 320px;
@@ -144,7 +195,10 @@ export default {
     text-align: center;
     overflow-y: auto;
 }
-
+.inBoxRight{
+    width: 1100px;
+    height: 550px;
+}
 .inDetailsBox {
     margin-top: 10px;
     display: flex;
@@ -166,7 +220,12 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    cursor: pointer;
+}
 
+/* 名称和信息 */
+.leftMes:hover {
+    background-color: beige;
 }
 
 .leftMes span {
@@ -186,9 +245,11 @@ export default {
 /* 内导航栏 */
 .tabCard {
     width: 100px;
-    height: 25px;
-    margin: 20px 0;
+    height: 20px;
+    margin: 20px auto;
     cursor: pointer;
+    font-size: 12px;
+    line-height: 20px;
 }
 
 .tabCard:hover {
@@ -197,16 +258,18 @@ export default {
 
 .active {
     width: 100px;
-    height: 25px;
+    height: 20px;
     background-color: blue;
     color: white;
     border-radius: 20px;
+    font-size: 12px;
+    line-height: 20px;
 }
 
 /* 内导航栏盒子 */
 .navigationBox {
     width: 850px;
-    height: 30px;
+    height: 25px;
     border: 1px solid blue;
     text-align: center;
     line-height: 30px;
@@ -214,5 +277,41 @@ export default {
     display: flex;
     justify-content: space-around;
     align-items: center;
+    margin: 0 auto;
+}
+
+/* 输入与输出控制块盒子导航栏 */
+.caseNavBox {
+    width: 1100px;
+    height: 25px;
+    line-height: 30px;
+    border-bottom: 1px solid blue;
+    padding-bottom: 28px;
+}
+
+.insideCard {
+    display: inline-block;
+    width: 80px;
+    height: 20px;
+    cursor: pointer;
+    font-size: 12px;
+    text-align: center;
+    line-height: 20px;
+}
+
+.insideCard:hover {
+    color: skyblue;
+}
+
+.sective {
+    display: inline-block;
+    width: 80px;
+    height: 20px;
+    background-color: blue;
+    color: white;
+    border-radius: 20px;
+    font-size: 12px;
+    text-align: center;
+    line-height: 20px;
 }
 </style>