刷题app题型界面前端设计备份
界面如下：
代码如下：
<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;
}“刷题app题型界面前端设计备份” 的相关文章
Js显示本周星期对应的日期,非固定,周一,周三,周六
开发需求如下,商品下单后需要指定送到日期:送达日期为周一 周三 周六 ，如果今天周一，用户选择周一即为下一周周一。代码如下：<html> <head> <meta charset="utf-8"> <title>...
Javascript页面播放语音,Javascript语音读取页面的文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type...
canvs转图片canvs转base64
二期项目中生成的简历二维码是使用canvs生成的，微信浏览器中不能识别二维码，只能扫码。懒的换phpqrcode,于是转canvs。//设置一个url var url = "{yun:}$config.sy_weburl{/yun}/mingli/index....
js 工厂模式示例,js工厂模式原理
查看文章前你需要了解以下2点://1.this指向的是windows对象,通过console.log(this)可以查看到对象包含所有的方法和属性//2.全局变量属于this对象的属性通过console.log(this)可以查看到对象包含我们设置的全局变量我们经常在创建相同结构的Js对象会重复的设...
js构造函数
工厂模式虽然解决了创建多个对象的问题,但是并没有解决识别对象从属的问题.因为都属于object.因此出现了构造函数//构造函数名称首字母大写是规范 function Box(name,age){ this.name=name; this.age=age; this.run=funct...
js 点击复制,js实现手机端点击复制,js实现点击复制,js点击复制到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击复制</title> </head>...