fix:小程序界面

web

2025-07-02 03bcdfbc9dd10e473686bbe27a8e615f5a22a283

 pages/user/index.vue

@@ -1,23 +1,22 @@
<template>
   <view class="user" :style="{paddingTop:topHeight + 'rpx'}">
      <view class="content">
         <view class="userInfo">
         <view class="user">
            <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>
               <text class="name">张三</text>
            </view>
         </view>
         <view class="typeList">
            <view class="typeItem">
               <view class="name">充值记录</view>
               <uni-icons type="right" size="20"></uni-icons>
               <view class="name">剩余水量</view>
               <view class="val">750m³</view>
            </view>
         </view>
         <view class="loginOut">
            <button type="primary" plain>退出登录</button>
            <button class="btn" type="primary" plain @click="loginOut">退出登录</button>
         </view>
      </view>
   </view>
@@ -29,10 +28,27 @@
   const topHeight = ref(0)
   
   // 获取状态栏高度
   function getTopHeight(){
   const getTopHeight = () => {
      if(uni.getMenuButtonBoundingClientRect){
         topHeight.value = uni.getMenuButtonBoundingClientRect().bottom * 2
      }
   }
	
   // 退出登录
   const loginOut = () => {
      uni.showModal({
         title: '温馨提示',
         content: '确认退出登录？',
         success: (res) => {
            if(res.confirm){
               uni.removeStorageSync('openId')
               uni.removeStorageSync('token')
               uni.navigateTo({
                  url: '/pages/login/index'
               })
            }
         }
      })
   }
   
   onMounted(() => {
@@ -42,28 +58,23 @@

<style lang="scss" scoped>
   .content{
      padding: 20rpx;
      .userInfo{
      padding: 0 32rpx;
      .user{
         height: 100rpx;
         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;
            width: 80rpx;
            height: 80rpx;
            image{
               width: 100%;
               border-radius: 10rpx;
               border-radius: 50%;
            }
         }
         .info{
            flex-grow: 1;
            font-size: 36rpx;
            .balance{
               font-weight: bold;
            margin-left: 30rpx;
            .name{
               vertical-align: text-bottom;
            }
         }
      }
@@ -78,11 +89,11 @@
         }
      }
      .loginOut{
         margin-top: 400rpx;
         // button{
         //    color: $uni-base-color;
         //    border-color: $uni-base-color;
         // }
         margin-top: 200rpx;
         .btn{
            color: $uni-base-color;
            border-color: $uni-base-color;
         }
      }
   }
</style>