排版优化

ghsApp/src/admin/item/list2.vue

@@ -104,23 +104,52 @@
 		</uni-popup>
 
 		<uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
-			<view style="display:flex;width:100vw;padding:20upx 20upx 40upx 20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
-				<view style="width:100vw;"><button @click="costChange()">成本变动记录</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="priceChange()">价格变动记录</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="varietyManage()">多颜色</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="copyCreate()">复制新建</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="moveToLose()">挪到处理区</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="shareItem()">打开分享</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="getHdPosterFn()">生成海报</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="orderRecord()">下单记录</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="onStockChange()">路上库存变动</button></view>
-				<!-- <view style="width:100vw;margin-top:8upx;"><button @click="ptAuth()">申请平台认证</button></view> -->
-				<view style="width:100vw;margin-top:8upx;"><button @click="preSell()">预售</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="doWaste()">报损</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="doPart()">拆散</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="delItem()">删除</button></view>
-				<view style="width:100vw;margin-top:8upx;"><button @click="sendStock()">分配库存</button></view>
-				<view style="width:100vw;margin-top:30upx;"><button @click="closeRightShow()">取消</button></view>
+			<view class="action-popup-container">
+				<view class="action-button-item">
+					<button class="action-button" @click="costChange()">成本变动记录</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="priceChange()">价格变动记录</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="varietyManage()">多颜色</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="copyCreate()">复制新建</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="moveToLose()">挪到处理区</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="shareItem()">打开分享</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="getHdPosterFn()">生成海报</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="orderRecord()">下单记录</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="onStockChange()">路上库存变动</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="preSell()">预售</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="doWaste()">报损</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="doPart()">拆散</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="delItem()">删除</button>
+				</view>
+				<view class="action-button-item">
+					<button class="action-button" @click="sendStock()">分配库存</button>
+				</view>
+				<view class="action-button-item cancel">
+					<button class="action-button cancel" @click="closeRightShow()">取消</button>
+				</view>
 			</view>
 		</uni-popup>
 
@@ -724,4 +753,58 @@ export default {
 .class-popup-style{
 	z-index:999999;
 }
+
+.action-popup-container {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 24upx;
+	padding: 50upx 40upx 60upx 40upx;
+	max-height: 98vh;
+	overflow-y: auto;
+	width: 92vw;
+	max-width: 650upx;
+	margin: 0 auto;
+}
+
+.action-button-item {
+	&.cancel {
+		grid-column: 1 / -1;
+		margin-top: 30upx;
+	}
+}
+
+.action-button {
+	width: 100%;
+	height: 110upx;
+	border: 2upx solid #d0d7de;
+	border-radius: 16upx;
+	background: #ffffff;
+	color: #24292f;
+	font-size: 34upx;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);
+	transition: all 0.15s ease;
+	line-height: 1.2;
+	
+	&:active {
+		background: #f6f8fa;
+		transform: scale(0.96);
+		border-color: #8c959f;
+	}
+	
+	&.cancel {
+		background: #f6f8fa;
+		color: #656d76;
+		border-color: #d0d7de;
+		font-size: 32upx;
+		
+		&:active {
+			background: #eaeef2;
+			border-color: #8c959f;
+		}
+	}
+}
 </style>