优化

ghsApp/src/admin/item/list2.vue

@@ -1,5 +1,27 @@
 <template>
   <view class="app-content" style="background:white;">
+		<view class="modern-tabs-container">
+			<view class="modern-tabs">
+				<view class="modern-tab" :class="{ 'active': globalLookStock === 0 }" @click="changeHasStock(0)">
+					<view class="tab-content">
+						<text class="tab-icon">📋</text>
+						<text class="tab-text">全部</text>
+					</view>
+				</view>
+				<view class="modern-tab" :class="{ 'active': globalLookStock === 1 }" @click="changeHasStock(1)">
+					<view class="tab-content">
+						<text class="tab-icon">✅</text>
+						<text class="tab-text">有库存</text>
+					</view>
+				</view>
+				<view class="modern-tab" :class="{ 'active': globalLookStock === 2 }" @click="changeHasStock(2)">
+					<view class="tab-content">
+						<text class="tab-icon">❌</text>
+						<text class="tab-text">没库存</text>
+					</view>
+				</view>
+			</view>
+		</view>
 		<view class="billing_box_bg">
 			<view class="input-wrap">
 				<view style="padding:0upx 0upx 0upx 0upx;margin-right:8upx;" >
@@ -8,15 +30,12 @@
 				<view class="search-bar">
 					<app-search-module v-model="globalPy" ref="globalSearchRef" placeholder="这里搜索" @input="globalSearch"/>
 				</view>
-				<view style="padding:0 0upx 0 8upx;" >
-					<button class="admin-button-com middle blue" @click.stop="openOption">{{globalLookStock==0 ? '库存筛选' : globalLookStock==1 ? '有库存' : '没库存' }}</button>
-				</view>
 				<view style="padding:0 0upx 0 8upx;" >
 					<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/ptItem/itemList' })">添花材</button>
 				</view>
 			</view>
 
-			<button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:120upx;right:24upx;z-index:99;">刷 新</button>
+			<button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:245upx;right:24upx;z-index:99;">刷 新</button>
 
 			<view class="scroll-middle_bx">
 				<scroll-view scroll-y scroll-with-animation class="tab-view">
@@ -89,20 +108,6 @@
 			</view>
 		</uni-popup>
 
-		<uni-popup ref="searchOptionRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
-			<view style="display:flex;padding:80upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
-				<view @tap.stop="changeHasStock(2)" style="margin-bottom:20upx;">
-					<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">没库存</view>
-				</view>
-				<view @tap.stop="changeHasStock(1)" style="margin-bottom:20upx;">
-					<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">有库存</view>
-				</view>
-				<view @tap.stop="changeHasStock(0)" style="margin-bottom:20upx;">
-					<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">重新选</view>
-				</view>
-			</view>
-		</uni-popup>
-
 		<uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
 			<view class="action-popup-container">
 				<view class="action-button-item">
@@ -359,7 +364,6 @@ export default {
 		},
 		changeHasStock(check){
 			this.globalLookStock = check
-			this.$refs.searchOptionRef.close()
 			this.reGetGlobalProductList()
 		},
 		openOption(){
@@ -646,7 +650,7 @@ export default {
 	flex-direction: column;
 	.input-wrap {
 		display: flex;
-		padding: 22upx 20upx 22upx 13upx;
+		padding: 5upx 20upx 22upx 13upx;
 		.search-bar {
 			flex: 1;
 		}
@@ -728,6 +732,93 @@ export default {
 	margin: 0 auto;
 }
 
+.modern-tabs-container {
+  padding: 0;
+  background-color: #f8f9fa;
+  width: 100%;
+}
+
+.modern-tabs {
+  display: flex;
+  background-color: #ffffff;
+  padding: 6upx;
+  box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.06);
+  border: 2upx solid #f0f2f5;
+  position: relative;
+  z-index: 5;
+  width: 100%;
+}
+
+.modern-tab {
+  flex: 1;
+  text-align: center;
+  padding: 16upx 0;
+  position: relative;
+  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
+  border-radius: 12upx;
+  margin: 0 2upx;
+  background-color: #fafafa; /* 未选中态背景 */
+  border: 2upx solid #f2f4f7; /* 未选中态边框 */
+  box-shadow: none;
+  
+  .tab-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .tab-icon {
+    font-size: 32upx;
+    margin-bottom: 4upx;
+    display: block;
+    opacity: 0.85; /* 未选中态图标降低对比 */
+  }
+  
+  &.active .tab-icon {
+    filter: brightness(1.15);
+    opacity: 1;
+  }
+  
+  .tab-text {
+    font-size: 26upx;
+    color: #666;
+    font-weight: 600;
+  }
+  
+  &.active {
+    background: linear-gradient(135deg, #34d399 0%, #09C567 100%); /* 渐变背景 */
+    box-shadow: 0 4upx 12upx rgba(16, 185, 129, 0.25); /* 柔和外发光 */
+    transform: none;
+    border-color: rgba(16, 185, 129, 0.25);
+    
+    .tab-text {
+      color: #ffffff;
+      font-weight: 700;
+      font-size: 28upx;
+    }
+    
+    /* 选中态白色半透明底部指示条 */
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: 6upx;
+      transform: translateX(-50%);
+      width: 40%;
+      height: 6upx;
+      border-radius: 6upx;
+      background: rgba(255, 255, 255, 0.9);
+    }
+  }
+  
+  /* H5 未选中态悬停效果（其它端不影响） */
+  &:not(.active):hover {
+    background-color: #f6f7f9;
+    border-color: #e9ecef;
+  }
+}
+
 .action-button-item {
 	&.cancel {
 		grid-column: 1 / -1;