优化

hdApp/src/admin/custom/balanceChange.vue

@@ -1,54 +1,39 @@
+<!--
+  客户总余额变动明细
+  用途：客户详情进入；账单式左右分栏对齐 ghsApp balanceChange
+-->
 <template>
 	<view class="bc-page">
 		<view v-if="hasList" class="bc-sheet">
-			<view class="bc-head">
-				<text class="bc-th bc-th--time">时间</text>
-				<text class="bc-th bc-th--event">事项</text>
-				<text class="bc-th bc-th--amt">变动</text>
-				<text class="bc-th bc-th--bal">余额</text>
-			</view>
-			<view class="bc-body">
-				<view
-					v-for="(item, index) in list.data"
-					:key="index"
-					class="bc-item"
-					:class="{ 'bc-item--alt': index % 2 === 1 }"
-				>
-					<view
-						class="bc-row-main"
-						:class="{ 'bc-row-main--with-extra': item.showExtraRow }"
-						@click="goDetail(item)"
-					>
-						<view class="bc-td bc-td--time">
-							<text class="bc-date">{{ item.dateText }}</text>
-							<text class="bc-clock">{{ item.timeLine }}</text>
-						</view>
-						<view class="bc-td bc-td--event">
-							<text class="bc-event">{{ item.event }}</text>
-							<text v-if="item.showStaff" class="bc-meta">{{ item.staffName }}</text>
-							<text v-if="item.showRemark" class="bc-meta bc-meta--remark">{{ item.remark }}</text>
-						</view>
-						<view class="bc-td bc-td--amt">
-							<text class="bc-amount" :class="item.amountClassName">{{ item.amount }}</text>
-						</view>
-						<view class="bc-td bc-td--bal">
-							<text class="bc-balance">{{ item.balanceText }}</text>
-						</view>
-					</view>
-					<view v-if="item.showExtraRow" class="bc-row-extra" @click.stop>
-						<view class="bc-tags-row">
-							<text
-								v-if="item.showSettleLink"
-								class="bc-tag bc-tag--link"
-								@click.stop="goSettle(item)"
-							>{{ item.settleLinkText }}</text>
-							<text
-								v-if="item.showRefundLink"
-								class="bc-tag bc-tag--link"
-								@click.stop="goRefundOrder(item)"
-							>{{ item.refundLinkText }}</text>
-						</view>
+			<view
+				v-for="(item, index) in list.data"
+				:key="index"
+				class="bc-item"
+				@click="goDetail(item)"
+			>
+				<view class="bc-main">
+					<text class="bc-event">{{ item.event }}</text>
+					<text class="bc-amount" :class="item.amountClassName">{{ item.amount }}</text>
+				</view>
+				<view class="bc-sub">
+					<view class="bc-sub-left">
+						<text class="bc-time">{{ item.dateText }} {{ item.timeLine }}</text>
+						<text v-if="item.showStaff" class="bc-staff">{{ item.staffName }}</text>
 					</view>
+					<text class="bc-balance">余额 {{ item.balanceText }}</text>
+				</view>
+				<text v-if="item.showRemark" class="bc-remark">{{ item.remark }}</text>
+				<view v-if="item.showExtraRow" class="bc-extra" @click.stop>
+					<text
+						v-if="item.showSettleLink"
+						class="bc-tag"
+						@click.stop="goSettle(item)"
+					>{{ item.settleLinkText }}</text>
+					<text
+						v-if="item.showRefundLink"
+						class="bc-tag"
+						@click.stop="goRefundOrder(item)"
+					>{{ item.refundLinkText }}</text>
 				</view>
 			</view>
 		</view>
@@ -56,6 +41,9 @@
 	</view>
 </template>
 <script>
+/**
+ * hdApp 客户总余额变动：读 xhBalanceChange；排版对齐 ghs 账单式列表
+ */
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import { getBalanceChangeList } from '@/api/custom'
 import list from '@/mixins/list'
