resumeDetail.vue 25 KB

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