<template>
|
<view class="user" :style="{paddingTop:topHeight + 'rpx'}">
|
<view class="content">
|
<view class="userInfo">
|
<view class="userImg">
|
<image src="/static/images/login/wx.png" mode="widthFix"></image>
|
</view>
|
<view class="info">
|
<view class="name">张三</view>
|
<view class="balance">余额：233.5</view>
|
</view>
|
</view>
|
<view class="typeList">
|
<view class="typeItem">
|
<view class="name">充值记录</view>
|
<uni-icons type="right" size="20"></uni-icons>
|
</view>
|
</view>
|
<view class="loginOut">
|
<button type="primary" plain>退出登录</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from "vue";
|
|
const topHeight = ref(0)
|
|
// 获取状态栏高度
|
function getTopHeight(){
|
if(uni.getMenuButtonBoundingClientRect){
|
topHeight.value = uni.getMenuButtonBoundingClientRect().bottom * 2
|
}
|
}
|
|
onMounted(() => {
|
getTopHeight()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.content{
|
padding: 20rpx;
|
.userInfo{
|
display: flex;
|
align-items: center;
|
padding: 40rpx;
|
background: linear-gradient(90deg, #CCCCCC, #CCFFFF);
|
border-radius: 20rpx;
|
.userImg{
|
flex-shrink: 0;
|
width: 100rpx;
|
height: 100rpx;
|
margin-right: 40rpx;
|
image{
|
width: 100%;
|
border-radius: 10rpx;
|
}
|
}
|
.info{
|
flex-grow: 1;
|
font-size: 36rpx;
|
.balance{
|
font-weight: bold;
|
}
|
}
|
}
|
.typeList{
|
margin-top: 30rpx;
|
.typeItem{
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #dddddd;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
.loginOut{
|
margin-top: 400rpx;
|
// button{
|
// color: $uni-base-color;
|
// border-color: $uni-base-color;
|
// }
|
}
|
}
|
</style>
|
