115 lines
2.5 KiB
Vue
115 lines
2.5 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
import Avatar from "@/components/Avatar.vue";
|
||
|
|
|
||
|
|
import useStore from "@/store";
|
||
|
|
import { storeToRefs } from "pinia";
|
||
|
|
const store = useStore();
|
||
|
|
const { user } = storeToRefs(store);
|
||
|
|
|
||
|
|
const toEditPage = () => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: "/pages/point-book-edit",
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="header">
|
||
|
|
<image :src="user.avatar" mode="widthFix" />
|
||
|
|
<button hover-class="none" @click="toEditPage">
|
||
|
|
<image src="../static/pen-yellow.png" mode="widthFix" />
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
<view class="body">
|
||
|
|
<view>
|
||
|
|
<button hover-class="none">
|
||
|
|
<image src="../static/user-yellow.png" mode="widthFix" />
|
||
|
|
<text>Name</text>
|
||
|
|
<image src="../static/back-grey.png" mode="widthFix" />
|
||
|
|
</button>
|
||
|
|
<button hover-class="none">
|
||
|
|
<image src="../static/email-yellow.png" mode="widthFix" />
|
||
|
|
<text>Email</text>
|
||
|
|
<image src="../static/back-grey.png" mode="widthFix" />
|
||
|
|
</button>
|
||
|
|
<button hover-class="none">
|
||
|
|
<image src="../static/password-yellow.png" mode="widthFix" />
|
||
|
|
<text>Password</text>
|
||
|
|
<image src="../static/back-grey.png" mode="widthFix" />
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
<button hover-class="none">Log out</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
position: relative;
|
||
|
|
margin-top: -120rpx;
|
||
|
|
}
|
||
|
|
.header > image {
|
||
|
|
width: 180rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 4rpx solid #fff;
|
||
|
|
}
|
||
|
|
.header > button {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.header > button > image {
|
||
|
|
width: 60rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
}
|
||
|
|
.body {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.body > view {
|
||
|
|
background-color: $uni-bg-color;
|
||
|
|
border-radius: 25px;
|
||
|
|
padding: 0 20px;
|
||
|
|
}
|
||
|
|
.body > view > button {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px 0;
|
||
|
|
}
|
||
|
|
.body > view > button:not(:last-child) {
|
||
|
|
border-bottom: 1rpx solid #e3e3e3;
|
||
|
|
}
|
||
|
|
.body > view > button > image:first-child {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
.body > view > button > text {
|
||
|
|
flex: 1;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #333333;
|
||
|
|
text-align: left;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
}
|
||
|
|
.body > view > button > image:last-child {
|
||
|
|
width: 28rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
}
|
||
|
|
.body > button:last-child {
|
||
|
|
margin-top: 24rpx;
|
||
|
|
background: $uni-bg-color;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: $uni-link-color;
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px 0;
|
||
|
|
}
|
||
|
|
</style>
|