|
|
@@ -1,17 +1,28 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <view class="custom-navbar">
|
|
|
+ <view class="navbar-content">
|
|
|
+ <view class="nav-left" @click="goBack">
|
|
|
+ <u-icon name="arrow-leftward" color="#333" size="38"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="nav-title">职位搜索</view>
|
|
|
+ <view class="nav-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 搜索 -->
|
|
|
<view class="search flex align-center justify-center">
|
|
|
<view class="search-box">
|
|
|
- <u-search placeholder="搜索岗位" shape="square" @clear="clear" v-model="keyword" @custom="custom"
|
|
|
- @search="custom"></u-search>
|
|
|
+ <u-search placeholder="搜索职位或公司" shape="round" searchIconSize = 40 searchIconColor="rgba(153, 153, 153, 1)" bgColor="rgba(241, 241, 241, 1)" borderColor="rgba(227, 231, 236, 1)" @clear="clear" v-model="keyword" @custom="custom" @search="custom"></u-search>
|
|
|
</view>
|
|
|
</view>
|
|
|
<block v-if="show">
|
|
|
+ <!-- 历史搜索 -->
|
|
|
<view class="searchJl flex justify-center">
|
|
|
<view class="searchJl-box">
|
|
|
- <view class="searchJl-box-title">
|
|
|
- 热门搜索
|
|
|
+ <view class="searchJl-box-header">
|
|
|
+ <text class="searchJl-box-title">历史搜索</text>
|
|
|
+ <image src="../../static/images/shanchu22.svg" style="width: 32rpx; height: 32rpx;" mode="aspectFit" @click="clearHistory"></image>
|
|
|
</view>
|
|
|
<view class="searchJl-box-label flex align-center flex-wrap">
|
|
|
<view class="searchJl-box-item" @click="goSearch(item.keyWord)"
|
|
|
@@ -21,12 +32,35 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 近期热招 -->
|
|
|
+ <view class="hot-jobs-container flex justify-center">
|
|
|
+ <view class="hot-jobs-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">近期热招</text>
|
|
|
+ <image src="../../static/images/shanchu22.svg" style="width: 32rpx; height: 32rpx;" mode="aspectFit" @click="clearHotJobs"></image>
|
|
|
+ </view>
|
|
|
+ <view class="hot-jobs-grid">
|
|
|
+ <view
|
|
|
+ class="hot-job-item"
|
|
|
+ v-for="(job, index) in hotJobsList"
|
|
|
+ :key="index"
|
|
|
+ @click="selectHotJob(job)"
|
|
|
+ >
|
|
|
+ <text class="job-name">{{ job.name }}</text>
|
|
|
+ <view class="hot-tag" v-if="job.isHot">
|
|
|
+ <text class="hot-tag-text">Hot</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
<!-- 筛选 -->
|
|
|
<view class="screen flex justify-center align-center">
|
|
|
<view class="screen-box">
|
|
|
- <view class="topbg-sx-box flex justify-between align-center">
|
|
|
+ <view class="topbg-sx-box">
|
|
|
<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">
|
|
|
@@ -34,17 +68,20 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="topbg-sx-box-r flex align-center">
|
|
|
- <text style="color: #00B78F;font-size: 28rpx;font-weight: 500;margin-right: 10rpx;"
|
|
|
- @click="goNav('/package/screen/city?city='+city+'&county='+county)">{{county?county:city}}</text>
|
|
|
- <u-icon name="arrow-down-fill" color="#00B78F" size="20"
|
|
|
- @click="goNav('/package/screen/city?city='+city+'&county='+county)"></u-icon>
|
|
|
-
|
|
|
- <text style="color: #CCCCCC;margin-left: 30rpx;margin-right: 30rpx;">|</text>
|
|
|
+ <view class="city-container" @click="goNav('/package/screen/city?city='+city+'&county='+county)">
|
|
|
+ <text class="city-text" style="margin-right: 10rpx;">{{county?county:city}}</text>
|
|
|
+ <u-icon name="arrow-down" color="#999999" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
|
|
|
- <text style="color: #999999;font-size: 28rpx;font-weight: 500;margin-right: 10rpx;"
|
|
|
- @click="goNav('/package/screen/screen')">筛选</text>
|
|
|
- <u-icon name="arrow-down-fill" color="#CCCCCC" size="20"
|
|
|
- @click="goNav('/package/screen/screen')"></u-icon>
|
|
|
+ <view class="sort-container" @click="showSortModal">
|
|
|
+ <text class="sort-text" style="margin-right: 10rpx;">综合排序</text>
|
|
|
+ <u-icon name="arrow-down" color="rgba(1, 107, 246, 1)" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="filter-container" @click="goNav('/package/screen/screen')">
|
|
|
+ <text class="filter-text" style="margin-right: 10rpx;">筛选</text>
|
|
|
+ <u-icon name="arrow-down" color="#999999" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -56,40 +93,52 @@
|
|
|
<view class="gwList-box-item flex justify-center" @click="gotoInfo(item.postPushId)"
|
|
|
v-for="(item,index) in dataList" :key="index">
|
|
|
<view class="gwList-box-item-box">
|
|
|
+ <!-- 标题-薪资 -->
|
|
|
<view class="gwList-box-item-box-title flex justify-between align-center">
|
|
|
- <view class=""
|
|
|
- style="max-width: 450rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
|
|
|
- <block v-if="isSameName(item.ruleClassifyName,item.stationName)">
|
|
|
- {{item.ruleClassifyName}}-
|
|
|
- </block>
|
|
|
- <block>
|
|
|
- {{item.stationName}}
|
|
|
- </block>
|
|
|
+ <view class="title-left flex align-center">
|
|
|
+ <view class="job-title-text"
|
|
|
+ style="max-width: 450rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
|
|
|
+ <block v-if="isSameName(item.ruleClassifyName,item.stationName)">
|
|
|
+ {{item.ruleClassifyName}}-
|
|
|
+ </block>
|
|
|
+ <block>
|
|
|
+ {{item.stationName}}
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <view class="salary-text-box">
|
|
|
+ <image src="../../static/images/index/jipinIcom.svg" class="jipin-icon" />
|
|
|
+ <text class="jipin-text">急聘</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <text>{{item.salaryRange}}</text>
|
|
|
+ <text class="salary-text">{{item.salaryRange}}</text>
|
|
|
</view>
|
|
|
- <view class="gwList-box-item-box-label flex align-center flex-wrap">
|
|
|
- <text
|
|
|
- style="color: #666666;font-size: 26rpx;padding: 10rpx 25rpx 10rpx 25rpx;background-color: #F6F6F6;border-radius: 8rpx;margin-right: 20rpx;margin-bottom: 20rpx;"
|
|
|
- v-for="(ite,ind) in item.positionWelfare" :key="ind">{{ite}}</text>
|
|
|
+ <!-- 公司名称-公司人数 -->
|
|
|
+ <view class="gwList-box-item-box-name flex align-center">
|
|
|
+ <text class="company-name" style="margin-right: 8rpx;">{{item.company?item.company.companyName:''}}</text>
|
|
|
+ <text class="company-people"
|
|
|
+ v-if="item.company">{{item.company?item.company.companyPeople:'0人'}}</text>
|
|
|
</view>
|
|
|
- <view class="gwList-box-item-box-name flex justify-between align-center">
|
|
|
- <text>{{item.company?item.company.companyName:''}}</text>
|
|
|
- <text v-if="item.company">{{item.company?item.company.companyPeople:''}}</text>
|
|
|
+ <!-- 职位标签 -->
|
|
|
+ <view class="gwList-box-item-box-label flex align-center flex-wrap">
|
|
|
+ <text class="job-tag">{{item.education}}</text>
|
|
|
+ <text class="job-tag">{{item.experience}}</text>
|
|
|
+ <text class="job-tag" v-for="(ite,ind) in item.positionWelfare" :key="ind">{{ite}}</text>
|
|
|
</view>
|
|
|
- <view class="gwList-box-item-box-line"></view>
|
|
|
+ <!-- <view class="gwList-box-item-box-line"></view> -->
|
|
|
+ <!-- 公司简介-位置 -->
|
|
|
<view class="gwList-box-item-box-info flex justify-between align-center">
|
|
|
<view class="gwList-box-item-box-info-l flex align-center">
|
|
|
- <image :src="item.company?item.company.companyLogo:'../../static/logo.png'"
|
|
|
+ <image
|
|
|
+ :src="item.company?item.company.companyLogo:'../../static/logo.png'"
|
|
|
style="width: 58rpx;height: 58rpx;border-radius: 50%;margin-right: 20rpx;"
|
|
|
mode=""></image>
|
|
|
- <text
|
|
|
- v-if="item.company">{{item.company?item.company.companyLegalPerson:'未知'}}·创始人</text>
|
|
|
+ <view class="company-info-text" v-if="item.company">
|
|
|
+ {{item.company.companyLegalPerson?item.company.companyLegalPerson:'未知'}}·人事总监
|
|
|
+ </view>
|
|
|
+ <view class="reply-time">10分钟前回复</view>
|
|
|
</view>
|
|
|
- <view class="gwList-box-item-box-info-r">
|
|
|
- {{item.county}}
|
|
|
- {{item.address}}
|
|
|
-
|
|
|
+ <view class="location-text">
|
|
|
+ {{item.county}} {{item.address}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -102,6 +151,33 @@
|
|
|
<empty />
|
|
|
</view>
|
|
|
</block>
|
|
|
+
|
|
|
+ <!-- 排序弹窗 -->
|
|
|
+ <view class="sort-modal" v-if="showSortModalFlag" @click="hideSortModal">
|
|
|
+ <view class="sort-modal-content" @click.stop>
|
|
|
+ <!-- 拖拽条 -->
|
|
|
+ <view class="sort-modal-handle"></view>
|
|
|
+
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="sort-modal-title">排序</view>
|
|
|
+
|
|
|
+ <!-- 排序选项 -->
|
|
|
+ <view class="sort-options">
|
|
|
+ <view
|
|
|
+ class="sort-option"
|
|
|
+ :class="selectedSort === index ? 'active' : ''"
|
|
|
+ @click="selectSort(index)"
|
|
|
+ v-for="(option, index) in sortOptions"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="sort-option-icon">
|
|
|
+ <view class="check-icon" v-if="selectedSort === index">✓</view>
|
|
|
+ </view>
|
|
|
+ <text class="sort-option-text">{{ option }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -140,6 +216,19 @@
|
|
|
latitude: '',
|
|
|
dataList: [],
|
|
|
searchList: [],
|
|
|
+ hotJobsList: [
|
|
|
+ { name: '美国亚马逊运营', isHot: false },
|
|
|
+ { name: '采购经理', isHot: false },
|
|
|
+ { name: 'Tik Tok运营助理', isHot: true },
|
|
|
+ { name: 'Temu运营专员', isHot: false },
|
|
|
+ { name: '跨境电商运营助理', isHot: false },
|
|
|
+ { name: '产品开发经理', isHot: false },
|
|
|
+ { name: '海外仓管理经理', isHot: false },
|
|
|
+ { name: '人事经理', isHot: false }
|
|
|
+ ],
|
|
|
+ showSortModalFlag: false,
|
|
|
+ selectedSort: 0,
|
|
|
+ sortOptions: ['综合排序', '最新优先', '距离优先']
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -230,6 +319,13 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * 返回上一页
|
|
|
+ */
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+
|
|
|
//判断岗位名称与职位名称是否相同（不区分大小写）
|
|
|
isSameName(className, name) {
|
|
|
let str1 = className.trim();
|
|
|
@@ -366,46 +462,146 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ // 选择热门职位
|
|
|
+ selectHotJob(job) {
|
|
|
+ this.keyword = job.name
|
|
|
+ this.custom()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示排序弹窗
|
|
|
+ showSortModal() {
|
|
|
+ this.showSortModalFlag = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 隐藏排序弹窗
|
|
|
+ hideSortModal() {
|
|
|
+ this.showSortModalFlag = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择排序选项
|
|
|
+ selectSort(index) {
|
|
|
+ this.selectedSort = index
|
|
|
+ uni.showToast({
|
|
|
+ title: `已选择: ${this.sortOptions[index]}`,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ this.hideSortModal()
|
|
|
+ // 这里可以添加排序逻辑
|
|
|
+ },
|
|
|
+
|
|
|
+ // 判断分类名称和职位名称是否相同
|
|
|
+ isSameName(className, name) {
|
|
|
+ let str1 = className.trim();
|
|
|
+ let str2 = name.trim();
|
|
|
+ if (str1.length !== str2.length) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return str1.toLowerCase() !== str2.toLowerCase();
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page {
|
|
|
- background: #F2F2F7;
|
|
|
- }
|
|
|
+ // page {
|
|
|
+ // background: #F2F2F7;
|
|
|
+ // }
|
|
|
|
|
|
.active3 {
|
|
|
- color: #1A1A1A !important;
|
|
|
- font-size: 28rpx !important;
|
|
|
- font-weight: 800 !important;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #FFFFFF !important;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ border: 0.5px solid rgba(1, 107, 246, 1);
|
|
|
+
|
|
|
+ color: rgba(1, 107, 246, 1) !important;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-navbar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 80rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ z-index: 10000;
|
|
|
+
|
|
|
+ .navbar-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .nav-left, .nav-right {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 26px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.search {
|
|
|
width: 100%;
|
|
|
+ padding-top: 20rpx;
|
|
|
height: 88rpx;
|
|
|
background-color: #ffffff;
|
|
|
position: fixed;
|
|
|
- top: 0;
|
|
|
+ top: 160rpx;
|
|
|
z-index: 9999;
|
|
|
|
|
|
.search-box {
|
|
|
width: 686rpx;
|
|
|
height: 60rpx;
|
|
|
}
|
|
|
+
|
|
|
+ /deep/ .u-action {
|
|
|
+ color: rgba(1, 107, 246, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.screen {
|
|
|
width: 100%;
|
|
|
- height: 100rpx;
|
|
|
+ height: 160rpx;
|
|
|
background-color: #ffffff;
|
|
|
position: fixed;
|
|
|
- top: 88rpx;
|
|
|
+ top: 246rpx;
|
|
|
z-index: 9999;
|
|
|
|
|
|
.screen-box {
|
|
|
+ padding-top: 20rpx;
|
|
|
width: 686rpx;
|
|
|
- height: 80rpx;
|
|
|
+ height: 160rpx;
|
|
|
|
|
|
.topbg-sx-box {
|
|
|
width: 686rpx;
|
|
|
@@ -413,94 +609,429 @@
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
.topbg-sx-box-l-i {
|
|
|
- color: #999999;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- margin-right: 38rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: rgba(153, 153, 153, 0.1);
|
|
|
+ margin-right: 12rpx;
|
|
|
+
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 筛选栏右侧容器样式
|
|
|
+ .city-container {
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: rgba(198, 198, 198, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-container {
|
|
|
+ color: rgba(1, 107, 246, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 0.5px solid rgba(1, 107, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-container {
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: rgba(198, 198, 198, 0.1);
|
|
|
+ }
|
|
|
|
|
|
.searchJl {
|
|
|
width: 100%;
|
|
|
background-color: #ffffff;
|
|
|
position: fixed;
|
|
|
- top: 80rpx;
|
|
|
+ top: 240rpx;
|
|
|
height: calc(100vh - 80rpx);
|
|
|
|
|
|
.searchJl-box {
|
|
|
width: 686rpx;
|
|
|
height: 100%;
|
|
|
+ padding-top: 48rpx;
|
|
|
+
|
|
|
+ .searchJl-box-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
|
|
|
.searchJl-box-title {
|
|
|
- color: #333333;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 40rpx;
|
|
|
+ color: rgba(34, 37, 42, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
|
|
|
.searchJl-box-label {
|
|
|
width: 100%;
|
|
|
- margin-top: 20rpx;
|
|
|
+ gap: 8rpx;
|
|
|
|
|
|
.searchJl-box-item {
|
|
|
- padding: 20rpx;
|
|
|
+ padding: 12rpx;
|
|
|
border-radius: 8rpx;
|
|
|
- background-color: #F5F5F5;
|
|
|
- color: #333333;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- margin-right: 20rpx;
|
|
|
+ background: rgba(153, 153, 153, 0.1);
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 近期热招容器样式
|
|
|
+ .hot-jobs-container {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: fixed;
|
|
|
+ top: 420rpx; // 调整位置，在历史搜索下方
|
|
|
+ height: calc(100vh - 400rpx);
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ .hot-jobs-section {
|
|
|
+ width: 686rpx;
|
|
|
+ padding-top: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 近期热招样式
|
|
|
+ .hot-jobs-section {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ color: rgba(34, 37, 42, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot-jobs-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .hot-job-item {
|
|
|
+ width: calc(50% - 4rpx);
|
|
|
+ padding: 8rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .job-name {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 8rpx;
|
|
|
+ right: 10rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: rgba(237, 66, 69, 1);
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+
|
|
|
+ .hot-tag-text {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 16rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 排序弹窗样式
|
|
|
+ .sort-modal {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 10001;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .sort-modal-content {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx 24rpx 0 0;
|
|
|
+ padding: 20rpx 40rpx 40rpx 40rpx;
|
|
|
+ max-height: 60vh;
|
|
|
+
|
|
|
+ .sort-modal-handle {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #E5E5E5;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin: 0 auto 30rpx auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-modal-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ border-bottom: 1px solid rgba(153, 153, 153, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-options {
|
|
|
+ .sort-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ // background: #F8F8F8;
|
|
|
+ border-radius: 42rpx;
|
|
|
+ border: 2rpx solid rgba(227, 231, 236, 1);
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #F0F8FF;
|
|
|
+ border-color: #007AFF;
|
|
|
+
|
|
|
+ .sort-option-icon {
|
|
|
+ background: #007AFF;
|
|
|
+ border-color: #007AFF;
|
|
|
+
|
|
|
+ .check-icon {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-option-text {
|
|
|
+ color: #007AFF;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-option-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2rpx solid #E5E5E5;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 24rpx;
|
|
|
+
|
|
|
+ .check-icon {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-option-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .job-title-text {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .salary-text-box {
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background: #FEE2E3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+
|
|
|
+ .jipin-icon {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jipin-text {
|
|
|
+ color: rgba(237, 66, 69, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 18rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .salary-text {
|
|
|
+ color: rgba(1, 107, 246, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-name,
|
|
|
+ .company-people {
|
|
|
+ color: rgba(156, 164, 171, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .job-tag {
|
|
|
+ height: 42rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: rgba(198, 198, 198, 0.1);
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-info-text,
|
|
|
+ .location-text {
|
|
|
+ color: rgba(156, 164, 171, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ 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: 40rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #ECE1FD;
|
|
|
+ color: #8858C5;
|
|
|
+ }
|
|
|
+
|
|
|
.gwList {
|
|
|
width: 100%;
|
|
|
- margin-top: 200rpx;
|
|
|
+ margin-top: 410rpx;
|
|
|
|
|
|
.gwList-box {
|
|
|
- width: 686rpx;
|
|
|
+ width: 710rpx;
|
|
|
height: 100%;
|
|
|
|
|
|
.gwList-box-item {
|
|
|
width: 100%;
|
|
|
// height: 329rpx;
|
|
|
background-color: #ffffff;
|
|
|
- border-radius: 24rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
- padding-bottom: 20rpx;
|
|
|
+ padding: 36rpx;
|
|
|
+ background: rgba(253, 253, 253, 1);
|
|
|
+ border: 0.5px solid rgba(227, 231, 236, 1);
|
|
|
}
|
|
|
|
|
|
.gwList-box-item-box {
|
|
|
- width: 623rpx;
|
|
|
+ width: 686rpx;
|
|
|
height: 100%;
|
|
|
|
|
|
.gwList-box-item-box-title {
|
|
|
- margin-top: 30rpx;
|
|
|
-
|
|
|
- view:nth-of-type(1) {
|
|
|
- color: #1F1F1F;
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
-
|
|
|
- text:nth-of-type(1) {
|
|
|
- color: #00B88F;
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.gwList-box-item-box-label {
|
|
|
- margin-top: 30rpx;
|
|
|
+ margin-top: 14rpx;
|
|
|
}
|
|
|
|
|
|
.gwList-box-item-box-name {
|
|
|
- margin-top: 24rpx;
|
|
|
+ margin-top: 14rpx;
|
|
|
color: #999999;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
