all

css/scroll.css

@@ -0,0 +1,40 @@
+/*---滚动条默认显示样式--*/ 
+
+::-webkit-scrollbar-thumb{ 
+
+background-color:rgba(0, 147, 255, 0.4); 
+
+height:50px; 
+
+outline-offset:-2px; 
+
+outline:2px solid rgba(0, 0, 0, 0); 
+
+-webkit-border-radius:4px; 
+
+border: 2px solid rgba(0, 0, 0, 0);
+
+}
+
+
+
+/*---滚动条大小--*/ 
+
+::-webkit-scrollbar{ 
+
+width:8px; 
+
+height:8px; 
+
+
+}
+
+/*---滚动框背景样式--*/ 
+
+::-webkit-scrollbar-track-piece{ 
+
+background-color:rgba(0, 0, 0, 0); 
+
+-webkit-border-radius:0; 
+
+}

css/style.css

@@ -0,0 +1,201 @@
+*{
+	margin: 0;
+	padding: 0;
+}
+
+html,body {
+	width: 100%;
+	height: 100%;
+}
+
+#app {
+	width: 100%;
+	height: 100%;
+	background: url(../img/pc-bg.png) no-repeat top center;
+	background-size: cover; 
+	box-sizing: border-box;
+	padding-top: 1px;
+}
+
+#app > h1 {
+	margin-top: 200px;
+	font-size: 80px;
+	font-family: Source Han Sans CN;
+	font-weight: 500;
+	color: #FFFFFF;
+	text-align: center;
+	letter-spacing: 5px;
+	text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
+}
+
+.sel-div {
+	width: 507px;
+	height: 357px;
+	margin: 80px auto;
+	position: relative;
+}
+.sel-div > .sel-input{
+	width: 484px;
+	height: 59px;
+	margin: 4px 17px 0px 6px;
+	box-sizing: border-box;
+	padding-left: 41px;
+	display: flex;
+	align-items: center;
+	background: url(../img/pc-sel.png) no-repeat center;
+	background-size: 100% 100%;
+	cursor: pointer;
+	position: relative; 
+	z-index: 2;
+}
+
+.sel-div > .sel-input > p {
+	line-height: 59px;
+	font-size: 26px;
+	font-family: Source Han Sans CN;
+	font-weight: 400;
+	color: #FFFFFF;
+	letter-spacing: 5px;
+	flex: 1;
+}
+.sel-div > .sel-input > img {
+	margin-right: 39px;
+}
+
+.sel-div > .sel-body {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: url(../img/pc-sel-body.png) no-repeat center;
+	background-size: 100% 100%;
+}
+
+.set-place {
+	height: 63px;
+}
+.option-body {
+	height: calc(100% - 80px);
+	width: calc(100% - 18px);
+	overflow-y: auto;
+}
+.option-body >div {
+	font-size: 20px;
+	font-family: Source Han Sans CN;
+	font-weight: 400;
+	color: #FFFFFF;
+	padding: 10px 20px 10px 40px;
+	letter-spacing: 4px;
+	cursor: pointer;
+}
+
+.option-body >div:hover {
+	font-size: 27px;
+	font-family: Source Han Sans CN;
+	font-weight: 500;
+}
+
+.option-body >.active-option {
+	font-size: 27px;
+	font-family: Source Han Sans CN;
+	font-weight: 500;
+}
+
+@media screen and (max-width: 500px) {
+	#app {
+		background: url(../img/mobile-bg.png) no-repeat top center;
+		background-size: cover; 
+	}
+	#app > h1 {
+		margin-top: 130px;
+		font-size: 35px;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		color: #FFFFFF;
+		letter-spacing: 4px;
+		text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
+	}
+	
+	.sel-div {
+		width: 255.5px;
+		height: 178.5px;
+		margin: 33px auto;
+		position: relative;
+	}
+	
+	.sel-div > .sel-input{
+		width: 242px;
+		height: 30px;
+		margin: 1px 6px 0px 5.5px;
+		box-sizing: border-box;
+		padding-left: 20.5px;
+		display: flex;
+		align-items: center;
+		background: url(../img/mobile-sel.png) no-repeat center;
+		background-size: 100% 100%;
+		cursor: pointer;
+		position: relative; 
+		z-index: 2;
+	}
+	
+	.sel-div > .sel-input > p {
+		line-height: 30px;
+		font-size: 14px;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #FFFFFF;
+		letter-spacing: 2px;
+		flex: 1;
+	}
+	.sel-div > .sel-input > img {
+		margin-right: 19.5px !important;
+		width: 10.5px;
+		height: 6px;
+	}
+
+	
+	.sel-div > .sel-body {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background: url(../img/mobile-sel-body.png) no-repeat center;
+		background-size: 100% 100%;
+	}
+	
+	.set-place {
+		height: 31.5px;
+	}
+	.option-body {
+		height: calc(100% - 40px);
+		width: calc(100% - 9px);
+		overflow-y: auto;
+	}
+	.option-body >div {
+		font-size: 13px;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #FFFFFF;
+		padding: 5px 10px 5px 20px;
+		letter-spacing: 2px;
+		cursor: pointer;
+	}
+	
+	.option-body >div:hover {
+		font-size: 15px;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+	}
+	
+	.option-body >.active-option {
+		font-size: 15px;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+	}
+	
+}
+
+
+

index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title></title>
+		<meta name="viewport"
+			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
+		<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" type="text/javascript" charset="utf-8"></script>
+		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
+		</script>
+		<link rel="stylesheet" href="css/style.css">
+		<link rel="stylesheet" href="css/scroll.css">
+
+	</head>
+	<body>
+		<div id="app">
+			<h1>智慧防疫平台</h1>
+			<div class="sel-div">
+				<div class="sel-input">
+					<p class="sel-placeholder" v-if="!selectedTenant">请选择租户</p>
+					<p class="sel-text" v-else>{{selectedTenant.name}}</p>
+					<img src="img/arrow.png" />
+				</div>
+				<div class="sel-body" id="sel-body">
+					<div class="set-place"></div>
+					<div class="option-body">
+						<div :class="{'active-option':selectedTenant && tenant.identifier == selectedTenant.identifier}"
+							v-for="tenant in tenantList" @click="selChange(tenant)">{{tenant.name}}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script>
+			var app = new Vue({
+				el: '#app',
+				data: {
+					tenantList: [],
+					selectedTenant: null
+				},
+				methods: {
+					selChange(tenant) {
+						this.selectedTenant = tenant;
+						$('#sel-body').animate({
+							height: 'toggle',
+							opacity: 'toggle'
+						})
+						localStorage.setItem('tenant', tenant.identifier);
+						wx.miniProgram.getEnv(function(res) {
+							if (res.miniprogram) {
+								wx.miniProgram.postMessage({
+									data: {
+										tenant: tenant.identifier
+									}
+								})
+							}
+						})
+					}
+				},
+				created() {
+					fetch('http://192.168.26.198:3001/epi-project/tenants').then(r => r.json()).then(res => {
+						this.tenantList = res.data;
+					})
+				}
+			})
+
+			$('.sel-input').click(() => {
+				$('#sel-body').animate({
+					height: 'toggle',
+					opacity: 'toggle'
+				})
+			});
+		</script>
+	</body>
+</html>