jp-floorlock-phone/pages/business/lockInfo.vue

<template>
	<view>
		 <lockInfo ref="lockInfoRef"></lockInfo>
		 
	</view>
</template>

<script>
	import componentLogin from '@/components/componentLogin.vue';
	import lockInfo from '@/pages/business/as-components/componentLockInfo.vue';
	
 	import * as API from '@/apis/pagejs/pagesIndex.js'

	export default {
		components: {
			componentLogin,
			 lockInfo
			//'u-collapse-item': () => import('@/uni_modules/uview-ui/components/u-collapse-item/u-collapse-item'),
			//'u-collapse': () => import('@/uni_modules/uview-ui/components/u-collapse/u-collapse'),
			
			
		},

		data() {
			return {
				
				
			}
		},
		onLoad(op) {
			this.isOnLoad=1
			if(op.q){
				var val =decodeURIComponent(op.q);
				
				if(val&&val.indexOf("?id=")>-1){
					val=val.split("?id=")[1]
					if(val.indexOf("&")>-1){
						val=val.split("&")[0]	
					}
					this.id = val
				}
				
			}
			 
			if(op.id){
				this.id=op.id
			}
			
			//this.lockInfoOnLoad()
		},
		onShow(){
			//
			
		},
		onReady() {
			
			this.$refs['lockInfoRef'].initRef(this.id,1)
		},
		onShareTimeline(){
			return {
				title: '智泊e家',
			}
		},
		onShareAppMessage(res) {
			return {
				title: '智泊e家',
			}
		},
		methods: {
			
		}
			
	}
</script>

<style>
	page{
		background-color:#F2F4F6;
	}
</style>
<style scoped lang="scss">
	.body {
		padding: 32rpx;
	}

	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 760rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
	}
	.isReady_2{
		margin-top: 80rpx;
		.r2text{
			text-align: center;
			.r2text1{
				color: rgba(51,51,51,1);
				font-size: 40rpx;
				font-weight: bold;
			}
			.r2text2{
				font-weight: 400;
				color: rgba(51,51,51,1);
				font-size: 32rpx;
			}
		}
	}
	
	.page-top {
		padding: 40rpx;
		padding-top: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name {
			width: 320rpx;
			height: 320rpx;
			display: flex;
			align-items: flex-end;

			.img {
				width: 320rpx;
				height: 320rpx;
			}

			.img2 {
				width: 320rpx;
				height: 140rpx;
			}

		}

		.value {
			//margin-top: 24rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.pagemanage{
		margin-top: 80rpx;
		margin-bottom: 80rpx;
		.mitem{
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
				img{
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}
				border-right: 1px solid rgba(187,187,187,0.43);
		}
		.end{
			border-right:0
		}
	}
	
	.page {
	
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		box-shadow: 0px 4px 8px 0px rgba(22,119,255,0.2);
		padding: 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);
		    width: 100%;
			.page-border{
				border-bottom: 1px solid  rgba(232,232,232,1);
				padding-bottom: 16rpx;
			}
		.page-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			
			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				
				display: flex;
				flex-direction: column;
				    display: flex;
				.name-info{
					    display: flex;
					.name-text{
						font-size: 36rpx;
						font-weight: bold;
										
					}
					
					
				}
				.code-info{
					font-size: 24rpx;
					color: rgba(119,119,119,1);
				
				}
				
			}
			.tags{
				    display: flex;
				    align-items: center;
					margin-left: 8rpx;
				.tag {
					
					
					font-size: 24rpx;
					border: 1px solid rgba(187, 187, 187, 1);
					border-radius: 4px;
					color: rgba(22,119,255,1);
					
					
					padding: 1px 8rpx;
					margin-left: 8rpx;
				}
				.typeN1{
					color:#1677FF ;
					border: 1px solid #1677FF ;
				}
				.typeN2{
					color:#8161FF;
						border: 1px solid #8161FF;
				}
				.status1{
					color:#00B962;
					border: 1px solid #00B962;
				}
				.status0{
					color:#A7A2A2;
					border: 1px solid #A7A2A2;
				}
			}
			
			.value1{
				display: flex;
				flex-direction: column;
				align-items: center;
				    justify-content: space-between;
				.item1{
					.img{
						width: 48rpx;
						height: 48rpx;
						
					}
					    display: flex;
				}
				.item2 {
					font-size: 24rpx;
					color: rgba(119,119,119,1);

				}
			}
	
		}
		.page-info{
			padding-top: 16rpx;
			    font-size: 24rpx;
			    color: #777777;
				display: flex;
				justify-content: space-between;
				.address{
					.name{
						color: rgba(119,119,119,1);
						font-size: 28rpx;
					}
					.text{
						color: rgba(51,51,51,1);
						font-size: 24rpx;
					}
				}
				.value2{
					display: flex;
					flex-direction: column;
					align-items: center;
					    justify-content: space-between;
					.item1{
						.img{
							width: 32rpx;
							height: 32rpx;
							
						}
						    display: flex;
					}
					.item2 {
						font-size: 24rpx;
						color: rgba(119,119,119,1);
				
					}
				}
		}
		.page-content {
			.step {
				margin-bottom: 16rpx;
			}
	
			.tip-title {
				color: #101010;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}
	
			.tip1 {
				.step {
					color: #101010
				}
	
				border-bottom: 1px solid rgba(241, 241, 241, 1);
				margin-bottom: 24rpx;
				padding-bottom: 8rpx;
			}
	
			.tip2 {
	
				.step {
					color: #333333
				}
			}
		}
	
	
	
	}
	
	
	.jpbutton {
		   margin-top: 30rpx;
		   margin-bottom: 30rpx;
		border-radius: 100rpx;
		width: 400rpx;
		height: 84rpx;
		color: #fff;
		padding: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		    font-size: 36rpx;
		.img {
			margin-right: 8rpx;
			width: 36rpx;
			height: 32rpx;
		}
	}
	
	.jpbutton1 {
		background-color: #2979FF;
	
		.img {
			width: 32rpx;
			height: 32rpx;
		}
	}
	
	.jpbutton2 {
		background-color: #2979FF;
	
		.img {
			width: 40rpx;
			height: 40rpx;
			animation: spin 2s linear infinite;
			/* 添加无限旋转动画 */
	
		}
	
		/* 定义旋转动画 */
		@keyframes spin {
			from {
				transform: rotate(0deg);
				/* 起始角度 */
			}
	
			to {
				transform: rotate(360deg);
				/* 结束角度 */
			}
		}
	}
	
	.jpbutton3 {
		background-color: #00B962;
	}
	
	.jpbutton4 {
		background-color: #A7A2A2;
	}
	.jpbutton6 {
		background-color: #FF7B00;
	}
	.jpbutton5 {
		background-color: #1677FF;
	}
	
	.page-role {
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.img {
			width: 500rpx;
			height: 500rpx;
		}
	
		.text1 {
			color: rgba(51, 51, 51, 1);
			font-weight: bold;
			font-size: 48rpx;
			margin-bottom: 16rpx;
		}
	
		.text2 {
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			margin-bottom: 200rpx;
		}
	
		.botton {
			border-radius: 100rpx;
			width: 360rpx;
			text-align: center;
			border: 1px solid rgba(187, 187, 187, 1);
			color: rgba(22, 119, 255, 1);
			padding: 16rpx;
	
		}
	}
</style>