house

src/views/system/house/components/building.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="BuildingBox">
+    <div class="buildingheader flex align-center justify-between">
+      <div>楼栋</div>
+      <div>
+        <span class="pointer" @click="handleAddBuilding">+增加楼栋</span>
+      </div>
+    </div>
+    <ul>
+      <li
+        v-for="(item, index) in buildingList"
+        :class="{
+          active: index === activeId
+        }"
+        :key="index"
+        @click="checkBuilding(index)"
+      >
+        <div class="buildingname">{{ item.name }}</div>
+        <div class="buildactions flex align-center justify-around">
+          <el-icon class="pointer hover-color-blue"><Setting /></el-icon>
+          <el-icon class="pointer hover-color-red"><Delete /></el-icon>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const router = useRouter();
+const activeId = ref(0);
+const buildingList = ref([
+  {
+    id: 1,
+    name: 'a栋'
+  },
+  {
+    id: 2,
+    name: 'b栋'
+  },
+  {
+    id: 3,
+    name: 'c栋'
+  }
+]);
+const checkBuilding = (index: number) => {
+  activeId.value = index;
+};
+
+const handleAddBuilding = () => {
+  router.push({
+    path: '/house/addbuilding'
+  });
+};
+</script>
+
+<style scoped lang="scss">
+$primary_color: #1978fe;
+.BuildingBox {
+  width: 220px;
+  height: 100%;
+  font-size: 14px;
+  background-color: #fff;
+  border-radius: 2px;
+  color: rgba(0, 0, 0, 1);
+  margin-right: 10px;
+  .buildingheader {
+    height: 60px;
+    line-height: 60px;
+    padding: 0 15px;
+    border-bottom: 1px solid #f2f2f2;
+    span {
+      color: $primary_color;
+    }
+  }
+
+  li {
+    height: 45px;
+    line-height: 45px;
+    color: rgba(16, 16, 16, 1);
+    position: relative;
+    cursor: pointer;
+    border-bottom: 1px solid #f2f2f2;
+    .buildingname {
+      text-align: center;
+      width: 100%;
+      padding: 0 20px 0 0;
+    }
+    .buildactions {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 75px;
+      font-size: 15px;
+      padding: 15px 0;
+      padding-right: 10px;
+      color: rgba(153, 153, 153, 1);
+    }
+
+    &.active {
+      color: $primary_color;
+      border-bottom: 1px solid $primary_color;
+    }
+  }
+}
+</style>