From 0e7f98d3fc593198d1e96a09acc5dcc7a47fc846 Mon Sep 17 00:00:00 2001 From: KQL Date: Fri, 12 Sep 2025 16:12:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96HR=E8=AE=BF=E9=97=AE?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=92=8C=E7=AE=80=E5=8E=86=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - HR访问弹窗改进: - 重新设计弹窗样式，使用浅蓝色渐变背景 - 添加头像点击切换功能，可查看不同HR信息 - 优化头像大小层级显示，中间最大两侧递减 - 调整弹窗尺寸和间距，提升视觉体验 - 简历详情模态框增强: - 在主要标题前添加图标装饰 - 修复简历内容解析中的语法错误 - 优化数据结构处理逻辑 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/HRVisitModal/index.css | 195 +++++++++++------- src/components/HRVisitModal/index.jsx | 37 +++- .../components/ResumeInfoModal/index.jsx | 25 ++- 3 files changed, 164 insertions(+), 93 deletions(-) diff --git a/src/components/HRVisitModal/index.css b/src/components/HRVisitModal/index.css index 4743bdd..2fed7f4 100644 --- a/src/components/HRVisitModal/index.css +++ b/src/components/HRVisitModal/index.css @@ -1,25 +1,78 @@ -.hr-visit-modal .arco-modal { - border-radius: 16px; +/* 弹窗主容器 - 直接定位到arco-modal元素 */ +.arco-modal.hr-visit-modal { + border-radius: 20px !important; overflow: hidden; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + width: 500px !important; + max-width: none !important; } +/* 确保动画完成后的状态也有圆角 */ +.arco-modal.hr-visit-modal.zoomModal-enter-done { + border-radius: 20px !important; +} + +/* 弹窗内容区域 */ .hr-visit-modal .arco-modal-content { padding: 0; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: transparent; position: relative; + overflow: hidden; + border-radius: 24px; } +/* 自定义内容容器 */ .hr-visit-modal-content { - padding: 40px 30px 30px; + padding: 0; text-align: center; position: relative; - background: linear-gradient(135deg, #a8e6cf 0%, #88c999 50%, #67b26f 100%); - min-height: 400px; + background: linear-gradient(180deg, #D4E8FF 0%, #FFFFFF 100%); + min-height: 280px; display: flex; flex-direction: column; - justify-content: space-between; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 20px; } +/* 顶部装饰背景 */ +.modal-background-image { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 150px; + overflow: hidden; + z-index: 1; + border-radius: 20px 20px 0 0; + pointer-events: none; +} + +.modal-background-image::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(180deg, + rgba(212, 232, 255, 0) 0%, + rgba(212, 232, 255, 0.2) 50%, + rgba(212, 232, 255, 0.6) 100% + ); + pointer-events: none; +} + +.modal-background-image img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center top; + opacity: 0.8; +} + +/* 关闭按钮 */ .modal-close-btn { position: absolute; top: 16px; @@ -27,27 +80,33 @@ width: 32px; height: 32px; border-radius: 50%; - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; - color: white; + color: #666; font-size: 16px; - transition: background 0.3s ease; - z-index: 20; + transition: all 0.3s ease; + z-index: 100; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .modal-close-btn:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 1); + transform: scale(1.1); } +/* 头像展示区域 */ .hr-avatars-section { - flex: 1; display: flex; align-items: center; justify-content: center; - margin-bottom: 20px; + margin-top: 50px; + margin-bottom: 15px; + position: relative; + z-index: 10; + height: 120px; } .avatar-navigation { @@ -58,131 +117,107 @@ position: relative; } +/* 左右切换按钮 - 隐藏或简化 */ .nav-btn { - background: rgba(255, 255, 255, 0.2); - border: none; - border-radius: 50%; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - color: white; - cursor: pointer; - transition: all 0.3s ease; - font-size: 16px; - z-index: 15; -} - -.nav-btn:hover { - background: rgba(255, 255, 255, 0.3); - transform: scale(1.1); + display: none; } +/* 头像容器 */ .avatars-container { position: relative; - width: 200px; + width: 450px; height: 120px; display: flex; align-items: center; justify-content: center; - margin: 0 20px; - overflow: hidden; + overflow: visible; } +/* 头像项 */ .avatar-item { position: absolute; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .avatar-item.hidden { opacity: 0 !important; + pointer-events: none; } +/* 头像样式 - 匹配图片中的样式 */ .hr-avatar-large { - width: 80px; - height: 80px; + width: 75px; + height: 75px; border-radius: 50%; - border: 4px solid rgba(255, 255, 255, 0.8); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); + border: 3px solid rgba(255, 255, 255, 1); + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); transition: all 0.4s ease; + object-fit: cover; + background: white; } +/* 激活状态的头像 - 通过scale控制大小 */ .avatar-item.active .hr-avatar-large { - border-color: white; - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); + border-width: 4px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } +/* 公司信息区域 */ .company-info { margin-bottom: 20px; + position: relative; + z-index: 10; } .company-name { - color: white; - font-size: 24px; + color: #1a1a1a; + font-size: 22px; font-weight: 600; margin: 0 0 12px 0; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + letter-spacing: 1px; } +/* HR标签 */ .hr-tag { display: inline-flex; align-items: center; - background: rgba(255, 255, 255, 0.2); - border-radius: 20px; - padding: 6px 16px; - backdrop-filter: blur(10px); + gap: 12px; } .hr-label { - background: #007AFF; + background: linear-gradient(0deg, #0077FF, #32A6FF 40%); color: white; - padding: 4px 8px; - border-radius: 12px; + padding: 4px 12px; + border-radius: 8px; font-size: 12px; font-weight: 600; - margin-right: 8px; + letter-spacing: 0.5px; + font-weight: 800; } .hr-name { - color: white; + color: #333; font-size: 16px; - font-weight: 500; + font-weight: 800; } +/* 访问信息 */ .visit-info { - margin-bottom: 30px; + margin-bottom: 20px; + position: relative; + z-index: 10; } .visit-message { - color: rgba(255, 255, 255, 0.9); - font-size: 16px; + color: #666; + font-size: 14px; margin: 0; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + letter-spacing: 0.5px; } +/* 底部指示器 - 不显示 */ .indicators { - display: flex; - justify-content: center; - gap: 8px; -} - -.indicator { - width: 8px; - height: 8px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.4); - cursor: pointer; - transition: all 0.3s ease; -} - -.indicator.active { - background: white; - transform: scale(1.2); -} - -.indicator:hover { - background: rgba(255, 255, 255, 0.7); + display: none; } /* 动画效果 */ diff --git a/src/components/HRVisitModal/index.jsx b/src/components/HRVisitModal/index.jsx index 52b37a7..8ee5c81 100644 --- a/src/components/HRVisitModal/index.jsx +++ b/src/components/HRVisitModal/index.jsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { Modal } from '@arco-design/web-react'; import { IconLeft, IconRight, IconClose } from '@arco-design/web-react/icon'; +import backgroundImg from '@/assets/images/CompanyJobsPage/background.png'; import './index.css'; const HRVisitModal = ({ visible, onClose }) => { @@ -20,28 +21,28 @@ const HRVisitModal = ({ visible, onClose }) => { name: '李女士', company: '腾讯科技有限公司', avatar: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image', - visitMessage: '访问了您的项目经验' + visitMessage: '访问了您的线下面试模拟' }, { id: 3, name: '张先生', company: '阿里巴巴集团', avatar: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp', - visitMessage: '访问了您的技能证书' + visitMessage: '访问了您的个人档案' }, { id: 4, name: '陈女士', company: '字节跳动科技有限公司', avatar: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', - visitMessage: '访问了您的求职意向' + visitMessage: '访问了您的线下面试模拟' }, { id: 5, name: '刘先生', company: '华为技术有限公司', avatar: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image', - visitMessage: '访问了您的工作经历' + visitMessage: '访问了您的项目库' } ]; @@ -63,8 +64,19 @@ const HRVisitModal = ({ visible, onClose }) => { closable={false} className="hr-visit-modal" width={500} + style={{ + top: '0%', + }} + maskStyle={{ + backdropFilter: 'blur(4px)' + }} >
+ {/* 背景图片 */} +
+ background +
+ {/* 关闭按钮 */}
@@ -85,10 +97,19 @@ const HRVisitModal = ({ visible, onClose }) => { Math.abs(index - currentIndex) > 2 ? 'hidden' : '' }`} style={{ - transform: `translateX(${(index - currentIndex) * 80}px)`, - opacity: index === currentIndex ? 1 : 0.6, - zIndex: index === currentIndex ? 10 : 5, - scale: index === currentIndex ? 1.2 : 1 + transform: `translateX(${(index - currentIndex) * 75}px) scale(${ + index === currentIndex ? 1.4 : + Math.abs(index - currentIndex) === 1 ? 1 : + Math.abs(index - currentIndex) === 2 ? 0.8 : 0.6 + })`, + opacity: Math.abs(index - currentIndex) <= 2 ? 1 : 0, + zIndex: index === currentIndex ? 20 : 10 - Math.abs(index - currentIndex), + cursor: index !== currentIndex ? 'pointer' : 'default' + }} + onClick={() => { + if (index !== currentIndex) { + setCurrentIndex(index); + } }} > {hr.name} diff --git a/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx b/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx index f612f27..0fd8147 100644 --- a/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx +++ b/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx @@ -513,7 +513,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
    {/* 教育经历 */}
  • -

    教育经历

    +

    + + 教育经历 +

      {(isEditing && editableData ? editableData.education : resumeContent.education)?.map((edu, index) => (
    • @@ -555,7 +558,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
      • {/* 项目经历 */}
    • -

      项目经历

      +

      + + 项目经历 +

        {(isEditing && editableData ? editableData.projects : resumeContent.projects)?.map((project, index) => (
      • @@ -639,7 +645,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => {
        • {/* 专业技能 */}
      • -

        专业技能

        +

        + + 专业技能 +

          {(isEditing && editableData ? editableData.skills?.core : resumeContent.skills?.core) && (
        • @@ -695,7 +704,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => { {(resumeContent.personalSummary && resumeContent.personalSummary.length > 0) || (resumeContent.personalSummary && typeof resumeContent.personalSummary === 'string') ? (
        • -

          个人总结

          +

          + + 个人总结 +

          {Array.isArray(resumeContent.personalSummary) ? (
            @@ -716,7 +728,10 @@ export default ({ visible, onClose, data, initialVersion = "2" }) => { {/* 对应课程单元 - 暂时保留静态展示，后续可根据需要动态化 */} {resumeContent.courses && (
          • -

            对应课程单元

            +

            + + 对应课程单元 +

            • 相关课程