当前位置： 移动技术网 > 移动技术>移动开发>IOS > 电影院订票选座小程序 毕业设计 课程设计（6）我的预约、评价

电影院订票选座小程序 毕业设计 课程设计（6）我的预约、评价

2020年07月15日  | 移动技术网移动技术  | 我要评论

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wxml代码

<!-- 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModal}}">
    <view class="Dlg_biaoti">评论填写</view>
    <view class="Dlg_xing">
        几星：
        <radio-group>
            <radio>1星</radio>
            <radio>2星</radio>
            <radio>3星</radio>
            <radio>4星</radio>
            <radio>5星</radio>
        </radio-group>

    </view>
    <view  class="Dlg_neirong">
        内容：
        <input type="text" class="zhuce_zhong" placeholder="请输入评论" />
    </view>
    <view  class="Dlg_caozuo">
        <view class="Dlg_caozuo1">提交</view>
        <view class="Dlg_caozuo2" bindtap="ok" >取消</view>
    </view>
</view>

<view class="yuyue">
    <view class="yuyue_biaoti">预约电影：龙虎山张天师</view>
    <view class="yuyue_neirong">
        <view class="neirong1">预约日期：2020-06-14  </view>
        <view class="neirong2">预约场次：15:00</view>
        <view class="neirong3">附加信息：2张（总价80） </view>
        <view class="neirong4">备注说明：1排第5座</view>
        <view class="neirong5">
            <view class="neirong5_zuo daishenghe"> 付款状态：待付款 </view>
            <view class="neirong5_you"> 取消申请 </view>
        </view>
    </view>
</view>

<view class="yuyue">
    <view class="yuyue_biaoti">预约电影：龙虎山张天师</view>
    <view class="yuyue_neirong">
        <view class="neirong1">预约日期：2020-06-14  </view>
        <view class="neirong2">预约场次：15:00</view>
        <view class="neirong3">附加信息：2张（总价80） </view>
        <view class="neirong4">备注说明：2排第5座、2排第6座</view>
        <view class="neirong5">
            <view class="neirong5_zuo daishenghe"> 付款状态：已付款 </view>
            <view class="neirong5_you"  bindtap="btn" class="btn"> 去评价 </view>
        </view>
    </view>
</view>

<view class="yuyue">
    <view class="yuyue_biaoti">预约电影：龙虎山张天师</view>
    <view class="yuyue_neirong">
        <view class="neirong1">预约日期：2020-06-14  </view>
        <view class="neirong2">预约场次：15:00</view>
        <view class="neirong3">附加信息：2张（总价80） </view>
        <view class="neirong4">备注说明：1排第5座</view>
        <view class="neirong5">
            <view class="neirong5_zuo daishenghe"> 付款状态：已付款 </view>
            <view class="neirong5_you">已评价</view>
        </view>
    </view>
</view>

wxss代码

/* pages/huiyuan/yuyue_list.wxss */
.yuyue{
    padding: 5px;
    border-bottom: 1px dotted gainsboro ;
    margin-bottom: 5px;
}
.yuyue_biaoti{
    padding: 5px;
    background-color: #f3f3f3;
}
.yuyue_neirong{
    padding: 5px;
    color: 12px;
    color: gray;
}
.neirong1{}
.neirong2{}
.neirong3{}
.neirong4{}
.neirong5{
    display: flex;
}
.neirong5_zuo{
    color: black;
    flex-grow: 1;
}
.neirong5_you{
    color: orangered;
}
.daishenghe{color: red;}
.yishenghe{color: green;}





/* 外面的按钮 */
.btn{
    width: 80px;
    height: 35px;
    background: #44b549;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    border-radius: 100px;
  }
   
  /* 遮罩层 */
  .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      z-index: 9000;
      opacity: 0.5;
  }
    
  /* 弹出层 */
  .modalDlg{
      width: 90%;
      position: fixed;
      top: 150px;
      left: 0;
      right: 0;
      z-index: 9999;
      margin: 0 auto;
      background-color: #fff;
      border-radius:30px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
   .Dlg_biaoti{background-color: #f3f3f3; width: 100%; text-align: center;padding: 10px; box-sizing: border-box;}
   .Dlg_xing{ width: 100%;display: flex;font-size: 12px; padding: 5px; box-sizing: border-box;}
   .Dlg_neirong{ width: 100%; display: flex; font-size: 15px;padding: 5px;box-sizing: border-box;}
   .Dlg_caozuo{ width: 100%; display: flex; font-size: 15px;}
   .Dlg_caozuo1{ width: 50%; text-align: center;background-color: orangered; color: white;padding: 10px;box-sizing: border-box;}
   .Dlg_caozuo2{ width: 50%;text-align: center;background-color: orange; color: white;padding: 10px;box-sizing: border-box;}

本文地址：https://blog.csdn.net/u013818205/article/details/107313678

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网