You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
< view >
< view class = "begin" > 我的班级 < / view >
< view class = "page-body" >
< view class = "btn-area" >
< navigator url = "/pages/index/question/question" hover -class = " navigator -hover " >
< button type = "default" class = "btn-with-icon" >
< view class = "btn-content" >
< image class = "btn-icon" src = '../../static/class1.png' > < / image >
< view class = "shangke" > 上课次数 ： 9 < / view >
< / view >
< view class = "btn-text" > 签到模拟 < / view >
< image src = '../../static/forw.png' class = "forward-icon" > < / image >
< / button >
< / navigator >
< navigator url = "/pages/index/attendance/attendance" hover -class = " navigator -hover " >
< button type = "default" class = "btn-with-icon" >
< view class = "btn-content" >
< image class = "btn-icon" src = '../../static/class2.png' > < / image >
< view class = "shangke" > 上课次数 ： 5 < / view >
< / view >
< view class = "btn-text" > 点名模拟 < / view >
< image src = '../../static/forw.png' class = "forward-icon" > < / image >
< / button >
< / navigator >
< / view >
< / view >
< / view >
< / template >
< script >
export default {
data ( ) {
return { }
} ,
methods : { }
}
< / script >
< style >
. begin {
font - size : 38 rpx ;
font - weight : bold ;
margin - top : 10 px ;
margin - bottom : 10 px ;
margin - left : 8 px ;
}
. page - body {
display : flex ;
justify - content : center ;
}
. btn - area {
width : 90 % ;
height : 320 rpx ;
}
. btn - with - icon {
height : 95 px ;
padding - left : 10 rpx ;
border - radius : 5 px ;
display : flex ;
align - items : center ; /* 使内容在垂直方向上居中 */
justify - content : space - between ; /* 图标与文本分开并推到两端 */
margin - bottom : 18 px ; /* 在每个按钮之间添加间隔 */
}
. btn - content {
display : flex ;
flex - direction : column ; /* 垂直排列 */
align - items : flex - start ; /* 靠左对齐 */
}
. btn - icon {
width : 50 rpx ;
height : 50 rpx ;
margin - top : 20 rpx ;
margin - bottom : 5 rpx ; /* 图标和上课次数之间的间距 */
}
. shangke {
font - size : 12 px ;
margin - top : auto ; /* 将上课次数推到底部 */
}
. btn - text {
text - align : left ; /* 文字水平靠左 */
font - size : 40 rpx ;
margin - left : 60 rpx ; /* 根据需要调整左边距，以使其与图标齐平 */
margin - top : 0 ; /* 可根据需要调整上边距 */
}
. forward - icon {
width : 32 rpx ;
height : 32 rpx ;
margin - left : auto ; /* 推到右侧 */
}
< / style >
