开发预约步骤组件

component/common/appointment-step.js

@@ -0,0 +1,91 @@
(function() {
	Vue.component('appointment-step', {
		template: `<div class="div-step-header">
				<div class="div-head-img">
					<div class="c-f16 c-fff pt10 pl20">预约步骤</div>
				</div>
				<div class="mt80 div-step-content">
					<div class="ml14">
						<div class="div-step-item" :class="{\'active\': isFirstStep}">
							<span class="c-f16" v-show="!isFirstStep">1</span>
							<div class="div-active-item" v-show="isFirstStep"></div>
						</div>
						<div class="div-step-line"></div>
						<div class="c-f16 div-step-item" :class="{\'active\': isSecondStep}">
							<span class="c-f16" v-show="!isSecondStep">2</span>
							<div class="div-active-item" v-show="isSecondStep"></div>
						</div>
						<div class="div-step-line"></div>
						<div class="c-f16 div-step-item" :class="{\'active\': isThirdStep}">
							<span class="c-f16" v-show="!isThirdStep">3</span>
							<div class="div-active-item" v-show="isThirdStep"></div>
						</div>
						<div class="div-step-line"></div>
						<div class="c-f16 div-step-item" :class="{\'active\': isFourStep}">
							<span class="c-f16" v-show="!isFourStep">4</span>
							<div class="div-active-item" v-show="isFourStep"></div>
						</div>
					</div>
					<div class="ml20">
						<div>
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isFirstStep}">选择医院</div>
							<div class="c-f14 c-909090 ">选择您满意的医院</div>
						</div>
						<div class="mt40">
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isSecondStep}">选择医生</div>
							<div class="c-f14 c-909090">选择适合您的医生</div>
						</div>
						<div class="mt40">
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isThirdStep}">选择就诊时间</div>
							<div class="c-f14 c-909090">选择您希望的就诊时间</div>
						</div>
						<div class="mt40">
							<div class="c-f16 c-323232" :class="{\'div-content-active\': isFourStep}">确认预约</div>
							<div class="c-f14 c-909090">核对个人信息，确认预约</div>
						</div>
					</div>
				</div>
				<div class="div-step-bottom">
					<img src="../../../images/icon_tishi2.png" width="19" height="19" />
					<div class="c-f14 c-ff8787 ml10">预约完成后，请凭预约信息到<br/>医院救治。</div>
				</div>
			</div>`,
		props: [],
		data: function() {
			return {
				isFirstStep: false,
				isSecondStep: false,
				isThirdStep: false,
				isFourStep: false,
			}
		},
		mounted: function() {
			var vm = this;
			EventBus.$on("jump-step", function(arg) {
				var step = arg.step;
				switch(step) {
					case 1:
						vm.isFirstStep = true;
						break;
					case 2:
						vm.isFirstStep = true;
						vm.isSecondStep = true;
						break;
					case 3:
						vm.isFirstStep = true;
						vm.isSecondStep = true;
						vm.isThirdStep = true;
						break;
					case 4:
						vm.isFirstStep = true;
						vm.isSecondStep = true;
						vm.isThirdStep = true;
						vm.isFourStep = true;
						break;
					default:
						break;
				}
			})
		}
	})
})()

css/common.css

