教程优化

ghsApp/src/admin/book/detail.vue

@@ -1,35 +1,68 @@
 <template>
 	<view class="app-content">
+		<view class="content-wrapper">
+			<template v-for="(item, index) in bookList">
+				<!-- 主标题 -->
+				<block v-if="item.style == 'title'">
+					<view :key="index" class="page-title">{{item.value}}</view>
+				</block>
 
-		<view class="list" v-for="(item, index) in bookList" :key="index">
+				<!-- 信息文本 -->
+				<block v-if="item.style == 'info'">
+					<view :key="index" class="text-content">{{item.value}}</view>
+				</block>
 
-			<view v-if="item.style == 'title'">
-				<view class="title">{{item.value}}</view>
-			</view>
+				<block v-if="item.style == 'blankLine'">
+					<view :key="index" class="blank-line-content">{{item.value}}</view>
+				</block>
 
-			<view v-if="item.style == 'info'">
-				<view class="info">{{item.value}}</view>
-			</view>
+				<!-- 小标题 -->
+				<block v-if="item.style == 'smallTitle'">
+					<view :key="index" class="section-title">{{item.value}}</view>
+				</block>
 
-			<view v-if="item.style == 'smallTitle'">
-				<view class="smallTitle">{{item.value}}</view>
-			</view>
+				<!-- 小标题 -->
+				<block v-if="item.style == 'miniTitle'">
+					<view :key="index" class="mini-title">{{item.value}}</view>
+				</block>
 
-			<view v-if="item.style == 'video'">
-				<video :id="`myVideo${index}`" show-mute-btn="true" :src="item.value" object-fit="contain" style="width:700upx;height:1100upx;"></video>
-			</view>
+				<!-- 视频 -->
+				<block v-if="item.style == 'video'">
+					<view :key="index" class="video-block">
+						<video 
+							:id="`myVideo${index}`" 
+							:src="item.value" 
+							show-mute-btn="true"
+							object-fit="contain"
+							class="video-content">
+						</video>
+					</view>
+				</block>
 
-			<view v-if="item.style == 'image'">
-				<image class="image" :src="`${constant.imgUrl}${item.value}`" mode="widthFix"></image>
-			</view>
+				<!-- 图片 -->
+				<block v-if="item.style == 'image'">
+					<view :key="index" class="image-block">
+						<image 
+							:src="`${constant.imgUrl}${item.value}`" 
+							mode="widthFix"
+							@click="previewImage(`${constant.imgUrl}${item.value}`)"
+							class="image-content">
+						</image>
+					</view>
+				</block>
 
-			<view v-if="item.style == 'button'">
-				<view class="book-button"><button @click="goTo(item)" class="admin-button-com mini blue">{{item.value}}</button></view>
-			</view>
+				<!-- 按钮 -->
+				<block v-if="item.style == 'button'">
+					<view :key="index" class="button-block">
+						<button @click="goTo(item)" class="link-button">{{item.value}}</button>
+					</view>
+				</block>
+			</template>
 
-		</view>
-		<view style="text-align:center;margin-top:30upx;">
-			<button class="admin-button-com big blue go-back" @click="goBack()">返回列表</button>
+			<!-- 底部返回按钮 -->
+			<view class="back-block">
+				<button class="admin-button-com big blue" @click="goBack()">返回列表</button>
+			</view>
 		</view>
 	</view>
 </template>
@@ -86,43 +119,131 @@ export default {
 		playVide(index){
 			this.videoContext = uni.createVideoContext('myVideo'+index,this)
 			this.videoContext.play()
+		},
+		previewImage(url) {
+			uni.previewImage({
+				urls: [url],
+				current: url
+			});
 		}
 	},
 };
 </script>
 <style lang="scss" scoped>
