111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<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="pc-home page">
|
||
<div class="anti-fraud-strip">
|
||
<el-icon><Lock /></el-icon>
|
||
<span
|
||
>防骗提示：哈夫币租号仅通过平台下单与托管押金，切勿私下转账、共享验证码或点击陌生链接。</span
|
||
>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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>
|