修复楼盘表样式Bug

qq10137383 · Jun 13, 2023 · b00197f · b00197f
1 parent 909876e
commit b00197f
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 12 deletions.
diff --git a/src/components/BuildingTable/HouseTooltip.vue b/src/components/BuildingTable/HouseTooltip.vue
@@ -19,7 +19,7 @@ export default {
     // 延时显示tooltip时间(毫秒)
     delayTime: {
       type: Number,
-      default: 500
+      default: 1000
     }
   },
   data() {
@@ -103,7 +103,7 @@ export default {
         this.house = house;
         this.show = true;
         this.adjustEdge();
-      }, this.delayTime || 500)
+      }, this.delayTime)
     },
     updateTooltip(house) {
       this.hoverState.current = house;

diff --git a/src/components/BuildingTable/README.md b/src/components/BuildingTable/README.md
@@ -287,7 +287,7 @@
 
 | 参数      | 说明                      | 类型   | 默认值 | 可选值 |
 | --------- | ------------------------- | ------ | ------ | ------ |
-| delayTime | 延时显示tooltip时间(毫秒) | Number | 500    |        |
+| delayTime | 延时显示tooltip时间(毫秒) | Number | 1000    |        |
 
 
 ```html

diff --git a/src/components/BuildingTable/renders/flex/HouseFlexRender.vue b/src/components/BuildingTable/renders/flex/HouseFlexRender.vue
@@ -49,7 +49,8 @@ export default {
   methods: {
     // 设置楼盘表内容区域布局参数
     setLayout() {
-      const hasGutter = this.$el.scrollHeight > this.$el.clientHeight;
+      const hasGutter = this.tableWidth >= this.$el.clientWidth
+        && this.$el.scrollHeight > this.$el.clientHeight;
       this.store.commit("setLayout", {
         hasGutter,
       });

diff --git a/src/components/BuildingTable/renders/table/HouseTableRender.vue b/src/components/BuildingTable/renders/table/HouseTableRender.vue
@@ -63,7 +63,8 @@ export default {
     },
     // 设置楼盘表内容区域布局参数和空楼层高度
     setLayout() {
-      const hasGutter = this.$el.scrollHeight > this.$el.clientHeight;
+      const hasGutter = this.tableWidth >= this.$el.clientWidth
+        && this.$el.scrollHeight > this.$el.clientHeight;
       const scrollLeft = this.$el.scrollLeft;
       this.store.commit("setLayout", {
         hasGutter,

diff --git a/src/components/BuildingTable/renders/table/UnitTableRender.vue b/src/components/BuildingTable/renders/table/UnitTableRender.vue
@@ -97,7 +97,9 @@ export default {
             rowspan='1'
             colspan='1'
             class='building-td__header'
-          ></td>
+          >
+            <div class="cell-fill"></div>
+          </td>
         )
         rowVNodes.push(this.renderUnitCell(unitInfo))
       })
@@ -109,7 +111,9 @@ export default {
             rowspan='1'
             colspan='1'
             class='building-td__gutter'
-          />
+          >
+            <div class="cell-fill"></div>
+          </td>
         )
       }
       return rowVNodes

diff --git a/src/components/BuildingTable/style/common.scss b/src/components/BuildingTable/style/common.scss
@@ -13,3 +13,7 @@
     vertical-align: 2px;
   }
 }
+
+.cell-fill {
+  height: 100%;
+}
diff --git a/src/components/BuildingTable/style/house.scss b/src/components/BuildingTable/style/house.scss
@@ -66,8 +66,9 @@
   }
 
   .house-cell__block-title {
-    text-decoration: underline;
     display: inline-block;
+    max-width: 100%;
+    text-decoration: underline;
   }
 
   .house-cell__block-item {
@@ -100,7 +101,10 @@
 }
 
 .floor-cell-wrap {
-  padding-right: 3px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /* table布局样式*/
@@ -112,6 +116,7 @@
 
   .building-td__floor {
     @include primary-cell;
+    height: 1px;
   }
 
   .building-td__house {

diff --git a/src/components/BuildingTable/style/unit.scss b/src/components/BuildingTable/style/unit.scss
@@ -13,13 +13,23 @@
 /* table布局样式*/
 .unit-table-render {
   .building-td__header,
-  .building-td__unit,
-  .building-td__gutter {
+  .building-td__unit {
     @include primary-cell;
+    height: 1px;
   }
 
-  .building-td__unit {
+  .building-td__gutter {
+    padding-left: 1px;
     height: 1px;
+    background-color: $primary-color;
+    border-radius: 2px;
+  }
+
+  .unit-cell-wrap {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }