offerpai/offerpai_web
7
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

导师列表和导师详情

Browse Source
This commit is contained in:
xuxin
2026-07-03 11:55:44 +08:00
parent 51be3e5585
commit a1a27073e4
22 changed files with 2007 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/pages/jobs.scss
+247 -203
View File
@@ -12,9 +12,9 @@
box-sizing: border-box;
overflow: hidden;
background: $bg-main;
font-size: 0.14rem;
display: flex;
flex-direction: column;
font-size: 0.14rem;
}
// 页面标题
@@ -203,26 +203,33 @@
// 职位列表
&__list {
display: flex;
flex-direction: column;
gap: 0.12rem;
gap: 0;
flex: 1;
overflow-y: auto;
padding-bottom: 0.2rem;
// 列表中每张卡片间距用 margin-bottom 替代 gap
& > .jobs-page__job-card {
margin-bottom: 0.12rem;
&:last-child {
margin-bottom: 0;
}
}
}
&__job-card {
background: $bg-white;
border-radius: 0.12rem;
padding: 0.16rem 0.14rem;
padding: 0.2rem 0.24rem;
transition: all 0.25s ease;
border: 0.02rem solid transparent;
cursor: pointer;
position: relative;
&:hover {
box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.06);
background: #fbfbfb;
//transform: translateY(-0.01rem);
}
&--selected {
@@ -238,65 +245,48 @@
gap: 0.2rem;
}
&__job-left {
// ========== 左栏：职位信息 ==========
&__col-left {
flex: 1;
min-width: 0;
}
&__job-icon {
width: 0.54rem;
height: 0.54rem;
border-radius: 0.1rem;
background: $theme-color;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid #E8E8E8;
}
&__company-svg {
width: 0.24rem;
height: 0.24rem;
color: $accent;
}
&__job-info {
flex: 1;
min-width: 0;
flex-direction: column; // 纵排，配合 meta-bottom 的 margin-top: auto 把它推到底部
}
&__job-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.08rem;
}
&__job-name {
font-size: 0.15rem;
font-weight: 600;
color: $text-dark;
line-height: 1.4;
font-size: 0.18rem;
font-weight: 520;
color: #000000;
line-height: 0.24rem;
}
&__job-more {
color: $text-light;
cursor: pointer;
// 收藏红心
&__favorite-btn {
background: none;
border: none;
padding: 0.04rem;
border-radius: 0.04rem;
transition: all 0.2s;
cursor: pointer;
padding: 0.02rem;
display: flex;
align-items: center;
color: #8C8C8C;
transition: color 0.2s;
&:hover {
color: $text-dark;
background: $bg-main;
color: $danger;
}
&--liked {
color: $danger;
}
}
&__more-svg {
&__favorite-svg {
width: 0.16rem;
height: 0.16rem;
}
@@ -323,168 +313,218 @@
height: 0.14rem;
}
&__job-meta {
font-size: 0.14rem;
color: $text-middle;
margin-top: 0.04rem;
line-height: 1.4;
}
&__job-dot {
margin: 0 0.04rem;
color: #D9D9D9;
}
&__job-tip {
font-size: 0.11rem;
color: $accent-hover;
background: $theme-color;
border-radius: 0.04rem;
padding: 0.05rem 0.1rem;
margin-top: 0.1rem;
display: inline-flex;
align-items: center;
gap: 0.04rem;
border: 1px solid rgba(79, 194, 201, 0.2);
}
&__tip-svg {
width: 0.12rem;
height: 0.12rem;
flex-shrink: 0;
}
// 职位标签
&__job-tags {
display: flex;
gap: 0.08rem;
margin-top: 0.1rem;
flex-wrap: wrap;
margin-top: 0.08rem;
}
&__job-tag {
font-size: 0.11rem;
color: #888;
background: $bg-main;
border-radius: 0.04rem;
padding: 0.03rem 0.1rem;
transition: all 0.2s;
&:hover {
color: $accent-hover;
background: $theme-color;
}
}
// 底部操作栏
&__job-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.14rem;
position: relative;
}
&__job-action-left {
display: flex;
align-items: center;
gap: 0.08rem;
}
&__action-icon-btn {
width: 0.28rem;
height: 0.28rem;
border-radius: 50%;
border: none;
background: $bg-main;
color: $text-light;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
&:hover {
background: $theme-color;
color: $accent;
}
&--liked {
background: #FFF0ED;
color: $danger;
&:hover {
background: #FFE4DE;
}
}
padding: 0.04rem 0.06rem;
background: #F4F4F4;
border-radius: 0.04rem;
font-size: 0.12rem;
font-weight: 330;
color: #929292;
line-height: 0.16rem;
}
&__action-svg {
width: 0.14rem;
height: 0.14rem;
// 底部：地区 + 学历 + 招聘分类，margin-top: auto 把它推到左栏底部
&__job-meta-bottom {
display: flex;
align-items: center;
gap: 0.12rem;
margin-top: auto;
padding-top: 0.08rem;
flex-wrap: wrap;
}
&__meta-location {
display: flex;
align-items: center;
gap: 0.02rem;
font-size: 0.14rem;
font-weight: 330;
color: #8C8C8C;
line-height: 0.19rem;
}
&__location-icon {
width: 0.18rem;
height: 0.18rem;
color: #8C8C8C;
flex-shrink: 0;
}
&__meta-edu {
font-size: 0.14rem;
font-weight: 330;
color: #8C8C8C;
line-height: 0.19rem;
}
&__meta-recruit {
display: flex;
align-items: center;
justify-content: center;
padding: 0.02rem 0.06rem;
background: #EDF9FA;
border-radius: 0.04rem;
font-size: 0.12rem;
font-weight: 330;
color: $accent;
line-height: 0.16rem;
}
// ========== 中栏：公司信息（居中） ==========
&__col-center {
flex: 1; // 参与 flex 空间分配，获得真实宽度约束
min-width: 0; // 防止内容撑破 flex 容器
}
// 公司信息容器，需要 min-width 才能让内部标签换行
&__company-info {
min-width: 0;
}
&__company-row {
display: flex;
align-items: center;
gap: 0.06rem;
margin-bottom: 0.06rem;
flex-wrap: wrap;
}
&__company-logo {
width: 0.24rem;
height: 0.24rem;
border-radius: 0.04rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.24rem;
color: #8C8C8C;
overflow: hidden;
}
&__company-name {
font-size: 0.18rem;
font-weight: 330;
color: #000000;
line-height: 0.24rem;
}
&__company-tags {
display: flex;
align-items: center;
gap: 0.08rem;
flex-wrap: wrap;
min-width: 0; // 允许内容收缩触发换行
margin-top: 0.06rem;
}
&__company-tag {
display: flex;
align-items: center;
justify-content: center;
padding: 0.04rem 0.06rem;
background: #F4F4F4;
border-radius: 0.04rem;
font-size: 0.12rem;
font-weight: 330;
color: #929292;
line-height: 0.16rem;
}
// ========== 右栏：操作按钮 ==========
&__col-right {
display: flex;
flex-direction: column;
text-align: right;
}
&__job-action-right {
display: flex;
align-items: center;
gap: 0.12rem;
flex-wrap: wrap;
gap: 0.1rem;
}
&__job-helper {
font-size: 0.12rem;
color: $text-light;
cursor: pointer;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 0.04rem;
background: $bg-main;
border: 1px solid #E8E8E8;
padding: 0.04rem 0.08rem;
border-radius: 0.14rem;
justify-content: center;
padding: 0.08rem 0.16rem;
border: 1.23px solid $accent;
border-radius: 0.08rem;
background: none;
font-size: 0.14rem;
font-weight: 450;
color: $accent;
cursor: pointer;
transition: all 0.2s;
line-height: 0.19rem;
white-space: nowrap;
&:hover {
color: $accent;
background: $theme-color;
}
}
&__helper-svg {
width: 0.14rem;
height: 0.14rem;
}
&__job-apply-btn {
background: $btn-dark;
border: 0.02rem solid $btn-dark;
border-radius: 0.2rem;
padding: 0.04rem 0.2rem;
color: $bg-white;
font-size: 0.12rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.08rem 0.16rem;
background: $accent;
border: none;
border-radius: 0.08rem;
font-size: 0.14rem;
font-weight: 450;
color: #FFFFFF;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
line-height: 0.19rem;
white-space: nowrap;
&:hover {
background: $btn-dark-hover;
background: $accent-hover;
}
&--active {
background: $accent;
border-color: $accent;
color: $bg-white;
color: #FFFFFF;
}
}
&:hover {
background: $accent-hover;
border-color: $accent-hover;
}
// 不再显示
&__hide-btn {
display: block;
margin-top: auto;
font-size: 0.14rem;
font-weight: 330;
color: #8C8C8C;
cursor: pointer;
transition: color 0.2s;
line-height: 0.19rem;
white-space: nowrap;
&:hover {
color: $text-dark;
}
}
// 弹出菜单
&__job-popup {
position: absolute;
right: 0.26rem;
top: -0.64rem;
right: 1.4rem;
top: 0.5rem;
background: $bg-white;
border: 1px solid #E8E8E8;
border-radius: 0.1rem;
@@ -507,38 +547,29 @@
}
}
// 匹配度卡片
// ========== 最右侧：匹配度 ==========
&__job-match {
width: 1.1rem;
width: 1.01rem;
text-align: center;
flex-shrink: 0;
border-radius: 0.12rem;
border-radius: 0.08rem;
padding: 0.14rem 0.1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.02rem;
transition: all 0.25s ease;
&--high {
background: linear-gradient(135deg, $theme-color 0%, rgba(79, 194, 201, 0.15) 100%);
border: 1px solid rgba(79, 194, 201, 0.25);
background: #FBFDF7;
}
&--low {
background: $bg-main;
border: 1px solid #E8E8E8;
background: #FBFDF7;
}
}
&__match-ring {
position: relative;
width: 0.64rem;
height: 0.64rem;
display: flex;
align-items: center;
justify-content: center;
width: 0.62rem;
height: 0.62rem;
margin: 0 auto;
}
&__ring-svg {
@@ -551,23 +582,39 @@
&__match-score {
font-size: 0.18rem;
font-weight: 700;
color: $text-dark;
line-height: 1;
position: relative;
font-weight: 520;
line-height: 0.62rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 1;
}
&__match-label {
font-size: 0.1rem;
color: $text-light;
&__match-level {
font-size: 0.13rem;
font-weight: 520;
line-height: 0.19rem;
margin-top: 0.04rem;
}
&__match-level {
font-size: 0.1rem;
color: $text-light;
margin-top: 0.01rem;
// 高匹配度颜色
&__job-match--high &__match-score {
color: #9FD051;
}
&__job-match--high &__match-level {
color: #9FD051;
}
// 低匹配度颜色
&__job-match--low &__match-score {
color: #9FD051;
}
&__job-match--low &__match-level {
color: #9FD051;
}
// 未登录锁定态
@@ -580,7 +627,8 @@
width: 0.32rem;
height: 0.32rem;
color: $text-light;
margin-bottom: 0.06rem;
display: block;
margin: 0 auto 0.06rem;
}
&__match-lock-text {
@@ -658,16 +706,6 @@
to { transform: rotate(360deg); }
}
// 高匹配度特殊样式
&__job-match--high &__match-score {
color: $accent-hover;
}
&__job-match--high &__match-level {
color: $accent;
font-weight: 500;
}
// ==================== AI助手投递提醒弹窗 ====================
// 遮罩层
@@ -766,10 +804,16 @@
// 选项列表容器
&__options {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-bottom: 0.16rem;
// 选项间距用 margin-bottom
.dislike-dialog__option {
margin-bottom: 0.1rem;
&:last-child {
margin-bottom: 0;
}
}
}
// 单个选项行