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

<template>
	<view style="display: flex;flex-direction: column;height: calc(100vh - 100rpx);"
		:style="{paddingTop:safetyTop+'px'}">
		<view class="box_school">
			<view class="box_warehouse" :class="curveFlag ? '' : 'activate_ware'" @click="getCurve(1)">书库</view>
			<view class="box_warehouse" :class="curveFlag ? 'activate_ware' : ''" @click="getCurve(2)">我的</view>
		</view>
		<view class="head_school_box">
			<view class="bank_box border_bank">
				<view class="item_bank center_in" :class="item == tabCurrent?'activate_box':''"
					v-for="(item,index) in tabList" :key="index">
					{{item}}
				</view>
			</view>
			<view class="bank_box">
				<view class="item_bank center_in" :class="item == tabCurrent1?'activate_box':''"
					v-for="(item,index) in tabList1" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 滚动容器 -->
		<scroll-view class="scroll-view" scroll-y>
			<view class="head_school">
				<image class="img_bsq" mode="scaleToFill" src="/static/mh-BsqlF_P3.png"></image>
				<view class="card_book">
					<view class="box_book" v-for="(item,index) in bookList" :key="index">
						<view class="book_img">
							<image class="img_book" mode="scaleToFill" src="/static/bk.png"></image>
						</view>
						<view class="book_title center_in">{{item}}</view>
					</view>
				</view>
				<view class="card_numerology">
					<view class="book_numerology" v-for="(item,index) in bookList" :key="index" @click="goBook">
						<view class="box_numerology">
							<image class="img_numerology" mode="scaleToFill" src="/static/bk.png"></image>
							<view class="numerology_title center_in">{{item}}</view>
						</view>
					</view>
					<view style="width: 33%;height: 1rpx;"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safetyTop: 0,
				curveFlag: false,
				tabList: ['山', '医', '命', '相', '卜'],
				tabList1: ['八字', '紫薇斗数', '七政四余'],
				tabCurrent: '命',
				tabCurrent1: '八字',
				bookList: ['基础知识', '专业知识', '神煞大全', '懒人表']
			}
		},
		onLoad() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			if (safeAreaInsets) {
				this.safetyTop = safeAreaInsets.top
			}
		},
		methods: {
			getCurve(type) {
				if (type == 1) {
					this.curveFlag = false
				} else {
					this.curveFlag = true
				}
			},
			// 书详情
			goBook() {
				uni.navigateTo({
					url: '/pages/school/bookParticulars'
				})
			},
		}
	}
</script>

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

	.box_school {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 24rpx 30rpx 24rpx 30rpx;
	}

	.box_warehouse {
		width: 150rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(192, 192, 192, 1);
	}

	.activate_ware {
		position: relative;
		color: #000;
	}

	.activate_ware::after {
		content: '';
		position: absolute;
		left: calc(50% - 25rpx);
		bottom: -10rpx;
		width: 50rpx;
		height: 6rpx;
		background-color: $color-subject;
	}

	.scroll-view {
		flex: 1;
		overflow: hidden;
	}

	.head_school {
		height: 100%;
		background-color: #fff;
	}

	.head_school_box {
		border-top: 20rpx solid #F8F8F8;
		background-color: #fff;
		padding: 0rpx 20rpx;
	}

	.bank_box {
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
	}

	.border_bank {
		border-bottom: 1rpx solid #e4e7ed;
	}

	.item_bank {
		flex: 1;
		color: #646566;
		font-size: 34rpx;
	}

	.activate_box {
		color: #b2955d;
	}

	.img_bsq {
		vertical-align: middle;
		margin: 10rpx 20rpx 0rpx 20rpx;
		width: calc(100% - 40rpx);
		height: 380rpx;
	}

	.card_book {
		display: flex;
		align-items: center;
		background-color: #f3f4f6;
		padding-top: 10rpx;
		margin: 0rpx 20rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

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

	.book_img {
		width: calc(100% - 40rpx);
		height: 200rpx;
		padding: 0rpx 20rpx 6rpx 20rpx;
		border-bottom: 1rpx solid #e4e7ed;
	}

	.img_book {
		width: 100%;
		height: 200rpx;
		border-radius: 6rpx;
	}

	.book_title {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		font-size: 30rpx;
	}

	.box_book:nth-child(-n + 3) .book_title {
		border-right: 1rpx solid #e4e7ed;
	}

	.card_numerology {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.book_numerology {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33%;
		margin-bottom: 10rpx;
	}

	.box_numerology {
		width: 180rpx;
	}

	.img_numerology {
		width: 100%;
		height: 230rpx;
		border-radius: 10rpx;
	}

	.numerology_title {
		font-size: 30rpx;
		padding: 10rpx 0rpx;
	}
</style>