style(ui): 优化自检页面布局与文本展示格式

1. 调整卡片布局为纵向排列，新增对应样式类
2. 为设备位置和定检小组文本添加前缀标签
3. 修复部分样式注释与指示器高度配置

src/pages/home-new/components/selfCheck.vue

@@ -20,11 +20,11 @@
                             <text class="item-label">{{ item.serialNumber }}</text>
                             <text class="item-date">{{ item.date }}</text>
                         </view>
-                        <view class="item-row">
-                            <text class="item-label">{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{
+                        <view class="item-row-column">
+                            <view class="item-label">设备位置：{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{
                                 item.regionalName
-                            }}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</text>
-                            <text class="item-role">{{ item.role }}</text>
+                                }}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</view>
+                            <view class="item-role">定检小组：{{ item.role }}</view>
                         </view>
                     </view>
                 </view>
@@ -44,11 +44,11 @@
                             <text class="item-label">{{ item.serialNumber }}</text>
                             <text class="item-date">{{ item.date }}</text>
                         </view>
-                        <view class="item-row">
-                            <text class="item-label">{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{
+                        <view class="item-row-column">
+                            <view class="item-label">设备位置：{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{
                                 item.regionalName
-                            }}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</text>
-                            <text class="item-role">{{ item.role }}</text>
+                                }}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</view>
+                            <view class="item-role">定检小组：{{ item.role }}</view>
                         </view>
                     </view>
                 </view>
@@ -68,11 +68,11 @@
                             <text class="item-label">{{ item.serialNumber }}</text>
                             <text class="item-date">{{ item.date }}</text>
                         </view>
-                        <view class="item-row">
-                            <text class="item-label">{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{
+                        <view class="item-row-column">
+                            <view class="item-label">设备位置：{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{
                                 item.regionalName
-                            }}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</text>
-                            <text class="item-role">{{ item.role }}</text>
+                                }}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</view>
+                            <view class="item-role">定检小组：{{ item.role }}</view>
                         </view>
                     </view>
                 </view>
@@ -153,8 +153,8 @@ export default {
 <style scoped>
 .self-check-container {
     width: 100%;
-    padding: 12px;
-    background-color: #f5f7fa;
+    /* padding: 12px;
+    background-color: #f5f7fa; */
 }
 
 .self-check-header {
@@ -227,17 +227,17 @@ export default {
 
 .item-indicator.expired {
     background-color: #FF0000;
-    height: 48px;
+    height: 66px;
 }
 
 .item-indicator.urgent {
     background-color: #FFA500;
-    height: 48px;
+    height: 66px;
 }
 
 .item-indicator.normal {
     background-color: #FFD700;
-    height: 48px;
+    height: 66px;
 }
 
 .item-content {
@@ -253,6 +253,13 @@ export default {
     align-items: center;
 }
 
+.item-row-column {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
 .item-label {
     font-size: 14px;
     color: #333;

src/pages/selfCheck/index.vue

@@ -18,9 +18,9 @@
                             <text class="card-label">{{ item.serialNumber }}</text>
                             <text class="card-date">{{ item.date }}</text>
                         </view>
-                        <view class="card-row" style="justify-content: flex-start;">
-                            <text class="item-label">{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{item.regionalName}}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</text>
-                            <text class="card-role" style="margin-left: 10px;">{{ item.role }}</text>
+                        <view class="card-row-column" style="justify-content: flex-start;">
+                            <view class="card-label">设备位置：{{ item.terminlName }}{{ item.terminlName ? '/' : '' }}{{item.regionalName}}{{ item.regionalName ? '/' : '' }}{{ item.channelName }}</view>
+                            <view class="card-role">定检小组：{{ item.role }}</view>
                         </view>
                     </view>
                     <view :class="['status-tag', getStatusClass(item.colorType)]">
@@ -241,6 +241,12 @@ export default {
     justify-content: space-between;
     align-items: center;
 }
+.card-row-column {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: column;
+}
 
 .card-label {
     font-size: 14px;