From 63cbc9da2f33f3dbfbf79c9fe62e58be7cbd2331 Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Tue, 26 Sep 2023 17:46:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=B2=E4=B9=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/talkBook/talkBook.vue       | 167 +++++++++
 pages/talkBook/talkBookDetail.vue | 197 +++++++++++
 pages/talkBook/talkBookML.vue     | 546 ++++++++++++++++++++++++++++++
 3 files changed, 910 insertions(+)
 create mode 100644 pages/talkBook/talkBook.vue
 create mode 100644 pages/talkBook/talkBookDetail.vue
 create mode 100644 pages/talkBook/talkBookML.vue

diff --git a/pages/talkBook/talkBook.vue b/pages/talkBook/talkBook.vue
new file mode 100644
index 0000000..48bb6f9
--- /dev/null
+++ b/pages/talkBook/talkBook.vue
@@ -0,0 +1,167 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="讲书"></z-nav-bar>
+		</view>
+		<view class="tip">
+			<text>请选择要查看的书籍：</text>
+		</view>
+		<view class="mainContainer">
+			<view class="item" v-if="bookList.length > 0">
+				<u-row gutter="16" justify="flex-start" >
+					<u-col span="4" v-for="(item,index) in bookList" :key="index">
+						<view>
+							<view class="videoBox demo-layout bg-purple" @click="toDetail(item)">
+								<image v-if="item.images != ''" :src="item.images" mode="scaleToFill"></image>
+								<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>								
+							</view>
+							<text class="bookName">{{item.name}}</text>
+						</view>
+					</u-col>
+				</u-row>				
+			</view>
+			<u-divider v-else text="暂无数据"></u-divider>
+			<view style="width: 100%;">
+				<view v-if="status==0" style="text-align: center;">
+					<u-loading-icon style="display: inline-block;"></u-loading-icon>
+					<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
+				</view>
+				<view v-if="status==1">
+					<u-divider text="全部加载完成"></u-divider>
+				</view>
+			</view>
+			
+		</view>
+		<!-- 评价对话框 -->		
+		<music-play :playData="playData"></music-play>
+	</view>
+</template>
+
+<script>
+	import $http from '@/config/requestConfig.js';
+	// import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
+   import musicPlay from '@/components/music.vue'
+import { data } from 'jquery';
+   import {
+   	mapState
+   } from 'vuex';
+	export default {
+		data() {
+			return {
+				loadingNow : false,
+				playData:{},				
+				windowWidth:0,
+				bookid:null,
+				productInfo:{},	
+				page:1,
+				bookList:[],
+				pageSize:9,
+				total:0,
+				totalPage:0,
+				status:3,
+				shupingList:[],
+				bfaid:null,
+			}
+		},
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			uni.stopPullDownRefresh(); 
+		},
+		onReachBottom() {
+			this.loadingNow = true			
+			// if(this.page < this.total){
+			// 	this.page++
+			// 	console.log('加载',this.page)
+			// 	this.status = 0
+			// 	this.getBookCom()
+				
+			// }else{
+			// 	this.status = 1
+			// 	console.log('加载完成了',this.page)
+			// 	return
+			// }
+		},
+		onLoad(e) {
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			console.log(e,'onload')
+			this.bookid = e.bookid
+		//	this.getProDetail(e)
+			this.getBooks()
+		},
+		computed:{
+			...mapState(['userInfo']),
+		},
+		methods: { 
+			getBooks(){
+				this.$http
+					.post('book/teach/getTeachBooks',{
+						'limit': 9,
+						'page': this.page
+					})
+					.then(res => {
+						console.log(res,'讲书列表')
+						if(res.code == 0 && res.page.records.length > 0){
+							this.bookList = res.page.records
+							this.totalPage = res.page.pages
+							this.status = 3
+							console.log(this.bookList,'this.bookList')
+						}else{
+							this.bookList = []
+							this.totalPage = 0
+						}					    
+						
+					}).catch(e => {
+						console.log(e,'e')
+					});
+			},
+			// 书评详情
+			toDetail(val){
+				console.log(val,'val')
+				uni.navigateTo({
+					url:'./talkBookML?bookid='+val.id
+				})
+			},
+			
+			
+			},
+		components:{
+			musicPlay	
+						
+		}
+	}
+</script>
+
+<style lang="scss" scoped>	
+.tip{
+		padding: 20rpx; background-color: #fff;
+		text{ font-size: 36rpx;}
+	}
+	.flexbox{display: flex;}
+	.container{padding: 10px;}
+.bookName {
+		white-space: nowrap; 
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		font-size: 30rpx;
+		color: #333; 
+		padding: 10rpx 0;
+	}
+	uni-image {
+		width: auto !important;
+		height: 350rpx;
+	}
+	.listenList {
+		padding: 10rpx;
+		box-sizing: border-box;
+		width: calc(100% - 10rpx);
+	}
+	.u-row {
+		flex-wrap: wrap;
+	}
+	.u-col {
+		overflow: hidden;
+		margin-bottom: 20rpx;
+	}
+	.mb30{margin-bottom: 30rpx; overflow: hidden;}
+</style>
diff --git a/pages/talkBook/talkBookDetail.vue b/pages/talkBook/talkBookDetail.vue
new file mode 100644
index 0000000..6316045
--- /dev/null
+++ b/pages/talkBook/talkBookDetail.vue
@@ -0,0 +1,197 @@
+<template>
+	<view>
+		<z-nav-bar :title="bookInfo.name+'-讲书'"></z-nav-bar>
+		<view class="mainContent">
+			<view class="title">{{talkBookDetail.title}}</view>
+			<view class="voices" v-if="talkBookDetail.voices != '' && audioShow">
+				<audio style="text-align: left" :src="talkBookDetail.voices" poster="../../static/icon/fengziIcon.jpg"
+					:name="talkBookDetail.title" :author="bookInfo.authorName" :action="audioAction" controls></audio>
+			</view>				
+			<view class="content" v-if="talkBookDetail.content != ''" v-html="talkBookDetail.content"></view>
+			<view class="content" v-else></view>
+			<view class="time">
+				<text>{{talkBookDetail.createTime}}</text>
+			</view>
+			<view class="tuijin" v-if="!isBuy">
+				<p>觉得这本书还不错？</p>
+				<view class="flexbox" style="justify-content: space-between; border: 1px solid #55aa7f; padding: 10rpx; border-radius: 10rpx;">
+					<view class="flexbox">
+						<view class="img">
+							<image v-if="bookInfo.images != ''" :src="bookInfo.images" mode="aspectFit"></image>
+							<image v-else src="../../static/icon/wufeng.jpg" mode="aspectFit"></image>
+						</view>
+						<view>
+							<text style=" display: inline-block; margin-top: 40rpx;">{{bookInfo.name}}</text><br/>
+							<text>作者：{{bookInfo.authorName}}</text>
+						</view>
+					</view>
+					<view class="btn" @click="gotoBuy()">
+						<text>立即购买</text>
+					</view>
+				</view>
+			</view>
+			<!-- <view class="opbtn flexbox">
+				<view class="">上一章</view>
+				<view class="">下一章</view>
+			</view> -->
+		</view>
+		<music-play :playData="playData"></music-play>
+	</view>
+</template>
+
+<script>
+	import musicPlay from '@/components/music.vue'
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				audioAction: {
+					method: 'pause'
+				},
+				audioShow: false,
+				voicesImg:'',
+				isBuy: false,
+				playData: {},
+				teachId: null, // 讲书id
+				bookId: null, // 书籍id
+				bookInfo: {}, // 书籍信息
+				talkBookDetail: {},
+			}
+		},
+		onLoad(e) {
+			console.log(e, 'onLoad')
+			this.bookId = e.bookId
+			this.teachId = e.teachId
+		},
+		onShow() {
+			this.getBookInfo()
+			this.getTalkBookDetail()
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		methods: {
+			...mapMutations(['setUserInfo']),
+			// 购买
+			gotoBuy(){
+				uni.navigateTo({
+					url: '../bookShop/settlementBook?type=2&list=' + this.bookId
+				});
+			},
+			getBookInfo() {
+				// 获取书本基本信息
+				this.$http
+					.post('book/book/appinfo/' + this.bookId + '/' + this.userInfo.id)
+					.then(res => {
+						if (res.code == 0) {
+							console.log(res, 'res')
+							this.bookInfo = res.book
+							this.voicesImg = res.book.images
+							// this.bookInfo.name = res.book.name
+							this.isBuy = res.book.isBuy
+							console.log(this.voicesImg,'this.voicesImg')
+							// this.freeChapterCount = res.book.freeChapterCount
+						} else {
+							console.log(res.msg)
+						}
+						console.log(res, '书籍基本信息')
+					}).catch((error) => {
+						console.log(error)
+					})
+			},
+			// 获取讲书详情
+			getTalkBookDetail() {
+				this.audioShow = false
+				this.$http
+					.post('book/teach/getTeachDetail', {
+						'teachId': this.teachId
+					})
+					.then(res => {
+						if (res.code == 0) {
+							console.log(res, 'res')
+							this.talkBookDetail = res.bookTeach
+							
+							// this.isBuy = res.book.isBuy
+							// this.freeChapterCount = res.book.freeChapterCount
+						} else {
+							console.log(res.msg)
+						}
+						this.audioShow = true
+						console.log(res, '讲书信息')
+					}).catch((error) => {
+						console.log(error)
+						this.audioShow = true
+					})
+			},
+		},
+		components: {
+			musicPlay
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.mainContent {
+		margin: 20rpx 10rpx;
+		padding: 20rpx;
+		background-color: #fff;
+		border-radius: 10rpx;
+	}
+
+	.flexbox {
+		display: flex;
+	}
+
+	.voices {
+		margin: 10rpx auto;
+		text-align: center;
+	}
+	
+
+	.title {
+		font-size: 30rpx;
+		color: #55aa7f;
+		font-weight: bold;
+		margin-bottom: 10px;
+	}
+	.time{
+		text-align: right; font-size: 24rpx; margin-top: 20rpx; color: #999;
+	}
+	.content {
+		font-size: 28rpx; text-align:justify;
+		color: #666;
+		line-height: 48rpx;
+	}
+
+	.tuijin {
+		font-size: 26rpx;
+		
+		margin-top: 20rpx;
+
+		.img {
+			width: 150rpx;
+			height: 150rpx;
+			overflow: hidden;
+		}
+
+		image {
+			height: 150rpx;
+			width: 100%;
+		}
+
+		p {
+			font-size: 28rpx; margin-bottom: 20rpx;
+			color: #55aa7f;
+		}
+	}
+	.btn{ margin-right: 20rpx;
+		text{ display: inline-block; margin-top:52rpx; font-size: 30rpx;
+		padding: 5px 8px;
+		    background: #55aa7f; color: #fff; 
+		    border-radius: 5px;
+	}}
+	// .opbtn{font-size: 14rpx;}
+</style>
\ No newline at end of file
diff --git a/pages/talkBook/talkBookML.vue b/pages/talkBook/talkBookML.vue
new file mode 100644
index 0000000..e3c71bb
--- /dev/null
+++ b/pages/talkBook/talkBookML.vue
@@ -0,0 +1,546 @@
+<template>
+	<!--父组件-->
+
+	<view class="container">
+		<!-- <view class="mini"></view> -->
+		<view>
+			<z-nav-bar title="讲书目录"></z-nav-bar>
+			<!-- 基本信息 -->
+			<view class="book_neir">
+				<view class="flexbox info">
+					<view class="item">
+						<image class="bn_img" v-if="bookInfo.images != ''" :src="bookInfo.images" mode="widthFix">
+						</image>
+						<image class="bn_img" style="border:1px solid #eee" v-else src="../../static/icon/wufeng.jpg"
+							mode="widthFix"></image>
+					</view>
+					<!-- <img :src="bookInfo.images" class="bn_img"> -->
+					<view class="item">
+						<!-- <b class="leiXing" v-if="bookInfo.isVip==1" style="background: #c79119;">VIP</b>
+					<b class="leiXing" v-if="bookInfo.isVip==2" style="background: #c74119;">付费</b> -->
+						<view class="bn_nes">
+							<view style="font-weight: bold;margin-bottom: 30rpx;">
+								{{bookInfo.name}}
+							</view>
+							<view
+								style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
+								<p @click="onAuCHJump(bookInfo.authorId,1)" style="margin-bottom: 20rpx;">
+									{{bookInfo.authorName}} [著] >
+								</p>
+								<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookInfo.publisherNIList">
+									{{item.title}} >
+								</p>
+							</view>
+							<view class="tags">
+								<uni-tag class="tag" @click="toMore()" :inverted="true" text="书评"
+									type="success"></uni-tag>
+								<!-- 1:打卡，2不打卡 -->
+								<uni-tag @click="gotoclock()" v-if="bookInfo.clockIn == 1" class="tag" :inverted="true"
+									text="签到" type="warning"></uni-tag>
+							</view>
+						</view>
+					</view>
+				</view>
+
+			</view>
+			<!-- end -->
+			<view class="playList" v-if="libLIst.length > 0">
+				<view class="item" v-for="(item,index) in libLIst" :key="index">
+					<view>
+						<view @click="toDetail(item)" class="flexbox muluitem">
+							<span>{{item.title}}</span>&nbsp;&nbsp;
+							<view >
+							<uni-tag v-if="item.voices != ''" class="tag" size="small" :inverted="true" text="音频"
+								type="success" /></view>
+							<view ><uni-tag v-if="item.content != ''" class="tag" size="small" :inverted="true" text="文字"
+								type="primary" /></view>
+							<!-- <image  class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image>	 -->
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-divider v-else text="暂无讲书目录"></u-divider>
+			<music-play :playData="playData"></music-play>
+			<!-- <z-navigation></z-navigation> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	// import textScroll from '@/components/textScroll/index.vue'
+	// import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
+	import musicPlay from '@/components/music.vue'
+	import $http from '../../config/requestConfig';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		components: {
+			//  cxAdudioPlay,
+			// textScroll,
+			musicPlay
+		},
+		data() {
+			return {
+				isBuy: false, // true 已购买，false 未购买
+				playData: {},
+				stopPlay: false, // 关闭音频
+				jia: false, // 下一I首
+				forceRefresh: true,
+				current: 0,
+				bookInfo: {}, // 书籍详情
+				bookid: null, // 书籍id
+				playid: null, // 正在播放的章节id
+				playchapName: '', // 正在播放的章节名称
+				playIndex: null, // 正在播放的序号值
+				onlineH: { // 线上的历史听书
+					playIndex: null, // 存储的播放index
+					time: 0, // 存储的播放秒数
+				},
+				currentTime: {
+					time: 0,
+					flag: ''
+				},
+				freeChapterCount: 0, // 免费章节数
+				pageTab: [{
+						name: '正在播放'
+					},
+					{
+						name: '播放列表'
+					}
+				],
+				fengImg: '', // 播放封面
+				libLIst: [
+					// {
+					// 	name:"第二章",
+					// 	url: 'https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/07/14/6c6d7f7b947c4dc18881e8682b4dc36a2ce742.mp3'
+					// },
+
+				], // 书籍目录
+				videoList: [], //音频文件				
+				BsNav: [ //倍数-自定义
+					{
+						id: 1.0,
+						bs: '1.0'
+					}, {
+						id: 1.5,
+						bs: '1.5'
+					}, {
+						id: 2.0,
+						bs: '2.0'
+					}
+				],
+				orderPlayBtn: false, // 是否开启按顺序播放
+				LibVisible: false,
+				boardRemark: '',
+				StyleSheet: 'font-size:36rpx; text-align:center',
+				jian: false, // 上一曲切换
+			}
+		},
+		//第一次加载
+		onLoad(e) {
+			console.log('------------------')
+			// 隐藏原生的tabbar
+			console.log(e, 'e')
+			uni.hideTabBar();
+			this.bookid = e.bookid
+			//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')			
+			this.getLibList()
+			this.getBookInfo()
+
+		},
+		created() {
+
+		},
+		onShow() {
+			//	console.log(this.userInfo.orderPlayBtn,'初始化')
+			if (this.userInfo.orderPlayBtn != undefined) {
+				this.orderPlayBtn = this.userInfo.orderPlayBtn
+			}
+
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		methods: {
+			...mapMutations(['setUserInfo']),
+
+			// 查看本书更多书评
+			toMore(val) {
+				console.log(val, 'val')
+				uni.navigateTo({
+					url: '../comments/comments?bookid=' + this.bookid,
+				});
+			},
+			// 去打卡
+			gotoclock() {
+				uni.navigateTo({
+					url: '../clock/clock?bookid=' + this.bookid,
+				});
+			},
+			getBookInfo() {
+				// 获取书本基本信息
+				this.$http
+					.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
+					.then(res => {
+						if (res.code == 0) {
+							console.log(res, 'res')
+							this.bookInfo = res.book
+							// this.isBuy = res.book.isBuy
+							// this.freeChapterCount = res.book.freeChapterCount
+						} else {
+							console.log(res.msg)
+						}
+						console.log(res, 'res基本信息')
+					}).catch((error) => {
+						console.log(error)
+					})
+			},
+
+			// 详细
+			toDetail(item) {
+				console.log('点击了', item)
+				uni.navigateTo({
+					url: './talkBookDetail?teachId=' + item.teachId +"&bookId="+item.bookId
+				});
+			},
+
+			// 信息介绍跳转
+			onAuCHJump(id, e) {
+				uni.navigateTo({
+					url: '../eBook/bookMessage?Id=' + id + '&typ=' + e
+				});
+			},
+			// 获取章节列表
+			getLibList() {
+				this.$http
+					.post('book/teach/getBookTeachItems', {
+						'bookId': this.bookid,
+						'limit': 10,
+						'page': 1
+						// 'userid': this.userInfo.id,
+						// 'bookid': 
+						// 'id': this.playid
+					})
+					.then(res => {
+						if (res.code == 0) {
+							console.log(res, 999)
+							if (res.page.records.length > 0) {
+								this.libLIst = res.page.records
+								// this.fengImg = res.images								
+							} else {
+								this.libLIst = []
+								// uni.showToast({
+								// 	title:'暂无可听章节哦~',
+								// 	icon:'none'
+								// })
+								// setTimeout(()=>{
+								// 	uni.navigateBack({ // 返回上一页
+								// 		delta: 1
+								// 	});
+								// },2000)
+							}
+						}
+					}).catch((e) => {
+						console.log(e.msg)
+					})
+			},
+			// 获取音频数据
+			listen(e, index) {
+				console.log(this.currentTime, 'this.currentTime')
+				// console.log(e,'playchapName')
+				this.playid = e.chapterId
+				this.playIndex = index
+				this.playchapName = e.chapterName
+				this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
+				this.playIndex > 0 ? this.jian = true : this.jian = false
+				// console.log(this.jian,45454545)
+				this.forceRefresh = false
+				this.$http
+					.post('book/bookchaptercontent/appBooksChapterContent', {
+						'userId': this.userInfo.id,
+						'bookid': this.bookid,
+						'id': this.playid
+					})
+					.then(res => {
+						//this.tmpChapter.text = res.bookCatalogue
+						if (res.code == 0) {
+							// console.log(res)
+							if (res.bookCatalogue.voices[0] != null && res.bookCatalogue.voices[0].length > 15) {
+								// console.log('走这')
+
+								this.videoList = []
+								this.boardRemark = res.bookCatalogue.chapter[0]
+								this.fengImg = res.image
+								this.videoList.push({
+									'recorPath': res.bookCatalogue.voices[0]
+								})
+								console.log(res.bookCatalogue.voices[0], 'path')
+								this.forceRefresh = true
+							} else {
+								this.forceRefresh = true
+								uni.showToast({
+									title: '暂无可播放音频,加载下一章',
+									icon: 'none',
+									duration: 2000
+								})
+								setTimeout(() => {
+									if (this.playIndex + 1 >= this.libLIst.length) {
+										// this.stopPlay = true
+										uni.showToast({
+											title: '本书已全部播放完毕',
+											icon: 'none',
+											duration: 2000
+										})
+									} else {
+										this.listen(this.libLIst[this.playIndex], this.playIndex)
+									}
+								}, 2000)
+
+							}
+						}
+					}).catch((e) => {})
+			},
+			// 下一首
+			xiayishou() {
+				console.log('加载下一首')
+				if (this.playIndex + 1 <= this.libLIst.length - 1) {
+					this.playIndex += 1
+					this.saveRate(0)
+					this.currentTime.time = 0
+					this.currentTime.flag = ''
+					this.listen(this.libLIst[this.playIndex], this.playIndex)
+				} else {
+					this.jia = false
+					uni.showToast({
+						title: "音频已经播放完毕！",
+						icon: "none"
+					})
+				}
+			},
+			TabChange(e) {
+				// tab 切换
+				this.current = e.index
+				// console.log(e)
+			}
+		},
+
+
+		// watch:{
+		// 	list: {
+		// 	        handler (newName, oldName) {
+		// 	            console.log(newName)
+		// 	        },
+		// 	        immediate: true
+		// 	    }
+		// }
+	}
+</script>
+
+<style lang="less">
+	.muluitem{
+		span{
+			white-space: nowrap;
+			overflow-x: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+	.playingFig {
+		width: 100rpx;
+		height: 100rpx;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.price {
+		margin-top: 160rpx;
+		overflow: hidden;
+
+		.light {
+			font-size: 50rpx;
+			font-weight: bold;
+			color: #f05654;
+		}
+	}
+
+	.tags {
+		.tag {
+			margin-left: 0;
+			margin-right: 10rpx;
+		}
+	}
+
+	.charType {
+		display: inline;
+		width: 20px !important;
+	}
+
+	.graytitle {
+		color: #999;
+	}
+
+	.yigoumai {
+		background-color: #ffc773;
+	}
+
+	.shiting {
+		background-color: #f47983;
+	}
+
+	.playing {
+		color: #1daa5c;
+	}
+
+	.chaoshi {
+		background-color: #1daa5c;
+	}
+
+	.home_nar {
+		margin: 30rpx 0;
+		justify-content: space-between;
+	}
+
+	.hn_cl_tit {
+		width: 48%;
+		text-align: center;
+		border-radius: 20rpx;
+		padding-top: 10rpx;
+		// line-height: 110upx;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+
+		image {
+
+			width: 80upx;
+			height: 80upx;
+			display: inline-block;
+			// margin: 0 auto;
+			// margin: 0 20rpx;
+		}
+
+		text {
+			height: 100upx;
+			display: inline-block;
+			line-height: 80upx;
+			color: #fff;
+			font-size: 38rpx;
+		}
+	}
+
+	.flexbox {
+		display: flex;
+	}
+
+	.book_neir {
+		margin-top: 80rpx;
+		padding: 20rpx;
+
+		.bn_img {
+			width: 300rpx !important;
+		}
+	}
+
+	.info {
+		overflow: hidden;
+		width: 100%;
+	}
+
+	.book_neir {
+		margin: 20rpx 0 0 0;
+		position: relative;
+
+		.item {
+			display: inline-block;
+			float: left;
+			width: 50%;
+			overflow: hidden;
+		}
+
+		.bn_img {
+			float: left;
+			width: 250upx;
+			height: 320upx;
+		}
+
+		.bn_nes {
+			float: left;
+			font-size: 36rpx;
+			margin-left: 40rpx;
+
+			view {
+				margin: 20rpx 0 0 0;
+			}
+		}
+
+		.leiXing {
+			display: block;
+			padding: 5rpx 10rpx;
+			border-radius: 10rpx;
+			text-align: center;
+			color: #fff;
+			font-weight: normal;
+			background: #27b386;
+			position: absolute;
+			left: -15upx;
+			top: 10upx;
+			font-size: 16rpx;
+		}
+	}
+
+	.container {
+		background-color: #fff;
+	}
+
+	.playTitle {
+		width: 80%;
+		margin: 20rpx auto;
+		margin-top: 50rpx;
+	}
+
+	.libTitle {
+		font-size: 40rpx;
+		margin: 40rpx 0;
+		display: block;
+		text-align: center;
+	}
+
+	.tanchu {
+		padding: 40rpx 30rpx 40rpx 30rpx;
+	}
+
+	.playList {
+		padding: 20rpx;
+		color: #666;
+	}
+
+	.playList .item {
+		display: block;
+		line-height: 80rpx;
+		white-space: nowrap;
+		overflow-x: hidden;
+		font-size: 36rpx;
+		text-overflow: ellipsis;
+	}
+
+	.tag {
+		margin-left: 20rpx;
+	}
+
+	.playNow {
+		color: #27b386;
+	}
+
+	.pageTabBox {
+		width: 150px;
+		margin: 20rpx auto;
+		font-size: 60rpx;
+	}
+
+	.cxAdudioPlay {
+		position: fixed;
+		bottom: 150rpx;
+		left: 0;
+	}
+</style>
\ No newline at end of file