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

wxml代碼

<!--pages/huiyuan/yuyue_list.wxml-->

<view class="yuyue">
    <view class="yuyue_biaoti">預約信息：教室02 （第3節）</view>
    <view class="yuyue_neirong">
        <view class="neirong1">預約時間：2020-06-14 星期5</view>
        <view class="neirong2">主講老師：黃菊華 | 高等數據</view>
        <view class="neirong3">聯繫電話：[phone] </view>
        <view class="neirong4">備註說明：5</view>
        <view class="neirong5">
            <view class="neirong5_zuo daishenghe"> 審覈狀態：待審覈 </view>
            <view class="neirong5_you"> 取消申請 </view>
        </view>
    </view>
</view>

<view class="yuyue">
    <view class="yuyue_biaoti">預約信息：教室02 （第3節）</view>
    <view class="yuyue_neirong">
        <view class="neirong1">預約時間：2020-06-14 星期5</view>
        <view class="neirong2">主講老師：黃菊華 | 高等數據</view>
        <view class="neirong3">聯繫電話：[phone] </view>
        <view class="neirong4">備註說明：5</view>
        <view class="neirong5">
            <view class="neirong5_zuo daishenghe"> 審覈狀態：待審覈 </view>
            <view class="neirong5_you"> 取消申請 </view>
        </view>
    </view>
</view>

<view class="yuyue">
    <view class="yuyue_biaoti">預約信息：教室02 （第3節）</view>
    <view class="yuyue_neirong">
        <view class="neirong1">預約時間：2020-06-14 星期5</view>
        <view class="neirong2">主講老師：黃菊華 | 高等數據</view>
        <view class="neirong3">聯繫電話：[phone] </view>
        <view class="neirong4">備註說明：5</view>
        <view class="neirong5">
            <view class="neirong5_zuo yishenghe"> 審覈狀態：已審覈 </view>
            <view class="neirong5_you">  </view>
        </view>
    </view>
</view>

<view class='sys_caidan'>
  <navigator class='sys_caidan_xiangmu' url='/pages/index/index' open-type='switchTab'>
    <image src='/images/a-on.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt sys_caidan_xiangmu_xuanzhong'>首頁</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu'  url='/pages/yuyue/index' open-type='switchTab'>
    <image src='/images/b-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>預約</view>
  </navigator>
  <navigator class='sys_caidan_xiangmu' url='/pages/huiyuan/index'  open-type='switchTab'>
    <image src='/images/d-off.png' class='sys_caidan_xiangmu_img'></image>
    <view class='sys_caidan_xiangmu_txt'>我的</view>
  </navigator>
</view>

wxss代碼

/* pages/huiyuan/yuyue_list.wxss */
.yuyue{
    padding: 5px;
    border-bottom: 1px dotted gainsboro ;
    margin-bottom: 5px;
}
.yuyue_biaoti{
    padding: 5px;
    background-color: #f3f3f3;
}
.yuyue_neirong{
    padding: 5px;
    color: 12px;
    color: gray;
}
.neirong1{}
.neirong2{}
.neirong3{}
.neirong4{}
.neirong5{
    display: flex;
}
.neirong5_zuo{
    color: black;
    flex-grow: 1;
}
.neirong5_you{
    color: orangered;
}
.daishenghe{color: red;}
.yishenghe{color: green;}