全线设备监测站点位置及图标修改

src/layout/header-aside/components/line-header/index.vue

 <template>
   <div class="line-warp" >
     <div style="display:flex;" :class="stationList.length<=20?'isOne':''">
-        <img class="line-img" src="../../imgs/car.png" alt="">
+<!--        <img class="line-img" src="../../imgs/car.png" alt="">-->
         <div class="select-warp" v-if='flag'>
             <!-- <select class="line-select" name="" id="">
               <option  v-for="item in options"  :key="item.value" :value="item.value">{{item.label}} </option>
             </select> -->
+            <div class="select-title">选择区域</div>
             <el-select v-if="type==2" class="line-select" v-model="lineId" placeholder="" @change = "lineChange">
               <el-option  v-for="item in lineList" :key="item.id"  :label="item.name" :value="item.id"></el-option>
             </el-select>
@@ -15,9 +16,13 @@
         </div>
       <div class="line-road1"  v-if="stationList.length<=20">
         <div class="line1">
-          <div class="warp-item" v-for="item in stationList" :key="item.id">
+<!--          <div class="warp-item" v-for="item in stationList" :key="item.id">
             <div class="line-point"  :class="stationId==item.id ? 'active':''"  @click="pointHandel(item)"></div>
             <div class="line-title"  :class="stationId==item.id ? 'title-active':''">{{item.title}}</div>
+          </div>-->
+          <div class="warp-item-box" v-for="item in stationList" :key="item.id">
+<!--            <div class="line-point"  :class="stationId==item.id ? 'active':''"  @click="pointHandel(item)"></div>-->
+            <div class="line-title-box"  :class="stationId==item.id ? 'title-active-box':''" @click="pointHandel(item)">{{item.title}}</div>
           </div>
         </div>
       </div>
@@ -187,7 +192,7 @@ export default {
 
 <style lang="scss" scoped>
 .line-warp {
-  height:105px;
+  height:60px;
   background-image: url(../../imgs/bg-b.png);
   background-size: 100% 100% !important;
   padding: 0 15px;
@@ -198,6 +203,14 @@ export default {
     height: 25px;
     padding-top:5px ;
   }
+  .select-warp{
+    margin-top: -17px;
+  }
+  .select-title{
+    color: #FFFFFF;
+    font-size: 12px;
+    text-indent: 10px;
+  }
   .line-select {
     width: 100px;
     height: 25px;
@@ -233,7 +246,8 @@ export default {
   }
   .line-road1 {
     width: 88.5vw;
-    padding: 15px 0 0 20px;
+    height: 20px;
+    padding: 6px 0 0 20px;
     .line1 {
       display: flex;
       width: 100%;
@@ -250,6 +264,29 @@ export default {
 
      
       }
+
+      .warp-item-box{
+        height: 20px;
+        width: 300px;
+        line-height: 20px;
+        text-align: center;
+        margin-right: 10px;
+        color: white;
+        font-size: 12px;
+        position: relative;
+        background: #0078CE;
+        .line-title-box {
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          opacity: 0.8;
+          cursor: pointer;
+        }
+        .title-active-box {
+          background: #11aaf3;
+          opacity: 1;
+        }
+      }
     }
   }
   .line-road2 {