@@ -0,0 +1,150 @@
/*分页*/
.page_div {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	font-family: "microsoft yahei";
	color: #666666;
	margin-right: 10px;
	padding-left: 20px;
	text-align: center;
}
.page_div a {
	min-width: 30px;
	height: 28px;
	border: 1px solid #ddd;
	text-align: center;
	margin: 0 4px;
	cursor: pointer;
	line-height: 28px;
	color: #666666;
	font-size: 14px;
	display: inline-block;
}
#firstPage,
#lastPage {
	width: 50px;
}
#firstPage,
#lastPage,
{
	width: 50px;
	color: #666;
	border: 1px solid #ddd;
}
#prePage,
#nextPage {
	width: 70px;
	color: #666;
	border: 1px solid #ddd;
}
#firstPage:hover,
#lastPage:hover,
#prePage:hover,
#nextPage:hover {
	color: #fff;
}
.page_div .current,
.page_div a:hover {
	background-color: #0AD9C9;
	border-color: #0AD9C9;
	color: #FFFFFF;
}
.totalPages {
	margin: 0 10px;
}
.totalPages span,
.totalSize span {
	color: #0AD9C9;
	margin: 0 5px;
	font-size: 14px;
}
/*预约步骤*/
.mt80 {
	padding-top: 80px;
}
.c-ff8787 {
	color: #ff8787;
}
.ml14 {
	margin-left: 14px;
}
.div-step-header {
	width: 256px;
	height: 454px;
	background: #ecfffe;
	position: relative;
	border: 1px solid #d1efed;
	margin-left: 20px;
}
.div-step-header .div-head-img {
	background: url(../images/icon_biqoain.png) no-repeat;
	width: 119px;
	height: 37px;
	background-size: 119px 37px;
	position: absolute;
	top: 10px;
	left: -8px;
}
.div-step-content {
	height: 397px;
	display: -webkit-box;
	clear: both;
}
.div-step-item {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	text-align: center;
	line-height: 40px;
	border: 1px solid #0ad8c8;
}
.div-step-item span {
	color: #0ad8c8;
}
.div-step-line {
	width: 3px;
	height: 42px;
	background: #0AD9C9;
	margin-left: 20px;
}
.div-step-item.active {
	background: #0AD9C9;
}
.div-step-item .div-active-item {
	background: url(../images/icon_gouxuan.png) no-repeat;
	width: 17px;
	height: 17px;
	margin: 10px;
}
.div-step-bottom {
	height: 55px;
	background: #F1F7DD;
	padding: 10px 0px 10px 16px;
	display: -webkit-box;
}
.div-content-active{
	color: #0AD9C9;
    text-decoration: underline;
}

css/paging.css

@@ -1,68 +0,0 @@
.page_div {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	font-family: "microsoft yahei";
	color: #666666;
	margin-right: 10px;
	padding-left: 20px;
	text-align: center;
}
.page_div a {
	min-width: 30px;
	height: 28px;
	border: 1px solid #ddd;
	text-align: center;
	margin: 0 4px;
	cursor: pointer;
	line-height: 28px;
	color: #666666;
	font-size: 14px;
	display: inline-block;
}
#firstPage,
#lastPage {
	width: 50px;
}
#firstPage,
#lastPage,
{
	width: 50px;
	color: #666;
	border: 1px solid #ddd;
}
#prePage,
#nextPage {
	width: 70px;
	color: #666;
	border: 1px solid #ddd;
}
#firstPage:hover,
#lastPage:hover,
#prePage:hover,
#nextPage:hover {
	color: #fff;
}
.page_div .current,
.page_div a:hover {
	background-color: #0AD9C9;
	border-color: #0AD9C9;
	color: #FFFFFF;
}
.totalPages {
	margin: 0 10px;
}
.totalPages span,
.totalSize span {
	color: #0AD9C9;
	margin: 0 5px;
	font-size: 14px;
}

page/home/html/home.html

@@ -10,19 +10,21 @@
		<meta name="keywords" content="首页">
		<meta name="description" content="首页">
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
		<link rel="stylesheet" type="text/css" href="../../../css/paging.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		
	</head>
	<body>
		<div id="main">
			<page-header></page-header>
            <page-footer></page-footer>
			<appointment-step></appointment-step>
			<div id="page" class="page_div"></div>
		</div>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
@@ -37,9 +39,10 @@
		<!--<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/paging.js"></script>
		<script src="../../../component/common/event-bus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/header.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/footer.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/event-bus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/footer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/appointment-step.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/home.js"></script>
	</body>

page/home/js/home.js

@@ -13,5 +13,7 @@ new Vue({
				//回调的页数
			}
		})
		
		EventBus.$emit("jump-step",{step:3});//step:跳转的步数
    }
})