Преглед изворни кода

异常指标过长时,用户首页的表现换行了

张田田 пре 18 часа
родитељ
комит
fab536fc5d
2 измењених фајлова са 13 додато и 4 уклоњено
  1. 12 3
      miniprogram/pages/home/home.scss
  2. 1 1
      miniprogram/pages/home/home.wxml

+ 12 - 3
miniprogram/pages/home/home.scss

@@ -56,24 +56,33 @@
     font-size: 13px;
     background-color: #ffefef;
     border-radius: 6px;
-    padding: 10rpx 30rpx 10rpx 10rpx;
+    padding: 10rpx 10rpx 10rpx 10rpx;
     // height: 60px;
     font-weight: bold;
     border: 2px solid white;
     box-shadow: inset 0 0 3px rgb(255, 90, 30, 0.2);
+    box-sizing: border-box;
+    // 内容过多时限制自身宽度并允许收缩,不再向左挤压报告展示
+    flex: 0 1 auto;
+    max-width: 50%;
+    min-width: 26%;
 
     .right-box {
       height: 100%;
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: stretch; // 子项占满宽度,过长文字才会换行
       justify-content: center;
+      flex: 1 1 auto;
+      min-width: 0;
+      word-break: break-all;
     }
 
     .warn-img {
       width: 20rpx;
       height: 20rpx;
-      margin: 10rpx 15rpx 0 10rpx;
+      margin: 10rpx 10rpx 10rpx 0rpx;
+      flex-shrink: 0;
     }
   }
 }

+ 1 - 1
miniprogram/pages/home/home.wxml

@@ -61,7 +61,7 @@
         <view class="warn-box" wx:if="{{healthIndex.data.length>0}}">
           <image src="../../assets/bg/icon_warning@3x.png" class="warn-img" />
           <view class="right-box" bind:tap="tabValue">
-            <view style="margin-bottom:10rpx" wx:for="{{healthIndex.data}}" wx:key="{{item.quotaId}}">{{item}}</view>
+            <view wx:for="{{healthIndex.data}}" wx:key="{{item.quotaId}}">{{item}}</view>
           </view>
         </view>
       </view>