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

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

高老师8个月前 (10-07)H5204

界面如下：

代码如下：

<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操作,浏览器协助完成,没有多复杂。<!-- 三个核心方法 ...

百度地图,腾讯地图生成导航链接

https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:37.6767600000,112.7297800000&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU&referer=p...

Javascript绑定事件和移除事件

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

Javascript Ddos

代码1： <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script>...

canvs转图片canvs转base64

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

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

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

Javascript封装的原生Ajax请求

Javascript-WebSql的用法

百度地图,腾讯地图生成导航链接

Javascript绑定事件和移除事件

Javascript Ddos

canvs转图片canvs转base64

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

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

Powered by TOYEAN.