优化页面展示

src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue

@@ -3,6 +3,7 @@
 		@touchmove.stop.prevent="moveHandle" @click.stop="stop">
 		<!-- 页面内容开始 -->
 		<view class="mask" @click="close('mask')"></view>
+		<view style="background-color: #f6f6f6; display: flex; justify-content: center;">
 			<view class="layer attr-content" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }"
 				:style="{ borderRadius: borderRadius + 'rpx ' + borderRadius + 'rpx 0 0' }">
 				<view class="specification-wrapper">
@@ -40,8 +41,8 @@
 
 								<view style="display: flex; justify-content: space-between; align-items: center;">
 									<view class="item-wrapper">
-									<view class="item-content" v-for="(item_value, index2) in item.list" :key="index2"
-										:class="[
+										<view class="item-content" v-for="(item_value, index2) in item.list"
+											:key="index2" :class="[
 												item_value.ishow ? '' : 'noactived',
 												subIndex[index1] == index2 ? 'actived' : '',
 											]" :style="[
@@ -82,9 +83,9 @@
 							<view class="number-box-view">
 								<view style="flex: 1;">数量</view>
 								<view style="flex: 4;text-align: right;">
-								<vk-data-input-number-box v-model="selectNum" :min="minBuyNum || 1" :max="maxBuyNumCom"
-									:step="stepBuyNum || 1" :step-strictly="stepStrictly" :positive-integer="true"
-									@change="numChange"></vk-data-input-number-box>
+									<vk-data-input-number-box v-model="selectNum" :min="minBuyNum || 1"
+										:max="maxBuyNumCom" :step="stepBuyNum || 1" :step-strictly="stepStrictly"
+										:positive-integer="true" @change="numChange"></vk-data-input-number-box>
 								</view>
 							</view>
 						</view>
@@ -131,7 +132,7 @@
 					</view>
 				</view>
 				<view class="btn-wrapper" v-else-if="mode == 5">
-				<view class="sure" style="width: 698rpx;" :style="{
+					<view class="sure1" :style="{
 						color: themeColorFn('addCartColor'),
 						backgroundColor: themeColorFn('addCartBackgroundColor'),
 					}" @click="addProduct">
@@ -139,6 +140,8 @@
 					</view>
 				</view>
 			</view>
+		</view>
+
 		<!-- 页面内容结束 -->
 	</view>
 </template>
@@ -1231,12 +1234,15 @@ export default {
 	bottom: 0;
 	z-index: 990;
 	overflow: hidden;
+	max-width: 420px;
+	margin: 0 auto;
 
 	&.show {
 		display: block;
 
 		.mask {
 			animation: showPopup 0.2s linear both;
+			max-width: 420px;
 		}
 
 		.layer {
@@ -1280,6 +1286,7 @@ export default {
 		bottom: 0;
 		border-radius: 10rpx 10rpx 0 0;
 		background-color: #fff;
+		max-width: 420px;
 
 		.specification-wrapper {
 			// width: 100%;
@@ -1468,6 +1475,18 @@ export default {
 				background: #fe560a;
 			}
 
+			.sure1 {
+				width: 100%;
+				height: 68rpx;
+				border-radius: 38rpx;
+				color: #fff;
+				line-height: 68rpx;
+				text-align: center;
+				font-weight: 500;
+				font-size: 28rpx;
+				background: #fe560a;
+			}
+
 			.sure.add-cart {
 				background: #ff9402;
 			}

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="
+							<u-image width="100rpx" height="100rpx" :src="
 								item.picUrl.split('http').length > 1
 									? item.picUrl
 									: baseUrl + item.picUrl
-								"
-							></u-image>
+							"></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;