电影院订票选座小程序毕业设计课程设计（4）选座页面

wxml代码

<checkbox-group bindchange="mycheck">
<view class="changci"><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 riqi_xuanzhong">07-07</view><view class="riqi_list">07-08</view><view class="riqi_list">07-09</view></view><view class="riqi"><view class="riqi_list">12：30</view><view class="riqi_list">14：30</view><view class="riqi_list riqi_xuanzhong">17：30</view><view class="riqi_list">19：30</view></view>
</view><view class="fenlei"><!-- 左侧分类 --><view class='zuo' style='height:{{winHeight-100}}px'><view class="kongbai"></view>                         <view><view class="paishu">1</view><view class="paishu">2</view><view class="paishu">3</view><view class="paishu">4</view><view class="paishu">5</view><view class="paishu">6</view><view class="paishu">7</view><view class="paishu">8</view></view></view><!-- 右侧 产品--><scroll-view scroll-y class='you' style='height:{{winHeight-100}}px'><view class="pingmu"><view class="pingmu_biaoti">2号厅银屏</view></view><view class="h30"><view class="xinxi1"><view class="xinxi1_yanse"></view><view class="xinxi1_wenzi">可选</view></view><view class="xinxi2"><view class="xinxi2_yanse"></view><view class="xinxi2_wenzi">已售</view></view><view class="xinxi3"><view class="xinxi3_yanse"></view><view class="xinxi3_wenzi">已选</view></view>                        </view><view class="zuowei"><checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  <checkbox class="zuowei_list2" value='11'></checkbox><checkbox class="zuowei_list2" value='12'></checkbox><checkbox class="zuowei_list2" value='13'></checkbox><checkbox class="zuowei_list2" value='14'></checkbox><checkbox class="zuowei_list2" value='15'></checkbox><checkbox class="zuowei_list2" value='16'></checkbox><checkbox class="zuowei_list2" value='17'></checkbox><checkbox class="zuowei_list2 zuowei_xuanzhong" disabled value='18'></checkbox><checkbox class="zuowei_list2 zuowei_xuanzhong" disabled value='19'></checkbox><checkbox class="zuowei_list2" value='20'>10</checkbox>  <checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  <checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  <checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  <checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  <checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  <checkbox class="zuowei_list2" value='1'></checkbox><checkbox class="zuowei_list2" value='2'></checkbox><checkbox class="zuowei_list2" value='3'></checkbox><checkbox class="zuowei_list2" value='4'></checkbox><checkbox class="zuowei_list2" value='5'></checkbox><checkbox class="zuowei_list2" value='6'></checkbox><checkbox class="zuowei_list2" value='7'></checkbox><checkbox class="zuowei_list2" value='8'></checkbox><checkbox class="zuowei_list2" value='9'></checkbox><checkbox class="zuowei_list2" value='10'></checkbox>  </view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong myred">当前选择（总计：110 元）</view><navigator class="qukuai_you" url=""></navigator>
</view>
<view class="neirong"><view>日期和场次：2020-07-07（17：30）  </view><view>座位：第3排（05、06号）</view>
</view>
<button class="tijiao" size='mini'>立即支付</button></scroll-view></view></checkbox-group>

wxss代码

 /*左右框架：总体样式*/.fenlei{height: 100%;              /*高度*/box-sizing: border-box;    /*宽度包含padding*/background-color: #f4f4f4; /*背景颜色*/display: flex;  /*Flex布局*/width: 100%;    /*宽度*/}/*框架左边样式*/.zuo{width: 10%; /*宽度*/border-right: 1px solid #ddd; /*右侧边框*/font-size: 14px; /*字体大小*/height: 100%;    /*高度*/display: flex;   /*FLex布局*/flex-direction: column; /*改变Flex默认布局row为column*/}/*框架右边样式*/.you{width: 90%; /*宽度*/background-color: white;/*背景颜色*/padding-top: 5px; box-sizing: border-box;}.kongbai{ height: 60px;}.h30{height: 30px; display: flex;padding: 3px; justify-content: center; box-sizing: border-box;}.xinxi1{display: flex;align-items: center; width: 25%;}.xinxi1_yanse{background-color: gainsboro;width: 16px;height: 16px;}.xinxi1_wenzi{}.xinxi2{display: flex;align-items: center; width: 25%;}.xinxi2_yanse{background-color: orangered;width: 16px;height: 16px;}.xinxi2_wenzi{}.xinxi3{display: flex;align-items: center; width: 25%;}.xinxi3_yanse{background-color: green;width: 16px;height: 16px;}.xinxi3_wenzi{}.paishu{text-align: center;height: 35px;line-height: 35px;}.pingmu{width: 100%;display: flex;justify-content: center;  height: 30px;}.pingmu_biaoti{width: 80%; background-color: gainsboro; color:orangered; text-align: center; height: 30px; line-height: 30px;}.zuowei{ display: flex;flex-wrap: wrap;font-size: 11px;}
.zuowei_list{width:10%;padding: 5px; height: 35px;box-sizing: border-box;text-align: center;background-color: gainsboro;border-radius: 5px;border:3px solid white;
}.zuowei_list2{width:10%;padding: 2px; height: 35px;box-sizing: border-box;text-align: center;background-color: gainsboro;border-radius: 5px;border:3px solid white;
}.zuowei_xuanzhong{background-color: orangered;color: white;
}.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;
}
.changci{ height: 100px; border-bottom:1px dotted red;}
.neirong{font-size: 14px;color: green; padding: 10px;}
.tijiao{background-color:orangered; color: white; width: 100%;}

电影院订票选座小程序毕业设计课程设计（4）选座页面相关推荐

电影院订票选座小程序毕业设计课程设计（3）电影详情页面
wxml代码 <view class="kecheng"><view class="kecheng_fengmian"><imag ...
电影院订票选座小程序毕业设计课程设计（2）电影列表页面
wxml代码 <view class="chaxun"><input class="chaxun_zuo" type="text&q ...
企业公司微信小程序毕业设计课程设计界面欣赏
小程序毕设作品之微信预约订座小程序毕业设计（7）中期检查报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信预约订座小程序毕业设计（5）任务书
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信预约订座小程序毕业设计（4）开题报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信预约订座小程序毕业设计（2）小程序功能
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信预约订座小程序毕业设计（1）开发概要
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
基于Vue+Springboot开发的电影订票购票微信小程序
开发工具: Eclipse + WebStorm + 微信开发者工具[三大工具齐聚一堂,精品推荐] 电影购票小程序,分为三部分:小程序端.商家(影院)后台与官方后台目录说明 weapp-weimai ...

电影院订票选座小程序毕业设计课程设计（4）选座页面

wxml代码

wxss代码

电影院订票选座小程序毕业设计课程设计（4）选座页面相关推荐

最新文章

热门文章

电影院订票选座小程序 毕业设计 课程设计（4）选座页面

wxml代码

wxss代码

电影院订票选座小程序 毕业设计 课程设计（4）选座页面相关推荐

最新文章

热门文章

电影院订票选座小程序毕业设计课程设计（4）选座页面

电影院订票选座小程序毕业设计课程设计（4）选座页面相关推荐