音频样式bug修复

pages/talkBook/talkBookDetail.vue

@@ -4,9 +4,10 @@
 		<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"
+				<audio style="text-align: left;  overflow: hidden;" :src="talkBookDetail.voices"
-					:name="talkBookDetail.title" :author="bookInfo.author.authorName" :action="audioAction" controls></audio>
+					poster="../../static/icon/home_icon_0.png" :name="talkBookDetail.title"
-			</view>				
+					:author="bookInfo.author.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">
@@ -14,14 +15,15 @@
 			</view>
 			<view class="tuijin" v-if="!isBuy && bookInfo.productId != null">
 				<p>觉得这本书还不错？</p>
-				<view class="flexbox" style="justify-content: space-between; border: 1px solid #55aa7f; padding: 10rpx; border-radius: 10rpx;">
+				<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 style=" display: inline-block; margin-top: 40rpx;">{{bookInfo.name}}</text><br />
 							<text>作者：{{bookInfo.author.authorName}}</text>
 						</view>
 					</view>
@@ -52,20 +54,22 @@
 					method: 'pause'
 				},
 				audioShow: false,
-				voicesImg:'',
+				voicesImg: '',
 				isBuy: false,
 				playData: {},
 				teachId: null, // 讲书id
 				bookId: null, // 书籍id
 				bookInfo: {
-					author:{
+					author: {
-						authorName:''
+						authorName: ''
 					}
 				}, // 书籍信息
 				talkBookDetail: {},
+				windowWidth: 0,
 			}
 		},
 		onLoad(e) {
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
 			console.log(e, 'onLoad')
 			this.bookId = e.bookId
 			this.teachId = e.teachId
@@ -80,14 +84,14 @@
 		methods: {
 			...mapMutations(['setUserInfo']),
 			// 购买
-			gotoBuy(){
+			gotoBuy() {
 				uni.navigateTo({
-					url: '../bookShop/commodityDetail?id=' + this.bookInfo.productId					
+					url: '../bookShop/commodityDetail?id=' + this.bookInfo.productId
 				});
 			},
 			getBookInfo() {
 				// 获取书本基本信息
-				this.$http				
+				this.$http
 					.post('book/book/getBookInfo', {
 						'bookId': this.bookId,
 						'userId': this.userInfo.id
@@ -96,18 +100,18 @@
 						if (res.code == 0) {
 							console.log(res, 'res')
 							this.bookInfo = res.book
-							
+
-							if(!this.bookInfo.author || this.bookInfo.author == null){								
+							if (!this.bookInfo.author || this.bookInfo.author == null) {
 								this.bookInfo.author = {
-									'authorName' : '未知'
+									'authorName': '未知'
 								}
-								console.log(this.bookInfo.author.authorName,'this.bookInfo.author.authorName')
+								console.log(this.bookInfo.author.authorName, 'this.bookInfo.author.authorName')
 							}
 							//console.log(this.bookInfo.author.authorName,'this.bookInfo.author.authorName')
 							this.voicesImg = res.book.images
 							// this.bookInfo.name = res.book.name
 							this.isBuy = res.book.isBuy
-							console.log(this.voicesImg,'this.voicesImg')
+							console.log(this.voicesImg, 'this.voicesImg')
 							// this.freeChapterCount = res.book.freeChapterCount
 						} else {
 							console.log(res.msg)
@@ -128,7 +132,7 @@
 						if (res.code == 0) {
 							console.log(res, 'res')
 							this.talkBookDetail = res.bookTeach
-							
+
 							// this.isBuy = res.book.isBuy
 							// this.freeChapterCount = res.book.freeChapterCount
 						} else {
@@ -163,27 +167,38 @@
 	.voices {
 		margin: 10rpx auto;
 		text-align: center;
+
+	}
+
+	/deep/ .uni-audio-name {
+		// white-space: wrap !important;
+		width: 340rpx;
 	}
-	
 
 	.title {
 		font-size: 30rpx;
 		color: #55aa7f;
 		font-weight: bold;
-		margin-bottom: 10px;
+		margin: 40rpx 0;
 	}
-	.time{
+
-		text-align: right; font-size: 24rpx; margin-top: 20rpx; color: #999;
+	.time {
+		text-align: right;
+		font-size: 24rpx;
+		margin-top: 20rpx;
+		color: #999;
 	}
+
 	.content {
-		font-size: 28rpx; text-align:justify;
+		font-size: 28rpx;
+		text-align: justify;
 		color: #666;
 		line-height: 48rpx;
 	}
 
 	.tuijin {
 		font-size: 26rpx;
-		
+
 		margin-top: 20rpx;
 
 		.img {
@@ -198,15 +213,25 @@
 		}
 
 		p {
-			font-size: 28rpx; margin-bottom: 20rpx;
+			font-size: 28rpx;
+			margin-bottom: 20rpx;
 			color: #55aa7f;
 		}
 	}
-	.btn{ margin-right: 20rpx;
+
-		text{ display: inline-block; margin-top:52rpx; font-size: 30rpx;
+	.btn {
-		padding: 5px 8px;
+		margin-right: 20rpx;
-		    background: #55aa7f; color: #fff; 
+
-		    border-radius: 5px;
+		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>