优化样式

vedio/page-subs/sub_A/book-long-content/components/catalogue-pop.vue

 <template>
-	<uni-popup ref='pop' type="left" maskClick="ture">
-		<scroll-view scroll-y style="background-color: white;width: 400rpx;max-width: 400rpx;">
+	<uni-popup ref='pop' type="left" :is-mask-click='false' :safe-area='false'>
+		<scroll-view scroll-y style="background-color: white;width: 400rpx;max-width: 400rpx;height: 100%;">
 			<view class="setting-box">
 				<block v-for='(item, index) in catalogueList' :key='index' :item='item'>
 					<view @click="changeCatalogue(item.chapterNum)">
@@ -54,9 +54,9 @@
 		},
 		computed: {},
 		watch: {
-			show: function(n) {
+			show: function(n) {
 				this.initList()
-				this.showPop = n;
+				this.showPop = n;
 			},
 			showPop: function(n, o) {
 				if (n == o) return;

vedio/page-subs/sub_A/book-long-content/components/detail-content-chapter.vue

@@ -19,8 +19,8 @@
 				{{limitButtonTitle}}
 			</view>
 
-			<view style="height: 120rpx;"> </view>
-
+			<view style="height: 150rpx;"> </view>
+			<view class="safe-placeholder" :style="[safePlacehoderStyle]"> </view>
 		</template>
 	</view>
 </template>
@@ -131,7 +131,16 @@
 			},
 			isHasContent: function() {
 				return this.contentSources.length > 0
-			}
+			},
+			safePlacehoderStyle: function() {
+				let height = 0;
+				if (this.bottomSafeHeight) {
+					height = height + px2rpx(this.bottomSafeHeight)
+				}
+				return {
+					height: `${height}rpx`
+				}
+			},
 		},
 		methods: {
 			// 文章数据刷新
@@ -251,7 +260,7 @@
 			padding: 0 100rpx;
 
 			text {
-				background-color: #fff;
+				background-color: cornsilk;
 				color: black;
 				border-radius: 10rpx;
 				padding: 16rpx 20rpx;
@@ -261,9 +270,9 @@
 
 		.limit-button-box {
 			text-indent: 0;
-			height: 80rpx;
+			height: 50rpx;
 			margin-bottom: 20rpx;
-			line-height: 80rpx;
+			line-height: 50rpx;
 			text-align: center;
 			color: goldenrod;
 			font-size: 28rpx;

vedio/page-subs/sub_A/book-long-content/components/setting-pop.vue

@@ -91,7 +91,7 @@
 				this.$emit('close')
 				this.$refs.pop.close();
 			},
-			change(e) {
+			change(e) {
 				if (this.showPop == e.show) return;
 				this.showPop = e.show
 			},

vedio/page-subs/sub_A/book-search/components/search-placeholder-section.vue

-<template>
-	<view class="search-section">
-		<view class="row header">
-			<view class="title">
-				{{title}}
-			</view>
-			<view class="header-button">
-				<slot name='headerButton'></slot>
-			</view>
-		</view>
-		<view class="row body">
-			<slot>
-				<view class="ele-empty" v-if='showEmpty'>
-					{{emptyTitle}}
-				</view>
-				<view class="ele-box" v-else>
-					<view class="ele" v-for='(item, index) in itemSource' :key="index" @click="tapEle(item, index)">
-						{{itemKey?item[itemKey]:item}}
-					</view>
-				</view>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		isEmpty
-	} from '../../../../common/utils/util'
-	export default {
-		props: {
-			title: {
-				type: String,
-				default: ""
-			},
-			itemSource: {
-				type: Array,
-				default: function() {
-					return []
-				}
-			},
-			itemKey: {
-				type: String,
-				default: ""
-			},
-			emptyTitle: {
-				type: String,
-				default: '暂无数据~'
-			}
-		},
-		computed: {
-			showEmpty: function() {
-				return isEmpty(this.itemSource);
-			}
-		},
-		methods: {
-			tapEle(item, index) {
-				this.$emit('tapItem', {
-					detail: {
-						item,
-						index
-					}
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.search-section {
-		padding: 20rpx 40rpx;
-		display: flex;
-		flex-direction: column;
-
-		.row {
-			margin-bottom: 20rpx;
-		}
-
-		.row:last-child {
-			margin-bottom: 0;
-		}
-
-		.header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-
-			.title {
-				height: 40rpx;
-				line-height: 40rpx;
-				font-size: 28rpx;
-				color: #333;
-			}
-
-			.header-button {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-			}
-		}
-
-		.body {
-			display: flex;
-			flex-direction: column;
-
-			.ele-empty {
-				height: 80rpx;
-				line-height: 80rpx;
-				text-align: center;
-				font-size: 28rpx;
-				color: #999;
-			}
-
-			.ele-box {
-				display: flex;
-				flex-direction: row;
-				padding-left: 15rpx;
-
-				.ele {
-					margin: 15rpx 0;
-					margin-right: 15rpx;
-					padding: 0 20rpx;
-					height: 50rpx;
-					line-height: 50rpx;
-					border-radius: 25rpx;
-					background: #ededed;
-					color: #999;
-					font-size: 28rpx;
-				}
-			}
-		}
-	}
+<template>
+	<view class="search-section">
+		<view class="row header">
+			<view class="title">
+				{{title}}
+			</view>
+			<view class="header-button">
+				<slot name='headerButton'></slot>
+			</view>
+		</view>
+		<view class="row body">
+			<slot>
+				<view class="ele-empty" v-if='showEmpty'>
+					{{emptyTitle}}
+				</view>
+				<!-- <scroll-view scroll-x v-else> -->
+				<view class="ele-box" v-else>
+					<view class="ele" v-for='(item, index) in itemSource' :key="index" @click="tapEle(item, index)">
+						{{itemKey?item[itemKey]:item}}
+					</view>
+				</view>
+				<!-- </scroll-view> -->
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		isEmpty
+	} from '../../../../common/utils/util'
+	export default {
+		props: {
+			title: {
+				type: String,
+				default: ""
+			},
+			itemSource: {
+				type: Array,
+				default: function() {
+					return []
+				}
+			},
+			itemKey: {
+				type: String,
+				default: ""
+			},
+			emptyTitle: {
+				type: String,
+				default: '暂无数据~'
+			}
+		},
+		computed: {
+			showEmpty: function() {
+				return isEmpty(this.itemSource);
+			}
+		},
+		methods: {
+			tapEle(item, index) {
+				this.$emit('tapItem', {
+					detail: {
+						item,
+						index
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.search-section {
+		padding: 20rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+
+		.row {
+			margin-bottom: 20rpx;
+		}
+
+		.row:last-child {
+			margin-bottom: 0;
+		}
+
+		.header {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+
+			.title {
+				height: 40rpx;
+				line-height: 40rpx;
+				font-size: 28rpx;
+				color: #333;
+			}
+
+			.header-button {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+
+		.body {
+			display: flex;
+			flex-direction: column;
+
+			.ele-empty {
+				height: 80rpx;
+				line-height: 80rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #999;
+			}
+
+			.ele-box {
+				display: flex;
+				flex-direction: row;
+				padding-left: 15rpx;
+				flex-wrap: wrap;
+				overflow: auto;
+
+				.ele {
+					margin: 15rpx 0;
+					margin-right: 15rpx;
+					padding: 0 20rpx;
+					height: 50rpx;
+					line-height: 50rpx;
+					border-radius: 25rpx;
+					background: #ededed;
+					color: #999;
+					font-size: 28rpx;
+				}
+			}
+		}
+	}
 </style>
\ No newline at end of file

vedio/page-subs/sub_A/book-search/components/search-result.vue

@@ -79,7 +79,7 @@
 				})
 			},
 			tapItem(e, index) {
-				gotoBookContentPage(e.detail.data.id, e.detail.data.id)
+				gotoBookContentPage(e.detail.data.id, e.detail.data.shortis)
 			},
 		}
 	}