横向公告

横向公告

横向公告采用样式布局方式提供，这样更加灵活，您可以更方便地改进出更符合项目要求的页面布局。

运行图示

布局代码

<template>
	<view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">横向公告</text>
		<view style="height:20rpx;"></view>
		<view 
		class="ux-flex ux-row ux-nowrap ux-bg-white ux-align-items-center ux-padding-small">
			<view class="ux-box-items" hover-class="ux-tap">
				<view class="ux-box-item">
					<text class="ux-h4">100</text>
					<text class="ux-text-small ux-box-ml">元</text>
				</view>
				<text class="ux-box-footer-text ux-color-grey2">余额</text>
			</view>
			<view class="ux-box-line"></view>
			<view class="ux-box-items" hover-class="ux-tap">
				<view class="ux-box-item">
					<text class="ux-h4">99</text>
					<text class="ux-text-small ux-box-ml">条</text>
				</view>
				<text class="ux-box-footer-text ux-color-grey2">消息</text>
			</view>
			<view class="ux-box-line"></view>
			<view class="ux-box-items" hover-class="ux-tap">
				<view class="ux-box-item">
					<text class="ux-h4">50</text>
					<text class="ux-text-small ux-box-ml">篇</text>
				</view>
				<text class="ux-box-footer-text ux-color-grey2">推文</text>
			</view>
			<view class="ux-box-line"></view>
			<view class="ux-box-items" hover-class="ux-tap">
				<view class="ux-box-item">
					<text class="ux-h4">99</text>
					<text class="ux-text-small ux-box-ml">位</text>
				</view>
				<text class="ux-box-footer-text ux-color-grey2">好友</text>
			</view>
		</view>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {}
	},
	methods: {
	}
}
</script>
<style scoped>

</style>