【套餐】微信小程序教室预约管理系统 毕业设计 源代码下载地址:https://ke.qq.com/course/package/27893?tuin=2b10d56
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;}
|