novelAD/pages/index/index.vue

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

		<view class="pdy-30 pdx-30 flex fd_c">
			<view class="flex ai_center">
				<view class="text-32 text-400">最近阅读</view>
				<view class="flex ai_center mgl-20">
					<svg t="1752220550288" class="w-36 h-36" fill="#999" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="30594" width="128" height="128">
						<path
							d="M487.664941 430.878118c-51.154824 0-92.777412 41.622588-92.777412 92.777411s41.622588 92.777412 92.777412 92.777412c51.139765 0 92.762353-41.622588 92.762353-92.777412s-41.607529-92.777412-92.762353-92.777411z m0 155.437176c-34.56 0-62.659765-28.114824-62.659765-62.659765s28.099765-62.659765 62.659765-62.659764c34.544941 0 62.644706 28.114824 62.644706 62.659764s-28.099765 62.659765-62.644706 62.659765z"
							p-id="30595"></path>
						<path
							d="M983.838118 591.088941v-109.839059c0-22.693647-35.553882-31.337412-48.082824-32.602353l-49.799529-4.713411c-9.833412-44.137412-29.003294-87.988706-57.118118-130.665412l27.271529-34.876235c13.281882-16.218353 14.576941-38.008471 2.906353-49.679059l-69.49647-69.12c-11.655529-11.655529-33.084235-10.044235-49.814588 3.629176l-36.562824 29.861647c-39.664941-24.681412-82.898824-41.502118-128.768-50.944l-5.240471-42.134588c-1.204706-12.077176-9.803294-44.8-32.617411-44.8h-97.882353c-22.799059 0-31.382588 32.722824-32.587294 44.845177l-5.436236 39.484235c-41.682824 10.209882-83.109647 28.777412-123.392 55.311059l-41.758117-32.993883c-16.323765-13.327059-38.159059-14.682353-49.754353-3.087059L116.555294 228.246588c-11.640471 11.655529-9.953882 33.114353 3.749647 49.844706l35.674353 43.776A389.391059 389.391059 0 0 0 107.504941 442.729412l-68.773647 5.918117C18.296471 450.695529 5.029647 464.414118 5.029647 481.264941v97.882353c0 16.820706 13.266824 30.539294 33.626353 32.587294l70.294588 6.02353a389.752471 389.752471 0 0 0 48.956236 118.889411l-37.376 45.718589c-13.718588 16.745412-15.329882 38.098824-3.749648 49.664l69.150118 69.225411c11.595294 11.610353 32.918588 10.074353 49.588706-3.538823l45.176471-36.698353a392.809412 392.809412 0 0 0 119.521882 50.748235l5.842823 55.43153c2.093176 20.946824 16.112941 36.743529 32.587295 36.743529h97.882353c16.474353 0 30.494118-15.796706 32.572235-36.668235l5.451294-51.922824c4.080941 0 8.402824 0.240941 12.830118 0.481883 11.896471 0.647529 24.199529 1.129412 36.231529-2.243765a243.380706 243.380706 0 0 0 153.871059 54.362353c135.107765 0 245.022118-109.914353 245.022117-245.022118 0-47.104-13.447529-92.446118-38.671058-131.84z m-394.827294 295.002353c-9.984-0.542118-20.269176-1.114353-30.584471 0.737882a14.878118 14.878118 0 0 0-12.182588 13.101177l-6.731294 64.301176c-0.632471 6.264471-3.403294 9.682824-2.981647 9.938824l-96.527059 0.271059c-0.948706-0.542118-3.719529-3.945412-4.367059-10.285177l-6.957177-66.123294a14.848 14.848 0 0 0-11.715764-12.995765 363.52 363.52 0 0 1-128.873412-54.768941 14.908235 14.908235 0 0 0-17.724235 0.768l-53.669647 43.595294c-4.562824 3.734588-8.613647 4.577882-10.661647 4.638118l-67.222589-67.312941c0.015059-1.792 1.008941-6.189176 4.74353-10.767059l44.227764-54.106353a14.878118 14.878118 0 0 0 0.873412-17.648941c-25.554824-38.415059-43.354353-81.588706-52.901647-128.331294a14.863059 14.863059 0 0 0-12.995765-11.821177l-82.612705-7.168c-6.189176-0.617412-8.417882-2.966588-8.493177-2.981647l-0.105412-97.234823c0.286118-0.587294 2.680471-3.072 8.704-3.674353l80.459294-7.092706a14.908235 14.908235 0 0 0 13.025883-12.001882 360.568471 360.568471 0 0 1 52.60047-130.198589 14.863059 14.863059 0 0 0-0.903529-17.513411l-42.285177-52.10353c-3.809882-4.653176-4.713412-9.155765-4.698352-10.962823l67.463529-67.734589c1.746824-0.195765 6.128941 0.647529 10.857412 4.502589l50.507294 39.951058a14.863059 14.863059 0 0 0 17.679059 0.677648c43.324235-29.952 87.883294-49.664 132.457411-59.045648 6.369882-1.340235 11.113412-6.174118 11.745883-12.634352l6.475294-50.898824c0.737882-7.363765 4.080941-17.829647 6.550588-17.829647h90.714353c2.364235 0 5.812706 10.029176 6.595765 17.679059l6.249412 52.103529a14.908235 14.908235 0 0 0 12.242823 13.312 363.248941 363.248941 0 0 1 137.953882 54.964706 14.863059 14.863059 0 0 0 17.573647-0.858353l44.965648-36.442353c4.653176-3.794824 9.728-4.577882 10.902588-4.638117l67.809882 67.132235c0.331294 1.099294-0.015059 5.948235-4.336941 11.203765L798.72 303.435294a14.908235 14.908235 0 0 0-0.527059 17.633882c31.533176 45.613176 51.937882 92.491294 60.717177 139.369412 1.234824 6.520471 6.580706 11.444706 13.17647 12.077177l60.596706 5.75247c7.890824 0.798118 21.022118 4.261647 21.022118 6.836706v79.314824a193.219765 193.219765 0 0 0-27.934118-26.985412 238.095059 238.095059 0 0 0-148.299294-51.983059c-1.776941 0-3.493647 0.225882-5.255529 0.271059a286.494118 286.494118 0 0 0-284.566589-249.344c-158.433882 0-287.307294 128.888471-287.307294 287.307294s128.888471 287.307294 287.307294 287.307294c22.407529 0 44.619294-2.725647 66.243765-7.830588a236.694588 236.694588 0 0 0 36.577882 66.198588c4.698353 5.963294 9.758118 11.640471 14.968471 17.121883-5.104941 0.165647-10.676706-0.075294-16.429176-0.39153z m168.116705-399.631059c-121.434353 10.375529-217.118118 112.368941-217.118117 236.453647 0 22.633412 3.282824 44.664471 9.366588 65.822118-20.148706 4.668235-40.824471 7.168-61.696 7.168-150.121412 0-272.248471-122.127059-272.248471-272.248471s122.127059-272.248471 272.248471-272.24847a271.435294 271.435294 0 0 1 269.447529 235.053176z m20.35953 451.358118c-56.500706 0-97.174588-16.248471-138.330353-50.432-3.930353-3.267765-10.812235-5.240471-16.941177-5.12-0.090353-0.090353-0.120471-0.225882-0.210823-0.316235a223.367529 223.367529 0 0 1-54.964706-86.633412 7.499294 7.499294 0 0 0-0.120471-3.162353 7.303529 7.303529 0 0 0-1.746823-3.041882 222.539294 222.539294 0 0 1-10.11953-66.198589c0-122.639059 99.779765-222.418824 222.433883-222.418823 51.079529 0 99.102118 16.835765 138.887529 48.670117 16.685176 13.372235 28.431059 26.051765 35.870118 38.79153 0.090353 0.165647 0.286118 0.225882 0.391529 0.37647a14.757647 14.757647 0 0 0 1.867294 12.67953 213.699765 213.699765 0 0 1 37.903059 121.886118c-0.015059 118.512941-96.421647 214.919529-214.919529 214.919529z"
							p-id="30596"></path>
						<path
							d="M776.252235 541.093647c-95.472941 0-173.146353 77.673412-173.146353 173.146353s77.673412 173.146353 173.146353 173.146353S949.383529 809.712941 949.383529 714.24s-77.658353-173.146353-173.131294-173.146353z m0 331.233882c-87.175529 0-158.087529-70.912-158.087529-158.087529s70.912-158.087529 158.087529-158.087529c87.160471 0 158.072471 70.912 158.072471 158.087529s-70.912 158.087529-158.072471 158.087529z"
							p-id="30597"></path>
						<path
							d="M776.252235 632.892235c-44.860235 0-81.347765 36.487529-81.347764 81.347765s36.502588 81.347765 81.347764 81.347765 81.332706-36.487529 81.332706-81.347765-36.472471-81.347765-81.332706-81.347765z m0 132.577883c-28.250353 0-51.230118-22.979765-51.230117-51.230118s22.979765-51.230118 51.230117-51.230118 51.215059 22.979765 51.215059 51.230118-22.964706 51.230118-51.215059 51.230118z"
							p-id="30598"></path>
					</svg>
					<view class="text-gray">管理</view>
					<checkbox-group class="mgl-30">
						<label>
							<checkbox value="cb" iconColor="#000" :checked="true" />全选
						</label>
					</checkbox-group>
				</view>
			</view>
			<scroll-view scroll-y class="scroll">
				<view class="book_list">
					<view v-for="item in 15" class="book_item" @click="toBookdetail">
						<checkbox-group class="check">
							<label>
								<checkbox value="cb" backgroundColor="transparent" activeBackgroundColor="transparent"
									borderColor="#dfe2e5" iconColor="#FFF" :checked="true" />
							</label>
						</checkbox-group>
						<view class="book_top">
							<image class="book_img" src="" mode="scaleToFill" />
							<view class="book_history">读到1000章</view>

						</view>
						<view class="book_name ellipsis">斗破苍穹斗破苍穹斗破苍穹斗破苍穹斗破苍穹</view>
						<view class="book_author ellipsis">天蚕土豆</view>
					</view>
				</view>
				<view class="scroll_bottom">已经是全部了~~</view>
			</scroll-view>
		</view>

		<!-- 引入自定义 TabBar -->
		<custom-tabbar :currentIndex='0' />
	</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'];
	// #ifndef H5
		const custom = uni.getMenuButtonBoundingClientRect();
		// 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
		// 即胶囊的上下边距
		navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2;
	// #endif
});

