路线样式

src/views/anfang.vue

@@ -25,8 +25,8 @@
           </div>
         </div>
         <div class="option-box operation-box">
-          <div class="btn2">编辑</div>
-          <div class="btn2">新增</div>
+          <div class="btn2" @click="showPop = true">编辑</div>
+          <div class="btn2" @click="showPop = true">新增</div>
         </div>
       </div>
     </div>
@@ -57,6 +57,66 @@
         <div class="btn3">SXT-122</div>
       </div>
     </div>
+    <div class="pop-box" v-if="showPop">
+      <div class="bg"></div>
+      <div class="pop">
+        <div class="title-box">
+          <div class="title">线路1</div>
+          <div class="style-line"></div>
+        </div>
+        <div class="roadLine">
+          <div class="btn2">SXT-122</div>
+          <div class="line"></div>
+          <div class="btn2">SXT-121</div>
+          <div class="line"></div>
+          <div class="btn2">SXT-121</div>
+          <div class="line"></div>
+          <div class="btn2">SXT-121</div>
+          <div class="line"></div>
+          <div class="btn2">SXT-121</div>
+          <div class="line"></div>
+          <div class="btn2">SXT-121</div>
+          <div class="line"></div>
+          <div class="btn2">SXT-121</div>
+        </div>
+        <div class="select-box">
+          <select @change="LYchange($event)" name="ly" id="ly">
+            <option
+              :value="item.id"
+              v-for="(item, index) in listL"
+              :key="index + 'l'"
+            >
+              {{ item.title }}
+            </option>
+          </select>
+          <select name="lc" id="lc">
+            <option
+              :value="item.id"
+              v-for="(item, index) in listR"
+              :key="index + 'l'"
+            >
+              {{ item.title }}
+            </option>
+          </select>
+        </div>
+        <div class="toSelected">
+          <div class="btn3 active">SXT-121</div>
+          <div class="btn3">SXT-121</div>
+        </div>
+        <div class="btn-box1">
+          <div class="btn2">替换巡检点</div>
+          <div class="btn2">删除巡检点</div>
+          <div class="btn2">新增巡检点</div>
+        </div>
+        <div class="btn-box2">
+          <div class="btn1">保存路线</div>
+          <div class="btn1">删除路线</div>
+        </div>
+        <div class="close" @click="showPop = false">
+          <img src="../assets/image/close.png" alt="" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -75,9 +135,22 @@ export default {
       oscName: "/EZ_AF",
       roadList: ["路线1", "路线2", "路线3"],
       roadActiveIndex: 0,
+      listL: [],
+      listR: [],
+      activeIndex: 0,
+      activeIndex2: 0,
+      showPop: false,
     };
   },
+  created() {
+    this.init();
+  },
   methods: {
+    init() {
+      let buildList = this.$store.state.buildList.slice(1);
+      this.listL = buildList;
+      this.listR = this.listL[0].child || [];
+    },
     changeOption(index) {
       this.optionActiveIndex = index;
       this.$axios
@@ -95,6 +168,15 @@ export default {
     roadClick(index) {
       this.roadActiveIndex = index;
     },
+    LYchange(e) {
+      this.activeIndex = e.target.selectedIndex;
+    },
+  },
+  watch: {
+    activeIndex(n) {
+      this.listR = this.listL[n].child || [];
+      this.activeIndex2 = 0;
+    },
   },
 };
 </script>
@@ -164,5 +246,87 @@ export default {
   .bottom {
     margin-top: 20px;
   }
+  .pop-box {
+    .bg {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+    }
+    .pop {
+      position: fixed;
+      top: 160px;
+      right: 45px;
+      width: 750px;
+      height: 457px;
+      background-image: url(../assets/image/popbg.png);
+      background-size: cover;
+      box-sizing: border-box;
+      padding: 15px 15px 20px 30px;
+      .title-box {
+        padding-right: 70px;
+      }
+      .roadLine {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        overflow-x: auto;
+        padding-bottom: 10px;
+        > div {
+          flex-shrink: 0;
+        }
+        .line {
+          width: 16px;
+          height: 1px;
+          background: #adbad0;
+          margin: auto 8px;
+        }
+      }
+      .select-box {
+        margin-top: 20px;
+        margin-left: 20px;
+        select {
+          width: 110px;
+          height: 30px;
+          border: 1px solid #b0bcd2;
+          color: #838a99;
+          font-size: 14px;
+          margin-right: 10px;
+        }
+      }
+      .toSelected {
+        margin-top: 20px;
+        padding-left: 20px;
+        display: flex;
+        > div {
+          margin-right: 12px;
+        }
+      }
+      .btn-box1 {
+        display: flex;
+        margin: 0 auto;
+        margin-top: 80px;
+        width: 400px;
+        justify-content: space-between;
+      }
+      .btn-box2 {
+        display: flex;
+        margin: 0 auto;
+        margin-top: 30px;
+        width: 300px;
+        justify-content: space-between;
+      }
+      .close {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        img {
+          width: 30px;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file