Browse Source
- 新增课程详情页面(info.vue)和课程列表页面(list.vue) - 更新首页(index.vue)样式，增加自定义导航栏 - 修改课表页面(list.vue)布局，添加筛选功能 - 优化课程详情页面样式，展示更多课程信息master
4 changed files with 1062 additions and 132 deletions
@ -0,0 +1,474 @@ |
|||
<!--课程-详情--> |
|||
<template> |
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="top"> |
|||
<view class="user"> |
|||
<view class="pic"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="name">包子皮</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view> |
|||
<text class="title">到课率统计</text> |
|||
<text>28%</text> |
|||
</view> |
|||
<view> |
|||
<text class="title">发布作业</text> |
|||
<text>28%</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom"></view> |
|||
<view class="text_box"> |
|||
<text>月授课数</text> |
|||
<text>12</text> |
|||
<text>节，月负责学员</text> |
|||
<text>188</text> |
|||
<text>名</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_2"> |
|||
<view class="left_box"> |
|||
<view> |
|||
<text>课程</text> |
|||
<text>预告</text> |
|||
</view> |
|||
<view> |
|||
<text>5/28周五 15:30~17:30</text> |
|||
<text>301室篮球少儿课程</text> |
|||
</view> |
|||
</view> |
|||
<view class="rigth_box"> |
|||
<view>详情</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_3"> |
|||
<view class="title_box"> |
|||
<view class="top_box"> |
|||
<text>最近课程</text> |
|||
<view></view> |
|||
</view> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>12</text> |
|||
<text>/</text> |
|||
<text>24</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
到课率：80% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课室：302室 |
|||
</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<view class="tag" style="background:#fad24e;">上课中</view> |
|||
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>12</text> |
|||
<text>/</text> |
|||
<text>24</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
到课率：80% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课室：302室 |
|||
</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!-- <view class="tag" style="background:#fad24e;">上课中</view>--> |
|||
<view class="tag" style="background:#1cd188;">待上课</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_3"> |
|||
<view class="title_box"> |
|||
<view class="top_box"> |
|||
<text>作业批改</text> |
|||
<view @click="openObjListView()">全部</view> |
|||
</view> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>12</text> |
|||
<text>/</text> |
|||
<text>24</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
完成率：80% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!-- <view class="tag" style="background:#fad24e;">上课中</view>--> |
|||
<view class="tag" style="background:#1cd188;">待批改</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>12</text> |
|||
<text>/</text> |
|||
<text>24</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
完成率：80% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!-- <view class="tag" style="background:#fad24e;">上课中</view>--> |
|||
<view class="tag" style="background:#1cd188;">待批改</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import user from '@/api/user.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [], |
|||
likes: 0, |
|||
type: 1, |
|||
type1: 1, |
|||
activity_id: 0, |
|||
um_id: 0, |
|||
urls: 'http://medication.zeyan.wang/' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
const um_id = uni.getStorageSync('um_id'); |
|||
this.um_id = um_id |
|||
if (um_id == '') { |
|||
uni.navigateTo({ |
|||
url: '/pages/login/login' |
|||
}) |
|||
} |
|||
this.fetchData(this.um_id) |
|||
}, |
|||
methods: { |
|||
|
|||
//打开-发布作业页 |
|||
openObjListView(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/job/add' |
|||
}) |
|||
}, |
|||
|
|||
//打开作业列表页 |
|||
openObjListView(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/job/list' |
|||
}) |
|||
}, |
|||
|
|||
fetchData(um_id) { |
|||
user.activity_index({ |
|||
um_id: um_id |
|||
}).then(res => { |
|||
console.log(res) |
|||
if (res.status == 200) { |
|||
if (res.data == null) { |
|||
this.list = [] |
|||
} else { |
|||
this.list = res.data |
|||
} |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
onPullDownRefresh() { |
|||
this.fetchData(this.um_id) |
|||
}, |
|||
publishing() { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/publishing' |
|||
}) |
|||
}, |
|||
like(id, um_id) { |
|||
user.activity_like({um_id: um_id, activity_id: id, type: 1}).then(res => { |
|||
if (res.status == 200) { |
|||
user.activity_index({ |
|||
um_id: um_id |
|||
}).then(res => { |
|||
console.log(res) |
|||
if (res.status == 200) { |
|||
this.list = res.data |
|||
} |
|||
}); |
|||
this.type = res.data.type |
|||
this.activity_id = res.data.activity_id |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
collection(id, um_id) { |
|||
user.activity_like({um_id: um_id, activity_id: id, type: 2}).then(res => { |
|||
if (res.status == 200) { |
|||
console.log(res) |
|||
this.fetchData(this.um_id) |
|||
this.type1 = res.data.type |
|||
this.activity_id = res.data.activity_id |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
coninfo(item) { |
|||
// user.coninfo({id:id}).then(res => { |
|||
// if(res.status == 200){ |
|||
uni.setStorageSync('coninfo', item); |
|||
uni.navigateTo({ |
|||
url: '/pages/index/coninfo' |
|||
}) |
|||
// }else{ |
|||
// uni.showToast({ |
|||
// title: res.msg, |
|||
// icon: 'none' |
|||
// }) |
|||
// } |
|||
// }); |
|||
}, |
|||
Comment(id) { |
|||
uni.setStorageSync('actid', id); |
|||
uni.navigateTo({ |
|||
url: '/pages/index/Comment' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
.section_1{ |
|||
background: #FFFFFF 100%; |
|||
height: 264rpx; |
|||
border-radius: 14rpx; |
|||
margin: 28rpx auto; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
.top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.user{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.pic{ |
|||
width: 144rpx; |
|||
height: 144rpx; |
|||
border-radius: 50%; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
view{ |
|||
display: flex; |
|||
gap: 10rpx; |
|||
.title{ |
|||
width: 148rpx; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.bottom{ |
|||
padding: 0 44rpx; |
|||
} |
|||
} |
|||
|
|||
.section_2{ |
|||
border-radius: 60rpx; |
|||
padding: 28rpx 36rpx; |
|||
background: #29D3B4 100%; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.left_box{ |
|||
display: flex; |
|||
view{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
text{} |
|||
} |
|||
view:nth-child(1){ |
|||
padding-right: 10rpx; |
|||
border-right: 2px solid #fff; |
|||
} |
|||
view:nth-child(2){ |
|||
padding-left: 10rpx; |
|||
} |
|||
} |
|||
.rigth_box{ |
|||
view{ |
|||
width: 106rpx; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
text-align: center; |
|||
border-radius: 25rpx; |
|||
background: #32baa1; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.section_3{ |
|||
margin-top: 36rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
.title_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
.top_box{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 30rpx; |
|||
} |
|||
} |
|||
.line{ |
|||
width: 90rpx; |
|||
height: 2px; |
|||
background: #29D3B4; |
|||
} |
|||
} |
|||
.ul{ |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.li{ |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
.left_box{ |
|||
margin-left: 28rpx; |
|||
width: 146rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
.date_box{ |
|||
display: flex; |
|||
font-size: 48rpx; |
|||
text:nth-child(1){ |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
.ratio{ |
|||
color: #AAAAAA; |
|||
} |
|||
} |
|||
.center_box{ |
|||
margin-left: 52rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
} |
|||
.right_box{ |
|||
.tag{ |
|||
position:absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,428 @@ |
|||
<!--课程-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="title">课表</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<text>周日</text> |
|||
<text>14</text> |
|||
<text></text> |
|||
</view> |
|||
<view class="li"> |
|||
<text>周一</text> |
|||
<text>14</text> |
|||
<text></text> |
|||
</view> |
|||
<view class="li"> |
|||
<text>周二</text> |
|||
<text>14</text> |
|||
<text></text> |
|||
</view> |
|||
<view class="li"> |
|||
<text>周日</text> |
|||
<text class="today">今</text> |
|||
<text class=""></text> |
|||
</view> |
|||
<view class="li"> |
|||
<text>周一</text> |
|||
<text>14</text> |
|||
<text class="select_plan"></text> |
|||
</view> |
|||
<view class="li"> |
|||
<text>周二</text> |
|||
<text>14</text> |
|||
<text></text> |
|||
</view> |
|||
<view class="li"> |
|||
<text>周二</text> |
|||
<text>14</text> |
|||
<text></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_2"> |
|||
<view class="item_box"> |
|||
<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_course" @click="clickCourse" @close="show_course=false" ref="ref_course"> |
|||
<view class="fui-filter__item" @tap="filterTapCourse"> |
|||
<text>{{course_name}}</text> |
|||
<view class="fui-filter__icon" :class="{'fui-icon__ani':show_course}"> |
|||
<fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon> |
|||
</view> |
|||
</view> |
|||
</fui-dropdown-menu> |
|||
</view> |
|||
<view class="item_box"> |
|||
<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_classroom" @click="clickClassroom" @close="show_classroom=false" ref="ref_classroom"> |
|||
<view class="fui-filter__item" @tap="filterTapClassroom"> |
|||
<text>{{classroom_name}}</text> |
|||
<view class="fui-filter__icon" :class="{'fui-icon__ani':show_classroom}"> |
|||
<fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon> |
|||
</view> |
|||
</view> |
|||
</fui-dropdown-menu> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="section_3"> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="top_box"> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课室：302室 |
|||
</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<view class="tag" style="background:#fad24e;">上课中</view> |
|||
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> |
|||
</view> |
|||
</view> |
|||
<view class="bottom_box"> |
|||
<view class="hint"> |
|||
已签到学生 (15/34) |
|||
</view> |
|||
<view class="list_box"> |
|||
<view class="list"> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
</view> |
|||
<view class="btn"> |
|||
详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="top_box"> |
|||
<view class="center_box"> |
|||
<view>班级：少年班</view> |
|||
<view>时间：2020-05-25 15:30 - 17:30</view> |
|||
<view>课室：302室 |
|||
</view> |
|||
<view>课程：篮球少儿课 |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<view class="tag" style="background:#fad24e;">上课中</view> |
|||
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> |
|||
</view> |
|||
</view> |
|||
<view class="bottom_box"> |
|||
<view class="hint"> |
|||
已签到学生 (15/34) |
|||
</view> |
|||
<view class="list_box"> |
|||
<view class="list"> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
<view class="itme"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|||
</view> |
|||
</view> |
|||
<view class="btn"> |
|||
详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import user from '@/api/user.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData:{}, |
|||
|
|||
//课程下拉菜单相关 |
|||
show_course:false,//是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
course_name:'课程',//选中的下拉菜单名称 |
|||
options_course: [ |
|||
{ |
|||
text: '请选择课程', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球课程1', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球课程2', |
|||
value: '2' |
|||
} |
|||
], |
|||
|
|||
//课室下拉菜单相关 |
|||
show_classroom:false,//是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
classroom_name:'课室',//选中的下拉菜单名称 |
|||
options_classroom: [ |
|||
{ |
|||
text: '请选择课室', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球201', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球室101', |
|||
value: '2' |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
//选中课程下拉菜单点击事件 |
|||
clickCourse(e){ |
|||
console.log(e) |
|||
this.course_name = e.text |
|||
this.show_course = true |
|||
}, |
|||
//显示下拉菜单 |
|||
filterTapCourse() { |
|||
//显示下拉框 |
|||
this.$refs.ref_course.show() |
|||
this.show_course = true; |
|||
}, |
|||
|
|||
|
|||
|
|||
//选中课室 |
|||
clickClassroom(e){ |
|||
console.log(e) |
|||
this.classroom_name = e.text |
|||
this.show_classroom = true |
|||
}, |
|||
//显示课室下拉菜单 |
|||
filterTapClassroom() { |
|||
//显示下拉框 |
|||
this.$refs.ref_classroom.show() |
|||
this.show_classroom = true; |
|||
}, |
|||
|
|||
//打开-发布作业页 |
|||
openObjAddView(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/job/add' |
|||
}) |
|||
}, |
|||
|
|||
//打开作业列表页 |
|||
openObjListView(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/coach/job/list' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
.title{ |
|||
padding: 20rpx 0; |
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1{ |
|||
background: #333333 100%; |
|||
width: 100%; |
|||
padding: 30rpx 28rpx; |
|||
.ul{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.li{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 10rpx; |
|||
text{ |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
text:nth-child(2){ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
text:nth-child(3){ |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
} |
|||
.today{ |
|||
border-radius: 50%; |
|||
background: #29D3B4; |
|||
text-align: center; |
|||
line-height: 42rpx; |
|||
} |
|||
.select_plan{ |
|||
background: #F59A23; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.section_2{ |
|||
margin-top: 30rpx; |
|||
padding: 0 20rpx ; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.item_box { |
|||
width: 45%; |
|||
.fui-filter__item { |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.section_3{ |
|||
margin-top: 36rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
.ul{ |
|||
padding: 0 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 30rpx; |
|||
.li{ |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.top_box{ |
|||
padding: 20rpx 30rpx; |
|||
.center_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
view{} |
|||
} |
|||
.right_box{ |
|||
.tag{ |
|||
position:absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.bottom_box{ |
|||
border-top: 1px dashed #F2F2F2; |
|||
padding: 26rpx 16rpx 0 26rpx; |
|||
.hint{ |
|||
color:#D7D7D7; |
|||
} |
|||
.list_box{ |
|||
margin-top: 22rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.list{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
.itme{ |
|||
image{ |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
.btn{ |
|||
border: 1px solid #FAD04D; |
|||
border-radius: 10rpx; |
|||
background: #434544; |
|||
color: #FAD04D; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 55rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue