刷题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封装的原生Ajax请求
由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称) exam...
Javascript-WebSql的用法
WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!-- 三个核心方法 ...
websql的使用方法
<!-- 三个核心方法 openDatabase:这个方法使用现有数据库或创建...
Javascript绑定事件和移除事件
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...
Javascript页面播放语音,Javascript语音读取页面的文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type...
js cookie操作,js获取cookie值的方法,js 设置cookie
维护老项目中客户提到一个页面中有6个表单以上，导致每次保存一个其他的数据全部丢失，自己比较懒没有全部更换为ajax.用户每次输入完成或者选择完成记录cookie,每次提交后加载页面完成初始化cookie即可。以下代码取自w3school比较完善，之前在其他博客使用的经常出现bug，这个比较推荐使用：...