banma/pages/deal/deal.vue

<template>
  <view class="">
    <view class="sort">
      <view
        class="sortItem"
        :style="{ color: current == 1 ? '#A5CF49' : '#333333' }"
        @click="sort(1)"
      >
        <text>{{
          sortCurrent == null ? "时间排序" : sortList[sortCurrent].name
        }}</text>
        <u-icon
          name="arrow-down-fill"
          :color="{ color: current == 1 ? '#A5CF49' : '#333333' }"
          :class="{ select: current == 1 }"
          size="8"
        ></u-icon>
      </view>
      <view
        class="sortItem"
        @click="sort(2)"
        :style="{ color: current == 2 ? '#A5CF49' : '#333333' }"
      >
        <view class="">
          <text>账号筛选</text>
          <view class="tips">
            {{ mark_notice }}
          </view>
          <u-badge
            showZero
            absolute="true"
            :offset="[10, 30]"
            bgColor="red"
            type="warning "
            max="99"
            :value="total_num"
          ></u-badge>
        </view>

        <u-icon
          name="arrow-down-fill"
          :color="{ color: current == 2 ? '#A5CF49' : '#333333' }"
          :class="{ select: current == 2 }"
          size="8"
        ></u-icon>
        <zpTooltip
          content="点击快速筛选"
          :visible="visible"
          placement="bottom"
        ></zpTooltip>
      </view>
    </view>
    <view class="notice">
      <u-notice-bar
        :text="text1"
        color="#fff"
        bgColor="#A5CF49"
        fontSize="16"
      ></u-notice-bar>
    </view>
    <view class="" v-if="swiperList.length != 0">
      <u-swiper
        :list="swiperList"
        height="350rpx"
        @change="change"
        keyName="image"
        @click="click"
      ></u-swiper>
    </view>
    <view class="accountList">
      <view
        class="accountItem"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="toInfo(item)"
      >
        <view class="imgBox">
          <image :src="BASE_URL + item.coverimage" mode=""></image>
          <view
            v-if="item.color_bar"
            class="bar"
            :class="{ bule: item.bar_type == 0 }"
          >
            {{ item.color_bar }}
          </view>
        </view>
        <view class="introduction">
          <view class="title">
            {{ item.show_title }}
          </view>
          <view class="labelBox">
            <view
              class="labelItem"
              :style="{
                backgroundImage: 'url(' + BASE_URL + bg_list.top_bg.value + ')',
              }"
              v-if="item.is_top == 1"
            >
              置顶
            </view>
            <view
              class="labelItem"
              :style="{
                backgroundImage:
                  'url(' + BASE_URL + bg_list.discount_bg.value + ')',
              }"
              v-if="item.discount == 1"
            >
              特价
            </view>
            <view
              class="labelItem"
              :style="{
                backgroundImage:
                  'url(' + BASE_URL + bg_list.recommend_bg.value + ')',
              }"
              v-if="item.recommend == 1"
            >
              斑马推荐
            </view>
            <view
              class="labelItem"
              :style="{
                backgroundImage:
                  'url(' + BASE_URL + bg_list.stage_bg.value + ')',
              }"
              v-if="item.stage == 1"
            >
              可分期
            </view>
            <view
              class="labelItem"
              :style="{
                backgroundImage: 'url(' + BASE_URL + bg_list.hot_bg.value + ')',
              }"
              v-if="item.is_hot == 1"
            >
              热门
            </view>
            <!-- <view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.level_bg.value+')'}" v-if="item.level>=1">
							VIP
						</view> -->
            <view
              class="labelItem"
              :style="{
                backgroundImage: 'url(' + BASE_URL + bg_list.new_bg.value + ')',
              }"
              v-if="item.is_new == 1"
            >
              新品
            </view>

            <view
              class="labelItem"
              :style="{
                backgroundImage:
                  'url(' + BASE_URL + bg_list.standby1_bg.value + ')',
              }"
              v-if="item.standby1 == 1"
            >
              {{ item.standby1_title }}
            </view>
            <view
              class="labelItem"
              :style="{
                backgroundImage:
                  'url(' + BASE_URL + bg_list.standby2_bg.value + ')',
              }"
              v-if="item.standby2 == 1"
            >
              {{ item.standby2_title }}
            </view>
            <view
              class="labelItem"
              :style="{
                backgroundImage:
                  'url(' + BASE_URL + bg_list.standby3_bg.value + ')',
              }"
              v-if="item.standby3 == 1"
            >
              {{ item.standby3_title }}
            </view>

            <!-- <u-tag v-if="item.discount==1" text="特价" type="error" shape="circle" size="mini"></u-tag>
						<u-tag v-if="item.recommend==1" text="斑马推荐"  shape="circle" size="mini"></u-tag>
						<u-tag v-if="item.stage==1" text="可分期" type="success" shape="circle" size="mini"></u-tag> -->
          </view>
          <view class="price">
            <text>{{ item.money }}</text
            >米
          </view>
        </view>
      </view>
      <u-empty
        v-if="goodsList.length == 0 && !loading"
        mode="list"
        icon="http://cdn.uviewui.com/uview/empty/list.png"
      >
      </u-empty>
    </view>
    <view class="company—info" v-if="showCompany && goodsList.length > 10">
      <p>六合区斑马互娱游戏工作室</p>
      <p>公安备案号：32011502011903</p>
      <p>
        <a href="http://beian.miit.gov.cn/">ICP备案号：苏ICP备2023025782号-1</a>
      </p>
    </view>
  </view>
  <u-popup :show="show" mode="top" @close="close">
    <view class="popup">
      <view
        class="item"
        :class="{ selectSort: sortCurrent == index }"
        v-for="(item, index) in sortList"
        :key="index"
        @click="sortClick(item, index)"
      >
        {{ item.name }}
      </view>
    </view>
  </u-popup>
  <u-popup :show="show1" mode="top" @close="close1">
    <scroll-view scroll-y="true">
      <view class="popup popup1">
        <view class="labelItem">
          <view class="label"> 编号 </view>
          <view class="value">
            <input
              type="text"
              v-model="condition.search_name"
              class="codeInput"
              placeholder="请输入需要搜索的账号编号"
            />
          </view>
        </view>
        <view class="" style="height: 800rpx; overflow: scroll">
          <view class="labelItem">
            <view class="label"> 标签选择 </view>
            <view class="value">
              <u-checkbox-group
                v-model="checkboxValue1"
                placement="row"
                @change="checkboxChange"
              >
                <u-checkbox
                  :customStyle="{ marginBottom: '8px' }"
                  v-for="(item, index) in labelList"
                  :key="index"
                  :label="item.title"
                  :name="item.id"
                >
                </u-checkbox>
              </u-checkbox-group>
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 价格区间 </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_money"
                class="codeInput"
                placeholder="最低价格"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_money"
                class="codeInput"
                placeholder="最高价格"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 区服范围 </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_server"
                class="codeInput"
                placeholder="XXX区"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_server"
                class="codeInput"
                placeholder="XXX区"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 金伙伴数量区间 </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_partner"
                class="codeInput"
                placeholder="最少伙伴数量"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_partner"
                class="codeInput"
                placeholder="最多伙伴数量"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> VIP等级区间 </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_level"
                class="codeInput"
                placeholder="最低等级"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_level"
                class="codeInput"
                placeholder="最高等级"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 战力范围(单位：亿) </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_force"
                class="codeInput"
                placeholder="最低战力"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_force"
                class="codeInput"
                placeholder="最高战力"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 速度范围(单位：万) </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_speed"
                class="codeInput"
                placeholder="最低速度"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_speed"
                class="codeInput"
                placeholder="最高速度"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 法伤范围(单位：万) </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_atk"
                class="codeInput"
                placeholder="最低法伤"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_atk"
                class="codeInput"
                placeholder="最高法伤"
              />
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 冰冻范围(单位：万) </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_property"
                class="codeInput"
                placeholder="最低冰冻"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_property"
                class="codeInput"
                placeholder="最高冰冻"
              />
            </view>
          </view>

          <view class="labelItem">
            <view class="label"> 渡劫等级 </view>
            <view class="value1">
              <input
                type="number"
                v-model="condition.min_dj_level"
                class="codeInput"
                placeholder="最少等级"
              />
              <text>至</text>
              <input
                type="number"
                v-model="condition.max_dj_level"
                class="codeInput"
                placeholder="最高等级"
              />
            </view>
          </view>

          <view class="labelItem">
            <view class="label"> 账号类型 </view>
            <view class="value">
              <u-radio-group
                v-model="radiovalue1"
                placement="row"
                @change="groupChange"
              >
                <u-radio
                  :customStyle="{ marginBottom: '8px' }"
                  v-for="(item, index) in checkboxList1"
                  :key="index"
                  :label="item.name"
                  :name="item.type"
                >
                </u-radio>
              </u-radio-group>
            </view>
          </view>
          <view class="labelItem">
            <view class="label"> 是否榜一 </view>
            <view class="value">
              <u-radio-group
                v-model="radiovalue2"
                placement="row"
                @change="groupChange1"
              >
                <u-radio
                  :customStyle="{ marginBottom: '8px' }"
                  v-for="(item, index) in checkboxList2"
                  :key="index"
                  :label="item.name"
                  :name="item.type"
                >
                </u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
        <view class="btnBox">
          <button class="btn1" @click="reset">重置</button>
          <button
            class="btn2"
            @click="
              (_) => {
                condition.page = 1;
                showCompany = false;
                goodsList = [];
                getList();
              }
            "
          >
            确定
          </button>
        </view>
      </view>
    </scroll-view>
  </u-popup>
  <u-overlay :show="show10" @click="show10 = false">
    <view class="warp">
      <view class="rect1" @tap.stop>
        <image src="../../static/tishi.png" mode=""></image>
        <p>该商品已出售或下架</p>
        <u-button
          color="#A5CF49"
          type="success"
          shape="circle"
          text="看看其他斑马账号"
          @click="show10 = false"
        ></u-button>
      </view>
    </view>
  </u-overlay>
