MUI-列表实现2

Posted 2022-04-13 时光-ing

代码实现：
1、html代码编辑

<!-- 底栏1实现 -->
<div class="linkgroup">
	<div class="mui-row">
		<div class="mui-col-sm-12 mui-col-xs-12 hui">|惠支付</div>
	</div>
	<div class="mui-row">
		<!-- 图文列表 -->
		<div class="mui-col-sm-6 mui-col-xs-6 rightborder">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="./image/rightimg.png">
						<div class="mui-media-body">
							花呗短期包月
							<p class="mui-ellipsis">安全有保证</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-col-sm-6 mui-col-xs-6">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="./image/rightimg1.png">
						<div class="mui-media-body">
							我的奖励金
							<p class="mui-ellipsis">立即查看</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>	
</div>

<!-- 底栏2实现 -->
<div class="linkgroup">
	<div class="mui-row">
		<div class="mui-col-sm-12 mui-col-xs-12 hui">|生活服务</div>
	</div>
	<div class="mui-row">
		<!-- 图文列表 -->
		<div class="mui-col-sm-6 mui-col-xs-6 rightborder">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="./image/img1.png">
						<div class="mui-media-body">
							排号难排队久
							<p class="mui-ellipsis">一招帮你破解</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-col-sm-6 mui-col-xs-6">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="./image/img2.png">
						<div class="mui-media-body">
							瓜分五亿现金
							<p class="mui-ellipsis">快人一步集齐五福</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>	
</div>

2、CSS样式编辑

/* 底栏实现 */
.linkgroup
	background-color: white;
	margin-top: 20px;
	font-size:16px;

.hui
	line-height: 50px;
	height:50px;
	padding-left: 20px;

/* 在花呗短期包月 与 我的奖励金 之间加一个分界线 */
.rightborder
	border-right: 1px solid #EFEFF4;

界面展示：