ks-app-employment-service/packageRc/pages/personalList/personalList.vue

<template>
  <view class="job-list" style="background-image: url('../../../packageRc/static/pageBg.png');">
    <!-- 固定导航栏 -->
    <!-- <view class="fixed-navbar" v-if="true">
      <u-navbar 
        title="重点群体服务" 
        :autoBack="true" 
        bgColor="#1a62ce" 
        leftIconColor="#fff"
        
        :placeholder="true"
       
      >
        <uni-icons v-show="$store.getters.roles.includes('shequn')" @tap="$store.commit('SET_SHOWEXITPOPUP', true)"
          name="list" slot="right" color="#fff"></uni-icons>
      </u-navbar>
    </view> -->
    
    <!-- 顶部背景图 -->
    <!-- <view class="top_box_bg">
      <u-image src="../../../packageRc/static/pageBg.png" width="750rpx" height="130rpx" />
    </view> -->
    <view class="search-filter-container">
      <view class="search-input-wrapper">
        <input
          placeholder="输入姓名进行搜索"
          border="surround"
          v-model="queryParams.name"
          shape="circle"
          :customStyle="customInputStyle"
        />
      <view slot="suffix">
        <uni-icons @tap="handleSearch" name="search" color="#2979ff" size="28"></uni-icons>
      </view>
      </view>
      <view class="filter-button-wrapper">
        <button
          class="filter-button"
          @click="openFilter"
        >{{ filterTotal > 0 ? '筛选+' + filterTotal : '筛选' }}</button>
      </view>
    </view>
    <view
      style="position: relative; color: #000;display: flex;align-items: center;justify-content: space-between;">
      <view v-if="total">
        <text style="margin-left:10rpx;">共{{ total }}条信息</text>
      </view>
      <view style="display: flex;width: 200rpx" class="sort-type">
        <!-- <view class="sort-type" @click="showSortPicker=true">{{ sortType ? sortType : '排序方式' }}</view> -->
        <uni-data-select :clear="false" mode="none"
          v-model="queryParams.pxlx"
          :localdata="sortRange"
          @change="sortTypeChange"
        ></uni-data-select>
        <view @click="changeSortLx" style="display: flex;align-items: center;margin-left: 8rpx;">
          <uni-icons v-if="queryParams.pxfs == 'desc'" type="up" color="#2979ff" size="14"></uni-icons>
          <uni-icons v-if="queryParams.pxfs == 'asc'" type="down" color="#2979ff" size="14"></uni-icons>
        </view>
        <!-- <uni-picker
        @confirm="sortTypeChange"
        :show="showSortPicker"
        @cancel="cancelSortPicker"
        :columns="[]" keyName="label"></u-picker> -->
      </view>
    </view>
    <view class="tab-bar">
    <view
      v-for="item in serviceTabList"
      :key="item.value"
      :class="['tab-item', cxlx === item.value ? 'active' : '']"
      @click="changeTab(item.value)"
    >
      {{ item.label }}
    </view>
  </view>
    <!-- <uni-loading v-if="loading" mode="circle" size="40" color="#2979ff" :show="loading" /> -->
    <scroll-view class="job-list__scroll" scroll-y="true" @scrolltolower="loadMoreJobs">
      <view>
        <view  v-for="(job,index) in perlist" :key="index"
          class="swipe_action_item">
          <view class="job-list__item" :style="{ paddingBottom: job.auditStatus == 1 ? '0' : '32rpx' }" @tap="toPage(`/packageRc/pages/community/personEdit?id=${job.id}&type=edit`)">
            <view class="job-list__item-top">
              <img src="https://rc.jinan.gov.cn/qcwjyH5/static/images/person/malepng.png" v-if="job.gender == 0" class="gender-img" alt="" />
              <img src="https://rc.jinan.gov.cn/qcwjyH5/static/images/person/femalepng.png" v-else class="gender-img" alt="" />
              <view class="job-list__item-top-info">
                <view class="job-list__item-top-info-name">{{
                  job.name || "-"
                  }}</view>
                <view style="margin-top: 10rpx">
                  <text style="color: #8e8e8e">年龄：</text>
                  <text>{{
                    job.age || "--"
                    }}岁</text>
                  <text style="color: #8e8e8e;padding-left: 20rpx;">服务次数：</text>
                  <text>{{
                    job.operateNum
                    }}次</text>

                </view>
              </view>
              <view class="job-list__item-top-info-fwzt">
                <text style="color: #e0a61f" v-if="job.fwzt == 0">•未服务</text>
                <text style="color: #1ac88b" v-if="job.fwzt == 1">•已服务</text>
          <text style="color: #fa6553" v-if="job.fwzt == 2">•联系不上</text>
                <text style="color: #fa6553" v-if="job.fwzt == 3">•拒绝服务</text>
                <text style="color: #fa6553;margin-top: 10rpx;" v-if="job.isReturn == 1">•被退回</text>
              </view>
            </view>
            <view class="job-list__item-detail">
              <text>证件号：</text>
              <text v-if="job.isEye">{{ job.cardNumber }}</text>
              <text v-else>{{ encryptIdCard(job.cardNumber) }}</text>

              <uni-icons name="eye-fill" v-if="job.isEye" @click.native.stop="changeEys(job)" size="20"></uni-icons>
              <uni-icons name="eye-off" v-else @click.native.stop="changeEys(job)" size="20"></uni-icons>
            </view>
            <view class="job-list__item-detail">
              <text>联系电话:</text>
              <text>{{ job.phone }}</text>
            </view>
            <view class="job-list__item-detail">
              <text>详细地址:</text>
              <text>{{ job.currentResidentialAddress || "--" }}</text>
            </view>
            <view class="job-list__item-btn">
              <view v-show="$store.getters.roles.includes('shequn')" class="btn" style="color: #f56c6c;"
                @click.native.stop="handleReturn(job)">退回</view>
              <view class="btn" @click.native.stop="toPage(
                `/packageRc/pages/community/serviceDetails?id=${job.id}&userId=${job.userId}`
              )">服务</view>
              <view
                v-if=" job.personType == 3"
                class="btn"
                style="color: #1a62ce;"
                @click.native.stop="goEmploymentRegister(job)"
              >就业登记</view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" />
    </scroll-view>

    <!-- <view class="post_job_btn" @tap.stop="$tab.navigateTo('/pages/community/personEdit?type=add')">
    </view> -->
    <uni-popup :show="show" ref="show" @close="close" @open="open" type="bottom" background-color="#fff">
      <view class="dialog_div">
        <view class="dialog_div_top">
          <view @click="close">取消</view>
          <view @click="handleSearch">确定</view>
        </view>
        <view>
          <view class="df_flex">
            <view class="text">服务状态：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleServiceStatus('fwzt', item)"
                :class="item.dictValue == queryParams.fwzt ? 'item-active' : ''" v-for="item in serviceStatusList"
                :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
          <view class="df_flex">
            <view class="text">性别：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleServiceStatus('gender', item)" :class="item.dictValue == queryParams.gender ? 'item-active' : ''
                " v-for="item in genderList" :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
          <view class="df_flex">
            <view class="text">学历：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleServiceStatus('educationLevel', item)" :class="item.dictValue == queryParams.educationLevel ? 'item-active' : ''
                " v-for="item in educationLevelList" :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
          <view class="df_flex">
            <view class="text">人员类型：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleServiceStatus('personType', item)" :class="item.dictValue == queryParams.personType ? 'item-active' : ''
                " v-for="item in personTypeList" :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
          <view class="df_flex">
            <view class="text">人员状态：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleServiceStatus('personStatus', item)" :class="item.dictValue == queryParams.personStatus ? 'item-active' : ''
                " v-for="item in ryztList" :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
          <!-- 非社区人员可以筛选 -->
          <view class="df_flex" v-show="!$store.getters.roles.includes('shequn')">
            <view class="text">是否退回：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleServiceStatus('isReturn', item)" :class="item.dictValue == queryParams.isReturn ? 'item-active' : ''
                " v-for="item in returnTypeList" :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
        </view>
        <view class="dialog_div_btn">
          <u-button class="reset-style" text="重 置" @click="reset"></u-button>
          <u-button class="sure-style" text="确 定" @click="handleSearch"></u-button>
        </view>
      </view>
    </uni-popup>
    <uni-popup :show="show1" ref="show1" @close="close" @open="open">
      <view class="dialog_div">
        <view>
          <view class="df_flex">
            <view class="text">服务状态：</view>
            <view class="df_flex_items">
              <view class="item" @click="handleStatus('fwzt', item)"
                :class="item.dictValue == talentInformation.fwzt ? 'item-active' : ''" v-for="item in serviceList"
                :key="item.dictValue">{{ item.dictLabel }}</view>
            </view>
          </view>
        </view>
        <view class="dialog_div_btn">
          <u-button class="reset-style" text="取 消" @click="reset"></u-button>
          <u-button class="sure-style" text="确 定" @click="markPersonnelStatus"></u-button>
        </view>
      </view>
    </uni-popup>
    <uni-popup :show="openDialog" ref="openDialog" mode="center" closeOnClickOverlay @close="
      openDialog = false;
    resetInfo();
    " :round="10">
      <view class="dialog_form">
        <view class="tadio df_flex df_align_center">
          <u-radio-group v-model="auditInfo.auditStatus">
            <u-radio :customStyle="{ marginLeft: '30rpx' }" name="2">
              通过
            </u-radio>
            <u-radio :customStyle="{ marginLeft: '30rpx' }" name="3">
              不通过
            </u-radio>
          </u-radio-group>
        </view>
        <view class="textarea" v-if="auditInfo.auditStatus == 3">
          <u--textarea v-model="auditInfo.auditReason" placeholder="请填写审核不通过原因"></u--textarea>
        </view>
        <view class="btn">
          <u-button :plain="true" color="#BF5818" text="确定" @tap="submitAudit"></u-button>
        </view>
      </view>
    </uni-popup>
    <!-- 退回 -->
    <uni-popup :show="returnDialog" ref="returnDialog" mode="center" closeOnClickOverlay @close="returnClose" :round="10">
      <view class="dialog_form">
        <view class="return-dialog-title">
          退回
        </view>
        <view class="textarea">
          <u--textarea v-model="returnReason" placeholder="请填写退回原因"></u--textarea>
        </view>
        <view class="btn">
          <u-button :plain="true" color="#BF5818" text="确定" @tap="returnSubmit"></u-button>
        </view>
      </view>
    </uni-popup>

    <!-- 社区端 - 显示隐藏退出组件 -->
    <!-- <exitPopup /> -->
  </view>
