onlineResume.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101
  1. <template>
  2. <view class="online-resume" :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">
  17. <view class="avatar-container">
  18. <image :src="detail.userEntity&&detail.userEntity.avatar?detail.userEntity.avatar:'../../static/logo.png'" class="user-avatar" mode="aspectFill"></image>
  19. <view class="edit-avatar-icon" @click="goToBasicInfo">
  20. <image src="../../static/images/index/Combined-Shape.svg" style="width: 32rpx;height: 32rpx;" mode=""></image>
  21. </view>
  22. </view>
  23. <view class="user-name">{{detail.userEntity&&detail.userEntity.userName||'匿名'}}</view>
  24. <view class="user-info">{{detail.workExpTimes}}年经验·{{detail.userEntity&&detail.userEntity.age}}岁·{{detail.degree}}·{{detail.userEntity&&detail.userEntity.sex==1?'男':'女'}}</view>
  25. <view class="contact-info">
  26. <view class="contact-item">
  27. <image src="../../static/images/index/phone.svg" style="width: 24rpx;height: 24rpx;" mode=""></image>
  28. <text class="contact-text">{{detail.userEntity&&detail.userEntity.phone}}</text>
  29. </view>
  30. <view class="contact-item">
  31. <image src="../../static/images/index/wx.svg" style="width: 24rpx;height: 24rpx;" mode=""></image>
  32. <text class="contact-text">{{detail.userEntity&&detail.userEntity.weChatNum}}</text>
  33. </view>
  34. </view>
  35. <view class="availability">
  36. <text class="status-text">{{detail.resumeList&&detail.resumeList.resumesStatus?statusList[detail.resumeList.resumesStatus].text:statusList[0].text}}</text>
  37. <view class="status-dot"></view>
  38. </view>
  39. </view>
  40. <!-- 内容区域 -->
  41. <view class="content-section">
  42. <!-- 跨境电商工作经验 -->
  43. <view class="switch-section">
  44. <view class="switch-left">
  45. <view class="flex justify-between">
  46. <view class="switch-title">是否有跨境电商工作经验</view>
  47. <view class="template-text">不同简历模版</view>
  48. </view>
  49. <view class="section-status" v-if="hasEcommerceExperience">
  50. 是,有跨境电商工作经验
  51. </view>
  52. </view>
  53. <u-switch @change="setResume" v-model="hasEcommerceExperience" active-color="#007AFF" size="60"></u-switch>
  54. </view>
  55. <!-- 个人优势 -->
  56. <view class="section-item">
  57. <view class="section-header">
  58. <view class="section-title">个人优势</view>
  59. <view class="edit-icon">
  60. <image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
  61. </view>
  62. </view>
  63. <view class="advantage-content">
  64. <textarea @blur="setResume" auto-height v-model="detail.resumeList&&detail.resumeList.adv"></textarea>
  65. </view>
  66. </view>
  67. <!-- 全职期望卡片 -->
  68. <view class="expectation-card">
  69. <view class="card-header">
  70. <view class="header-left">
  71. <image src="../../static/images/index/lingdai.svg" class="header-icon" />
  72. <text class="header-title">全职期望</text>
  73. </view>
  74. <text class="progress-text">{{detail.intentions&&detail.intentions.length}}/3</text>
  75. </view>
  76. <view class="job-list">
  77. <view @click="addExpectation(item.intentionId)" class="job-item" v-for="(item,index) in detail.intentions">
  78. <view class="job-info">
  79. <view>
  80. <text class="job-title">{{item.ruleClassifyName}}</text>
  81. <view @click="goToPreferenceSetting('亚马逊运营总监')">
  82. <view class="preference-btn">
  83. <text>设置求职偏好</text>
  84. </view>
  85. <u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="28"></u-icon>
  86. </view>
  87. </view>
  88. <text class="job-details">{{item.salaryRange}}・{{item.industry||'不限'}}</text>
  89. <text class="job-location">{{item.citys}}</text>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="add-expectation-btn" @click="addExpectation('')">
  94. <text>添加求职期望</text>
  95. </view>
  96. </view>
  97. <!-- 工作经历 -->
  98. <view class="work-experience-section">
  99. <view class="section-header">
  100. <view class="section-title">
  101. <text class="required-mark">*</text>
  102. <text class="required-title">工作经历</text>
  103. <view class="section-desc">请填写专属跨境行业的工作经验</view>
  104. </view>
  105. <view class="edit-icon" @click="goToWorkExperience('')">
  106. <image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
  107. </view>
  108. </view>
  109. <view class="experience-list">
  110. <view class="experience-item" @click="goToWorkExperience(item.workExpId)" v-for="item in detail.workExps">
  111. <view class="company-logo">
  112. <image src="../../static/images/index/changsha.svg" class="logo-img" mode="aspectFit"></image>
  113. </view>
  114. <view class="experience-content">
  115. <view class="experience-box" v-for="it in item.workExpDetails">
  116. <view class="job-info-row">
  117. <view class="job-title">{{it.position}}</view>
  118. <view class="job-department">{{it.department}}</view>
  119. </view>
  120. <view class="company-period-row">
  121. <view class="company-name">{{item.companyName}}</view>
  122. <view class="work-period">{{it.startTime}}-{{it.endTime}}</view>
  123. </view>
  124. <view class="job-description">
  125. {{it.workContent}}
  126. </view>
  127. <view class="skill-tags">
  128. <view class="tag" v-for="skill in it.skills">{{skill}}</view>
  129. </view>
  130. </view>
  131. </view>
  132. </view>
  133. </view>
  134. </view>
  135. <!-- 教育经历 -->
  136. <view class="education-section">
  137. <view class="section-header">
  138. <view class="section-title">
  139. <text>教育经历</text>
  140. </view>
  141. <view class="edit-icon" @click="goToEducationExperience('')">
  142. <image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
  143. </view>
  144. </view>
  145. <view class="education-list">
  146. <view class="education-item" @click="goToEducationExperience(item.eduId)" v-for="(item,index) in detail.eduList">
  147. <view class="school-logo">
  148. <image src="../../static/images/index/wuhan.svg" class="logo-img" mode="aspectFit"></image>
  149. </view>
  150. <view class="education-content">
  151. <view class="school-name">{{item.school}}</view>
  152. <view class="degree-info">{{item.degree}} • {{item.profession}} • {{new Date(item.startTime).getFullYear()}}-{{new Date(item.endTime).getFullYear()}}</view>
  153. <view class="education-description">
  154. {{item.detail}}
  155. </view>
  156. </view>
  157. </view>
  158. </view>
  159. </view>
  160. <!-- 技能 -->
  161. <view class="skills-section">
  162. <view class="section-header">
  163. <view class="section-title">
  164. <text>技能</text>
  165. </view>
  166. <view class="edit-icon" @click="goToJobSkills">
  167. <image src="../../static/images/index/Combined-Shape.svg" style="width: 48rpx;height: 48rpx;" mode=""></image>
  168. </view>
  169. </view>
  170. <view class="skills-grid">
  171. <view class="skill-tag" v-for="(skill, skillIndex) in detail.skills" :key="skillIndex">{{skill.skillName}}</view>
  172. </view>
  173. </view>
  174. </view>
  175. </view>
  176. </template>
  177. <script>
  178. export default {
  179. data() {
  180. return {
  181. statusBarHeight: 0, // 状态栏高度
  182. hasEcommerceExperience: false,
  183. detail:{},
  184. statusList: [
  185. {
  186. value: 'unemployed_available',
  187. text: '离职-随时到岗',
  188. },
  189. {
  190. value: 'employed_monthly',
  191. text: '在职-月内到岗',
  192. },
  193. {
  194. value: 'employed_considering',
  195. text: '在职-考虑机会',
  196. },
  197. {
  198. value: 'employed_not_considering',
  199. text: '在职-暂不考虑',
  200. }
  201. ]
  202. }
  203. },
  204. onLoad() {
  205. // 获取状态栏高度
  206. let systemInfo = uni.getSystemInfoSync();
  207. this.statusBarHeight = systemInfo.statusBarHeight || 0;
  208. this.getData()
  209. var that=this
  210. uni.$on('updateResume',()=>{
  211. console.log(2222222222222)
  212. that.getData()
  213. })
  214. // 监听偏好设置更新
  215. uni.$on('preferenceUpdated', (data) => {
  216. console.log('偏好设置已更新:', data)
  217. // 这里可以更新对应的职位偏好显示
  218. uni.showToast({
  219. title: `${data.jobTitle}偏好已更新`,
  220. icon: 'success'
  221. })
  222. })
  223. // 监听技能设置更新
  224. uni.$on('skillsUpdated', (data) => {
  225. if(data.set!=1)
  226. return
  227. that.changeSkill(data.skills)
  228. })
  229. },
  230. onUnload(){
  231. uni.$off('updateResume')
  232. uni.$off('preferenceUpdated')
  233. uni.$off('skillsUpdated')
  234. },
  235. methods: {
  236. goBack() {
  237. uni.navigateBack();
  238. },
  239. getData(){
  240. var that=this
  241. this.$Request.getT("/app/userFirst/getUserResumes", {}).then((res) => {
  242. if (res.code == 0) {
  243. that.detail=res.data
  244. that.hasEcommerceExperience=res.data.resumeList.ifExp?true:false
  245. that.detail.degree=that.$queue.getHighestEducation(res.data.eduList)
  246. res.data.workExps.forEach(function(item){
  247. item.type=JSON.parse(item.type)
  248. item.workExpDetails=[]
  249. res.data.workExpList.forEach(function(it){
  250. it.skills=JSON.parse(it.skills)
  251. it.startTime=it.startTime.slice(0, 7);
  252. if(that.$queue.isCurrentMonth(new Date(it.endTime)))
  253. it.endTime='至今'
  254. else
  255. it.endTime= it.endTime.slice(0, 7);
  256. if(it.workExpId==item.workExpId)
  257. item.workExpDetails.push(it)
  258. })
  259. })
  260. that.data.workExps=res.data.workExps
  261. } else {
  262. uni.showToast({
  263. title: res.msg,
  264. icon: "none",
  265. });
  266. }
  267. });
  268. },
  269. addExpectation(id='') {
  270. uni.navigateTo({
  271. url: '/package/jobIntention/addExpectation?id='+id
  272. })
  273. },
  274. goToPreferenceSetting(jobTitle) {
  275. return
  276. uni.navigateTo({
  277. url: `/package/jobIntention/preferenceSetting?jobTitle=${encodeURIComponent(jobTitle)}`
  278. })
  279. },
  280. goToJobSkills() {
  281. uni.navigateTo({
  282. url: '/package/jobIntention/jobSkills?set=1&skill='+encodeURIComponent(JSON.stringify(this.detail.skills==null?[]:this.$queue.array_column(this.detail.skills,'skillName')))
  283. })
  284. },
  285. goToWorkExperience(id='') {
  286. // 获取业务类型数据
  287. const businessTypes = this.getBusinessTypes()
  288. console.log('传递给工作经历页面的业务类型:', businessTypes)
  289. console.log('当前hasEcommerceExperience状态:', this.hasEcommerceExperience)
  290. uni.navigateTo({
  291. url: `/pages/my/workExperience?id=${id}&businessTypes=${encodeURIComponent(JSON.stringify(businessTypes))}`
  292. })
  293. },
  294. goToEducationExperience(id='') {
  295. uni.navigateTo({
  296. url: `/pages/my/educationExperience?id=${id}`
  297. })
  298. },
  299. goToBasicInfo() {
  300. console.log('1111111');
  301. uni.navigateTo({
  302. url: '/package/jobIntention/basicInfo?resumesStatus='+this.detail.resumeList.resumesStatus+'&birthday='+this.detail.resumeList.birthday+'&ifExp='+this.detail.resumeList.ifExp
  303. })
  304. },
  305. getBusinessTypes() {
  306. // 根据是否有跨境电商经验返回业务类型
  307. if (this.hasEcommerceExperience) {
  308. return ['0']
  309. } else {
  310. return []
  311. }
  312. },
  313. // 设置
  314. setResume() {
  315. let data={
  316. ifExp:this.hasEcommerceExperience?1:0,
  317. adv:this.detail.resumeList.adv,
  318. }
  319. uni.showLoading({ title: "提交中..." });
  320. this.$Request.postJson("/app/userFirst/regist", data).then((res) => {
  321. uni.hideLoading();
  322. if (res.code == 0) {
  323. // 实际开发中可以在这里添加跳转逻辑
  324. } else {
  325. uni.showToast({
  326. title: res.msg,
  327. icon: "none",
  328. });
  329. }
  330. });
  331. },
  332. changeSkill(skill) {
  333. var skills=[]
  334. for(var i in skill){
  335. skills[i]={
  336. "userId": "",
  337. "skillId": "",
  338. "skillName": skill[i],
  339. "isuse": 1
  340. }
  341. }
  342. let data={
  343. skills
  344. }
  345. var that=this
  346. this.$Request.postJson("/app/userFirst/updateSkill", skills).then((res) => {
  347. if (res.code == 0) {
  348. // 实际开发中可以在这里添加跳转逻辑
  349. that.getData()
  350. } else {
  351. uni.showToast({
  352. title: res.msg,
  353. icon: "none",
  354. });
  355. }
  356. });
  357. }
  358. },
  359. watch: {
  360. hasEcommerceExperience(newVal, oldVal) {
  361. console.log('hasEcommerceExperience 变化:', oldVal, '->', newVal)
  362. // 只有有效的布尔值才保存到缓存
  363. }
  364. }
  365. }
  366. </script>
  367. <style lang="scss" scoped>
  368. .online-resume {
  369. // background-color: #F2F6FC;
  370. min-height: 100vh;
  371. // padding-top 已改为动态计算,在模板中通过 :style 设置
  372. }
  373. .fixed-nav {
  374. position: fixed;
  375. top: 0;
  376. left: 0;
  377. right: 0;
  378. z-index: 9999;
  379. background-color: #ffffff;
  380. padding: 0 32rpx;
  381. // padding-top 已改为动态计算,在模板中通过 :style 设置
  382. }
  383. // 顶部导航栏
  384. .navbar {
  385. background: #fff;
  386. height: 88rpx;
  387. padding: 0 8rpx;
  388. // padding: 80rpx 0 40rpx 0; // 已移除,因为现在是固定导航栏
  389. .navbar-content {
  390. display: flex;
  391. align-items: center;
  392. justify-content: space-between;
  393. padding: 0 30rpx;
  394. height: 60rpx;
  395. .navbar-left {
  396. width: 60rpx;
  397. height: 60rpx;
  398. display: flex;
  399. align-items: center;
  400. justify-content: center;
  401. }
  402. .navbar-title {
  403. color: rgba(23, 23, 37, 1);
  404. font-family: DM Sans;
  405. font-size: 38rpx;
  406. font-weight: 700;
  407. line-height: 52rpx;
  408. letter-spacing: 0%;
  409. text-align: center;
  410. }
  411. .navbar-right {
  412. width: 60rpx;
  413. height: 60rpx;
  414. }
  415. }
  416. }
  417. // 用户信息区域
  418. .user-profile {
  419. background: #fff;
  420. padding: 60rpx 30rpx 40rpx;
  421. text-align: center;
  422. border-bottom: 2px solid rgba(227, 231, 236, 1);
  423. .avatar-container {
  424. position: relative;
  425. display: inline-block;
  426. margin-bottom: 30rpx;
  427. .user-avatar {
  428. width: 180rpx;
  429. height: 180rpx;
  430. border-radius: 50%;
  431. }
  432. .edit-avatar-icon {
  433. position: absolute;
  434. bottom: 10rpx;
  435. right: 10rpx;
  436. width: 48rpx;
  437. height: 48rpx;
  438. background: #fff;
  439. border-radius: 50%;
  440. display: flex;
  441. align-items: center;
  442. justify-content: center;
  443. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  444. }
  445. }
  446. .user-name {
  447. color: rgba(21, 21, 23, 1);
  448. font-family: DM Sans;
  449. font-size: 24px;
  450. font-weight: 700;
  451. line-height: 26px;
  452. letter-spacing: 0%;
  453. text-align: center;
  454. }
  455. .user-info {
  456. color: rgba(102, 112, 122, 1);
  457. font-family: DM Sans;
  458. font-size: 28rpx;
  459. line-height: 44rpx;
  460. font-weight: 400;
  461. letter-spacing: 0%;
  462. text-align: center;
  463. margin: 30rpx auto;
  464. }
  465. .contact-info {
  466. display: flex;
  467. justify-content: center;
  468. gap: 40rpx;
  469. margin-bottom: 30rpx;
  470. .contact-item {
  471. display: flex;
  472. align-items: center;
  473. gap: 10rpx;
  474. .contact-text {
  475. color: rgba(116, 116, 116, 1);
  476. font-family: DM Sans;
  477. font-size: 16rpx;
  478. font-weight: 400;
  479. line-height: 20rpx;
  480. letter-spacing: 0%;
  481. text-align: center;
  482. }
  483. }
  484. }
  485. .availability {
  486. display: flex;
  487. align-items: center;
  488. justify-content: center;
  489. gap: 10rpx;
  490. .status-text {
  491. color: rgba(156, 164, 171, 1);
  492. font-family: DM Sans;
  493. font-size: 24rpx;
  494. font-weight: 400;
  495. line-height: 32rpx;
  496. letter-spacing: 0%;
  497. text-align: left;
  498. }
  499. .status-dot {
  500. width: 18rpx;
  501. height: 18rpx;
  502. background: rgba(0, 204, 154, 1);
  503. border-radius: 50%;
  504. }
  505. }
  506. }
  507. // 内容区域
  508. .content-section {
  509. // background: #F2F6FC;
  510. padding: 30rpx;
  511. // 开关部分样式
  512. .switch-section {
  513. display: flex;
  514. align-items: center;
  515. justify-content: space-between;
  516. background: #fff;
  517. border-radius: 12rpx;
  518. padding: 24rpx;
  519. margin-bottom: 16rpx;
  520. .switch-left {
  521. flex: 1;
  522. .switch-title {
  523. color: rgba(21, 22, 26, 1);
  524. font-family: DM Sans;
  525. font-size: 28rpx;
  526. font-weight: 500;
  527. line-height: 52rpx;
  528. letter-spacing: 0%;
  529. text-align: left;
  530. margin-bottom: 12rpx;
  531. }
  532. .template-text {
  533. color: rgba(153, 153, 153, 1);
  534. font-family: DM Sans;
  535. font-size: 20rpx;
  536. font-weight: 400;
  537. line-height: 52rpx;
  538. letter-spacing: 0%;
  539. text-align: right;
  540. }
  541. .section-status {
  542. color: rgba(1, 107, 246, 1);
  543. font-family: DM Sans;
  544. font-size: 24rpx;
  545. font-weight: 400;
  546. line-height: 40rpx;
  547. letter-spacing: 0%;
  548. text-align: left;
  549. }
  550. }
  551. }
  552. .section-item {
  553. background: #fff;
  554. border-radius: 16rpx;
  555. padding: 30rpx;
  556. margin-bottom: 20rpx;
  557. box-sizing: border-box;
  558. border: 1px solid rgba(227, 231, 236, 1);
  559. border-radius: 12px;
  560. .section-header {
  561. display: flex;
  562. align-items: center;
  563. justify-content: space-between;
  564. margin-bottom: 20rpx;
  565. .section-title {
  566. color: rgba(23, 23, 37, 1);
  567. font-family: Inter;
  568. font-size: 32rpx;
  569. font-weight: 600;
  570. line-height: 48rpx;
  571. letter-spacing: 0%;
  572. text-align: left;
  573. }
  574. .template-text {
  575. color: rgba(120, 130, 138, 1);
  576. font-family: DM Sans;
  577. font-size: 24rpx;
  578. font-weight: 400;
  579. line-height: 32rpx;
  580. letter-spacing: 0%;
  581. text-align: left;
  582. }
  583. .edit-icon {
  584. width: 40rpx;
  585. height: 40rpx;
  586. display: flex;
  587. align-items: center;
  588. justify-content: center;
  589. }
  590. }
  591. .section-status {
  592. font-size: 28rpx;
  593. color: #007AFF;
  594. font-weight: 500;
  595. }
  596. .advantage-content {
  597. font-size: 14px;
  598. color: #666;
  599. line-height: 1.6;
  600. textarea{
  601. width: 100%;
  602. height: fit-content;
  603. min-height: 44rpx;
  604. }
  605. }
  606. }
  607. // 全职期望卡片样式
  608. .expectation-card {
  609. background: #ffffff;
  610. border-radius: 12rpx;
  611. padding: 30rpx;
  612. margin-bottom: 20rpx;
  613. box-sizing: border-box;
  614. border: 0.5px solid rgba(227, 231, 236, 1);
  615. border-radius: 6px;
  616. background: rgba(253, 253, 253, 1);
  617. .card-header {
  618. display: flex;
  619. justify-content: space-between;
  620. align-items: center;
  621. .header-left {
  622. display: flex;
  623. align-items: center;
  624. .header-icon {
  625. width: 40rpx;
  626. height: 40rpx;
  627. margin-right: 20rpx;
  628. }
  629. .header-title {
  630. color: rgba(29, 33, 41, 1);
  631. font-family: DM Sans;
  632. font-size: 28rpx;
  633. font-weight: 500;
  634. line-height: 16px;
  635. letter-spacing: 0%;
  636. text-align: left;
  637. }
  638. }
  639. .progress-text {
  640. font-family: DM Sans;
  641. font-size: 24rpx;
  642. font-weight: 700;
  643. line-height: 13px;
  644. letter-spacing: 0%;
  645. text-align: right;
  646. }
  647. }
  648. .job-list {
  649. margin-bottom: 10rpx;
  650. .job-item {
  651. display: flex;
  652. justify-content: space-between;
  653. align-items: center;
  654. padding: 20rpx 0;
  655. &:last-child {
  656. border-bottom: none;
  657. }
  658. .job-info {
  659. flex: 1;
  660. > view:first-child {
  661. display: flex;
  662. justify-content: space-between;
  663. align-items: center;
  664. margin-bottom: 4rpx;
  665. }
  666. .job-title {
  667. color: rgba(29, 33, 41, 1);
  668. font-family: DM Sans;
  669. font-size: 28rpx;
  670. font-weight: 500;
  671. line-height: 16px;
  672. letter-spacing: 0%;
  673. text-align: left;
  674. }
  675. .job-details {
  676. display: block;
  677. font-size: 24rpx;
  678. color: rgba(153, 153, 153, 1);
  679. margin-bottom: 4rpx;
  680. }
  681. .job-location {
  682. font-size: 24rpx;
  683. color: rgba(153, 153, 153, 1);
  684. }
  685. }
  686. .preference-btn {
  687. display: flex;
  688. align-items: center;
  689. padding: 8rpx;
  690. border: 0.5rpx solid #007AFF;
  691. border-radius: 12rpx;
  692. margin-right: 10rpx;
  693. text {
  694. font-size: 18rpx;
  695. color: #007AFF;
  696. }
  697. }
  698. .job-info > view:first-child > view:last-child {
  699. display: flex;
  700. align-items: center;
  701. }
  702. }
  703. }
  704. .add-expectation-btn {
  705. width: 100%;
  706. height: 70rpx;
  707. border: 1rpx solid #007AFF;
  708. border-radius: 42rpx;
  709. display: flex;
  710. align-items: center;
  711. justify-content: center;
  712. text {
  713. font-size: 28rpx;
  714. color: #007AFF;
  715. font-weight: 500;
  716. }
  717. }
  718. }
  719. // 工作经历部分样式
  720. .work-experience-section {
  721. background: #fff;
  722. border-radius: 12px;
  723. padding: 30rpx;
  724. margin-bottom: 20rpx;
  725. box-sizing: border-box;
  726. border: 1px solid rgba(1, 107, 246, 1);
  727. .section-header {
  728. display: flex;
  729. align-items: center;
  730. justify-content: space-between;
  731. margin-bottom: 30rpx;
  732. .section-title {
  733. display: flex;
  734. align-items: center;
  735. .required-mark {
  736. color: #FF3B30;
  737. font-size: 18px;
  738. font-weight: 600;
  739. margin-right: 8rpx;
  740. }
  741. .required-title {
  742. font-family: DM Sans;
  743. font-size: 28rpx;
  744. font-weight: 700;
  745. line-height: 52rpx;
  746. letter-spacing: 0%;
  747. text-align: left;
  748. margin-right: 12rpx;
  749. }
  750. text {
  751. color: rgba(23, 23, 37, 1);
  752. font-family: Inter;
  753. font-size: 20px;
  754. font-weight: 600;
  755. line-height: 24px;
  756. }
  757. }
  758. .section-desc {
  759. color: rgba(1, 107, 246, 1);
  760. font-family: DM Sans;
  761. font-size: 20rpx;
  762. font-weight: 400;
  763. line-height: 44rpx;
  764. letter-spacing: 0%;
  765. text-align: left;
  766. }
  767. }
  768. .experience-list {
  769. .experience-item {
  770. display: flex;
  771. padding: 24rpx 0;
  772. border-bottom: 1rpx solid #F0F0F0;
  773. &:last-child {
  774. border-bottom: none;
  775. }
  776. .company-logo {
  777. width: 90rpx;
  778. height: 90rpx;
  779. margin-right: 24rpx;
  780. flex-shrink: 0;
  781. border-radius: 8px;
  782. background: rgba(246, 246, 246, 1);
  783. .logo-img {
  784. width: 100%;
  785. height: 100%;
  786. border-radius: 8rpx;
  787. }
  788. }
  789. .experience-content {
  790. flex: 1;
  791. .experience-box{
  792. margin-bottom: 20rpx;
  793. }
  794. .job-info-row {
  795. display: flex;
  796. align-items: center;
  797. margin-bottom: 4rpx;
  798. }
  799. .job-title {
  800. color: rgba(23, 23, 37, 1);
  801. font-family: DM Sans;
  802. font-size: 28rpx;
  803. font-weight: 400;
  804. line-height: 44rpx;
  805. letter-spacing: 0%;
  806. text-align: left;
  807. margin-right: 12rpx;
  808. }
  809. .job-department {
  810. color: rgba(120, 130, 138, 1);
  811. font-family: DM Sans;
  812. font-size: 20rpx;
  813. font-weight: 400;
  814. line-height: 44rpx;
  815. letter-spacing: 0%;
  816. text-align: left;
  817. }
  818. .company-period-row {
  819. display: flex;
  820. align-items: center;
  821. justify-content: flex-start;
  822. margin-bottom: 12rpx;
  823. gap: 12rpx;
  824. padding: 12rpx 0;
  825. }
  826. .company-name {
  827. color: rgba(120, 130, 138, 1);
  828. font-family: DM Sans;
  829. font-size: 20rpx;
  830. font-weight: 400;
  831. line-height: 10px;
  832. letter-spacing: 0.5%;
  833. text-align: left;
  834. }
  835. .work-period {
  836. color: rgba(120, 130, 138, 1);
  837. font-family: DM Sans;
  838. font-size: 20rpx;
  839. font-weight: 400;
  840. line-height: 10px;
  841. letter-spacing: 0.5%;
  842. text-align: left;
  843. }
  844. .job-description {
  845. color: rgba(120, 130, 138, 1);
  846. font-family: DM Sans;
  847. font-size: 16rpx;
  848. font-weight: 400;
  849. line-height: 24rpx;
  850. letter-spacing: 0%;
  851. text-align: left;
  852. }
  853. .skill-tags {
  854. display: flex;
  855. flex-wrap: wrap;
  856. gap: 8rpx;
  857. margin-top: 12rpx;
  858. .tag {
  859. background: rgba(153, 153, 153, 0.1);
  860. border-radius: 12rpx;
  861. padding: 6rpx;
  862. color: rgba(102, 102, 102, 1);
  863. font-family: DM Sans;
  864. font-size: 16rpx;
  865. font-weight: 400;
  866. letter-spacing: 0%;
  867. text-align: left;
  868. }
  869. }
  870. }
  871. }
  872. }
  873. }
  874. // 教育经历部分样式
  875. .education-section {
  876. background: #fff;
  877. border-radius: 12px;
  878. padding: 30rpx;
  879. margin-bottom: 20rpx;
  880. box-sizing: border-box;
  881. border: 1px solid rgba(227, 231, 236, 1);
  882. .section-header {
  883. display: flex;
  884. align-items: center;
  885. justify-content: space-between;
  886. margin-bottom: 30rpx;
  887. .section-title {
  888. text {
  889. color: rgba(23, 23, 37, 1);
  890. font-family: Inter;
  891. font-size: 20px;
  892. font-weight: 600;
  893. line-height: 24px;
  894. }
  895. }
  896. }
  897. .education-list {
  898. .education-item {
  899. display: flex;
  900. padding: 24rpx 0;
  901. border-bottom: 1rpx solid #F0F0F0;
  902. &:last-child {
  903. border-bottom: none;
  904. }
  905. .school-logo {
  906. width: 90rpx;
  907. height: 90rpx;
  908. margin-right: 24rpx;
  909. flex-shrink: 0;
  910. border-radius: 8px;
  911. background: rgba(246, 246, 246, 1);
  912. .logo-img {
  913. width: 100%;
  914. height: 100%;
  915. border-radius: 8rpx;
  916. }
  917. }
  918. .education-content {
  919. flex: 1;
  920. .school-name {
  921. color: rgba(23, 23, 37, 1);
  922. font-family: DM Sans;
  923. font-size: 18px;
  924. font-weight: 400;
  925. line-height: 22px;
  926. letter-spacing: 0%;
  927. text-align: left;
  928. }
  929. .degree-info {
  930. color: rgba(120, 130, 138, 1);
  931. font-family: DM Sans;
  932. font-size: 20rpx;
  933. font-weight: 500;
  934. line-height: 24px;
  935. letter-spacing: 0%;
  936. text-align: left;
  937. padding: 12rpx 0;
  938. }
  939. .education-description {
  940. color: rgba(120, 130, 138, 1);
  941. font-family: DM Sans;
  942. font-size: 20rpx;
  943. font-weight: 400;
  944. line-height: 16px;
  945. letter-spacing: 0%;
  946. text-align: left;
  947. }
  948. }
  949. }
  950. }
  951. }
  952. // 技能部分样式
  953. .skills-section {
  954. background: #fff;
  955. border-radius: 12px;
  956. padding: 30rpx;
  957. margin-bottom: 20rpx;
  958. box-sizing: border-box;
  959. border: 1px solid rgba(227, 231, 236, 1);
  960. .section-header {
  961. display: flex;
  962. align-items: center;
  963. justify-content: space-between;
  964. margin-bottom: 30rpx;
  965. .section-title {
  966. text {
  967. color: rgba(23, 23, 37, 1);
  968. font-family: Inter;
  969. font-size: 20px;
  970. font-weight: 600;
  971. line-height: 24px;
  972. }
  973. }
  974. }
  975. .skills-grid {
  976. display: flex;
  977. flex-wrap: wrap;
  978. gap: 16rpx;
  979. .skill-tag {
  980. padding: 32rpx;
  981. border: 1px solid rgba(236, 241, 246, 1);
  982. border-radius: 64rpx;
  983. color: rgba(23, 23, 37, 1);
  984. font-family: DM Sans;
  985. font-size: 14px;
  986. font-weight: 400;
  987. line-height: 20px;
  988. letter-spacing: 0.5%;
  989. text-align: right;
  990. }
  991. }
  992. }
  993. }
  994. </style>