book-hi/pages-sell/pages/hot-sell.vue

<template>
	<view class="hot-sell-page">
		<!-- Header Background -->
		<image class="header-bg" src="/pages-sell/static/hot/top-bg.png" mode="widthFix"></image>
		
		<!-- Custom Navbar -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<image src="/pages-sell/static/hot/icon-back.png" class="back-icon" @click="goBack"></image>
			</view>
		</view>

		<!-- Header Content -->
		<view class="header-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
			<view class="title-area">
				<text class="main-title">热销榜单</text>
				<text class="sub-title">Best Sellers</text>
			</view>
		</view>

		<!-- List Content -->
		<view class="list-container">
			<hot-sell-item 
				v-for="(item, index) in bookList" 
				:key="index" 
				:rank="index + 1" 
				:item="item"
			></hot-sell-item>
		</view>
	</view>
</template>

<script>
import HotSellItem from '../components/hot-sell-item/index.vue'

export default {
	components: {
		HotSellItem
	},
	data() {
		return {
			statusBarHeight: 20,
			bookList: [
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				},
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				},
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				},
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				},
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				},
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				},
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
				}
			]
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 20;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.hot-sell-page {
	min-height: 100vh;
	background-color: #fff;
	position: relative;
}

.header-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}

.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	
	.navbar-content {
		height: 44px;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		
		.back-icon {
			width: 16rpx;
			height: 26rpx;
		}
	}
}

.header-content {
	position: relative;
	z-index: 1;
	padding: 0 40rpx;
	height: 200rpx; /* Adjust based on bg image height */
	display: flex;
	flex-direction: column;
	justify-content: center;

	.title-area {
		.main-title {
			font-size: 60rpx;
			font-weight: bold;
			color: #0B2E16;
			display: block;
		}

		.sub-title {
			font-size: 36rpx;
			color: #72967D;
		}
	}
}

.list-container {
	position: relative;
	z-index: 1;
	background-color: #fff;
	border-radius: 40rpx 40rpx 0 0; /* Rounded top corners for list area */
	margin-top: 0rpx;
	padding: 30rpx 40rpx;
	min-height: 500rpx;
}
</style>