</template>

<script setup>
import {
  onLoad,
  onShow,
  onPullDownRefresh,
  onReachBottom,
} from "@dcloudio/uni-app";
import zpTooltip from "../../uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue";
import { BASE_URL } from "../../utils/http.js";
import { ref } from "vue";
import {
  getbannerlist,
  getnoticelist,
  getSelLabel,
  getGoodsList,
  getplatformmeun,
  getplatformeditor,
} from "@/utils/api.js";
let mark_notice = ref("");
onLoad(() => {
  getplatformeditor().then((res) => {
    mark_notice.value = res.data.mark_notice;
  });
  uni.hideTabBar();
  getplatformmeun().then((res) => {
    text1.value = res.data.acc_notice;
    let menu = res.data;
    getApp().globalData.config = menu;
    uni.setTabBarItem({
      index: 0,
      text: menu.simple_menu,
      iconPath: BASE_URL + menu.simple_logo,
      selectedIconPath: BASE_URL + menu.simple_logo2,
    });
    uni.setTabBarItem({
      index: 1,
      text: menu.acc_menu,
      iconPath: BASE_URL + menu.acc_logo,
      selectedIconPath: BASE_URL + menu.acc_logo2,
    });
    uni.setTabBarItem({
      index: 2,
      text: menu.jump_menu,
      iconPath: BASE_URL + menu.jump_logo,
      selectedIconPath: BASE_URL + menu.jump_logo2,
    });
    uni.setTabBarItem({
      index: 3,
      text: menu.information_menu,
      iconPath: BASE_URL + menu.information_logo,
      selectedIconPath: BASE_URL + menu.information_logo2,
    });
    uni.showTabBar();
    uni.setNavigationBarTitle({
      title: res.data.name,
    });
  });
  getBanner();
  getSelLabel().then((res) => {
    labelList.value = res.data;
  });
  // getnoticelist(2).then(res=>{
  // 	let data=res.data
  // 	data.forEach(item=>{
  // 		text1.value=text1.value+'   '+item.content
  // 	})
  // })
  getList();
});
let show10 = ref(false);
onReachBottom(() => {
  condition.value.page++;
  getList();
});
let groupChange = (e) => {
  condition.value.account_type = e;
};
let groupChange1 = (e) => {
  condition.value.is_top = e;
};
let sortCurrent = ref(null);
let sortClick = (item, index) => {
  if (sortCurrent.value != index) {
    sortCurrent.value = index;
    condition.value.sort_type = item.sort_type;
    condition.value.sort_order = item.sort_order;
    show.value = false;
    current.value = 0;
    condition.value.page = 1;
    getList();
  }
};
let goodsList = ref([]);
let bg_list = ref({});
let total_num = ref(0);
let loading = ref(false);
let getList = () => {
  if (loading.value) return;
  show1.value = false;
  current.value = 0;
  loading.value = true;
  getGoodsList(condition.value).then((res) => {
    getNum();
    bg_list.value = res.data.bg_list;
    if (condition.value.page == 1) {
      goodsList.value = res.data.list;
    } else {
      goodsList.value = [...goodsList.value, ...res.data.list];
    }
    if (res.data.list.length < condition.value.page_num)
      showCompany.value = true;
    loading.value = false;
  });
};
let labelList = ref([]);
onShow(() => {
  history.pushState(null, document.title, location.href);
});
let getNum = () => {
  let count = 0;
  if (condition.value.search_name != "") {
    count += 1;
  }
  if (condition.value.label_ids.split(",") != 0) {
    count += condition.value.label_ids.split(",").length;
  }
  if (condition.value.min_money != "" || condition.value.max_money != "") {
    count += 1;
  }
  if (condition.value.min_server != "" || condition.value.max_server != "") {
    count += 1;
  }
  if (condition.value.min_partner != "" || condition.value.max_partner != "") {
    count += 1;
  }
  if (condition.value.min_level != "" || condition.value.max_level != "") {
    count += 1;
  }
  if (condition.value.min_force != "" || condition.value.max_force != "") {
    count += 1;
  }

  if (condition.value.min_speed != "" || condition.value.max_speed != "") {
    count += 1;
  }
  // console.log(123,condition.value.min_atk,condition.value.max_atk)
  if (condition.value.min_atk != "" || condition.value.max_atk != "") {
    count += 1;
  }
  if (
    condition.value.min_property != "" ||
    condition.value.max_property != ""
  ) {
    count += 1;
  }
  if (
    condition.value.min_dj_level != "" ||
    condition.value.max_dj_level != ""
  ) {
    count += 1;
  }
  if (condition.value.account_type != 0) {
    count += 1;
  }

  if (condition.value.is_top != -1) {
    count += 1;
  }
  total_num.value = count;
};
let reset = () => {
  radiovalue1.value = ref(0);
  radiovalue2.value = ref(-1);
  checkboxValue1.value = [];
  condition.value = {
    page: 1,
    page_num: 10,
    sort_type: "",
    sort_order: "",
    min_money: "",
    max_money: "",
    min_server: "",
    max_server: "",
    min_partner: "",
    max_partner: "",
    min_level: "",
    max_level: "",
    min_force: "",
    max_force: "",
    min_speed: "",
    max_speed: "",
    min_atk: "",
    max_atk: "",
    min_property: "",
    max_property: "",
    min_dj_level: "",
    max_dj_level: "",
    account_type: 0,
    is_top: -1,
    label_ids: "",
    search_name: "",
  };
};
let sortList = [
  {
    name: "最近发布",
    sort_type: 1,
    sort_order: 1,
  },
  // {name:'发布时间从远到近',sort_type:1,sort_order:2},
  {
    name: "价格从高到低",
    sort_type: 2,
    sort_order: 1,
  },
  {
    name: "价格从低到高",
    sort_type: 2,
    sort_order: 2,
  },
  {
    name: "战力从高到低",
    sort_type: 3,
    sort_order: 1,
  },
  {
    name: "战力从低到高",
    sort_type: 3,
    sort_order: 2,
  },
  {
    name: "冰冻从高到低",
    sort_type: 4,
    sort_order: 1,
  },
  {
    name: "冰冻从低到高",
    sort_type: 4,
    sort_order: 2,
  },
  {
    name: "速度从高到低",
    sort_type: 5,
    sort_order: 1,
  },
  {
    name: "速度从低到高",
    sort_type: 5,
    sort_order: 2,
  },
  {
    name: "法伤从高到低",
    sort_type: 6,
    sort_order: 1,
  },
  {
    name: "法伤从低到高",
    sort_type: 6,
    sort_order: 2,
  },
  {
    name: "vip等级排序",
    sort_type: 7,
    sort_order: 1,
  },
  // {name:'vip等级从低到高',sort_type:7,sort_order:2},
];
let condition = ref({
  page: 1,
  page_num: 10,
  sort_type: "",
  sort_order: "",
  min_money: "",
  max_money: "",
  min_server: "",
  max_server: "",
  min_partner: "",
  max_partner: "",
  min_level: "",
  max_level: "",
  min_force: "",
  max_force: "",
  min_speed: "",
  max_speed: "",
  min_atk: "",
  max_atk: "",
  min_property: "",
  max_property: "",
  min_dj_level: "",
  max_dj_level: "",
  account_type: 0,
  is_top: -1,
  label_ids: "",
  search_name: "",
});
let getBanner = () => {
  getbannerlist().then((res) => {
    res.data.forEach((item) => {
      item.image = BASE_URL + item.image;
    });
    swiperList.value = res.data;
  });
};
let toInfo = (item) => {
  if (item.status == 0) {
    show10.value = true;
    return;
  }
  uni.navigateTo({
    url:
      `/pages/deal/product_info?id=${item.id}` +
      (item.rand_num ? `&rand_num=${item.rand_num}` : ""),
    // url:'/pages/deal/productInfo?id='+6
  });
};
let visible = ref(true);
let swiperList = ref([]);
let radiovalue1 = ref(0);
let radiovalue2 = ref(-1);
let checkboxValue1 = ref([]);
let checkboxChange = (n) => {
  condition.value.label_ids = n.toString();
};
let text1 = ref("");
let showCompany = ref(false);
// 基本案列数据
let checkboxList1 = [
  {
    name: "全部",
    type: 0,
  },
  {
    name: "手机",
    type: 1,
  },
  {
    name: "邮箱",
    type: 2,
  },
  {
    name: "微信/qq",
    type: 3,
  },
];
let checkboxList2 = [
  {
    name: "全部",
    type: -1,
  },
  {
    name: "否",
    type: 0,
  },
  {
    name: "是",
    type: 1,
  },
];
let show = ref(false);
let show1 = ref(false);
let current = ref(0);
let sort = (type) => {
  if (current.value != type) {
    current.value = type;
    if (type == 1) {
      show.value = true;
      show1.value = false;
    } else {
      show1.value = true;
      show.value = false;
    }
  } else {
    current.value = 0;
    show.value = false;
    show1.value = false;
  }
};
let close = () => {
  show.value = false;
  current.value = 0;
};
let close1 = () => {
  show1.value = false;
  current.value = 0;
};
onPullDownRefresh(() => {
  reset();
  getList();
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 2000);
});
</script>

