intelligent-etmf-system-applet/pages/mine/mine.vue

<template>
  <view class="container">
    <view class="header">
      <view class="avatar">
        <image class="avatar-img" src="/static/default-avatar.png" mode="aspectFill"></image>
      </view>
      <text class="username">用户昵称</text>
    </view>
    
    <view class="content">
      <view class="menu-list">
        <view class="menu-item" @click="handleMenuClick('profile')">
          <text class="menu-icon">👤</text>
          <text class="menu-text">个人信息</text>
          <text class="menu-arrow">›</text>
        </view>
        
        <view class="menu-item" @click="handleMenuClick('settings')">
          <text class="menu-icon">⚙️</text>
          <text class="menu-text">设置</text>
          <text class="menu-arrow">›</text>
        </view>
        
        <view class="menu-item" @click="handleMenuClick('about')">
          <text class="menu-icon">ℹ️</text>
          <text class="menu-text">关于</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const handleMenuClick = (type) => {
  uni.showToast({
    title: `点击了${type}`,
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 80rpx;
  text-align: center;
  
  .avatar {
    width: 140rpx;
    height: 140rpx;
    margin: 0 auto 20rpx;
    border-radius: 50%;
    background-color: #ffffff;
    overflow: hidden;
    
    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }
  
  .username {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
  }
}

.content {
  margin-top: -40rpx;
  padding: 0 40rpx;
  
  .menu-list {
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 1rpx solid #f0f0f0;
      transition: background-color 0.3s;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: #f5f5f5;
      }
      
      .menu-icon {
        font-size: 40rpx;
        margin-right: 24rpx;
      }
      
      .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
      }
      
      .menu-arrow {
        font-size: 48rpx;
        color: #cccccc;
        font-weight: 300;
      }
    }
  }
}
</style>