attachment.vue 22 KB

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