attachment.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056
  1. <template>
  2. <view style="height: 100vh;" class="flex flex-direction">
  3. <!-- 顶部导航栏 -->
  4. <view class="navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
  5. <view class="navbar-content">
  6. <view class="navbar-left" @click="goBack">
  7. <u-icon name="arrow-leftward" size="36" color="#333"></u-icon>
  8. </view>
  9. <view class="navbar-title">附件管理</view>
  10. <view class="navbar-right"></view>
  11. </view>
  12. </view>
  13. <!-- <nav-bar title="基本信息"></nav-bar> -->
  14. <view class="contain flex flex-direction">
  15. <scroll-view scroll-with-animation scroll-y>
  16. <!-- 我的公司 -->
  17. <view class="usermain-item item-padding" v-for="item in content">
  18. <view class="usermain-item-title c-flex-center">
  19. <image
  20. :src="item.fileType == 'pdf' ? '../../static/images/pdf.svg' : '../../static/images/docx.svg'"
  21. class="header-icon" mode="aspectFill" />
  22. </view>
  23. <view @click="seekDoc(item)" class="fileContent c-flex-center">
  24. <view class="fileName m-ellipsis">{{ item.attachmentName }}</view>
  25. <view class="filedesc">{{ item.attachmentSize }}kb 更新于{{ item.createTime }}</view>
  26. </view>
  27. <view @click.stop="more(item.resumesAttachmentId)" class="c-flex-center">
  28. <u-icon name="more-dot-fill"></u-icon>
  29. </view>
  30. </view>
  31. <empty :isShow="false" v-if="content.length == 0" />
  32. </scroll-view>
  33. </view>
  34. <!-- #ifdef APP-PLUS -->
  35. <view class="white-btn" v-if="showWXUploadBtn" @click="handleWeChatUpload">微信上传</view>
  36. <!-- #endif -->
  37. <view class="buttons flex align-center">
  38. <view class="button pain" @click="showTipPopup = true">Ai一键解析简历</view>
  39. <view class="button primary">
  40. 简历上传
  41. <fileSelector title="" allowType=".doc,.docx,.xls,.xlsx,.pdf" @fileSelected="uploadResumes"
  42. @filesChanged="onFilesChanged" />
  43. </view>
  44. </view>
  45. <!-- 简历解析确认弹窗 -->
  46. <view class="popup-container" v-if="showTipPopup" @click="showTipPopup = false">
  47. <view class="popup-content">
  48. <view class="popup-title">温馨提示</view>
  49. <view class="tip-container">
  50. <view>1-2页简历识别预计耗时1分钟;</view>
  51. <view>3-5页简历识别预计耗时1-3分钟;</view>
  52. <view>5页简历以上耗时将会超过5分;</view>
  53. <view>请您耐心等待!</view>
  54. </view>
  55. <image src="@/static/upload-tip.png" class="upload-tip"></image>
  56. <view class="button-primary" @click.stop="handlUploadFile">知道了</view>
  57. </view>
  58. </view>
  59. <!-- 简历解析加载 -->
  60. <view class="load-container" v-if="showLoadCard">
  61. <image src="@/static/loading.gif" class="loading-image" mode="aspectFit"></image>
  62. </view>
  63. <!-- 权限说明弹窗 -->
  64. <u-popup mode="top" ref="permission">
  65. <view class="popup-content">
  66. <view class="popup-text-permission">选择/拍摄照片需要相机/相册权限,用于上传用户头像</view>
  67. </view>
  68. </u-popup>
  69. <!-- 同步解析简历数据 -->
  70. <u-popup v-model="showResumesAnalysis" mode="bottom" border-radius="14" :mask-close-able="false">
  71. <view class="resume-popup">
  72. <view class="close-button flex align-center justify-center" @click="showResumesAnalysis = false">
  73. <u-icon name="close" color="#fff" size="22" />
  74. </view>
  75. <view class="title">从附件简历中解析出<text>{{ validInfoCount }}段</text>有效信息</view>
  76. <view class="tip">无需手动填写,可直接添加到在线简历中</view>
  77. <view class="info-list">
  78. <view class="info-item flex align-center" v-for="(item, index) in analysisList" :key="index">
  79. <view class="label">{{ item.title }}</view>
  80. <view class="border"></view>
  81. <view class="content">{{ item.value }}</view>
  82. </view>
  83. </view>
  84. <view class="button" @click="handleSync">立即同步</view>
  85. </view>
  86. </u-popup>
  87. </view>
  88. </template>
  89. <script>
  90. import configdata from '../../common/config.js';
  91. import navBar from "@/components/nav-bar/index.vue";
  92. // 引入组件
  93. import fileSelector from '@/uni_modules/zhouquan-fileSelector/components/zhouquan-fileSelector/file-selector.vue';
  94. import empty from '../../components/empty.vue'
  95. // #ifdef APP-PLUS
  96. import { chooseFileFromModule } from '@/uni_modules/sr-file-choose'
  97. // #endif
  98. let AIResumeData = {}
  99. export default {
  100. components: {
  101. navBar,
  102. fileSelector,
  103. empty
  104. },
  105. data() {
  106. return {
  107. statusBarHeight: 0, // 状态栏高度
  108. phone: '',
  109. weChatNum: '',//微信号
  110. email: '',//接收简历邮箱
  111. selectedCompany: '深圳市汉瑞国际猎头服务有限公司', // 我的公司
  112. selectedPosition: '人事总监', // 我的职务
  113. avatar: '../../static/logo.png',
  114. userName: '',
  115. nickName: '',
  116. userId: '',
  117. realName: '',
  118. weChatId: "",
  119. password: '',
  120. platform: '',
  121. createTime: '',
  122. money: '',
  123. jiFen: '',
  124. status: '',
  125. zhiFuBao: '',
  126. zhiFuBaoName: '',
  127. sex: 1,
  128. age: 0,
  129. content: [],
  130. showLoadCard: false,
  131. showResumesAnalysis: false,
  132. validInfoCount: 0, // 有效信息数量
  133. analysisList: [
  134. {
  135. title: '基本信息',
  136. value: '',
  137. },
  138. {
  139. title: '工作经历',
  140. value: '',
  141. },
  142. {
  143. title: '教育经历',
  144. value: '',
  145. },
  146. {
  147. title: '个人优势',
  148. value: '',
  149. },
  150. ],
  151. loading: false,
  152. showTipPopup: false,
  153. showWXUploadBtn: false
  154. };
  155. },
  156. computed: {
  157. phoneWithMask() {
  158. if (this.phone && this.phone.length >= 11) {
  159. return this.phone.substring(0, 3) + '******' + this.phone.substring(9);
  160. }
  161. return this.phone || '请设置手机号';
  162. }
  163. },
  164. onLoad(e) {
  165. // 获取状态栏高度
  166. let systemInfo = uni.getSystemInfoSync();
  167. this.statusBarHeight = systemInfo.statusBarHeight || 0;
  168. this.getUserInfo()
  169. // this.avatar = uni.getStorageSync('avatar')
  170. this.getWXUploadConfigData()
  171. },
  172. methods: {
  173. // 返回上一页
  174. goBack() {
  175. uni.navigateBack();
  176. },
  177. // 修改手机号
  178. modifyPhone() {
  179. console.log('点击修改手机号,当前手机号:', this.phone);
  180. const url = `/pages/my/userphone?currentPhone=${this.phone}`;
  181. console.log('跳转路径:', url);
  182. uni.navigateTo({
  183. url: url,
  184. });
  185. },
  186. // 选择公司
  187. selectCompany() {
  188. uni.navigateTo({
  189. url: '/pages/my/myCompany'
  190. });
  191. },
  192. // 选择职务
  193. selectPosition() {
  194. // 这里可以跳转到职务选择页面或显示职务选择弹窗
  195. console.log('选择职务');
  196. },
  197. onChooseAvatar(e) {
  198. let that = this;
  199. let token = uni.getStorageSync('token');
  200. uni.uploadFile({
  201. url: this.$Request.config("APIHOST1") +
  202. '/alioss/upload', //真实的接口地址
  203. filePath: e.detail.avatarUrl,
  204. header: {
  205. token: token
  206. },
  207. name: 'file',
  208. success: uploadFileRes => {
  209. let url = JSON.parse(uploadFileRes.data);
  210. that.avatar = url.data
  211. uni.hideLoading();
  212. }
  213. });
  214. },
  215. goMyAddress() {
  216. uni.navigateTo({
  217. url: '../jifen/myaddress'
  218. });
  219. },
  220. getUserInfo() {
  221. this.$Request.get("/app/resumes/getAttachment").then(res => {
  222. if (res.code == 0) {
  223. res.data.forEach(function (item) {
  224. const ext = item.attachmentName.split('.').pop().toLowerCase();
  225. item.fileType = ext
  226. })
  227. this.content = res.data
  228. }
  229. uni.hideLoading();
  230. });
  231. },
  232. // 保存
  233. uploadResumes(e) {
  234. var that = this
  235. console.log(e.path)
  236. const validExtensions = ['pdf', 'doc', 'docx'];
  237. const ext = e.name.split('.').pop().toLowerCase();
  238. if (!validExtensions.includes(ext)) {
  239. this.$queue.showToast('仅支持PDF/DOC/DOCX格式')
  240. return;
  241. }
  242. uni.getFileInfo({
  243. filePath: e.path,
  244. success: (info) => {
  245. console.log('文件大小:', info.size); // 单位:字节
  246. let attachment_size = (info.size / 1024).toFixed(1)
  247. that.$queue.uploadFile(e.path, function (path) {
  248. if (path)
  249. that.$Request.postJson("/app/resumes/saveAttachment", {
  250. attachmentAddress: path,
  251. attachmentName: e.name,
  252. attachmentSize: attachment_size
  253. }).then(res => {
  254. if (res.code === 0) {
  255. that.getUserInfo()
  256. uni.$emit('updateAttachmentList')
  257. } else {
  258. uni.showToast({
  259. title: res.msg,
  260. icon: "none"
  261. })
  262. }
  263. })
  264. else
  265. that.$queue.showToast('文件上传失败')
  266. })
  267. },
  268. fail: (err) => {
  269. console.error('获取失败', err);
  270. }
  271. });
  272. },
  273. more(id) {
  274. uni.showActionSheet({
  275. itemList: ["AI解析", "删除"],
  276. itemColor: "#3273db",
  277. success: res => {
  278. if (res.tapIndex == 0) {
  279. let [resume] = this.content.filter(item => item.resumesAttachmentId == id)
  280. if (resume) {
  281. this.analyserResumeByUrl(resume?.attachmentAddress)
  282. } else {
  283. this.$queue.showToast('获取简历失败')
  284. }
  285. } else if (res.tapIndex == 1) {
  286. this.deleteAttachment(id)
  287. }
  288. },
  289. fail(res) {
  290. console.log(res.errMsg);
  291. },
  292. });
  293. },
  294. handleWeChatUpload() {
  295. plus.share.getServices(res => {
  296. let weixinService = null;
  297. for (let i in res) {
  298. if (res[i].id === 'weixin') {
  299. weixinService = res[i];
  300. break;
  301. }
  302. }
  303. console.log('weixinService :>> ', weixinService);
  304. const userId = uni.getStorageSync('userId')
  305. if (weixinService) {
  306. weixinService.launchMiniProgram({
  307. id: 'gh_854ab5288c2d',
  308. path: `/pages/index/index?userId=${userId}`,
  309. type: 0 // 小程序版本类型:0-正式版;1-测试版;2-体验版
  310. });
  311. } else {
  312. console.log('未安装微信或获取微信服务失败');
  313. }
  314. });
  315. },
  316. deleteAttachment(id) {
  317. var that = this;
  318. uni.showModal({
  319. title: '提示',
  320. content: '确定删除?',
  321. success(res) {
  322. if (res.confirm) {
  323. that.$Request.postJson("/app/resumes/deleteAttachment", {
  324. resumesAttachmentId: id
  325. }).then(res => {
  326. if (res.code === 0) {
  327. var info = that.content.filter(function (item) {
  328. return item.resumesAttachmentId != id;
  329. });
  330. that.content = info
  331. uni.$emit('updateAttachmentList')
  332. } else {
  333. uni.showToast({
  334. title: res.msg,
  335. icon: "none"
  336. })
  337. }
  338. })
  339. } else if (res.cancel) {
  340. console.log('用户点击取消')
  341. }
  342. }
  343. })
  344. },
  345. onFilesChanged(e) {
  346. console.log(e)
  347. },
  348. seekDoc(it) {
  349. //#ifdef APP-PLUS
  350. uni.downloadFile({
  351. url: it.attachmentAddress,
  352. success: function (res) {
  353. var filePath = res.tempFilePath;
  354. uni.openDocument({
  355. filePath: filePath,
  356. showMenu: true,
  357. success: function (res) {
  358. console.log('打开文档成功');
  359. }
  360. });
  361. }
  362. });
  363. return;
  364. //#endif
  365. uni.navigateTo({
  366. url: '/pages/index/webView?url=' + it.attachmentAddress + '&title=' + it.attachmentName
  367. });
  368. },
  369. // 附件一键识别
  370. handlUploadFile() {
  371. if (this.content.length >= 3) {
  372. this.showTipPopup = false
  373. this.$queue.showToast('最多保存三张附件简历,请删除后再试')
  374. return
  375. }
  376. // #ifdef APP-PLUS
  377. chooseFileFromModule({
  378. complete: res => {
  379. let path = res.path
  380. let name = res.name
  381. let fileType = ''
  382. // 如果没有name,默认为:截取最后一个/之后的内容
  383. if (!name) {
  384. let lastIndex = path.lastIndexOf('/');
  385. if (lastIndex !== -1) {
  386. name = path.substring(lastIndex + 1);
  387. } else {
  388. name = Math.random().toString(36).substr(2) + Date.now();
  389. }
  390. }
  391. // 使用 lastIndexOf 方法找到最后一个 . 的位置
  392. let lastDotIndex = name.lastIndexOf('.');
  393. if (lastDotIndex !== -1) {
  394. fileType = name.substring(lastDotIndex + 1);
  395. } else {
  396. console.log('文件路径中没有 .');
  397. }
  398. let file = {
  399. size: res.size,
  400. path,
  401. fileType,
  402. name
  403. }
  404. this.uploadAndAnalysisResumes(file)
  405. }
  406. })
  407. // #endif
  408. // #ifdef H5
  409. uni.chooseFile({
  410. count: 1,
  411. success: res => {
  412. this.uploadAndAnalysisResumes({
  413. path: res.tempFilePaths[0],
  414. name: 'file'
  415. })
  416. }
  417. })
  418. // #endif
  419. },
  420. // 上传解析简历
  421. uploadAndAnalysisResumes(file) {
  422. this.showTipPopup = false
  423. this.showLoadCard = true
  424. this.$queue.uploadFiles({
  425. url: '/app/resumes/resumesAnalysisPlus',
  426. path: file.path,
  427. name: 'file',
  428. timeout: 480000,
  429. hideUploadTask: true
  430. }, (res) => {
  431. if (!res) {
  432. this.showModal('解析失败,请稍后重试')
  433. this.stopLoadStatus()
  434. return
  435. }
  436. if (res.code == 0 && res.data) {
  437. // 识别前,先清空数据
  438. this.clearResumeData()
  439. this.setAiResumesAnalysis(JSON.parse(res.data))
  440. this.getUserInfo()
  441. } else {
  442. this.showModal(res?.msg || '解析失败,请稍后重试')
  443. }
  444. this.stopLoadStatus()
  445. })
  446. },
  447. stopLoadStatus() {
  448. this.showLoadCard = false
  449. },
  450. // 获取简历解析数据
  451. setAiResumesAnalysis(data) {
  452. AIResumeData = data || {}
  453. if (data) {
  454. this.showResumesAnalysis = true
  455. // 基本信息
  456. if (data.name || data.age || data.email) {
  457. this.validInfoCount++
  458. let dataArray = []
  459. if (data.name) {
  460. dataArray.push(data.name)
  461. }
  462. if (data.age) {
  463. dataArray.push(data.age)
  464. }
  465. if (data.email) {
  466. dataArray.push(data.email)
  467. }
  468. this.analysisList[0].value = dataArray.join('、')
  469. }
  470. // 工作经历
  471. if (data.workExperience?.length) {
  472. this.validInfoCount++
  473. let dataArray = data.workExperience.map(item => item.company)
  474. this.analysisList[1].value = dataArray.join('、')
  475. }
  476. // 教育经历
  477. if (data.education?.length) {
  478. this.validInfoCount++
  479. let dataArray = data.education.map(item => item.school)
  480. this.analysisList[2].value = dataArray.join('、')
  481. }
  482. // 个人优势
  483. if (data.selfEvaluation) {
  484. this.validInfoCount++
  485. this.analysisList[3].value = data.selfEvaluation
  486. }
  487. }
  488. },
  489. // 同步简历数据
  490. handleSync() {
  491. if (this.loading) return
  492. uni.showLoading({ title: '同步中' })
  493. this.loading = true
  494. this.$Request
  495. .postJson('/app/resumes/syncResumess', AIResumeData)
  496. .then(res => {
  497. if (res.code === 0) {
  498. this.showResumesAnalysis = false
  499. this.$queue.showToast('同步成功')
  500. } else {
  501. this.$queue.showToast('同步失败')
  502. }
  503. })
  504. .finally(() => {
  505. this.loading = false
  506. uni.hideLoading()
  507. })
  508. },
  509. // 清空数据
  510. clearResumeData() {
  511. this.analysisList.forEach(item => {
  512. item.value = ''
  513. })
  514. },
  515. showModal(content) {
  516. uni.showModal({
  517. title: '提示',
  518. content,
  519. showCancel: false
  520. })
  521. },
  522. // 通过文件地址解析简历
  523. analyserResumeByUrl(filePath) {
  524. this.showLoadCard = true
  525. this.$Request.getT('/app/resumes/resumesAnalysisAttach', {
  526. filePath
  527. }, null, 480000, true).then(res => {
  528. if (!res) {
  529. this.showModal('解析失败,请稍后重试')
  530. this.stopLoadStatus()
  531. return
  532. }
  533. if (res.code == 0 && res.data) {
  534. // 识别前,先清空数据
  535. this.clearResumeData()
  536. this.setAiResumesAnalysis(JSON.parse(res.data))
  537. this.getUserInfo()
  538. } else {
  539. this.showModal(res?.msg || '解析失败,请稍后重试')
  540. }
  541. this.stopLoadStatus()
  542. }).catch(err => {
  543. this.showModal('解析失败,请稍后重试')
  544. this.stopLoadStatus()
  545. })
  546. },
  547. // 获取微信上传配置数据
  548. getWXUploadConfigData() {
  549. this.$Request.getT('/app/dict/list', {
  550. type: '小程序入口'
  551. }).then(res => {
  552. if (res.code == 0 && res.data?.length > 0) {
  553. this.showWXUploadBtn = res.data[0].code == '开'
  554. }
  555. })
  556. }
  557. },
  558. // userphone(){
  559. // uni.navigateTo({
  560. // url:'/pages/my/userphone'
  561. // })
  562. // }
  563. };
  564. </script>
  565. <style lang="scss" scoped>
  566. page {
  567. /* background: #f6f6f6; */
  568. }
  569. .navbar {
  570. padding: 24rpx 32rpx 20rpx 32rpx;
  571. background: #fff;
  572. .navbar-content {
  573. display: flex;
  574. align-items: center;
  575. justify-content: space-between;
  576. height: 60rpx;
  577. .navbar-left {
  578. width: 60rpx;
  579. height: 60rpx;
  580. display: flex;
  581. align-items: center;
  582. justify-content: center;
  583. }
  584. .navbar-title {
  585. color: rgba(23, 23, 37, 1);
  586. font-family: DM Sans;
  587. font-size: 36rpx;
  588. font-weight: 700;
  589. line-height: 52rpx;
  590. letter-spacing: 0%;
  591. text-align: center;
  592. }
  593. .navbar-right {
  594. width: 60rpx;
  595. height: 60rpx;
  596. }
  597. }
  598. }
  599. button::after {
  600. border: none;
  601. background-color: none;
  602. }
  603. button {
  604. position: relative;
  605. display: block;
  606. margin-left: auto;
  607. margin-right: auto;
  608. padding-left: 0px;
  609. padding-right: 0px;
  610. box-sizing: border-box;
  611. text-decoration: none;
  612. line-height: 1.35;
  613. overflow: hidden;
  614. color: #666666;
  615. /* background-color: #fff; */
  616. background-color: rgba(255, 255, 255, 0) !important;
  617. width: 100%;
  618. height: 100%;
  619. }
  620. .contain {
  621. flex: 1;
  622. scroll-view {
  623. height: 100%;
  624. }
  625. }
  626. .usermain-item {
  627. display: flex;
  628. justify-content: space-between;
  629. margin: 0 40rpx;
  630. padding: 30rpx 0;
  631. // border-bottom: 1rpx solid rgba(229, 229, 229, 0.3);
  632. background: #fff;
  633. .fileContent {
  634. width: 85%;
  635. margin: 0 20rpx;
  636. }
  637. .fileName {
  638. color: #222;
  639. font-size: 32rpx;
  640. }
  641. .filedesc {
  642. margin-top: 10rpx;
  643. font-size: 24rpx;
  644. }
  645. .c-flex-center {
  646. align-self: center;
  647. color: #aaa;
  648. flex-shrink: 0;
  649. }
  650. }
  651. .usermain-item-title {
  652. color: rgba(31, 44, 55, 1);
  653. font-family: DM Sans;
  654. font-size: 28rpx;
  655. font-weight: 500;
  656. line-height: 44rpx;
  657. text-align: left;
  658. .header-icon {
  659. width: 50rpx;
  660. height: 50rpx;
  661. display: block;
  662. }
  663. }
  664. .usermain-item.item-padding {
  665. /* padding: 0; */
  666. }
  667. .cu-form-group {
  668. padding: 0;
  669. background: #ffffff;
  670. text-align: right;
  671. }
  672. .cu-form-group input {
  673. background: #ffffff;
  674. font-size: 28rpx;
  675. /* color: #fff; */
  676. }
  677. /* 姓名字段样式 - 参考basicInfo.vue */
  678. .usermain-item .form-label {
  679. color: rgba(31, 44, 55, 1);
  680. font-family: DM Sans;
  681. font-size: 32rpx;
  682. font-weight: 500;
  683. line-height: 44rpx;
  684. letter-spacing: 0.5%;
  685. text-align: left;
  686. display: flex;
  687. align-items: center;
  688. margin-bottom: 16rpx;
  689. }
  690. .usermain-item .required-mark {
  691. color: #FF3B30;
  692. font-size: 36rpx;
  693. font-weight: 600;
  694. margin-right: 8rpx;
  695. }
  696. .usermain-item .cu-form-group {
  697. background: transparent;
  698. text-align: left;
  699. padding: 0;
  700. }
  701. .usermain-item .cu-form-group input {
  702. width: 100%;
  703. height: 68rpx;
  704. font-size: 28rpx;
  705. border: 1rpx solid rgba(227, 231, 236, 1);
  706. border-radius: 44rpx;
  707. color: rgba(23, 23, 37, 1);
  708. padding: 0 32rpx;
  709. background: #ffffff;
  710. font-family: DM Sans;
  711. font-weight: 400;
  712. }
  713. .usermain-item .cu-form-group input::placeholder {
  714. color: rgba(155, 155, 155, 1);
  715. font-size: 28rpx;
  716. }
  717. /* 联系方式样式 */
  718. .contact-structure {
  719. border-bottom: none !important;
  720. }
  721. .contact-wrapper {
  722. display: flex;
  723. align-items: center;
  724. justify-content: space-between;
  725. padding: 0;
  726. margin-top: 8rpx;
  727. }
  728. .phone-display {
  729. color: rgba(23, 23, 37, 1);
  730. font-family: DM Sans;
  731. font-size: 28rpx;
  732. font-weight: 400;
  733. line-height: 40rpx;
  734. letter-spacing: 0.5%;
  735. }
  736. .modify-link {
  737. color: rgba(24, 144, 255, 1);
  738. font-family: DM Sans;
  739. font-size: 28rpx;
  740. font-weight: 400;
  741. line-height: 40rpx;
  742. letter-spacing: 0.5%;
  743. cursor: pointer;
  744. text-decoration: none;
  745. }
  746. .modify-link:active {
  747. opacity: 0.7;
  748. }
  749. /* 头像编辑图标样式 */
  750. .avatar-wrapper {
  751. position: relative;
  752. display: inline-block;
  753. }
  754. .edit-avatar-icon {
  755. position: absolute;
  756. bottom: 10rpx;
  757. right: 2rpx;
  758. width: 24rpx;
  759. height: 24rpx;
  760. // background: #fff;
  761. border-radius: 50%;
  762. display: flex;
  763. align-items: center;
  764. justify-content: center;
  765. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  766. }
  767. .avatar-button {
  768. position: relative;
  769. padding: 0;
  770. margin: 0;
  771. background: transparent;
  772. border: none;
  773. }
  774. .buttons {
  775. padding: 40rpx 40rpx 60rpx;
  776. .button {
  777. position: relative;
  778. flex: 1;
  779. height: 80rpx;
  780. line-height: 80rpx;
  781. text-align: center;
  782. border-radius: 80rpx;
  783. &:first-child {
  784. margin-right: 16rpx;
  785. }
  786. }
  787. .pain {
  788. color: rgba(1, 107, 246, 1);
  789. background: rgba(1, 107, 246, 0.1);
  790. }
  791. .primary {
  792. color: #fff;
  793. background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
  794. }
  795. ::v-deep .main {
  796. position: absolute;
  797. left: 0;
  798. top: 0;
  799. width: 100%;
  800. height: 100%;
  801. padding: 0;
  802. .upload-area {
  803. margin: 0;
  804. background: transparent;
  805. }
  806. }
  807. }
  808. /* 选择器样式 - 参考workExperience页面 */
  809. .form-input-selector {
  810. width: 100%;
  811. height: 68rpx;
  812. padding: 0 40rpx;
  813. border: 1px solid rgba(227, 231, 236, 1);
  814. border-radius: 24px;
  815. background: rgba(255, 255, 255, 1);
  816. display: flex;
  817. align-items: center;
  818. justify-content: space-between;
  819. cursor: pointer;
  820. transition: all 0.2s ease;
  821. .placeholder {
  822. color: #999999;
  823. font-family: DM Sans;
  824. font-size: 28rpx;
  825. font-weight: 400;
  826. line-height: 40rpx;
  827. }
  828. text {
  829. color: rgba(23, 23, 37, 1);
  830. font-family: DM Sans;
  831. font-size: 28rpx;
  832. font-weight: 400;
  833. line-height: 40rpx;
  834. }
  835. }
  836. .arrow-down {
  837. color: rgba(96, 98, 102, 1);
  838. font-size: 24rpx;
  839. font-weight: 400;
  840. transform: scale(1.5);
  841. }
  842. .selector-group:active {
  843. background: #f5f7fa !important;
  844. transform: scale(0.99);
  845. }
  846. .white-btn {
  847. width: 600rpx;
  848. font-size: 32rpx;
  849. text-align: center;
  850. color: #016bf6;
  851. background-color: #fff;
  852. border-radius: 88rpx;
  853. margin: 32rpx auto 0;
  854. }
  855. .load-container {
  856. position: fixed;
  857. left: 0;
  858. top: 0;
  859. width: 100%;
  860. height: 100%;
  861. display: flex;
  862. align-items: center;
  863. justify-content: center;
  864. background: rgba(0, 0, 0, 1);
  865. .loading-image {
  866. width: 100%;
  867. height: 100%;
  868. }
  869. }
  870. // 解析简历popup
  871. .resume-popup {
  872. position: relative;
  873. padding: 70rpx 40rpx 40rpx;
  874. .title {
  875. font-size: 40rpx;
  876. font-weight: 700;
  877. line-height: 52rpx;
  878. color: #333;
  879. margin-bottom: 12rpx;
  880. text {
  881. color: #016bf6;
  882. }
  883. }
  884. .tip {
  885. font-size: 28rpx;
  886. line-height: 36rpx;
  887. color: #999999;
  888. }
  889. .info-list {
  890. .info-item {
  891. box-sizing: border-box;
  892. border: 1px solid rgba(242, 242, 242, 1);
  893. border-radius: 6px;
  894. background: rgba(250, 250, 250, 1);
  895. padding: 26rpx 24rpx;
  896. margin-top: 40rpx;
  897. .label {
  898. font-size: 28rpx;
  899. font-weight: 500;
  900. line-height: 1;
  901. color: rgba(51, 51, 51, 1);
  902. }
  903. .border {
  904. width: 1px;
  905. height: 20rpx;
  906. margin: 0 20rpx;
  907. background: rgba(234, 234, 234, 1);
  908. }
  909. .content {
  910. flex: 1;
  911. width: 0;
  912. overflow: hidden;
  913. text-overflow: ellipsis;
  914. white-space: nowrap;
  915. color: rgba(153, 153, 153, 1);
  916. font-size: 28rpx;
  917. line-height: 1;
  918. }
  919. }
  920. }
  921. .button {
  922. width: 600rpx;
  923. height: 88rpx;
  924. border-radius: 88rpx;
  925. background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
  926. font-size: 32rpx;
  927. font-weight: 500;
  928. line-height: 88rpx;
  929. text-align: center;
  930. color: #fff;
  931. margin: 60rpx auto 0;
  932. }
  933. .close-button {
  934. position: absolute;
  935. top: 30rpx;
  936. right: 40rpx;
  937. width: 40rpx;
  938. height: 40rpx;
  939. border-radius: 40rpx;
  940. background: rgba(230, 230, 230, 1);
  941. }
  942. }
  943. // 简历解析提示弹窗
  944. .popup-container {
  945. position: fixed;
  946. left: 0;
  947. top: 0;
  948. width: 100vw;
  949. height: 100vh;
  950. display: flex;
  951. align-items: center;
  952. justify-content: center;
  953. background: rgba(0, 0, 0, 0.4);
  954. .popup-content {
  955. padding: 40rpx 0;
  956. border-radius: 20rpx;
  957. background: #fff;
  958. .popup-title {
  959. font-size: 32rpx;
  960. font-weight: 600;
  961. line-height: 56rpx;
  962. color: rgba(16, 24, 40, 1);
  963. text-align: center;
  964. margin-bottom: 20rpx;
  965. }
  966. .tip-container {
  967. padding: 0 130rpx;
  968. color: rgba(96, 96, 96, 1);
  969. font-size: 28rpx;
  970. line-height: 36rpx;
  971. }
  972. .upload-tip {
  973. display: block;
  974. width: 654rpx;
  975. height: 802rpx;
  976. }
  977. .button-primary {
  978. height: 80rpx;
  979. border-radius: 80rpx;
  980. text-align: center;
  981. color: #fff;
  982. font-size: 32rpx;
  983. line-height: 80rpx;
  984. margin: 0 40rpx;
  985. background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
  986. }
  987. }
  988. }
  989. </style>