uniapp用户中心模板

1、登陆界面

<template>
	<view>
		<image class="bg" src="../../static/5.jpg"></image>
		<view class="content">
			<image class="user-img" src="../../static/k2.jpg"></image>
			<text class="x">@可乐不加冰</text>
			<text class="s">——陕西 延安——</text>
			<text class="m">       夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，席卷着整片旷野，撩动人的思绪万千。</text>
		</view>
			<view class="bottom">
				<button class="j">进入空间</button>
				
			</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
						
		}
	}
</script>

<style>
	page{
	background-color:transparent;
	/* 背景透明 */
	overflow: hidden;
	}
	.bg{
	
		/* 固定定位，这张图可以按照手机屏幕视窗进行定位，同样形成图层关系 */
		position: fixed;
		/* 图层下降 */
		z-index: -1;
		top: 0;
		left:-10vw;
		/* 宽度占满浏览器视窗 */
		width:120vw;
		height: 110vh;
		/* 高斯模糊 */
		filter: blur(1px)  brightness(90%);
		
	}
	.content{
		/* border: #007AFF solid; */
		height: 92vh;
		/* 子集同行排列 */
		display: flex;
		/* 让子集从上向下排列 */
		flex-direction: column;
		/* 居中 */
		align-items: center;
		/* 垂直方向平均分配 */
		justify-content: unset;	
	}
	.x{
		margin-top: 12rpx;
		/* border: #007AFF solid; */
		color: #FFFFFF;
		font-size: 50rpx;
		text-align: center;	
	}
	.s{
		text-align: center;
		color: #377EB4;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		
    	}
	.m{
		margin-left: 50rpx;
		margin-right: 50rpx;
		margin-top: 30rpx;
		/* border: #007AFF solid; */
		text-align: center;
		color: #F1F1F1;
		font-size: 38rpx;
		font-style:italic;
	}
	.user-img{
		border-radius: 25px;
		width: 400rpx;
		height: 400rpx;
		margin-top: 60rpx;
		
		
	}
	.j{ 
		bottom: 190rpx; 
		 width: 684rpx; 
		height: 80rpx; 
		margin-left: 37rpx; 
		text-align: center;
		font-size: 40rpx; 
		align-items: center; 
		 color: #fff;
			display: flex;
			line-height: 50rpx;
			justify-content: center;
			border-radius: 25px;
			background: #377EB4;
		
			
		
	}
	
	

</style>

2、登陆后界面

<template>
	<view>
		<view>
		<image class="bg" src="../../static/5.jpg"></image></view>
		<view class="n">
			<image class="t"src="../../static/3.jpg"></image>
			<text class="h">相册</text>
		</view>
		<view class="n">
			<image class="t"src="../../static/下载.png"></image>
			<text>本地/下载</text>
		</view>
		<view class="n">
			<image class="t"src="../../static/p.png"></image>
			<text>云盘</text>
		</view>
		<view class="n">
			<image class="t"src="../../static/已购.png"></image>
			<text>已购</text>
		</view>
		<view class="n">
			<image class="t"src="../../static/收藏.png"></image>
			<text>收藏和赞</text>
		</view>
		<view class="n">
			<image class="t"src="../../static/罐子-01.png"></image>
			<text>音乐罐子</text>
		</view>
		<view  class="bottom">
			<button class="j">退出登录</button>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
			
		}
	}
</script>

<style>
	page{
	background-color:transparent;
	/* 背景透明 */
	overflow: hidden;
	}
	.bg{
	
		/* 固定定位，这张图可以按照手机屏幕视窗进行定位，同样形成图层关系 */
		position: fixed;
		/* 图层下降 */
		z-index: -1;
		top: 0;
		left:-10vw;
		/* 宽度占满浏览器视窗 */
		width:120vw;
		height: 110vh;
		/* 高斯模糊 */
		filter: blur(1px)  brightness(90%);
		
	}
	.n {
		/* border: solid #007AFF; */
		 padding: 24rpx 24rpx; 
		display: flex;//同行排列
		align-items: center;//居中对齐
		margin-top: 32rpx;
		/* line-height: 2;//行高 */	
	}
	.t{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		pointer-events: 48rpx; 
		padding-right: 48rpx;
		
	}
	.j{
		/* border: #007AFF solid; */
		/* position: fixed; */
		bottom: 190rpx; 
		 width: 684rpx; 
		height: 80rpx; 
		margin-left: 37rpx; 
		text-align: center;
		font-size: 40rpx; 
		align-items: center; 
		color: #fff; 
			 display: flex; 
			 margin-top: 220rpx; 
			line-height: 50rpx; 
			justify-content: center;
			border-radius: 25px;
			background: #377EB4;
			
		
		
	}
</style>