导师相关接口换offer派接口，职位列表和职位详情，Nova聊天侧边栏UI重写
This commit is contained in:
@@ -3,10 +3,67 @@ html{
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
// 全局滚动条美化（必须在 body 包裹外，才能作用到 body/html 自身的滚动条）
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #D4D4D4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
html, body {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #D4D4D4 transparent;
|
||||
}
|
||||
|
||||
// body 滚动条在缩放模式下会被 transform scale 放大变丑，强制隐藏
|
||||
body {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
// 用 body:not(#_) 包裹，提升选择器权重到 id 级别，确保工具类优先级最高
|
||||
// :not(#_) 永远为 true，不影响匹配，只提升权重
|
||||
body:not(#_) {
|
||||
|
||||
// 统一细滚动条工具类（4px 宽、圆角、无按钮）
|
||||
.scrollbar-thin {
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #D4D4D4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #D4D4D4 transparent;
|
||||
}
|
||||
|
||||
//组件定制样式
|
||||
.box-shadow-head{
|
||||
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px -3px 6px -4px rgba(0, 0, 0, 0.12);
|
||||
|
||||
@@ -1,84 +1,119 @@
|
||||
// 颜色变量已移至全局 variables.scss
|
||||
@use '../variables' as *;
|
||||
|
||||
.ai-chat {
|
||||
width: var(--chat-width, 4.0rem);
|
||||
max-width: 4.0rem;
|
||||
min-width: 1.5rem;
|
||||
font-size: 0.14rem;
|
||||
width: var(--chat-width, 3.6rem);
|
||||
height: var(--app-height, 100vh);
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: $bg-white;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-left: 1px solid #e5e7eb;
|
||||
|
||||
&__banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #0F172B;
|
||||
color: #fff;
|
||||
padding: 0.12rem 0.14rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-radius: 0.2rem;
|
||||
margin: 0.15rem;
|
||||
height: 0.41rem;
|
||||
}
|
||||
|
||||
&__banner-arrow {
|
||||
font-size: 0.16rem;
|
||||
padding-bottom: 0.05rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
// ==================== 顶部头部区域 ====================
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
justify-content: space-between;
|
||||
padding: 0.16rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
height: 0.80rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
width: 0.44rem;
|
||||
height: 0.44rem;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.2rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
font-size: 0.15rem;
|
||||
font-weight: 520;
|
||||
line-height: 0.22rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 0.12rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.02rem;
|
||||
font-weight: 330;
|
||||
line-height: 0.18rem;
|
||||
color: #99A1AF;
|
||||
}
|
||||
|
||||
// 在线状态标签
|
||||
&__online-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.04rem 0.08rem;
|
||||
gap: 0.04rem;
|
||||
background: #52CAD1;
|
||||
border-radius: 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 330;
|
||||
line-height: 0.16rem;
|
||||
color: $bg-white;
|
||||
}
|
||||
|
||||
&__online-dot {
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
background: $bg-white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// ==================== 聊天消息区域 ====================
|
||||
&__messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.16rem;
|
||||
padding: 0 0.16rem;
|
||||
padding-bottom: 0.16rem;
|
||||
}
|
||||
|
||||
// 欢迎气泡
|
||||
&__welcome-bubble {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.16rem;
|
||||
gap: 0.08rem;
|
||||
background: #F4FBFB;
|
||||
border: 1px solid #AEE6EA;
|
||||
border-radius: 0.12rem;
|
||||
margin-bottom: 0.17rem;
|
||||
}
|
||||
|
||||
&__welcome-title {
|
||||
font-size: 0.14rem;
|
||||
font-weight: 520;
|
||||
line-height: 0.16rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__welcome-text {
|
||||
font-size: 0.12rem;
|
||||
font-weight: 330;
|
||||
line-height: 0.18rem;
|
||||
color: #99A1AF;
|
||||
}
|
||||
|
||||
// ==================== 消息气泡 ====================
|
||||
&__msg {
|
||||
margin-bottom: 0.12rem;
|
||||
margin-bottom: 0.17rem;
|
||||
display: flex;
|
||||
|
||||
&--ai {
|
||||
@@ -91,13 +126,14 @@
|
||||
}
|
||||
|
||||
&__msg-bubble {
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.12rem 0.14rem;
|
||||
font-size: 0.13rem;
|
||||
line-height: 1.6;
|
||||
max-width: 85%;
|
||||
max-width: 2.8rem;
|
||||
padding: 0.08rem 0.12rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 330;
|
||||
line-height: 0.24rem;
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
|
||||
|
||||
// ===== Markdown 渲染样式 =====
|
||||
// Markdown 渲染样式
|
||||
p {
|
||||
margin: 0 0 0.08rem;
|
||||
&:last-child { margin-bottom: 0; }
|
||||
@@ -174,123 +210,183 @@
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #fafbfc;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__msg--ai &__msg-bubble {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
// 用户消息气泡 — 品牌色背景，右上圆角小
|
||||
&__msg--user &__msg-bubble {
|
||||
background: #fff;
|
||||
color: #1a1a2e;
|
||||
background: #52CAD1;
|
||||
color: $bg-white;
|
||||
border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
|
||||
}
|
||||
|
||||
&__msg-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.14rem;
|
||||
margin-bottom: 0.06rem;
|
||||
color: #1a1a2e;
|
||||
// AI 消息气泡 — 白色背景绿色边框，左上圆角小
|
||||
&__msg--ai &__msg-bubble {
|
||||
background: $bg-white;
|
||||
color: $text-dark;
|
||||
border: 1px solid #AEE6EA;
|
||||
box-shadow: 0px 2px 4px rgba(82, 202, 209, 0.1);
|
||||
border-radius: 0.04rem 0.12rem 0.12rem 0.12rem;
|
||||
}
|
||||
|
||||
&__msg-text {
|
||||
color: #6b7280;
|
||||
font-size: 0.12rem;
|
||||
// ==================== 三点等待动效 ====================
|
||||
&__typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.14rem 0.12rem;
|
||||
gap: 0.06rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid #AEE6EA;
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 0.04rem 0.12rem 0.12rem 0.12rem;
|
||||
}
|
||||
|
||||
&__quick-questions {
|
||||
&__typing-dot {
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
border-radius: 50%;
|
||||
background: #AEE6EA;
|
||||
animation: typingBounce 1.4s infinite ease-in-out both;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
background: rgba(174, 230, 234, 0.6);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
background: rgba(174, 230, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typingBounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.3);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 话题推荐模块 ====================
|
||||
&__topics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.08rem;
|
||||
margin-top: 0.12rem;
|
||||
align-items: flex-start;
|
||||
padding: 0.16rem 0.16rem 0.16rem 0.16rem;
|
||||
gap: 0.12rem;
|
||||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
|
||||
border: 1px solid #AEE6EA;
|
||||
border-radius: 0.12rem;
|
||||
margin: 0 0.16rem;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
&__quick-item {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
&__topics-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
}
|
||||
|
||||
&__topics-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
&__topics-title {
|
||||
font-size: 0.14rem;
|
||||
font-weight: 520;
|
||||
line-height: 0.19rem;
|
||||
color: #52CAD1;
|
||||
}
|
||||
|
||||
&__topic-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.08rem 0.12rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.1rem 0.14rem;
|
||||
color: $text-middle;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 330;
|
||||
line-height: 0.16rem;
|
||||
color: $text-middle;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
max-width: 80%;
|
||||
|
||||
&:hover {
|
||||
background: #f9fafb;
|
||||
color: #374151;
|
||||
background: $accent;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
/* AI 提问靠左 */
|
||||
&--ai {
|
||||
align-self: flex-start;
|
||||
}
|
||||
// 第一个按钮用品牌色
|
||||
&--primary {
|
||||
background: #52CAD1;
|
||||
border-color: #52CAD1;
|
||||
color: $bg-white;
|
||||
|
||||
/* 用户提问靠右 */
|
||||
&--user {
|
||||
align-self: flex-end;
|
||||
background: #f0f3f6;
|
||||
border-color: #e0e3e6;
|
||||
&:hover {
|
||||
background: #47b8bf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 底部输入框 ====================
|
||||
&__input-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.08rem 0.12rem;
|
||||
gap: 0.08rem;
|
||||
padding: 0.12rem 0.16rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
margin: 0 0.16rem;
|
||||
margin-bottom: 0.16rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid #AEE6EA;
|
||||
border-radius: 0.08rem;
|
||||
backdrop-filter: blur(12px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex: 1;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.06rem;
|
||||
padding: 0.1rem 0.12rem;
|
||||
color: #1a1a2e;
|
||||
font-size: 0.12rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.15rem;
|
||||
color: $text-dark;
|
||||
|
||||
&::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #9ca3af;
|
||||
color: #99A1AF;
|
||||
}
|
||||
}
|
||||
|
||||
&__send-btn {
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
border-radius: 50%;
|
||||
background: #1a1a2e;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 0.16rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
background: #52CAD1;
|
||||
border-radius: 0.08rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #2e3142;
|
||||
background: #47b8bf;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
.job-page-header {
|
||||
margin-bottom: 0;
|
||||
|
||||
|
||||
&__title {
|
||||
font-size: 0.24rem;
|
||||
font-size: 0.18rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0 !important;
|
||||
@@ -15,8 +15,6 @@
|
||||
&__subtitle {
|
||||
font-size: 0.13rem;
|
||||
color: $text-light;
|
||||
margin: 0.02rem 0 0 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@@ -24,7 +22,6 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
margin: 0.1rem 0 0.16rem 0;
|
||||
background: $bg-white;
|
||||
border-radius: 0.22rem;
|
||||
padding: 0.04rem;
|
||||
@@ -51,13 +48,16 @@
|
||||
|
||||
&__tab {
|
||||
font-size: 0.13rem;
|
||||
color: $text-light;
|
||||
color: $text-middle;
|
||||
cursor: pointer;
|
||||
padding: 0.06rem 0.16rem;
|
||||
border-radius: 0.18rem;
|
||||
padding: 0.06rem 0.20rem;
|
||||
border-radius: 0.08rem;
|
||||
transition: all 0.25s ease;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.06rem;
|
||||
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
@@ -76,4 +76,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 计数圆形徽章 */
|
||||
&__tab-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0.20rem;
|
||||
height: 0.20rem;
|
||||
padding: 0 0.05rem;
|
||||
border-radius: 50%;
|
||||
background: #F3F4F6;
|
||||
font-size: 0.11rem;
|
||||
font-weight: 500;
|
||||
color: $text-middle;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,15 +224,15 @@
|
||||
&__portfolio-link {
|
||||
font-size: 0.13rem;
|
||||
line-height: 1.6;
|
||||
color: $accent;
|
||||
color: $text-middle;
|
||||
word-break: break-all;
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&:hover {
|
||||
color: $accent-hover;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,9 +4,8 @@
|
||||
.job-detail {
|
||||
&__content {
|
||||
margin-left: 2rem;
|
||||
margin-right: var(--chat-width, 4.0rem);
|
||||
margin-right: var(--chat-width, 3.6rem);
|
||||
flex: 1;
|
||||
padding: 0.12rem 0.12rem 0.12rem 0.12rem;
|
||||
height: var(--app-height, 100vh);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
@@ -14,155 +13,168 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.14rem;
|
||||
|
||||
// 手动包裹的两层 div，需要撑满剩余高度并允许内部滚动
|
||||
> .bg-white {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
> .bg-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 页面标题 ----
|
||||
&__header {
|
||||
margin-bottom: 0;
|
||||
// ---- 主内容卡片 ----
|
||||
&__main-card {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin: 0.16rem 0.24rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid #F0F0F0;
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 0.08rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__page-title {
|
||||
font-size: 0.24rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
line-height: 1.1;
|
||||
// ---- 返回按钮 ----
|
||||
&__back-row {
|
||||
padding: 0.24rem 0.32rem 0;
|
||||
}
|
||||
|
||||
&__page-subtitle {
|
||||
font-size: 0.13rem;
|
||||
color: $text-light;
|
||||
margin: 0.02rem 0 0 0;
|
||||
}
|
||||
|
||||
// ---- Tab 切换 ----
|
||||
&__tabs {
|
||||
display: inline-flex;
|
||||
&__back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
margin: 0.1rem 0 0.16rem 0;
|
||||
background: $bg-white;
|
||||
border-radius: 0.22rem;
|
||||
padding: 0.04rem;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
font-size: 0.13rem;
|
||||
color: $text-light;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.06rem 0.22rem;
|
||||
border-radius: 0.18rem;
|
||||
transition: all 0.25s ease;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
color: $text-middle;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__back-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
}
|
||||
|
||||
// ---- 内容区域（可滚动） ----
|
||||
&__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.24rem 0.32rem 0.4rem;
|
||||
}
|
||||
|
||||
// ---- 岗位头部信息区域 ----
|
||||
&__header-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.24rem;
|
||||
}
|
||||
|
||||
// ---- 左侧基本信息 ----
|
||||
&__basic-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.12rem;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
&__job-title {
|
||||
font-size: 0.24rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.32rem;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__fav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
flex-shrink: 0;
|
||||
color: #8C8C8C;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $accent;
|
||||
color: $bg-white;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 0.02rem 0.08rem rgba(79, 194, 201, 0.3);
|
||||
color: $danger;
|
||||
|
||||
&:hover {
|
||||
background: $accent-hover;
|
||||
color: $bg-white;
|
||||
.job-detail__fav-icon path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 顶部操作栏 ----
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.14rem;
|
||||
&__fav-icon {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $border-color;
|
||||
background: $bg-white;
|
||||
color: $text-dark;
|
||||
cursor: pointer;
|
||||
&__meta-row {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.16rem;
|
||||
color: $text-middle;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
&__meta-dot {
|
||||
margin: 0 0.06rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
// ---- 操作按钮 ----
|
||||
&__action-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.16rem;
|
||||
}
|
||||
|
||||
&__nova-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.08rem 0.16rem;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 0.08rem;
|
||||
background: $bg-white;
|
||||
color: $accent;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.19rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
border-color: $accent;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
}
|
||||
|
||||
&__toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
&__tool-btn {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $border-color;
|
||||
background: $bg-white;
|
||||
color: $text-light;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
border-color: $accent;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__tool-icon {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
}
|
||||
|
||||
&__apply-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.08rem 0.16rem;
|
||||
background: $accent;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 0.08rem;
|
||||
color: $bg-white;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.07rem 0.22rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.19rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
@@ -171,225 +183,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 内容区域 ----
|
||||
&__body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.14rem;
|
||||
padding-bottom: 0.4rem;
|
||||
padding-right: 0.05rem;
|
||||
}
|
||||
|
||||
// ---- 导航 Tab ----
|
||||
&__nav-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
&__nav-tab {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
color: $text-light;
|
||||
cursor: pointer;
|
||||
padding-bottom: 0.06rem;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: $text-dark;
|
||||
border-bottom-color: $text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-tab-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.16rem;
|
||||
padding-right: 0.05rem;
|
||||
}
|
||||
|
||||
&__link-btn {
|
||||
font-size: 0.12rem;
|
||||
color: $text-light;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 卡片 ----
|
||||
&__card {
|
||||
background: $bg-white;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.22rem 0.24rem;
|
||||
}
|
||||
|
||||
&__card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
&__card-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// ---- 公司 & 职位头部 ----
|
||||
&__company-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
&__company-icon {
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
// ---- 右侧匹配度卡片 ----
|
||||
&__match-card {
|
||||
flex-shrink: 0;
|
||||
width: 2.06rem;
|
||||
background: #FBFDF7;
|
||||
border: 1px solid #9FD051;
|
||||
border-radius: 0.08rem;
|
||||
background: $theme-color;
|
||||
padding: 0.16rem 0.24rem;
|
||||
}
|
||||
|
||||
&__match-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__company-svg {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&__company-name {
|
||||
font-size: 0.15rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__job-title {
|
||||
font-size: 0.2rem;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.1rem 0;
|
||||
}
|
||||
|
||||
&__job-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.05rem;
|
||||
font-size: 0.12rem;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&__meta-icon {
|
||||
width: 0.14rem;
|
||||
height: 0.14rem;
|
||||
color: $text-light;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// ---- 匹配度 ----
|
||||
&__match-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__match-ring {
|
||||
position: relative;
|
||||
width: 0.72rem;
|
||||
height: 0.72rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__ring-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: baseline;
|
||||
gap: 0.08rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
&__match-score {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 700;
|
||||
color: $accent-hover;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 0.3rem;
|
||||
font-weight: 630;
|
||||
line-height: 0.4rem;
|
||||
color: #9FD051;
|
||||
}
|
||||
|
||||
&__match-label {
|
||||
font-size: 0.1rem;
|
||||
color: $text-light;
|
||||
margin-top: 0.04rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 520;
|
||||
line-height: 0.17rem;
|
||||
color: #9FD051;
|
||||
}
|
||||
|
||||
&__match-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.12rem;
|
||||
margin-top: 0.12rem;
|
||||
}
|
||||
|
||||
&__match-item {
|
||||
&__match-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.03rem;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
&__match-mini-ring {
|
||||
position: relative;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
&__match-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__mini-ring-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__match-row-label {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.16rem;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
&__mini-score {
|
||||
font-size: 0.1rem;
|
||||
font-weight: 600;
|
||||
&__match-row-score {
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.16rem;
|
||||
color: $text-dark;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__match-item-label {
|
||||
font-size: 0.09rem;
|
||||
color: $text-light;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ---- 优化简历提示条 ----
|
||||
@@ -397,93 +243,70 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(90deg, #94EF9E , #53D9C8 );
|
||||
color: $bg-white;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.14rem 0.2rem;
|
||||
font-size: 0.13rem;
|
||||
background: linear-gradient(270deg, rgba(159, 208, 81, 0.1) 0%, rgba(82, 202, 209, 0.1) 62.02%);
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.12rem 0.24rem;
|
||||
margin-bottom: 0.32rem;
|
||||
}
|
||||
|
||||
&__optimize-text {
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.21rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__optimize-btn {
|
||||
background: $bg-white;
|
||||
color: $text-dark;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.08rem 0.16rem;
|
||||
background: #52CAD1;
|
||||
border: none;
|
||||
border-radius: 0.06rem;
|
||||
padding: 0.07rem 0.18rem;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.08rem;
|
||||
color: $bg-white;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.19rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
color: $accent-hover;
|
||||
background: $btn-dark-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 描述文本 ----
|
||||
&__desc-text {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0 0 0.12rem 0;
|
||||
// ---- 内容区块 ----
|
||||
&__section {
|
||||
margin-bottom: 0.32rem;
|
||||
}
|
||||
|
||||
// ---- 标签 ----
|
||||
&__tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
background: $bg-main;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.04rem;
|
||||
padding: 0.04rem 0.14rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
color: $accent;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 区块标题 ----
|
||||
&__section-title {
|
||||
font-size: 0.17rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.24rem;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.14rem 0;
|
||||
margin: 0 0 0.16rem 0;
|
||||
}
|
||||
|
||||
&__section-header {
|
||||
&__section-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.14rem;
|
||||
|
||||
.job-detail__section-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
flex-direction: column;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
&__skill-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
font-size: 0.11rem;
|
||||
color: $text-light;
|
||||
&__section-item {
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
&__hint-icon {
|
||||
width: 0.12rem;
|
||||
height: 0.12rem;
|
||||
flex-shrink: 0;
|
||||
&__bonus-item {
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-dark;
|
||||
margin-top: 0.12rem;
|
||||
}
|
||||
|
||||
// ---- 技能标签 ----
|
||||
@@ -491,161 +314,81 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.08rem;
|
||||
margin-bottom: 0.16rem;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
&__skill-tag {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
justify-content: center;
|
||||
padding: 0.04rem 0.06rem;
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
background: $bg-main;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.05rem 0.14rem;
|
||||
transition: all 0.2s;
|
||||
line-height: 0.18rem;
|
||||
color: $text-middle;
|
||||
background: #F3F4F6;
|
||||
border-radius: 0.04rem;
|
||||
|
||||
&--matched {
|
||||
background: $theme-color;
|
||||
border-color: $accent;
|
||||
color: $accent-hover;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&__skill-close {
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// ---- 列表 ----
|
||||
&__list {
|
||||
font-size: 0.13rem;
|
||||
color: $text-dark;
|
||||
line-height: 2;
|
||||
margin: 0;
|
||||
padding-left: 0.2rem;
|
||||
|
||||
li {
|
||||
padding-left: 0.04rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 公司信息 ----
|
||||
&__company-info {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
&__company-info-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__company-header {
|
||||
// ---- 公司概况 ----
|
||||
&__company-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
gap: 0.12rem;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
|
||||
&__company-logo {
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
border-radius: 50%;
|
||||
background: $bg-main;
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 0.08rem;
|
||||
background: #EDF9FA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__company-info-name {
|
||||
font-size: 0.16rem;
|
||||
&__company-logo-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0.08rem;
|
||||
}
|
||||
|
||||
&__company-svg {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
color: #52CAD1;
|
||||
}
|
||||
|
||||
&__company-name-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.06rem;
|
||||
}
|
||||
|
||||
&__company-name {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.24rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__company-sub {
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
&__company-desc {
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__company-info-right {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.08rem;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
&__company-meta-item {
|
||||
font-size: 0.12rem;
|
||||
color: $text-dark;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&__meta-label {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&__company-link {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $accent-hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 融资 ----
|
||||
&__funding-label {
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
// ---- 最新动态 ----
|
||||
&__news-list {
|
||||
display: flex;
|
||||
gap: 0.14rem;
|
||||
}
|
||||
|
||||
&__news-item {
|
||||
flex: 1;
|
||||
background: $bg-main;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.14rem 0.16rem;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__news-title {
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin: 0 0 0.06rem 0;
|
||||
}
|
||||
|
||||
&__news-desc {
|
||||
font-size: 0.11rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.24rem;
|
||||
color: $text-middle;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,11 +3,13 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
.jobs-page {
|
||||
display: flex;
|
||||
|
||||
&__content {
|
||||
margin-left: 2rem;
|
||||
margin-right: var(--chat-width, 4.0rem);
|
||||
margin-right: var(--chat-width, 3.6rem);
|
||||
flex: 1;
|
||||
padding: 0.12rem 0.18rem;
|
||||
padding-bottom: 0.18rem;
|
||||
height: var(--app-height, 100vh);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
@@ -79,10 +81,8 @@
|
||||
|
||||
// 筛选条件外层白色背景条
|
||||
&__filters-bar {
|
||||
background: $bg-white;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.14rem 0.18rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin: 0 0.24rem 0.2rem 0.24rem;
|
||||
}
|
||||
|
||||
// 筛选条件
|
||||
@@ -103,11 +103,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.04rem;
|
||||
background: $bg-main;
|
||||
background: #fff;
|
||||
border: 1px solid #E8E8E8;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.05rem 0.14rem;
|
||||
color: $text-dark;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.15rem 0.12rem;
|
||||
color: $text-middle;
|
||||
font-size: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -116,9 +116,11 @@
|
||||
height: 0.234rem;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
color: $accent;
|
||||
background: $theme-color;
|
||||
color: #fff;
|
||||
background: $btn-dark;
|
||||
svg{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,6 +209,7 @@
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0.2rem;
|
||||
margin: 0 0.24rem;
|
||||
|
||||
// 列表中每张卡片间距用 margin-bottom 替代 gap
|
||||
& > .jobs-page__job-card {
|
||||
|
||||
@@ -303,6 +303,10 @@
|
||||
|
||||
// 查看详情按钮
|
||||
&__detail-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.06rem;
|
||||
align-items: center;
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
width: 0.92rem;
|
||||
|
||||
@@ -9,7 +9,7 @@ $theme-color: #F6FCFC;
|
||||
$selected-color: #F6FCFC;
|
||||
|
||||
// 页面主背景色
|
||||
$bg-main: #F3F4F5;
|
||||
$bg-main: #F3F4F6;
|
||||
|
||||
// 页面中间色景色（用于页面主题色背景和白色背景分隔，用于某些模块组件的组件外层背景等）
|
||||
$bg-middle: #E6E6E6;
|
||||
|
||||
Reference in New Issue
Block a user