设备列表/增加设备

src/assets/css/mui.min.css

@@ -2418,7 +2418,7 @@ select,
 textarea {
 	line-height: 1.5;
 	width: 100%;
-	padding: 10px 15px;
+	padding: 11px 15px;
 	-webkit-user-select: text;
 	border:0;
 	border-radius: 3px;

src/assets/css/pension.css

@@ -0,0 +1,278 @@
+.block-yellow {
+	background: #FFB100
+}
+
+.block-yellowe {
+	background: #FF9100
+}
+
+.block-red {
+	background: #FF3B00
+}
+
+.block-blue {
+	background: #3385FF
+}
+
+.block-green {
+	background: #23A853
+}
+
+.block-greene {
+	background: #05BF76
+}
+
+.block-pink {
+	background: #FF6A67
+}
+
+.block-violet {
+	background: #7D67E3
+}
+
+.block-light {
+	background: #FF9474
+}
+
+.block-grew {
+	background: #888888
+}
+
+.vongi-color-block {
+	padding: 10px;
+	border-radius: 5px;
+	color: #ffffff;
+	text-align: right;
+}
+
+.vongi-color-block .mui-h1 {
+	text-align: center;
+	margin: 8px 0;
+	font-weight: bold;
+}
+
+.vongi-color .mui-table-view,
+.vongi-color .mui-table-view:before,
+.vongi-color .mui-table-view:after,
+.vongi-color .mui-table-view-cell:after {
+	border: 0;
+	background: 0
+}
+
+.vongi-color .mui-table-view {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 10px
+}
+
+.vongi-color .mui-table-view-cell {
+	padding: 5px
+}
+
+@media (max-width: 320px) {
+	.vongi-color-block .mui-h1 {
+		font-size: 18px;
+	}
+}
+
+.vongi-color .iconfont {
+	font-size: 30px
+}
+
+.vongi-color .vongi-ylfuwu .iconfont {
+	font-size: 48px;
+	line-height: 1;
+	font-weight: initial;
+}
+
+.vongi-color .vongi-color-unit {
+	height: 21px;
+	display: block;
+}
+
+.vongi-qqhm .mui-media-object {
+	overflow: hidden;
+	border-radius: 50%;
+	line-height: 56px;
+	max-width: 56px;
+	height: 56px;
+	border: 1px #eee solid;
+}
+
+.vongi-qqhm .mui-media-object img {
+	object-fit: cover;
+	min-height: 100%;
+	width: 100%;
+}
+
+.vongi-sblist .mui-media-object {
+	border-radius: 5px;
+	border: 1px #D5D5D5 solid
+}
+
+.vongi-qqhm .mui-table-view-cell .mui-pull-right {
+	line-height: 56px;
+	padding-right: 20px;
+	font-size: 30px;
+	color: #3385FF
+}
+
+.vongi-badge-pink {
+	background-color: #FF9474;
+	color: #ffffff;
+	border-radius: 2px;
+	margin-left: 5px
+}
+
+.vongi-color-block .mui-media-body {
+	font-size: 18px;
+	padding: 3px 0
+}
+
+.mui-btn-pink {
+	color: #fff;
+	border: 1px solid #FF9474;
+	background-color: #FF9474;
+}
+
+.vongi-sblist .mui-checkbox input[type=checkbox],
+.vongi-sblist .mui-radio input[type=radio] {
+	top: 26px
+}
+
+.vongi-qingjiadt .mui-input-group .vongi-badge-pink {
+	padding: 5px 0;
+	text-align: center;
+	width: 10%;
+	margin: 10px 15px 10px 0
+}
+
+.vongi-qrcode-bg {
+	background: #FF9474;
+}
+
+.vongi-qrcode-main {
+	background: #fff;
+	position: fixed;
+	left: 15px;
+	right: 15px;
+	top: 100px;
+	padding: 50px;
+	border-radius: 10px;
+}
+
+.vongi-qrcode-main::after {
+	content: '';
+	display: block;
+	height: 20px;
+	width: 20px;
+	background: #FF9474;
+	border-radius: 50%;
+	position: absolute;
+	left: -10px;
+	top: 90px
+}
+
+.vongi-qrcode-main::before {
+	content: '';
+	display: block;
+	height: 20px;
+	width: 20px;
+	background: #FF9474;
+	border-radius: 50%;
+	position: absolute;
+	right: -10px;
+	top: 90px
+}
+
+.vongi-qrcode-head {
+	position: relative;
+	border-bottom: 1px dotted #eee;
+	padding-bottom: 15px;
+	text-align: center;
+	padding-top: 15px;
+}
+
+.vongi-qrcode-img {
+	height: 80px;
+	width: 80px;
+	border-radius: 50%;
+	position: absolute;
+	overflow: hidden;
+	left: 50%;
+	margin-left: -40px;
+	top: -80px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+	border: 2px solid #fff;
+	display: flex
+}
+
+.vongi-qrcode-img img {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+}
+
+.vongi-qrcode-content {
+	text-align: center;
+	padding-top: 15px;
+}
+
+.vongi-qrcode-content h4 {
+	font-size: 16px;
+}
+
+.vongi-qrcode-content img {
+	width: 150px;
+	height: 150px;
+	margin: 15px 0;
+}
+
+.vongi-ylindex.vongi-color .mui-table-view,
+.vongi-ylindex.vongi-color .mui-table-view-cell {
+	padding: 0
+}
+
+.vongi-ylindex.vongi-color .mui-table-view-cell {
+	padding-right: 2px;
+	padding-bottom: 2px
+}
+
+.vongi-ylindex.vongi-color .mui-table-view-cell:nth-child(2n) {
+	padding-right: 0
+}
+
+.vongi-ylindex .vongi-color-block {
+	border-radius: 0;
+	text-align: left;
+	font-size: 24px
+}
+
+.vongi-ylindex .vongi-color-block .mui-h1 {
+	text-align: right;
+	margin: 8px 0 60px;
+	font-size: 66px
+}
+
+.vongi-ylindex .vongi-color-block .mui-media-body {
+	font-size: 24px
+}
+
+.mui-checkbox input[type=checkbox]:checked:before,
+.mui-radio input[type=radio]:checked:before {
+	color: #FF9474
+}
+
+.vongi-cashier-btn {
+	background-color: #FF9474;
+}
+
+.icon-gou {
+	font-size: 72px;
+	color: #FF9474
+}
+
+.vongi-zbfj .icon-ziyuan1 {
+	color: #FF9474;
+	margin-left: 5px
+}

src/assets/css/xpwyfyy.css

@@ -53,6 +53,10 @@ body {
 	margin-bottom: 60px
 }
 
+.margin10 {
+	margin-bottom: 10px
+}
+
 .inedxfyy-content {
 	margin-bottom: 70px
 }
@@ -402,6 +406,11 @@ body {
 	margin: 0 auto
 }
 
+.fyy-footer-text {
+	text-align: center;
+	line-height: 1.6;
+}
+
 .mui-table-view.fyy-view {
 	padding: 15px 0
 }
@@ -718,7 +727,7 @@ h3 {
 	width: 32px;
 	height: 32px;
 	border-radius: 50%;
-	margin: 9px 0;
+	margin: 5.5px 0;
 	float: right;
 }
 
@@ -972,6 +981,7 @@ h3 {
 	overflow: hidden;
 	border-radius: 50%;
 	margin: 0 auto;
+	border: 1px #eee solid;
 }
 
 .vongi-pipei.mui-table-view .mui-media-object img {
@@ -1130,7 +1140,8 @@ h3 {
 	border-radius: 50%;
 	overflow: hidden;
 	display: flex;
-	margin-right: 10px
+	margin-right: 10px;
+	border: 1px #eee solid;
 }
 
 .vongi-wordcard .mui-media-object img {
@@ -1248,6 +1259,7 @@ h3 {
 	margin-right: 10px;
 	border-radius: 50%;
 	overflow: hidden;
+	border: 1px #eee solid;
 }
 
 .vongi-wordcard-sp .mui-media-object img {
@@ -1495,6 +1507,7 @@ h3 {
 	border-radius: 50%;
 	display: flex;
 	overflow: hidden;
+	border: 1px #eee solid;
 }
 
 .vongi-archives .mui-table-view .mui-media-object img {
@@ -2347,44 +2360,298 @@ h3 {
 	border-radius: 7px;
 	overflow: hidden;
 }
-.vongi-clasadmin .vongi-btn{
-	padding:15px 10px;
+
+.vongi-clasadmin .vongi-btn {
+	padding: 15px 10px;
 }
-.vongi-clasadmin .vongi-btn button{
+
+.vongi-clasadmin .vongi-btn button {
 	border-radius: 7px;
 }
-.vongi-zc .mui-media-object{
-	max-width:48px;
-	height:48px;
+
+.vongi-zc .mui-media-object {
+	max-width: 48px;
+	height: 48px;
 	line-height: 48px;
 	border-radius: 50%;
 	overflow: hidden;
 	display: flex;
-	margin-top:5px
+	margin-top: 5px;
+	border: 1px #eee solid;
 }
-.vongi-zc .mui-media-object img{
+
+.vongi-zc .mui-media-object img {
 	object-fit: cover;
-	min-width:100%;
+	min-width: 100%;
 	height: 100%;
 }
-.vongi-zc .mui-table-view-cell a .mui-media-body{
-	padding:0
+
+.vongi-zc .mui-table-view-cell a .mui-media-body {
+	padding: 0
 }
-.vongi-zc.vongi-fklist .openfyy-list .mui-ellipsis{
+
+.vongi-zc.vongi-fklist .openfyy-list .mui-ellipsis {
 	display: block;
 }
-.vongi-editme .mui-input-row textarea{
-	width:100%;
-	padding:0 15px 10px;
+
+.vongi-editme .mui-input-row textarea {
+	width: 100%;
+	padding: 0 15px 10px;
 }
 
-.vongi-over .mui-slider-item{
+.vongi-over .mui-slider-item {
 	overflow: scroll;
 }
-.vongi-over .mui-scroll{
-	margin-bottom:60px;
+
+.vongi-over .mui-scroll {
+	margin-bottom: 60px;
+}
+
+.vongi-over-hei {
+	min-height: 100%;
+}
+
+.vongi-editme .mui-input-row.vongi-yzm input,
+.vongi-yzm input {
+	width: 60%;
+	text-align: left;
+}
+
+.vongi-yzm a {
+	padding: 11px 15px;
+	color: #3385FF
+}
+
+.vongi-spkh .mui-table-view:before,
+.vongi-spkh .mui-table-view:after {
+	background: 0
+}
+
+.vongi-spkh .mui-table-view-cell {
+	position: relative;
+	padding: 0;
+	margin-bottom: 10px;
+	border-radius: 5px;
+	overflow: hidden;
+}
+
+.vongi-spkh .mui-table-view-cell .mui-media-body {
+	background: rgba(0, 0, 0, 0.5);
+	padding: 10px;
+	justify-content: space-between;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	color: #ffffff;
+	font-size: 14px
+}
+
+.vongi-spkh .mui-table-view-cell>a:not(.mui-btn) {
+	margin: 0
+}
+
+.vongi-video-img {
+	display: flex;
+	width: 100%;
+	max-height: 234px;
 }
-.vongi-over-hei{
+
+.vongi-video-img img {
+	object-fit: cover;
+	width: 100%;
 	min-height: 100%;
-	   
 }
+
+.vongi-spkh .mui-table-view-cell .mui-ellipsis {
+	color: #ffffff;
+	font-size: 14px
+}
+
+.vongi-spkh-title .mui-ellipsis a {
+	color: #096DD9;
+	margin-left: 5px
+}
+
+.vongi-spkh-title {
+	justify-content: space-between;
+	align-items: center;
+	padding: 15px 15px 0
+}
+
+.vongi-spkh-title .mui-media-body {
+	align-items: center;
+	display: flex;
+}
+
+.vongi-spkh-title .mui-media-body img {
+	width: 100%;
+	min-height: 100%;
+	object-fit: cover;
+}
+
+.vongi-spkh-title .mui-media-object {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	overflow: hidden;
+	display: flex;
+	margin-right: 5px;
+	border: 1px #eee solid
+}
+
+.vongi-rec-btn {
+	width: 50%;
+	margin: 0 auto;
+	background-color: #FF9474;
+	height: 40px;
+	border-radius: 20px;
+	color: #ffffff;
+	text-align: center;
+	line-height: 40px;
+}
+
+.vongi-payyes-icon {
+	text-align: center;
+	padding: 30px 15px;
+	margin-top: 20%;
+}
+
+.vongi-payyes-icon h2 {
+	line-height: 1.8;
+	font-size: 18px;
+	font-weight: initial;
+}
+
+.vongi-payyes-icon img {
+	width: 160px
+}
+
+.vongi-cashier-btn-row {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.vongi-cashier-btn-white {
+	background-color: #fff;
+	display: flex;
+	justify-content: space-between;
+	line-height: 50px;
+	padding-left: 15px;
+}
+
+.vongi-cashier-btn-white span {
+	font-size: 16px;
+}
+
+.vongi-cashier {
+	background-color: #fff;
+	padding: 15px;
+	margin-bottom: 15px;
+	display: flex;
+}
+
+.vongi-cashier img {
+	height: 80px;
+	width: 80px;
+}
+
+.vongi-cashier-text h3 {
+	line-height: 21px;
+	margin: 0
+}
+
+.vongi-cashier-text {
+	flex: 1;
+	margin-left: 10px;
+	min-width: 0;
+}
+
+.vongi-text-tit {
+	min-height: 63px
+}
+
+.vongi-cashier-btn {
+	background-color: #3385FF;
+	height: 50px;
+	width: 120px;
+	color: #ffffff;
+	text-align: center;
+	line-height: 50px;
+}
+
+.vongi-examineInfo {
+	text-align: center;
+	margin-top: 30%;
+	padding: 0 10%
+}
+
+.vongi-examineInfo h1 {
+	margin: 15px 0;
+	font-weight: initial;
+}
+
+.vongi-zbfj {
+	background: #ffffff
+}
+
+.vongi-zbfj .mui-btn {
+	padding: 6px 0;
+	border: 0
+}
+
+.vongi-zbfj .mui-btn:enabled:active,
+.vongi-zbfj button.mui-active:enabled,
+.vongi-zbfj button:enabled:active {
+	background: 0;
+	color: #333
+}
+
+.vongi-zbfj .mui-table-view:before,
+.vongi-zbfj .mui-table-view:after {
+	background: 0
+}
+
+.vongi-zbfj video {
+	display: flex;
+	height: 100%;
+	object-fit: cover;
+}
+
+.vongi-zbfj .mui-content-padded {
+	border-bottom: 1px #eee solid;
+	margin: 0;
+	padding: 15px 15px 0;
+}
+
+.vongi-zbfj .fyy-video {
+	background: #333;
+	border-radius: 5px;
+	height: 234px;
+	overflow: hidden;
+}
+
+.vongi-zbfj .mui-content-padded .mui-table-view-cell {
+	padding: 11px 0
+}
+
+.vongi-zbfj .fyy-video img {
+	justify-content: space-between;
+	text-align: center;
+	align-items: center;
+	vertical-align: middle;
+	margin-bottom: 10px
+}
+
+.vongi-zbfj .fyy-video .mui-media-body {
+	color: #999;
+	justify-content: center;
+	text-align: center;
+	align-items: center;
+	vertical-align: middle;
+	flex-direction: column;
+	display: flex;
+	height: 100%;
+}

src/projects/pension/views/Common/Device/Add.vue

@@ -1,8 +1,43 @@
 <template>
+<div>
+    <header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">关联新设备</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div class="mui-content">
+			
+			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label>设备号</label>
+						<input type="text" class="mui-input-clear" placeholder="请输入唯一设备号" style="width:50%">
+						<span class="mui-badge vongi-badge-pink">扫码</span>
+					</div>
+					<div class="mui-input-row">
+						<label>密码</label>
+						<input type="text" class="mui-input-clear" placeholder="初始密码888888">
+					</div>
+					<div class="mui-input-row">
+						<label>昵称</label>
+						<input type="text" class="mui-input-clear" placeholder="您对设备使用者的称呼">
+					</div>
+				</form>
+			</div>
+			<div class="vongi-btn vongi-login-btn">
+				<button class="mui-btn mui-btn-pink">
+						保  存
+					</button>
+			</div>
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/pension.css"></style>
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>
+

src/projects/pension/views/Common/Device/List.vue

@@ -1,8 +1,49 @@
 <template>
+<div>
+    <header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">设备列表</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div class="mui-content vongi-qqhm vongi-sblist">
+			<ul class="mui-table-view">
+				<li class="mui-table-view-cell">
+					<a href="#" class="mui-radio">
+						<div class="mui-col-xs-10  mui-pull-left ">
+							<div class="mui-media-object mui-pull-left "><img src="~$project/assets/img/02.jpg" width="50" /></div>
+							<div class="mui-media-body">
+								<h3>父亲的智能手表</h3>
+								<p class='mui-ellipsis mui-h3'>JP01351704</p>
+							</div>
+						</div>
+						<input name="radio1" type="radio" checked>
+					</a>
+				</li>
+				<li class="mui-table-view-cell">
+					<a href="#" class="mui-radio">
+						<div class="mui-col-xs-10  mui-pull-left ">
+							<div class="mui-media-object mui-pull-left "><img src="~$project/assets/img/02.jpg" width="50" /></div>
+							<div class="mui-media-body">
+								<h3>父亲的智能手表</h3>
+								<p class='mui-ellipsis mui-h3'>JP01351704</p>
+							</div>
+						</div>
+						<input name="radio1" type="radio" checked>
+					</a>
+				</li>
+			</ul>
+			
+		</div>
+		<div class="fyy-footer">
+			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-pink ">关联新设备</button></div>
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/pension.css"></style>
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>