house

src/views/system/house/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="p-2 houselist">
+    <PageHeader>
+      <template #content>
+        <div class="houseAdressBox">
+          <span class="mr-50px">当前小区：北境碧桂园小区</span>
+          <span>小区地址：北境朝北市塔里克儿大道368号</span>
+        </div>
+        <div class="houseTypeBox flex">
+          <div
+            class="housetype"
+            :class="{
+              active: active === index
+            }"
+            @click="changeHouseType(index)"
+            v-for="(house, index) in housetypelist"
+            :key="index"
+          >
+            {{ house }}
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+    <div class="houseBody mt-10px w-full flex align-center justify-center">
+      <building></building>
+      <unit></unit>
+    </div>
+  </div>
+</template>
+<script setup name="Houselist" lang="ts">
+import building from './components/building.vue';
+import unit from './components/unit.vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+const housetypelist = ['住宅', '办公', '商用', '公寓'];
+
+const active = ref(0);
+const changeHouseType = (index: number) => {
+  active.value = index;
+};
+</script>
+
+<style lang="scss" scoped>
+.houselist {
+  flex: 1;
+  box-sizing: border-box;
+  height: calc(100vh - 84px);
+  min-height: calc(100vh - 84px);
+  .houseBody {
+    height: calc(100% - 200px);
+  }
+}
+.houseAdressBox {
+  margin-top: 25px;
+  height: 20px;
+  line-height: 20px;
+  color: rgba(102, 102, 102, 1);
+  font-size: 14px;
+}
+.houseTypeBox {
+  margin-top: 20px;
+  .housetype {
+    $activeColor: rgba(26, 117, 255, 1);
+    cursor: pointer;
+    width: 100px;
+    height: 40px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    font-size: 14px;
+    text-align: center;
+    border: 1px solid transparent;
+    margin-left: -1px;
+
+    &:hover,
+    &.active {
+      color: $activeColor;
+      border-bottom-color: $activeColor;
+    }
+  }
+}
+</style>