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

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

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

界面如下：

代码如下：

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

websql的使用方法

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

Js显示本周星期对应的日期,非固定,周一,周三,周六

开发需求如下,商品下单后需要指定送到日期:送达日期为周一周三周六，如果今天周一，用户选择周一即为下一周周一。代码如下：<html> <head> <meta charset="utf-8"> <title>...

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

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

使用js让手机震动,js实现手机震动

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

Javascript获取Mac地址

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

canvs转图片canvs转base64

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

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

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

websql的使用方法

Js显示本周星期对应的日期,非固定,周一,周三,周六

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

使用js让手机震动,js实现手机震动

Javascript获取Mac地址

canvs转图片canvs转base64

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

Powered by TOYEAN.