<template>
  <div class="user-container">
    <!-- 顶部蓝色背景 -->
    <div class="top-bg"></div>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <!-- 用户信息 -->
      <div class="user-info">
        <img class="avatar" src="~/assets/images/avater2.png" />
        <div class="login-info">
          <div class="login-text">登录/注册</div>
          <div class="login-desc">登录注册后享受更多精彩内容</div>
        </div>
        <!-- 设置图标 -->
        <div class="setting-icon">⚙️</div>
      </div>

      <!-- 数据统计 -->
      <div class="data-stats">
        <div class="stat-item">
          <div class="stat-num">200</div>
          <div class="stat-text">金币余额（元）</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">135</div>
          <div class="stat-text">今日浏览量</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">370</div>
          <div class="stat-text">今日收益（元）</div>
        </div>
      </div>
    </div>

    <!-- 资源中心区域 -->
    <div class="resource-section">
      <div class="section-title">资源中心</div>

      <div class="resource-grid">
        <div class="resource-item">
          <div class="resource-icon blue">
            <img
              src="~/assets/images/my_release.png"
              alt=""
              srcset=""
              class="w-77rpx h-71rpx"
            />
          </div>
          <span class="resource-text">我的发布</span>
        </div>

        <div class="resource-item">
          <div class="resource-icon blue">
            <img
              src="~/assets/images/my_download.png"
              alt=""
              srcset=""
              class="w-98rpx h-68rpx"
            />
          </div>
          <span class="resource-text">我的下载</span>
        </div>

        <div class="resource-item">
          <div class="resource-icon blue">
            <img
              src="~/assets/images/my_attention.png"
              alt=""
              srcset=""
              class="w-76rpx h-77rpx"
            />
          </div>
          <span class="resource-text">我的关注</span>
        </div>

        <div class="resource-item">
          <div class="resource-icon blue">
            <img
              src="~/assets/images/my_collect.png"
              alt=""
              srcset=""
              class="w-64rpx h-73rpx"
            />
          </div>
          <span class="resource-text">我的收藏</span>
        </div>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="function-list">
      <!-- 安全中心 -->
      <div class="function-item" @click="navigateTo('/mobile/safety')">
        <div class="function-left">
          <div class="function-icon orange">✅</div>
          <span class="function-text">安全中心</span>
        </div>
        <span>›</span>
      </div>

      <!-- 消息中心 -->
      <div class="function-item" @click="navigateTo('/mobile/message_notice')">
        <div class="function-left">
          <div class="function-icon blue">🔔</div>
          <span class="function-text">消息中心</span>
        </div>
        <span>›</span>
      </div>

      <!-- 交易记录 -->
      <div
        class="function-item"
        @click="navigateTo('/mobile/transaction_record')"
      >
        <div class="function-left">
          <div class="function-icon green">🧾</div>
          <span class="function-text">交易记录</span>
        </div>
        <span>›</span>
      </div>

      <!-- 关于我们 -->
      <div class="function-item" @click="navigateTo('/mobile/about')">
        <div class="function-left">
          <div class="function-icon purple">ℹ️</div>
          <span class="function-text">关于我们</span>
        </div>
        <span>›</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { useRouter } from 'vue-router'
const router = useRouter()
function navigateTo(url: string) {
  router.push(url)
}
</script>

<style lang="scss" scoped>
// 颜色变量
$primary-color: #0080ff;
$orange-color: #ff9500;
$green-color: #34c759;
$purple-color: #af52de;
$text-primary: #333;
$text-secondary: #999;
$bg-color: #f7f7f7;
$card-bg: #ffffff;
$border-color: #f5f5f5;

.user-container {
  min-height: 100vh;
  background-color: $bg-color;
  position: relative;
  padding-top: 127rpx;

  // 顶部蓝色背景
  .top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200rpx;
    background-color: $primary-color;
    z-index: 0;
  }

  // 用户信息卡片
  .user-card {
    position: relative;
    margin: 0 20rpx;
    padding: 30rpx;
    background-color: $card-bg;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 1;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 20rpx;
        background-color: #f0f0f0;
      }

      .login-info {
        flex: 1;

        .login-text {
          font-size: 34rpx;
          font-weight: 500;
          color: $text-primary;
          margin-bottom: 8rpx;
        }

        .login-desc {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }

      .setting-icon {
        padding: 10rpx;
      }
    }

    // 数据统计
    .data-stats {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-num {
          font-size: 36rpx;
          font-weight: 500;
          color: $text-primary;
          margin-bottom: 10rpx;
        }

        .stat-text {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
    }
  }

  // 资源中心
  .resource-section {
    margin: 20rpx;
    padding: 30rpx;
    background-color: $card-bg;
    border-radius: 16rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 30rpx;
    }

    .resource-grid {
      display: flex;
      justify-content: space-between;

      .resource-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;

        .resource-icon {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 16rpx;

          &.blue {
            // background-color: $primary-color;
          }
        }

        .resource-text {
          font-size: 28rpx;
          color: $text-primary;
        }
      }
    }
  }

  // 功能列表
  .function-list {
    margin: 20rpx;
    background-color: $card-bg;
    border-radius: 16rpx;
    overflow: hidden;

    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid $border-color;

      &:last-child {
        border-bottom: none;
      }

      .function-left {
        display: flex;
        align-items: center;

        .function-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;

          &.orange {
            background-color: $orange-color;
          }

          &.blue {
            background-color: $primary-color;
          }

          &.green {
            background-color: $green-color;
          }

          &.purple {
            background-color: $purple-color;
          }
        }

        .function-text {
          font-size: 30rpx;
          color: $text-primary;
        }
      }
    }
  }
}
</style>
