教室預約微信小程序 畢業設計（2）預約頁面

wxml代碼

<!--pages/yuyue/index.wxml-->
<view class="jiaoshi">
    <view class="jiaoshi_list">教室01</view>
    <view class="jiaoshi_list jiaoshi_xuanzhong">教室02</view>
    <view class="jiaoshi_list">教室03</view>
    <view class="jiaoshi_list">教室04</view>
    <view class="jiaoshi_list">教室05</view>
    <view class="jiaoshi_list">教室06</view>
</view>


<view class="tishi">
    當前教室：教室02 | 2020-06-11 星期4
</view>



<view class="yuyue">
    <view  class="yuyue_xiangmu biaoti">
        <view class="yuyue_xiangmu1">時間</view>
        <view class="yuyue_xiangmu2">日期</view>
        <view class="yuyue_xiangmu3">操作</view>
        <view class="yuyue_xiangmu4">星期</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第1節</view>
        <view class="yuyue_xiangmu2">06-11</view>
        <view class="yuyue_xiangmu3 yuyue_guoqi">過期</view>
        <view class="yuyue_xiangmu4">星期4</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第2節</view>
        <view class="yuyue_xiangmu2 yuyue_guoqi">06-11</view>
        <view class="yuyue_xiangmu3 yuyue_yes">
            <view>黃菊華</view>
            <view>高等數學</view>
        </view> 
        <view class="yuyue_xiangmu4">星期4</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第3節</view>
        <view class="yuyue_xiangmu2">06-11</view>
        <view class="yuyue_xiangmu3 yuyue_guoqi">過期</view>
        <view class="yuyue_xiangmu4">星期4</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第4節</view>
        <view class="yuyue_xiangmu2">06-11</view>
         <view class="yuyue_xiangmu3 yuyue_guoqi">過期</view>
        <view class="yuyue_xiangmu4">星期4</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第5節</view>
        <view class="yuyue_xiangmu2">06-11</view>
        <view class="yuyue_xiangmu3 yuyue_guoqi">過期</view>
        <view class="yuyue_xiangmu4">星期4</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第6節</view>
        <view class="yuyue_xiangmu2">06-11</view>
         <view class="yuyue_xiangmu3 yuyue_guoqi">過期</view>
        <view class="yuyue_xiangmu4">星期4</view>
    </view>       
    <view class="h10"></view>

    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第1節</view>
        <view class="yuyue_xiangmu2">06-12</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">預約</navigator> 
        <view class="yuyue_xiangmu4">星期5</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第2節</view>
        <view class="yuyue_xiangmu2 yuyue_yes">06-12</view>
        <view class="yuyue_xiangmu3 yuyue_yes">
            <view>黃菊華</view>
            <view>高等數學</view>
        </view> 
        <view class="yuyue_xiangmu4">星期5</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第3節</view>
        <view class="yuyue_xiangmu2">06-12</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">預約</navigator> 
        <view class="yuyue_xiangmu4">星期5</view>
    </view>
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第4節</view>
        <view class="yuyue_xiangmu2">06-12</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">預約</navigator> 
        <view class="yuyue_xiangmu4">星期5</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第5節</view>
        <view class="yuyue_xiangmu2">06-12</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">預約</navigator> 
        <view class="yuyue_xiangmu4">星期5</view>
    </view>    
    <view  class="yuyue_xiangmu">
        <view class="yuyue_xiangmu1">第6節</view>
        <view class="yuyue_xiangmu2">06-12</view>
        <navigator class="yuyue_xiangmu3" url="/pages/yuyue/add">預約</navigator> 
        <view class="yuyue_xiangmu4">星期5</view>
    </view> 
    <view class="h10"></view>
</view>

wxss代碼

/* pages/yuyue/index.wxss */
.jiaoshi{
    display: flex; 
    flex-wrap: wrap;
    border-bottom: 3px solid orangered;
}
.jiaoshi_list{
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    background-color: gainsboro;
    border-radius: 5px;
    border:3px solid white;
}
.jiaoshi_xuanzhong{
    background-color: orangered;
    color: white;
}

.tishi{
    padding: 5px;
    background-color: #f3f3f3;
    font-size: 12px;
    border-bottom: 3px solid orangered;
}

.yuyue{
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
.yuyue_xiangmu{
    display: flex;
    padding: 5px;
    border-bottom: 1px solid gainsboro;
}
.yuyue_xiangmu1{
    padding: 5px;
    width: 20%;
    border-right: 1px solid gainsboro;
}
.yuyue_xiangmu2{
    padding: 5px;
    width: 20%;
    border-right: 1px solid gainsboro;
}
.yuyue_xiangmu3{
    padding: 5px;
    width: 40%;
    border-right: 1px solid gainsboro;
}
.yuyue_xiangmu4{
    padding: 5px;
    width: 20%;
}
.yuyue_guoqi{
    text-decoration: line-through;
    color: red;
}
.yuyue_yes{
    color:green;
    font-weight: bold;
}.biaoti{
    font-weight: bold;
}
.h10{ height: 10px; background-color: #f3f3f3;}