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