Parcourir la source

style: 优化自检页面的样式与布局

调整了多处间距、字体大小和圆角参数,移除冗余的返回头部组件代码,统一页面视觉风格并简化样式代码
huoyi il y a 1 mois
Parent
commit
dfb7d853e8
2 fichiers modifiés avec 35 ajouts et 77 suppressions
  1. 18 18
      src/pages/home-new/components/selfCheck.vue
  2. 17 59
      src/pages/selfCheck/index.vue

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

@@ -110,7 +110,7 @@ export default {
110
 <style scoped>
110
 <style scoped>
111
 .self-check-container {
111
 .self-check-container {
112
     width: 100%;
112
     width: 100%;
113
-    padding: 16px;
113
+    padding: 12px;
114
     background-color: #f5f7fa;
114
     background-color: #f5f7fa;
115
 }
115
 }
116
 
116
 
@@ -118,28 +118,28 @@ export default {
118
     display: flex;
118
     display: flex;
119
     justify-content: space-between;
119
     justify-content: space-between;
120
     align-items: center;
120
     align-items: center;
121
-    margin-bottom: 16px;
121
+    margin-bottom: 12px;
122
 }
122
 }
123
 
123
 
124
 .header-title {
124
 .header-title {
125
-    font-size: 24px;
125
+    font-size: 20px;
126
     font-weight: bold;
126
     font-weight: bold;
127
     color: #333;
127
     color: #333;
128
 }
128
 }
129
 
129
 
130
 .view-all {
130
 .view-all {
131
-    font-size: 16px;
131
+    font-size: 14px;
132
     color: #409eff;
132
     color: #409eff;
133
 }
133
 }
134
 
134
 
135
 .self-check-content {
135
 .self-check-content {
136
     background-color: #fff;
136
     background-color: #fff;
137
     border-radius: 12px;
137
     border-radius: 12px;
138
-    padding: 16px;
138
+    padding: 12px;
139
 }
139
 }
140
 
140
 
141
 .check-section {
141
 .check-section {
142
-    margin-bottom: 24px;
142
+    margin-bottom: 16px;
143
 }
143
 }
144
 
144
 
145
 .check-section:last-child {
145
 .check-section:last-child {
@@ -150,24 +150,24 @@ export default {
150
     display: flex;
150
     display: flex;
151
     justify-content: space-between;
151
     justify-content: space-between;
152
     align-items: center;
152
     align-items: center;
153
-    margin-bottom: 12px;
153
+    margin-bottom: 10px;
154
 }
154
 }
155
 
155
 
156
 .section-title {
156
 .section-title {
157
-    font-size: 20px;
157
+    font-size: 16px;
158
     font-weight: bold;
158
     font-weight: bold;
159
     color: #333;
159
     color: #333;
160
 }
160
 }
161
 
161
 
162
 .view-more {
162
 .view-more {
163
-    font-size: 16px;
163
+    font-size: 14px;
164
     color: #409eff;
164
     color: #409eff;
165
 }
165
 }
166
 
166
 
167
 .check-item {
167
 .check-item {
168
     display: flex;
168
     display: flex;
169
     align-items: flex-start;
169
     align-items: flex-start;
170
-    padding: 12px 0;
170
+    padding: 10px 0;
171
     border-bottom: 1px solid #f0f0f0;
171
     border-bottom: 1px solid #f0f0f0;
172
 }
172
 }
173
 
173
 
@@ -178,30 +178,30 @@ export default {
178
 .item-indicator {
178
 .item-indicator {
179
     width: 6px;
179
     width: 6px;
180
     border-radius: 3px;
180
     border-radius: 3px;
181
-    margin-right: 12px;
181
+    margin-right: 10px;
182
     flex-shrink: 0;
182
     flex-shrink: 0;
183
 }
183
 }
184
 
184
 
185
 .item-indicator.expired {
185
 .item-indicator.expired {
186
     background-color: #8c3c34;
186
     background-color: #8c3c34;
187
-    height: 80px;
187
+    height: 60px;
188
 }
188
 }
189
 
189
 
190
 .item-indicator.urgent {
190
 .item-indicator.urgent {
191
     background-color: #ff291f;
191
     background-color: #ff291f;
192
-    height: 80px;
192
+    height: 60px;
193
 }
193
 }
194
 
194
 
195
 .item-indicator.normal {
195
 .item-indicator.normal {
196
     background-color: #b97c45;
196
     background-color: #b97c45;
197
-    height: 80px;
197
+    height: 60px;
198
 }
198
 }
199
 
199
 
200
 .item-content {
200
 .item-content {
201
     flex: 1;
201
     flex: 1;
202
     display: flex;
202
     display: flex;
203
     flex-direction: column;
203
     flex-direction: column;
204
-    gap: 8px;
204
+    gap: 6px;
205
 }
205
 }
206
 
206
 
207
 .item-row {
207
 .item-row {
@@ -211,17 +211,17 @@ export default {
211
 }
211
 }
212
 
212
 
213
 .item-label {
213
 .item-label {
214
-    font-size: 16px;
214
+    font-size: 14px;
215
     color: #333;
215
     color: #333;
216
 }
216
 }
217
 
217
 
218
 .item-date {
218
 .item-date {
219
-    font-size: 16px;
219
+    font-size: 14px;
220
     color: #333;
220
     color: #333;
221
 }
221
 }
222
 
222
 
223
 .item-role {
223
 .item-role {
224
-    font-size: 16px;
224
+    font-size: 14px;
225
     color: #333;
225
     color: #333;
226
 }
226
 }
227
 </style>
227
 </style>

+ 17 - 59
src/pages/selfCheck/index.vue

@@ -1,14 +1,6 @@
1
 <template>
1
 <template>
2
     <home-container>
2
     <home-container>
3
         <view class="self-check-page">
3
         <view class="self-check-page">
4
-            <!-- 标题区域 -->
5
-            <view class="header-section">
6
-                <view class="back-button" @click="goBack">
7
-                    <text class="back-icon">&lt;</text>
8
-                </view>
9
-                <view class="page-title">定/自检</view>
10
-            </view>
11
-
12
             <!-- 标签页区域 -->
4
             <!-- 标签页区域 -->
13
             <view class="tabs-section">
5
             <view class="tabs-section">
14
                 <view v-for="(tab, index) in tabs" :key="index"
6
                 <view v-for="(tab, index) in tabs" :key="index"
@@ -104,9 +96,6 @@ export default {
104
         }
96
         }
105
     },
97
     },
