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

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

高老师5个月前 (10-07)H5148

界面如下：

代码如下：

<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题型界面前端设计备份” 的相关文章

阻止表单提交刷新页面

<form action="save.php" method="post" target="nm_iframe"> &nbs...

websql的使用方法

<!-- 三个核心方法 openDatabase:这个方法使用现有数据库或创建...

Javascript事件冒泡和捕捉的阻止

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

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...

canvs转图片canvs转base64

二期项目中生成的简历二维码是使用canvs生成的，微信浏览器中不能识别二维码，只能扫码。懒的换phpqrcode,于是转canvs。//设置一个url var url = "{yun:}$config.sy_weburl{/yun}/mingli/index....

js图片旋转插件jqueryrotate

jQuery 插件——jqueryrotate，它可以实现旋转效果。jqueryrotate 支持所有主流浏览器，包括 IE6。如果提示方法不存在,可能是你的Jquery版本过低或者过高。基本语法:$('#img').rotate(90);//旋转90度其他的参数:参数类型说明默认值...

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

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

阻止表单提交刷新页面

websql的使用方法

Javascript事件冒泡和捕捉的阻止

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

canvs转图片canvs转base64

js图片旋转插件jqueryrotate

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

本站由内网穿透专家免费赞助.

Powered by TOYEAN.