feat(pc): 详情页增加吸顶返回列表按钮,首页按筛选签名恢复滚动位置
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user