Browse Source

style(coach): 优化教练端班级列表页面样式

-调整了页面布局和颜色方案,提升视觉效果
- 优化了班级列表项的样式,增加了圆形头像和到期提醒按钮- 改进了搜索框样式,使其与整体风格更协调
- 删除了多余的注释代码
master
liutong 1 year ago
parent
commit
2f6b4c3f9c
  1. 95
      pages/coach/class/list.vue

95
pages/coach/class/list.vue

@ -77,7 +77,7 @@
少年班 少年班
</view> </view>
<view class="btn_box"> <view class="btn_box">
<view>2人即将到期</view> <!-- <view>2人即将到期</view>-->
</view> </view>
</view> </view>
<view class="box_2"> <view class="box_2">
@ -94,7 +94,7 @@
</view> </view>
</view> </view>
<!-- 底部导航--> <!-- 底部导航-->
<AQTabber/> <AQTabber/>
</view> </view>
</template> </template>
@ -155,18 +155,97 @@ export default {
color: #FFFFFF; color: #FFFFFF;
.section_1 { .section_1 {
.left{ border-radius: 10rpx;
background-color: #525252;
::v-deep .fui-input__wrap{
border-radius: 10rpx !important;
background-color: #525252 !important;
}
::v-deep .fui-input__background{
background-color: #525252 !important;
}
.input_item {
height: 60rpx;
::v-deep .uni-input-wrapper{
.uni-input-placeholder {
font-size: 28rpx !important;
}
}
}
::v-deep .uni-input-input {
color: #fff;
}
}
.section_2{
margin-top: 34rpx;
.ul{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; gap: 24rpx;
gap: 12rpx; .li{
background: #404045;
padding: 50rpx 36rpx 46rpx;
border-radius: 16rpx;
display: flex;
gap: 32rpx;
.left{
.pic{ .pic{
width: 100rpx; border-radius: 50%;
width: 92rpx;
height: 92rpx;
}
}
.right{
display: flex;
flex-direction: column;
gap: 28rpx;
.box_1{
display: flex;
align-items: center;
gap: 36rpx;
.name{
font-size: 28rpx;
}
.btn_box{
view{
border: 1px solid #FAD04D;
border-radius: 10rpx;
width: 182rpx;
height: 48rpx;
line-height: 42rpx;
text-align: center;
font-size: 26rpx;
color: #FAD04D;
}
} }
.name{}
} }
.right{} .box_2{
display: flex;
align-items: center;
gap: 44rpx;
.user_list{
display: flex;
align-items: center;
gap: 14rpx;
image{
border-radius: 50%;
width: 48rpx;
height: 48rpx;
}
} }
.num{}
}
}
}
}
}
} }

Loading…
Cancel
Save