Explorar o código

修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,

yx %!s(int64=4) %!d(string=hai) anos
pai
achega
711e5b2b82
Modificáronse 1 ficheiros con 12 adicións e 5 borrados
  1. 12 5
      src/components/floorList.vue

+ 12 - 5
src/components/floorList.vue

@@ -11,7 +11,7 @@
                 <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/imgs/iconBlackTop.png' alt />
                 <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/imgs/iconLightTop.png' alt />
             </div>
-            <div class='floor-out'>
+            <div class='floor-out' :style='{ maxHeight:conHeight + "px",height:conHeight + "px" }'>
                 <!--  放开marginTop样式  -->
                 <div class='floor-center' :style='{ marginTop : marginTop }'>
                     <div
@@ -59,9 +59,10 @@ export default {
             marginTopMax: 0,
             startTime: '',
             endTime: '',
-            showNumber: 8, //需要暂时的楼层数   //TODO:
+            showNumber: 8, //需要展示的楼层数   //TODO:
             height: 39, //一个楼层的高度
-            currIndex: 0 //当前楼层在 楼层数组中的下标,上下箭头使用
+            currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
+            conHeight: 0 // floor-out 的高度
         }
     },
     props: {
@@ -98,7 +99,7 @@ export default {
             marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
         },
         init() {
-            // console.log('init')
+            console.log('init')
             if (!this.floorsArr.length) {
                 return false
             }
@@ -113,6 +114,11 @@ export default {
             if (index === -1) {
                 this.currentFloorId = this.floorIdArr[0]
             }
+            // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
+            this.conHeight = this.floorsArr.length * 37.5
+            this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
+            this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
+
             this.marginTopMax = -(this.floorIdArr.length - this.showNumber) * this.height
             this.changeFloor(0, index)
         },
@@ -231,7 +237,8 @@ export default {
         padding: 6px 4px;
         text-align: center;
         .floor-out {
-            max-height: 300px; //TODO:
+            // max-height: 300px; //TODO:
+            min-height: 38px;
             overflow: hidden;
             position: relative;
             overflow-y: auto;