全项目加载动效重做和简历经历区域的时间和编辑按钮同位置显示切换
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: $overlay-bg;
|
||||
z-index: 2000;
|
||||
z-index: 2300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
background: $bg-white;
|
||||
border: 1px solid $border-color;
|
||||
border: none;
|
||||
border-radius: 0.04rem;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
@@ -317,8 +317,7 @@
|
||||
|
||||
&__ai-result-card {
|
||||
padding: 0.1rem 0.12rem;
|
||||
background: $theme-color;
|
||||
border: 1px solid rgba($accent, 0.2);
|
||||
background: linear-gradient(to bottom,#F5FFFD,#ffffff);
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -189,8 +189,8 @@
|
||||
}
|
||||
|
||||
&__item-date {
|
||||
font-size: 0.11rem;
|
||||
color: $accent;
|
||||
font-size: 0.13rem;
|
||||
color: #64748B;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
@@ -328,12 +328,29 @@
|
||||
|
||||
// 条目hover时显示编辑按钮
|
||||
&__section-item:hover &__item-edit-btn {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// 条目内编辑按钮
|
||||
// hover条目时隐藏时间
|
||||
&__section-item:hover &__item-date--toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 条目内编辑按钮（默认隐藏不占位）
|
||||
&__item-edit-btn {
|
||||
margin-left: 0.08rem;
|
||||
display: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// 时间切换样式（默认显示，靠右）
|
||||
&__item-date--toggle {
|
||||
margin-left: auto;
|
||||
font-size: 0.13rem;
|
||||
color: #64748B;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
// ==================== 邀请注册送会员弹窗 ====================
|
||||
// ==================== 邀请注册送会员弹窗（重设计版） ====================
|
||||
.settings-invite-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -18,178 +18,211 @@
|
||||
.settings-invite-dialog {
|
||||
position: relative;
|
||||
width: 4.2rem;
|
||||
max-height: 85vh;
|
||||
height: 5.0rem;
|
||||
background: $bg-white;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.32rem 0.28rem;
|
||||
box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
|
||||
overflow-y: auto;
|
||||
border-radius: 0.26rem;
|
||||
box-shadow: 0 0.2rem 0.44rem rgba(0, 0, 0, 0.14);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 顶部渐变区域
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 1.04rem;
|
||||
background: linear-gradient(90deg, #12C7BE 0%, #06B6D4 100%);
|
||||
border-radius: 0.26rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 皇冠图标
|
||||
&__crown {
|
||||
font-size: 0.32rem;
|
||||
line-height: 0.39rem;
|
||||
color: $bg-white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// 关闭按钮
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 0.14rem;
|
||||
right: 0.18rem;
|
||||
font-size: 0.18rem;
|
||||
color: $text-light;
|
||||
top: 0.24rem;
|
||||
right: 0.27rem;
|
||||
font-size: 0.22rem;
|
||||
line-height: 0.27rem;
|
||||
color: #8EA0B8;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
&__body {
|
||||
flex: 1;
|
||||
padding: 0.22rem 0.28rem 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 标题
|
||||
&__title {
|
||||
font-size: 0.18rem;
|
||||
font-size: 0.21rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
color: #132034;
|
||||
text-align: center;
|
||||
margin: 0 0 0.05rem 0;
|
||||
line-height: 0.25rem;
|
||||
}
|
||||
|
||||
// 副标题
|
||||
&__subtitle {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 400;
|
||||
color: #64748B;
|
||||
text-align: center;
|
||||
margin: 0 0 0.2rem 0;
|
||||
line-height: 0.16rem;
|
||||
}
|
||||
|
||||
// 邀请链接区域
|
||||
&__link-box {
|
||||
background: $bg-main;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.14rem 0.16rem;
|
||||
margin-bottom: 0.14rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 3.64rem;
|
||||
height: 0.44rem;
|
||||
background: #F3FFFD;
|
||||
border-radius: 0.22rem;
|
||||
padding: 0 0.06rem 0 0.16rem;
|
||||
margin: 0 auto 0.2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__link-text {
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
font-size: 0.11rem;
|
||||
line-height: 0.13rem;
|
||||
color: #334155;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 复制链接按钮
|
||||
&__copy-btn {
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
width: 1.0rem;
|
||||
height: 0.32rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background: $text-dark;
|
||||
border-radius: 0.16rem;
|
||||
background: #0F172A;
|
||||
color: $bg-white;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.16rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.18rem;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.2s;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤提示
|
||||
&__steps-tip {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
text-align: center;
|
||||
margin: 0 0 0.14rem 0;
|
||||
}
|
||||
|
||||
// 步骤卡片
|
||||
&__step {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.12rem 0.16rem;
|
||||
margin-bottom: 0.1rem;
|
||||
background: #F2F4F7;
|
||||
}
|
||||
|
||||
&__step-title {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
&__step-desc {
|
||||
font-size: 0.11rem;
|
||||
color: $text-middle;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// 统计数据
|
||||
&__stats {
|
||||
display: flex;
|
||||
gap: 0.12rem;
|
||||
margin-top: 0.16rem;
|
||||
margin-bottom: 0.16rem;
|
||||
align-items: center;
|
||||
width: 3.64rem;
|
||||
height: 0.46rem;
|
||||
background: #F3FFFD;
|
||||
border-radius: 0.14rem;
|
||||
padding: 0 0.14rem;
|
||||
margin: 0 auto 0.12rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__stat-item {
|
||||
flex: 1;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.12rem;
|
||||
// 步骤数字圆圈
|
||||
&__step-circle {
|
||||
width: 0.26rem;
|
||||
height: 0.26rem;
|
||||
border-radius: 50%;
|
||||
background: $bg-white;
|
||||
border: 1px solid #BFEFE8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 700;
|
||||
color: #12C7BE;
|
||||
line-height: 0.15rem;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 步骤文字
|
||||
&__step-text {
|
||||
margin-left: 0.14rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
line-height: 0.16rem;
|
||||
}
|
||||
|
||||
// 底部统计 + 按钮
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
padding-top: 0.06rem;
|
||||
}
|
||||
|
||||
// 统计项
|
||||
&__stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
&__stat-label {
|
||||
font-size: 0.11rem;
|
||||
color: $text-middle;
|
||||
margin-bottom: 0.06rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 500;
|
||||
color: #64748B;
|
||||
line-height: 0.16rem;
|
||||
}
|
||||
|
||||
&__stat-value {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 500;
|
||||
color: #64748B;
|
||||
line-height: 0.16rem;
|
||||
}
|
||||
|
||||
// 活动规则
|
||||
&__rules {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid $border-color;
|
||||
// 成为正式会员按钮
|
||||
&__member-btn {
|
||||
margin-left: auto;
|
||||
width: 1.1rem;
|
||||
height: 0.29rem;
|
||||
background: #F3FFFD;
|
||||
border: 1px solid #BFEFE8;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.12rem 0.16rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
line-height: 0.16rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background: $bg-main;
|
||||
}
|
||||
}
|
||||
|
||||
&__rules-label {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__rules-arrow {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
color: $text-middle;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&--open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__rules-content {
|
||||
margin-top: 0.1rem;
|
||||
padding: 0.12rem 0.16rem;
|
||||
background: $bg-main;
|
||||
border-radius: 0.06rem;
|
||||
|
||||
p {
|
||||
font-size: 0.11rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.8;
|
||||
margin: 0 0 0.04rem 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
background: #e8faf8;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
flex-direction: column;
|
||||
width: 2rem;
|
||||
height: var(--app-height, 100vh);
|
||||
background: #1a1a2e;
|
||||
background: $bg-white;
|
||||
color: #fff;
|
||||
padding: 0.2rem 0.12rem;
|
||||
box-sizing: border-box;
|
||||
@@ -57,7 +57,7 @@
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.1rem 0.12rem;
|
||||
border-radius: 0.14rem;
|
||||
border-radius: 0.08rem;
|
||||
color: #9598ab;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@@ -65,12 +65,12 @@
|
||||
font-size: 0.14rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: $btn-dark;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #1F2937;
|
||||
background: $btn-dark;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -98,7 +98,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.04rem;
|
||||
border-top: 1px solid #2e3142;
|
||||
padding-top: 0.12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,6 +82,12 @@
|
||||
padding: 20px !important;
|
||||
border-radius: 8px !important;
|
||||
font-size: 14px !important;
|
||||
// 修正 transform: scale 下弹窗居中
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
margin: 0 !important;
|
||||
|
||||
&__header {
|
||||
padding: 0 0 12px 0 !important;
|
||||
|
||||
@@ -511,104 +511,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 简历上传阶段 — 左侧基础（step 3 使用） ==================== */
|
||||
.login-view__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 57%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0A9E97 0%, #12C7BE 50%, #06B6D4 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==================== 简历上传阶段 — 左侧职位卡片面板 ==================== */
|
||||
.login-view__left--resume {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.login-view__resume-logo {
|
||||
position: absolute;
|
||||
top: 0.3rem;
|
||||
left: 0.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.12rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login-view__job-cards {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-view__job-card {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
padding: 0.1rem 0.16rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.1rem;
|
||||
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.06);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.login-view__job-card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
border-radius: 0.06rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.login-view__job-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.02rem;
|
||||
}
|
||||
|
||||
.login-view__job-card-title {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
color: #132034;
|
||||
}
|
||||
|
||||
.login-view__job-card-company {
|
||||
font-size: 0.11rem;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.login-view__job-card-salary {
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
color: #E85635;
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
|
||||
.login-view__resume-slogan {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 0.4rem;
|
||||
z-index: 2;
|
||||
|
||||
h1 {
|
||||
font-size: 0.32rem;
|
||||
font-weight: 700;
|
||||
color: #132034;
|
||||
line-height: 0.48rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 简历上传阶段 — 右侧面板 ==================== */
|
||||
.login-view__form-wrap--resume {
|
||||
|
||||
@@ -354,6 +354,15 @@
|
||||
gap: 0.06rem;
|
||||
font-size: 0.12rem;
|
||||
color: #666;
|
||||
vertical-align: middle;
|
||||
|
||||
a{
|
||||
color: #666;
|
||||
vertical-align: super;
|
||||
}
|
||||
>span{
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
&__contact-icon {
|
||||
@@ -473,14 +482,7 @@
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
|
||||
// 经历条目内的编辑按钮（hover exp-item 时显示）
|
||||
&__exp-edit-btn {
|
||||
}
|
||||
|
||||
&__exp-item:hover &__exp-edit-btn {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
// 经历条目内的编辑按钮样式已在 &__exp-date 下方统一管理
|
||||
|
||||
// ---- 教育背景 ----
|
||||
&__edu-item {
|
||||
@@ -552,9 +554,33 @@
|
||||
}
|
||||
|
||||
&__exp-date {
|
||||
font-size: 0.12rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 400;
|
||||
color: $text-middle;
|
||||
|
||||
// 带切换效果的时间（hover exp-item 时隐藏）
|
||||
&--toggle {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// hover经历条目时：隐藏时间，显示按钮
|
||||
&__exp-item:hover &__exp-date--toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 默认隐藏按钮且不占位
|
||||
&__exp-edit-btn {
|
||||
display: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// hover经历条目时：显示按钮
|
||||
&__exp-item:hover &__exp-edit-btn {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// ---- 修复建议标记 ----
|
||||
|
||||
Reference in New Issue
Block a user