[Snow Team] frontend-pc: auto-commit work
This commit is contained in:
yml
@@ -1,33 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { Bell, House, Key, Phone, Shop, Tickets, UserFilled, Wallet } from '@element-plus/icons-vue'
|
||||
import {
|
||||
Bell,
|
||||
CirclePlus,
|
||||
House,
|
||||
Search,
|
||||
Shop,
|
||||
Tickets,
|
||||
UserFilled,
|
||||
Wallet,
|
||||
} from "@element-plus/icons-vue";
|
||||
|
||||
const navItems = [
|
||||
{ label: '首页', to: '/', icon: House },
|
||||
{ label: '租号', to: '/listings', icon: Shop },
|
||||
{ label: '订单', to: '/orders', icon: Tickets },
|
||||
{ label: '钱包', to: '/wallet', icon: Wallet },
|
||||
{ label: '通知', to: '/notifications', icon: Bell },
|
||||
{ label: '实名', to: '/realname', icon: UserFilled },
|
||||
{ label: '后台', to: '/admin/login', icon: Key },
|
||||
{ label: '登录', to: '/login', icon: Phone },
|
||||
]
|
||||
{ label: "首页", to: "/", icon: House },
|
||||
{ label: "租号大厅", to: "/listings", icon: Shop },
|
||||
{ label: "我的订单", to: "/orders", icon: Tickets },
|
||||
{ label: "钱包", to: "/wallet", icon: Wallet },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<aside class="sidebar">
|
||||
<RouterLink class="brand" to="/">
|
||||
<span class="brand-mark">H</span>
|
||||
<span>哈夫币租号</span>
|
||||
<div class="pc-app-shell">
|
||||
<header class="pc-topbar">
|
||||
<RouterLink class="pc-brand" to="/">
|
||||
<span class="pc-brand-mark">HFB</span>
|
||||
<span class="pc-brand-text">哈夫币租号</span>
|
||||
</RouterLink>
|
||||
<nav class="nav">
|
||||
<RouterLink v-for="item in navItems" :key="item.to" class="nav-link" :to="item.to">
|
||||
|
||||
<nav class="pc-nav">
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
class="pc-nav-link"
|
||||
:to="item.to"
|
||||
>
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<span>{{ item.label }}</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="main">
|
||||
|
||||
<div class="pc-search">
|
||||
<el-icon><Search /></el-icon>
|
||||
<input placeholder="搜索区服 / 段位 / 哈夫币数量" />
|
||||
</div>
|
||||
|
||||
<div class="pc-user-actions">
|
||||
<RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</RouterLink>
|
||||
<RouterLink class="pc-login-link" to="/login">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span>登录/注册</span>
|
||||
</RouterLink>
|
||||
<RouterLink class="pc-post-link" to="/seller/listings/create">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<span>发布账号</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="pc-main">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
:root {
|
||||
color: #1f2933;
|
||||
background: #f6f8fb;
|
||||
font-family:
|
||||
Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
@@ -170,8 +169,11 @@ a {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
place-items: center;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(17, 24, 39, 0.08)),
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(15, 118, 110, 0.12),
|
||||
rgba(17, 24, 39, 0.08)
|
||||
),
|
||||
#f5f7fb;
|
||||
padding: 24px;
|
||||
}
|
||||
@@ -182,7 +184,7 @@ a {
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 28px;
|
||||
box-shadow: 0 20px 60px rgba(17, 24, 39, 0.10);
|
||||
box-shadow: 0 20px 60px rgba(17, 24, 39, 0.1);
|
||||
}
|
||||
|
||||
.admin-login-brand {
|
||||
@@ -646,6 +648,635 @@ h1 {
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
/* PC public marketplace */
|
||||
.pc-app-shell {
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(
|
||||
circle at 12% 0%,
|
||||
rgba(255, 200, 87, 0.24),
|
||||
transparent 32%
|
||||
),
|
||||
linear-gradient(180deg, #fff9e8 0, #f6f8fb 300px, #f6f8fb 100%);
|
||||
}
|
||||
|
||||
.pc-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto minmax(280px, 440px) auto;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
min-height: 72px;
|
||||
border-bottom: 1px solid rgba(231, 183, 69, 0.32);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
padding: 0 clamp(24px, 5vw, 72px);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.pc-brand,
|
||||
.pc-nav,
|
||||
.pc-user-actions,
|
||||
.pc-search,
|
||||
.pc-login-link,
|
||||
.pc-post-link,
|
||||
.pc-icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pc-brand {
|
||||
gap: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pc-brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #f59e0b, #111827);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 14px 28px rgba(245, 158, 11, 0.26);
|
||||
}
|
||||
|
||||
.pc-brand-text {
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pc-nav {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pc-nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 40px;
|
||||
border-radius: 999px;
|
||||
padding: 0 14px;
|
||||
color: #4b5563;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pc-nav-link.router-link-active,
|
||||
.pc-nav-link:hover {
|
||||
background: #fff3c4;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.pc-search {
|
||||
gap: 10px;
|
||||
height: 42px;
|
||||
border: 1px solid #f1d38b;
|
||||
border-radius: 999px;
|
||||
background: #fffaf0;
|
||||
padding: 0 16px;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.pc-search input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: #111827;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pc-user-actions {
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pc-icon-link,
|
||||
.pc-login-link,
|
||||
.pc-post-link {
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pc-icon-link {
|
||||
width: 40px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #ffffff;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.pc-login-link {
|
||||
gap: 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #ffffff;
|
||||
padding: 0 14px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.pc-post-link {
|
||||
gap: 6px;
|
||||
background: linear-gradient(135deg, #f59e0b, #f97316);
|
||||
padding: 0 16px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22);
|
||||
}
|
||||
|
||||
.pc-post-link.large {
|
||||
min-height: 44px;
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
.pc-main {
|
||||
width: min(1240px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
padding: 28px 0 56px;
|
||||
}
|
||||
|
||||
.anti-fraud-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(90deg, #fffbeb, #fef3c7);
|
||||
padding: 10px 16px;
|
||||
color: #92400e;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.anti-fraud-strip.compact {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.pc-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 340px;
|
||||
gap: 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.pc-hero-content,
|
||||
.pc-action-card,
|
||||
.advanced-filter-card,
|
||||
.resource-card,
|
||||
.feature-card,
|
||||
.pc-stat-card {
|
||||
border: 1px solid rgba(229, 231, 235, 0.9);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
|
||||
}
|
||||
|
||||
.pc-hero-content {
|
||||
min-height: 360px;
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(17, 24, 39, 0.82),
|
||||
rgba(120, 53, 15, 0.72)
|
||||
),
|
||||
radial-gradient(circle at 82% 20%, rgba(251, 191, 36, 0.9), transparent 24%),
|
||||
#111827;
|
||||
padding: 48px;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pc-hero-content .eyebrow {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.pc-hero h1 {
|
||||
max-width: 620px;
|
||||
font-size: clamp(40px, 5vw, 64px);
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.pc-hero-desc {
|
||||
max-width: 560px;
|
||||
margin: 18px 0 0;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.pc-hero-actions,
|
||||
.hero-tags,
|
||||
.sort-toolbar,
|
||||
.resource-tags,
|
||||
.resource-title-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pc-hero-actions {
|
||||
gap: 14px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.primary-cta,
|
||||
.secondary-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 46px;
|
||||
border-radius: 999px;
|
||||
padding: 0 22px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.primary-cta {
|
||||
gap: 8px;
|
||||
background: #fbbf24;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.secondary-cta {
|
||||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-tags {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.hero-tags span {
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 8px 12px;
|
||||
color: #fde68a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pc-action-card {
|
||||
border-radius: 24px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.pc-action-card h2 {
|
||||
margin: 0 0 18px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: grid;
|
||||
grid-template-columns: 42px 1fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
border: 1px solid #edf0f4;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.action-row + .action-row {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.action-row .el-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.action-row strong,
|
||||
.action-row span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-row strong {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.action-row span {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-row.highlight {
|
||||
border-color: #fbbf24;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.pc-stat-grid,
|
||||
.pc-feature-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pc-stat-card,
|
||||
.feature-card {
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pc-stat-card span,
|
||||
.feature-card span {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pc-stat-card strong,
|
||||
.feature-card strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #111827;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.pc-stat-card p {
|
||||
margin: 8px 0 0;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.feature-card .el-icon {
|
||||
color: #f59e0b;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.feature-card strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.listings-header {
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.advanced-filter-card {
|
||||
border-radius: 22px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-title,
|
||||
.sort-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.filter-title strong {
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.filter-title span {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.pc-filter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.pc-filter-grid .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sort-toolbar {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.pc-resource-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr) 150px;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
border-radius: 22px;
|
||||
padding: 14px;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 22px 50px rgba(17, 24, 39, 0.12);
|
||||
}
|
||||
|
||||
.resource-cover {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 108px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #111827, #f59e0b);
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resource-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.resource-title-line {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.resource-title-line strong {
|
||||
color: #111827;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.resource-title-line em {
|
||||
border-radius: 999px;
|
||||
background: #dcfce7;
|
||||
padding: 4px 10px;
|
||||
color: #166534;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.resource-main p {
|
||||
display: -webkit-box;
|
||||
margin: 10px 0 0;
|
||||
overflow: hidden;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.resource-tags {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.resource-tags span {
|
||||
border-radius: 999px;
|
||||
background: #f3f4f6;
|
||||
padding: 5px 10px;
|
||||
color: #4b5563;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.resource-price-box {
|
||||
border-left: 1px solid #edf0f4;
|
||||
padding-left: 18px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.resource-price-box span,
|
||||
.resource-price-box em,
|
||||
.resource-price-box small {
|
||||
display: block;
|
||||
color: #6b7280;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.resource-price-box strong {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
color: #ef4444;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pc-detail-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 360px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.pc-detail-main,
|
||||
.pc-order-card {
|
||||
border: 1px solid rgba(229, 231, 235, 0.9);
|
||||
border-radius: 24px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
|
||||
}
|
||||
|
||||
.pc-detail-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-cover {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #111827, #92400e 54%, #f59e0b);
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.detail-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.pc-detail .detail-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin: 0;
|
||||
padding: 0 28px 28px;
|
||||
}
|
||||
|
||||
.pc-order-card {
|
||||
position: sticky;
|
||||
top: 96px;
|
||||
align-self: start;
|
||||
margin-top: 0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.pc-order-card h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.order-safe-text {
|
||||
margin: 0 0 18px;
|
||||
color: #6b7280;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.order-total-box {
|
||||
border-radius: 18px;
|
||||
background: #fffbeb;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.order-total-box span,
|
||||
.order-total-box em {
|
||||
display: block;
|
||||
color: #92400e;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.order-total-box strong {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
color: #ef4444;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.pc-topbar {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
.pc-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pc-hero,
|
||||
.pc-filter-grid,
|
||||
.pc-detail-layout,
|
||||
.pc-detail .detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pc-order-card {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
grid-template-columns: 120px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.resource-price-box {
|
||||
grid-column: 2;
|
||||
border-left: 0;
|
||||
border-top: 1px solid #edf0f4;
|
||||
padding: 12px 0 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.admin-shell {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,87 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from "element-plus";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import { fetchListing, type Listing } from '@/api/listings'
|
||||
import { createOrder } from '@/api/orders'
|
||||
import { fetchListing, type Listing } from "@/api/listings";
|
||||
import { createOrder } from "@/api/orders";
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const ordering = ref(false)
|
||||
const rentHours = ref(1)
|
||||
const listing = ref<Listing | null>(null)
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const ordering = ref(false);
|
||||
const rentHours = ref(1);
|
||||
const listing = ref<Listing | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
loading.value = true;
|
||||
try {
|
||||
listing.value = await fetchListing(String(route.params.id))
|
||||
listing.value = await fetchListing(String(route.params.id));
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
async function handleCreateOrder() {
|
||||
if (!listing.value) return
|
||||
ordering.value = true
|
||||
if (!listing.value) return;
|
||||
ordering.value = true;
|
||||
try {
|
||||
const order = await createOrder(listing.value.id, rentHours.value)
|
||||
ElMessage.success('订单已创建，账号已锁定')
|
||||
await router.push(`/orders/${order.id}`)
|
||||
const order = await createOrder(listing.value.id, rentHours.value);
|
||||
ElMessage.success("订单已创建，账号已锁定");
|
||||
await router.push(`/orders/${order.id}`);
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '下单失败'))
|
||||
ElMessage.error(readError(error, "下单失败"));
|
||||
} finally {
|
||||
ordering.value = false
|
||||
ordering.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
if (typeof error === "object" && error && "response" in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } })
|
||||
.response;
|
||||
return response?.data?.message || fallback;
|
||||
}
|
||||
return fallback
|
||||
return fallback;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page" v-loading="loading">
|
||||
<div v-if="listing" class="page-header">
|
||||
<p class="eyebrow">{{ listing.server_region }} / {{ listing.login_platform }}</p>
|
||||
<h1>{{ listing.title }}</h1>
|
||||
<p>{{ listing.description || '号主暂未填写详细说明。' }}</p>
|
||||
<section class="pc-detail page" v-loading="loading">
|
||||
<div class="anti-fraud-strip compact">
|
||||
<span
|
||||
>防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="listing" class="detail-grid">
|
||||
<div class="metric-card">
|
||||
<span>哈夫币</span>
|
||||
<strong>{{ listing.haf_coin_amount }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>时租</span>
|
||||
<strong>¥{{ listing.price_hourly }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>押金</span>
|
||||
<strong>¥{{ listing.deposit_amount }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>租期</span>
|
||||
<strong>{{ listing.min_rent_hours }}-{{ listing.max_rent_hours }} 小时</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="listing" class="pc-detail-layout">
|
||||
<section class="pc-detail-main">
|
||||
<div class="detail-cover">
|
||||
<img
|
||||
v-if="listing.screenshot_urls?.[0]"
|
||||
:src="listing.screenshot_urls[0]"
|
||||
:alt="listing.title"
|
||||
/>
|
||||
<span v-else>HFB ACCOUNT</span>
|
||||
</div>
|
||||
<div class="page-header detail-title">
|
||||
<p class="eyebrow">
|
||||
{{ listing.server_region }} / {{ listing.login_platform }}
|
||||
</p>
|
||||
<h1>{{ listing.title }}</h1>
|
||||
<p>{{ listing.description || "号主暂未填写详细说明。" }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="listing" class="order-panel">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="租用时长">
|
||||
<el-input-number v-model="rentHours" :min="listing.min_rent_hours" :max="listing.max_rent_hours" />
|
||||
</el-form-item>
|
||||
<p>
|
||||
预计租金：¥{{ (listing.price_hourly * rentHours).toFixed(2) }}，押金：¥{{ listing.deposit_amount }}
|
||||
<div class="detail-grid">
|
||||
<div class="metric-card">
|
||||
<span>哈夫币</span>
|
||||
<strong>{{ listing.haf_coin_amount }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>时租</span>
|
||||
<strong>¥{{ listing.price_hourly }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>日租</span>
|
||||
<strong>¥{{ listing.price_daily }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>押金</span>
|
||||
<strong>¥{{ listing.deposit_amount }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="order-panel pc-order-card">
|
||||
<h2>立即租用</h2>
|
||||
<p class="order-safe-text">
|
||||
平台托管订单与押金，租期 {{ listing.min_rent_hours }}-{{
|
||||
listing.max_rent_hours
|
||||
}}
|
||||
小时。
|
||||
</p>
|
||||
<el-button type="primary" :loading="ordering" @click="handleCreateOrder">立即下单并锁定账号</el-button>
|
||||
</el-form>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="租用时长">
|
||||
<el-input-number
|
||||
v-model="rentHours"
|
||||
:min="listing.min_rent_hours"
|
||||
:max="listing.max_rent_hours"
|
||||
class="full-control"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="order-total-box">
|
||||
<span>预计租金</span>
|
||||
<strong
|
||||
>¥{{ (listing.price_hourly * rentHours).toFixed(2) }}</strong
|
||||
>
|
||||
<em>押金 ¥{{ listing.deposit_amount }}</em>
|
||||
</div>
|
||||
<el-button
|
||||
type="warning"
|
||||
size="large"
|
||||
:loading="ordering"
|
||||
class="full-control"
|
||||
@click="handleCreateOrder"
|
||||
>
|
||||
立即下单并锁定账号
|
||||
</el-button>
|
||||
</el-form>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,40 +1,214 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { Refresh, Search } from "@element-plus/icons-vue";
|
||||
|
||||
import { fetchListings, type Listing } from '@/api/listings'
|
||||
import { fetchListings, type Listing } from "@/api/listings";
|
||||
|
||||
const loading = ref(false)
|
||||
const listings = ref<Listing[]>([])
|
||||
const loading = ref(false);
|
||||
const listings = ref<Listing[]>([]);
|
||||
const sortBy = ref("recommended");
|
||||
const filters = reactive({
|
||||
keyword: "",
|
||||
region: "",
|
||||
platform: "",
|
||||
minCoin: undefined as number | undefined,
|
||||
maxPrice: undefined as number | undefined,
|
||||
});
|
||||
|
||||
onMounted(loadListings)
|
||||
const regionOptions = computed(() =>
|
||||
uniqueOptions(listings.value.map((item) => item.server_region))
|
||||
);
|
||||
const platformOptions = computed(() =>
|
||||
uniqueOptions(listings.value.map((item) => item.login_platform))
|
||||
);
|
||||
const filteredListings = computed(() => {
|
||||
const keyword = filters.keyword.trim().toLowerCase();
|
||||
const result = listings.value.filter((item) => {
|
||||
const matchKeyword =
|
||||
!keyword ||
|
||||
[item.title, item.description, item.rank_level, item.server_region]
|
||||
.filter(Boolean)
|
||||
.some((value) => String(value).toLowerCase().includes(keyword));
|
||||
const matchRegion =
|
||||
!filters.region || item.server_region === filters.region;
|
||||
const matchPlatform =
|
||||
!filters.platform || item.login_platform === filters.platform;
|
||||
const matchCoin =
|
||||
!filters.minCoin || item.haf_coin_amount >= filters.minCoin;
|
||||
const matchPrice =
|
||||
!filters.maxPrice || item.price_hourly <= filters.maxPrice;
|
||||
return (
|
||||
matchKeyword && matchRegion && matchPlatform && matchCoin && matchPrice
|
||||
);
|
||||
});
|
||||
|
||||
return [...result].sort((a, b) => {
|
||||
if (sortBy.value === "price-asc") return a.price_hourly - b.price_hourly;
|
||||
if (sortBy.value === "coin-desc")
|
||||
return b.haf_coin_amount - a.haf_coin_amount;
|
||||
if (sortBy.value === "deposit-asc")
|
||||
return a.deposit_amount - b.deposit_amount;
|
||||
return (
|
||||
b.haf_coin_amount - a.haf_coin_amount || a.price_hourly - b.price_hourly
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(loadListings);
|
||||
|
||||
async function loadListings() {
|
||||
loading.value = true
|
||||
loading.value = true;
|
||||
try {
|
||||
listings.value = await fetchListings()
|
||||
listings.value = await fetchListings();
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = "";
|
||||
filters.region = "";
|
||||
filters.platform = "";
|
||||
filters.minCoin = undefined;
|
||||
filters.maxPrice = undefined;
|
||||
sortBy.value = "recommended";
|
||||
}
|
||||
|
||||
function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.filter(Boolean))];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">Listings</p>
|
||||
<h1>租号列表</h1>
|
||||
<p>支持区服、平台、价格、押金、段位和哈夫币数量展示。</p>
|
||||
<section class="pc-listings page">
|
||||
<div class="anti-fraud-strip compact">
|
||||
<span
|
||||
>防骗提示：只在平台内沟通、下单和确认归还，谨防冒充客服与低价私单。</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="!loading && listings.length === 0" description="暂无已上架租号" />
|
||||
<div v-else v-loading="loading" class="listing-grid">
|
||||
<RouterLink v-for="item in listings" :key="item.id" class="listing-card" :to="`/listings/${item.id}`">
|
||||
<span>{{ item.server_region }} / {{ item.login_platform }}</span>
|
||||
<strong>{{ item.title }}</strong>
|
||||
<p>{{ item.rank_level || '未填写段位' }} · 哈夫币 {{ item.haf_coin_amount }}</p>
|
||||
<div class="listing-price">
|
||||
<b>¥{{ item.price_hourly }}/小时</b>
|
||||
<div class="page-header-row listings-header">
|
||||
<div>
|
||||
<p class="eyebrow">Account Market</p>
|
||||
<h1>租号大厅</h1>
|
||||
<p>参考大锤商行 PC 信息密度，支持高级筛选、排序和卡片式资源浏览。</p>
|
||||
</div>
|
||||
<RouterLink class="pc-post-link large" to="/seller/listings/create"
|
||||
>账号发布</RouterLink
|
||||
>
|
||||
</div>
|
||||
|
||||
<section class="advanced-filter-card">
|
||||
<div class="filter-title">
|
||||
<strong>高级筛选</strong>
|
||||
<span>共 {{ filteredListings.length }} 个可租账号</span>
|
||||
</div>
|
||||
<el-form label-position="top" class="pc-filter-grid">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
placeholder="标题 / 段位 / 区服"
|
||||
:prefix-icon="Search"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="区服">
|
||||
<el-select v-model="filters.region" placeholder="全部区服" clearable>
|
||||
<el-option
|
||||
v-for="item in regionOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录平台">
|
||||
<el-select
|
||||
v-model="filters.platform"
|
||||
placeholder="全部平台"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in platformOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="最低哈夫币">
|
||||
<el-input-number
|
||||
v-model="filters.minCoin"
|
||||
:min="0"
|
||||
:step="10000"
|
||||
placeholder="不限"
|
||||
class="full-control"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="最高时租">
|
||||
<el-input-number
|
||||
v-model="filters.maxPrice"
|
||||
:min="0"
|
||||
:step="1"
|
||||
placeholder="不限"
|
||||
class="full-control"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="sort-toolbar">
|
||||
<el-radio-group v-model="sortBy">
|
||||
<el-radio-button label="recommended">综合推荐</el-radio-button>
|
||||
<el-radio-button label="price-asc">价格最低</el-radio-button>
|
||||
<el-radio-button label="coin-desc">哈夫币最多</el-radio-button>
|
||||
<el-radio-button label="deposit-asc">押金最低</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-empty
|
||||
v-if="!loading && filteredListings.length === 0"
|
||||
description="暂无符合条件的租号"
|
||||
/>
|
||||
<div v-else v-loading="loading" class="pc-resource-list">
|
||||
<RouterLink
|
||||
v-for="item in filteredListings"
|
||||
:key="item.id"
|
||||
class="resource-card"
|
||||
:to="`/listings/${item.id}`"
|
||||
>
|
||||
<div class="resource-cover">
|
||||
<img
|
||||
v-if="item.screenshot_urls?.[0]"
|
||||
:src="item.screenshot_urls[0]"
|
||||
:alt="item.title"
|
||||
/>
|
||||
<span v-else>HFB</span>
|
||||
</div>
|
||||
<div class="resource-main">
|
||||
<div class="resource-title-line">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<em>{{ item.status === "published" ? "可租" : item.status }}</em>
|
||||
</div>
|
||||
<p>
|
||||
{{
|
||||
item.description || "号主暂未填写说明，可下单后按平台流程交接。"
|
||||
}}
|
||||
</p>
|
||||
<div class="resource-tags">
|
||||
<span>{{ item.server_region }}</span>
|
||||
<span>{{ item.login_platform }}</span>
|
||||
<span>{{ item.rank_level || "未填写段位" }}</span>
|
||||
<span>哈夫币 {{ item.haf_coin_amount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-price-box">
|
||||
<span>时租</span>
|
||||
<strong>¥{{ item.price_hourly }}</strong>
|
||||
<em>押金 ¥{{ item.deposit_amount }}</em>
|
||||
<small
|
||||
>{{ item.min_rent_hours }}-{{ item.max_rent_hours }} 小时</small
|
||||
>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user