[Snow Team] frontend-pc: auto-commit work

2026-05-22 19:11:08 +08:00
parent 236518ade4
commit 47180413f4
5 changed files with 1088 additions and 120 deletions
@@ -1,23 +1,110 @@
+<script setup lang="ts">
+import {
+  ArrowRight,
+  CircleCheck,
+  Coin,
+  Iphone,
+  Lock,
+  Pointer,
+  Trophy,
+} from "@element-plus/icons-vue";
+
+const quickStats = [
+  { label: "在线账号", value: "128+", desc: "覆盖热门区服" },
+  { label: "最快交接", value: "3分钟", desc: "号主在线响应" },
+  { label: "押金托管", value: "平台担保", desc: "归还后释放" },
+];
+
+const categories = [
+  "烽火地带",
+  "全面战场",
+  "高哈夫币",
+  "高段位",
+  "低押金",
+  "可包夜",
+];
+</script>
+
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Delta Force Rental</p>
-      <h1>哈夫币租号平台</h1>
-      <p>先把账号发布、交接、订单、押金和仲裁链路打牢，再接真实支付和更复杂的风控。</p>
+  <section class="pc-home page">
+    <div class="anti-fraud-strip">
+      <el-icon><Lock /></el-icon>
+      <span
+        >防骗提示：哈夫币租号仅通过平台下单与托管押金，切勿私下转账、共享验证码或点击陌生链接。</span
+      >
    </div>
-    <div class="metric-grid">
-      <div class="metric-card">
-        <span>一期路线</span>
-        <strong>自研业务核心</strong>
+
+    <section class="pc-hero">
+      <div class="pc-hero-content">
+        <p class="eyebrow">Delta Force Account Rental</p>
+        <h1>三角洲行动账号租赁大厅</h1>
+        <p class="pc-hero-desc">
+          按区服、段位、哈夫币、价格快速筛选，平台担保交接，找号更省心。
+        </p>
+        <div class="pc-hero-actions">
+          <RouterLink class="primary-cta" to="/listings">
+            立即找号
+            <el-icon><ArrowRight /></el-icon>
+          </RouterLink>
+          <RouterLink class="secondary-cta" to="/seller/listings/create"
+            >我要发布账号</RouterLink
+          >
+        </div>
+        <div class="hero-tags">
+          <span v-for="item in categories" :key="item">{{ item }}</span>
+        </div>
      </div>
-      <div class="metric-card">
-        <span>交接模式</span>
-        <strong>号主手动交接</strong>
-      </div>
-      <div class="metric-card">
-        <span>资金模型</span>
-        <strong>先做账务</strong>
+
+      <aside class="pc-action-card">
+        <h2>快捷入口</h2>
+        <RouterLink class="action-row" to="/orders">
+          <el-icon><Pointer /></el-icon>
+          <div>
+            <strong>我租到的</strong>
+            <span>查看交接、租赁中与归还订单</span>
+          </div>
+        </RouterLink>
+        <RouterLink class="action-row" to="/seller/listings">
+          <el-icon><Trophy /></el-icon>
+          <div>
+            <strong>我租出的</strong>
+            <span>管理已发布账号与租客交接</span>
+          </div>
+        </RouterLink>
+        <RouterLink class="action-row highlight" to="/seller/listings/create">
+          <el-icon><Coin /></el-icon>
+          <div>
+            <strong>账号发布</strong>
+            <span>实名认证后即可上架出租</span>
+          </div>
+        </RouterLink>
+      </aside>
+    </section>
+
+    <div class="pc-stat-grid">
+      <div v-for="item in quickStats" :key="item.label" class="pc-stat-card">
+        <span>{{ item.label }}</span>
+        <strong>{{ item.value }}</strong>
+        <p>{{ item.desc }}</p>
      </div>
    </div>
+
+    <section class="pc-feature-row">
+      <div class="feature-card">
+        <el-icon><CircleCheck /></el-icon>
+        <strong>平台审核上架</strong>
+        <span>账号信息、截图与价格经过审核后展示</span>
+      </div>
+      <div class="feature-card">
+        <el-icon><Lock /></el-icon>
+        <strong>押金账务留痕</strong>
+        <span>订单、押金、仲裁记录全链路可追踪</span>
+      </div>
+      <div class="feature-card">
+        <el-icon><Iphone /></el-icon>
+        <strong>交接流程清晰</strong>
+        <span>号主提交说明，租客确认收号与归还</span>
+      </div>
+    </section>
  </section>
 </template>