优化页面展示

src/pages/productLine/components/categoryPopup.vue

 <template>
-	<u-popup
-		v-model="show"
-		mode="bottom"
-		length="90%"
-		:mask-close-able="false"
-		closeable
-		@close="handleClose"
-	>
+	<u-popup v-model="show" mode="bottom" length="80%" :mask-close-able="false" closeable @close="handleClose">
 		<view class="u-wrap">
 			<!-- 搜索 -->
-			<view
-				style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
-			>
-				<uni-search-bar
-					placeholder="输入搜索商品"
-					bgColor="#EEEEEE"
-					clearButton="auto"
-					cancelButton="none"
-					@confirm="search"
-				/>
+			<view style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;">
+				<uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none"
+					@confirm="search" />
 			</view>
 			<view class="u-menu-wrap">
-				<scroll-view
-					scroll-y
-					scroll-with-animation
-					class="u-tab-view menu-scroll-view"
-					:scroll-top="scrollTop"
-				>
-					<view
-						v-for="(item, index) in categoryList"
-						:key="item.id"
-						class="u-tab-item"
-						:class="[current == index ? 'u-tab-item-active' : '']"
-						:data-current="index"
-						@tap.stop="swichMenu(index, item.id)"
-					>
+				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
+					<view v-for="(item, index) in categoryList" :key="item.id" class="u-tab-item"
+						:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
+						@tap.stop="swichMenu(index, item.id)">
 						<text class="u-line-1">{{ item.name }}</text>
 					</view>
 				</scroll-view>
 				<view class="right-cates">
 					<block v-for="(item, index) in currentSubCategoryData" :key="item.id">
 						<view class="item-container" @tap="cateGoryGoods(item)">
-							<u-image
-								width="100rpx"
-								height="100rpx"
-								:src="
-									item.picUrl.split('http').length > 1
-										? item.picUrl
-										: baseUrl + item.picUrl
-								"
-							></u-image>
+							<u-image width="100rpx" height="100rpx" :src="
+								item.picUrl.split('http').length > 1
+									? item.picUrl
+									: baseUrl + item.picUrl
+							"></u-image>
 							<view class="content">
 								<view class="title">
 									<text>{{ item.name }}</text>
@@ -63,12 +35,8 @@
 		</view>
 	</u-popup>
 
-	<search-popup
-		ref="searchPopupRef"
-		:show="showSearchPopup"
-		@search-close="searchClose"
-		@cateGoryGoods="cateGoryGoods"
-	/>
+	<search-popup ref="searchPopupRef" :show="showSearchPopup" @search-close="searchClose"
+		@cateGoryGoods="cateGoryGoods" />
 </template>
 
 <script setup lang="ts">
@@ -189,11 +157,16 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+:deep(.uni-scroll-view-content) {
+	// background-color: #f6f6f6;
+}
+
 .right-cates {
 	width: 100%;
 	height: 100%;
 	background-color: #fff;
 	padding: 0 24rpx;
+
 	.item-container {
 		box-sizing: border-box;
 		width: 100%;
@@ -203,20 +176,24 @@ defineExpose({
 		justify-content: flex-start;
 		align-items: center;
 		border-bottom: 1rpx solid #f5f5f5;
+
 		.content {
 			height: 100%;
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
 			margin-left: 20rpx;
+
 			.title {
 				display: flex;
 				flex-direction: column;
 			}
+
 			.price {
 				.new-price {
 					font-size: 32rpx;
 				}
+
 				.old-price {
 					margin-left: 10rpx;
 					color: #969799;

src/pages/productLine/productLine.vue

@@ -770,6 +770,16 @@ let reload = () => {
 <style lang="scss" scoped>
 $nav-heigth: var(--window-bottom);
 
+:deep(.u-mask) {
+	max-width: 420px;
+	margin: 0 auto;
+}
+
+:deep(.u-drawer-content) {
+	max-width: 420px;
+	margin: 0 auto;
+}
+
 .add {
 	position: absolute;
 	width: 180px;