<template>
  <div
    :style="{
      'background-color': '#f6f6f6',
      height: contentHeight + 'px',
      overflow: 'hidden',
    }"
  >
  <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="mainColor"
                :current="active"
                @change="changeHandler"
                :show-bar="true"
                :activeFontSize="34"
                :bold="true"
                height="100"
                duration="0"
                font-size="28"
              ></u-tabs>
            </view>
            <!-- <div style="width: 64rpx;height: 48rpx;display: table-cell; vertical-align: middle;text-align: right;">
              <u-icon name="filter-o" color="#111" size="42"></u-icon>
            </div> -->
          </view>
        <view class="brandScreen" >
          <view
            class="statusBox"
            v-if="msg.IsInChengdu == 0"
            @click="changeFirstStoreTest(-1)"
          >
            未在成都落地
          </view>
          <view
            class="statusBox2"
            v-if="msg.IsInChengdu == -1"
            @click="changeFirstStoreTest(0)"
          >
            未在成都落地
          </view>
        </view>
          <view class="screenBox" v-if="PrizeList.length > 0">
            <view
              v-for="(item, index) in PrizeList"
              :key="index"
              class="screenBoxItem"
              @click="chooseYear(item)"
            >
              <view
                class="screenBoxItemYear"
                :class="{ activeYear: item.Id == msg.PrizeId }"
                >{{ item.YearInfo }}</view
              ><view
                class="screenBoxItemName"
                :class="{ activeName: item.Id == msg.PrizeId }"
                >{{ item.Name }}</view
              >
            </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="mainColor"
                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:{},
      mainColor: "",
      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: null,
      secondary: null,
      GetYBConfig: null,
      iscpswjselectall: 0,
      ShopTypeList: [],
      FilterCriShow: false,
    };
  },
  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
    // this.msg.TenantId = uid.TenantId
    this.replace = uni.getStorageSync('replace_page_index')
    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.getPrizeList();
	// }
	
    
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "品牌列表",
    });
    let c = this.$uiConfig.is_bang ? 78 : 50;
    this.contentHeight = this.$utils.calcContentHeight(c) + 40;
  },
  methods: {
    getMixArea(type){
      if(this.msg.MixAreaRequirement){
        if(this.msg.MaxAreaRequirement<this.msg.MixAreaRequirement){
					uni.showToast({
						title: "不能小于"+this.msg.MixAreaRequirement+'面积',
						icon:'none'
					})
					this.msg.MaxAreaRequirement = this.msg.MixAreaRequirement
				}
      }
      if(this.msg.MixShopNum){
        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)
            })
          }
        }
      );
      this.init();
    },
    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.init();
    },
	changeFirstStoreTest(i) {
	  this.msg.IsInChengdu = i;
	  this.msg.pageIndex = 1;
	   this.g = [];
	  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;
}
</style>
