pds

src/router/index.js

@@ -14,6 +14,11 @@ const routes = [
         name: "znyw",
         component: () => import("../views/lll/ZNYW.vue"),
       },
+      {
+        path: "/pds",
+        name: "pds",
+        component: () => import("../views/lll/PDS.vue"),
+      },
     ],
   },
 ];

src/views/lll/PDS.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/回路名称.png" class="title" />
+      <ul class="list">
+        <li
+          v-for="item in list"
+          :class="res == item ? 'active' : ''"
+          @click="res = item"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        "6.3KV#1破碎出线",
+        "6.3KV#1窑头出线",
+        "6.3KV#1原料#1出线",
+        "6.3KV#1原料#2出线",
+        "6.3KV#2窑头出线",
+        "6.3KV#2原料#1出线",
+        "6.3KV#2原料#2出线",
+        "6.3KV#1发电机出线(安热线)",
+        "6.3KV#主变1进线",
+        "6.3KV#主变2进线",
+      ],
+      res: "6.3KV#1破碎出线",
+    };
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 500px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 1237px;
+    height: 1484px;
+    margin-left: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+    .list {
+      margin-top: 50px;
+      list-style-type: none;
+      color: #fff;
+      font-size: 30px;
+      li {
+        width: 1128px;
+        height: 103px;
+        background-color: #123c63;
+        text-align: left;
+        line-height: 103px;
+        text-indent: 50px;
+        margin: 20px;
+        cursor: pointer;
+      }
+      .active {
+        color: #00fcff;
+      }
+    }
+  }
+}
+</style>