标签：box background width 预约 height color 疫苗 毕业设计 border

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

效果图

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。