|
|
|
|
|
<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: 38rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.page-body {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-area {
|
|
|
|
|
|
width: 90%;
|
|
|
|
|
|
height: 320rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-with-icon {
|
|
|
|
|
|
height: 95px;
|
|
|
|
|
|
padding-left: 10rpx;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center; /* 使内容在垂直方向上居中 */
|
|
|
|
|
|
justify-content: space-between; /* 图标与文本分开并推到两端 */
|
|
|
|
|
|
margin-bottom: 18px; /* 在每个按钮之间添加间隔 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-content {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column; /* 垂直排列 */
|
|
|
|
|
|
align-items: flex-start; /* 靠左对齐 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-icon {
|
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
margin-bottom: 5rpx; /* 图标和上课次数之间的间距 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.shangke {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
margin-top: auto; /* 将上课次数推到底部 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.btn-text {
|
|
|
|
|
|
text-align: left; /* 文字水平靠左 */
|
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
margin-left: 60rpx; /* 根据需要调整左边距，以使其与图标齐平 */
|
|
|
|
|
|
margin-top: 0; /* 可根据需要调整上边距 */
|
|
|
|
|
|
}
|
|
|
|
|
|
.forward-icon {
|
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
|
margin-left: auto; /* 推到右侧 */
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