</template>

<script>
import {
  // 人员基本信息 // 1 失业中 2 就业困难 3 离校生 4 其他人员
  personInfoList,
  recordLookIdCard, //记录日志
  personInfoAudit,
  delPersonInfo,
  returnPerson,
  updatePersonInfo,
} from "../../api/company/index.js";
import exitPopup from "../../components/exitPopup.vue";
import {
	getDicts
} from '@/apiRc/system/dict.js'
export default {
  name: "personnelList",
  components: {
    exitPopup,
  },
  data() {
    return {
      validType: [
        {
          label: "是",
          value: "1",
        },
        {
          label: "否",
          value: "0",
        },
      ],
      sortRange: [{text: '年龄', value: 'AGE'},{text: '服务次数', value: 'OPERATE_NUM'},{text: '服务时间', value: 'OPERATE_TIME'},{text: '提出时间', value: 'DEMAND_TIME'},{text: '登录时间', value: 'LOGIN_TIME'},],
      show: false,
      show1: false,
      filterTotal: 0,
      total: 0,
      status: "more", // 加载更多状态
      searchKeyword: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        fwzt: "",
        personType: "",
        personStatus: "",
        gender: "",
        educationLevel: "",
        isReturn: '',
        pxfs: 'asc',
        pxlx: 'DEMAND_TIME',
        cxlx:"wfw"
      },
      perlist: [],
      loading: false,
      customInputStyle: {
        background: "#fff",
        height: "70rpx",
        borderRadius: "35rpx",
        padding: "0 40rpx",
        fontSize: "28rpx",
        boxShadow: "0 2rpx 8rpx rgba(0,0,0,0.1)",
        width: "100%",
      },
      serviceStatusList: [
        {
          dictLabel: "全部",
          dictValue: "",
        },
      ],
      serviceList: [],
      genderList: [
        {
          dictLabel: "不限",
          dictValue: "",
        },
      ],
      personTypeList: [
        {
          dictLabel: "全部",
          dictValue: "",
        },
      ],
      returnTypeList: [
        {
          dictLabel: "不限",
          dictValue: "",
        },
        {
          dictLabel: "是",
          dictValue: "1",
        },
        {
          dictLabel: "否",
          dictValue: "0",
        },
      ],
      educationLevelList: [
        {
          dictLabel: "不限",
          dictValue: "",
        },
      ],
      talentInformation: {
        id: "",
        fwzt: ""
      },
      ryztList: [
        {
          dictLabel: "不限",
          dictValue: "",
        },
      ],
      userSexList: [],
      lcztList: [],
      tabList: ["失业人员", "就业困难", "离校未就业", "其他人员"],
      auditInfo: {
        idList: [],
        // 2 通过 3 不通过
        auditStatus: "",
        // 不通过原因
        auditReason: "",
      },
      openDialog: false,
      returnDialog: false,
      returnReason: '',
      returnItemData: {},
      sortType: "DEMAND_TIME",
      showSortPicker: false,
      cxlx: 'wfw', // 默认全部
      serviceTabList: [
        { label: '全部', value: 'all' },
        { label: '未服务', value: 'wfw' },
        { label: '服务中', value: 'fwz' },
        { label: '已就业', value: 'yjy' }
      ],
    };
  },
  onShow() {
    this.getList(true);
  },
  onLoad() {
    getDicts("qcjy_ryzt").then((res) => {
      this.ryztList = res.data;
    });
    getDicts("sys_user_sex").then((res) => {
      this.userSexList = res.data;
    });
    // 流程状态 0 暂存 1 待审核 2 审核通过 3 退回修改
    getDicts("qcjy_lczt").then((res) => {
      this.lcztList = res.data;
    });

    getDicts("sys_user_sex").then((res) => {
      this.genderList = this.genderList.concat(res.data);
    });
    getDicts("qcjy_rylx").then((res) => {
      this.personTypeList = this.personTypeList.concat(res.data);
    });
    getDicts("qcjy_fwzt").then((res) => {
      this.serviceList = res.data;
      this.serviceStatusList = this.serviceStatusList.concat(res.data);
    });
    getDicts("qcjy_jycd").then((res) => {
      this.educationLevelList = this.educationLevelList.concat(res.data);
    });
  },
  methods: {
    openFilter() {

      this.$refs.show.open()
    },
    toPage(url) {
      uni.navigateTo(
        url
      )
    },
    cancelSortPicker() {
      this.showSortPicker = false
      this.$forceUpdate();
    },
    changeSortLx(){
      this.queryParams.pxfs = this.queryParams.pxfs == 'asc' ? 'desc' : 'asc'
      this.getList(true)
    },
    sortTypeChange(e) {
      this.sortType = this.sortRange.filter(item => item.value === e)[0].text
      this.queryParams.pxlx = e
      this.queryParams.pxfs = 'asc'
      this.showSortPicker = false
      this.getList(true)
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: "",
        fwzt: "",
        personType: "",
        educationLevel: "",
        personStatus: "",
        gender: "",
        isReturn: '',
        pxfs: 'asc',
        pxlx: 'DEMAND_TIME',
        cxlx:""
      };
      this.$refs.show1.close()
      this.show1 = false;
      this.filterTotal = 0
    },
    open() {
      // console.log('open');
    },
    close() {
      this.$refs.show.close()
      this.show = false;
      this.$refs.show1.close()
      this.show1 = false;
      // console.log('close');
    },
    checked(data) {
      this.$refs.show1.open()
      this.show1 = true;
      this.talentInformation.id = data.id;
      this.talentInformation.fwzt = data.fwzt;

    },
    // 退回
    handleReturn(data) {
      this.$refs.returnDialog.open()
      this.returnDialog = true
      this.returnItemData = data || {}
    },
    // 退回关闭
    returnClose() {
      this.$refs.returnDialog.close()
      this.returnDialog = false
      this.returnReason = ''
    },
    // 退回提交
    async returnSubmit() {
      if (!this.returnReason) return this.$u.toast("请填写退回原因");
      const params = {
        id: this.returnItemData.id,
        opinion: this.returnReason
      }
      returnPerson(params).then(res => {
        if (res.code == 200) {
          this.$refs.returnDialog.close()
          this.returnDialog = false;
          uni.showToast({title: res.msg, icon: "none"});
          this.getList(true);
        }
      })
    },
    handleServiceStatus(label, item) {
      this.filterTotal = 0
      this.queryParams[label] = item.dictValue;
      for (const key in this.queryParams) {
        if (key == 'fwzt' || key == 'personType' || key == 'gender' || key == 'isReturn' || key == 'personStatus' || key == 'educationLevel') {
          this.filterTotal += this.queryParams[key] ? 1 : 0

        }
      }

    },
    handleStatus(label, item) {
      this.talentInformation[label] = item.dictValue;
    },

    // 获取列表
    async getList(reset) {
      if (this.loading) return;
      this.loading = true;
      uni.showLoading({
        title: "加载中...",
      });
      
      // 重置数据
      if (reset) {
        this.perlist = [];
        this.queryParams.pageNum = 1;
      }
    
      const start = Date.now();
      console.log('接口');
      personInfoList(this.queryParams).then(res => {
        console.log('接口返回数据:', res);
        console.log('接口耗时', Date.now() - start, 'ms');
        if (res.code === 200) {
          this.perlist = [...this.perlist, ...res.rows];
          this.perlist.forEach((element) => {
            this.$set(element, "isEye", false);
          });
          console.log("数据列表",this.perlist)
          this.total = res.total;
          this.status = this.perlist.length >= this.total ? "noMore" : "more";
        }
      }).finally(() => {
        this.loading = false;
        uni.hideLoading();
      });
    },
    // 加载更多人员
    loadMoreJobs() {
      console.log(919191);
      if (this.perlist.length >= this.total || this.status === "noMore") return;
      this.queryParams.pageNum += 1;
      this.getList();
    },
    // 搜索功能处理
    handleSearch() {
      this.$refs.show.close()
      this.show = false;
      this.getList(true);
    },
    markPersonnelStatus() {
      updatePersonInfo(this.talentInformation).then((res) => {
        if (res.code == 200) {
          uni.showToast({title: "标记成功", icon: 'none'});
          this.show1 = false;
          this.getList(true);
        } else {
          uni.showToast({title: "标记失败", icon: 'none'});
        }
      });
    },
    // 根据 value 查找 label
    getLabelByValue(list, value) {
      const found = list.find((item) => item.value === value);
      return found ? found.label : "-";
    },
    getDictLabel(list, dictValue) {
      let arr = list.filter((ele) => ele.dictValue == dictValue);
      if (arr.length) {
        return arr[0].dictLabel;
      } else {
        return "--";
      }
    },
    changeEys(data) {
      if (data.isEye) {
        data.isEye = false;
      } else {
        data.isEye = true;
	    recordLookIdCard(data); //增加点击身份记录
      }
    },
    encryptIdCard(idCard) {
      const carNo =
        idCard.substr(0, 4) + "********" + idCard.substr(idCard.length - 4, 4);
      return carNo;
    },
    handleReview({ id }) {
      this.auditInfo.idList = [id];
      this.$refs.openDialog.open()
      this.openDialog = true;
    },
    // 审核
    async submitAudit() {
      if (!this.auditInfo.auditStatus) return uni.showToast({title: "请选择是否通过", icon: 'none'});
      personInfoAudit(this.auditInfo).then((res) => {
        if (res.code == 200) {
      this.$refs.openDialog.close()
          this.openDialog = false;
          uni.showToast({title: res.msg, icon: 'none'});
          this.getList(true);
        }
      })
    },
    // 重置
    resetInfo() {
      this.auditInfo = {
        idList: [],
        // 2 通过 3 不通过
        auditStatus: "",
        // 不通过原因
        auditReason: "",
      };
    },
    goEmploymentRegister(job) {
      uni.navigateTo({url: `/pages/community/sq_jydj?id=${job.id}`})
    },
    async changeTab(val) {
      this.queryParams.cxlx = val;
      this.cxlx = val;

      this.getList(true);
    },
  },
}
</script>

<style lang="scss" scoped>
.job-list {
  position: relative;
  background-repeat: no-repeat;
  padding: 24rpx 32rpx;
  background-color: #F4F4F4;
  .fixed-navbar {
    position: relative;
    z-index: 999;
    background: transparent;
  }

  &__navbar {
    height: 50rpx;
  }

  &__content {
    position: relative;
    padding: 24rpx;
    padding-top: 30rpx; // 减少顶部内边距
    z-index: 10;
    background-color: #d0dcee;
    border-radius: 32rpx 32rpx 0 0;
    border: 1px solid #fff;
  }

  &__scroll {
    margin-top: 10rpx;
    height: calc(100vh - 300rpx);
  }

  &__item {
    position: relative;
    padding: 32rpx;
    margin: 20rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    font-size: 28rpx;

    .tips {
      position: absolute;
      right: 0;
      top: 0;
      min-width: 40rpx;
      padding: 0 24rpx;
      height: 40rpx;
      line-height: 40rpx;
      color: #1ace62;
      border-radius: 0px 16rpx 0px 16rpx;
      background-color: #d9f9ed;
      border: 1px solid #58e6a2;
    }
  }

  &__item-detail {
    margin-top: 20rpx;
    color: #8e8e8e;

    view,
    text:last-child {
      margin-left: 10rpx;
      color: #333;
    }
  }

  .tab_list {
    margin-top: 30rpx;
    height: 86rpx;
    color: #ce6b1a;
    border-top: 1px solid #eff2f6;
  }

  .items {
    margin-top: 30rpx;
    border-top: 1px solid #d0dcee;
  }

  .post_job_btn {
    position: fixed;
    bottom: 120rpx;
    right: 16rpx;
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    z-index: 20;
    background: url("https://rc.jinan.gov.cn/qcwjyH5/static/images/addPersonnel.png") no-repeat;
    background-size: 100% 100%;
  }

  .dialog_form {
    padding: 30rpx;
    width: 80vw;

    .tadio {
      height: 100rpx;
    }

    .btn {
      margin-top: 100rpx;
    }
  }
}