106
     methods: {
98
     methods: {
107
-        goBack() {
108
-            uni.navigateBack();
109
-        },
110
         switchTab(tabValue) {
99
         switchTab(tabValue) {
111
             this.currentTab = tabValue;
100
             this.currentTab = tabValue;
112
         },
101
         },
@@ -133,46 +122,15 @@ export default {
133
     background-color: #fff;
122
     background-color: #fff;
134
 }
123
 }
135
 
124
 
136
-.header-section {
137
-    display: flex;
138
-    align-items: center;
139
-    padding: 20px 16px;
140
-    position: relative;
141
-}
142
-
143
-.back-button {
144
-    width: 40px;
145
-    height: 40px;
146
-    display: flex;
147
-    align-items: center;
148
-    justify-content: center;
149
-    position: absolute;
150
-    left: 16px;
151
-}
152
-
153
-.back-icon {
154
-    font-size: 36px;
155
-    color: #333;
156
-    font-weight: bold;
157
-}
158
-
159
-.page-title {
160
-    flex: 1;
161
-    text-align: center;
162
-    font-size: 36px;
163
-    font-weight: bold;
164
-    color: #333;
165
-}
166
-
167
 .tabs-section {
125
 .tabs-section {
168
     display: flex;
126
     display: flex;
169
-    padding: 16px;
127
+    padding: 10px;
170
     border-bottom: 1px solid #f0f0f0;
128
     border-bottom: 1px solid #f0f0f0;
171
 }
129
 }
172
 
130
 
173
 .tab-item {
131
 .tab-item {
174
-    margin-right: 32px;
175
-    padding: 8px 0;
132
+    margin-right: 20px;
133
+    padding: 5px 0;
176
     position: relative;
134
     position: relative;
177
 }
135
 }
178
 
136
 
@@ -181,7 +139,7 @@ export default {
181
 }
139
 }
182
 
140
 
183
 .tab-text {
141
 .tab-text {
184
-    font-size: 24px;
142
+    font-size: 16px;
185
     color: #999;
143
     color: #999;
186
 }
144
 }
187
 
145
 
@@ -201,15 +159,15 @@ export default {
201
 }
159
 }
202
 
160
 
203
 .cards-section {
161
 .cards-section {
204
-    padding: 16px;
162
+    padding: 10px;
205
 }
163
 }
206
 
164
 
207
 .check-card {
165
 .check-card {
208
     background-color: #fff;
166
     background-color: #fff;
209
-    border-radius: 16px;
210
-    padding: 20px;
211
-    margin-bottom: 24px;
212
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
167
+    border-radius: 10px;
168
+    padding: 12px;
169
+    margin-bottom: 12px;
170
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
213
     display: flex;
171
     display: flex;
214
     justify-content: space-between;
172
     justify-content: space-between;
215
     align-items: flex-start;
173
     align-items: flex-start;
@@ -219,7 +177,7 @@ export default {
219
     flex: 1;
177
     flex: 1;
220
     display: flex;
178
     display: flex;
221
     flex-direction: column;
179
     flex-direction: column;
222
-    gap: 16px;
180
+    gap: 8px;
223
 }
181
 }
224
 
182
 
225
 .card-row {
183
 .card-row {
@@ -229,26 +187,26 @@ export default {
229
 }
187
 }
230
 
188
 
231
 .card-label {
189
 .card-label {
232
-    font-size: 24px;
190
+    font-size: 14px;
233
     color: #333;
191
     color: #333;
234
 }
192
 }
235
 
193
 
236
 .card-date {
194
 .card-date {
237
-    font-size: 24px;
195
+    font-size: 14px;
238
     color: #333;
196
     color: #333;
239
 }
197
 }
240
 
198
 
241
 .card-role {
199
 .card-role {
242
-    font-size: 24px;
200
+    font-size: 14px;
243
     color: #333;
201
     color: #333;
244
 }
202
 }
245
 
203
 
246
 .status-tag {
204
 .status-tag {
247
-    padding: 8px 20px;
248
-    border-radius: 0 16px 16px 0;
249
-    font-size: 24px;
205
+    padding: 4px 12px;
206
+    border-radius:10px 0  10px 0;
207
+    font-size: 14px;
250
     font-weight: bold;
208
     font-weight: bold;
251
-    margin: -20px -20px -20px 0;
209
+    margin: -12px -12px -12px 0;
252
     align-self: flex-end;
210
     align-self: flex-end;
253
 }
211
 }
254
 
212