gameList.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912
  1. <template>
  2. <view class="page-container" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
  3. <!-- 搜索栏 -->
  4. <view class="search-section" :class="{'fixed': isFixed}" :style="isFixed ? { paddingTop: (12 + statusBarHeight) + 'px' } : {}">
  5. <view class="search-bar">
  6. <u-icon name="search" color="#999999" size="32" class="search-icon"></u-icon>
  7. <input type="text" placeholder="搜索职位" class="search-input" v-model="searchKeyword" @confirm="handleSearch" />
  8. </view>
  9. <text class="search-btn" @click="handleSearch">搜索</text>
  10. </view>
  11. <!-- tabs和筛选 -->
  12. <view class="topbg-type flex justify-center" :class="{'fixed': isFixed}">
  13. <view class="topbg-type-box">
  14. <!-- 第一行:tabs -->
  15. <view class="topbg-type-box-row flex justify-between align-center">
  16. <view class="topbg-type-box-l flex align-center">
  17. <view class="topbg-type-box-l-i" :class="current==index?'active':''"
  18. @tap="current = index" v-for="(item,index) in typeList" :key="index">
  19. {{item.label}}
  20. </view>
  21. </view>
  22. <!-- 添加求职意向 -->
  23. <view class="topbg-yx-box-r flex align-center"
  24. @click="goNav('/package/jobIntention/jobIntention')">
  25. <image src="../../../static/images/index/Attachment.svg" class="attachment-icon" />
  26. </view>
  27. </view>
  28. <!-- 第二行:筛选 -->
  29. <view class="topbg-sx-box flex justify-between align-center">
  30. <!-- 分类 -->
  31. <view class="topbg-sx-box-l flex align-center">
  32. <view class="topbg-sx-box-l-i" :class="currentSx==index?'active3':''"
  33. @click="currentSx = index" v-for="(item,index) in sxTypeList" :key="index">
  34. {{item.name}}
  35. </view>
  36. </view>
  37. <view class="topbg-sx-box-r flex align-center">
  38. <!-- 城市 -->
  39. <view class="topbg-sx-box-r-i flex align-center" style="">
  40. <text style="margin-right: 10rpx;"
  41. @click="goNavs('/package/jobIntention/city')">{{city?city:'选择城市'}}</text>
  42. <u-icon name="arrow-down" color="#00B78F" size="16"
  43. @click="goNavs('/package/jobIntention/city')"></u-icon>
  44. </view>
  45. <!-- 筛选 -->
  46. <view class="topbg-sx-box-filter flex align-center">
  47. <text style="margin-right: 10rpx;"
  48. @click="goNavs('/package/screen/screen')">筛选</text>
  49. <u-icon name="arrow-down" color="#999999" size="16"
  50. @click="goNavs('/package/screen/screen')"></u-icon>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- 职位列表 -->
  57. <view class="job-list-section">
  58. <view class="job-list-header">
  59. <text class="job-list-title">亿职赞急聘推荐</text>
  60. <view class="refresh-btn" @click="refreshJobList">
  61. <text>换一批推荐</text>
  62. <image src="../../../static/images/index/shuaxin.svg" class="refresh-icon"></image>
  63. </view>
  64. </view>
  65. <view class="job-list" v-if="dataList.length > 0">
  66. <view class="job-item" @click="gotoInfo(item.postPushId)" v-for="(item, index) in dataList" :key="index">
  67. <view class="job-item-content">
  68. <!-- 公司logo -->
  69. <image :src="item.company ? item.company.companyLogo : '../../../static/logo.png'"
  70. class="company-logo" mode="aspectFill"></image>
  71. <view class="job-info">
  72. <!-- 公司名称 -->
  73. <view class="company-name">{{item.company ? item.company.companyName : ''}}</view>
  74. <!-- 公司规模-行业 -->
  75. <view class="company-details">
  76. <text>{{item.company ? item.company.companyPeople : '0人'}}</text>
  77. <text>{{item.company ? item.industry.split(',').join(' ') : '未知行业'}}</text>
  78. </view>
  79. <!-- 工作时间-福利 -->
  80. <view class="job-benefits">
  81. <text>上午9:00-下午06:30</text>
  82. <text v-for="(benefit, idx) in item.positionWelfare" :key="idx">{{benefit}}</text>
  83. </view>
  84. </view>
  85. <!-- 右箭头 -->
  86. <u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
  87. </view>
  88. </view>
  89. </view>
  90. <!-- 暂无数据 -->
  91. <view class="empty-state" v-else>
  92. <text>暂无急聘职位</text>
  93. </view>
  94. </view>
  95. <!-- 求职列表 -->
  96. <view class="job-search-section">
  97. <view class="job-search-list" v-if="jobSearchList.length > 0">
  98. <view class="job-search-item" @click="gotoInfo(item.postPushId)" v-for="(item, index) in jobSearchList" :key="index">
  99. <!-- 急聘标签 -->
  100. <view class="urgent-tag">
  101. <image src="../../../static/images/index/jijiji.svg" class="urgent-icon"></image>
  102. </view>
  103. <view class="job-search-content">
  104. <!-- 职位标题 -->
  105. <view class="job-title">{{item.stationName || item.positionName || '职位名称'}}</view>
  106. <!-- 公司信息 -->
  107. <view class="company-info">
  108. <text class="company-name">{{item.company ? item.company.companyName : ''}}</text>
  109. <text class="company-name">{{item.company ? item.company.companyPeople : '0人'}}</text>
  110. </view>
  111. <!-- 薪资 -->
  112. <view class="salary" v-if="item.salaryRange">
  113. <text>¥{{item.salaryRange}}/月</text>
  114. <text>
  115. <text class="bonus-tag">奖</text>
  116. <text class="bonus-xin">16薪</text>
  117. </text>
  118. </view>
  119. <!-- 职位要求标签 -->
  120. <view class="job-requirements" v-if="item.experience || item.education || item.positionWelfare">
  121. <text class="requirement-tag" v-if="item.experience">{{item.experience}}</text>
  122. <text class="requirement-tag" v-if="item.education">{{item.education}}</text>
  123. <text class="requirement-tag" v-for="(welfare, idx) in item.positionWelfare" :key="idx">{{welfare}}</text>
  124. </view>
  125. <!-- 联系人信息 -->
  126. <view class="contact-info">
  127. <image :src="item.company?item.company.companyLogo:'../../../static/logo.png'"
  128. style="width: 58rpx;height: 58rpx;border-radius: 50%;margin-right: 20rpx;" mode=""></image>
  129. <view class="company-info-text" v-if="item.company">
  130. {{item.company.companyLegalPerson?item.company.companyLegalPerson:'未知'}}·人事总监
  131. </view>
  132. <view class="reply-time">10分钟前回复</view>
  133. </view>
  134. <!-- 地址和距离 -->
  135. <view class="location-info">
  136. <u-icon name="map" color="#999999" size="16"></u-icon>
  137. <text class="address">{{item.province || ''}}{{item.city || ''}}{{item.county || ''}}{{item.address || ''}}</text>
  138. <image src="../../../static/images/index/navigation.svg" class="distance-icon"></image>
  139. <text class="distance">{{item.distance || '22km'}}</text>
  140. </view>
  141. </view>
  142. </view>
  143. </view>
  144. <!-- 暂无数据 -->
  145. <view class="empty-state" v-else>
  146. <text>暂无更多职位</text>
  147. </view>
  148. </view>
  149. </view>
  150. </template>
  151. <script>
  152. export default {
  153. name: 'gameList',
  154. data() {
  155. return {
  156. statusBarHeight: 0, // 状态栏高度
  157. current: 0,
  158. typeList: [],
  159. currentSx: 0,
  160. sxTypeList: [{
  161. id: 1,
  162. name: '推荐',
  163. },
  164. {
  165. id: 2,
  166. name: '最新',
  167. }
  168. ],
  169. city: '',
  170. searchKeyword: '', // 搜索关键词
  171. dataList: [], // 职位列表
  172. jobSearchList: [], // 求职列表
  173. page: 1,
  174. limit: 10,
  175. searchPage: 1,
  176. searchLimit: 10,
  177. latitude: '',
  178. longitude: '',
  179. isFixed: false, // 是否固定
  180. fixedThreshold: 300, // 固定阈值
  181. };
  182. },
  183. onLoad() {
  184. // 获取状态栏高度
  185. let systemInfo = uni.getSystemInfoSync();
  186. this.statusBarHeight = systemInfo.statusBarHeight || 0;
  187. this.getTypeList()
  188. this.getLocation()
  189. this.getJobSearchList()
  190. },
  191. onPageScroll(e) {
  192. // 监听页面滚动
  193. const scrollTop = e.scrollTop
  194. if (scrollTop > this.fixedThreshold) {
  195. this.isFixed = true
  196. } else {
  197. this.isFixed = false
  198. }
  199. },
  200. methods: {
  201. // 获取工作性质列表
  202. getTypeList() {
  203. this.$Request.getT('/app/dict/list', {
  204. type: '工作性质'
  205. }).then(res => {
  206. if (res.code == 0) {
  207. this.typeList = res.data.map(item => ({
  208. label: item.value,
  209. value: item.code
  210. }))
  211. // 获取到tabs数据后调用职位列表
  212. this.getJobList()
  213. }
  214. })
  215. },
  216. // 跳转到搜索页面
  217. goNavs(url) {
  218. uni.navigateTo({
  219. url: url
  220. })
  221. },
  222. // 跳转到求职意向页面
  223. goNav(url) {
  224. uni.navigateTo({
  225. url: url
  226. })
  227. },
  228. // 处理搜索
  229. handleSearch() {
  230. if (this.searchKeyword.trim()) {
  231. uni.navigateTo({
  232. url: '/package/search/search?keyword=' + encodeURIComponent(this.searchKeyword)
  233. })
  234. } else {
  235. uni.showToast({
  236. title: '请输入搜索关键词',
  237. icon: 'none'
  238. })
  239. }
  240. },
  241. // 获取位置信息
  242. getLocation() {
  243. let that = this
  244. uni.getLocation({
  245. type: 'wgs84',
  246. success: function(res) {
  247. that.latitude = res.latitude;
  248. that.longitude = res.longitude;
  249. that.getJobList()
  250. },
  251. fail: function() {
  252. that.getJobList()
  253. }
  254. })
  255. },
  256. // 获取职位列表
  257. getJobList() {
  258. let data = {
  259. page: this.page,
  260. limit: this.limit,
  261. postType: this.typeList.length > 0 ? this.typeList[this.current].label : '',
  262. screen: +this.currentSx + 1, //1推荐 2最新
  263. city: this.city == '全国' ? '' : this.city,
  264. lng: this.longitude,
  265. lat: this.latitude,
  266. userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
  267. }
  268. this.$Request.get('/app/postPush/userGetPostPushList', data).then(res => {
  269. if (res.code == 0) {
  270. res.data.records.map(item => {
  271. if (item.positionWelfare) {
  272. item.positionWelfare = item.positionWelfare.split(',')
  273. } else {
  274. item.positionWelfare = []
  275. }
  276. if (item.distance) {
  277. if (parseFloat(item.distance) > 1000) {
  278. item.distance = (parseFloat(item.distance) / 1000).toFixed(2) + 'km'
  279. } else {
  280. item.distance = (parseFloat(item.distance)).toFixed(2) + 'm'
  281. }
  282. } else {
  283. item.distance = ''
  284. }
  285. })
  286. if (this.page == 1) {
  287. this.dataList = res.data.records.slice(0, 2)
  288. } else {
  289. this.dataList = [...this.dataList, ...res.data.records.slice(0, 2)]
  290. }
  291. }
  292. })
  293. },
  294. // 跳转到职位详情
  295. gotoInfo(postPushId) {
  296. uni.navigateTo({
  297. url: '/pages/index/game/order?postPushId=' + postPushId
  298. })
  299. },
  300. // 判断岗位名称与职位名称是否相同
  301. isSameName(className, name) {
  302. let str1 = className.trim();
  303. let str2 = name.trim();
  304. if (str1.length !== str2.length) {
  305. return true;
  306. }
  307. return str1.toLowerCase() !== str2.toLowerCase();
  308. },
  309. // 刷新职位列表
  310. refreshJobList() {
  311. this.page = 1
  312. this.getJobList()
  313. },
  314. // 获取求职列表
  315. getJobSearchList() {
  316. let data = {
  317. page: this.searchPage,
  318. limit: this.searchLimit,
  319. postType: this.typeList.length > 0 ? this.typeList[this.current].label : '',
  320. screen: +this.currentSx + 1, //1推荐 2最新
  321. city: this.city == '全国' ? '' : this.city,
  322. lng: this.longitude,
  323. lat: this.latitude,
  324. userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
  325. }
  326. this.$Request.get('/app/postPush/userGetPostPushList', data).then(res => {
  327. if (res.code == 0) {
  328. res.data.records.map(item => {
  329. if (item.positionWelfare) {
  330. item.positionWelfare = item.positionWelfare.split(',')
  331. } else {
  332. item.positionWelfare = []
  333. }
  334. if (item.distance) {
  335. if (parseFloat(item.distance) > 1000) {
  336. item.distance = (parseFloat(item.distance) / 1000).toFixed(2) + 'km'
  337. } else {
  338. item.distance = (parseFloat(item.distance)).toFixed(2) + 'm'
  339. }
  340. } else {
  341. item.distance = ''
  342. }
  343. })
  344. if (this.searchPage == 1) {
  345. this.jobSearchList = res.data.records
  346. } else {
  347. this.jobSearchList = [...this.jobSearchList, ...res.data.records]
  348. }
  349. }
  350. })
  351. }
  352. }
  353. }
  354. </script>
  355. <style lang="scss">
  356. page {
  357. background-color: #F2F2F7;
  358. }
  359. .page-container {
  360. width: 100%;
  361. height: 40vh;
  362. background-image: url('../../../static/images/index/jipinBac.png');
  363. background-size: cover;
  364. background-position: center;
  365. background-repeat: no-repeat;
  366. }
  367. .search-section {
  368. width: 100%;
  369. padding: 0 20rpx;
  370. margin-bottom: 20rpx;
  371. display: flex;
  372. justify-content: space-between;
  373. .search-bar {
  374. flex: 1;
  375. height: 52rpx;
  376. background-color: #ffffff;
  377. border-radius: 40rpx;
  378. display: flex;
  379. align-items: center;
  380. padding: 0 30rpx;
  381. margin-right: 20rpx;
  382. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  383. .search-icon {
  384. margin-right: 20rpx;
  385. }
  386. .search-input {
  387. flex: 1;
  388. height: 100%;
  389. font-size: 24rpx;
  390. color: #333333;
  391. border: none;
  392. outline: none;
  393. background: transparent;
  394. &::placeholder {
  395. color: #999999;
  396. }
  397. }
  398. }
  399. .search-btn {
  400. color: rgba(255, 255, 255, 1);
  401. font-family: DM Sans;
  402. font-size: 24rpx;
  403. font-weight: 500;
  404. line-height: 24px;
  405. letter-spacing: 0%;
  406. text-align: center;
  407. }
  408. }
  409. .active {
  410. font-size: 38rpx !important;
  411. font-weight: 800 !important;
  412. }
  413. .active2 {
  414. color: #1A1A1A !important;
  415. font-size: 38rpx !important;
  416. font-weight: 800 !important;
  417. }
  418. .active3 {
  419. color: #1A1A1A !important;
  420. font-size: 28rpx !important;
  421. font-weight: 800 !important;
  422. }
  423. .topbg-type {
  424. width: 710rpx;
  425. border-radius: 6px;
  426. box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05);
  427. background: rgba(255, 255, 255, 1);
  428. padding: 18rpx 25rpx;
  429. margin: 0rpx auto 12rpx auto;
  430. .topbg-type-box {
  431. width: 686rpx;
  432. }
  433. .topbg-type-box-row {
  434. margin-bottom: 20rpx;
  435. }
  436. .topbg-type-box-l {
  437. flex: 1;
  438. white-space: nowrap;
  439. overflow-x: auto;
  440. }
  441. .topbg-type-box-l-i {
  442. color: rgba(153, 153, 153, 1);
  443. font-family: DM Sans;
  444. font-size: 28rpx;
  445. font-weight: 400;
  446. line-height: 18px;
  447. letter-spacing: 0%;
  448. text-align: left;
  449. margin-right: 14rpx;
  450. &.active {
  451. background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  452. -webkit-background-clip: text;
  453. -webkit-text-fill-color: transparent;
  454. background-clip: text;
  455. text-fill-color: transparent;
  456. font-family: DM Sans;
  457. font-size: 24rpx;
  458. font-weight: 700;
  459. line-height: 48rpx;
  460. letter-spacing: 0%;
  461. text-align: left;
  462. }
  463. }
  464. .topbg-type-box-r {
  465. color: #ffffff;
  466. }
  467. .attachment-icon {
  468. width: 38rpx;
  469. height: 38rpx;
  470. }
  471. }
  472. .topbg-sx-box {
  473. width: 100%;
  474. margin-top: 0rpx;
  475. .topbg-sx-box-l-i {
  476. color: rgba(153, 153, 153, 1);
  477. font-family: DM Sans;
  478. font-size: 24rpx;
  479. font-weight: 400;
  480. line-height: 18px;
  481. letter-spacing: 0%;
  482. text-align: center;
  483. margin-right: 20rpx;
  484. border-radius: 6px;
  485. background: rgba(198, 198, 198, 0.1);
  486. padding: 8rpx 12rpx;
  487. display: inline-block;
  488. min-width: 60rpx;
  489. white-space: nowrap;
  490. &.active3 {
  491. font-family: DM Sans;
  492. font-size: 24rpx !important;
  493. font-weight: 400 !important;
  494. line-height: 18px;
  495. letter-spacing: 0%;
  496. text-align: left;
  497. padding: 8rpx 12rpx !important;
  498. color: rgba(1, 107, 246, 1) !important;
  499. background: rgba(252, 233, 220, 1) !important;
  500. border: 1px solid rgba(1, 107, 246, 1);
  501. }
  502. }
  503. .topbg-sx-box-r-i {
  504. color: rgba(1, 107, 246, 1);
  505. font-family: DM Sans;
  506. font-size: 24rpx;
  507. font-weight: 400;
  508. line-height: 18px;
  509. letter-spacing: 0%;
  510. text-align: center;
  511. margin-right: 20rpx;
  512. border-radius: 6px;
  513. background: rgba(252, 233, 220, 1);
  514. padding: 8rpx 12rpx;
  515. display: inline-block;
  516. min-width: 60rpx;
  517. white-space: nowrap;
  518. cursor: pointer;
  519. transition: all 0.3s ease;
  520. border: 0.5px solid rgba(1, 107, 246, 1);
  521. }
  522. .topbg-sx-box-filter {
  523. color: rgba(153, 153, 153, 1);
  524. font-family: DM Sans;
  525. font-size: 24rpx;
  526. font-weight: 400;
  527. line-height: 18px;
  528. letter-spacing: 0%;
  529. text-align: center;
  530. border-radius: 6px;
  531. background: rgba(198, 198, 198, 0.1);
  532. padding: 8rpx 12rpx;
  533. display: inline-block;
  534. min-width: 60rpx;
  535. white-space: nowrap;
  536. cursor: pointer;
  537. transition: all 0.3s ease;
  538. }
  539. }
  540. .job-list-section {
  541. padding: 20rpx;
  542. margin: 20rpx;
  543. border-radius: 6px;
  544. box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.05);
  545. background: linear-gradient(180.00deg, rgba(255, 179, 180, 1) 1%,rgba(255, 255, 255, 1) 38%);
  546. .job-list-header {
  547. display: flex;
  548. justify-content: space-between;
  549. align-items: center;
  550. margin-bottom: 20rpx;
  551. .job-list-title {
  552. color: rgba(255, 89, 89, 1);
  553. font-family: DM Sans;
  554. font-size: 32rpx;
  555. font-weight: 700;
  556. line-height: 21px;
  557. text-align: left;
  558. }
  559. .refresh-btn {
  560. color: rgba(255, 89, 89, 1);
  561. font-family: DM Sans;
  562. font-size: 18rpx;
  563. font-weight: 400;
  564. line-height: 10px;
  565. text-align: right;
  566. display: flex;
  567. align-items: center;
  568. gap: 8rpx;
  569. .refresh-icon {
  570. width: 28rpx;
  571. height: 28rpx;
  572. }
  573. }
  574. }
  575. .job-list {
  576. .job-item {
  577. background-color: #ffffff;
  578. border-radius: 12rpx;
  579. margin-bottom: 16rpx;
  580. padding: 20rpx;
  581. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  582. .job-item-content {
  583. display: flex;
  584. align-items: center;
  585. gap: 20rpx;
  586. .company-logo {
  587. width: 80rpx;
  588. height: 80rpx;
  589. border-radius: 8rpx;
  590. flex-shrink: 0;
  591. }
  592. .job-info {
  593. flex: 1;
  594. .company-name {
  595. color: rgba(29, 33, 41, 1);
  596. font-family: DM Sans;
  597. font-size: 24rpx;
  598. font-weight: 500;
  599. line-height: 13px;
  600. letter-spacing: 0%;
  601. text-align: left;
  602. margin-bottom: 8rpx;
  603. }
  604. .company-details {
  605. display: flex;
  606. gap: 16rpx;
  607. margin-bottom: 8rpx;
  608. text {
  609. color: rgba(153, 153, 153, 1);
  610. font-family: DM Sans;
  611. font-size: 20rpx;
  612. font-weight: 400;
  613. line-height: 13px;
  614. letter-spacing: 0%;
  615. text-align: left;
  616. }
  617. }
  618. .job-benefits {
  619. display: flex;
  620. gap: 12rpx;
  621. flex-wrap: nowrap;
  622. overflow: hidden;
  623. width: 450rpx;
  624. text {
  625. color: rgba(153, 153, 153, 1);
  626. font-family: DM Sans;
  627. font-size: 20rpx;
  628. font-weight: 400;
  629. line-height: 13px;
  630. letter-spacing: 0%;
  631. text-align: left;
  632. white-space: nowrap;
  633. flex-shrink: 0;
  634. }
  635. }
  636. }
  637. }
  638. }
  639. }
  640. .empty-state {
  641. text-align: center;
  642. padding: 60rpx 0;
  643. color: #999999;
  644. font-size: 28rpx;
  645. }
  646. }
  647. // 求职列表样式
  648. .job-search-section {
  649. width: 100%;
  650. padding: 0 20rpx 20rpx 20rpx;
  651. .job-search-header {
  652. margin-bottom: 20rpx;
  653. .job-search-title {
  654. font-size: 32rpx;
  655. font-weight: 600;
  656. color: #333333;
  657. }
  658. }
  659. .job-search-list {
  660. .job-search-item {
  661. background-color: #ffffff;
  662. border-radius: 12rpx;
  663. margin-bottom: 16rpx;
  664. padding: 30rpx;
  665. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  666. position: relative;
  667. .urgent-tag {
  668. position: absolute;
  669. top: 0rpx;
  670. right: 40rpx;
  671. .urgent-icon {
  672. width: 80rpx;
  673. height: 80rpx;
  674. }
  675. }
  676. .job-search-content {
  677. .job-title {
  678. color: rgba(29, 33, 41, 1);
  679. font-family: DM Sans;
  680. font-size: 36rpx;
  681. font-weight: 500;
  682. line-height: 21px;
  683. letter-spacing: 0%;
  684. text-align: left;
  685. }
  686. .company-info {
  687. display: flex;
  688. gap: 16rpx;
  689. margin: 12rpx 0;
  690. .company-name {
  691. color: rgba(156, 164, 171, 1);
  692. font-family: DM Sans;
  693. font-size: 24rpx;
  694. font-weight: 400;
  695. line-height: 20px;
  696. letter-spacing: 0%;
  697. text-align: left;
  698. }
  699. }
  700. .salary {
  701. display: flex;
  702. align-items: center;
  703. justify-content: space-between;
  704. color: rgba(255, 89, 89, 1);
  705. font-family: DM Sans;
  706. font-size: 32rpx;
  707. font-weight: 700;
  708. line-height: 23px;
  709. letter-spacing: 0%;
  710. text-align: left;
  711. .bonus-tag {
  712. color: rgba(255, 255, 255, 1);
  713. font-family: DM Sans;
  714. padding: 4rpx;
  715. font-size: 24rpx;
  716. font-weight: 400;
  717. letter-spacing: 0%;
  718. text-align: center;
  719. border-radius: 4rpx;
  720. background: rgba(255, 89, 89, 1);
  721. margin-right: 12rpx;
  722. }
  723. .bonus-xin {
  724. color: rgba(255, 89, 89, 1);
  725. font-family: DM Sans;
  726. font-size: 24rpx;
  727. font-weight: 700;
  728. line-height: 20px;
  729. letter-spacing: 0%;
  730. text-align: right;
  731. }
  732. }
  733. .job-requirements {
  734. display: flex;
  735. gap: 12rpx;
  736. flex-wrap: wrap;
  737. margin-bottom: 12rpx;
  738. .requirement-tag {
  739. font-size: 18rpx;
  740. color: rgba(1, 107, 246, 1);
  741. padding: 6rpx 10rpx;
  742. background: rgba(153, 196, 250, 0.4);
  743. border-radius: 12rpx;
  744. margin: 12rpx 0;
  745. }
  746. }
  747. .contact-info {
  748. display: flex;
  749. align-items: center;
  750. margin-bottom: 12rpx;
  751. .company-info-text {
  752. color: rgba(51, 51, 51, 1);
  753. font-family: DM Sans;
  754. font-size: 24rpx;
  755. font-weight: 400;
  756. line-height: 20px;
  757. letter-spacing: 0%;
  758. text-align: left;
  759. }
  760. .reply-time {
  761. display: flex;
  762. flex-direction: row;
  763. justify-content: center;
  764. align-items: center;
  765. padding: 8rpx;
  766. font-family: DM Sans;
  767. font-size: 20rpx;
  768. font-weight: 400;
  769. line-height: 30rpx;
  770. letter-spacing: 0.5%;
  771. text-align: left;
  772. border-radius: 12rpx;
  773. background: #ECE1FD;
  774. color: #8858C5;
  775. margin-left: 12rpx;
  776. }
  777. }
  778. .location-info {
  779. display: flex;
  780. align-items: center;
  781. gap: 8rpx;
  782. .address {
  783. font-size: 22rpx;
  784. color: #999999;
  785. flex: 1;
  786. }
  787. .distance-icon {
  788. width: 24rpx;
  789. height: 24rpx;
  790. }
  791. .distance {
  792. font-size: 22rpx;
  793. color: #999999;
  794. }
  795. }
  796. }
  797. }
  798. }
  799. .empty-state {
  800. text-align: center;
  801. padding: 60rpx 0;
  802. color: #999999;
  803. font-size: 28rpx;
  804. }
  805. }
  806. // 固定样式
  807. .search-section.fixed {
  808. position: fixed;
  809. top: 0;
  810. left: 0;
  811. right: 0;
  812. z-index: 100;
  813. background-image: url('../../../static/images/index/jipinBac.png');
  814. background-size: cover;
  815. background-position: top center;
  816. background-repeat: no-repeat;
  817. height: 19vh;
  818. }
  819. .topbg-type.fixed {
  820. position: fixed;
  821. top: 9vh;
  822. left: 50%;
  823. transform: translateX(-50%);
  824. z-index: 101;
  825. background: rgba(255, 255, 255, 0.95);
  826. backdrop-filter: blur(10rpx);
  827. }
  828. </style>