novelAD/pages/bookMall/index.vue

<template>
    <view class="container">
        <view class="navBarBox">
            <!-- 状态栏占位 -->
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                小说书城
            </view>
        </view>

        <view class="pdx-30 pdy-10 bg-white">
            <view class="flex ai_center jc_between">
                <view class="menu_item" v-for="(item, index) in menuList" :class="{ active_menu: index === 0 }">
                    {{ item }}
                    <view v-if="index === 0" class="active_bg"></view>
                    <view v-else class="active"></view>
                </view>
                <up-input class="flex1 mgl-30" placeholder="搜索书名或作者" suffixIcon="search" suffixIconStyle="color: #909399"></up-input>
            </view>
        </view>

        <scroll-view scroll-y class="scroll_box">

            <view class="pdy-30 pdx-30 bg-white">
                <view class="">
                    <view class="flex ai_center jc_between">
                        <view class="flex ai_center text-32">
                            <svg t="1752222012281" class="w-50 h-50 mgr-10" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="32757" width="128" height="128">
                                <path
                                    d="M928.6 208c-27 1.4-51.8 18.6-62.7 43.4-12.1 27.7-6.2 56 10 76.3l-7.7 32.3c-15.7 66-74.6 112.5-142.5 112.5-76.4 0-139.9-58.7-146-134.8l-7.3-91.4c35.2-23.4 56-66.8 45.9-114-8.7-40.5-41.5-73.2-82.1-81.7C466.5 35.9 405 88.9 405 156.2c0 37.6 19.3 70.8 48.5 90.1l-7.3 91.4c-6.1 76.1-69.6 134.8-146 134.8-67.8 0-126.8-46.6-142.5-112.5l-7.7-32.3c16.2-20.2 22.1-48.6 10-76.3-10.8-24.8-35.6-42.1-62.7-43.4-49.4-2.5-85.3 40.7-77.4 86.3 4.4 25.2 21.1 45.2 42.8 54.8l65.6 463.5h769v-0.2l65.6-463.3c21.8-9.6 38.5-29.6 42.8-54.8 8.2-45.6-27.7-88.8-77.1-86.3z"
                                    fill="#F9C85D" p-id="32758"></path>
                                <path d="M781.3 961.3h-541c-63 0-114-51-114-114h769c0 63-51.1 114-114 114z"
                                    fill="#83C6EF" p-id="32759"></path>
                                <path d="M93 281.4m-73.9 0a73.9 73.9 0 1 0 147.8 0 73.9 73.9 0 1 0-147.8 0Z"
                                    fill="#F9C85D" p-id="32760"></path>
                                <path
                                    d="M928.6 208c-27 1.4-51.8 18.6-62.7 43.4-12.1 27.7-6.2 56 10 76.3l-7.7 32.3c-15.7 66-74.6 112.5-142.5 112.5-76.4 0-139.9-58.7-146-134.8l-7.3-91.4c35.2-23.4 56-66.8 45.9-114-8.7-40.5-41.5-73.2-82.1-81.7-7.9-1.7-15.7-2.3-23.4-2.3v764.4h384.5v-0.2l65.6-463.3c21.8-9.6 38.5-29.6 42.8-54.8 8.2-45.7-27.7-88.9-77.1-86.4z"
                                    fill="#FFB103" p-id="32761"></path>
                                <path d="M933.3 281.4m-73.8 0a73.8 73.8 0 1 0 147.6 0 73.8 73.8 0 1 0-147.6 0Z"
                                    fill="#F9C85D" p-id="32762"></path>
                                <path d="M513 154.3m-109.2 0a109.2 109.2 0 1 0 218.4 0 109.2 109.2 0 1 0-218.4 0Z"
                                    fill="#F9C85D" p-id="32763"></path>
                                <path d="M510.8 847.3v114H784c61.5 0 111.3-49.8 111.3-111.3v-2.7H510.8z" fill="#429BCF"
                                    p-id="32764"></path>
                                <path
                                    d="M146.4 230.5c-8.7 45.1-45.9 84.2-99.2 108.5 12.6 10.1 28.4 16.3 45.8 16.3 40.8 0 73.9-33.1 73.9-73.9 0-19.7-7.9-37.6-20.5-50.9zM986.9 231.1c-10.1 44.5-47.9 82.7-101.3 106.3 12.9 11 29.4 17.9 47.7 17.9 40.8 0 73.8-33 73.8-73.8-0.1-19.6-7.8-37.2-20.2-50.4zM589.1 76c2.3 6.6 3.6 13.5 3.6 20.5 0 51.4-64.1 93.1-143.1 93.1-14.3 0-28.1-1.4-41.1-4 13.5 45 55.2 77.7 104.6 77.7 60.3 0 109.2-48.9 109.2-109.2-0.1-30.6-12.8-58.3-33.2-78.1z"
                                    fill="#FFB103" p-id="32765"></path>
                                <path
                                    d="M55.848334 249.331715a8.4 19.9 60 1 0 34.467811-19.9 8.4 19.9 60 1 0-34.467811 19.9Z"
                                    fill="#F7EAD0" p-id="32766"></path>
                                <path
                                    d="M945.164493 246.695113a19.9 8.4 30 1 0 8.4-14.549226 19.9 8.4 30 1 0-8.4 14.549226Z"
                                    fill="#F7EAD0" p-id="32767"></path>
                                <path d="M469.7 77.7a41.4 10.6 0 1 0 82.8 0 41.4 10.6 0 1 0-82.8 0Z" fill="#F7EAD0"
                                    p-id="32768"></path>
                                <path
                                    d="M546 630.8h-61.4c-13.9 0-25.3-11.4-25.3-25.3s11.4-25.3 25.3-25.3H546c13.9 0 25.3 11.4 25.3 25.3s-11.4 25.3-25.3 25.3z"
                                    fill="#DA3329" p-id="32769"></path>
                                <path d="M546 580.1h-33v50.7h33c13.9 0 25.3-11.4 25.3-25.3 0-14-11.4-25.4-25.3-25.4z"
                                    fill="#C11B16" p-id="32770"></path>
                            </svg>
                            排行榜
                        </view>
                        <view class="flex ai_center">
                            查看全部榜单
                            <svg t="1752219361738" class="w-30 h-30 mgl-10" fill="#000" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12887" width="128" height="128">
                                <path
                                    d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1"
                                    p-id="12888"></path>
                            </svg>
                        </view>
                    </view>
                    <view class="book_list mgt-30">
                        <view class="book_item" v-for="item in 5">
                            <image style="width: 86rpx;height: 113rpx;background-color: skyblue;border-radius: 12rpx;"
                                src="" mode="scaleToFill" />
                            <view class="mgl-10 flex flex1 fd_c jc_center">
                                <view class="ellipsis"><text>1</text>斗破苍穹斗破苍穹斗破苍穹斗破苍穹</view>
                                <view class="text-24 mgt-10 text-600" style="color: #fedb65">888.88万人阅读</view>
                            </view>

                        </view>
                    </view>
                </view>
            </view>

            <view class="pdy-30 pdx-30 bg-white mgt-30" v-for="item in 3">
                <view class="">
                    <view class="flex ai_center text-32">
                        全网精品
                    </view>
                    <view class="book_list_item mgt-30">
                        <view class="book_item" v-for="item in 5">
                            <image class="img" src="" mode="scaleToFill" />
                            <view class="book_name">
                                斗破苍穹斗破苍穹斗破苍穹
                            </view>
                            <view class="hint">已完结</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="h-100 flex ai_center jc_center">
                到底啦~~
            </view>

        </scroll-view>
        <!-- 引入自定义 TabBar -->
        <custom-tabbar :currentIndex='1' />
    </view>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import CustomTabbar from "@/components/custom-tabbar.vue";

