|
|
@@ -5,35 +5,33 @@
|
|
|
<view class="modern-tabs">
|
|
|
<view class="modern-tab" :class="{ 'active': priceType === -1 }" @click="switchPriceTab(-1)" >
|
|
|
<view class="tab-content">
|
|
|
- <text class="tab-icon">📋</text>
|
|
|
<text class="tab-text">全部</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modern-tab" :class="{ 'active': priceType === 0 }" @click="switchPriceTab(0)" >
|
|
|
<view class="tab-content">
|
|
|
- <text class="tab-icon">🏷️</text>
|
|
|
<text class="tab-text">无价</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="modern-tab" :class="{ 'active': priceType === 1 }" @click="switchPriceTab(1)" >
|
|
|
<view class="tab-content">
|
|
|
- <text class="tab-icon">💰</text>
|
|
|
<text class="tab-text">有价</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="input-wrap" >
|
|
|
+ <view class="input-wrap">
|
|
|
+ <view>
|
|
|
+ <button class="admin-button-com middle blue" style="width:100upx;margin-right:8upx;" @click="">名称</button>
|
|
|
+ <button class="admin-button-com middle default" style="width:100upx;margin-right:8upx;" @click="">编号</button>
|
|
|
+ </view>
|
|
|
<view class="search-bar">
|
|
|
- <app-search-module v-model="searchText" placeholder="输入名称" @input="searchFn" />
|
|
|
+ <app-search-module v-model="searchText" placeholder="输入内容" @input="searchFn" />
|
|
|
</view>
|
|
|
- <view style="padding-left:10upx; display:flex; flex-wrap:nowrap;" class="button-group">
|
|
|
- <button class="admin-button-com middle blue filter-btn" style="margin-right:10upx; width:150upx;" @click.stop="openFilterPanel">
|
|
|
- 筛选
|
|
|
- <text v-if="hasActiveFilters" class="filter-dot"></text>
|
|
|
- </button>
|
|
|
- <button class="admin-button-com middle blue" style="width:150upx;" @click="addGoods()">新增</button>
|
|
|
+ <view>
|
|
|
+ <button class="admin-button-com middle blue" style="margin-right:8upx;margin-left:8upx;width:100upx;" @click="openFilterPanel">筛选</button>
|
|
|
+ <button class="admin-button-com middle blue" style="width:100upx;" @click="addGoods()">新增</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="app-middle">
|
|
|
@@ -458,13 +456,13 @@ export default {
|
|
|
.modern-tab {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
- padding: 16upx 0;
|
|
|
+ padding: 22upx 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; /* 未选中态边框 */
|
|
|
+ background-color: #e4e6e9; /* 未选中态背景 */
|
|
|
+ border: 2upx solid #e4e6e9; /* 未选中态边框 */
|
|
|
box-shadow: none;
|
|
|
|
|
|
.tab-content {
|
|
|
@@ -474,22 +472,10 @@ export default {
|
|
|
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;
|
|
|
+ font-size: 30upx;
|
|
|
color: #666;
|
|
|
- font-weight: 600;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
@@ -501,7 +487,7 @@ export default {
|
|
|
.tab-text {
|
|
|
color: #ffffff;
|
|
|
font-weight: 700;
|
|
|
- font-size: 28upx;
|
|
|
+ font-size: 30upx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -682,25 +668,10 @@ page {
|
|
|
}
|
|
|
.input-wrap {
|
|
|
display: flex;
|
|
|
- padding: 10upx 20upx 22upx 13upx;
|
|
|
+ padding: 10upx 10upx 12upx 13upx;
|
|
|
.search-bar {
|
|
|
flex: 1;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-/* 筛选按钮样式 */
|
|
|
-.filter-btn {
|
|
|
- position: relative;
|
|
|
- .filter-dot {
|
|
|
- position: absolute;
|
|
|
- top: 5upx;
|
|
|
- right: 5upx;
|
|
|
- width: 15upx;
|
|
|
- height: 15upx;
|
|
|
- background-color: white;
|
|
|
- border-radius: 50%;
|
|
|
- animation: filterDotBlink 2s infinite;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
@keyframes filterDotBlink {
|