Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
zdm
/
sr-publicServicePlatform
İzle 1
Yıldızla 0
Çatalla 0
Dosyalar
Kaynağa Gözat

开发预约步骤组件

linehang 7 yıl önce
ebeveyn
05e64cdc74
işleme
4ca306b5a7
5 değiştirilmiş dosya ile 254 ekleme ve 76 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 91 0
      component/common/appointment-step.js
  2. 150 0
      css/common.css
  3. 0 68
      css/paging.css
  4. 11 8
      page/home/html/home.html
  5. 2 0
      page/home/js/home.js

+ 91 - 0
component/common/appointment-step.js
Dosyayı Görüntüle 

@ -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;
 
				}
 
			})
 
		}
 
	})
 
})()

+ 150 - 0
css/common.css
Dosyayı Görüntüle 

@ -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;
 
}

+ 0 - 68
css/paging.css
Dosyayı Görüntüle 

@ -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;
 
}

+ 11 - 8
page/home/html/home.html
Dosyayı Görüntüle 

@ -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>

+ 2 - 0
page/home/js/home.js
Dosyayı Görüntüle 

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