feat: 放大列表审核状态标签并提高辨识度

src/common/status-tag.scss

@@ -0,0 +1,15 @@
+@import '@/common/pda-typography.scss';
+
+.statusTag {
+	flex-shrink: 0;
+	font-size: $pda-font-body;
+	line-height: 1.25;
+	padding: 10rpx 22rpx;
+	border-radius: 10rpx;
+	font-weight: bold;
+}
+.status-0 { background: #d9d9d9; color: #434343; }
+.status-1 { background: #fa8c16; color: #fff; }
+.status-2 { background: #52c41a; color: #fff; }
+.status-3 { background: #f5222d; color: #fff; }
+.status-4 { background: #8c8c8c; color: #fff; }

src/components/card/storeFabricBusinessOutItem.vue

@@ -46,21 +46,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>

src/components/card/storeGoodsProcessInItem.vue

@@ -47,21 +47,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>

src/components/card/storeGoodsProcessOutItem.vue

@@ -51,21 +51,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>

src/components/card/storeGoodsProcessReturnInItem.vue

@@ -47,21 +47,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>

src/components/card/storeGoodsPurchaseInItem.vue

@@ -47,21 +47,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>

src/components/storefabric/OrderStatusBar.vue

@@ -22,7 +22,9 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .statusRow {
 	display: flex;
 	align-items: center;
@@ -32,18 +34,7 @@ export default {
 	border-bottom: 1rpx solid #f5f5f5;
 }
 .statusLabel {
-	font-size: 28rpx;
+	font-size: $pda-font-body;
 	color: #333;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>