const toBookdetail = () => {
	uni.navigateTo({ url: '/pages/redBook/index' })
}



</script>

<style lang="scss" scoped>
.container {
	overflow: hidden;
	height: calc(100vh - 100rpx);

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

	.scroll {
		margin-top: 30rpx;
		width: 100%;
		overflow-y: auto;
		height: calc(100vh - 300rpx);


		.book_list {
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 172rpx);
			grid-gap: 10px;
			// padding-bottom: 100rpx;

			.book_item {
				position: relative;
				width: 172rpx;
				padding: 10rpx 0 20rpx 0;

				.check {
					position: absolute;
					right: 0;
					top: 15rpx;
					z-index: 99;
				}

				.book_top {
					width: 172rpx; //86
					height: 226rpx; //113
					border-radius: 10rpx;
					position: relative;

					.book_img {
						width: 100%;
						height: 100%;
						background-color: rgb(120, 140, 148);
						border-radius: 10rpx;
					}

					.book_history {
						position: absolute;
						right: 0;
						bottom: 0;
						font-size: 16rpx;
						color: #fff;
						padding: 8rpx 16rpx;
						background-color: rgba(0, 0, 0, 0.3);
						border-radius: 10rpx;

					}
				}



				.book_name {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #333;
				}

				.book_author {
					margin-top: 6rpx;
					font-size: 22rpx;
					color: #c4c4c4;

				}

				// 超出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;
				}
			}
		}

		.scroll_bottom {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #aaa5a5;
		}
	}
}
</style>