基于微信小程序毕业设计选题课题 疫苗预约小程序的设计与实现（3）疫苗预约日期时间下单

该页面主要是选择预约的日期、时间、然后下单

效果图

wxml代码

<form bindsubmit="yuyue">
<checkbox-group bindchange="mycheck" name="xuanzhe">
<view class="changci">
    <view class="qukuai">
        <view class="qukuai_zuo"></view>
        <view class="qukuai_zhong">请选择预约日期({{sp_id}} {{sp_mc}})</view>
        <navigator class="qukuai_you" url=""></navigator>
    </view>

    <view class="riqi">
        <block  wx:for="{{mulu_riqi}}" wx:key="riqi_id">
            <view class="riqi_list  {{xuanzhong_riqiid==item.riqi_id ? 'riqi_xuanzhong' : ''}}"
                data-rqid="{{item.riqi_id}}"  data-rq="{{item.xinxi_riqi}}"   bindtap="xuan_riqi" 
            >{{item.xinxi_riqi}}</view>
        </block>
    </view>

    <view class="riqi">
        <block wx:for="{{mulu_changci}}" wx:key="changci_id">
            <block wx:if="{{item.yuyue_zt=='yes'}}">
                <view class="riqi_list2"   >
                    {{item.changci_mc}} -已约
                </view>
            </block>    
            <block wx:if="{{item.yuyue_zt=='no'}}">
                <view class="riqi_list  {{xuanzhong_changciid==item.changci_id ? 'riqi_xuanzhong' : ''}} "
                    data-ccid="{{item.changci_id}}" data-changci="{{item.changci_mc}}" bindtap="xuan_changci" 
                >
                    {{item.changci_mc}}
                </view>
            </block>  


        </block>
    </view>

</view>


<view class="pingmu">
    <view class="pingmu_biaoti">{{ting}}</view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong myred">当前选择</view>
    <navigator class="qukuai_you" url=""></navigator>
</view>


</checkbox-group>


<view class="neirong">
    <view>预约时间：{{cur_riqi}}（{{cur_changci}}）  </view>
    <view>疫苗地点：{{cur_ting}} </view>
    <view>疫苗费用：{{dianying.sp_jiage}} </view>
</view>


    <block wx:if="{{user_id>0}}">
       <button class="tijiao" size='mini' form-type="submit">确认预约该疫苗</button>
    </block>
    <block wx:else>
        <navigator class="denglu"  url="/pages/huiyuan/denglu" open-type="switchTab">请先登录</navigator>
    </block>

</form>

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; padding: 10px; box-sizing: border-box;}
  .pingmu_biaoti{width: 100%; 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_list2{
  color: white;
  width: 25%;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  background-color: orangered;
  border-radius: 5px;
  border:3px solid white;
}
.riqi_xuanzhong{
    background-color: orangered;
    color: white;
}
.changci{border-bottom:1px dotted red;}
.neirong{font-size: 14px;color: green; padding: 10px;}
.tijiao{background-color:orangered; color: white; width: 100%;}

.denglu{background-color: orangered; color: white; border-radius: 10px; text-align: center;}

标签：box,background,width,预约,height,color,疫苗,毕业设计,border
来源： https://blog.51cto.com/u_13898481/2890841