Files
offerpai_web/src/assets/styles/components/job-goal-dialog.scss
T

126 lines
2.2 KiB
SCSS

@use '../variables' as *;
// ==================== 求职偏好弹窗样式(重新设计) ====================
// 遮罩层 — 右上角定位
.job-goal-dialog__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding-top: 1.20rem;
padding-right: 0.30rem;
}
.job-goal-dialog {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.24rem 0.32rem;
gap: 0.24rem;
width: 4.80rem;
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
border: 1px solid #F0F0F0;
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
border-radius: 0.12rem;
font-size: 0.14rem;
// 头部
&__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
&__title {
font-size: 0.18rem;
font-weight: 620;
line-height: 0.24rem;
color: #1A1A1A;
}
&__close-btn {
width: 0.24rem;
height: 0.24rem;
cursor: pointer;
&:hover {
opacity: 0.6;
}
}
// 表单区块
&__section {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.08rem;
}
&__label {
font-size: 0.14rem;
font-weight: 330;
line-height: 0.19rem;
color: $text-middle;
}
// 招聘类型按钮组
&__type-group {
display: flex;
gap: 0.10rem;
}
&__type-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.08rem 0.16rem;
width: 0.96rem;
height: 0.35rem;
background: #F3F4F6;
border: none;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 330;
color: #1A1A1A;
cursor: pointer;
transition: all 0.2s;
&:hover {
opacity: 0.8;
}
&--active {
background: $accent;
color: #FFFFFF;
}
}
// 保存按钮
&__save-btn {
width: 100%;
padding: 0.12rem 0.16rem;
background: $accent;
border: none;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
line-height: 0.19rem;
color: #FFFFFF;
cursor: pointer;
transition: opacity 0.2s;
&:hover {
opacity: 0.85;
}
}
}