导师列表导师详情右侧广告，去投递弹窗等
This commit is contained in:
@@ -0,0 +1,485 @@
|
||||
@use '../variables' as *;
|
||||
|
||||
// ==================== 导师页右侧广告面板样式 ====================
|
||||
|
||||
.mentor-aside-panel {
|
||||
font-size: 0.14rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: $bg-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 顶部渐变区域
|
||||
&__header {
|
||||
padding: 0.24rem;
|
||||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 630;
|
||||
font-size: 0.20rem;
|
||||
line-height: 0.27rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-weight: 330;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-middle;
|
||||
margin-top: 0.04rem;
|
||||
}
|
||||
|
||||
// 统计数字区域
|
||||
&__stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0.24rem;
|
||||
height: 1rem;
|
||||
background: linear-gradient(270deg, rgba(82, 202, 209, 0.05) 0%, rgba(159, 208, 81, 0.05) 100%);
|
||||
border-radius: 0.12rem;
|
||||
position: relative;
|
||||
|
||||
// 渐变边框：从上到下 #9FD051 → #52CAD1
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.012rem;
|
||||
background: linear-gradient(180deg, #9FD051 0%, #52CAD1 100%);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.20rem 0;
|
||||
}
|
||||
|
||||
&__stat-num {
|
||||
font-weight: 520;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.32rem;
|
||||
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
&__stat-label {
|
||||
font-weight: 450;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__stat-divider {
|
||||
width: 0;
|
||||
height: 0.98rem;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
|
||||
// 小节标题（共用）
|
||||
&__section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
&__section-icon {
|
||||
font-size: 0.16rem;
|
||||
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
&__section-text {
|
||||
font-weight: 520;
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.21rem;
|
||||
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
// 为什么选择我们的导师
|
||||
&__reasons {
|
||||
margin: 0.24rem 0.24rem 0;
|
||||
}
|
||||
|
||||
&__reason-list {
|
||||
margin-top: 0.24rem;
|
||||
}
|
||||
|
||||
&__reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
margin-bottom: 0.20rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__reason-icon {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
background: #EDF9FA;
|
||||
border-radius: 0.08rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__reason-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.04rem;
|
||||
}
|
||||
|
||||
&__reason-title {
|
||||
font-weight: 520;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__reason-desc {
|
||||
font-weight: 330;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
// 热门导师方向
|
||||
&__directions {
|
||||
margin: 0.24rem 0.24rem 0;
|
||||
}
|
||||
|
||||
&__direction-list {
|
||||
margin-top: 0.24rem;
|
||||
}
|
||||
|
||||
&__direction-card {
|
||||
box-sizing: border-box;
|
||||
padding: 0.12rem 0.16rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.12rem;
|
||||
margin-bottom: 0.20rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__direction-name {
|
||||
font-weight: 520;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
&__direction-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
&__direction-tag {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.04rem 0.08rem;
|
||||
background: #EDF9FA;
|
||||
border-radius: 0.04rem;
|
||||
font-weight: 330;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.16rem;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
// 底部按钮区域
|
||||
&__footer {
|
||||
margin-top: auto;
|
||||
padding: 0.24rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cta-btn {
|
||||
width: 100%;
|
||||
height: 0.40rem;
|
||||
background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
|
||||
border-radius: 0.12rem;
|
||||
border: none;
|
||||
font-weight: 520;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: $bg-white;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer-tip {
|
||||
font-weight: 330;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.16rem;
|
||||
color: $text-middle;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
|
||||
// ==================== 模式二：模拟对话样式 ====================
|
||||
|
||||
&__chat {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.16rem 0.24rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话加载中
|
||||
&__chat-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.12rem;
|
||||
padding: 0.4rem 0;
|
||||
color: $text-middle;
|
||||
font-size: 0.13rem;
|
||||
}
|
||||
|
||||
&__chat-spinner {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
border: 2px solid $border-color;
|
||||
border-top-color: $accent;
|
||||
border-radius: 50%;
|
||||
animation: mentorChatSpin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mentorChatSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 对话气泡
|
||||
&__chat-bubble {
|
||||
display: flex;
|
||||
margin-bottom: 0.16rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// 用户消息 — 右对齐，品牌色背景
|
||||
&--user {
|
||||
justify-content: flex-end;
|
||||
|
||||
.mentor-aside-panel__chat-text {
|
||||
background: $accent;
|
||||
color: #FFFFFF;
|
||||
border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
// 导师消息 — 左对齐，白色背景
|
||||
&--mentor {
|
||||
justify-content: flex-start;
|
||||
|
||||
.mentor-aside-panel__chat-text {
|
||||
background: #FFFFFF;
|
||||
color: $text-dark;
|
||||
border-radius: 0.04rem 0.12rem 0.12rem 0.12rem;
|
||||
box-shadow: 0 2px 4px rgba(82, 202, 209, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chat-text {
|
||||
display: inline-block;
|
||||
max-width: 2.38rem;
|
||||
padding: 0.08rem 0.12rem;
|
||||
font-weight: 330;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.24rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 二维码弹窗样式 ====================
|
||||
|
||||
/* 遮罩层 */
|
||||
.mentor-qr-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 弹窗卡片 */
|
||||
.mentor-qr-card {
|
||||
font-size: 0.14rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.24rem 0.32rem;
|
||||
gap: 0.24rem;
|
||||
width: 4.80rem;
|
||||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
|
||||
border: 1px solid #F0F0F0;
|
||||
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0.12rem;
|
||||
|
||||
// 头部：标题 + 关闭按钮
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.04rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 520;
|
||||
font-size: 0.18rem;
|
||||
line-height: 0.24rem;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-weight: 330;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.16rem;
|
||||
color: #6A7282;
|
||||
}
|
||||
|
||||
&__close {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 二维码展示区域
|
||||
&__qr-area {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.16rem 0;
|
||||
width: 100%;
|
||||
min-height: 2.72rem;
|
||||
background: #F4FBFB;
|
||||
border: 1px solid #AEE6EA;
|
||||
border-radius: 0.08rem;
|
||||
}
|
||||
|
||||
&__qr-img {
|
||||
width: 2.40rem;
|
||||
height: 2.40rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
font-size: 0.14rem;
|
||||
color: #6A7282;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.40rem;
|
||||
height: 2.40rem;
|
||||
}
|
||||
|
||||
&__spinner {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
border: 3px solid #AEE6EA;
|
||||
border-top-color: #52CAD1;
|
||||
border-radius: 50%;
|
||||
animation: mentorQrSpin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes mentorQrSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 底部提示
|
||||
&__footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__footer-text {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.12rem 0.16rem;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 0.08rem;
|
||||
font-weight: 330;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.19rem;
|
||||
color: #6A7282;
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,6 @@
|
||||
&__tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.24rem;
|
||||
padding-bottom: 0.14rem;
|
||||
flex-shrink: 0;
|
||||
margin-bottom:0.14rem
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
@use './components/agreement-preview-dialog.scss';
|
||||
@use './components/member-access-dialog.scss';
|
||||
@use './components/step-progress-overlay.scss';
|
||||
@use './components/mentor-aside-panel.scss';
|
||||
|
||||
// 全局样式（优先级最高）
|
||||
@use './auto.scss';
|
||||
|
||||
@@ -798,10 +798,10 @@
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// ==================== AI助手投递提醒弹窗 ====================
|
||||
// ==================== 选择投递方式弹窗 ====================
|
||||
|
||||
// 遮罩层
|
||||
&__agent-remind-overlay {
|
||||
&__apply-method-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -815,54 +815,192 @@
|
||||
}
|
||||
|
||||
// 弹窗主体
|
||||
&__agent-remind-dialog {
|
||||
&__apply-method-dialog {
|
||||
position: relative;
|
||||
width: 4.8rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid #F0F0F0;
|
||||
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.32rem 0.36rem 0.24rem;
|
||||
min-width: 3.2rem;
|
||||
text-align: center;
|
||||
padding: 0.28rem 0.32rem 0.32rem;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 提示文字
|
||||
&__agent-remind-text {
|
||||
font-size: 0.15rem;
|
||||
// 渐变背景层
|
||||
&__apply-method-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
|
||||
border-radius: 0.12rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 标题
|
||||
&__apply-method-title {
|
||||
position: relative;
|
||||
font-size: 0.18rem;
|
||||
font-weight: 520;
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.28rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
margin: 0 0 0.2rem 0;
|
||||
line-height: 0.24rem;
|
||||
}
|
||||
|
||||
// 按钮区域
|
||||
&__agent-remind-actions {
|
||||
display: flex;
|
||||
gap: 0.16rem;
|
||||
}
|
||||
|
||||
// 按钮通用
|
||||
&__agent-remind-btn {
|
||||
flex: 1;
|
||||
padding: 0.1rem 0;
|
||||
border-radius: 0.08rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 500;
|
||||
// 关闭按钮
|
||||
&__apply-method-close {
|
||||
position: absolute;
|
||||
top: 0.24rem;
|
||||
right: 0.24rem;
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// 选项卡容器
|
||||
&__apply-method-options {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0.16rem;
|
||||
margin-bottom: 0.24rem;
|
||||
}
|
||||
|
||||
// 选项卡
|
||||
&__apply-method-card {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 1.06rem;
|
||||
background: $bg-white;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 0.08rem;
|
||||
padding: 0.2rem 0;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border-color: #D0D0D0;
|
||||
}
|
||||
|
||||
// 灰色按钮 — 直接投
|
||||
&--secondary {
|
||||
background: $bg-main;
|
||||
color: $text-middle;
|
||||
// 选中态
|
||||
&--active {
|
||||
border-color: $accent;
|
||||
background: #EDF9FA;
|
||||
}
|
||||
}
|
||||
|
||||
// 选项卡标题
|
||||
&__apply-method-card-title {
|
||||
font-size: 0.14rem;
|
||||
font-weight: 450;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
line-height: 0.19rem;
|
||||
|
||||
// 品牌色标题
|
||||
&--accent {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
// 选项卡描述文字
|
||||
&__apply-method-card-desc {
|
||||
font-size: 0.12rem;
|
||||
font-weight: 330;
|
||||
color: $text-light;
|
||||
line-height: 0.2rem;
|
||||
margin: 0.06rem 0 0 0;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
// 选项卡头部（icon + 标题）
|
||||
&__apply-method-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.04rem;
|
||||
}
|
||||
|
||||
// 左下角圆形装饰
|
||||
&__apply-method-card-circle {
|
||||
position: absolute;
|
||||
width: 0.46rem;
|
||||
height: 0.46rem;
|
||||
left: -0.05rem;
|
||||
bottom: -0.08rem;
|
||||
background: #AEE6EA;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.jobs-page__apply-method-card--active & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// 主题色按钮 — 去AI助手
|
||||
&--primary {
|
||||
background: $btn-dark;
|
||||
// 圆形上的两个白色小圆点（眼睛）
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.04rem;
|
||||
height: 0.09rem;
|
||||
background: $bg-white;
|
||||
border-radius: 0.02rem;
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部操作按钮
|
||||
&__apply-method-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0.35rem;
|
||||
border: none;
|
||||
border-radius: 0.08rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 450;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
|
||||
// 未选择状态 — 浅色背景
|
||||
&--disabled {
|
||||
background: #EDF9FA;
|
||||
color: #AEE6EA;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// 已选择状态 — 品牌色背景
|
||||
&--active {
|
||||
background: $accent;
|
||||
color: $bg-white;
|
||||
|
||||
&:hover {
|
||||
background: $accent-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,9 +15,26 @@
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin-left: 2rem;
|
||||
padding: 0.24rem 0.4rem 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// 左侧主内容区
|
||||
&__main {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// 右侧广告区域
|
||||
&__aside {
|
||||
width: 3.6rem;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// 页面标题
|
||||
@@ -25,8 +42,9 @@
|
||||
font-size: 0.18rem;
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.12rem;
|
||||
flex-shrink: 0;
|
||||
padding: 0.16rem 0.24rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 返回按钮
|
||||
@@ -37,7 +55,7 @@
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.16rem;
|
||||
margin: 0.16rem 0.24rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
@@ -55,6 +73,7 @@
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0.24rem;
|
||||
margin:0 0.24rem 0.16rem 0.24rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
@@ -77,7 +96,7 @@
|
||||
|
||||
&__info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
@@ -153,6 +172,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧咨询区域容器
|
||||
&__consult-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 咨询价格
|
||||
&__price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.04rem;
|
||||
}
|
||||
|
||||
&__price-label {
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
&__price-value {
|
||||
font-size: 0.22rem;
|
||||
font-weight: 700;
|
||||
color: #f5a623;
|
||||
}
|
||||
|
||||
&__price-suffix {
|
||||
font-size: 0.13rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
// 立即咨询按钮
|
||||
&__consult-btn {
|
||||
width: 0.92rem;
|
||||
|
||||
@@ -249,12 +249,13 @@
|
||||
font-weight: 600;
|
||||
color: $text-dark;
|
||||
margin-bottom: 0.04rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__card-meta {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
margin-bottom: 0.08rem;
|
||||
margin-bottom: 0.06rem;
|
||||
}
|
||||
|
||||
&__card-sep {
|
||||
@@ -276,6 +277,30 @@
|
||||
padding: 0.02rem 0.08rem;
|
||||
}
|
||||
|
||||
// 咨询价格
|
||||
&__card-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.04rem;
|
||||
margin-top: 0.06rem;
|
||||
}
|
||||
|
||||
&__card-price-label {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
&__card-price-value {
|
||||
font-size: 0.18rem;
|
||||
font-weight: 700;
|
||||
color: #f5a623;
|
||||
}
|
||||
|
||||
&__card-price-suffix {
|
||||
font-size: 0.12rem;
|
||||
color: $text-middle;
|
||||
}
|
||||
|
||||
// 卡片右侧 — flex:1 让话题区自适应剩余空间，窄屏不会撑出滚动条
|
||||
&__card-right {
|
||||
flex: 1 1 0;
|
||||
@@ -369,11 +394,10 @@
|
||||
|
||||
// 右侧广告区域（固定 4rem）
|
||||
&__aside {
|
||||
width: 3rem;
|
||||
width: 3.6rem;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
background: $bg-white;
|
||||
border-left: 1px solid $border-color;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user