attachment.vue 24 KB

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