You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
2.0 KiB

<template>
<view class="app-container">
<u-navbar
leftText="返回"
title="修改头像"
:autoBack="true"
:placeholder="true"
/>
<view class="form-item">
<view class="form-title">
当前头像
<text></text>
</view>
<image
class="current-profile"
src="/static/images/user-image.png"
mode="aspectFill"
></image>
</view>
<view class="profile-btn-list">
<view class="profile-btn active view-global" style="margin-bottom: 60rpx">
<image src="/static/images/camera.png" mode="aspectFill"></image>
<text>拍照选择</text>
</view>
<view class="profile-btn active view-global">
<image src="/static/images/profile-image.png" mode="aspectFill"></image>
<text>从相册中选择</text>
</view>
</view>
<fixed-buttom title="保存"></fixed-buttom>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.form-item {
display: flex;
align-items: flex-start;
.form-title {
position: relative;
font-size: 30rpx;
font-weight: bold;
color: #2e2f31;
}
.form-title text {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 12rpx;
width: 140rpx;
background: url("/static/images/juxing.png");
background-size: cover;
max-width: 300rpx;
z-index: 0;
}
.current-profile {
height: 170rpx;
width: 170rpx;
margin-left: 50rpx;
}
}
.profile-btn-list {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 117rpx;
.profile-btn {
width: 431rpx;
height: 98rpx;
background: #ffffff;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
image {
height: 34rpx;
width: 34rpx;
}
text {
width: 200rpx;
font-size: 32rpx;
font-weight: 400;
color: #2e2f31;
margin-left: 30rpx;
}
}
}
</style>