办事处

liuqimichale
1 parent 0e3a2706
Showing 6 changed files with 90 additions and 2 deletions
src/assets/img/busy-type.png
src/assets/img/idle-type.png
src/assets/img/nomal-type.png
src/assets/img/office-icon.png
src/assets/img/officeactive-icon.png
src/views/mapsection.vue
@@ -30,7 +30,15 @@
           </div>
         </li>
       </ul>
-      <div class="flexfm" style="background: #f00"></div>
+      <ul class="type-wrap">
+        <li>紧张</li>
+        <li>正常</li>
+        <li>空闲</li>
+      </ul>
+      <ul class="park-wrap">
+        <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
+      </ul>
+      <div class="flexfm" ></div>
     </div>
 </template>
@@ -42,7 +50,32 @@ export default {
       parkingtotal: '7338',
       membertotal: '738',
       incometotal: '1156738',
-      ordertotal: '6738'
+      ordertotal: '6738',
+      parkList: [
+        {name:'西局街道办事处12321312312312',id:'1'},
+        {name:'西局街道办事处',id:'2'},
+        {name:'西局街道办事处',id:'3'},
+        {name:'西局街道办事处',id:'4'},
+        {name:'西局街道办事处',id:'5'},
+        {name:'西局街道办事处',id:'6'},
+        {name:'西局街道办事处',id:'7'},
+        {name:'西局街道办事处',id:'8'},
+        {name:'西局街道办事处',id:'9'},
+        {name:'西局街道办事处',id:'10'},
+        {name:'西局街道办事处',id:'11'},
+        {name:'西局街道办事处',id:'12'},
+
+      ],
+      currentIndex:0
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    currentPark(item, index) {
+      console.log(item)
+      this.currentIndex = index
     }
   }
 }
@@ -53,6 +86,7 @@ export default {
     display: flex;
     padding-top: 17px;
     padding-bottom: 18px;
+    background:rgba(0,45,140,.6);
       li{
       flex: 1;
       height: 45px;
@@ -90,4 +124,58 @@ export default {
         }
     }
   }
+  .type-wrap{
+    padding-left: 10px;
+    position: absolute;
+    left: 11px;
+    bottom: 11px;
+    background-color: rgba(10,52,140,.8);
+    li{
+      float: left;
+      height: 20px;
+      line-height: 20px;
+      margin-right: 10px;
+      padding-left: 12px;
+      font-size: 12px;
+      color:rgba(255,255,255,.7);
+      background-repeat: no-repeat;
+      background-position: 0 center;
+      &:nth-of-type(1){
+        background-image: url("../assets/img/busy-type.png");
+      }
+      &:nth-of-type(2){
+        background-image: url("../assets/img/nomal-type.png");
+      }
+      &:nth-of-type(3){
+        background-image: url("../assets/img/idle-type.png");
+      }
+    }
+  }
+  .park-wrap{
+    width: 120px;
+    height: 124px;
+    position: absolute;
+    right: 11px;
+    bottom: 11px;
+    background-color: #0D3689;
+    font-size: 12px;
+    overflow-y: auto;
+    li{
+      padding-left: 26px;
+      height: 20px;
+      line-height: 20px;
+      color:rgba(255,255,255,.7);
+      background-image:url("../assets/img/office-icon.png");
+      background-repeat: no-repeat;
+      background-position: 9px center;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+    .current-active{
+      color:rgba(255,255,255,1);
+      background-image:url("../assets/img/officeactive-icon.png");
+    }
+  }
 </style>