// 状态栏高度
let statusBarHeight = ref(0);
// 导航栏高度
let navBarHeight = ref(0);
onBeforeMount(() => {
    statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
    const custom = uni.getMenuButtonBoundingClientRect();
    // 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
    //                                   即胶囊的上下边距
    navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2;
});


const menuList = ref([
    '名作',
    '佳作'
])

const value = ref('');


</script>

<style lang="scss" scoped>
page {
    background-color: #f9f9f9;
}

.container {
    display: flex;
    flex-direction: column;

    .navBarBox {
        .navBar {
            width: 100%;
            height: 80rpx !important;
            line-height: 80rpx;
            padding-left: 30rpx;
            font-size: 32rpx;
            color: #333;
            font-weight: 600;
            background-color: #fff;
        }
    }

    .menu_item {
        font-size: 28rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8rpx 16rpx;

        .active_menu {
            color: #fd4345;
        }

        .active {
            margin-top: 8rpx;
            width: 30rpx;
            height: 6rpx;
            background-color: #fff;
            border-radius: 8rpx;
        }

        .active_bg {
            margin-top: 8rpx;
            width: 30rpx;
            height: 6rpx;
            border-radius: 8rpx;
            background-color: #fd4345;
        }
    }

    .input {
        flex: 1;
        margin: 0 20rpx;
        background-color: #f6f6f6;
        font-size: 26rpx;
        height: 50rpx !important;
        border-radius: 50rpx;
        padding-left: 30rpx;
        color: #9a9a9a;

    }

    .scroll_box {
        overflow-y: auto;
        height: calc(100vh - 260rpx);
    }

    .book_list {
        width: 100%;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 44vw);
        grid-gap: 20rpx;

        .book_item {
            display: flex;
            width: 44vw;
        }
    }

    // 超出2行 
    .ellipsis {
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        /* 限制显示2行 */
        -webkit-box-orient: vertical;
    }

    .book_list_item {
        width: 100%;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 216rpx);
        grid-gap: 20rpx;

        .book_item {
            position: relative;
            width: 216rpx;
            display: flex;
            flex-direction: column;

            .img {
                width: 216rpx;
                height: 300rpx;
                background-color: rgb(104, 122, 129);
                border-radius: 12rpx;
            }

            .book_name {
                font-style: 28rpx;
                color: #303030;
                margin-top: 10rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-clamp: 1;
                -webkit-line-clamp: 1;
                /* 限制显示1行 */
                -webkit-box-orient: vertical;
            }

            .hint {
                position: absolute;
                top: 0;
                left: 0;
                padding: 8rpx 16rpx;
                background-color: #7d8bfb;
                color: #fff;
                font-size: 24rpx;
                border-radius: 12rpx 0 12rpx 0;
            }
        }
    }
}
</style>