1121 lines
19 KiB
Plaintext
1121 lines
19 KiB
Plaintext
@use '../variables' as *;
|
|
|
|
// Agent 页面样式
|
|
.agent-page {
|
|
min-height: 100vh;
|
|
background: $bg-main;
|
|
|
|
// 主内容区域
|
|
&__content {
|
|
margin-left: 2.2rem;
|
|
flex: 1;
|
|
padding: 0.4rem 0.6rem;
|
|
}
|
|
|
|
// ==================== 顶部步骤导航 ====================
|
|
&__steps {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.12rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
&__step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.08rem;
|
|
padding: 0.08rem 0.16rem;
|
|
border-radius: 0.2rem;
|
|
background: $bg-white;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
|
|
// 激活状态
|
|
&--active {
|
|
background: $text-dark;
|
|
|
|
.agent-page__step-number {
|
|
background: $bg-white;
|
|
color: $text-dark;
|
|
}
|
|
|
|
.agent-page__step-label {
|
|
color: $bg-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__step-number {
|
|
width: 0.24rem;
|
|
height: 0.24rem;
|
|
border-radius: 50%;
|
|
background: $text-light;
|
|
color: $bg-white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
&__step-label {
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
white-space: nowrap;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
// 步骤之间的箭头
|
|
&__step-arrow {
|
|
width: 0.16rem;
|
|
height: 0.16rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $text-light;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// ==================== 主体内容区域 ====================
|
|
&__main {
|
|
display: flex;
|
|
gap: 0.24rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
// 左侧说明区域
|
|
&__left {
|
|
width: 4.6rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// 右侧个人档案区域
|
|
&__right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
// ==================== 第2步：确认目标岗位 ====================
|
|
&__step2 {
|
|
max-width: 7.5rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// 对话卡片
|
|
&__chat-card {
|
|
background: $bg-white;
|
|
border-radius: 0.16rem;
|
|
padding: 0.24rem;
|
|
margin-bottom: 0.24rem;
|
|
display: flex;
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
&__chat-avatar {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
border-radius: 50%;
|
|
background: $theme-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__chat-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__chat-title {
|
|
font-size: 0.16rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
line-height: 1.5;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__chat-body {
|
|
background: $bg-main;
|
|
border-radius: 0.12rem;
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
&__chat-desc {
|
|
font-size: 0.14rem;
|
|
color: $text-light;
|
|
line-height: 1.6;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
// 标签组
|
|
&__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.12rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
&__tag {
|
|
padding: 0.08rem 0.16rem;
|
|
background: $bg-white;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.2rem;
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
background: $theme-color;
|
|
}
|
|
|
|
&--active {
|
|
background: $text-light;
|
|
border-color: $text-light;
|
|
color: $bg-white;
|
|
}
|
|
}
|
|
|
|
// 对话操作按钮组
|
|
&__chat-actions {
|
|
display: flex;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
// 按钮样式
|
|
&__btn {
|
|
height: 0.4rem;
|
|
padding: 0 0.24rem;
|
|
border: none;
|
|
border-radius: 0.08rem;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
// 次要按钮
|
|
&--secondary {
|
|
background: $bg-white;
|
|
color: $text-dark;
|
|
border: 0.01rem solid $border-color;
|
|
|
|
&:hover {
|
|
border-color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// 主要按钮
|
|
&--primary {
|
|
background: $text-dark;
|
|
color: $bg-white;
|
|
|
|
&:hover {
|
|
background: $btn-dark-hover;
|
|
}
|
|
}
|
|
|
|
// 全宽按钮
|
|
&--full {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// 岗位列表
|
|
&__job-list {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
&__job-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.16rem;
|
|
padding: 0.16rem;
|
|
background: $bg-white;
|
|
border-radius: 0.12rem;
|
|
margin-bottom: 0.12rem;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
|
|
}
|
|
}
|
|
|
|
&__job-icon {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
border-radius: 0.08rem;
|
|
background: $theme-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__job-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__job-title {
|
|
font-size: 0.16rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
margin-bottom: 0.04rem;
|
|
}
|
|
|
|
&__job-company {
|
|
font-size: 0.14rem;
|
|
color: $text-light;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
&__job-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.08rem;
|
|
}
|
|
|
|
&__job-tag {
|
|
padding: 0.04rem 0.08rem;
|
|
background: $bg-main;
|
|
border-radius: 0.04rem;
|
|
font-size: 0.12rem;
|
|
color: $text-light;
|
|
}
|
|
|
|
// 匹配度圆环
|
|
&__job-match {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__job-match-circle {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
&__job-match-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&__job-match-bg {
|
|
fill: none;
|
|
stroke: $bg-main;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
&__job-match-progress {
|
|
fill: none;
|
|
stroke: $accent;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
&__job-match-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.14rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// 岗位操作按钮
|
|
&__job-actions {
|
|
display: flex;
|
|
gap: 0.08rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__job-action-btn {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.08rem;
|
|
background: $bg-white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
svg {
|
|
width: 0.2rem;
|
|
height: 0.2rem;
|
|
stroke: $text-light;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
background: $theme-color;
|
|
|
|
svg {
|
|
stroke: $accent;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
// 输入框
|
|
&__chat-input {
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__input {
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
padding: 0 0.16rem;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.08rem;
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
background: $bg-white;
|
|
transition: all 0.3s ease;
|
|
|
|
&::placeholder {
|
|
color: $text-light;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $accent;
|
|
}
|
|
}
|
|
|
|
// ==================== 准备阶段说明卡片 ====================
|
|
&__intro {
|
|
background: $bg-white;
|
|
border-radius: 0.16rem;
|
|
padding: 0.32rem;
|
|
}
|
|
|
|
&__intro-icon {
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
border-radius: 50%;
|
|
background: $theme-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.24rem;
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
&__intro-title {
|
|
font-size: 0.2rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
line-height: 1.4;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__intro-desc {
|
|
font-size: 0.14rem;
|
|
color: $text-light;
|
|
line-height: 1.6;
|
|
margin-bottom: 0.32rem;
|
|
}
|
|
|
|
&__intro-action {
|
|
display: flex;
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
// 上传框
|
|
&__upload-box {
|
|
flex: 1;
|
|
height: 0.48rem;
|
|
border: 0.01rem dashed $border-color;
|
|
border-radius: 0.08rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.08rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
background: $theme-color;
|
|
}
|
|
}
|
|
|
|
&__upload-icon {
|
|
font-size: 0.18rem;
|
|
}
|
|
|
|
&__upload-text {
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// 下一步按钮
|
|
&__next-btn {
|
|
height: 0.48rem;
|
|
padding: 0 0.32rem;
|
|
background: $text-dark;
|
|
color: $bg-white;
|
|
border: none;
|
|
border-radius: 0.08rem;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: $btn-dark-hover;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
// ==================== 第3步：爱好与方向 ====================
|
|
&__step3 {
|
|
display: flex;
|
|
gap: 0.24rem;
|
|
}
|
|
|
|
&__step3-left {
|
|
width: 4.8rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__step3-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
// 文件框
|
|
&__file-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.12rem;
|
|
padding: 0.12rem 0.16rem;
|
|
background: $bg-white;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.08rem;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__file-icon {
|
|
font-size: 0.2rem;
|
|
}
|
|
|
|
&__file-name {
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// 技能评分区域
|
|
&__skill-section {
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
&__skill-title {
|
|
font-size: 0.14rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__skill-row {
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__skill-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
&__skill-name {
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
}
|
|
|
|
&__skill-value {
|
|
font-size: 0.14rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
}
|
|
|
|
&__skill-bar-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
&__skill-range {
|
|
width: 100%;
|
|
height: 0.06rem;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: $border-color;
|
|
border-radius: 0.03rem;
|
|
outline: none;
|
|
|
|
&::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
border-radius: 50%;
|
|
background: $accent;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
border-radius: 50%;
|
|
background: $accent;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 家庭情况
|
|
&__family-section {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
&__family-hint {
|
|
font-size: 0.13rem;
|
|
color: $text-light;
|
|
line-height: 1.6;
|
|
margin-bottom: 0.12rem;
|
|
}
|
|
|
|
&__family-radios {
|
|
display: flex;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
&__radio-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.08rem;
|
|
padding: 0.12rem;
|
|
background: $bg-white;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.08rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
background: $theme-color;
|
|
}
|
|
}
|
|
|
|
&__radio-input {
|
|
margin-top: 0.02rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__radio-text {
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// 竞争力报告
|
|
&__report {
|
|
background: $bg-white;
|
|
border-radius: 0.16rem;
|
|
padding: 0.32rem;
|
|
}
|
|
|
|
&__report-header {
|
|
text-align: center;
|
|
margin-bottom: 0.32rem;
|
|
}
|
|
|
|
&__report-title {
|
|
font-size: 0.18rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
&__report-desc {
|
|
font-size: 0.13rem;
|
|
color: $text-light;
|
|
}
|
|
|
|
// 圆环进度
|
|
&__report-circle-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 0.32rem;
|
|
}
|
|
|
|
&__report-circle {
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
position: relative;
|
|
}
|
|
|
|
&__circle-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__circle-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
}
|
|
|
|
&__circle-percent {
|
|
font-size: 0.36rem;
|
|
font-weight: 700;
|
|
color: $text-dark;
|
|
line-height: 1;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
&__circle-label {
|
|
font-size: 0.14rem;
|
|
color: $text-light;
|
|
}
|
|
|
|
// 报告区块
|
|
&__report-block {
|
|
margin-bottom: 0.32rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__block-title {
|
|
font-size: 0.15rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
// 分析网格
|
|
&__analysis-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
&__analysis-item {
|
|
// 每个分析项
|
|
}
|
|
|
|
&__analysis-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
&__analysis-name {
|
|
font-size: 0.13rem;
|
|
color: $text-dark;
|
|
}
|
|
|
|
&__analysis-percent {
|
|
font-size: 0.13rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
|
|
&--danger {
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
&__analysis-bar {
|
|
height: 0.08rem;
|
|
background: $bg-main;
|
|
border-radius: 0.04rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__analysis-fill {
|
|
height: 100%;
|
|
background: $accent;
|
|
border-radius: 0.04rem;
|
|
transition: width 0.6s ease;
|
|
|
|
&--danger {
|
|
background: $danger;
|
|
}
|
|
}
|
|
|
|
// 建议标签
|
|
&__suggestions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.08rem;
|
|
}
|
|
|
|
&__suggestion-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.06rem;
|
|
padding: 0.06rem 0.12rem;
|
|
background: $bg-main;
|
|
border-radius: 0.16rem;
|
|
font-size: 0.13rem;
|
|
|
|
&--checked {
|
|
.agent-page__suggestion-icon {
|
|
color: $accent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__suggestion-icon {
|
|
font-size: 0.12rem;
|
|
color: $text-light;
|
|
}
|
|
|
|
&__suggestion-text {
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// ==================== 第2步：确认目标岗位 ====================
|
|
&__step2 {
|
|
max-width: 7.5rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// 对话卡片
|
|
&__dialog-card {
|
|
background: $bg-white;
|
|
border-radius: 0.16rem;
|
|
padding: 0.24rem;
|
|
margin-bottom: 0.24rem;
|
|
display: flex;
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
&__dialog-avatar {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
border-radius: 50%;
|
|
background: $theme-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__dialog-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__dialog-title {
|
|
font-size: 0.16rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
line-height: 1.5;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__dialog-body {
|
|
background: $bg-main;
|
|
border-radius: 0.12rem;
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
&__dialog-hint {
|
|
font-size: 0.14rem;
|
|
color: $text-light;
|
|
line-height: 1.6;
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
// 标签列表
|
|
&__tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.12rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
&__tag-item {
|
|
padding: 0.08rem 0.16rem;
|
|
background: $bg-white;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.2rem;
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
background: $theme-color;
|
|
}
|
|
|
|
&--active {
|
|
background: $text-light;
|
|
border-color: $text-light;
|
|
color: $bg-white;
|
|
}
|
|
}
|
|
|
|
// 对话操作按钮
|
|
&__dialog-actions {
|
|
display: flex;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
&__action-btn {
|
|
height: 0.4rem;
|
|
padding: 0 0.24rem;
|
|
border: none;
|
|
border-radius: 0.08rem;
|
|
font-size: 0.14rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
// 次要按钮
|
|
&--secondary {
|
|
background: $bg-white;
|
|
color: $text-dark;
|
|
border: 0.01rem solid $border-color;
|
|
|
|
&:hover {
|
|
border-color: $text-dark;
|
|
}
|
|
}
|
|
|
|
// 主要按钮
|
|
&--primary {
|
|
background: $text-dark;
|
|
color: $bg-white;
|
|
|
|
&:hover {
|
|
background: $btn-dark-hover;
|
|
}
|
|
}
|
|
|
|
// 全宽按钮
|
|
&--full {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// 岗位列表
|
|
&__position-list {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
&__position-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.16rem;
|
|
padding: 0.16rem;
|
|
background: $bg-white;
|
|
border-radius: 0.12rem;
|
|
margin-bottom: 0.12rem;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__position-icon {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
border-radius: 0.08rem;
|
|
background: $theme-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__position-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__position-name {
|
|
font-size: 0.16rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
margin-bottom: 0.04rem;
|
|
}
|
|
|
|
&__position-company {
|
|
font-size: 0.14rem;
|
|
color: $text-light;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
&__position-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.08rem;
|
|
}
|
|
|
|
&__position-tag {
|
|
padding: 0.04rem 0.08rem;
|
|
background: $bg-main;
|
|
border-radius: 0.04rem;
|
|
font-size: 0.12rem;
|
|
color: $text-light;
|
|
}
|
|
|
|
// 匹配度圆环
|
|
&__position-match {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__match-circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&__match-bg {
|
|
fill: none;
|
|
stroke: $bg-main;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
&__match-progress {
|
|
fill: none;
|
|
stroke: $accent;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
&__match-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.14rem;
|
|
font-weight: 600;
|
|
color: $text-dark;
|
|
}
|
|
|
|
// 岗位操作按钮
|
|
&__position-actions {
|
|
display: flex;
|
|
gap: 0.08rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__position-btn {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.08rem;
|
|
background: $bg-white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
|
|
svg {
|
|
width: 0.2rem;
|
|
height: 0.2rem;
|
|
stroke: $text-light;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
background: $theme-color;
|
|
|
|
svg {
|
|
stroke: $accent;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
// 反馈输入框
|
|
&__feedback-input {
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
|
|
&__input-field {
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
padding: 0 0.16rem;
|
|
border: 0.01rem solid $border-color;
|
|
border-radius: 0.08rem;
|
|
font-size: 0.14rem;
|
|
color: $text-dark;
|
|
background: $bg-white;
|
|
transition: all 0.3s ease;
|
|
|
|
&::placeholder {
|
|
color: $text-light;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $accent;
|
|
}
|
|
}
|
|
}
|