刷题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题型界面前端设计备份” 的相关文章
javascript停止定时器, js删除定时器
window.setInterval(method,time)方法本身会返回一个资源句柄,使用clearInterval(Intervalid)方法即可清除定时器<script> var num=0; //每隔1秒再控制台输...
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....
ES6中let与var的区别
var的作用域是全局的,let的作用域是块级的,直接看代码(其他的小区别忽略):<script type="text/javascript"> for (var a = ...
如何使用JavaScript将HTML导出到Word文档
将HTML页面导出为Microsoft Word文档可以用不同的方法完成。jQuery，JavaScript中有可用的插件可在客户端实现此功能。如果HTML文件很简单，没有任何复杂的标记，那么将HTML内容导出到Word文档中就很简单。不需要任何第三方库。只需几行JavaScript代码就足以导出H...
flex布局,flex布局实例,flex布局教程
学习flex布局前请一定按照阮一峰老师的教程手工敲一遍，100%理解，光看是一知半解。【一】.基础知识flex布局,只要把元素设置为display:flex,此元素即可称为flex容器,元素的所有子元素都自动成为容器的成员,简称flex-itemflex容器本身有两根轴,水平的主轴,垂直的交叉轴。因...