【套餐】餐厅酒吧KTV等预约订座小程序系统 毕业设计 源代码下载地址:https://ke.qq.com/course/package/28466?tuin=2b10d56 有需要的请添加QQ 45157718(微信同号) 咨询
wxml代码
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong">请选择预约日期</view>
<navigator class="qukuai_you" url=""></navigator>
</view>
<view class="riqi">
<view class="riqi_list">07-06</view>
<view class="riqi_list">07-07</view>
<view class="riqi_list riqi_xuanzhong">07-08</view>
<view class="riqi_list">07-09</view>
</view>
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong">请选择人数</view>
<navigator class="qukuai_you" url=""></navigator>
</view>
<view class="zuowei">
<view class="zuowei_list">2人座</view>
<view class="zuowei_list">4人座</view>
<view class="zuowei_list zuowei_xuanzhong">8人座</view>
<view class="zuowei_list">10人以上</view>
</view>
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong">请选择座位</view>
<navigator class="qukuai_you" url=""></navigator>
</view>
<view class="zuowei">
<view class="zuowei_list">01</view>
<view class="zuowei_list">02</view>
<view class="zuowei_list zuowei_xuanzhong">03</view>
<view class="zuowei_list">04</view>
<view class="zuowei_list">05</view>
<view class="zuowei_list">06</view>
<view class="zuowei_list">07</view>
<view class="zuowei_list">08</view>
<view class="zuowei_list">09</view>
<view class="zuowei_list">10</view>
<view class="zuowei_list">11</view>
<view class="zuowei_list">12</view>
<view class="zuowei_list">13</view>
<view class="zuowei_list">14</view>
<view class="zuowei_list">15</view>
<view class="zuowei_list">16</view>
</view>
<view class="qukuai">
<view class="qukuai_zuo"></view>
<view class="qukuai_zhong myred">当前选择</view>
<navigator class="qukuai_you" url=""></navigator>
</view>
<view class="neirong">
2020-07-08 | 8人座位 | 03座号
</view>
<view class="xinxi">
<view class="xinxi_xiangmu">
<view class="xinxi_xiangmu1">我的姓名</view>
<view class="xinxi_xiangmu2"><input class="i1" type="text" /></view>
</view>
<view class="xinxi_xiangmu">
<view class="xinxi_xiangmu1">联系电话</view>
<view class="xinxi_xiangmu2"><input class="i1" type="text" /></view>
</view>
<view class="xinxi_xiangmu">
<view class="xinxi_xiangmu1">备注说明</view>
<view class="xinxi_xiangmu2"><textarea class="t1" ></textarea></view>
</view>
</view>
<view class="tijiao">
<button class="tijiao_anniu">提交座位预约</button>
</view>
wxss代码
.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;}
.riqi{
display: flex;
flex-wrap: wrap;
font-size: 13px;
}
.riqi_list{
width: 25%;
padding: 5px;
box-sizing: border-box;
text-align: center;
background-color: gainsboro;
border-radius: 5px;
border:3px solid white;
}
.riqi_xuanzhong{
background-color: orangered;
color: white;
}
.zuowei{
display: flex;
flex-wrap: wrap;
font-size: 13px;
}
.zuowei_list{
width: 25%;
padding: 5px;
box-sizing: border-box;
text-align: center;
background-color: gainsboro;
border-radius: 5px;
border:3px solid white;
}
.zuowei_xuanzhong{
background-color: orangered;
color: white;
}
.myred{color: red;}
.neirong{font-size: 15px; padding: 10px;color: green; border-bottom: 1px dotted gainsboro;}
.tijiao{padding: 5px;}
.tijiao_anniu{background-color:orangered;color: white;}
.xinxi{
padding: 5px;
font-size: 15px;
}
.xinxi_xiangmu{
padding: 5px;
border-bottom: 1px solid gainsboro;
display: flex;
}
.noborder{border: 0px;}
.xinxi_xiangmu1{
width: 5em;
}
.xinxi_xiangmu2{
flex-grow: 1;
}
.i1{border: 1px solid gainsboro;}
.t1{
width: 100%;
height: 2em;
border: 1px solid gainsboro;
}
有需要的请添加QQ 45157718(微信同号) 咨询
|