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

<template>
    <view class="recommend-page">
        <!-- Header Background Image -->
        <!-- User specified 363rpx x 251rpx. Assuming top-right positioning or similar based on typical designs -->
        <image class="header-bg" src="/pages-sell/static/recommend/top-bg.png" mode="aspectFit"></image>

        <!-- Custom Navbar -->
        <Navbar title="推荐图书专题"></Navbar>

        <!-- Header Content -->
        <view class="header-content">
            <image class="header-image" :src="imageUrl" mode="aspectFill"></image>
            <view class="header-desc">
                <view class="title-row">
                    <text class="title-text">山河岁月</text>
                    <image class="share-icon" src="/pages-sell/static/recommend/icon-share.png" mode="aspectFit"></image>
                </view>
                <text class="desc-text">《命若等弦》是一部微文集，作者是史铁生.作者史铁生曾发去文学作品《我的还远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体。</text>
            </view>
        </view>

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

<script>
import RecommendItem from '../components/recommend-item/index.vue'
import Navbar from '@/components/navbar/navbar.vue';

export default {
    components: {
        RecommendItem,
        Navbar
    },
    data() {
        return {
            imageUrl: "https://img.yzcdn.cn/vant/cat.jpeg",
            bookList: [
                {
                    title: '山河岁月',
                    author: '本书编写组',
                    price: '6.80',
                    originalPrice: '36.80',
                    cover: 'https://img.yzcdn.cn/vant/cat.jpeg', // Placeholder or use local if available
                    desc: '《命若琴弦》是一部微文集，作者是史铁生。作者史铁生曾发表文学作品《我的遥远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，去达出的却是存在的明朗和欢乐。他喜智的言辞，照亮的反而是我们日益围暗的内心。'
                },
                {
                    title: '山河岁月',
                    author: '本书编写组',
                    price: '6.80',
                    originalPrice: '36.80',
                    cover: 'https://img.yzcdn.cn/vant/cat.jpeg',
                    desc: '《命若琴弦》是一部微文集，作者是史铁生。作者史铁生曾发表文学作品《我的遥远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，去达出的却是存在的明朗和欢乐。他喜智的言辞，照亮的反而是我们日益围暗的内心。'
                },
                {
                    title: '山河岁月',
                    author: '本书编写组',
                    price: '6.80',
                    originalPrice: '36.80',
                    cover: 'https://img.yzcdn.cn/vant/cat.jpeg',
                    desc: '《命若琴弦》是一部微文集，作者是史铁生。作者史铁生曾发表文学作品《我的遥远的清平湾》、《奶奶的星星》、《我与地坛》等。在这部书坐，他用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，去达出的却是存在的明朗和欢乐。他喜智的言辞，照亮的反而是我们日益围暗的内心。'
                }
            ]
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        }
    }
}
</script>

<style lang="scss" scoped>
.recommend-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #EBF9F1 0%, #FFFFFF 400rpx);
    /* Light green gradient to match theme */
    position: relative;
}

.header-bg {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 624rpx;
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 1;
    padding: 30rpx 40rpx;
    display: flex;
    align-items: flex-start;
    font-family: Source Han Sans SC;

    .header-image {
        width: 226rpx;
        height: 300rpx;
        border-radius: 4rpx;
        box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.1);
        flex-shrink: 0;
    }

    .header-desc {
        flex: 1;
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;

        .title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20rpx;

            .title-text {
                font-size: 40rpx;
                font-weight: bold;
                color: #333;
                line-height: 1.2;
            }

            .share-icon {
                width: 34rpx;
                height: 34rpx;
                flex-shrink: 0;
                margin-left: 20rpx;
                margin-top: 10rpx;
            }
        }

        .desc-text {
            font-size: 26rpx;
            color: #666;
            line-height: 1.6;
            text-align: justify;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6;
            overflow: hidden;
        }
    }
}

.list-container {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
    padding: 10rpx 40rpx;
    min-height: calc(100vh - 200rpx);
}
</style>