-.app-content{
-	padding:20upx 20upx 60upx 20upx;
-    .title{
-		font-weight: bold;
-		font-size:44upx;
-		margin-bottom:22upx;
-	}
-	.smallTitle{
-		font-weight: bold;
-		font-size:36upx;
-		font-weight: bold;
-		margin:25upx 0 25upx 0;
-	}
-	.info{
-    	font-size:33upx;
-		margin-bottom:20upx;
-	}
-	.image{
-		width:100%;
-		margin-bottom:20upx;
-	}
-	.video{
-		margin:0 auto;
-        text-align: center;
-		margin-bottom:10upx;
-	}
-	.book-button{
-		margin-bottom:15upx;
-	}
-	.go-back{
-		margin:0 auto;
-		width:260upx;
+.app-content {
+	min-height: 100vh;
+	background: #fff;
+	padding-bottom: 140upx;
+
+	.content-wrapper {
+		padding: 0 30upx;
+		
+		// 主标题
+		.page-title {
+			font-size: 44upx;
+			font-weight: bold;
+			color: #333;
+			padding: 40upx 0 20upx;
+			position: relative;
+			
+			&::after {
+				content: '';
+				display: block;
+				width: 60upx;
+				height: 6upx;
+				background: #3498db;
+				margin-top: 16upx;
+			}
+		}
+
+		// 文本内容
+		.text-content {
+			font-size: 32upx;
+			color: #666;
+			line-height: 1.8;
+			margin: 20upx 0 30upx;
+			text-align: justify;
+		}
+		.blank-line-content{
+			height: 20upx;
+			background: white;
+		}
+		// 小标题
+		.section-title {
+			font-size: 36upx;
+			font-weight: bold;
+			color: #333;
+			margin: 40upx 0 20upx;
+		}
+
+		.mini-title {
+			font-size: 32upx;
+			font-weight: bold;
+			color: #333;
+			margin: 20upx 0 30upx;
+		}
+
+		// 视频区块
+		.video-block {
+			margin: 20upx 0;
+			background: #000;
+			
+			.video-content {
+				width: 700upx;
+				height: 1100upx;
+				margin: 0 auto;
+				display: block;
+			}
+		}
+
+		// 图片区块
+		.image-block {
+			margin: 20upx 0;
+			
+			.image-content {
+				width: 100%;
+				display: block;
+				transition: opacity 0.3s;
+
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+
+		// 按钮区块
+		.button-block {
+			margin: 30upx 0;
+			text-align: center;
+
+			.link-button {
+				display: inline-block;
+				background: #3498db;
+				color: #fff;
+				font-size: 32upx;
+				padding: 20upx 40upx;
+				border-radius: 4upx;
+				border: none;
+				transition: background-color 0.3s;
+
+				&:active {
+					background: #2980b9;
+				}
+			}
+		}
+
+		// 返回按钮区块
+		.back-block {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			padding: 30upx;
+			background: rgba(255,255,255,0.98);
+			text-align: center;
+			border-top: 1upx solid #eee;
+			z-index: 99;
+		}
 	}
 }
 </style>

ghsApp/src/admin/book/index.vue

@@ -1,32 +1,40 @@
 <template>
 	<view class="app-content">
-        <view class="book_banner">
-            <image v-if="showBanner" class="slide" :src="`${constant.imgUrl}/book/banner1.png?v=1`" mode="aspectFit"></image>           
-        </view>
-        <view class="book_content">
-            <view v-for="(item, index) in book" :key="index" class="item">
-                <view class="category"><image class="icon" :src="`${constant.imgUrl}${item.icon}`"></image><text>{{item.class}}</text></view>
-                <view v-for="(it, idx) in item.list" :key="idx" class="book-item">
-                    <view @click="goDetail(it)">{{it.title}}</view>
-                </view>
-            </view>
-        </view>
+		<view class="book-banner">
+			<image v-if="showBanner" class="slide" :src="`${constant.imgUrl}/book/banner1.png?v=1`" 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"
+						@click="goDetail(it)">
+						<text :class="[it.style == 'red' ? 'red-title' : 'book-title']">{{it.title}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
+
 <script>
 import { getBookList} from "@/api/book";
 export default {
 	name: "index",
-	components: {
-	},
+	components: {},
 	mixins: [],
 	data() {
 		return {
-            book:[],
-            showBanner:true
+			book: [],
+			showBanner: true
 		};
 	},
-  	onShareAppMessage(res) {
+	onShareAppMessage(res) {
 		return {
 			title: '销花宝教学视频（城市）',
 			desc: "图文视频教学，带您快速上手",
@@ -34,66 +42,106 @@ export default {
 			path: "admin/book/index",
 		}
 	},
-    onLoad(){
-        let that = this
-        getBookList().then(res => {
-            that.book = res.data.list
-        })
-    },
+	onLoad() {
+		let that = this
+		getBookList().then(res => {
+			that.book = res.data.list
+		})
+	},
 	methods: {
-        init(){
+		init(){
 
-        },
-        goDetail(item){
-            // #ifdef MP-WEIXIN
-            this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
+		},
+		goDetail(item){
+			// #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
-        }
+			this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
+			// #endif
+		}
 	}
 };
 </script>
+
 <style lang="scss" scoped>
-.app-content{
-    .book_banner{
-        width:750upx;
-        height:524upx;
-        .slide{
-            width:750upx;
-            height:524upx;
-        }
-    }
-    .book_content{
-        margin-top:20upx;
-        padding-top:10upx;
-        padding-bottom:30upx;
-        background: white;
-        .item{
-            padding-bottom:30upx;
-            padding-left:20upx;
-            .category{
-                font-weight: bold;
-                font-size:34upx;
-                margin-bottom:10upx;
-                .icon{
-                    width:35upx;
-                    height:35upx;
-                    display: inline-block;
-                    vertical-align: middle;
-                    margin-right:10upx;
-                }
-            }
-            .book-item{
-                line-height: 64upx;
-                color:#008000;
-                font-size:34upx;
-                display:list-item;
-                list-style-type:disc;
-                margin-left:80upx;
-            }
-        }
-    }
+.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;
+					.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: 8upx;
+						height: 8upx;
+						background: #008000;
+						border-radius: 50%;
+						margin-right: 16upx;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+	}
 }
 </style>

ghsApp/src/admin/book/jdIndex.vue

@@ -1,32 +1,40 @@
 <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="item">
-                <view class="category"><image class="icon" :src="`${constant.imgUrl}${item.icon}`"></image><text>{{item.class}}</text></view>
-                <view v-for="(it, idx) in item.list" :key="idx" class="book-item">
-                    <view @click="goDetail(it)">{{it.title}}</view>
-                </view>
-            </view>
-        </view>
+		<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"
+						@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: {
-	},
+	components: {},
 	mixins: [],
 	data() {
 		return {
-            book:[],
-            showBanner:true
+			book: [],
+			showBanner: true
 		};
 	},
-  	onShareAppMessage(res) {
+	onShareAppMessage(res) {
 		return {
 			title: '销花宝教学视频（基地）',
 			desc: "图文视频教学，带您快速上手",
@@ -34,66 +42,106 @@ export default {
 			path: "admin/book/jdIndex",
 		}
 	},
-    onLoad(){
-        let that = this
-        getJdBookList().then(res => {
-            that.book = res.data.list
-        })
-    },
+	onLoad() {
+		let that = this
+		getJdBookList().then(res => {
+			that.book = res.data.list
+		})
+	},
 	methods: {
-        init(){
+		init(){
 
-        },
-        goDetail(item){
-            // #ifdef MP-WEIXIN
-            this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
+		},
+		goDetail(item){
+			// #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
-        }
+			this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
+			// #endif
+		}
 	}
 };
 </script>
+
 <style lang="scss" scoped>
-.app-content{
-    .book_banner{
-        width:750upx;
-        height:524upx;
-        .slide{
-            width:750upx;
-            height:524upx;
-        }
-    }
-    .book_content{
-        margin-top:20upx;
-        padding-top:10upx;
-        padding-bottom:30upx;
-        background: white;
-        .item{
-            padding-bottom:30upx;
-            padding-left:20upx;
-            .category{
-                font-weight: bold;
-                font-size:34upx;
-                margin-bottom:10upx;
-                .icon{
-                    width:35upx;
-                    height:35upx;
-                    display: inline-block;
-                    vertical-align: middle;
-                    margin-right:10upx;
-                }
-            }
-            .book-item{
-                line-height: 64upx;
-                color:#008000;
-                font-size:32upx;
-                display:list-item;
-                list-style-type:disc;
-                margin-left:80upx;
-            }
-        }
-    }
+.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;
+					.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: 8upx;
+						height: 8upx;
+						background: #008000;
+						border-radius: 50%;
+						margin-right: 16upx;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+	}
 }
 </style>