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.........完整代码请登录后点击上方下载按钮下载查看