feat(pc): 详情页增加吸顶返回列表按钮,首页按筛选签名恢复滚动位置

This commit is contained in:
yml2213
2026-08-15 10:42:09 +08:00
parent a25486201c
commit fbd59ed19f
4 changed files with 176 additions and 2 deletions
@@ -3,7 +3,8 @@ import { readError } from '@/shared/utils/error'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ShoppingCart, Star, StarFilled } from '@element-plus/icons-vue'
import { ShoppingCart, Star, StarFilled, ArrowLeft } from '@element-plus/icons-vue'
import { goBackOrHome } from '@/shared/utils/routerBack'
import { fetchListing, type Listing } from '@/features/listings/api/listings'
import { useListingCollections } from '@/features/listings/composables/useListingCollections'
@@ -345,6 +346,10 @@ function handleToggleFavorite() {
const added = toggleFavorite(listing.value)
ElMessage.success(added ? '已收藏账号' : '已取消收藏')
}
function goBack() {
goBackOrHome(router)
}
</script>
<template>
@@ -353,6 +358,13 @@ function handleToggleFavorite() {
<span>防骗提示:下单后请按平台交接流程确认收号与归还,不要私下交易。</span>
</div>
<div class="detail-back-bar">
<button class="detail-back-btn" type="button" @click="goBack">
<el-icon><ArrowLeft /></el-icon>
<span>返回列表</span>
</button>
</div>
<div v-if="listing" class="pc-detail-layout">
<section class="pc-detail-main">
<div class="detail-hero-card">
@@ -619,6 +631,44 @@ function handleToggleFavorite() {
</template>
<style scoped>
.detail-back-bar {
/* 吸顶固定:始终显示在顶部导航栏(64px)下方,滚动时不跟随页面移走 */
position: sticky;
top: 78px;
z-index: 20;
display: flex;
align-items: center;
margin-bottom: 14px;
}
.detail-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border: 1px solid #eef1f5;
border-radius: 10px;
background: #ffffff;
color: #475569;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 8px rgba(23, 35, 61, 0.08);
transition:
border-color 0.2s ease,
color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.detail-back-btn:hover {
border-color: #ff6a00;
background: #fff7ed;
color: #ff6a00;
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.12);
}
.pc-detail-layout {
grid-template-columns: minmax(0, 1fr) 420px;
align-items: start;