resumeDetail.vue 24 KB

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