【套餐】微信小程序教室预约管理系统 毕业设计

源代码下载地址：https://ke.qq.com/course/package/27893?tuin=2b10d56

wxml代码

<view>
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新资讯</view>
    <navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=资讯中心">所有>></navigator>
</view>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 八月份上架新试题目录通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 用户微信直接登录功能开通</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 关于违规会员处理的通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<view class="shuoming">
    <view class="shuoming_biaoti">预约教室使用说明</view>
    <view class="shuoming_xiangmu">1：需要登录，需提前1天登陆系统预约</view>
    <view class="shuoming_xiangmu">2：先选定要使用的教室；选定日期和节次的位置处，单击“预约”</view>
    <view class="shuoming_xiangmu">3：正确填写主讲内容、主讲人，然后按“提交预约”按扭</view>
</view>
<navigator class="yuyue" url="/pages/yuyue/index"  open-type='switchTab' >
    进入预约系统
</navigator>

wxss代码

/* pages/index/index.wxss */
.ad01{
    width: 100%;
}
.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}
.xinxi {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    color: gray;
  }
  .xinxi-icon {
    width: 19px;
    height: 19px;
  }
  
  .xinxi-text {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .xinxi-arrow {
    width: 13px;
    height: 13px;
  }
.shuoming{
    padding: 5px;
    color: gray;
    font-size: 15px;
}
.shuoming_biaoti{
    font-weight: bold;
    color: orangered;
    border-bottom: 1px solid gainsboro;
    padding: 5px 0px;
}
.shuoming_xiangmu{
    padding: 5px 0px;
    border-bottom: 1px dotted  gainsboro;
}
.yuyue{
    background-color: orangered;
    color: white;
    text-align: center;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}