baozhida-figure-platter/pages/school/bookParticulars.vue

<template>
	<view>
		<view class="box_particular">
			<image class="img_book" mode="scaleToFill" src="/static/mh-BsqlF_P3.png"></image>
			<view style="display: flex;flex-direction: column;margin-left: 20rpx;overflow: hidden;width: 100%;">
				<view class="book_title">
					《奇门遁甲入门基础》
				</view>
				<view class="author_title">[未知]紫武真人</view>
			</view>
		</view>
		<view class="card_brief">
			<view class="box_brief">
				<view class="title_brief">阅读进度</view>
				<view class="quantity_num"><span class="num_title">78%</span>进度</view>
			</view>
			<view class="box_brief">
				<view class="title_brief">阅读人数</view>
				<view class="quantity_num"><span class="num_title">1000+</span>人</view>
			</view>
			<view class="box_brief">
				<view class="title_brief">本书字书</view>
				<view class="quantity_num"><span class="num_title">2.29</span>万字</view>
			</view>
		</view>
		<view class="card_synopsis">
			<view class="synopsis_title">书籍简介</view>
			<view class="synopsis">{{bookIntroduction}}</view>
		</view>
		<view style="width: 100%;height: 180rpx;" class="subside"></view>
		<view class="bottom_menu">
			<!-- <view class="menu_btn center_in">加入书架</view> -->
			<view class="menu_btnil center_in">已加入书架</view>
			<view class="menu_btn center_in">目录</view>
			<view class="menu_btn_orange center_in" @click="goRead">阅读</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookIntroduction: '初学命理，晦涩难懂的古籍令诸多习命者不得其门，深感命学之深奥。本系列基础知识，通过简单通俗地论述，将命理古籍的基础通俗表述，其内容涵盖了五行阴阳、生克制化、十神含义等重点，更有利于习命者对命理的全面掌握。'
			}
		},
		methods: {
			goRead() {
				uni.navigateTo({
					url: '/pages/school/reader'
				})
			}
		}
	}
</script>

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

	.box_particular {
		display: flex;
		padding: 0rpx 20rpx;
		border-bottom: 1rpx solid #e4e7ed;
	}

	.img_book {
		flex: none;
		width: 260rpx;
		height: 320rpx;
		border-radius: 20rpx;
		margin-bottom: 60rpx;
	}

	.book_title {
		width: 100%;
		font-size: 46rpx;
		font-weight: bold;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.author_title {
		margin-top: 30rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.card_brief {
		display: flex;
		align-items: center;
		padding: 30rpx 0rpx;
		border-bottom: 20rpx solid #F8F8F8;
	}

	.box_brief {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box_brief:nth-child(-n + 2) {
		border-right: 1rpx solid #e4e7ed;
	}

	.title_brief {
		font-size: 28rpx;
		color: #999999;
	}


	.quantity_num {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #555555;

		.num_title {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.card_synopsis {
		padding: 30rpx;
	}

	.synopsis_title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.synopsis {
		font-size: 32rpx;
		line-height: 48rpx;
	}

	.bottom_menu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1rpx solid #e4e7ed;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		// #ifdef APP-PLUS || MP-WEIXIN
		padding-bottom: 0 !important;
		padding-bottom: constant(safe-area-inset-bottom) !important;
		padding-bottom: env(safe-area-inset-bottom) !important;
		// #endif
	}

	.subside {
		padding-bottom: 0 !important;
		padding-bottom: constant(safe-area-inset-bottom) !important;
		padding-bottom: env(safe-area-inset-bottom) !important;
	}

	.menu_btn {
		font-size: 30rpx;
		flex: 1;
		padding: 26rpx;
		border-radius: 20rpx;
		background-color: #eeeeee;
		margin: 0rpx 10rpx;
		border: 1rpx solid #eeeeee;
	}

	.menu_btnil {
		font-size: 30rpx;
		flex: 1;
		padding: 26rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		margin: 0rpx 10rpx;
		color: #b2955d;
		border: 1rpx solid #b2955d;
	}

	.menu_btn_orange {
		font-size: 30rpx;
		flex: 1;
		padding: 26rpx;
		border-radius: 20rpx;
		background-color: #cea872;
		margin: 0rpx 10rpx;
		color: #fff;
		border: 1rpx solid #cea872;
	}
</style>