当前位置：首页 > H5 > 正文内容

刷题app题型界面前端设计备份

高老师1年前 (2024-10-07)H5293

界面如下：

代码如下：

<view class="lable_list bg-white margin-top">
					<view class="lable_item">
						<view style="display: flex;align-items: center;">
							<image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215002766c6e20b64b95.png"
								style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;">
								<view
									style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);">
								</view>
								<span></span>
							</image>
							<view>
								<view
									style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;">
									<view>免费题库</view>
									<view style="display: none;">
										解锁章节 直击原题</view>
								</view>
								<view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view>
							</view>
						</view>
						<view class="item_right" style="flex-shrink: 0;">
							<image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png"
								style="width: 6px; height: 10px;" role="">
								<view
									style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);">
								</view><span></span>
							</image>
						</view>
					</view>
					<view class="lable_item">
						<view style="display: flex;align-items: center;">
							<image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215033066c6e2c218943.png"
								style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;">
								<view
									style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);">
								</view>
								<span></span>
							</image>
							<view>
								<view
									style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;">
									<view>VIP题库</view>
									<view
										style="background: rgba(213, 62, 67, 0.1);border-radius: 2px;line-height: 15px;font-size: 8px;color: #D53E43;padding: 0 4px;margin-left: 5px;">
										解锁章节 直击原题</view>
								</view>
								<view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view>
							</view>
						</view>
						<view class="item_right" style="flex-shrink: 0;"><text><span
									style="display:none;">马上开通</span><span>马上开通</span></text></view>
					</view>
					<view class="lable_item">
						<view style="display: flex;align-items: center;">
							<image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png"
								style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;">
								<view
									style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);">
								</view>
								<span></span>
							</image>
							<view>
								<view
									style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;">
									<view>章节训练</view>
									<view style="display: none;">
										解锁章节 直击原题</view>
								</view>
								<view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view>
							</view>
						</view>
						<view class="item_right" style="flex-shrink: 0;">
							<image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png"
								style="width: 6px; height: 10px;" role="">
								<view
									style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);">
								</view><span></span>
							</image>
						</view>
					</view>
					<view class="lable_item">
						<view style="display: flex;align-items: center;">
							<image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215012566c6e2452b111.png"
								style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;">
								<view
									style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);">
								</view>
								<span></span>
							</image>
							<view>
								<view
									style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;">
									<view>历年真题</view>
									<view style="display: none;">
										解锁章节 直击原题</view>
								</view>
								<view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view>
							</view>
						</view>
						<view class="item_right" style="flex-shrink: 0;">
							<image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png"
								style="width: 6px; height: 10px;" role="">
								<view
									style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);">
								</view><span></span>
							</image>
						</view>
					</view>
					<view class="lable_item">
						<view style="display: flex;align-items: center;">
							<image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215064466c6e3843df31.png"
								style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;">
								<view
									style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);">
								</view>
								<span></span>
							</image>
							<view>
								<view
									style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;">
									<view>高频考点</view>
									<view style="display: none;">
										解锁章节 直击原题</view>
								</view>
								<view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view>
							</view>
						</view>
						<view class="item_right" style="flex-shrink: 0;">
							<image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png"
								style="width: 6px; height: 10px;" role="">
								<view
									style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);">
								</view><span></span>
							</image>
						</view>
					</view>
				</view>

css代码如下：

.lable_list {
	border-radius: 1rpx;
	box-sizing: border-box;
	margin: auto;
	padding: 0 50rpx;
	width: 100%;
}

.lable_item {
	-webkit-align-items: center;
	align-items: center;
	border-bottom: 1rpx solid #ebebeb;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	font-size: 30rpx;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 40rpx 0;
}

.item_right {
	color: #d53e43;
	font-size: 28rpx;
	font-weight: 500;
}

扫描二维码推送至手机访问。

本文链接：https://blog.20230611.cn/post/836.html

分享给朋友：

返回列表

上一篇：使用ES6解构赋值和默认参数特性简化JavaScript代码

下一篇：js解压OSS数据，加速网站打开速度

“刷题app题型界面前端设计备份” 的相关文章

javascript停止定时器, js删除定时器

window.setInterval(method,time)方法本身会返回一个资源句柄,使用clearInterval(Intervalid)方法即可清除定时器<script> var num=0; //每隔1秒再控制台输...

Javascript事件冒泡和捕捉的阻止

<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="utf-8"> </head> <bo...

Javascript页面播放语音,Javascript语音读取页面的文字

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type...

Javascript获取Mac地址

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取mac地址</title> </head&g...

ES6 函数参数的默认值

ES5中编写函数，为了给参数默认值，必须在函数体内对参数判断，着实揪心。ES6好多了。<script type="text/javascript"> function run(width = 100, height&...

微信禁用右上角的分享按钮,以及隐藏分享的子按钮等菜单项

和腾讯合作的项目活动中腾讯要求我们必须隐藏朋友圈分享功能，一直以为没有官方Api,百般查找才在文档中找到，可能是自己不太细心。微信官方文档在jsjdk的"界面操作"中有详细说明:关闭当前网页窗口接口wx.closeWindow();批量隐藏功能按钮接口wx.hideMenuIte...

刷题app题型界面前端设计备份

“刷题app题型界面前端设计备份” 的相关文章

javascript停止定时器, js删除定时器

Javascript事件冒泡和捕捉的阻止

Javascript页面播放语音,Javascript语音读取页面的文字

Javascript获取Mac地址

ES6 函数参数的默认值

微信禁用右上角的分享按钮,以及隐藏分享的子按钮等菜单项

© 2023 高久峰个人博客 - https://blog.20230611.cn . All rights reserved 粤ICP备20061021号-2

Powered by TOYEAN.