导师列表和导师详情
This commit is contained in:
@@ -391,6 +391,12 @@ body:not(#_) {
|
||||
.flex-warp{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex1{
|
||||
flex: 1;
|
||||
}
|
||||
.flex2{
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
//字体粗细
|
||||
.fw600{
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
gap: 0.04rem;
|
||||
padding: 0.1rem 0.12rem;
|
||||
border-radius: 0.08rem;
|
||||
color: #9598ab;
|
||||
@@ -65,13 +65,17 @@
|
||||
font-size: 0.14rem;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark;
|
||||
color: #fff;
|
||||
background: #EDF9FA;
|
||||
color: $accent;
|
||||
|
||||
svg{
|
||||
color: $btn-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $btn-dark;
|
||||
color: #fff;
|
||||
background: #EDF9FA;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,6 +83,8 @@
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
object-fit: contain;
|
||||
font-size: 0.16rem;
|
||||
|
||||
}
|
||||
|
||||
&__item-label {
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
@use './pages/job-detail.scss';
|
||||
@use './pages/profile.scss';
|
||||
@use './pages/login.scss';
|
||||
@use './pages/mentor.scss';
|
||||
@use './pages/mentor-detail.scss';
|
||||
|
||||
// 组件样式
|
||||
@use './components/hello-world.scss';
|
||||
|
||||
+247
-203
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 单个选项行
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
// ==================== 导师详情页样式 ====================
|
||||
|
||||
.mentor-detail {
|
||||
font-size: 0.14rem;
|
||||
width: 100%;
|
||||
height: var(--app-height, 100vh);
|
||||
background: $bg-main;
|
||||
overflow: hidden;
|
||||
|
||||
// 主体区域
|
||||
&__body {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin-left: 2rem;
|
||||
padding: 0.24rem 0.4rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 页面标题
|
||||
&__page-title {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.12rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 返回按钮
|
||||
&__back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.16rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__back-icon {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
}
|
||||
|
||||
// 滚动容器
|
||||
&__scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0.24rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 通用卡片
|
||||
&__card {
|
||||
background: $bg-white;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.4rem 0.32rem;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
|
||||
// ==================== 导师信息卡片 ====================
|
||||
|
||||
&__info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
&__info-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.16rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 头像
|
||||
&__avatar-wrap {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 1.04rem;
|
||||
height: 1.04rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__avatar-placeholder {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
background: $accent;
|
||||
color: $bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 导师文字信息
|
||||
&__info-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 0.24rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
font-size: 0.18rem;
|
||||
color: $text-middle;
|
||||
margin-bottom: 0.04rem;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
&__location {
|
||||
font-size: 0.14rem;
|
||||
color: $text-middle;
|
||||
margin-bottom: 0.08rem;
|
||||
|
||||
>span{
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&__services {
|
||||
font-size: 0.14rem;
|
||||
color: $text-middle;
|
||||
>span{
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// 立即咨询按钮
|
||||
&__consult-btn {
|
||||
width: 0.92rem;
|
||||
text-align: center;
|
||||
height: 0.32rem;
|
||||
line-height: 0.30rem;
|
||||
background: #fff;
|
||||
border: 0.01rem solid $accent;
|
||||
color: $accent;
|
||||
border-radius: 0.08rem;
|
||||
font-size: 0.12rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 区域标题 ====================
|
||||
|
||||
&__section-title {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
color: $accent;
|
||||
margin-bottom: 0.14rem;
|
||||
}
|
||||
|
||||
// ==================== 话题列表 ====================
|
||||
|
||||
&__talk-item {
|
||||
margin-bottom: 0.16rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__talk-title {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.06rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__talk-content {
|
||||
font-size: 0.14rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// ==================== 个人介绍 ====================
|
||||
|
||||
&__introduce {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// ==================== 加载状态 ====================
|
||||
|
||||
&__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.3rem;
|
||||
color: $text-middle;
|
||||
font-size: 0.13rem;
|
||||
}
|
||||
|
||||
&__loading-spinner {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
border: 2px solid $border-color;
|
||||
border-top-color: $accent;
|
||||
border-radius: 50%;
|
||||
animation: mentorDetailSpin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mentorDetailSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,375 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
// ==================== Mentor 导师页面样式 ====================
|
||||
|
||||
.mentor-page {
|
||||
font-size: 0.14rem;
|
||||
width: 100%;
|
||||
height: var(--app-height, 100vh);
|
||||
background: $bg-main;
|
||||
overflow: hidden;
|
||||
|
||||
// 主体区域（SideNav 固定宽 2rem，主内容左移让出空间）
|
||||
&__body {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
// 左侧主内容区
|
||||
&__main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 顶部标题 + 搜索框
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.16rem;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
padding: 0.16rem 0.24rem;
|
||||
}
|
||||
|
||||
&__title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
&__title-icon {
|
||||
color: $accent;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
margin-top: 0.02rem;
|
||||
}
|
||||
|
||||
// 搜索框
|
||||
&__search-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 2.8rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.12rem;
|
||||
height: 0.36rem;
|
||||
|
||||
&:focus-within {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__search-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
color: $text-light;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
background: transparent;
|
||||
padding: 0 0.08rem;
|
||||
line-height: 1;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__search-clear {
|
||||
font-size: 0.12rem;
|
||||
color: $text-light;
|
||||
cursor: pointer;
|
||||
padding: 0.02rem 0.04rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: $text-middle;
|
||||
background: $bg-main;
|
||||
}
|
||||
}
|
||||
|
||||
// 行业 Tab 筛选栏
|
||||
&__tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.00rem;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0.24rem;
|
||||
margin-bottom: 0.16rem;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
padding: 0.06rem;
|
||||
border-radius: 0.08rem;
|
||||
|
||||
}
|
||||
|
||||
&__tab {
|
||||
height: 0.35rem;
|
||||
text-align: center;
|
||||
padding: 0 0.16rem;
|
||||
line-height: 0.35rem;
|
||||
border-radius: 0.08rem;
|
||||
min-width: 0.8rem;
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
cursor: pointer;
|
||||
background: $bg-white;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(&--active):hover {
|
||||
color: $accent;
|
||||
border: 1px solid $accent;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $accent;
|
||||
color: $bg-white;
|
||||
border: 1px solid $accent;
|
||||
|
||||
&:hover {
|
||||
color: $bg-white;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导师列表滚动容器
|
||||
&__list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0.24rem;
|
||||
margin: 0 0.17rem 0 0.24rem;
|
||||
padding-right: 0.04rem;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 导师卡片
|
||||
&__card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $bg-white;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.18rem 0.2rem;
|
||||
margin-bottom: 0.12rem;
|
||||
gap: 0.2rem;
|
||||
transition: box-shadow 0.15s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片左侧 — 限制最大宽度让右侧话题纵向对齐
|
||||
&__card-left {
|
||||
flex: 1 1 0;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.14rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 头像
|
||||
&__avatar-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 0.56rem;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__avatar-placeholder {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: $accent;
|
||||
color: $bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 导师信息文字区
|
||||
&__card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__card-name {
|
||||
font-size: 0.15rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
&__card-meta {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
&__card-sep {
|
||||
margin: 0 0.04rem;
|
||||
color: $border-color;
|
||||
}
|
||||
|
||||
&__card-labels {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.06rem;
|
||||
}
|
||||
|
||||
&__card-label {
|
||||
font-size: 0.11rem;
|
||||
color: $accent;
|
||||
background: rgba(18, 199, 190, 0.1);
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.02rem 0.08rem;
|
||||
}
|
||||
|
||||
// 卡片右侧 — flex:1 让话题区自适应剩余空间，窄屏不会撑出滚动条
|
||||
&__card-right {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.12rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 话题列表 — 占据右侧剩余空间，自动截断
|
||||
&__card-topics {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 单条话题，跟随容器宽度自动截断，不设死宽度
|
||||
&__card-topic {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// 查看详情按钮
|
||||
&__detail-btn {
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
width: 0.92rem;
|
||||
text-align: center;
|
||||
background: $bg-white;
|
||||
border: 0.01rem solid $btn-dark;
|
||||
color: $btn-dark;
|
||||
border-radius: 0.08rem;
|
||||
font-size: 0.12rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: $btn-dark;
|
||||
color: $bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载中提示
|
||||
&__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.2rem;
|
||||
color: $text-middle;
|
||||
font-size: 0.13rem;
|
||||
}
|
||||
|
||||
&__loading-spinner {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
border: 2px solid $border-color;
|
||||
border-top-color: $accent;
|
||||
border-radius: 50%;
|
||||
animation: mentorSpin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mentorSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 没有更多
|
||||
&__no-more {
|
||||
text-align: center;
|
||||
font-size: 0.12rem;
|
||||
color: $text-light;
|
||||
padding: 0.16rem;
|
||||
}
|
||||
|
||||
// 空列表
|
||||
&__empty {
|
||||
text-align: center;
|
||||
font-size: 0.13rem;
|
||||
color: $text-light;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
// 右侧广告区域（固定 4rem）
|
||||
&__aside {
|
||||
width: 3rem;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background: $bg-white;
|
||||
border-left: 1px solid $border-color;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@@ -18,13 +18,13 @@ $bg-middle: #E6E6E6;
|
||||
$bg-white: #FFFFFF;
|
||||
|
||||
// 深色文字（标题、正文）
|
||||
$text-dark: #000000;
|
||||
$text-dark: #1A1A1A;
|
||||
|
||||
// 浅色文字（副标题、占位符、辅助信息）
|
||||
$text-light: #BFBFBF;
|
||||
|
||||
// 中间色文字（使用优先级高于浅色文字，稍微要深色一点的副标题、占位符、辅助信息）
|
||||
$text-middle: #777777;
|
||||
$text-middle: #6A7282;
|
||||
|
||||
// 强调色 / 品牌色
|
||||
//$accent: #4FC2C9;
|
||||
|
||||
Reference in New Issue
Block a user