css

pages/statistics/statistics.vue

@@ -111,15 +111,19 @@
 								<view class="companyName">
 									{{item.installationAddressSimple}}
 								</view>
-								<!-- 离线 -->
-								<view class="state" v-if="!item.online">
-									<text class="off-line"></text>离线
-								</view>
-								<!-- 在线 -->
-								<view class="state state2" v-else>
-									<text class="on-line"></text>在线
-								</view>
-							</view>
+								
+							</view>
+							<!-- 离线 -->
+							<view class="state" v-if="!item.online">
+								<view class="dot off-line"></view>
+								<view class="text">离线</view>
+							</view>
+							<!-- 在线 -->
+							<view class="state state2" v-else>
+								<view class="dot on-line"></view>
+								<view class="text">在线</view>
+							</view>
+							
 						</view>
 						<view class="electricity">
 							<view class="electricity-item electricity-item-day">
@@ -1111,7 +1115,10 @@
 						.equipment1 {
 							color: rgba(51, 51, 51, 1);
 							font-size: 32rpx;
-							font-weight: bold;
+							font-weight: bold;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
 						}
 
 						.equipment2 {
@@ -1119,41 +1126,48 @@
 							display: flex;
 
 							.companyName {
-								width: 45%;
-								// 	white-space: nowrap;
-								//overflow: hidden;
-								// text-overflow: ellipsis;
+								width: 100%;
+									white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
 							}
 
-							.state {
-								margin-left: 12rpx;
-								display: flex;
-								align-items: center;
-								color: rgba(255, 123, 0, 1);
-
-								text {
-									margin-right: 8rpx;
-									display: inline-block;
-									width: 16rpx;
-									height: 16rpx;
-									border-radius: 999px;
-								}
-
-								.off-line {
-
-									background-color: rgba(255, 123, 0, 1);
-
-								}
-
-								.on-line {
-									background-color: rgba(0, 185, 98, 1);
-								}
-							}
+							
 
-							.state2 {
-								color: rgba(0, 185, 98, 1);
-							}
+							
 						}
+					}
+					.state {
+						width: 100%;
+						padding-right: 32rpx;
+						display: flex;
+						align-items: center;
+						color: rgba(255, 123, 0, 1);
+						text-align: right;
+					
+						.dot {
+							margin-right: 8rpx;
+							
+							width: 16rpx;
+							height: 16rpx;
+							background-color: rgba(255, 123, 0, 1);
+							border-radius: 999px;
+							margin-left: auto;
+							
+						}
+					
+						.off-line {
+					   
+							background-color: rgba(255, 123, 0, 1);
+					
+						}
+					
+						.on-line {
+							background-color: rgba(0, 185, 98, 1);
+						}
+					}
+					.state2 {
+						color: rgba(0, 185, 98, 1);
 					}
 
 					.electricity {