<template>
	<div :style="{
      'background-color': '#f6f6f6',
      height: contentHeight + 'px',
      overflow: 'hidden',
      '--main-color': '#017EDF',
    }">
		<view :class="[FilterCriShow?'FilterBgBox':'']">
			<view class="brandHeadBgBox"
				:style="{'background': TenantId!=18?`linear-gradient(-3deg, #eff8ff, #c6e6ff)`:''}">
				<headers :title="replace.state=='1'?'品牌列表':'企业列表'"></headers>
				<view v-if="TenantId==18" style="padding: 5px 10px">
					<u-search placeholder="搜索名称" :focus="false" :show-action="false" :clearabled="true" radius="40"
						v-model="msg.BrandName" @search="searchHandler" @custom="searchHandler"
						bg-color="#FFF"></u-search>
				</view>
				<view v-else style="display: flex;justify-content: space-between;align-items: center;">
					<view class="brandSearch" style="padding: 5px 10px;margin-top: 6rpx;flex: 1;">
						<template v-if="iscpswjselectall==1&&replace.state=='1'">
							<view class="brandSearch-left">
								<uni-section title="" type="line">
									<uni-data-select v-model="msg.MallBaseId" :localdata="ShopTypeList" :clear="false"
										@change="ResetQuery"></uni-data-select>
								</uni-section>
							</view>
							<view class="brandSearch-auto"></view>
						</template>
						<view class="brandSearch-right">
							<input v-model="msg.BrandName" :placeholder="`搜索${replace.state=='1'?'品牌':'企业'}名称`"
								@input="ResetQuery"></input>
						</view>
					</view>
					<view class="brandFilter" v-if="replace.state=='1'" @click="FilterCriShow=!FilterCriShow">
						<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/filterIcon.png" />
						<span>筛选</span>
					</view>
				</view>
				<template v-if="TenantId==18">
					<!-- 	<view style="display: flex; align-items: center">
						<view style="flex: 1; overflow: hidden">
							<u-tabs bg-color="#f6f6f6" :is-scroll="true" name="ClassName" :list="typeList"
								:active-color="'#017EDF'" :current="active" @change="changeHandler" :show-bar="true"
								:activeFontSize="34" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
						</view>
					</view> -->
					<view
						style="display: flex; align-items: center; flex-shrink: 0; width: 100%; flex-wrap: nowrap; overflow: visible;">
						<view style="flex: 1; min-width: 0;">
							<u-dropdown ref="uDropdown" @open="openBrand" @close="closeBrand" active-color="#000"
								inactive-color="#444">
								<u-dropdown-item :title="selectedBrandClass">
									<view
										style="display: flex; flex-direction: column; height: 600rpx; background: #fff; border-radius: 16rpx 16rpx 0 0; box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08); width: 100%;">
										<view style="flex: 1; display: flex;">
											<scroll-view scroll-y
												style="width: 200rpx; height: 500rpx; background: #f5f5f5; border-right: 1rpx solid #e0e0e0; flex-shrink: 0;">
												<view v-for="item in treeList" :key="item.value"
													:class="['cat-level1', selectedBrandClass === item.label ? 'active' : '']"
													@click="changeBrand(item)">
													{{ item.label }}
												</view>
											</scroll-view>
											<scroll-view scroll-y
												style="flex: 1; height: 500rpx; padding: 0 24rpx; box-sizing: border-box; background: #f5f5f5; width: 0; min-width: 0;">
												<view v-if="selectedSubClass && selectedSubClass.length > 0"
													style="display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; gap: 16rpx;">
													<view v-for="sub in selectedSubClass" :key="sub.value"
														class="cat-card"
														:class="msg.BrandClassId === sub.value ? 'active' : ''"
														@click="changeBrandSub(sub)">
										 
														<view
															style="padding: 12rpx 0; font-size: 24rpx; color: #333; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
															{{ sub.label }}
														</view>
													</view>
												</view>
											</scroll-view>
										</view>
										<view
											style="display: flex; padding: 16rpx 24rpx; border-top: 1rpx solid #eee; flex-shrink: 0;">
											<view
												style="flex: 1; height: 72rpx; background: #f5f5f5; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; margin-right: 16rpx;"
												@click="resetBrand">重置</view>
											<view
												:style="{
													'flex': '1',
													'height': '72rpx',
													'background': '#017EDF',
													'border-radius': '10rpx',
													'display': 'flex',
													'align-items': 'center',
													'justify-content': 'center',
													'font-size': '28rpx',
													'color': '#fff'
												}"
												@click="confirmBrand">确认</view>
										</view>
									</view>
								</u-dropdown-item>
								<u-dropdown-item :title="chengduTitle">
									<view style="padding: 24rpx; background: #fff; width: 100%;">
										<view style="display: flex; flex-direction: row; gap: 16rpx;">
											<view
												style="flex: 1; padding: 16rpx 20rpx; background: #fff; border-radius: 8rpx; border: 1rpx solid #e0e0e0; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
												:class="msg.IsInChengdu == 0 ? 'active-option' : ''"
												@click="changeFirstStoreTest(0)">
												<text style="flex: 1; font-size: 24rpx; color: #333; text-align: center;">未在成都落地</text>
												<u-icon v-if="msg.IsInChengdu == 0" name="checkmark" :color="'#017EDF'"
													size="32"></u-icon>
											</view>
											<view
												style="flex: 1; padding: 16rpx 20rpx; background: #fff; border-radius: 8rpx; border: 1rpx solid #e0e0e0; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"
												:class="msg.IsInChengdu == 1 ? 'active-option' : ''"
												@click="changeFirstStoreTest(1)">
												<text style="flex: 1; font-size: 24rpx; color: #333; text-align: center;">成都落地</text>
												<u-icon v-if="msg.IsInChengdu == 1" name="checkmark" :color="'#017EDF'"
													size="32"></u-icon>
											</view>
										</view>
										<view style="display: flex; margin-top: 24rpx; gap: 16rpx;">
											<view
												style="flex: 1; height: 72rpx; background: #f5f5f5; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx;"
												@click="resetChengdu">重置</view>
											<view
												:style="{
													'flex': '1',
													'height': '72rpx',
													'background': '#017EDF',
													'border-radius': '10rpx',
													'display': 'flex',
													'align-items': 'center',
													'justify-content': 'center',
													'font-size': '28rpx',
													'color': '#fff'
												}"
												@click="confirmChengdu">确认</view>
										</view>
									</view>
								</u-dropdown-item>
								<u-dropdown-item :title="prizeTitle" v-if="PrizeList.length > 0">
									<view style="padding: 24rpx; background: #fff; width: 100%;">
										<view style="display: flex; flex-wrap: wrap; gap: 20rpx;">
											<view v-for="(item, index) in PrizeList" :key="index"
												style="width: calc(50% - 10rpx); padding: 24rpx; background: #f5f5f5; border-radius: 12rpx;"
												:class="item.Id == msg.PrizeId ? 'active' : ''"
												@click="chooseYear(item)">
												<view style="text-align: center;">
													<view style="font-size: 28rpx; color: #333; font-weight: 600;">
														{{ item.YearInfo }}</view>
													<view style="font-size: 24rpx; color: #999; margin-top: 8rpx;">
														{{ item.Name }}</view>
												</view>
											</view>
										</view>
									</view>
								</u-dropdown-item>
							</u-dropdown>
						</view>
					</view>
				</template>
				<view v-else style="display: flex; align-items: center;padding: 28rpx 0;">
					<view v-if="!FilterCriShow" style="flex: 1; overflow: hidden;padding-left: 32rpx;"
						class="brandTabBox">
						<u-tabs bg-color="none" :is-scroll="true" name="ClassName" :list="typeList"
							:active-color="'#017EDF'" inactive-color="#000000" :active-item-style="activeItemStyleBrand"
							:current="active" @change="changeHandler" :show-bar="false" :activeFontSize="28"
							:bold="true" height="45" duration="0" font-size="26" gutter="29"
							class="custom-tab-list"></u-tabs>
					</view>
					<view v-else class="FilterCriBox">
						<view>
							<text>面积需求</text>
							<view class="FilterCriInput">
								<view class="FilterCriNumL">
									<view class="FilterCriNum">
										<input type="number" v-model="msg.MixAreaRequirement" @blur='getMixArea' />
									</view>
									<view></view>
									<view class="FilterCriNum">
										<input type="number" v-model="msg.MaxAreaRequirement" @blur='getMixArea' />
									</view>
								</view>
								<span>㎡</span>
							</view>
						</view>
						<view style="padding-top:40rpx">
							<text>店铺数量</text>
							<view class="FilterCriInput">
								<view class="FilterCriNumL">
									<view class="FilterCriNum">
										<input type="number" v-model="msg.MixShopNum" @blur='getMixArea' />
									</view>
									<view></view>
									<view class="FilterCriNum">
										<input type="number" v-model="msg.MaxShopNum" @blur='getMixArea' />
									</view>
								</view>
								<span>个</span>
							</view>
						</view>
						<view class="FilterCri_b">
							<view class="FilterCri_b_item" @click="resetQuantity">
								<text>重 置</text>
							</view>
							<view class="FilterCri_b_item" @click="sure">
								<text>确 认</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="FilterCriShow" class="FilterBg" @click="FilterCriShow=false"></view>
		</view>

		<u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>
		<view style=" padding: 2px 10px" :style="{ height: TenantId==18?'calc(100% - 127px)':'calc(100% - 192px)'}"
			v-if="g.length > 0" :class="[FilterCriShow?'FilterCenter':'']">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%; padding-bottom: 0px;padding-top: 20rpx;">
				<u-row v-if="TenantId==18" gutter="24">
					<u-col span="6" v-for="(x, i) in g" :key="i">
						<view class="good_study_two" @click="openGood(x.ID)" :style="{ borderRadius: '20rpx' }">
							<view class="img-box">
								<view class="img-show">
									<image style="
                      width: 100%;
                      height: 100%;
                      border-radius: 20rpx 20rpx 0 0;
                    " mode="aspectFill" :src="x.BannerList[0]" />
								</view>
								<view class="img-show-prize" v-if="x.ListEnroll[0]">
									<image style="width: 100%; height: 100%" mode="heightFix"
										:src="x.ListEnroll[0].MedalImage" />
								</view>
							</view>
							<view class="good-info">
								<view class="good-name">{{ x.BrandName }}</view>
								<view class="good-price-info">
									<span class="price">{{ x.FullBrandName }}</span>
								</view>
							</view>
						</view>
					</u-col>
				</u-row>
				<template v-else>
					<brandComponent v-if="g&&g.length>0" :g="g"></brandComponent>
				</template>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#f6f6f6" />
				<view style="width: 100%;height: 30px;"></view>
			</scroll-view>
		</view>

		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
	</div>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import tabbars from "@/components/tabbar/index";
	import headers from "@/components/header/header";
	import brandComponent from "./brandComponent";
	export default {
		components: {
			tabbars,
			auth,
			headers,
			brandComponent
		},
		data() {
			return {
				showAuth: false,
				u: {},
				active: 0,
				searchKey: "",
				typeList: [],
				msg: {
					pageIndex: 1,
					pageSize: 20,
					BrandName: "",
					ProjectType: 0,
					Plumbing: -1,
					Caliber: -1,
					Sewage: -1,
					RanQi: -1,
					DianLiang: "",
					PaiYan: -1,
					KongTiao: -1,
					XinFeng: -1,
					BrandClassId: 0,
					PrizeId: 0, //
					IsInChengdu: -1, //是否已在成都落地
					BrandEnterpriseType: null,
					MallBaseId: 0,
					TenantId: 0,
					MixShopNum: '',
					MaxShopNum: '',
					MixAreaRequirement: '',
					MaxAreaRequirement: '',
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				page_count: 1,
				status: "loadmore",
				g: [],
				contentHeight: 0,
				PrizeList: [], //首店年份列表
				activeItemStyleBrand: {
					"font-size": "23rpx",
					"font-family": "PingFang SC",
					"font-weight": "Bold",
					color: "#017EDF",
					"border": "1rpx solid #017EDF",
					"border-radius": "10rpx",
					"height": "50rpx",
					"line-height": "45rpx",
					"padding": "0 22rpx",
					"background": "#FFF"
				},
				TenantId: null,
				replace: {
					state: "1", //1-品牌，2-企业服务
				},
				secondary: null,
				GetYBConfig: null,
				iscpswjselectall: 0,
				ShopTypeList: [],
				FilterCriShow: false,
				treeList: [],
				selectedBrandClass: "分类筛选",
				brandDropdownOpen: false,
				selectedSubClass: null,
			};
		},
		onShareTimeline() {
			//朋友圈
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
			return {
				title: "品牌列表",
				query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up,
				imageUrl: "",
			};
		},
		onShareAppMessage(res) {
			//朋友
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
			return {
				title: "品牌列表",
				path: "/pages/kotra/brand/list?user_id=" +
					uid +
					"&SmallShopId=" +
					SmallShopId +
					"&Up=" +
					Up,
				imageUrl: "",
			};
		},
		onLoad(options) {
			this.iscpswjselectall = uni.getStorageSync("basedata").iscpswjselectall
			let uid = uni.getStorageSync("mall_UserInfo")
			this.TenantId = uid.TenantId
			let tempReplace = uni.getStorageSync('replace_page_index')
			if (tempReplace && tempReplace.state) {
				this.replace.state = tempReplace.state;
			}
			this.msg.BrandEnterpriseType = this.replace.state == '1' ? 1 : 2
			if (options && options.id) {
				this.msg.BrandClassId = options.id;
			}
			// this.u = uni.getStorageSync("mall_UserInfo");
			// if (!this.u) {
			//   this.u = {
			//     nickName: "未登录",
			//     avatarUrl: "",
			//   };
			//     this.showAuth = true;
			// } else {
			this.GetBrandClassList();
			this.getBrandClassTree();
			this.getPrizeList();
			this.init();
			// }
		},
		created() {
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "品牌列表",
			});
			let c = this.$uiConfig.is_bang ? 78 : 50;
			this.contentHeight = this.$utils.calcContentHeight(c) + 40;
		},
		computed: {
			chengduTitle() {
				if (this.msg.IsInChengdu == 1) return '成都落地';
				if (this.msg.IsInChengdu == 0) return '未在成都落地';
				return '落地状态';
			},
			prizeTitle() {
				if (this.msg.PrizeId) {
					let item = this.PrizeList.find(x => x.Id == this.msg.PrizeId);
					return item ? item.YearInfo : '年份';
				}
				return '年份';
			}
		},
		methods: {
			openBrand() {
				this.brandDropdownOpen = true;
			},
			closeBrand() {
				this.brandDropdownOpen = false;
			},
			changeBrand(item) {
				this.selectedBrandClass = item.label;
				this.selectedSubClass = item.children && item.children.length > 0 ? item.children : null;
				if (!this.selectedSubClass) {
					this.msg.BrandClassId = item.value;
				}
			},
			changeBrandSub(sub) {
				this.msg.BrandClassId = sub.value;
			},
			resetBrand() {
				this.selectedBrandClass = "分类筛选";
				this.selectedSubClass = null;
				this.msg.BrandClassId = 0;
				this.g = [];
				this.msg.pageIndex = 1;
				this.$refs.uDropdown.close();
				this.init();
			},
			confirmBrand() {
				this.g = [];
				this.msg.pageIndex = 1;
				this.$refs.uDropdown.close();
				this.init();
			},
			resetChengdu() {
				this.msg.IsInChengdu = -1;
				this.g = [];
				this.msg.pageIndex = 1;
				this.$refs.uDropdown.close();
				this.init();
			},
			confirmChengdu() {
				this.g = [];
				this.msg.pageIndex = 1;
				this.$refs.uDropdown.close();
				this.init();
			},
			getMixArea(type) {
				if (this.msg.MaxAreaRequirement != '') {
					if (this.msg.MaxAreaRequirement < this.msg.MixAreaRequirement) {
						uni.showToast({
							title: "不能小于" + this.msg.MixAreaRequirement + '面积',
							icon: 'none'
						})
						this.msg.MaxAreaRequirement = this.msg.MixAreaRequirement
					}
				}
				if (this.msg.MaxShopNum != '') {
					if (this.msg.MaxShopNum < this.msg.MixShopNum) {
						uni.showToast({
							title: "不能小于" + this.msg.MixShopNum + '个',
							icon: 'none'
						})
						this.msg.MaxShopNum = this.msg.MixShopNum
					}
				}
			},
			sure() {
				this.getMixArea()
				this.g = []
				this.FilterCriShow = false
				this.msg.pageIndex = 1
				this.init()
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.msg.BrandName = ''
				this.GetBrandClassList();
				this.getPrizeList();
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false
			},
			GetBrandClassList() {
				let BrandCategory = ''
				if (this.TenantId != 18) BrandCategory = this.replace.state == '1' ? 3 : 4
				this.request2({
						url: "/api/AppletTrade/GetBrandClassList",
						data: {
							BrandCategory
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							let obj = {
								ID: 0,
								ClassName: "全部",
							};
							this.typeList = res.data;
							this.typeList.unshift(obj);
							if (this.msg.BrandClassId == 0) {
								this.msg.BrandClassId = this.typeList[0].ID;
							} else {
								//指定跳入分类
								this.typeList.map((x, i) => {
									if (x.ID == this.msg.BrandClassId) {
										this.active = i;
										return;
									}
								});
							}
						}
					}
				);
				this.request2({
						url: "/api/AppletTrade/GetYBConfig",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.GetYBConfig = res.data
							res.data.mallBaselList.forEach(x => {
								let obj = {
									text: x.Name,
									value: x.MallBaseId
								}
								this.ShopTypeList.push(obj)
							})
						}
					}
				);
				
			},
			//获取分类树形结构
			getBrandClassTree() {
				let BrandCategory = 3
				this.request2({
						url: "/api/AppletTrade/GetBrandClassTreeList",
						data: {
							BrandCategory
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.treeList = res.data;
							if (res.data && res.data.length > 0) {
								let first = res.data[0];
								if(this.msg.BrandClassId){
									let item = res.data.find(x => x.value == this.msg.BrandClassId);
									if(item){
										first = item;
									}
									this.selectedBrandClass=item.label;
								}
								this.selectedSubClass = first.children && first.children.length > 0 ? first.children :
									null;
							}
						}
					}
				);
			},
			resetQuantity() {
				this.g = []
				this.msg.pageIndex = 1
				this.msg.MixShopNum = ''
				this.msg.MaxShopNum = ''
				this.msg.MixAreaRequirement = ''
				this.msg.MaxAreaRequirement = ''
				this.FilterCriShow = false
				this.init();
			},
			ResetQuery() {
				this.g = []
				this.msg.pageIndex = 1
				this.init()
			},
			init() {
				let url = "/api/AppletTrade/GetBrandPageList"
				if (this.TenantId != 18 && this.replace.state) {
					if (this.replace.state == '1') {
						url = "/api/AppletTrade/GetAllBrandEnterprisePageList"
					} else {
						url = "/api/AppletTrade/GetEnterpriseServicesPageList"
					}
				}
				this.request2({
						url: url,
						data: this.msg,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			changeHandler(i) {
				this.active = i;
				this.msg.BrandClassId = this.typeList[i].ID;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
			},
			openGood(id) {
				uni.navigateTo({
					url: "/pages/kotra/brand/detail?id=" + id,
				});
			},
			searchHandler(val) {
				// this.u = uni.getStorageSync("mall_UserInfo");
				// if (!this.u) {
				//   this.u = {
				//     nickName: "未登录",
				//     avatarUrl: "",
				//   };
				//     this.showAuth = true;
				// } else {
				this.msg.BrandName = val;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
				// }
			},
			getPrizeList() {
				this.request2({
						url: "/api/AppletTrade/GetPrizePageList",
						data: this.msg,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.PrizeList = res.data;
						}
					}
				);
			},
			chooseYear(item) {
				if (this.msg.PrizeId == item.Id) {
					this.msg.PrizeId = 0;
				} else {
					this.msg.PrizeId = item.Id;
				}
				this.g = [];
				this.msg.pageIndex = 1;
				this.$refs.uDropdown.close();
				this.init();
			},
			changeFirstStoreTest(i) {
				this.msg.IsInChengdu = i;
				this.msg.pageIndex = 1;
				this.g = [];
				this.$refs.uDropdown.close();
				this.init();
			},
		},
	};
