优化了首页
This commit is contained in:
yml
@@ -36,36 +36,26 @@ function goToLogin() {
|
||||
|
||||
<template>
|
||||
<main class="mobile-profile-shell">
|
||||
<!-- 未登录区 → van-empty + van-button -->
|
||||
<!-- 未登录区 - 自定义卡片布局 -->
|
||||
<template v-if="!isLoggedIn">
|
||||
<section class="guest-section">
|
||||
<van-empty
|
||||
image="error"
|
||||
description="登录后查看订单、管理发布、提现余额"
|
||||
class="guest-empty"
|
||||
>
|
||||
<template #image>
|
||||
<div class="guest-logo">锤</div>
|
||||
</template>
|
||||
</van-empty>
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
round
|
||||
class="guest-login-btn"
|
||||
@click="goToLogin"
|
||||
>
|
||||
<section class="guest-card">
|
||||
<div class="guest-logo">锤</div>
|
||||
<h1>登录大锤商行</h1>
|
||||
<p>登录后查看订单、管理发布、提现余额，并享受平台担保交易服务。</p>
|
||||
<van-button type="primary" block round class="guest-login-btn" @click="goToLogin">
|
||||
立即登录
|
||||
</van-button>
|
||||
<div class="guest-benefits">
|
||||
<span>担保交易</span><span>订单留痕</span><span>安全交接</span>
|
||||
<van-tag type="primary" plain size="medium" round>担保交易</van-tag>
|
||||
<van-tag type="primary" plain size="medium" round>订单留痕</van-tag>
|
||||
<van-tag type="primary" plain size="medium" round>安全交接</van-tag>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- 已登录区 -->
|
||||
<template v-else>
|
||||
<!-- 头像区 → van-cell + van-image -->
|
||||
<!-- 头像区 -->
|
||||
<section class="profile-header">
|
||||
<van-image
|
||||
round
|
||||
@@ -85,38 +75,28 @@ function goToLogin() {
|
||||
<van-icon name="setting-o" size="24" class="setting-icon" />
|
||||
</section>
|
||||
|
||||
<!-- 余额卡片 → van-cell-group + van-cell -->
|
||||
<!-- 余额卡片 - 两行结构 -->
|
||||
<van-cell-group inset class="balance-group">
|
||||
<van-cell center>
|
||||
<van-cell center class="balance-main">
|
||||
<template #title>
|
||||
<div class="balance-info">
|
||||
<span class="balance-label">账户余额(元)</span>
|
||||
<strong class="balance-value">¥0.00</strong>
|
||||
<van-button
|
||||
size="mini"
|
||||
plain
|
||||
hairline
|
||||
type="warning"
|
||||
class="detail-btn"
|
||||
>
|
||||
查看明细
|
||||
</van-button>
|
||||
</div>
|
||||
<span class="balance-label">账户余额(元)</span>
|
||||
</template>
|
||||
<template #value>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="withdraw-btn"
|
||||
>
|
||||
提现
|
||||
</van-button>
|
||||
<strong class="balance-value">¥0.00</strong>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell class="balance-actions">
|
||||
<template #title>
|
||||
<van-button size="mini" plain hairline type="warning" class="detail-btn">查看明细</van-button>
|
||||
</template>
|
||||
<template #value>
|
||||
<van-button type="primary" size="small" round class="withdraw-btn">提现</van-button>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</template>
|
||||
|
||||
<!-- 订单菜单 → van-grid -->
|
||||
<!-- 订单菜单 -->
|
||||
<section class="menu-section">
|
||||
<h2>我的订单</h2>
|
||||
<van-grid :column-num="4" :border="false" class="order-grid">
|
||||
@@ -135,7 +115,7 @@ function goToLogin() {
|
||||
</van-grid>
|
||||
</section>
|
||||
|
||||
<!-- 我买的 → van-grid -->
|
||||
<!-- 我买的 -->
|
||||
<section class="menu-section">
|
||||
<h2>我买的</h2>
|
||||
<van-grid :column-num="4" :border="false" class="order-grid">
|
||||
@@ -154,7 +134,7 @@ function goToLogin() {
|
||||
</van-grid>
|
||||
</section>
|
||||
|
||||
<!-- 服务菜单 → van-grid -->
|
||||
<!-- 服务菜单 -->
|
||||
<van-cell-group inset class="service-group">
|
||||
<van-grid :column-num="4" :border="false" class="service-grid">
|
||||
<van-grid-item
|
||||
@@ -171,7 +151,7 @@ function goToLogin() {
|
||||
</van-grid>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 退出登录 → van-button -->
|
||||
<!-- 退出登录 -->
|
||||
<van-button
|
||||
v-if="isLoggedIn"
|
||||
plain
|
||||
@@ -183,60 +163,82 @@ function goToLogin() {
|
||||
退出登录
|
||||
</van-button>
|
||||
|
||||
<!-- 底部 TabBar → van-tabbar route -->
|
||||
<van-tabbar route class="profile-tabbar">
|
||||
<van-tabbar-item to="/m" icon="home-o">首页</van-tabbar-item>
|
||||
<van-tabbar-item to="/m/listings" icon="search">租号</van-tabbar-item>
|
||||
<van-tabbar-item to="/m/seller/listings/create" icon="add-o" class="tabbar-publish">发布</van-tabbar-item>
|
||||
<van-tabbar-item to="/m/orders" icon="orders-o">订单</van-tabbar-item>
|
||||
<van-tabbar-item to="/m/profile" icon="manager-o">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
<!-- 底部导航 - 手写原生，和首页一致 -->
|
||||
<nav class="bottom-nav">
|
||||
<RouterLink to="/m" class="nav-item">
|
||||
<van-icon name="home-o" :size="22" />
|
||||
<span>首页</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/m/listings" class="nav-item">
|
||||
<van-icon name="search" :size="22" />
|
||||
<span>租号</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
|
||||
<div class="publish-pill">+</div>
|
||||
<span>发布</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/m/orders" class="nav-item">
|
||||
<van-icon name="orders-o" :size="22" />
|
||||
<span>订单</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/m/profile" class="nav-item active">
|
||||
<van-icon name="manager-o" :size="22" />
|
||||
<span>我的</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-profile-shell {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #fbfaff 0, #fbfaff 210px, #f7f7f7 210px);
|
||||
background: #f5f6f8;
|
||||
color: #1a202c;
|
||||
padding: 28px 12px 96px;
|
||||
padding: 28px 12px 60px;
|
||||
}
|
||||
|
||||
/* ========== 未登录区 ========== */
|
||||
.guest-section {
|
||||
/* ========== 未登录区 - 自定义卡片 ========== */
|
||||
.guest-card {
|
||||
text-align: center;
|
||||
padding: 20px 14px 0;
|
||||
padding: 34px 26px;
|
||||
margin: 0 2px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
|
||||
}
|
||||
|
||||
.guest-empty {
|
||||
padding: 0;
|
||||
.guest-card h1 {
|
||||
margin: 18px 0 0;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.guest-empty :deep(.van-empty__description) {
|
||||
color: #667386;
|
||||
.guest-card p {
|
||||
margin: 10px 0 0;
|
||||
font-size: 14px;
|
||||
color: #667386;
|
||||
line-height: 1.7;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.guest-logo {
|
||||
display: grid;
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
margin: 0 auto 0;
|
||||
margin: 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(145deg, #1777ff, #5ed7ff);
|
||||
background: #1477ff;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.guest-login-btn {
|
||||
margin-top: 18px;
|
||||
margin-top: 20px;
|
||||
border-radius: 13px;
|
||||
background: #050505;
|
||||
border-color: #050505;
|
||||
background: #1477ff;
|
||||
border-color: transparent;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
height: 48px;
|
||||
@@ -249,12 +251,7 @@ function goToLogin() {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.guest-benefits span {
|
||||
border-radius: 999px;
|
||||
background: #eef6ff;
|
||||
color: #1777ff;
|
||||
padding: 6px 9px;
|
||||
font-size: 12px;
|
||||
.guest-benefits :deep(.van-tag) {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -311,7 +308,7 @@ function goToLogin() {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ========== 余额卡片 ========== */
|
||||
/* ========== 余额卡片 - 两行结构 ========== */
|
||||
.balance-group {
|
||||
margin-top: 10px;
|
||||
border-radius: 16px;
|
||||
@@ -319,14 +316,13 @@ function goToLogin() {
|
||||
box-shadow: 0 8px 26px rgba(24, 30, 45, 0.06);
|
||||
}
|
||||
|
||||
.balance-group :deep(.van-cell) {
|
||||
padding: 24px 20px;
|
||||
.balance-main :deep(.van-cell__title) {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.balance-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
.balance-main :deep(.van-cell__value) {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
@@ -336,15 +332,26 @@ function goToLogin() {
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
margin-top: 10px;
|
||||
font-size: 34px;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.balance-actions {
|
||||
padding-top: 4px !important;
|
||||
padding-bottom: 12px !important;
|
||||
}
|
||||
|
||||
.balance-actions :deep(.van-cell__title) {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.balance-actions :deep(.van-cell__value) {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
margin-top: 10px;
|
||||
align-self: flex-start;
|
||||
border-color: #ff8a42;
|
||||
color: #ff5f00;
|
||||
background: #fff5ee;
|
||||
@@ -352,12 +359,11 @@ function goToLogin() {
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
background: #050505;
|
||||
border-color: #050505;
|
||||
border-radius: 6px;
|
||||
padding: 12px 18px;
|
||||
background: #1477ff;
|
||||
border-color: transparent;
|
||||
font-weight: 800;
|
||||
height: auto;
|
||||
height: 32px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* ========== 订单菜单 ========== */
|
||||
@@ -416,55 +422,52 @@ function goToLogin() {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* ========== van-tabbar 底部导航 ========== */
|
||||
.profile-tabbar {
|
||||
/* ========== 底部导航 - 手写原生 ========== */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
z-index: 20;
|
||||
height: 60px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 16px 36px rgba(23, 35, 61, 0.16);
|
||||
backdrop-filter: blur(14px);
|
||||
padding: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.profile-tabbar :deep(.van-tabbar) {
|
||||
border-radius: 22px;
|
||||
height: 60px;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-tabbar :deep(.van-tabbar-item) {
|
||||
color: #708097;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
.nav-item.active {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.profile-tabbar :deep(.van-tabbar-item--active) {
|
||||
color: #5b6ee1;
|
||||
.nav-item span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-tabbar :deep(.van-tabbar-item__icon) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 发布按钮特殊样式 */
|
||||
.tabbar-publish :deep(.van-tabbar-item__icon) {
|
||||
.publish-pill {
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #ffb21a, #ff6a00);
|
||||
color: #ffffff !important;
|
||||
font-size: 22px;
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 8px 20px rgba(255, 106, 0, 0.35);
|
||||
border-radius: 13px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tabbar-publish :deep(.van-tabbar-item__text) {
|
||||
.nav-publish span {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
@@ -476,9 +479,9 @@ function goToLogin() {
|
||||
box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.profile-tabbar {
|
||||
right: calc((100vw - 430px) / 2 + 12px);
|
||||
left: calc((100vw - 430px) / 2 + 12px);
|
||||
.bottom-nav {
|
||||
left: calc((100vw - 430px) / 2);
|
||||
right: calc((100vw - 430px) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user