456

xs-app/framework/util.ts

@@ -233,6 +233,16 @@ export class util {
 		    return util.timeFormat(timeStamp)
 		}
 	}
+	
+	// 转换单位
+	public static convertUnit(arg:number) {
+		let realVal = arg+''
+		if(arg.toString().length>=4) {
+			let number = arg/10000
+			realVal = number.toFixed(1) + '万'
+		}
+		return realVal
+	}
 
 	// 去除空格
 	public static trim(str:string, pos = 'both') {

xs-app/pages/bookdetails/bookdetails-bookBrief.vue

@@ -10,6 +10,7 @@
 
 <style lang="scss">
 	.bookBrief_content{
-		
+		display: flex;
+		flex-direction: column;
 	}
 </style>

xs-app/pages/bookdetails/bookdetails-bookInfo.vue

@@ -1,15 +1,100 @@
 <template>
 	<view class="bookInfo_content">
-		信息
+		<view class="container">
+			<view class="container__book-cover">
+				<image class="image" :src="book_data.book_cover" mode="aspectFit"></image>
+			</view>
+			<view class="container__info">
+				<view class="container__info__book-name">
+					{{ book_data.book_name }}
+				</view>
+				<view class="container__info__author-name">
+					{{ book_data.author_name }}
+				</view>
+				<view class="container__info__category-name">
+					{{book_data.category_name + ' · '}}{{category_string}}
+				</view>
+				<view class="container__info__bottom-info">
+					<view class="container__info__bottom-info__read-number">
+						{{util.convertUnit(book_data.book_read_num)}}人在读
+					</view>
+					<view class="container__info__bottom-info__score">
+						
+					</view>
+				</view>
+			</view>
+		</view>
+		
 	</view>
 </template>
 
 <script setup lang="ts">
+    import { ref } from 'vue';
+    import { util } from '../../framework/util';
+	const props = defineProps({
+		book_data: Object,
+	})
+	let category_string = ref('')
+	category_string.value = props.book_data.book_is_action==2?`完结`:`连载至${props.book_data.chapter_count}章`
 	
 </script>
 
 <style lang="scss">
 	.bookInfo_content{
+		display: flex;
+		flex-direction: column;
+		background-color: $uni-theme-color;
+		
+		.container{
+			display: flex;
+			flex-direction: row;
+			padding: 40rpx 20rpx 30rpx 20rpx;
+			
+			&__book-cover{
+				flex-shrink: 0;
+				width: 200rpx;
+				height: 250rpx;
+				.image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			&__info {
+				display: flex;
+				width: 100%;
+				flex-direction: column;
+				margin-left: 20rpx;
+				// background-color: green;
+				
+				&__book-name {
+					margin-top: 10rpx;
+					font-size: 20px;
+				}
+				&__author-name {
+					margin-top: 15rpx;
+					font-size: 16px;
+					color: #894D4D;
+				}
+				&__category-name {
+					margin-top: 15rpx;
+					font-size: 16px;
+				}
+				&__bottom-info{
+					margin-top: 15rpx;
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					&__read-number {
+						font-size: 16px;
+					}
+					&__score {
+						
+					}
+				}
+			}
+		}
+		
+		
 		
 	}
 </style>

xs-app/pages/bookdetails/bookdetails.vue

@@ -1,6 +1,9 @@
 <template>
-	<bookInfo></bookInfo>
-	<bookBrief></bookBrief>
+	<view class="bookdetails-content" v-if="book_data.book_id">
+		<bookInfo :book_data='book_data'></bookInfo>
+		<bookBrief></bookBrief>
+	</view>
+	
 	<!-- <view>
 		书名: {{ book_data.book_name }}
 	</view>
@@ -86,6 +89,8 @@
 	}
 </script>
 
-<style lang="scss"> 
-
+<style lang="scss">
+	.bookdetails-content{
+		
+	}
 </style>

xs-app/pages/bookstore/bookstore.vue

@@ -72,12 +72,6 @@
 	}
 </script>
 
-<style>
-	page {
-		/* background-image: linear-gradient(to bottom, #fcd9e0, #ffffff); */
-	}
-</style>
-
 <style lang="scss">
 	.content{
 		display: flex;
@@ -91,6 +85,7 @@
 			left: 0; 
 			top: 0; 
 			background-image: linear-gradient(to bottom, #fcd9e0, #ffffff);
+			z-index: 9;
 		}	   
 		&__container{
 			display: flex;

xs-app/pages/bookstore/template/template-book-Banner.vue

@@ -43,7 +43,7 @@
 				
 		.swiper{
 			width: 100%;
-			height: 280rpx;
+			height: 314rpx;
 			.image{
 				width: 100%;
 				height: 100%;

xs-app/pages/bookstore/template/template-book-V-3.vue

@@ -18,7 +18,7 @@
 					</view>
 					<view class="book-content__box__book-info__info1">
 						<view class="book-content__box__book-info__info1__author">
-							{{item.author_name}}  著 | {{item.book_read_num}}人读过
+							{{item.author_name}}  著 | {{util.convertUnit(item.book_read_num)}}人读过
 						</view>
 						<view class="book-content__box__book-info__info1__status">
 							<image class="image" v-if="item.book_is_action==1"  src="../../../static/imgs/public/img_wanjie.png" mode="aspectFit"></image>
@@ -39,6 +39,8 @@
 
 <script setup lang="ts">
     import { book_item_data } from '../../../data/data';
+    import { util } from '../../../framework/util';
+	
 	defineProps({
 		templateData: Object,
 	})
@@ -98,12 +100,12 @@
 			&__box{
 				display: flex;
 				flex-direction: row;
-			    margin-bottom: 20rpx;
+			    margin-bottom: 30rpx;
 				padding: 0 20rpx;
 				// background-color: green;
 				&__book-cover{
-					width: 200rpx;
-					height: 250rpx;
+					width: 180rpx;
+					height: 200rpx;
 					flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
 					.image {
 						width: 100%;

xs-app/uni.scss

@@ -13,7 +13,7 @@
  */
 
 /* 颜色变量 */
-$uni-theme-color: #fcd9e0;  //主色调
+$uni-theme-color: #fcd9e0;  //主色调
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;