|
|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
-<view class="app-content" style="background:white;">
|
|
|
+<view class="app-content">
|
|
|
+ <!-- 顶部筛选标签 -->
|
|
|
<view class="modern-tabs-container">
|
|
|
<view class="modern-tabs">
|
|
|
<view class="modern-tab" :class="{ 'active': globalLookStock === 0 }" @click="changeHasStock(0)">
|
|
|
@@ -19,62 +20,80 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 主容器 -->
|
|
|
<view class="billing_box_bg">
|
|
|
- <view class="input-wrap">
|
|
|
- <view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <view class="input-wrap">
|
|
|
+ <view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;">
|
|
|
<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
|
|
|
</view>
|
|
|
<view class="search-bar">
|
|
|
<app-search-module ref="globalSearchRef" v-model="globalPy" placeholder="这里搜索" @input="globalSearch" />
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 主内容区 -->
|
|
|
<view class="scroll-middle_bx">
|
|
|
<scroll-view scroll-y scroll-with-animation class="tab-view">
|
|
|
- <div v-for="(item, index) in globalClassData" :key="index" class="tab-bar-item" :class="[globalClassIndex == index ? 'active' : '']" :data-current="index" @tap.stop="currentSwitchClass(index,item)">
|
|
|
+ <div v-for="(item, index) in globalClassData" :key="index" class="tab-bar-item" :class="[globalClassIndex == index ? 'active' : '']" @tap.stop="currentSwitchClass(index,item)">
|
|
|
<text>{{ item.name || "" }}</text>
|
|
|
</div>
|
|
|
</scroll-view>
|
|
|
- <scroll-view scroll-y class="right-box"
|
|
|
- :scroll-top="globalScrollTopPlace"
|
|
|
- @scroll="globalGetScroll"
|
|
|
- :scroll-into-view="scroll_into_view"
|
|
|
- scroll-with-animation="true"
|
|
|
- lower-threshold="100"
|
|
|
- @scrolltolower="globalScrollBottom">
|
|
|
|
|
|
+ <scroll-view scroll-y class="right-box"
|
|
|
+ :scroll-top="globalScrollTopPlace"
|
|
|
+ @scroll="globalGetScroll"
|
|
|
+ :scroll-into-view="scroll_into_view"
|
|
|
+ scroll-with-animation="true"
|
|
|
+ lower-threshold="100"
|
|
|
+ @scrolltolower="globalScrollBottom">
|
|
|
+
|
|
|
+ <!-- 内容列表 -->
|
|
|
<block v-if="!$util.isEmpty(globalItemData)">
|
|
|
- <view class="item_list_bx selectAll">
|
|
|
- <view v-if="!$util.isEmpty(globalItemData)">
|
|
|
- <template v-for="(productItem, productIndex) in globalItemData">
|
|
|
- <view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
|
|
|
- <view style="height:190upx" :key="productIndex">
|
|
|
- <ItemComponent :isPrice="false" :info="productItem" @saveStock="saveStock" :ref="`productRef${productItem.id}`"
|
|
|
- @hideChangeFn="hideChangeFn" @cancelPreSellFn="cancelPreSellFn">
|
|
|
- </ItemComponent>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-else>
|
|
|
- <view style="height:260upx;text-align:center;color:#CCCCCC;position: relative;">
|
|
|
- <view style="position: absolute;margin:auto;top:130upx;left:0;right:0;bottom:0;">暂无花材</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="item_list_bx">
|
|
|
+ <!-- 按分类分组显示 -->
|
|
|
+ <view v-for="(groupData, groupIndex) in itemGroups" :key="groupIndex">
|
|
|
+ <!-- 分类标题 + 全选按钮 -->
|
|
|
+ <view class="item_list_title" v-if="groupData.className">
|
|
|
+ <view class="title-row">
|
|
|
+ <text class="class-name">{{ groupData.className }}</text>
|
|
|
+ <text class="select-all-btn" @click.stop="toggleGroupSelection(groupIndex)">
|
|
|
+ {{ isGroupAllSelected(groupIndex) ? '全不选' : '全选' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
+ <!-- 分类下的商品 -->
|
|
|
+ <view v-for="(productItem, itemIndex) in groupData.items" :key="productItem.id" style="height:190upx">
|
|
|
+ <ItemComponent
|
|
|
+ :isPrice="false"
|
|
|
+ :info="productItem"
|
|
|
+ :isChecked="isItemChecked(productItem.id)"
|
|
|
+ @checkChange="handleItemCheck(productItem, $event)"
|
|
|
+ @hideChangeFn="hideChangeFn"
|
|
|
+ @cancelPreSellFn="cancelPreSellFn">
|
|
|
+ </ItemComponent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</block>
|
|
|
+ <!-- 空状态 -->
|
|
|
<block v-else>
|
|
|
<view style="width: 100%">
|
|
|
- <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(globalItemData)"/>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(globalItemData)"/>
|
|
|
</view>
|
|
|
</block>
|
|
|
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
|
|
|
- <div class="app-footer">
|
|
|
- <button class="admin-button-com big blue" @click="commitPrice">批量隐藏</button>
|
|
|
- </div>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="app-footer">
|
|
|
+ <button class="admin-button-com big blue" @click="commitPrice">批量隐藏 ({{ selectedCount }})</button>
|
|
|
+ </div>
|
|
|
|
|
|
+ <!-- 分类选择弹窗 -->
|
|
|
<uni-popup ref="globalClassImgRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
|
|
|
<view v-for="(item, index) in globalClassData" :key="index" @tap.stop="currentChangeClass(index,item)" style="margin-bottom:20upx;margin-left:3upx;">
|
|
|
@@ -84,22 +103,21 @@
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
- <image v-if="showClassRemind" @click="hideClassRemind" style="position:absolute;width:610upx;height:699upx;top:225upx;left:80upx;z-index:9999;" :src="`${constant.imgUrl}/class_remind.png`"></image>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import AppSearchModule from "@/components/module/app-search";
|
|
|
import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
import ItemComponent from "./components/changeHide";
|
|
|
import productMins from "@/mixins/product2";
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import { checkOrderApi } from "@/api/inventory";
|
|
|
-import { changeFrontHide } from "@/api/item";
|
|
|
+import { changeFrontHide, batchStopItem } from "@/api/item";
|
|
|
import { cancelPreSell } from '@/api/product'
|
|
|
+
|
|
|
export default {
|
|
|
- name: "item_list",
|
|
|
+ name: "changeHide",
|
|
|
components: {
|
|
|
AppSearchModule,
|
|
|
AppWrapperEmpty,
|
|
|
@@ -110,100 +128,143 @@ export default {
|
|
|
return {
|
|
|
autoLoad: false,
|
|
|
selectJobType: "stock",
|
|
|
- tabIndex: 0,
|
|
|
- stockArr:[],
|
|
|
- showClassRemind:false
|
|
|
+ selectedIdsSet: new Set()
|
|
|
};
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
...mapGetters(["getMyShopInfo","getLoginInfo"]),
|
|
|
+
|
|
|
+ selectedCount() {
|
|
|
+ return this.selectedIdsSet.size;
|
|
|
+ },
|
|
|
+
|
|
|
+ itemGroups() {
|
|
|
+ if (this.$util.isEmpty(this.globalItemData)) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+
|
|
|
+ const groups = [];
|
|
|
+ let currentGroup = null;
|
|
|
+
|
|
|
+ this.globalItemData.forEach((item) => {
|
|
|
+ if (item.className && item.className !== '') {
|
|
|
+ currentGroup = {
|
|
|
+ className: item.className,
|
|
|
+ items: [item]
|
|
|
+ };
|
|
|
+ groups.push(currentGroup);
|
|
|
+ } else if (currentGroup) {
|
|
|
+ currentGroup.items.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return groups;
|
|
|
+ }
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.initProduct()
|
|
|
},
|
|
|
methods: {
|
|
|
+ isItemChecked(itemId) {
|
|
|
+ return this.selectedIdsSet.has(itemId);
|
|
|
+ },
|
|
|
+
|
|
|
+ handleItemCheck(productItem, isChecked) {
|
|
|
+ const id = productItem.id;
|
|
|
+ if (isChecked) {
|
|
|
+ this.selectedIdsSet.add(id);
|
|
|
+ } else {
|
|
|
+ this.selectedIdsSet.delete(id);
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+
|
|
|
+ isGroupAllSelected(groupIndex) {
|
|
|
+ const group = this.itemGroups[groupIndex];
|
|
|
+ if (!group || group.items.length === 0) return false;
|
|
|
+
|
|
|
+ return group.items.every(item => this.selectedIdsSet.has(item.id));
|
|
|
+ },
|
|
|
+
|
|
|
+ toggleGroupSelection(groupIndex) {
|
|
|
+ const group = this.itemGroups[groupIndex];
|
|
|
+ if (!group) return;
|
|
|
+
|
|
|
+ const isAllSelected = this.isGroupAllSelected(groupIndex);
|
|
|
+
|
|
|
+ group.items.forEach(item => {
|
|
|
+ if (isAllSelected) {
|
|
|
+ this.selectedIdsSet.delete(item.id);
|
|
|
+ } else {
|
|
|
+ this.selectedIdsSet.add(item.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+
|
|
|
selectFlowerNumFn(){
|
|
|
this.$refs.globalClassImgRef.open('top')
|
|
|
},
|
|
|
+
|
|
|
changeHasStock(check){
|
|
|
this.globalLookStock = check
|
|
|
this.reGetGlobalProductList()
|
|
|
},
|
|
|
- hideClassRemind(){
|
|
|
- },
|
|
|
+
|
|
|
cancelPreSellFn(item){
|
|
|
- let that = this
|
|
|
this.$util.confirmModal({content:'确认取消预售？'},() => {
|
|
|
cancelPreSell({id:item.id}).then(res=>{
|
|
|
if(res.code == 1){
|
|
|
- that.$msg(res.msg)
|
|
|
+ this.$msg(res.msg)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
hideChangeFn(item,status){
|
|
|
- let that = this
|
|
|
changeFrontHide({id:item.id,status:status}).then(res=>{
|
|
|
if(res.code == 1){
|
|
|
- that.$refs[`productRef${item.id}`][0].frontHide = status
|
|
|
+ this.$msg('操作成功')
|
|
|
+ item.frontHide = status
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
initProduct(){
|
|
|
this.globalRequestType = 'itemList'
|
|
|
this.initData()
|
|
|
uni.hideLoading()
|
|
|
},
|
|
|
+
|
|
|
commitPrice(){
|
|
|
- let that = this
|
|
|
- if(this.stockArr.length == 0){
|
|
|
- this.$msg('没有修改')
|
|
|
+ if(this.selectedIdsSet.size === 0){
|
|
|
+ this.$msg('请选择花材')
|
|
|
return;
|
|
|
}
|
|
|
- this.$util.confirmModal({content:'确认修改？'},() => {
|
|
|
- that.commitChange()
|
|
|
+ this.$util.confirmModal({content:'确认批量隐藏 ' + this.selectedIdsSet.size + ' 个花材？'},() => {
|
|
|
+ this.commitChange()
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
commitChange(){
|
|
|
- let that = this
|
|
|
- let data = JSON.stringify(this.stockArr);
|
|
|
- checkOrderApi({pdType:'',itemInfo:data,remark:'修改库存'}).then(res => {
|
|
|
+ const ids = Array.from(this.selectedIdsSet);
|
|
|
+ batchStopItem({ids:JSON.stringify(ids)}).then(res=>{
|
|
|
if(res.code == 1){
|
|
|
- that.clearPrice()
|
|
|
- that.reGetGlobalProductList()
|
|
|
+ this.selectedIdsSet.clear()
|
|
|
+ this.$msg(res.msg)
|
|
|
+ this.reGetGlobalProductList()
|
|
|
}
|
|
|
- this.$msg(res.msg)
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
currentSwitchClass(index,item){
|
|
|
- this.clearPrice()
|
|
|
this.globalSwitchClass(index,item)
|
|
|
},
|
|
|
+
|
|
|
currentChangeClass(index,item){
|
|
|
- this.clearPrice()
|
|
|
- this.globalChangeClass(index,item)
|
|
|
- },
|
|
|
- clearPrice(){
|
|
|
- let that = this
|
|
|
- this.stockArr.forEach(function(value,index,array){
|
|
|
- that.$refs[`productRef${value.productId}`][0].modifyStock = ''
|
|
|
- })
|
|
|
- that.stockArr = []
|
|
|
- },
|
|
|
- saveStock(stock,id){
|
|
|
- if(this.stockArr.length > 0){
|
|
|
- this.stockArr.forEach(function(value,index,array){
|
|
|
- if(value.productId == id){
|
|
|
- array.splice(index,1)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- this.stockArr.push({productId:id,bigNum:stock,smallNum:null})
|
|
|
- },
|
|
|
- affirm(val) {
|
|
|
- if (val.index === 0) {
|
|
|
- this.modalCancel();
|
|
|
- }
|
|
|
+ this.$refs.globalClassImgRef.close()
|
|
|
+ this.globalSwitchClass(index,item)
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -215,10 +276,66 @@ export default {
|
|
|
flex-direction: column;
|
|
|
height: 100vh;
|
|
|
overflow: hidden;
|
|
|
+ background: white;
|
|
|
}
|
|
|
|
|
|
.modern-tabs-container {
|
|
|
flex-shrink: 0;
|
|
|
+ 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: 30upx 0;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
+ border-radius: 12upx;
|
|
|
+ margin: 0 2upx;
|
|
|
+ background-color: #e2dfdf;
|
|
|
+ border: 2upx solid #f2f4f7;
|
|
|
+ box-shadow: none;
|
|
|
+
|
|
|
+ .tab-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #3385FF;
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(.active):hover {
|
|
|
+ background-color: #f6f7f9;
|
|
|
+ border-color: #e9ecef;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.billing_box_bg {
|
|
|
@@ -227,38 +344,30 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.input-wrap {
|
|
|
display: flex;
|
|
|
padding: 22upx 20upx 22upx 13upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
.search-bar {
|
|
|
flex: 1;
|
|
|
}
|
|
|
- .city-select {
|
|
|
- display: flex;
|
|
|
- flex-shrink: 0;
|
|
|
- align-items: center;
|
|
|
- margin-right: 15upx;
|
|
|
- margin-left: 45upx;
|
|
|
- background-color: #ffff;
|
|
|
- .iconfont {
|
|
|
- margin-left: 20upx;
|
|
|
- font-size: 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
+
|
|
|
.scroll-middle_bx {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.tab-view {
|
|
|
- padding-bottom:100upx;
|
|
|
- // height: calc(100vh - 140upx);
|
|
|
width: 170upx;
|
|
|
flex-shrink: 0;
|
|
|
background-color: #f0f2f6;
|
|
|
+ padding-bottom: 100upx;
|
|
|
+
|
|
|
.tab-bar-item {
|
|
|
position: relative;
|
|
|
width: 170upx;
|
|
|
@@ -270,160 +379,80 @@ export default {
|
|
|
font-size: 26upx;
|
|
|
color: #444;
|
|
|
font-weight: 400;
|
|
|
- .tag {
|
|
|
- display: flex;
|
|
|
- padding: 0 20upx;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- height: 32upx;
|
|
|
- background: #ff2842;
|
|
|
- border-radius: 16upx;
|
|
|
- color: #fff;
|
|
|
- font-size: 20upx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 110upx;
|
|
|
}
|
|
|
- &:last-child{
|
|
|
- margin-bottom: 110upx;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .active {
|
|
|
- position: relative;
|
|
|
- color: $mainColor;
|
|
|
- font-size: 26upx;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+ &.active {
|
|
|
+ position: relative;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 26upx;
|
|
|
+ background: #fff;
|
|
|
|
|
|
- .active::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- border-left: 8upx solid $mainColor;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-left: 8upx solid $mainColor;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.right-box {
|
|
|
- // height: calc(100vh - 200upx);
|
|
|
flex: 1;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.item_list_bx {
|
|
|
padding: 40upx 16upx;
|
|
|
+
|
|
|
+ .item_list_title {
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #3385FF;
|
|
|
+
|
|
|
+ .title-row {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-name {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-all-btn {
|
|
|
+ color: #3385FF;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 8upx 16upx;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: #E8F2FF;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .item_list_title {
|
|
|
- margin-bottom: 20upx;
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #3385FF;
|
|
|
- }
|
|
|
- .select-cmd_bx {
|
|
|
- & .kc {
|
|
|
- color: #999999;
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 400;
|
|
|
- margin-bottom: 60upx;
|
|
|
- text-align: center;
|
|
|
- margin-top: 10upx;
|
|
|
- }
|
|
|
- & .num_bx {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 80upx;
|
|
|
- & > input {
|
|
|
- width: 212upx;
|
|
|
- height: 80upx;
|
|
|
- border: 1upx solid #dddddd;
|
|
|
- border-radius: 4upx;
|
|
|
- text-align: center;
|
|
|
- margin-right: 24upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
.app-footer {
|
|
|
justify-content: space-evenly;
|
|
|
z-index: 9999;
|
|
|
- .admin-button-com {
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
- button{
|
|
|
- width:600upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 20upx;
|
|
|
+ background: white;
|
|
|
+ box-shadow: 0 -2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 600upx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.class-popup-style{
|
|
|
- z-index:999999;
|
|
|
-}
|
|
|
-
|
|
|
-.modern-tabs-container {
|
|
|
- padding: 0;
|
|
|
- background-color: #f8f9fa;
|
|
|
- width: 100%;
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 30upx 0;
|
|
|
- position: relative;
|
|
|
- transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
- border-radius: 12upx;
|
|
|
- margin: 0 2upx;
|
|
|
- background-color: #e2dfdf; /* 未选中态背景 */
|
|
|
- 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: 30upx;
|
|
|
- color: #666;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #3385FF;
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- color: #ffffff;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* H5 未选中态悬停效果（其它端不影响） */
|
|
|
- &:not(.active):hover {
|
|
|
- background-color: #f6f7f9;
|
|
|
- border-color: #e9ecef;
|
|
|
- }
|
|
|
+.class-popup-style {
|
|
|
+ z-index: 999999;
|
|
|
}
|
|
|
</style>
|
