vue实现移动端手机端时间预约效果代码-html代码-BFW代码库

vue实现移动端手机端时间预约效果代码

代码语言：html

所属分类：选择器

代码描述：vue实现移动端手机端时间预约效果代码，可选择具体日期和时间

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
    @charset "utf-8";
/* DaTouWang URL: www.datouwang.com */
/* gloabal css */
body{
        font-family:Helvetica;
        font-size:14px;
        line-height:1.6;
        color:#666;
        margin:0;
}
html{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
}
[v-cloak]{display:none;}
ul,ol{
        margin:0;
        padding:0;
}
li{list-style:none;}
a:link,a:visited,a:hover,a:active{
        color:#666;
        text-decoration:none;
}
p{margin:0;}
button,input{
        -webkit-appearance:none;
        background:none;
        border:none;
        outline:none;
}


#popup{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
}
#popup .overlay{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.2);
}
#popup .content{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        background:#fff;
}
#popup .content .srv-time-selector{}
#popup .content .srv-time-selector .bar{}
#popup .content .srv-time-selector .bar>h1{
        text-align:center;
        font-weight:normal;
        margin:0;
        font-size:14px;
        color:#222;
        height:42px;
        line-height:42px;
        border-bottom:1px solid #f0f0f0;
}
#popup .content .srv-time-selector .bar>i{}
#popup .content .srv-time-selector .bd{}
#popup .content .srv-time-selector .bd .header{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        overflow: hidden;
        background:#f7f7f7;
}
#popup .content .srv-time-selector .bd .header .data-picker{
        overflow-x:auto;
        overflow-y:visible;
        -webkit-box-flex: 1;
        -moz-flex: 1;
        flex: 1;        
}
#popup .content .srv-time-selector .bd .header .data-picker .wrapper{
        white-space:nowrap;
}
#popup .content .srv-time-selector .bd .header .data-picker .wrapper>button{
        position:relative;
        overflow:hidden;
        border-bottom: 2px solid #f7f7f7;
        margin-right: 1rem;
        height: 50px;
        text-align:center;
}
#popup .content .srv-time-selector .bd .header .data-picker .wrapper>button.current,
#popup .content .srv-time-selector .bd .header .data-picker .wrapper>button.current span{
        color:#68c9d0;
}
#popup .content .srv-time-selector .bd .header .data-picker .wrapper>button.current:after{
        position:absolute;
        bottom:0;
        content:'';
        width:82%;
        display:block;
        height:2px;
        background:#68c9d0;
}
#popup .content .srv-time-selector .bd .header .data-picker .wrapper>button>span{
        display:block;
        color:#999;
        font-size:12px;
}
#popup .content .srv-time-selector .bd .header .cal{
        flex:0 0 80px;
        -webkit-box-flex: 0;
  -ms-flex: 0 0 80px;   
        width:80px;
        border-left:1px solid #e6e6e6;
        color:#999;
}
#popup .content .srv-time-selector .bd .header .cal img{
        display:block;
        margin:0 auto;
}
#popup .content .srv-time-selector .bd .header .cal>span{}
#popup .content .srv-time-selector .bd .no-sel{
        margin:10px;
        padding:5px 0;
        text-align:center;
        border:1px solid #979797;
        color:#979797;  
}
#popup .content .srv.........完整代码请登录后点击上方下载按钮下载查看