<style>
uni-button:after {
  border: none;
}
</style>
<style lang="scss">
.notice {
  height: 37px;
  overflow: hidden;
}

.warp {
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect1 {
  padding: 60rpx 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 558rpx;
  height: 438rpx;
  background: #ffffff;
  border-radius: 20rpx;

  image {
    width: 96rpx;
    height: 96rpx;
  }

  p {
    font-size: 24rpx;
    margin: 62rpx 0 40rpx;
  }

  // background-color: #fff;
}

.labelBox {
  margin: 10rpx 0;
  display: flex;
  flex-wrap: wrap;

  .labelItem {
    margin-right: 20rpx;
    margin-bottom: 5rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #fff;
    border-radius: 30rpx;
    padding: 7rpx 16rpx;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    // background-color: #A5CF49;
  }
}

.selectSort {
  color: rgb(165, 207, 73);
}

.accountList {
  background-color: #ffffff;

  .accountItem {
    border-bottom: 20rpx solid #f5f5f5;
    display: flex;
    padding: 8rpx 24rpx;
    align-items: center;

    .imgBox {
      overflow: hidden;
      position: relative;
      margin-right: 26rpx;

      image {
        width: 188rpx;
        max-height: 188rpx;
        border-radius: 10rpx;
      }

      .bar {
        display: flex;
        justify-content: center;
        font-weight: bold;
        overflow: hidden;
        font-size: 28rpx;
        color: #fff;
        padding: 5rpx;
        // text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 188rpx;
        background: red;
      }

      .bule {
        background: blue;
      }
    }

    .introduction {
      flex: 1;

      .title {
        color: #000000;
        font-weight: bold;
        font-size: 28rpx;
      }

      .u-fade-enter-active {
        margin-top: 0;
        padding: 10rpx;
      }

      .price {
        color: #ff2828;
        font-size: 24rpx;

        text {
          font-size: 40rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.btnBox {
  margin-top: 100rpx;
  display: flex;
  justify-content: right;

  button {
    margin: 0;
    margin-left: 40rpx;
    padding: 0;
    width: 206rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #f5f5f5;
    border-radius: 40rpx;
    font-size: 24rpx;
  }

  .btn1 {
    background: #f5f5f5;
  }

  .btn2 {
    background: #a5cf49;
    color: #fff;
  }
}

.labelItem {
  .label {
    font-size: 24rpx;
    font-weight: bold;
    margin: 24rpx 0 10rpx;
  }

  .value {
    .codeInput {
      font-size: 24rpx;
      width: 562rpx;
      height: 68rpx;
      line-height: 68rpx;
      background: #f5f5f5;
      border-radius: 20rpx;
      padding: 0 24rpx;
    }
  }

  .value1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    input {
      font-size: 24rpx;
      text-align: center;
      width: 231rpx;
      height: 68rpx;
      line-height: 68rpx;
      background: #f5f5f5;
      border-radius: 20rpx;
      padding: 0 24rpx;
    }
  }
}

.popup {
  padding: 0 40rpx;
  font-size: 24rpx;

  .item {
    line-height: 90rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }
}

.popup1 {
  padding: 0 40rpx 40rpx;
}

::v-deep .u-checkbox {
  span {
    font-size: 24rpx !important;
  }

  margin-right: 20rpx;
}

::v-deep .u-radio {
  span {
    font-size: 24rpx !important;
  }

  margin-right: 20rpx;
}

::v-deep .u-fade-enter-active {
  margin-top: 89px;
}

::v-deep .u-slide-down-enter-to {
  top: 3.75rem !important;
}

.select {
  transform: rotate(180deg);
}

page {
  .sort {
    border-top: 1rpx solid #f2f2f2;
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
    display: flex;
    position: sticky;
    top: 0;
    z-index: 99999;

    .sortItem {
      position: relative;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        margin-right: 16rpx;
      }

      .tips {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: -40rpx;
        left: 0;
        // transform: translateX(-50%);
        font-size: 8rpx;
        white-space: nowrap;
        color: #000;
        font-weight: bold;
        // transform: scale(0.8);
      }
    }
  }
}

.company—info {
  font-size: 20rpx;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 20rpx;
  color: #999999;
  text-decoration: none;

  a {
    color: #999999;
    text-decoration: none;
  }
}
</style>