Commit c330d0ff authored by 刘用法's avatar 刘用法

我的页面

parent 9bdc0864
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
</u-navbar> </u-navbar>
<view class="mine-content"> <view class="mine-content">
<view class="header-view"> <view class="header-view">
<view class="head-image"> <view :class="['head-image', {'has-image': info.headImage}]">
<u-avatar :src="headImageUrl" size="142" mode="circle"></u-avatar> <u-avatar :src="headImageUrl" :size="headSize" mode="circle"></u-avatar>
</view> </view>
<view class="header-content"> <view class="header-content">
<view class="name-view" @click="handleClickName">{{name}}</view> <view class="name-view" @click="handleClickName">{{name}}</view>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</view> </view>
<view class="list-view"> <view class="list-view">
<u-cell-group> <u-cell-group :border="false">
<view v-for="(item, index) in items" :key="index"> <view v-for="(item, index) in items" :key="index">
<u-cell-item :value="item.value" :border-bottom="false" @click="handleClick(index)"> <u-cell-item :value="item.value" :border-bottom="false" @click="handleClick(index)">
<image slot="icon" :src="imageUrl + item.icon" :style="item.imageStyle"></image> <image slot="icon" :src="imageUrl + item.icon" :style="item.imageStyle"></image>
...@@ -133,6 +133,9 @@ ...@@ -133,6 +133,9 @@
}, },
placeholderImage() { placeholderImage() {
return this.imageUrl + 'touxiang.png' return this.imageUrl + 'touxiang.png'
},
headSize() {
return this.info.headImage ? 136 : 144
} }
}, },
onLoad() { onLoad() {
...@@ -168,10 +171,12 @@ ...@@ -168,10 +171,12 @@
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
background-color: #FFFFFF; background-color: #FFFFFF;
z-index: -1;
.header-image { .header-image {
position: absolute; position: absolute;
width: 100%; width: 100%;
z-index: -1;
} }
...@@ -182,18 +187,22 @@ ...@@ -182,18 +187,22 @@
padding-left: 30rpx; padding-left: 30rpx;
} }
.mine-content { .mine-content {
.header-view { .header-view {
padding: 30rpx 30rpx 80rpx 30rpx; padding: 30rpx 30rpx 80rpx 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
.head-image { .head-image {
width: 142rpx; width: 144rpx;
height: 142rpx; height: 144rpx;
background-color: #FFFFFF;
border-radius: 72rpx;
&.has-image {
border: 4rpx solid #FFFFFF;
}
} }
.header-content { .header-content {
color: #FFFFFF; color: #FFFFFF;
z-index: 0; z-index: 1;
margin-left: 24rpx; margin-left: 24rpx;
.name-view { .name-view {
font-size: 44rpx; font-size: 44rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment