yizhizan-h5/pages/index/game/gameList.vue

<template>
  <view class="page-container">
    <view class="page-bg">
      <view class="page-bottom"></view>
    </view>
    <!-- 搜索栏 -->
    <view class="search-section" :style="{ paddingTop: 12 + statusBarHeight + 'px' }">
      <!-- :class="{ fixed: isFixed }"
      :style="isFixed ? { paddingTop: 12 + statusBarHeight + 'px' } : {}" -->
      <view class="search-bar">
        <u-icon name="search" color="#999999" size="32" class="search-icon"></u-icon>
        <input
          type="text"
          placeholder="搜索职位"
          class="search-input"
          v-model="searchKeyword"
          @click="handleSearch"
        />
      </view>
      <text class="search-btn" @click="handleSearch">搜索</text>
    </view>

    <view class="page-content">
      <!-- tabs和筛选 -->
      <view class="topbg-type flex justify-center" :class="{ fixed: isFixed }">
        <view class="topbg-type-box">
          <!-- 第一行：tabs -->
          <view class="topbg-type-box-row flex justify-between align-center">
            <view class="topbg-type-box-l flex align-center">
              <view
                class="topbg-type-box-l-i"
                :class="current == index ? 'active' : ''"
                @tap="current = index"
                v-for="(item, index) in typeList"
                :key="index"
              >
                {{ item.label }}
              </view>
            </view>
            <!-- 添加求职意向 -->
            <view
              class="topbg-yx-box-r flex align-center"
              @click="goNav('/package/jobIntention/tagManage')"
            >
              <image
                src="../../../static/images/index/Attachment.svg"
                class="attachment-icon"
              />
            </view>
          </view>

          <!-- 第二行：筛选 -->
          <view class="topbg-sx-box flex justify-between align-center">
            <!-- 分类 -->
            <view class="topbg-sx-box-l flex align-center">
              <view
                class="topbg-sx-box-l-i"
                :class="currentSx == index ? 'active3' : ''"
                @click="currentSx = index"
                v-for="(item, index) in sxTypeList"
                :key="index"
              >
                {{ item.name }}
              </view>
            </view>

            <view class="topbg-sx-box-r flex align-center">
              <!-- 城市 -->
              <view class="topbg-sx-box-r-i flex align-center" style="" @click="getLocation">
                <text style="margin-right: 10rpx">{{county?county:city?city:'选择城市'}}</text>
                <u-icon
                  name="arrow-down"
                  color="#016bf6"
                  size="16"
                ></u-icon>
              </view>

              <!-- 筛选 -->
              <view class="topbg-sx-box-filter flex align-center" :class="{ activeColor: filledFieldsCount }">
                <text
                  style="margin-right: 10rpx"
                  @click="goNavs('/package/screen/screen')"
                  >筛选{{filledFieldsCount}}</text
                >
                <u-icon
                  name="arrow-down"
                  :color="filledFieldsCount?'#016bf6':'#999999'"
                  size="16"
                  @click="goNavs('/package/screen/screen')"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 职位列表 -->
      <view class="job-list-section">
        <view class="job-list-header">
          <text class="job-list-title">亿职赞急聘推荐</text>
          <view class="refresh-btn" @click="refreshJobList">
            <text>换一批推荐</text>
            <image
              src="../../../static/images/index/shuaxin.svg"
              class="refresh-icon"
            ></image>
          </view>
        </view>

        <view class="job-list" v-if="dataList.length > 0">
          <view
            class="job-item"
            @click="gotoInfo(item.postPushId)"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <view class="job-item-content">
              <!-- 公司logo -->
              <image
                :src="
                  item.company ? item.company.companyLogo : '../../../static/logo.png'
                "
                class="company-logo"
                mode="aspectFill"
              ></image>

              <view class="job-info">
                <!-- 公司名称 -->
                <view class="company-name">{{
                  item.company ? item.company.companyName : ""
                }}</view>

                <!-- 公司规模-行业 -->
                <view class="company-details">
                  <text>{{ item.company ? item.company.companyPeople : "0人" }}</text>
                  <text>{{
                    item.company ? item.industry.split(",").join(" ") : "未知行业"
                  }}</text>
                </view>

                <!-- 工作时间-福利 -->
                <view class="job-benefits">
                  <view class="text" v-for="(benefit, idx) in item.positionWelfare" :key="idx">{{
                    benefit
                  }}</view>
                </view>
              </view>

              <!-- 右箭头 -->
              <u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
            </view>
          </view>
        </view>

        <!-- 暂无数据 -->
        <view class="empty-state" v-else>
          <text>暂无急聘职位</text>
        </view>
      </view>

      <!-- 求职列表 -->
      <view class="job-search-section">
        <view class="job-search-list" v-if="jobSearchList.length > 0">
          <view
            class="job-search-item"
            @click="gotoInfo(item.postPushId)"
            v-for="(item, index) in jobSearchList"
            :key="index"
          >
            <!-- 急聘标签 -->
            <view v-if="item.isDue==1" class="urgent-tag">
              <image
                src="../../../static/images/index/jijiji.svg"
                class="urgent-icon"
              ></image>
            </view>

            <view class="job-search-content">
              <!-- 职位标题 -->
              <view class="job-title">{{
                item.stationName || item.positionName || "职位名称"
              }}</view>

              <!-- 公司信息 -->
              <view class="company-info">
                <text class="company-name">{{
                  item.company ? item.company.companyName : ""
                }}</text>
                <text class="company-name">{{
                  item.company ? item.company.companyPeople : "0人"
                }}</text>
              </view>

              <!-- 薪资 -->
              <view class="salary" v-if="item.salaryRange">
                <text>￥{{ item.salaryRange }}/月</text>
                <text>
                  <text class="bonus-tag">奖</text>
                  <text class="bonus-xin">{{item.salaryTimes}}薪</text>
                </text>
              </view>

              <!-- 职位要求标签 -->
              <view
                class="job-requirements"
                v-if="item.experience || item.education || item.welfareTag"
              >
                <text class="requirement-tag" v-if="item.experience">{{
                  item.experience
                }}</text>
                <text class="requirement-tag" v-if="item.education">{{
                  item.education
                }}</text>
                <text
                  class="requirement-tag"
                  v-for="(welfare, idx) in item.welfareTag"
                  :key="idx"
                  >{{ welfare }}</text
                >
              </view>

              <!-- 联系人信息 -->
              <view class="contact-info">
                <image
                  :src="
                    item.hr&&item.hr.hrImg?item.hr.hrImg:'../../../static/logo.png'
                  "
                  style="
                    width: 58rpx;
                    height: 58rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                  "
                  mode=""
                ></image>
                <view class="company-info-text">
                  {{item.user.userName?item.user.userName:'未知'}}·{{item.hr.hrPosition?item.hr.hrPosition:'未知'}}
                </view>
                <view v-if="item.respondTime" class="reply-time">{{item.respondTime}}</view>
              </view>

              <!-- 地址和距离 -->
              <view class="location-info">
                <u-icon name="map" color="#999999" size="16"></u-icon>
                <text class="address"
                  >{{ item.province || "" }}{{ item.city || "" }}{{ item.county || ""
                  }}{{ item.address || "" }}</text
                >
                <image
                  src="../../../static/images/index/navigation.svg"
                  class="distance-icon"
                ></image>
                <text class="distance">{{ item.distance || "--km" }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 暂无数据 -->
        <view class="empty-state" v-else>
          <text>暂无更多职位</text>
        </view>
      </view>
    </view>
	<u-popup mode="top" ref="permission">
		<view class="popup-content">
			<view class="popup-text-permission">获取位置需要定位权限，用于推荐同城的求职岗位或牛人</view>
		</view>
	</u-popup>
  </view>
</template>

<script>
export default {
  name: "gameList",
  data() {
    return {
      statusBarHeight: 0, // 状态栏高度
      current: 0,
      typeList: [],
      currentSx: 0,
      sxTypeList: [
        {
          id: 1,
          name: "推荐",
        },
        {
          id: 2,
          name: "最新",
        },
		{
			id: 3,
			name: '附近',
		}
      ],
	  county: '', //区
      city: "",
      searchKeyword: "", // 搜索关键词
      dataList: [], // 职位列表
      jobSearchList: [], // 求职列表
      page: 1,
      limit: 10,
      searchPage: 1,
      searchLimit: 10,
      latitude: "",
      longitude: "",
	  industry:'',
      isFixed: false, // 是否固定
      fixedThreshold: 300, // 固定阈值
	  education : '' ,//学历
	  experience : '' ,//经验
	  salaryRange : '' ,//薪资
	  companyPeople : '' //公司规模
    };
  },
  computed: {
  	filledFieldsCount() {
         const fields = [this.education, this.experience, this.industry, this.salaryRange, this.companyPeople];
         const count = fields.filter(item => item).length;
         return count > 0 ? '·' + count : '';
  	}
    },
  onLoad() {
    // 获取状态栏高度
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
	let that = this;
	// 更换城市调用getJobSearchList
	// uni.$on('city', data => {
	// 	that.city = data.city
	// 	uni.setStorageSync('city', that.city);
	// 	this.searchPage = 1
	// 	this.getJobSearchList();
	// })
	uni.$on('filterCity', data => {
		that.city = data.city
		that.county = data.county;
		uni.setStorageSync('city', that.city);
		this.searchPage = 1
		this.getJobSearchList();
	})
	// 监听筛选条件触发getJobSearchList
	uni.$on('updateScreenFilterRecord', () => {
		const condition=this.$queue.getFilterData()
		this.education = condition.education //学历
		this.experience = condition.experience //经验
		this.industry = condition.industry //行业
		this.salaryRange = condition.salaryRange //薪资
		this.companyPeople = condition.companyPeople //公司规模
		this.searchPage = 1
		this.getJobSearchList();
	})
	// 监听工作性质变化
	uni.$on('updatePosition', () => {
		this.searchPage = 1;
		this.page = 1;
	    this.getTypeList();
	})
	if (uni.getStorageSync('city')) {
		this.city = uni.getStorageSync('city')
	} else {
		this.city = ''
	}
	const condition=this.$queue.getFilterData()
	this.education = condition.education //学历
	this.experience = condition.experience //经验
	this.industry = condition.industry //行业
	this.salaryRange = condition.salaryRange //薪资
	this.companyPeople = condition.companyPeople //公司规模
	this.getTypeList();
  },
  onUnload(){
	  uni.$off('filterCity');
	// uni.$off('city');
	uni.$off('updateScreenFilterRecord');
	uni.$off('updatePosition')
  },
  watch: {
  	current(newData, oldData) {
  		console.log(this.current)
  		uni.showLoading({
  			title: '加载中'
  		})
  		this.searchPage = 1
  		this.getJobSearchList();
  	},
  	currentSx(newData, oldData) {
  		uni.showLoading({
  			title: '加载中'
  		})
  		this.searchPage = 1
  		this.getJobSearchList();
  	},
  	// currentjob(newData, oldData) {
  	// 	uni.showLoading({
  	// 		title: '加载中'
  	// 	})
  	// 	this.page = 1
  	// 	this.getJobSearchList();
  	// },
  	// currentJobSx(newData, oldData) {
  	// 	uni.showLoading({
  	// 		title: '加载中'
  	// 	})
  	// 	this.page = 1
  	// 	this.getJobSearchList();
  	// },
  	// currentJobSxs(newData, oldData) {
  	// 	uni.showLoading({
  	// 		title: '加载中'
  	// 	})
  	// 	this.page = 1
  	// 	this.getJobSearchList();
  	// },
  },
  onPageScroll(e) {
    // 监听页面滚动
    const scrollTop = e.scrollTop;
    if (scrollTop > this.fixedThreshold) {
      this.isFixed = true;
    } else {
      this.isFixed = false;
    }
  },
  methods: {
    // 获取工作性质列表
    getTypeList() {
		var that=this
		//行业期望
		this.$Request.get('/app/intention/getIntentionList', {}).then(res => {
			if (res.code == 0) {
				let arr = res.data
			let classRule=[]
			let industry=[{id:'不限',name:'不限'}]
			var industryArr=this.industry==''?[]:this.industry.split(',')
			industryArr.forEach(function(item){
				if(that.$queue.array_column(that.directionList,'name').indexOf(item)<0)
					industry.push({id:item,name:item})
			})
			
			arr.forEach(function(item){
				var tmp={}
				tmp.id=item.ruleClassifyId
				tmp.name=item.ruleClassifyName
				tmp.label=item.ruleClassifyName
				classRule.push(tmp)
				var indus=!item.industry?[]:item.industry.split('/')
				indus.forEach(function(ind){
					var tm={}
					tm.name=ind
					tm.id=ind
					if(that.$queue.array_column(industry,'name').indexOf(tm.name)<0)
						industry.push(tm)
				})
			})
				this.typeList = classRule
				this.directionList=industry
				that.getJobSearchList();
				that.getJobList();
			}
		})
		// this.$Request
		// 	.getT("/app/dict/list", {
		// 	  type: "工作性质",
		// 	})
		// 	.then((res) => {
		// 	  if (res.code == 0) {
		// 		this.typeList = res.data.map((item) => ({
		// 		  label: item.value,
		// 		  value: item.code,
		// 		}));
		// 		// 获取到tabs数据后调用职位列表
		// 		this.getJobList();
		// 	  }
		// });
    },
    // 跳转到搜索页面
    goNavs(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 跳转到求职意向页面
    goNav(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 处理搜索
    handleSearch() {
      if (this.searchKeyword.trim()||true) {
        uni.navigateTo({
          url: "/package/search/search?keyword=" + encodeURIComponent(this.searchKeyword),
        });
      } else {
        uni.showToast({
          title: "请输入搜索关键词",
          icon: "none",
        });
      }
    },
    // 获取位置信息
    async getLocation() {
      let that = this;
	  // #ifdef APP
	  const hasPermission = await this.$queue.checkPermission(
	    'location', // 固定传 'location'，双端通用
	    '获取您的位置用于推荐附近的求职岗位或牛人', // 提示文案也无需区分系统（统一表述即可）
		this
	  );
	  				
	  if (!hasPermission) {
	    return that.goNav('/package/screen/city?city='+that.city+'&county='+that.county);
	  }
	  // #endif
	  
	  
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          that.latitude = res.latitude;
          that.longitude = res.longitude;
          that.getSelectCity(res.longitude,res.latitude)
		  that.goNav('/package/screen/city?city='+that.city+'&county='+that.county+'&type='+'search')
        },
        fail: function () {
			that.getTypeList();
			that.goNav('/package/screen/city?city='+that.city+'&county='+that.county+'&type='+'search')
        },
      });
    },
	getSelectCity(longitude, latitude) {
		let that = this;
		this.$Request.get('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
			if (res.code == 0) {
				// console.log(res, '获取地址信息')
				that.city = res.data.city ? res.data.city : '区域'
				uni.setStorageSync('city', res.data.city)
				that.getTypeList();
			}
		});
	},
    // 获取职位列表
    getJobList() {
      let data = {
        page: this.page,
        limit: this.limit,
        postType: this.typeList.length > 0 ? this.typeList[this.current].name : "",
		ruleClassifyName: this.typeList.length > 0 ? this.typeList[this.current].name : "", //岗位名称
        screen: +this.currentSx + 1, //1推荐 2最新
        city: this.city == "区域" || this.city == "全国"? "" : this.city,
        lng: this.longitude,
        lat: this.latitude,
		isDue:1,
        userId: uni.getStorageSync("userId") ? uni.getStorageSync("userId") : "",
      };
      this.$Request.get("/app/postPush/userGetPostPushList", data).then((res) => {
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.positionWelfare) {
              item.positionWelfare = item.positionWelfare.split(",");
            } else {
              item.positionWelfare = [];
            }
            if (item.distance) {
              if (parseFloat(item.distance) > 1000) {
                item.distance = (parseFloat(item.distance) / 1000).toFixed(2) + "km";
              } else {
                item.distance = parseFloat(item.distance).toFixed(2) + "m";
              }
            } else {
              item.distance = "";
            }
          });
          if (this.page == 1) {
            this.dataList = res.data.records.slice(0, 2);
          } else {
            this.dataList = [...this.dataList, ...res.data.records.slice(0, 2)];
          }
        }
      });
    },
    // 跳转到职位详情
    gotoInfo(postPushId) {
      uni.navigateTo({
        url: "/pages/index/game/order?postPushId=" + postPushId,
      });
    },
    // 判断岗位名称与职位名称是否相同
    isSameName(className, name) {
      let str1 = className.trim();
      let str2 = name.trim();
      if (str1.length !== str2.length) {
        return true;
      }
      return str1.toLowerCase() !== str2.toLowerCase();
    },
    // 刷新职位列表
    refreshJobList() {
      this.page = 1;
      this.getJobList();
    },
    // 获取求职列表
    getJobSearchList() {
      let data = {
        page: this.searchPage,
        limit: this.searchLimit,
        postType: this.typeList.length > 0 ? this.typeList[this.current].name : "",
        screen: +this.currentSx + 1, //1推荐 2最新
        city: this.city == "区域" || this.city == "全国"? "" : this.city,
        lng: this.longitude,
        lat: this.latitude,
		isDue:1,
        userId: uni.getStorageSync("userId") ? uni.getStorageSync("userId") : "",
		education:this.education || '',//学历
		experience:this.experience || '',//经验
		industry:this.industry || '',//行业
		salaryRange:this.salaryRange || '',//薪资
		companyPeople:this.companyPeople || ''//公司规模
      };
      this.$Request.get("/app/postPush/userGetPostPushList", data).then((res) => {
		  uni.hideLoading()
        if (res.code == 0) {
          res.data.records.map((item) => {
            if (item.welfareTag) {
              item.welfareTag = item.welfareTag.split(";");
            } else {
              item.welfareTag = [];
            }
            if (item.distance) {
              if (parseFloat(item.distance) > 1000) {
                item.distance = (parseFloat(item.distance) / 1000).toFixed(2) + "km";
              } else {
                item.distance = parseFloat(item.distance).toFixed(2) + "m";
              }
            } else {
              item.distance = "";
            }
          });
          if (this.searchPage == 1) {
            this.jobSearchList = res.data.records;
          } else {
            this.jobSearchList = [...this.jobSearchList, ...res.data.records];
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f7;
}

.page-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .page-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40vh;
    background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
    z-index: -1;
    .page-bottom {
      height: 20vh;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(
        to top,
        rgba(244, 243, 243, 1),
        rgba(255, 255, 255, 0.5) 46%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }
  .page-content {
    flex: 1;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
}

.search-section {
  flex-shrink: 0;
  width: 100%;
  padding: 20rpx 20rpx;
  display: flex;
  justify-content: space-between;

  .search-bar {
    flex: 1;
    height: 52rpx;
    background-color: #ffffff;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-right: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    .search-icon {
      margin-right: 20rpx;
    }

    .search-input {
      flex: 1;
      height: 100%;
      font-size: 24rpx;
      color: #333333;
      border: none;
      outline: none;
      background: transparent;

      &::placeholder {
        color: #999999;
      }
    }
  }

  .search-btn {
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
  }
}

.active {
  font-size: 38rpx !important;
  font-weight: 800 !important;
}

.active2 {
  color: #1a1a1a !important;
  font-size: 38rpx !important;
  font-weight: 800 !important;
}

.active3 {
  color: #1a1a1a !important;
  font-size: 28rpx !important;
  font-weight: 800 !important;
}

.topbg-type {
  width: 710rpx;
  border-radius: 6px;
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 1);
  padding: 18rpx 25rpx;
  margin: 0rpx auto 12rpx auto;

  .topbg-type-box {
    width: 686rpx;
  }

  .topbg-type-box-row {
    margin-bottom: 20rpx;
  }

  .topbg-type-box-l {
    flex: 1;
    white-space: nowrap;
    overflow-x: auto;
  }

  .topbg-type-box-l-i {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: left;
    margin-right: 14rpx;

    &.active {
      background: linear-gradient(
        90deg,
        rgba(13, 39, 247, 1),
        rgba(19, 193, 234, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 700;
      line-height: 48rpx;
      letter-spacing: 0%;
      text-align: left;
    }
  }

  .topbg-type-box-r {
    color: #ffffff;
  }

  .attachment-icon {
    width: 38rpx;
    height: 38rpx;
  }
}

.topbg-sx-box {
  width: 100%;
  margin-top: 0rpx;

  .topbg-sx-box-l-i {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    margin-right: 20rpx;
    border-radius: 6px;
    background: rgba(198, 198, 198, 0.1);
    padding: 8rpx 12rpx;
    display: inline-block;
    min-width: 60rpx;
    white-space: nowrap;

    &.active3 {
      font-family: DM Sans;
      font-size: 24rpx !important;
      font-weight: 400 !important;
      line-height: 18px;
      letter-spacing: 0%;
      text-align: left;
      padding: 8rpx 12rpx !important;
      color: rgba(1, 107, 246, 1) !important;
      background: rgba(252, 233, 220, 1) !important;
      border: 1px solid rgba(1, 107, 246, 1);
    }
  }

  .topbg-sx-box-r-i {
    color: rgba(1, 107, 246, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    margin-right: 20rpx;
    border-radius: 6px;
    background: rgba(252, 233, 220, 1);
    padding: 8rpx 12rpx;
    display: inline-block;
    min-width: 60rpx;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0.5px solid rgba(1, 107, 246, 1);
  }

  .topbg-sx-box-filter {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    border-radius: 6px;
    background: rgba(198, 198, 198, 0.1);
    padding: 8rpx 12rpx;
    display: inline-block;
    min-width: 60rpx;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
  }
}

.job-list-section {
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 6px;
  box-shadow: 0px 5px 8px 0px rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, #78e4ff9d 1%, rgb(255, 255, 255) 38%);

  .job-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .job-list-title {
      color: rgba(1, 107, 246, 1);
      font-family: DM Sans;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 21px;
      text-align: left;
    }

    .refresh-btn {
      color: rgba(1, 107, 246, 1);
      font-family: DM Sans;
      font-size: 18rpx;
      font-weight: 400;
      line-height: 10px;
      text-align: right;
      display: flex;
      align-items: center;
      gap: 8rpx;

      .refresh-icon {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }

  .job-list {
    .job-item {
      background-color: #ffffff;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

      .job-item-content {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .company-logo {
          width: 80rpx;
          height: 80rpx;
          border-radius: 8rpx;
          flex-shrink: 0;
        }

        .job-info {
          flex: 1;

          .company-name {
            color: rgba(29, 33, 41, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 13px;
            letter-spacing: 0%;
            text-align: left;
            margin-bottom: 8rpx;
          }

          .company-details {
            display: flex;
            gap: 16rpx;
            margin-bottom: 8rpx;

            text {
              color: rgba(153, 153, 153, 1);
              font-family: DM Sans;
              font-size: 20rpx;
              font-weight: 400;
              line-height: 13px;
              letter-spacing: 0%;
              text-align: left;
            }
          }

          .job-benefits {
            display: flex;
            gap: 12rpx;
            flex-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 450rpx;
            .text {
              color: rgba(153, 153, 153, 1);
              font-family: DM Sans;
              font-size: 20rpx;
              font-weight: 400;
              line-height: 26rpx;
              letter-spacing: 0%;
              text-align: left;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              // 可选：设置最大宽度
              max-width: 100rpx;
              flex-shrink: 0;
            }
          }
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60rpx 0;
    color: #999999;
    font-size: 28rpx;
  }
}

// 求职列表样式
.job-search-section {
  width: 100%;
  padding: 0 20rpx 20rpx 20rpx;

  .job-search-header {
    margin-bottom: 20rpx;

    .job-search-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
    }
  }

  .job-search-list {
    .job-search-item {
      background-color: #ffffff;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      padding: 30rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      position: relative;

      .urgent-tag {
        position: absolute;
        top: 0rpx;
        right: 40rpx;

        .urgent-icon {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .job-search-content {
        .job-title {
          color: rgba(29, 33, 41, 1);
          font-family: DM Sans;
          font-size: 36rpx;
          font-weight: 500;
          line-height: 21px;
          letter-spacing: 0%;
          text-align: left;
        }

        .company-info {
          display: flex;
          gap: 16rpx;
          margin: 12rpx 0;

          .company-name {
            color: rgba(156, 164, 171, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0%;
            text-align: left;
          }
        }

        .salary {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: rgba(1, 107, 246, 1);
          font-family: DM Sans;
          font-size: 32rpx;
          font-weight: 700;
          line-height: 23px;
          letter-spacing: 0%;
          text-align: left;

          .bonus-tag {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            padding: 4rpx;
            font-size: 24rpx;
            font-weight: 400;
            letter-spacing: 0%;
            text-align: center;
            border-radius: 4rpx;
            background: rgba(1, 107, 246, 1);
            margin-right: 12rpx;
          }

          .bonus-xin {
            color: rgba(1, 107, 246, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 700;
            line-height: 20px;
            letter-spacing: 0%;
            text-align: right;
          }
        }

        .job-requirements {
          display: flex;
          gap: 12rpx;
          flex-wrap: wrap;
          margin-bottom: 12rpx;

          .requirement-tag {
            font-size: 18rpx;
            color: rgba(1, 107, 246, 1);
            padding: 6rpx 10rpx;
            background: rgba(153, 196, 250, 0.4);
            border-radius: 12rpx;
            margin: 12rpx 0;
          }
        }

        .contact-info {
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;

          .company-info-text {
            color: rgba(51, 51, 51, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0%;
            text-align: left;
          }

          .reply-time {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 8rpx;
            font-family: DM Sans;
            font-size: 20rpx;
            font-weight: 400;
            line-height: 30rpx;
            letter-spacing: 0.5%;
            text-align: left;
            border-radius: 12rpx;
            background: #ece1fd;
            color: #8858c5;
            margin-left: 12rpx;
          }
        }

        .location-info {
          display: flex;
          align-items: center;
          gap: 8rpx;

          .address {
            font-size: 22rpx;
            color: #999999;
            flex: 1;
          }

          .distance-icon {
            width: 24rpx;
            height: 24rpx;
          }

          .distance {
            font-size: 22rpx;
            color: #999999;
          }
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60rpx 0;
    color: #999999;
    font-size: 28rpx;
  }
}

// 固定样式
.search-section.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-image: url("../../../static/images/index/jipinBac.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  height: 19vh;
}


.topbg-type.fixed {
  position: fixed;
  top: 9vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
}
.activeColor{
	color: #016bf6 !important;
	border:1rpx solid #016bf6;
	background: #fce9dc !important;
}
</style>