front-end/ghsApp/src/admin/book/jdIndex.vue

<template>
	<view class="app-content">
		<view class="book-banner">
			<image v-if="showBanner" class="slide" :src="`${constant.imgUrl}/book/banner5.png`" mode="aspectFit"></image>
		</view>
		<view class="book-content">
			<view v-for="(item, index) in book" :key="index" class="book-section">
				<view class="category">
					<image class="icon" :src="`${constant.imgUrl}${item.icon}`"></image>
					<text class="category-text">{{item.class}}</text>
				</view>
				<view class="book-list">
					<view v-for="(it, idx) in item.list" 
						:key="idx" 
						class="book-item"
						:class="it.read ? 'read' : 'unread'"
						@click="goDetail(it)">
						<text :class="[it.style == 'red' ? 'red-title' : 'book-title']">{{it.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getJdBookList} from "@/api/book";
export default {
	name: "jdIndex",
	components: {},
	mixins: [],
	data() {
		return {
			book: [],
			showBanner: true
		};
	},
	onShareAppMessage(res) {
		return {
			title: '销花宝教学视频（基地）',
			desc: "图文视频教学，带您快速上手",
			imageUrl: `${this.$constant.imgUrl}/logo6.png`,
			path: "admin/book/jdIndex",
		}
	},
	onLoad() {
		let that = this
		getJdBookList().then(res => {
			that.book = res.data.list
		})
	},
	methods: {
		init(){

		},
		goDetail(item){
			// 设置为已读状态
			item.read = true;
			// #ifdef MP-WEIXIN
			this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
			// #endif
			// #ifdef APP-PLUS
			this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
.app-content {
	min-height: 100vh;
	background-color: #f5f6fa;
	
	.book-banner {
		width: 750upx;
		height: 524upx;
		box-shadow: 0 4upx 12upx rgba(0,0,0,0.1);
		
		.slide {
			width: 750upx;
			height: 524upx;
			transition: opacity 0.3s ease;
		}
	}
	
	.book-content {
		padding: 20upx 16upx;
		
		.book-section {
			background: white;
			border-radius: 16upx;
			padding: 24upx 16upx;
			margin-bottom: 24upx;
			box-shadow: 0 2upx 8upx rgba(0,0,0,0.05);
			
			.category {
				display: flex;
				align-items: center;
				padding-bottom: 20upx;
				border-bottom: 2upx solid #f0f0f0;
				margin-bottom: 16upx;
				
				.icon {
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
				
				.category-text {
					font-size: 36upx;
					font-weight: 600;
					color: #333;
				}
			}
			
			.book-list {
				.book-item {
					position: relative;
					padding: 24upx 20upx;
					margin: 12upx 0;
					border-radius: 8upx;
					background: #f8f9fb;
					display: flex;
					align-items: center;
					.book-title {
						font-size: 32upx;
						color: #2c3e50;
						line-height: 1.4;
					}
					.red-title{
						font-size: 32upx;
						line-height: 1.4;
						font-weight: bold;
						color: #f00;
					}
					&::before {
						content: '';
						display: inline-block;
						width: 28upx;
						height: 28upx;
						background: #008000;
						border-radius: 50%;
						margin-right: 16upx;
						flex-shrink: 0;
					}
					
					// 未读样式
					&.unread {
						.book-title {
							font-weight: 500;
							color: #303133;
						}
					
						&::before {
							background: #2979ff;
						}
					}
					
					// 已读样式
					&.read {
						.book-title,
						.red-title {
							color: #909399;
							font-weight: normal;
						}
					
						&::before {
							background: #c0c4cc;
						}
					}
				}
			}
		}
	}
}
</style>