house

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="UnitBox">
+    <div class="Unit_top flex align-center justify-between">
+      <div>
+        <span class="text-size-16px text-color-black text-widget-bold mr-30px">
+          <strong>B栋</strong>
+        </span>
+        <span class="mr-30px">楼栋朝向:西南</span>
+        <span class="mr-30px">楼高：30米</span>
+        <span class="mr-30px">楼栋结构：框架 </span>
+      </div>
+      <div class="rightActions">
+        <span class="mr-20px" @click="handleAddHouse">+增加房屋</span>
+        <span class="mr-20px">收费标准设置</span>
+        <span>删除</span>
+      </div>
+    </div>
+    <div class="UnitBody">
+      <TableUnit></TableUnit>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TableUnit from './components/table.vue';
+const router = useRouter();
+function handleAddHouse() {
+  console.log('add house');
+  router.push({
+    path: '/house/addHouse'
+  });
+}
+</script>
+
+<style scoped lang="scss">
+$primary_color: #1978fe;
+.UnitBox {
+  flex: 1;
+  height: 100%;
+  max-width: 100%;
+  border-radius: 2px;
+  font-size: 14px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .Unit_top {
+    padding: 20px;
+    height: 60px;
+    color: rgba(102, 102, 102, 1);
+    .rightActions {
+      color: $primary_color;
+    }
+  }
+  .UnitBody {
+    flex: 1;
+  }
+}
+</style>