132 lines
3.3 KiB
Vue
132 lines
3.3 KiB
Vue
<template>
|
|
<view class="ctr">
|
|
<view class="fixed-top">
|
|
<me-top title="我的" :is-show-icon="false"></me-top>
|
|
</view>
|
|
|
|
<me-empty-space :height="listMarginTop"></me-empty-space>
|
|
<view class="header flex-l">
|
|
<view class="avatar" :style="{background: 'var(--defaultUserAvatar)'}"></view>
|
|
<view class="info">
|
|
<view class="name">刘强西</view>
|
|
<view class="phone">18628195903</view>
|
|
</view>
|
|
<view class="decorate"></view>
|
|
</view>
|
|
|
|
<view class="menus">
|
|
<view class="item flex-sb" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
|
|
<view class="icon flex-c">
|
|
<me-icon type="icon-logout" color="var(--descriptionColor)" size="56rpx"></me-icon>
|
|
</view>
|
|
<view class="menu flex-sb">
|
|
<view class="left flex-l">退出登录</view>
|
|
<view class="right flex-r">
|
|
<me-icon type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<me-empty-space height="100"></me-empty-space>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onLoad, onShow} from '@dcloudio/uni-app'
|
|
import {ref, reactive, computed, watch, inject} from 'vue'
|
|
import MeIcon from "../../components/me-icon/me-icon";
|
|
import MeButton from "../../components/me-button/me-button";
|
|
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
|
|
import MeTop from "../../components/me-top/me-top.vue";
|
|
const listMarginTop = computed(() => {
|
|
return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ctr {
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
.fixed-top {
|
|
position: fixed;
|
|
top: 0;
|
|
background-color: var(--pageBgColor);
|
|
width: 100%;
|
|
}
|
|
.header {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
background: var(--containerBgColor);
|
|
border-radius: 16rpx;
|
|
padding: 40rpx 32rpx;
|
|
margin-top: 20rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
}
|
|
.info {
|
|
margin-left: 20rpx;
|
|
width: 482rpx;
|
|
height: 120rpx;
|
|
.name,.phone {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: left;
|
|
}
|
|
.name {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.phone {
|
|
font-size: 30rpx;
|
|
color: var(--summaryColor);
|
|
}
|
|
}
|
|
.decorate {
|
|
width: 240rpx;
|
|
height: 200rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
background: url("/static/img/user-bg.png") no-repeat center / 100%;
|
|
border-radius: 0 16rpx 16rpx 0;
|
|
}
|
|
}
|
|
.menus {
|
|
margin-top: 32rpx;
|
|
width: 100%;
|
|
background: var(--containerBgColor);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
.item {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
.icon {
|
|
width: 100rpx;
|
|
height: 120rpx;
|
|
}
|
|
.menu {
|
|
width: 546rpx;
|
|
height: 120rpx;
|
|
.left {
|
|
width: 266rpx;
|
|
height: 100%;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.right {
|
|
width: 280rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|