resumeDetail.vue 25 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115
  1. <template>
  2. <view class="resume-detail" :style="{ paddingTop: (12 + statusBarHeight + 88 - 60) + 'px' }">
  3. <!-- 固定顶部导航栏 -->
  4. <view class="fixed-nav" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
  5. <view class="navbar">
  6. <view class="navbar-content">
  7. <view class="navbar-left" @click="goBack">
  8. <u-icon name="arrow-leftward" size="38" color="#333"></u-icon>
  9. </view>
  10. <view class="navbar-title">简历详情</view>
  11. <view class="nav-right">
  12. <view class="nav-icon" @click="setCollection">
  13. <image v-if="resumeData.isCollection == 0" src="/static/images/index/guanzhu.svg" class="icon-img"></image>
  14. <image v-else src="/static/images/index/gzActive.svg" style="width: 50rpx;height: 50rpx;"></image>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. <!-- 用户信息区域 -->
  21. <view class="user-profile" style="margin-top: 20rpx;">
  22. <view class="profile-header">
  23. <view class="name-section">
  24. <view class="user-name">{{ resumeList.userName || '匿名用户' }}</view>
  25. <view class="status-tag">热门搜索</view>
  26. </view>
  27. <view class="avatar-container">
  28. <image :src="resumeList.userAvatar || '../../static/logo.png'" class="user-avatar"
  29. mode="aspectFill">
  30. </image>
  31. <view class="notification-badge"></view>
  32. </view>
  33. </view>
  34. <view class="current-job">
  35. <image src="../../static/images/aixin.svg" class="job-icon" mode="aspectFit"></image>
  36. <text class="job-text">{{ workExpList && workExpList.length > 0 && workExpList[0].companyName || '暂无'
  37. }}</text>
  38. <text class="job-text">{{ workExpList && workExpList.length > 0 &&
  39. workExpList[0].workExpDetailList[0].position || '暂无' }}</text>
  40. </view>
  41. <view class="availability">
  42. <text class="status-text">{{ resumesStatus[resumeList.resumesStatus] || '离职&随时到岗位' }}</text>
  43. </view>
  44. <view class="summary-info">
  45. <view class="summary-item">
  46. <text class="summary-text">{{ resumeData.resumesWorkExperience || '0' }}年</text>
  47. </view>
  48. <view class="summary-item">
  49. <text class="summary-text">{{ resumeList.degree || '无' }}</text>
  50. </view>
  51. <view class="summary-item">
  52. <text class="summary-text">{{ resumeList.userAge || '无' }}岁</text>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- 内容区域 -->
  57. <view class="content-section">
  58. <!-- 个人优势 -->
  59. <view class="section-item">
  60. <view class="advantage-content">
  61. {{ resumeList.adv || '暂无个人优势。(最多展示三行)' }}
  62. </view>
  63. </view>
  64. <!-- 附件简历 -->
  65. <!-- <view class="attachment-section">
  66. <view class="attachment-btn">
  67. <image src="../../static/images/fujian.svg" class="attachment-icon" mode="aspectFit"></image>
  68. <text class="attachment-text">已上传附件简历</text>
  69. </view>
  70. </view> -->
  71. <!-- 求职期望 -->
  72. <view class="expectation-card" v-if="intentions && intentions.length > 0">
  73. <view class="card-header">
  74. <text class="header-title">求职期望</text>
  75. </view>
  76. <view class="job-expectation" v-for="(item, index) in intentions" :key="item.intentionId">
  77. <view class="expectation-text">
  78. {{ item.ruleClassifyName || '无' }},{{ item.citys || '无' }}
  79. <text v-if="item.postType">({{ item.postType }})</text>
  80. </view>
  81. <text class="salary-range">
  82. {{ item.salaryRange ? item.salaryRange + '元' : '薪资未填写' }}
  83. </text>
  84. </view>
  85. </view>
  86. <!-- 如果为空 -->
  87. <view v-else class="expectation-card">
  88. <view class="card-header">
  89. <text class="header-title">求职期望</text>
  90. </view>
  91. <view class="job-expectation">
  92. <text class="expectation-text">暂无求职期望</text>
  93. </view>
  94. </view>
  95. <view class="jobRemarks-box-c-title flex align-center">
  96. <image src="/static/images/index/ins.png" class="title-icon"></image>
  97. <text>工作经历</text>
  98. </view>
  99. <!-- 工作经历 -->
  100. <view class="work-experience-section">
  101. <view class="section-header">
  102. <view class="section-title">
  103. <text class="required-title">工作经历</text>
  104. <view class="section-desc">请填写专属跨境行业的工作经验</view>
  105. </view>
  106. </view>
  107. <view class="experience-list" v-if="workExpList && workExpList.length > 0">
  108. <view class="experience-item" v-for="(item, index) in workExpList" :key="item.workExpId">
  109. <view class="company-logo">
  110. <image src="../../static/images/index/changsha.svg" class="logo-img" mode="aspectFit">
  111. </image>
  112. </view>
  113. <view class="experience-content">
  114. <!-- 公司名 -->
  115. <view class="company-title">{{ item.companyName }}</view>
  116. <!-- 遍历详细工作经历 -->
  117. <view class="job-detail" v-for="(detail, i) in item.workExpDetailList"
  118. :key="detail.workExpDetailId">
  119. <view class="job-info-row">
  120. <view class="job-title">{{ detail.position || '未填写职位' }}</view>
  121. <!-- <view class="job-department">{{ detail.department || '' }}</view> -->
  122. <view class="work-period">
  123. {{ detail.startTime ? detail.startTime.slice(0, 7) : '' }} -
  124. {{ detail.endTime ? detail.endTime.slice(0, 7) : '至今' }}
  125. </view>
  126. </view>
  127. <!-- <view class="job-description">
  128. {{ detail.workContent ? detail.workContent : '暂无工作描述' }}
  129. </view> -->
  130. <view style="margin-bottom: 10rpx;font-size: 28rpx;">工作内容</view>
  131. <view class="job-description">
  132. {{ detail.workContent || '暂无工作内容'}}
  133. </view>
  134. <view style="margin: 12rpx 0;font-size: 28rpx;">工作业绩</view>
  135. <view class="job-description">
  136. {{detail.workPerformance || '暂无工作业绩'}}
  137. </view>
  138. <view class="skill-tags" v-if="detail.skills">
  139. <view class="tag" v-for="(tag, j) in JSON.parse(detail.skills)" :key="j">
  140. {{ tag }}
  141. </view>
  142. </view>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. <view class="experience-list" v-else>
  148. <view class="job-info-row">
  149. <view class="job-title">暂无工作经历</view>
  150. </view>
  151. </view>
  152. </view>
  153. <!-- 教育经历 -->
  154. <view class="education-section">
  155. <view class="section-header">
  156. <view class="section-title">
  157. <text>教育经历</text>
  158. </view>
  159. </view>
  160. <view class="education-list">
  161. <view class="education-item" v-for="(item, index) in eduList" :key="index">
  162. <view class="school-logo">
  163. <image src="../../static/images/index/wuhan.svg" class="logo-img" mode="aspectFit"></image>
  164. </view>
  165. <view class="education-content">
  166. <view class="school-name">{{ item.school }}</view>
  167. <view class="degree-info">{{ item.degree }} • {{ item.profession }} •
  168. {{ item.startTime.slice(0, 4) }}-{{ item.endTime.slice(0, 4) }}
  169. </view>
  170. <view class="education-description">
  171. {{ item.detail }}
  172. </view>
  173. </view>
  174. </view>
  175. </view>
  176. </view>
  177. <!-- 资格证书 -->
  178. <view class="certificates-section">
  179. <view class="section-header">
  180. <view class="section-title">
  181. <text>专业技能</text>
  182. </view>
  183. </view>
  184. <view class="certificates-grid" v-if="skills && skills.length > 0">
  185. <view class="certificate-tag" v-for="(skll, index) in skills || {}" :key="index">
  186. {{ skll.skillName }}
  187. </view>
  188. </view>
  189. <view class="certificates-grid" v-else>
  190. <view class="certificate-tag">暂无技能</view>
  191. </view>
  192. </view>
  193. </view>
  194. <!-- 底部操作按钮 -->
  195. <view v-if="postPushId != ''" class="bottom-actions">
  196. <view class="action-btn contact-btn" @click="contactCandidate">
  197. <text>立即联系</text>
  198. </view>
  199. </view>
  200. </view>
  201. </template>
  202. <script>
  203. export default {
  204. data() {
  205. return {
  206. statusBarHeight: 0, // 状态栏高度
  207. resumeData: {},
  208. userEntity: "",
  209. eduList: "",
  210. intentions: "",
  211. resumeList: {},
  212. skills: "",
  213. postPushId: "",
  214. workExpList: [],
  215. workExpTimes: "",
  216. resumesStatus: ['离职&随时到岗', '在职&月内到岗', '在职&考虑机会', '在职&暂不考虑'],
  217. defaultExpectations: [{
  218. title: '亚马逊运营总监',
  219. salary: '30-40K',
  220. type: '不限',
  221. location: '深圳'
  222. },
  223. {
  224. title: 'TikTok运营总监',
  225. salary: '30-40K',
  226. type: '精品铺货',
  227. location: '深圳'
  228. }
  229. ],
  230. defaultWorkExperience: [{
  231. position: '资深亚马逊运营',
  232. department: '运营部',
  233. company: '深圳市世迪贸易科技有限公司',
  234. period: '2019.02-至今',
  235. description: '负责Amazon英国、欧洲站、制定推广与销售计划,达成团队要求的销售业绩;做好数据的统计分析工作,收集、分析市场信息,竞争对手状况,并根据产品销售与排名变化,及时制定和调整产品的销售...',
  236. skills: ['精品铺货', '独立站', '3C数码', '品类运营']
  237. }],
  238. defaultEducation: [{
  239. school: '武汉工程大学',
  240. degree: '硕士',
  241. major: '高分子化学与物理',
  242. period: '2014-2017',
  243. description: '这是简历填写的内容这是简历填写的内容内容这是简历填写的内是简历填写的内容这是简历填写的内容...'
  244. }],
  245. defaultSkills: ['Design & Creative', 'Wireframing UX', 'Figma', 'UI Design', 'Prototype', 'Adobe XD',
  246. 'UX Design', 'Front End'
  247. ],
  248. defaultCertificates: ['大学英语六级', '计算机职业资格', '初级会计师', '中级会计师', '高级会计师', '注册会计师']
  249. }
  250. },
  251. onLoad(option) {
  252. // 获取状态栏高度
  253. let systemInfo = uni.getSystemInfoSync();
  254. this.statusBarHeight = systemInfo.statusBarHeight || 0;
  255. // 获取邀请码保存到本地
  256. if (option.invitation) {
  257. this.$queue.setData('inviterCode', option.invitation);
  258. }
  259. // #ifdef MP-WEIXIN
  260. if (option.scene) {
  261. const scene = decodeURIComponent(option.scene);
  262. this.$queue.setData('inviterCode', scene.split(',')[0]);
  263. }
  264. // #endif
  265. this.weekMember = uni.getStorageSync('weekMember')
  266. this.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : 0
  267. if (option.resumesId) {
  268. this.resumesId = option.resumesId
  269. this.getDetail()
  270. } else if (option.userId) {
  271. this.byuserId = option.userId
  272. this.getDetail()
  273. }
  274. // 获取邀请码保存到本地
  275. if (option.postPushId) {
  276. this.postPushId = option.postPushId
  277. }
  278. },
  279. methods: {
  280. /**
  281. * 收藏简历
  282. */
  283. setCollection() {
  284. this.$Request.postT("/app/myCollection/saveCollection", {
  285. resumesId: this.resumesId,
  286. type: 2
  287. }).then(res => {
  288. if (res.code == 0) {
  289. uni.showToast({
  290. title: res.msg
  291. })
  292. this.getDetail()
  293. }
  294. })
  295. },
  296. goBack() {
  297. uni.navigateBack();
  298. },
  299. contactCandidate() {
  300. //去联系
  301. this.getDetail()
  302. this.$Request.postJson('/app/chat/insertChatConversation', {
  303. userId: this.userEntity, //会话对象的id
  304. focusedUserId: uni.getStorageSync('userId'), //当前登录者Id
  305. postPushId: this.postPushId,
  306. resumesId: this.resumesId,
  307. type: 2,
  308. }).then(ret => {
  309. if (ret.code == 0) {
  310. uni.navigateTo({
  311. url: '/pages/msg/im?byUserId=' + this.userEntity
  312. + '&chatConversationId=' + ret.data
  313. .chatConversationId + '&resumesId=' + this.resumesId + '&postPushId=' +
  314. this.postPushId
  315. })
  316. }
  317. })
  318. },
  319. getDetail() {
  320. uni.showLoading({
  321. title: '加载中'
  322. })
  323. let data = {
  324. resumesId: this.resumesId,
  325. userId: this.userId,
  326. companyId: uni.getStorageSync('companyId')
  327. }
  328. this.$Request.get('/app/resumes/selectResumesByResumesId', data).then(res => {
  329. if (res.code == 0) {
  330. uni.hideLoading()
  331. var data = res.data;
  332. this.resumeData = res.data;
  333. // this.userEntity = data.userEntity
  334. this.userEntity = data.userId
  335. this.eduList = data.eduList
  336. this.intentions = data.intentionList
  337. this.resumeList = data.resumesListDtoList
  338. // this.skills = data.skills
  339. this.skills = data.skillList
  340. this.workExpList = data.workExpList
  341. } else {
  342. uni.hideLoading()
  343. uni.showModal({
  344. title: '提示',
  345. content: '用户简历不存在',
  346. showCancel: false,
  347. complete(ret) {
  348. uni.navigateBack()
  349. }
  350. })
  351. }
  352. })
  353. },
  354. //使用岗位名称查询出企业正在招聘的该岗位拿到对应的岗位id
  355. getJobList(ruleClassifyName) {
  356. let data = {
  357. status: 2,
  358. page: 1,
  359. limit: 1,
  360. ruleClassifyName: ruleClassifyName,
  361. companyId: uni.getStorageSync('companyId')
  362. }
  363. this.$Request.getT('/app/postPush/getPostPushList', data).then(res => {
  364. if (res.code == 0) {
  365. this.postPushId = res.data.records[0].postPushId
  366. }
  367. })
  368. },
  369. // 查看图片
  370. saveImg(imgs, index) {
  371. // console.log(imgs)
  372. let that = this;
  373. let imgArr = imgs
  374. // imgArr.push(imgs);
  375. // //预览图片
  376. uni.previewImage({
  377. urls: imgArr,
  378. current: imgArr[index]
  379. });
  380. },
  381. }
  382. }
  383. </script>
  384. <style lang="scss" scoped>
  385. .resume-detail {
  386. min-height: 100vh;
  387. padding-bottom: 120rpx;
  388. // padding-top 已改为动态计算,在模板中通过 :style 设置
  389. }
  390. .fixed-nav {
  391. position: fixed;
  392. top: 0;
  393. left: 0;
  394. right: 0;
  395. z-index: 9999;
  396. background-color: #ffffff;
  397. // padding: 0 4rpx;
  398. // padding-top 已改为动态计算,在模板中通过 :style 设置
  399. }
  400. // 顶部导航栏
  401. .navbar {
  402. background: #fff;
  403. height: 88rpx;
  404. padding: 0 8rpx;
  405. // padding: 80rpx 0 40rpx 0; // 已移除,因为现在是固定导航栏
  406. .navbar-content {
  407. display: flex;
  408. align-items: center;
  409. justify-content: space-between;
  410. padding: 0 30rpx;
  411. height: 60rpx;
  412. .navbar-left {
  413. width: 60rpx;
  414. height: 60rpx;
  415. display: flex;
  416. align-items: center;
  417. justify-content: center;
  418. }
  419. .navbar-title {
  420. color: rgba(23, 23, 37, 1);
  421. font-family: DM Sans;
  422. font-size: 38rpx;
  423. font-weight: 700;
  424. line-height: 52rpx;
  425. letter-spacing: 0%;
  426. text-align: center;
  427. }
  428. .nav-right {
  429. display: flex;
  430. align-items: center;
  431. justify-content: flex-end;
  432. width: 96rpx;
  433. }
  434. .nav-icon {
  435. display: flex;
  436. align-items: center;
  437. justify-content: center;
  438. // width: 36rpx;
  439. // height: 36rpx;
  440. }
  441. .icon-img {
  442. width: 42rpx;
  443. height: 42rpx;
  444. }
  445. }
  446. }
  447. // 用户信息区域
  448. .user-profile {
  449. background: #fff;
  450. padding: 30rpx;
  451. // margin: 0 32rpx;
  452. .profile-header {
  453. display: flex;
  454. justify-content: space-between;
  455. align-items: flex-start;
  456. margin-bottom: 20rpx;
  457. .name-section {
  458. flex: 1;
  459. display: flex;
  460. align-items: center;
  461. justify-content: flex-start;
  462. gap: 12rpx;
  463. .user-name {
  464. color: rgba(58, 57, 67, 1);
  465. font-family: DM Sans;
  466. font-size: 48rpx;
  467. font-weight: 700;
  468. line-height: 60rpx;
  469. letter-spacing: 0px;
  470. text-align: left;
  471. margin-right: 12rpx;
  472. }
  473. .status-tag {
  474. background: rgba(252, 233, 220, 1);
  475. color: rgba(1, 107, 246, 1);
  476. font-family: DM Sans;
  477. font-size: 18rpx;
  478. padding: 4rpx 8rpx;
  479. border-radius: 8rpx;
  480. display: inline-block;
  481. }
  482. }
  483. .avatar-container {
  484. position: relative;
  485. .user-avatar {
  486. width: 72rpx;
  487. height: 72rpx;
  488. border-radius: 50%;
  489. border: 1px solid #0d27f7;
  490. }
  491. .notification-badge {
  492. position: absolute;
  493. top: 0;
  494. right: 0;
  495. width: 20rpx;
  496. height: 20rpx;
  497. background: #FF3B30;
  498. border-radius: 50%;
  499. border: 2rpx solid #fff;
  500. }
  501. }
  502. }
  503. .current-job {
  504. display: flex;
  505. align-items: center;
  506. gap: 8rpx;
  507. margin-bottom: 12rpx;
  508. .job-icon {
  509. width: 36rpx;
  510. height: 36rpx;
  511. }
  512. .job-text {
  513. color: rgba(156, 164, 171, 1);
  514. font-family: DM Sans;
  515. font-size: 24rpx;
  516. font-weight: 400;
  517. line-height: 40rpx;
  518. letter-spacing: 0.5%;
  519. text-align: left;
  520. }
  521. }
  522. .availability {
  523. display: flex;
  524. align-items: center;
  525. gap: 8rpx;
  526. margin-bottom: 12rpx;
  527. .status-text {
  528. color: rgba(156, 164, 171, 1);
  529. font-family: DM Sans;
  530. font-size: 24rpx;
  531. font-weight: 400;
  532. line-height: 32rpx;
  533. letter-spacing: 0%;
  534. text-align: left;
  535. }
  536. }
  537. .summary-info {
  538. display: flex;
  539. gap: 12rpx;
  540. margin-right: 12rpx;
  541. .summary-item {
  542. .summary-text {
  543. color: rgba(153, 153, 153, 1);
  544. font-family: DM Sans;
  545. font-size: 20rpx;
  546. font-weight: 400;
  547. line-height: 20rpx;
  548. letter-spacing: -0.5px;
  549. text-align: left;
  550. padding: 12rpx;
  551. border-radius: 8rpx;
  552. background: rgba(198, 198, 198, 0.1);
  553. }
  554. }
  555. }
  556. }
  557. // 内容区域
  558. .content-section {
  559. padding: 0 30rpx 30rpx 30rpx;
  560. .section-item {
  561. background: #fff;
  562. border-radius: 12rpx;
  563. padding: 30rpx 0;
  564. margin-bottom: 20rpx;
  565. box-sizing: border-box;
  566. .advantage-content {
  567. color: rgba(97, 110, 124, 1);
  568. font-family: DM Sans;
  569. font-size: 26rpx;
  570. font-weight: 400;
  571. line-height: 32rpx;
  572. letter-spacing: 0px;
  573. text-align: left;
  574. }
  575. }
  576. .attachment-section {
  577. margin-bottom: 20rpx;
  578. .attachment-btn {
  579. background: rgba(246, 246, 246, 1);
  580. border-radius: 8rpx;
  581. padding: 20rpx;
  582. display: flex;
  583. align-items: center;
  584. gap: 12rpx;
  585. .attachment-icon {
  586. width: 32rpx;
  587. height: 32rpx;
  588. }
  589. .attachment-text {
  590. color: rgba(1, 107, 246, 1);
  591. font-family: DM Sans;
  592. font-size: 24rpx;
  593. font-weight: 400;
  594. line-height: 32rpx;
  595. letter-spacing: 0px;
  596. text-align: left;
  597. }
  598. }
  599. }
  600. // 求职期望卡片样式
  601. .expectation-card {
  602. background: #ffffff;
  603. border-radius: 12rpx;
  604. padding: 30rpx 0;
  605. margin-bottom: 20rpx;
  606. box-sizing: border-box;
  607. .card-header {
  608. margin-bottom: 20rpx;
  609. .header-title {
  610. color: rgba(34, 37, 42, 1);
  611. font-family: DM Sans;
  612. font-size: 32rpx;
  613. font-weight: 400;
  614. line-height: 48rpx;
  615. letter-spacing: 0px;
  616. text-align: left;
  617. }
  618. }
  619. .job-expectation {
  620. display: flex;
  621. justify-content: space-between;
  622. align-items: center;
  623. .expectation-text {
  624. color: rgba(153, 153, 153, 1);
  625. font-family: DM Sans;
  626. font-size: 24rpx;
  627. font-weight: 500;
  628. line-height: 48rpx;
  629. letter-spacing: 0.5%;
  630. text-align: left;
  631. flex-shrink: 0;
  632. }
  633. .salary-range {
  634. color: rgba(1, 107, 246, 1);
  635. font-family: DM Sans;
  636. font-size: 32rpx;
  637. font-weight: 700;
  638. line-height: 40rpx;
  639. letter-spacing: 0.5%;
  640. text-align: right;
  641. }
  642. }
  643. }
  644. // 工作经历部分样式
  645. .work-experience-section {
  646. background: #fff;
  647. border-radius: 12px;
  648. padding: 30rpx;
  649. margin-bottom: 20rpx;
  650. box-sizing: border-box;
  651. border: 1px solid rgba(1, 107, 246, 1);
  652. .section-header {
  653. display: flex;
  654. align-items: center;
  655. justify-content: space-between;
  656. margin-bottom: 20rpx;
  657. .section-title {
  658. display: flex;
  659. align-items: center;
  660. .required-mark {
  661. color: #FF3B30;
  662. font-size: 40rpx;
  663. font-weight: 600;
  664. margin-right: 8rpx;
  665. }
  666. .required-title {
  667. font-family: DM Sans;
  668. font-size: 30rpx;
  669. font-weight: 700;
  670. line-height: 52rpx;
  671. letter-spacing: 0%;
  672. text-align: left;
  673. margin-right: 12rpx;
  674. }
  675. text {
  676. color: rgba(23, 23, 37, 1);
  677. font-family: Inter;
  678. font-size: 44rpx;
  679. font-weight: 600;
  680. line-height: 24px;
  681. }
  682. }
  683. .section-desc {
  684. color: rgba(1, 107, 246, 1);
  685. font-family: DM Sans;
  686. font-size: 24rpx;
  687. font-weight: 400;
  688. line-height: 44rpx;
  689. letter-spacing: 0%;
  690. text-align: left;
  691. }
  692. }
  693. .experience-list {
  694. .experience-item {
  695. display: flex;
  696. padding: 24rpx 0;
  697. border-bottom: 1rpx solid #F0F0F0;
  698. &:last-child {
  699. border-bottom: none;
  700. }
  701. .company-logo {
  702. width: 90rpx;
  703. height: 90rpx;
  704. margin-right: 24rpx;
  705. flex-shrink: 0;
  706. border-radius: 8px;
  707. background: rgba(246, 246, 246, 1);
  708. .logo-img {
  709. width: 100%;
  710. height: 100%;
  711. border-radius: 8rpx;
  712. }
  713. }
  714. .experience-content {
  715. flex: 1;
  716. .job-info-row {
  717. display: flex;
  718. align-items: center;
  719. margin-bottom: 4rpx;
  720. }
  721. .job-title {
  722. color: rgba(102, 102, 102, 1);
  723. font-family: DM Sans;
  724. font-size: 24rpx;
  725. font-weight: 400;
  726. line-height: 44rpx;
  727. letter-spacing: 0%;
  728. text-align: left;
  729. margin-right: 12rpx;
  730. }
  731. .job-department {
  732. color: rgba(120, 130, 138, 1);
  733. font-family: DM Sans;
  734. font-size: 24rpx;
  735. font-weight: 400;
  736. line-height: 44rpx;
  737. letter-spacing: 0%;
  738. text-align: left;
  739. }
  740. .company-period-row {
  741. display: flex;
  742. align-items: center;
  743. justify-content: flex-start;
  744. margin-bottom: 12rpx;
  745. gap: 12rpx;
  746. padding: 12rpx 0;
  747. }
  748. .company-name {
  749. color: rgba(120, 130, 138, 1);
  750. font-family: DM Sans;
  751. font-size: 24rpx;
  752. font-weight: 400;
  753. line-height: 10px;
  754. letter-spacing: 0.5%;
  755. text-align: left;
  756. }
  757. .work-period {
  758. color: rgba(120, 130, 138, 1);
  759. font-family: DM Sans;
  760. font-size: 24rpx;
  761. font-weight: 400;
  762. line-height: 10px;
  763. letter-spacing: 0.5%;
  764. text-align: left;
  765. margin-left: 12rpx;
  766. }
  767. .job-description {
  768. color: rgba(120, 130, 138, 1);
  769. font-family: DM Sans;
  770. font-size: 24rpx;
  771. font-weight: 400;
  772. line-height: 30rpx;
  773. letter-spacing: 0%;
  774. text-align: left;
  775. white-space: pre-wrap;
  776. }
  777. .skill-tags {
  778. display: flex;
  779. flex-wrap: wrap;
  780. gap: 8rpx;
  781. margin-top: 12rpx;
  782. .tag {
  783. background: rgba(153, 153, 153, 0.1);
  784. border-radius: 12rpx;
  785. padding: 6rpx 10rpx;
  786. color: rgba(102, 102, 102, 1);
  787. font-family: DM Sans;
  788. font-size: 22rpx;
  789. font-weight: 400;
  790. letter-spacing: 0%;
  791. text-align: left;
  792. }
  793. }
  794. }
  795. }
  796. }
  797. }
  798. // 教育经历部分样式
  799. .education-section {
  800. background: #fff;
  801. border-radius: 12px;
  802. padding: 30rpx;
  803. margin-bottom: 20rpx;
  804. box-sizing: border-box;
  805. border: 1px solid rgba(227, 231, 236, 1);
  806. .section-header {
  807. display: flex;
  808. align-items: center;
  809. justify-content: space-between;
  810. margin-bottom: 30rpx;
  811. .section-title {
  812. text {
  813. color: rgba(23, 23, 37, 1);
  814. font-family: Inter;
  815. font-size: 30rpx;
  816. font-weight: 600;
  817. line-height: 24px;
  818. }
  819. }
  820. }
  821. .education-list {
  822. .education-item {
  823. display: flex;
  824. padding: 24rpx 0;
  825. border-bottom: 1rpx solid #F0F0F0;
  826. &:last-child {
  827. border-bottom: none;
  828. }
  829. .school-logo {
  830. width: 90rpx;
  831. height: 90rpx;
  832. margin-right: 24rpx;
  833. flex-shrink: 0;
  834. border-radius: 8px;
  835. background: rgba(246, 246, 246, 1);
  836. .logo-img {
  837. width: 100%;
  838. height: 100%;
  839. border-radius: 8rpx;
  840. }
  841. }
  842. .education-content {
  843. flex: 1;
  844. .school-name {
  845. color: rgba(23, 23, 37, 1);
  846. font-family: DM Sans;
  847. font-size: 32rpx;
  848. font-weight: 400;
  849. line-height: 22px;
  850. letter-spacing: 0%;
  851. text-align: left;
  852. }
  853. .degree-info {
  854. color: rgba(120, 130, 138, 1);
  855. font-family: DM Sans;
  856. font-size: 26rpx;
  857. font-weight: 500;
  858. line-height: 24px;
  859. letter-spacing: 0%;
  860. text-align: left;
  861. padding: 12rpx 0;
  862. }
  863. .education-description {
  864. color: rgba(120, 130, 138, 1);
  865. font-family: DM Sans;
  866. font-size: 26rpx;
  867. font-weight: 400;
  868. line-height: 16px;
  869. letter-spacing: 0%;
  870. text-align: left;
  871. }
  872. }
  873. }
  874. }
  875. }
  876. // 资格证书部分样式
  877. .certificates-section {
  878. background: #fff;
  879. border-radius: 12px;
  880. padding: 30rpx 0;
  881. margin-bottom: 20rpx;
  882. box-sizing: border-box;
  883. .section-header {
  884. margin-bottom: 30rpx;
  885. .section-title {
  886. text {
  887. color: rgba(34, 37, 42, 1);
  888. font-family: DM Sans;
  889. font-size: 32rpx;
  890. font-weight: 400;
  891. line-height: 48rpx;
  892. letter-spacing: 0px;
  893. text-align: left;
  894. }
  895. }
  896. }
  897. .certificates-grid {
  898. display: flex;
  899. flex-wrap: wrap;
  900. gap: 12rpx;
  901. .certificate-tag {
  902. padding: 8rpx 16rpx;
  903. color: rgba(1, 107, 246, 1);
  904. font-family: DM Sans;
  905. font-size: 16rpx;
  906. font-weight: 400;
  907. line-height: 20rpx;
  908. letter-spacing: -0.5px;
  909. text-align: left;
  910. border-radius: 8rpx;
  911. background: #ebebebb5;
  912. }
  913. }
  914. }
  915. // 专业技能部分样式
  916. .skills-section {
  917. background: #fff;
  918. border-radius: 12px;
  919. padding: 30rpx 0;
  920. margin-bottom: 20rpx;
  921. box-sizing: border-box;
  922. .section-header {
  923. margin-bottom: 30rpx;
  924. .section-title {
  925. text {
  926. color: rgba(34, 37, 42, 1);
  927. font-family: DM Sans;
  928. font-size: 32rpx;
  929. font-weight: 400;
  930. line-height: 48rpx;
  931. letter-spacing: 0px;
  932. text-align: left;
  933. }
  934. }
  935. }
  936. .skills-content {
  937. color: rgba(97, 110, 124, 1);
  938. font-family: DM Sans;
  939. font-size: 24rpx;
  940. font-weight: 400;
  941. line-height: 32rpx;
  942. letter-spacing: 0px;
  943. text-align: left;
  944. }
  945. }
  946. // 工作经历标题样式
  947. .jobRemarks-box-c-title {
  948. color: rgba(1, 107, 246, 1);
  949. font-size: 32rpx;
  950. padding: 8px 12px;
  951. border-radius: 36px;
  952. font-weight: 500;
  953. background: rgba(246, 246, 246, 1);
  954. display: flex;
  955. align-items: center;
  956. margin-bottom: 20rpx;
  957. .title-icon {
  958. width: 32rpx;
  959. height: 32rpx;
  960. margin-right: 12rpx;
  961. }
  962. text {
  963. color: rgba(1, 107, 246, 1);
  964. font-family: DM Sans;
  965. font-size: 32rpx;
  966. font-weight: 500;
  967. line-height: 48rpx;
  968. letter-spacing: 0px;
  969. text-align: left;
  970. }
  971. }
  972. }
  973. // 底部操作按钮
  974. .bottom-actions {
  975. position: fixed;
  976. bottom: 0;
  977. left: 0;
  978. right: 0;
  979. background: #fff;
  980. padding: 30rpx;
  981. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  982. .action-btn {
  983. width: 100%;
  984. height: 88rpx;
  985. border-radius: 44rpx;
  986. display: flex;
  987. align-items: center;
  988. justify-content: center;
  989. font-size: 32rpx;
  990. font-weight: 500;
  991. }
  992. .contact-btn {
  993. background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  994. color: #fff;
  995. }
  996. }
  997. .company-title {
  998. margin-bottom: 8rpx;
  999. color: rgba(23, 23, 37, 1);
  1000. font-family: DM Sans;
  1001. font-size: 28rpx;
  1002. font-weight: 400;
  1003. }
  1004. </style>