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

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

高老师4个月前 (10-07)H5121

界面如下：

代码如下：

<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封装的原生Ajax请求

由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称) exam...

Javascript-WebSql的用法

WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!-- 三个核心方法 ...

HTML5的离线缓存技术

离线缓存的开启实例使用apache设置 1.apache配置文件搜索Addtype,我的addtype已经存在项目,如下 AddType application/x-compress .Z AddType application/x-gz...

tmodjs模板语法

TmodJS是一套完整的前端模块框架。虽然我们PHP框架自带各种模板引擎，但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面，拼接HTML真的是很头疼的一件事情。...

websql的使用方法

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

Javascript绑定事件和移除事件

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...

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

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

Javascript封装的原生Ajax请求

Javascript-WebSql的用法

HTML5的离线缓存技术

tmodjs模板语法

websql的使用方法

Javascript绑定事件和移除事件

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

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

Powered by TOYEAN.