.job-list__item-detail {
  display: flex;
  align-items: center;
}

.job-list__item-btn {
  height: 60rpx;
  margin-top: 40rpx;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  color: #1a62ce;
  font-size: 26rpx;

  .btn {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 10rpx;
    flex-grow: 1;
  }
}

.job-list__item-top {
  display: flex;
  position: relative;
  width: 100%;

  .job-list__item-top-info {
    margin-left: 40rpx;

    .job-list__item-top-info-name {
      color: #3d3d3d;
      font-family: Source Han Sans;
      font-size: 40rpx;
      font-weight: bold;
    }
  }

  .job-list__item-top-info-fwzt {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
  }
}

.search-filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.search-input-wrapper {
  flex: 8;
  min-width: 0;
  background: #fff;
  border-radius: 80rpx;
  padding: 0 30rpx;
  flex-grow: 1;
  input{
    height: 70rpx;
    line-height: 70rpx;
  }
}

.filter-button-wrapper {
  width: 100rpx;
  margin-left:24rpx;
  
}

.filter-button {
  background: linear-gradient(135deg, #2979ff 0%, #1a62ce 100%);
  color: #fff;
  border-radius: 80rpx;
  padding: 0 24rpx;
  height: 70rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
  width: 100%;
  white-space: nowrap;
}

.custom-style {
  background-color: #4d89e3;
  width: 5rpx;
  color: #fff;
  margin-left: 30rpx;
  border: 1px solid #1a62ce;
  border-radius: 50rpx;
}

.dialog_div {
  .dialog_div_top {
    height: 100rpx;
    border-bottom: 1px solid #e6e6e6;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    color: #077dfe;
  }

  .df_flex_items {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }

  .df_flex {
    display: flex;
    margin-top: 30rpx;
    margin-left: 30rpx;

    .text {
      width: 140rpx;
      display: flex;
      justify-content: flex-end;
    }

    .item-active {
      background: linear-gradient(90deg, #1a62ce 0%, #1d8ace 100%) !important;
      color: #fff;
    }

    .item {
      background: #f2f4f7;
      margin: 0 20rpx;
      margin-bottom: 10rpx;
      padding: 10rpx 20rpx;
      border-radius: 8px;
    }
  }

  .dialog_div_btn {
    display: flex;
    margin: 40rpx;

    .reset-style {
      width: 200rpx;
      background: #ffffff;
      margin-right: 40rpx;
      color: #3d3d3d;
    }

    .sure-style {
      background: linear-gradient(270deg, #4370e5 0%, #53a0ea 100%);
      color: #ffffff;
    }
  }
}

::v-deep {
  .return-dialog-title {
    text-align: center;
    padding: 20rpx 0 32rpx 0;
    font-size: 36rpx;
    font-weight: bold;
  }
}

::v-deep .sort-type {
  // background: #f2f4f7;
  // border: 1rpx solid #e4e4e4;
  border-radius: 16rpx;
  // padding: 4rpx 18rpx;
  // color: rgb(255,134,13);
  .uni-icons.uniui-bottom, .uni-icons.uniui-top{
    display: none;
  }
  .uni-select__input-box.align-left{
    text-align: right;
  }
  .uni-stat-box {
    background: transparent;
  }
}

.tab-bar {
  display: flex;
  background: transparent;
  padding: 16rpx 0;
  
  justify-content: space-between;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12rpx 0;
  margin: 0 12rpx;
  color: #333;
  font-size: 28rpx;
  background: #fff;
  border-radius: 12rpx;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
  
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}

.tab-item.active {
  background: #2979ff;
  color: #fff;
  font-weight: bold;
}

.gender-img {
  width: 88rpx;
  height: 88rpx;
  display: block;
}
.u-status-bar {
  height: 44px;
}
// 在style标签末尾添加
::v-deep {
  .u-navbar__placeholder {
    /* 控制高度 */
    height: 88rpx;/* 根据需要调整高度 */
    
  
    /* 控制其他样式 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
  }
}
::v-deep {
.u-navbar__content{
  color:#ffffff;
}
}

</style>