</script>

<style>
	.FilterCenter {
		width: 100%;
		position: fixed;
		top: 323rpx;
	}

	.FilterBg {
		width: 100%;
		height: 100%;
		background: rgba(23, 23, 23, 0.5);
		position: fixed;
	}

	.FilterBgBox .brandHeadBgBox {
		position: relative;
		z-index: 1;
	}

	.FilterBgBox {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 1;
	}

	.FilterCri_b_item text {
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 90rpx;
	}

	.FilterCri_b_item:nth-child(2) text {
		color: #fff;
	}

	.FilterCri_b_item+.FilterCri_b_item {
		background: #017EDF;
	}

	.FilterCri_b_item {
		width: 316rpx;
		height: 90rpx;
		background: #F7FBFF;
		border-radius: 18rpx;
		border: 2rpx solid #C6DEF1;
		text-align: center;
	}

	.FilterCri_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 57rpx;
		padding-bottom: 20rpx;
	}

	.FilterCriInput span {
		jsustify-content: end;
	}

	.FilterCriNum input {
		height: 100%;
		line-height: 86rpx;
	}

	.FilterCriNum {
		width: 269rpx;
		height: 86rpx;
		border-radius: 18rpx;
		background: #F4FAFF;
		border: 2rpx solid #017EDF;
		padding: 0 33rpx;
	}

	.FilterCriNumL view:nth-child(2) {
		width: 23rpx;
		height: 2px;
		background: #C6DEF1;
		margin: 0 26rpx;
	}

	.FilterCriInput,
	.FilterCriNumL {
		display: flex;
		align-items: center;
	}

	.FilterCriInput {
		justify-content: space-between;
	}

	.FilterCriBox text {
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 30rpx;
		display: block;
	}

	.FilterCriBox {
		width: 100%;
		padding: 0 42rpx;
	}

	.brandFilter {
		flex-shrink: 0;
		margin-right: 37rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 38rpx 0 0 0;
	}

	.brandFilter img {
		width: 32rpx;
		height: 32rpx;
	}

	.brandFilter span {
		font-size: 22rpx
	}

	.brandSearch-auto {
		width: 2rpx;
		height: 40rpx;
		background: #E1EDF7;
		border-radius: 1rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.brandSearch-left .uni-icons {
		color: #017EDF !important;
		margin-left: 24rpx !important;
	}

	.brandSearch-left .uni-select__input-text {
		font-size: 27rpx;
		font-weight: bold;
	}

	.brandSearch-left .uni-select {
		border: 0;
		padding: 0;
		padding-left: 0;
	}

	.brandSearch-right>input::placeholder {
		color: #95AAB9;
	}

	.brandSearch-right {
		font-size: 27rpx;
		font-weight: 100;
	}

	.brandSearch {
		height: 76rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 101;
		margin: 0 32rpx;
		background: #EEF7FF;
		border-radius: 18rpx;
		position: relative;
	}

	.good_study_two {
		position: relative;
		margin-bottom: 12px;
		border: 1rpx solid transparent;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4px 10px 1px #e6e5e5;
		background-color: #fff;
	}

	.good_study_two .tips {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.good_study_two .img-box {
		width: 100%;
		height: 0;
		padding-top: 100%;
		position: relative;
		overflow: hidden;
	}

	.good_study_two .img-box .img-show {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 338rpx;
		overflow: hidden;
	}

	.good_study_two .guding {
		position: relative;
	}

	.good_study_two .guding .img-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.good_study_two .good-info {
		padding: 15rpx;
		height: 112rpx;
	}

	.good_study_two .good-info .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 8px;
		color: #111111;
		font-size: 26rpx;
		font-weight: bold;
		font-family: unset;
	}

	.good_study_two .good-info .good-price-info {
		display: flex;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 22rpx;
	}

	.good_study_two .good-info .good-price-info .price {
		color: #999999;
		/* flex: 1; */
		font-size: 11px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.good_study_two .good-info .good-price-info .buy {
		width: 24px;
		text-align: right;
	}

	.screenBox {
		display: flex;
		align-items: center;
		overflow-x: scroll;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}

	.screenBoxItem {
		/* width: 130rpx; */
		height: 46rpx;
		background-color: #e2e2e2;
		border-radius: 23rpx;
		margin-right: 30rpx;
		display: flex;
		color: #999999;
		overflow: hidden;
	}

	.screenBoxItemYear {
		/* width: 50%; */
		height: 46rpx;
		background: #e2e2e2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		white-space: nowrap;
		border-radius: 23px 0px 0px 23px;
		box-sizing: border-box;
		padding: 0 10rpx;
	}

	.activeYear {
		background: #1f1f1f;
		color: #ffffff;
	}

	.screenBoxItemName {
		/* width: 50%; */
		height: 46rpx;
		background: #eaeaea;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		box-sizing: border-box;
		padding: 0 10rpx;
		white-space: nowrap;
		border-radius: 0px 23px 23px 0px;
	}

	.activeName {
		background: #d0aa7b;
		color: #111111;
	}

	.img-show-prize {
		height: 36rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 20rpx 0rpx;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
	}

	.brandScreen {
		height: 50rpx;
		margin: 20rpx 0;
		display: flex;
		padding: 0 30rpx;
	}

	.statusBox {
		/* width: 150rpx; */
		height: 46rpx;
		background: #1f1f1f;
		border-radius: 23rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-right: 30rpx;
		padding: 0 18rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.statusBox2 {
		/* width: 150rpx; */
		height: 46rpx;
		background: #eaeaea;
		border-radius: 23rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		padding: 0 18rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.custom-tab-list .u-tab-item {
		line-height: 25px !important;
	}

	.dropdown-tag.active {
		background: #e6f4ff;
		border-color: var(--main-color);
		color: var(--main-color);
	}

	.cat-level1 {
		padding: 28rpx 20rpx;
		font-size: 26rpx;
		color: #333;
		border-left: 6rpx solid transparent;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cat-level1.active {
		background: #fff;
		color: var(--main-color);
		border-left-color: var(--main-color);
		font-weight: bold;
	}

	.cat-level2 {
		padding: 14rpx 24rpx;
		background: #f0f0f0;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333;
	}

	.cat-level2.active {
		background: #e6f4ff;
		color: var(--main-color);
		border: 1rpx solid var(--main-color);
	}

	.cat-level2.active {
		background: #e6f4ff;
		color: var(--main-color);
		border: 1rpx solid var(--main-color);
	}

	.cat-card {
		width: calc(50% - 10rpx);
		margin-bottom: 16rpx;
		background: #fff;
		border-radius: 8rpx;
		border: 1rpx solid #e0e0e0;
	}

	.cat-card:nth-child(2n) {
		margin-right: 0;
	}

	.cat-card.active {
		background: var(--main-color);
		border-color: var(--main-color);
	}

	.cat-card.active view {
		color: #fff !important;
		font-weight: bold;
	}

	.dropdown-tag,
	.dropdown-tag.active {
		display: none;
	}

	.active-option {
		background: var(--main-color) !important;
		border-color: var(--main-color) !important;
	}

	.active-option text {
		color: #fff !important;
	}

	::v-deep .u-dropdown__menu__item {
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: unset !important;
  margin-right: 50rpx !important;
}
</style>