教程

ghsApp/src/admin/book/index.vue

@@ -13,6 +13,7 @@
 					<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>
@@ -53,6 +54,8 @@ export default {
 
 		},
 		goDetail(item){
+			// 设置为已读状态
+			item.read = true;
 			// #ifdef MP-WEIXIN
 			this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
 			// #endif
@@ -118,6 +121,8 @@ export default {
 					margin: 12upx 0;
 					border-radius: 8upx;
 					background: #f8f9fb;
+					display: flex;
+					align-items: center;
 					.book-title {
 						font-size: 32upx;
 						color: #2c3e50;
@@ -132,12 +137,37 @@ export default {
 					&::before {
 						content: '';
 						display: inline-block;
-						width: 8upx;
-						height: 8upx;
+						width: 28upx;
+						height: 28upx;
 						background: #008000;
 						border-radius: 50%;
 						margin-right: 16upx;
-						vertical-align: middle;
+						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;
+						}
 					}
 				}
 			}

ghsApp/src/admin/book/jdIndex.vue

@@ -13,6 +13,7 @@
 					<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>
@@ -53,6 +54,8 @@ export default {
 
 		},
 		goDetail(item){
+			// 设置为已读状态
+			item.read = true;
 			// #ifdef MP-WEIXIN
 			this.$util.pageTo({url: '/admin/book/detail',query:{id:item.id}})
 			// #endif
@@ -118,6 +121,8 @@ export default {
 					margin: 12upx 0;
 					border-radius: 8upx;
 					background: #f8f9fb;
+					display: flex;
+					align-items: center;
 					.book-title {
 						font-size: 32upx;
 						color: #2c3e50;
@@ -132,12 +137,37 @@ export default {
 					&::before {
 						content: '';
 						display: inline-block;
-						width: 8upx;
-						height: 8upx;
+						width: 28upx;
+						height: 28upx;
 						background: #008000;
 						border-radius: 50%;
 						margin-right: 16upx;
-						vertical-align: middle;
+						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;
+						}
 					}
 				}
 			}

ghsApp/src/admin/book/ls.vue

@@ -13,6 +13,7 @@
 					<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>
@@ -53,6 +54,8 @@ export default {
 
 		},
 		goDetail(item){
+			// 设置为已读状态
+			item.read = true;
 			// #ifdef MP-WEIXIN
 			this.$util.pageTo({url: '/admin/book/lsDetail?id='+item.id})
 			// #endif
@@ -118,6 +121,8 @@ export default {
 					margin: 12upx 0;
 					border-radius: 8upx;
 					background: #f8f9fb;
+					display: flex;
+					align-items: center;
 					.book-title {
 						font-size: 32upx;
 						color: #2c3e50;
@@ -132,12 +137,37 @@ export default {
 					&::before {
 						content: '';
 						display: inline-block;
-						width: 8upx;
-						height: 8upx;
+						width: 28upx;
+						height: 28upx;
 						background: #008000;
 						border-radius: 50%;
 						margin-right: 16upx;
-						vertical-align: middle;
+						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;
+						}
 					}
 				}
 			}