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{
}
text align center},
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>
<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{
.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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。