| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>我的</title>
- <link rel="icon" type="image/png" href="../../static/favicon.png">
- <link rel="stylesheet" href="../../css/profile/profile.css">
- <link rel="stylesheet" href="../../css/hint-view.css">
- </head>
- <body>
- <!-- 充值界面 iframe -->
- <iframe id="rechargeViewFrame" src="../recharge-view/recharge-view.html" frameborder="0" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000004; border: none; background: transparent;"></iframe>
- <div class="profile-container">
- <!-- 返回按钮 -->
- <div class="profile-header">
- <button class="back-btn" id="backBtn">
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
- <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- 返回
- </button>
- </div>
- <div class="profile-content">
- <h1 class="page-title">我的</h1>
- <div class="profile-layout">
- <!-- 左侧：用户信息区域 -->
- <div class="profile-left">
- <!-- 用户资料区域 -->
- <div class="profile-section">
- <h2 class="section-title">用户资料</h2>
- <div class="profile-info">
- <div class="avatar-section">
- <div class="avatar-preview" id="avatarPreview">
- <img id="avatarImage" src="" alt="头像">
- </div>
- </div>
-
- <div class="info-form">
- <div class="form-item">
- <label class="form-label">用户名</label>
- <input type="text" class="form-input" id="usernameInput" readonly>
- </div>
- <div class="form-item">
- <label class="form-label">手机号</label>
- <input type="text" class="form-input" id="phoneInput" readonly>
- </div>
- </div>
- </div>
- </div>
- <!-- Ani币区域 -->
- <div class="profile-section">
- <h2 class="section-title">我的Ani币</h2>
- <div class="points-section">
- <div class="points-display">
- <span class="points-label">当前余额：</span>
- <span class="points-value" id="pointsValue">0</span>
- <span class="points-unit">Ani币</span>
- </div>
- <button class="recharge-btn" id="rechargeBtn">充值</button>
- </div>
- </div>
- <!-- 退出登录按钮 -->
- <button class="logout-btn" id="logoutBtn">退出登录</button>
- </div>
- <!-- 右侧：AI生图历史和购买记录 -->
- <div class="profile-right">
- <div class="profile-section history-section">
- <h2 class="section-title">AI生图历史</h2>
- <div class="ai-history-container" id="aiHistoryContainer">
- <div class="loading-state" id="historyLoading">加载中...</div>
- <div class="empty-state" id="historyEmpty" style="display: none;">暂无历史记录</div>
- <div class="history-grid" id="historyGrid"></div>
- </div>
- </div>
-
- <div class="profile-section purchase-section">
- <h2 class="section-title">素材购买记录</h2>
- <div class="purchase-container" id="purchaseContainer">
- <div class="loading-state" id="purchaseLoading">加载中...</div>
- <div class="empty-state" id="purchaseEmpty" style="display: none;">暂无购买记录</div>
- <div class="purchase-grid" id="purchaseGrid"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="../../js/hint-view.js"></script>
- <script src="../../js/profile/profile.js"></script>
- </body>
- </html>
|