@@ -82,6 +70,9 @@ export default {
 		hasText(val) {
 			return val !== undefined && val !== null && String(val).trim() !== ''
 		},
+		/**
+		 * 列表行展示字段：金额颜色、时间拆分、结账/售后外链
+		 */
 		mapListItem(item, amountDisplay) {
 			const row = Object.assign({}, item)
 			row.amount = amountDisplay
@@ -173,50 +164,9 @@ export default {
 	background: #fff;
 }
 
-.bc-head {
-	display: flex;
-	align-items: center;
-	padding: 22upx 0;
-	background: #f8f9fb;
-	border-bottom: 1upx solid #eceef2;
-}
-
-.bc-th {
-	font-size: 28upx;
-	color: #8c8c8c;
-	font-weight: 500;
-	line-height: 1.2;
-}
-
-.bc-th--time {
-	width: 100upx;
-	flex-shrink: 0;
-	padding-left: 8upx;
-	box-sizing: border-box;
-}
-
-.bc-th--event {
-	flex: 1;
-	min-width: 0;
-	padding-right: 12upx;
-}
-
-.bc-th--amt {
-	width: 118upx;
-	flex-shrink: 0;
-	text-align: right;
-}
-
-.bc-th--bal {
-	width: 140upx;
-	flex-shrink: 0;
-	padding-right: 8upx;
-	text-align: right;
-	box-sizing: border-box;
-}
-
 .bc-item {
-	border-bottom: 1upx solid #f2f3f5;
+	padding: 28upx 28upx 24upx;
+	border-bottom: 1upx solid #f0f1f3;
 	box-sizing: border-box;
 }
 
@@ -224,159 +174,115 @@ export default {
 	border-bottom: none;
 }
 
-.bc-item--alt {
-	background: #fafbfc;
+.bc-item:active {
+	background: #f7f8fa;
 }
 
-.bc-row-main {
+.bc-main {
 	display: flex;
+	flex-direction: row;
 	align-items: flex-start;
-	padding: 24upx 0;
-	box-sizing: border-box;
+	justify-content: space-between;
 }
 
-.bc-row-main--with-extra {
-	padding-bottom: 0;
+.bc-event {
+	flex: 1;
+	min-width: 0;
+	margin-right: 24upx;
+	font-size: 30upx;
+	color: #1a1a1a;
+	font-weight: 500;
+	line-height: 1.4;
+	word-break: break-all;
 }
 
-.bc-item:active .bc-row-main,
-.bc-item:active .bc-row-extra {
-	background: #f0f4ff;
+.bc-amount {
+	flex-shrink: 0;
+	font-size: 32upx;
+	font-weight: 600;
+	line-height: 1.3;
+	font-variant-numeric: tabular-nums;
 }
 
-.bc-row-extra {
-	width: 100%;
-	padding: 12upx 0 20upx;
-	box-sizing: border-box;
+.bc-amount--in {
+	color: #07a84c;
 }
 
-.bc-tags-row {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	width: 100%;
-	padding-left: 8upx;
-	padding-right: 8upx;
-	box-sizing: border-box;
+.bc-amount--out {
+	color: #e62e45;
 }
 
-.bc-td--time {
-	width: 100upx;
-	flex-shrink: 0;
-	padding-left: 8upx;
+.bc-sub {
 	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: center;
-	box-sizing: border-box;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 10upx;
 }
 
-.bc-td--event {
+.bc-sub-left {
 	flex: 1;
 	min-width: 0;
-	padding-right: 12upx;
-}
-
-.bc-td--amt {
-	width: 118upx;
-	flex-shrink: 0;
-	padding-right: 8upx;
 	display: flex;
-	justify-content: flex-end;
-	box-sizing: border-box;
+	flex-direction: row;
+	align-items: center;
+	margin-right: 16upx;
 }
 
-.bc-td--bal {
-	width: 140upx;
+.bc-time {
 	flex-shrink: 0;
-	padding-right: 8upx;
-	display: flex;
-	justify-content: flex-end;
-	box-sizing: border-box;
-}
-
-.bc-date {
 	font-size: 28upx;
-	color: #2c2c2c;
-	line-height: 1.35;
+	color: #999;
+	line-height: 1.4;
 }
 
-.bc-clock {
-	margin-top: 4upx;
+.bc-staff {
+	flex: 1;
+	min-width: 0;
+	margin-left: 12upx;
 	font-size: 28upx;
-	color: #2c2c2c;
-	line-height: 1.35;
+	color: #999;
+	line-height: 1.4;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
-.bc-event {
-	display: block;
+.bc-balance {
+	flex-shrink: 0;
 	font-size: 28upx;
-	color: #1a1a1a;
-	font-weight: 500;
-	line-height: 1.45;
-	word-break: break-all;
+	color: #999;
+	line-height: 1.4;
+	font-variant-numeric: tabular-nums;
 }
 
-.bc-meta {
+.bc-remark {
 	display: block;
 	margin-top: 8upx;
 	font-size: 22upx;
-	color: #999;
+	color: #b3b3b3;
 	line-height: 1.4;
 	word-break: break-all;
 }
 
-.bc-meta--remark {
-	color: #b3b3b3;
+.bc-extra {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 16upx;
 }
 
 .bc-tag {
-	display: block;
 	max-width: 100%;
 	padding: 6upx 14upx;
-	margin-top: 10upx;
 	margin-right: 12upx;
+	margin-bottom: 8upx;
 	font-size: 28upx;
 	line-height: 1.4;
+	color: #5b8def;
+	background: #eef4ff;
 	border-radius: 8upx;
 	word-break: break-all;
 	box-sizing: border-box;
 }
-
-.bc-tags-row .bc-tag:first-child {
-	margin-top: 0;
-}
-
-.bc-tag--link {
-	color: #969aa0;
-	background: #eef4ff;
-}
-
-.bc-tag--muted {
-	color: #969aa0;
-	background: #f3f4f6;
-}
-
-.bc-amount {
-	font-size: 28upx;
-	font-weight: 600;
-	line-height: 1.35;
-	font-variant-numeric: tabular-nums;
-}
-
-.bc-amount--in {
-	color: #07a84c;
-}
-
-.bc-amount--out {
-	color: #e62e45;
-}
-
-.bc-balance {
-	font-size: 28upx;
-	color: #131212;
-	line-height: 1.35;
-	font-variant-numeric: tabular-nums;
-}
 </style>

hdApp/src/admin/custom/balancePayChange.vue

@@ -1,181 +1,287 @@
+<!--
+  客户充值本金余额变动明细
+  用途：客户详情进入；读 xhBalancePayChange；排版对齐 ghsApp 账单式列表
+-->
 <template>
-    <view class="app-content">
-            <block v-if="!$util.isEmpty(list.data)">
-                <view class="balance-table">
-                    <view class="table-header table-row">
-                        <view class="table-cell cell-date">日期</view>
-                        <view class="table-cell cell-event">事项</view>
-                        <view class="table-cell cell-staff">操作</view>
-                        <view class="table-cell cell-amount">变动</view>
-                        <view class="table-cell cell-balance">余额</view>
-                    </view>
-                    <view v-for="(item, index) in list.data" :key="index" class="table-body">
-                        <view class="table-row table-row-data" @click="goDetail(item)">
-                            <view class="table-cell cell-date">{{ item.addTime.substr(5,11) }}</view>
-                            <view class="table-cell cell-event">{{ item.event }}</view>
-                            <view class="table-cell cell-staff">{{ item.staffName }}</view>
-                            <view class="table-cell cell-amount">{{ item.amount }}</view>
-                            <view class="table-cell cell-balance">{{ parseFloat(item.balance) }}</view>
-                        </view>
-                        <view class="table-row table-row-extra" v-if="Number(item.settleId)>0 || !$util.isEmpty(item.remark) || Number(item.refundOrderId)>0">
-                            <view class="table-cell cell-extra" :colspan="5">
-                                <view v-if="Number(item.settleId)>0" @click.stop="goSettle(item)">结账单 {{item.settleNo}} {{item.settleAmount?parseFloat(item.settleAmount):0}}元</view>
-                                
-                                <view v-if="Number(item.settleAmount)>0 && Number(item.becomeBalance)>0">余额 {{item.becomeBalance}}元</view>
-
-                                <view v-if="Number(item.refundOrderId)>0" @click.stop="goRefundOrder(item)">订单 {{ item.refundOrderSn }}</view>
-
-                                <view v-if="!$util.isEmpty(item.remark)">{{ item.remark }}</view>
-                            </view>
-                        </view>
-                    </view>
-                </view>
-            </block>
-            <block v-else>
-                <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
-            </block>
-        </view>
-    </template>
-    <script>
-    import AppWrapperEmpty from "@/components/app-wrapper-empty";
-    import { getBalancePayChangeList } from '@/api/custom'
-    import list from '@/mixins/list'
-    export default {
-        name: "balanceChange",
-        components: {
-            AppWrapperEmpty
-        },
-        mixins:[list],
-        data() {
-            return {
-            };
-        },
-        methods: {
-            goRefundOrder(item){
-                this.$util.pageTo({ url: '/admin/order/detail?id='+item.refundOrderId})
-            },
-            goSettle(item){
-                this.$util.pageTo({url:'/admin/settle/detail?id='+item.settleId})
-            },
-            goDetail(item){
-                if(item.capitalType == 0){
-                    //订单详情
-                    this.$util.pageTo({url: '/admin/order/detail?id='+item.relateId})
-                }
-                if(item.capitalType == 59){
-                    //售后单
-                    this.$util.pageTo({url: '/admin/order/refundDetail?id='+item.relateId})
-                }
-            },
-            async init(){
-                let id = this.option.id ? this.option.id : 0
-                const res = await getBalancePayChangeList({ page:this.list.page,customId:id })
-                if (this.$util.isEmpty(res.data.list)){
-                    this.completes(res)
-                    return
-                }
-                let currentList = res.data.list
-
-                currentList.forEach(function(item,index,array){
-                    array[index].amount = item.io == 0 ? '-'+parseFloat(item.amount) : '+'+parseFloat(item.amount)
-                });
-
-                res.data.list = currentList
-                this.completes(res)
-            }
-        },
-        async onPullDownRefresh() {
-            this.resetList();
-            await this.init()
-            uni.stopPullDownRefresh();
-        },
-        async onReachBottom() {
-            if (!this.list.finished) {
-                await this.init()
-                uni.stopPullDownRefresh();;
-            } else {
-                uni.stopPullDownRefresh();
-            }
-        }
-    };
-    </script>
-    <style lang="scss" scoped>
-    .balance-table {
-        width: 100%;
-        border-radius: 16upx;
-        overflow: hidden;
-        background: #fff;
-        box-shadow: 0 4upx 24upx rgba(0,0,0,0.06);
-        margin: 20upx 0;
-        .table-row {
-            display: flex;
-            align-items: center;
-            min-height: 72upx;
-            border-bottom: 1px solid #f0f0f0;
-            &.table-header {
-                background: #f5f7fa;
-                font-weight: bold;
-                font-size: 30upx;
-                color: #333;
-            }
-            &.table-row-data {
-                font-size: 26upx;
-                color: #222;
-                transition: background 0.2s;
-                cursor: pointer;
-                &:hover {
-                    background: #f0f9ff;
-                }
-            }
-            &.table-row-remark {
-                background: #fafbfc;
-                color: #989494;
-                font-size: 24upx;
-                .cell-remark {
-                    padding: 16upx 20upx;
-                }
-            }
-            &.table-row-extra {
-                background: #f8f8f8;
-                color: #989494;
-                font-size: 24upx;
-                .cell-extra {
-                    padding: 16upx 20upx;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 2upx;
-                }
-            }
-        }
-        .table-cell {
-            flex: 1;
-            padding: 18upx 8upx 18upx 8upx;
-            &.cell-date {
-                text-align: center;
-                min-width: 100upx;
-                flex: 1.2;
-            }
-            &.cell-staff {
-                text-align: center;
-                min-width: 60upx;
-                flex: 0.8;
-            }
-            &.cell-event {
-                text-align: left;
-                min-width: 200upx;
-                flex: 2.2;
-            }
-            &.cell-amount {
-                text-align: right;
-                min-width: 100upx;
-                flex: 1;
-            }
-            &.cell-balance {
-                text-align: right;
-                min-width: 100upx;
-                padding-right: 32upx;
-                flex: 1;
-            }
-        }
-    }
-    </style>
+	<view class="bc-page">
+		<view v-if="hasList" class="bc-sheet">
+			<view
+				v-for="(item, index) in list.data"
+				:key="index"
+				class="bc-item"
+				@click="goDetail(item)"
+			>
+				<view class="bc-main">
+					<text class="bc-event">{{ item.event }}</text>
+					<text class="bc-amount" :class="item.amountClassName">{{ item.amount }}</text>
+				</view>
+				<view class="bc-sub">
+					<view class="bc-sub-left">
+						<text class="bc-time">{{ item.dateText }} {{ item.timeLine }}</text>
+						<text v-if="item.showStaff" class="bc-staff">{{ item.staffName }}</text>
+					</view>
+					<text class="bc-balance">余额 {{ item.balanceText }}</text>
+				</view>
+				<text v-if="item.showRemark" class="bc-remark">{{ item.remark }}</text>
+				<view v-if="item.showExtraRow" class="bc-extra" @click.stop>
+					<text
+						v-if="item.showSettleLink"
+						class="bc-tag"
+						@click.stop="goSettle(item)"
+					>{{ item.settleLinkText }}</text>
+					<text
+						v-if="item.showBecomeBalance"
+						class="bc-tag bc-tag--muted"
+					>{{ item.becomeBalanceText }}</text>
+					<text
+						v-if="item.showRefundLink"
+						class="bc-tag"
+						@click.stop="goRefundOrder(item)"
+					>{{ item.refundLinkText }}</text>
+				</view>
+			</view>
+		</view>
+		<AppWrapperEmpty v-else title="暂无数据" :is-empty="listEmpty" />
+	</view>
+</template>
+<script>
+/**
+ * hdApp 充值余额变动：读 xhBalancePayChange；账单式排版对齐 ghs balanceChange
+ */
+import AppWrapperEmpty from '@/components/app-wrapper-empty'
+import { getBalancePayChangeList } from '@/api/custom'
+import list from '@/mixins/list'
+
+export default {
+	name: 'balancePayChange',
+	components: {
+		AppWrapperEmpty
+	},
+	mixins: [list],
+	computed: {
+		hasList() {
+			return this.list.data && this.list.data.length > 0
+		},
+		listEmpty() {
+			return !this.hasList
+		}
+	},
+	methods: {
+		formatMoney(val) {
+			const n = parseFloat(val)
+			return isNaN(n) ? '0' : String(n)
+		},
+		hasText(val) {
+			return val !== undefined && val !== null && String(val).trim() !== ''
+		},
+		/** 列表行展示字段：金额颜色、时间、结账/售后外链 */
+		mapListItem(item, amountDisplay) {
+			const row = Object.assign({}, item)
+			row.amount = amountDisplay
+			const text = String(amountDisplay || '')
+			row.amountClassName = (text.indexOf('+') === 0 || Number(row.io) === 1) ? 'bc-amount--in' : 'bc-amount--out'
+			const addTime = row.addTime || ''
+			if (addTime.length >= 16) {
+				row.dateText = addTime.substr(5, 5)
+				row.timeLine = addTime.substr(11, 5)
+			} else if (addTime.length >= 11) {
+				row.dateText = addTime.substr(0, 10)
+				row.timeLine = addTime.substr(11)
+			} else {
+				row.dateText = addTime
+				row.timeLine = ''
+			}
+			row.balanceText = this.formatMoney(row.balance)
+			row.showSettleLink = Number(row.settleId) > 0
+			row.settleLinkText = '结账单 ' + (row.settleNo || '') + ' · ' + this.formatMoney(row.settleAmount) + '元'
+			row.showBecomeBalance = Number(row.settleAmount) > 0 && Number(row.becomeBalance) > 0
+			row.becomeBalanceText = '余额 ' + this.formatMoney(row.becomeBalance) + '元'
+			row.showRefundLink = Number(row.refundOrderId) > 0
+			row.refundLinkText = '订单 ' + (row.refundOrderSn || '')
+			row.showStaff = this.hasText(row.staffName)
+			row.showRemark = this.hasText(row.remark)
+			row.showExtraRow = row.showSettleLink || row.showBecomeBalance || row.showRefundLink
+			return row
+		},
+		async init() {
+			const id = this.option.id ? this.option.id : 0
+			const res = await getBalancePayChangeList({ page: this.list.page, customId: id })
+			if (this.$util.isEmpty(res.data.list)) {
+				this.completes(res)
+				return
+			}
+			const rows = []
+			res.data.list.forEach((item) => {
+				const amountDisplay = item.io == 0 ? '-' + parseFloat(item.amount) : '+' + parseFloat(item.amount)
+				rows.push(this.mapListItem(item, amountDisplay))
+			})
+			res.data.list = rows
+			this.completes(res)
+		},
+		goRefundOrder(item) {
+			this.$util.pageTo({ url: '/admin/order/detail?id=' + item.refundOrderId })
+		},
+		goSettle(item) {
+			this.$util.pageTo({ url: '/admin/settle/detail?id=' + item.settleId })
+		},
+		goDetail(item) {
+			if (item.capitalType == 0) {
+				this.$util.pageTo({ url: '/admin/order/detail?id=' + item.relateId })
+			}
+			if (item.capitalType == 59) {
+				this.$util.pageTo({ url: '/admin/order/refundDetail?id=' + item.relateId })
+			}
+		}
+	},
+	async onPullDownRefresh() {
+		this.resetList()
+		await this.init()
+		uni.stopPullDownRefresh()
+	},
+	async onReachBottom() {
+		if (!this.list.finished) {
+			await this.init()
+		}
+		uni.stopPullDownRefresh()
+	}
+}
+</script>
+<style lang="scss" scoped>
+.bc-page {
+	min-height: 100vh;
+	background: #fff;
+	box-sizing: border-box;
+}
+
+.bc-sheet {
+	width: 100%;
+	background: #fff;
+}
+
+.bc-item {
+	padding: 28upx 28upx 24upx;
+	border-bottom: 1upx solid #f0f1f3;
+	box-sizing: border-box;
+}
+
+.bc-item:last-child {
+	border-bottom: none;
+}
+
+.bc-item:active {
+	background: #f7f8fa;
+}
+
+.bc-main {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.bc-event {
+	flex: 1;
+	min-width: 0;
+	margin-right: 24upx;
+	font-size: 30upx;
+	color: #1a1a1a;
+	font-weight: 500;
+	line-height: 1.4;
+	word-break: break-all;
+}
+
+.bc-amount {
+	flex-shrink: 0;
+	font-size: 32upx;
+	font-weight: 600;
+	line-height: 1.3;
+	font-variant-numeric: tabular-nums;
+}
+
+.bc-amount--in {
+	color: #07a84c;
+}
+
+.bc-amount--out {
+	color: #e62e45;
+}
+
+.bc-sub {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 10upx;
+}
+
+.bc-sub-left {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-right: 16upx;
+}
+
+.bc-time {
+	flex-shrink: 0;
+	font-size: 28upx;
+	color: #999;
+	line-height: 1.4;
+}
+
+.bc-staff {
+	flex: 1;
+	min-width: 0;
+	margin-left: 12upx;
+	font-size: 28upx;
+	color: #999;
+	line-height: 1.4;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.bc-balance {
+	flex-shrink: 0;
+	font-size: 28upx;
+	color: #999;
+	line-height: 1.4;
+	font-variant-numeric: tabular-nums;
+}
+
+.bc-remark {
+	display: block;
+	margin-top: 8upx;
+	font-size: 22upx;
+	color: #b3b3b3;
+	line-height: 1.4;
+	word-break: break-all;
+}
+
+.bc-extra {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 16upx;
+}
+
+.bc-tag {
+	max-width: 100%;
+	padding: 6upx 14upx;
+	margin-right: 12upx;
+	margin-bottom: 8upx;
+	font-size: 28upx;
+	line-height: 1.4;
+	color: #5b8def;
+	background: #eef4ff;
+	border-radius: 8upx;
+	word-break: break-all;
+	box-sizing: border-box;
+}
+
+.bc-tag--muted {
+	color: #969aa0;
+	background: #f3f4f6;
+}
+</style>