电影院小程序选座怎么弄 (电影购票小程序毕业设计)

wxml代码

<view>

<image class="ad01" src="/img/1.png" mode="widthFix"></image>

</view>

<view class="chaxun">

<input class="chaxun_zuo" type="text" name="cx_neirong" value="{{cx_neirong}}" placeholder="请输入电影关键字"></input>

<button class="chaxun_you" type="mini" form-type="submit" >查询</button>

</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：注册账号或者使用微信登录</view>

<view class="shuoming_xiangmu">2：选择电影，选择场次，选择座位</view>

<view class="shuoming_xiangmu">3：付款，订购完毕</view>

</view>

<navigator class="yuyue" url="/pages/dingzuo/index" open-type='switchTab' >

查看所有电影

</navigator>

<view class="qukuai">

<view class="qukuai_zuo"></view>

<view class="qukuai_zhong">最新上架电影</view>

<view class="qukuai_you">所有电影</view>

</view>

<view class="zuixin">

<view class="zuixin_kecheng">

<navigator class="zuixin_kecheng_fengmian" url="/pages/dianying/xiangqing">

<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/01.jpg"></image>

</navigator>

<view class="zuixin_kecheng_biaoti">寻龙宝藏</view>

</view>

<view class="zuixin_kecheng">

<navigator class="zuixin_kecheng_fengmian" url="/pages/dianying/xiangqing">

<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/02.jpg"></image>

</navigator>

<view class="zuixin_kecheng_biaoti">狄仁杰之夺魂梦魇</view>

</view>

<view class="zuixin_kecheng">

<navigator class="zuixin_kecheng_fengmian" url="/pages/dianying/xiangqing">

<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/03.jpg"></image>

</navigator>

<view class="zuixin_kecheng_biaoti">龙虎山张天师</view>

</view>

<view class="zuixin_kecheng">

<navigator class="zuixin_kecheng_fengmian" url="/pages/dianying/xiangqing">

<image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/04.jpg"></image>

</navigator>

<view class="zuixin_kecheng_biaoti">哪吒之魔童降世</view>

</view>

</view>

wxss代码

/* pages/index/index.wxss */
.ad01{
    width: 100%;
}
.chaxun{
  background-color:#f2f2f2;
  display: flex;
  margin: 10px;
  align-items: center;
}
.chaxun_zuo{
  padding-left: 15px;
  flex-grow: 1;
}
.chaxun_you{
  border-radius: 0px;
  background-color: orange;
  color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.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{
   background-color: #f9f9f9;
    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;
}
.zuixin{ padding: 2px;display: flex; flex-wrap: wrap;}
.zuixin_kecheng{
    width: 48%;
    margin: 3px;
    padding: 3px;
    box-sizing: border-box;
    border:1px solid #f2f2f2;
    box-shadow: 1px 1px 2px gainsboro;
    color: gray;
}
.zuixin_kecheng_fengmian{
    width: 100%;
}
.zuixin_kecheng_fengmian_img{
    width: 100%;
}
.zuixin_kecheng_biaoti{
    font-size: 14px; 
}