diff --git a/components.d.ts b/components.d.ts index ca32517..916a4a5 100644 --- a/components.d.ts +++ b/components.d.ts @@ -34,6 +34,8 @@ declare module 'vue' { ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElSelect: typeof import('element-plus/es')['ElSelect'] + ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] + ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] FullscreenLoading: typeof import('./src/components/FullscreenLoading.vue')['default'] diff --git a/src/api/common.ts b/src/api/common.ts index f4e416d..937e3af 100644 --- a/src/api/common.ts +++ b/src/api/common.ts @@ -21,8 +21,8 @@ export interface IndustryItem { * GET /public/industries/tree * 返回一级二级嵌套的行业分类 */ -export function fetchIndustryTree() { - return request.get>('/public/industries/tree') +export function fetchIndustryTree(params?: { includeEmpty?: boolean }) { + return request.get>('/public/industries/tree', { params }) } // ==================== 岗位分类相关 ==================== @@ -55,8 +55,8 @@ export interface JobCategoryItem { * GET /public/job-categories/tree * 返回一级二级三级嵌套的岗位分类 */ -export function fetchJobCategoryTree() { - return request.get>('/public/job-categories/tree') +export function fetchJobCategoryTree(params?: { includeEmpty?: boolean }) { + return request.get>('/public/job-categories/tree', { params }) } // ==================== 地区分类相关 ==================== diff --git a/src/api/member.ts b/src/api/member.ts index 5d5d65e..95305af 100644 --- a/src/api/member.ts +++ b/src/api/member.ts @@ -36,6 +36,8 @@ export interface MemberProduct { export interface MemberStatus { /** 是否是会员 */ isMember: boolean + /** 会员类型 1=正式 2=试用 */ + memberType?: number /** 到期时间（毫秒时间戳） */ expireTime?: number /** 首次开通时间（毫秒时间戳） */ diff --git a/src/assets/images/nav/kg-qcCode.png b/src/assets/images/nav/kg-qcCode.png new file mode 100644 index 0000000..999eb85 Binary files /dev/null and b/src/assets/images/nav/kg-qcCode.png differ diff --git a/src/assets/styles/components/agreement-preview-dialog.scss b/src/assets/styles/components/agreement-preview-dialog.scss index 2e18001..170857b 100644 --- a/src/assets/styles/components/agreement-preview-dialog.scss +++ b/src/assets/styles/components/agreement-preview-dialog.scss @@ -8,7 +8,7 @@ right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); - z-index: 2000; + z-index: 2500; display: flex; align-items: center; justify-content: center; diff --git a/src/assets/styles/components/member-dialog.scss b/src/assets/styles/components/member-dialog.scss index 97e5ae0..01ed778 100644 --- a/src/assets/styles/components/member-dialog.scss +++ b/src/assets/styles/components/member-dialog.scss @@ -1,4 +1,4 @@ -// 会员弹窗样式 +// 会员弹窗样式（新版） @use '../variables' as *; // 遮罩层 @@ -11,1163 +11,411 @@ align-items: center; justify-content: center; + // 扫码支付弹窗的遮罩层级更高 + &--qrcode { + z-index: 2400; + } } +// 弹窗主体 .member-dialog { - background: $bg-white; - border-radius: 0.2rem; - width: 8.8rem; - height: 80vh; - position: relative; - box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.15); + box-sizing: border-box; display: flex; flex-direction: column; - overflow: hidden; + align-items: flex-start; + padding: 0.24rem 0.32rem; + gap: 0.24rem; + width: 4.8rem; + background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%); + border: 1px solid #F0F0F0; + box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05); + border-radius: 0.12rem; font-size: 0.14rem; - // 关闭按钮 - &__close { - position: absolute; - top: 0.16rem; - right: 0.2rem; + // 扫码支付弹窗变体 + &--qrcode { + align-items: center; + } + + // ==================== 顶部标题行 ==================== + &__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; + } + + &__header-left { + display: flex; + flex-direction: column; + gap: 0.04rem; + } + + &__header-right { + display: flex; + align-items: center; + gap: 0.16rem; + } + + &__title { + font-weight: 520; font-size: 0.18rem; + line-height: 0.24rem; + color: $text-dark; + margin: 0; + } + + &__subtitle { + font-weight: 330; + font-size: 0.12rem; + line-height: 0.16rem; + color: $text-middle; + margin: 0; + } + + &__contact { + font-weight: 330; + font-size: 0.12rem; + line-height: 0.16rem; color: $text-light; cursor: pointer; - transition: color 0.2s; + + &:hover { + color: $text-middle; + } + } + + // 联系客服外层包装（用于定位二维码弹出框） + &__contact-wrap { + position: relative; + display: inline-flex; + align-items: center; + + &:hover .member-dialog__contact-qr { + display: flex; + } + } + + // 联系客服二维码弹出框 + &__contact-qr { + display: none; + position: absolute; + bottom: calc(100% + 0.1rem); + left: 50%; + transform: translateX(-50%); + width: 0.96rem; + height: 0.96rem; + background: $bg-white; + border-radius: 0.08rem; + box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.08); + padding: 0.06rem; + flex-direction: column; + align-items: center; + justify-content: center; z-index: 10; + img { + width: 100%; + height: 100%; + border-radius: 0.04rem; + object-fit: contain; + } + } + + // 二维码弹出框底部箭头 + &__contact-qr-arrow { + position: absolute; + bottom: -0.07rem; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + border-left: 0.08rem solid transparent; + border-right: 0.08rem solid transparent; + border-top: 0.08rem solid $bg-white; + filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.05)); + } + + &__close { + width: 0.24rem; + height: 0.24rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.14rem; + color: $text-middle; + cursor: pointer; + &:hover { color: $text-dark; } } - // ==================== 介绍步骤一 ==================== - &__intro-step1 { - flex: 1; + // ==================== 套餐选择区域 ==================== + &__plans { + display: flex; + gap: 0.13rem; + width: 100%; + } + + &__plan-card { + box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: 0.4rem; - background: #F0F8F8; - border-radius: 0.2rem; - } - - &__intro-title { - font-size: 0.36rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.2rem; - text-align: center; - } - - &__intro-subtitle { - font-size: 0.16rem; - color: $text-middle; - margin-bottom: 0.5rem; - text-align: center; - } - - &__intro-btn { - display: flex; - align-items: center; - gap: 0.08rem; - padding: 0.16rem 0.5rem; - background: #1A1A2E; - color: $bg-white; - border: none; - border-radius: 0.5rem; - font-size: 0.18rem; - font-weight: 600; - cursor: pointer; - transition: background 0.2s; - - &:hover { - background: #2E3142; - } - } - - &__intro-btn-icon { - color: $accent; - font-size: 0.2rem; - } - - // ==================== 介绍步骤二 ==================== - &__intro-step2 { - flex: 1; - overflow-y: auto; - padding: 0.36rem 0.5rem; - display: flex; - flex-direction: column; - align-items: center; - } - - &__step2-badge { - display: inline-flex; - align-items: center; + padding: 0.12rem 0.16rem; gap: 0.04rem; - padding: 0.06rem 0.16rem; - background: #F0F8F8; - color: $accent; - border-radius: 0.2rem; - font-size: 0.12rem; - font-weight: 600; - margin-bottom: 0.16rem; - } - - &__step2-title { - font-size: 0.32rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.12rem; - text-align: center; - } - - &__step2-subtitle { - font-size: 0.14rem; - color: $text-middle; - margin-bottom: 0.3rem; - text-align: center; - } - - // ==================== 套餐卡片（介绍页） ==================== - &__plans { - display: flex; - gap: 0.2rem; - width: 100%; - margin-bottom: 0.24rem; - } - - &__plan-card { - flex: 1; - border: 1px solid $border-color; - border-radius: 0.14rem; - padding: 0.22rem 0.2rem; + width: 1.3rem; + height: 1.01rem; + background: $bg-white; + border: 1px solid #F0F0F0; + border-radius: 0.08rem; cursor: pointer; - transition: all 0.25s ease; - display: flex; - flex-direction: column; - align-items: flex-start; + transition: border-color 0.2s; position: relative; &:hover { border-color: $accent; - box-shadow: 0 0.04rem 0.16rem rgba(79, 194, 201, 0.12); } + // 选中状态 — 粗边框 &--active { - border-color: $accent; - box-shadow: 0 0.04rem 0.2rem rgba(79, 194, 201, 0.2); - - .member-dialog__plan-btn { - background: $accent; - color: $bg-white; - border-color: $accent; - - &:hover { - background: $accent-hover; - border-color: $accent-hover; - } - } + border: 3px solid $accent; } } &__plan-recommend { position: absolute; - top: -0.12rem; - left: 50%; + top: -0.1rem; + left: 10%; transform: translateX(-50%); white-space: nowrap; background: $accent; color: $bg-white; font-size: 0.1rem; - padding: 0.03rem 0.12rem; - border-radius: 0.1rem; - font-weight: 600; - } - - &__plan-tag { - font-size: 0.1rem; - color: $text-middle; - margin-bottom: 0.06rem; + padding: 0.02rem 0.08rem; + border-radius: 0.08rem; + font-weight: 520; } &__plan-name { - font-size: 0.16rem; - font-weight: 600; + font-weight: 450; + font-size: 0.14rem; + line-height: 0.19rem; + text-align: center; color: $text-dark; - margin-bottom: 0.1rem; } &__plan-price { display: flex; - align-items: baseline; - margin-bottom: 0.06rem; + align-items: flex-end; + justify-content: center; + gap: 0.04rem; + padding: 0.04rem 0; } &__plan-price-symbol { - font-size: 0.16rem; - font-weight: 700; + font-weight: 450; + font-size: 0.14rem; + line-height: 0.19rem; color: $text-dark; } &__plan-price-num { - font-size: 0.36rem; - font-weight: 700; + font-weight: 630; + font-size: 0.24rem; + line-height: 0.18rem; color: $text-dark; - line-height: 1; } - &__plan-price-unit { + &__plan-original-price { + font-weight: 330; font-size: 0.12rem; - color: $text-middle; - margin-left: 0.04rem; - } - - &__plan-per-month { - font-size: 0.11rem; - color: $accent; - margin-bottom: 0.14rem; - } - - &__plan-btn { - width: 100%; - padding: 0.1rem 0; - border-radius: 0.12rem; - font-size: 0.13rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s; - border: 1px solid $border-color; - background: $bg-white; - color: $text-dark; - text-align: center; - margin-top: auto; - - &:hover { - border-color: $accent; - color: $accent; - } - } - - // ==================== 提示信息 ==================== - &__tip { - width: 100%; - background: #FFFBF0; - border: 1px solid #FFE8B0; - border-radius: 0.1rem; - padding: 0.14rem 0.18rem; - display: flex; - align-items: flex-start; - gap: 0.08rem; - margin-bottom: 0.3rem; - font-size: 0.12rem; - } - - &__tip-icon { - flex-shrink: 0; - } - - &__tip-label { - font-weight: 600; - color: $text-dark; - white-space: nowrap; - } - - &__tip-text { - color: $danger; - } - - // ==================== 底部内容行 ==================== - &__content-row { - width: 100%; - display: flex; - gap: 0.3rem; - margin-bottom: 0.3rem; - } - - &__abilities { - flex: 1; - } - - &__abilities-title { - font-size: 0.16rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.24rem; - } - - &__ability-item { - display: flex; - align-items: flex-start; - gap: 0.12rem; - margin-bottom: 0.28rem; - } - - &__ability-icon { - font-size: 0.16rem; - flex-shrink: 0; - line-height: 1.4; - } - - &__ability-text { - font-size: 0.14rem; - color: $text-dark; - line-height: 1.4; - font-weight: 500; - } - - &__compare { - flex: 1; - } - - &__compare-title { - font-size: 0.16rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.16rem; - } - - &__compare-table { - width: 100%; - border-collapse: collapse; - font-size: 0.12rem; - - th, td { - padding: 0.12rem 0.1rem; - text-align: left; - border-bottom: 1px solid $border-color; - } - - th { - font-weight: 600; - color: $text-middle; - font-size: 0.11rem; - } - } - - &__compare-th-pro { - color: $accent !important; - } - - &__compare-free { - color: $text-middle; - } - - &__compare-pro { - color: $accent; - font-weight: 600; - } - - &__compare-footer { - display: flex; - gap: 0.24rem; - margin-top: 0.16rem; - font-size: 0.11rem; + line-height: 0.16rem; + text-decoration: line-through; color: $text-light; } - // ==================== 用户评价 ==================== - &__testimonial { - width: 100%; - display: flex; - gap: 0.16rem; - padding: 0.2rem; - background: $bg-main; - border-radius: 0.12rem; - margin-bottom: 0.2rem; + &__plan-daily { + font-weight: 330; + font-size: 0.12rem; + line-height: 0.16rem; + text-align: center; + color: $accent; } - &__testimonial-avatar { - width: 0.48rem; - height: 0.48rem; + // ==================== 会员权益区域 ==================== + &__benefits { + width: 100%; + } + + &__benefits-title { + font-weight: 450; + font-size: 0.14rem; + line-height: 0.19rem; + color: $text-dark; + margin: 0 0 0.16rem; + } + + &__benefits-cards { + display: flex; + gap: 0.13rem; + width: 100%; + } + + &__benefit-card { + box-sizing: border-box; + flex: 1; + display: flex; + align-items: center; + padding: 0.12rem 0.16rem; + gap: 0.1rem; + background: $bg-white; + border: 1px solid #AEE6EA; + border-radius: 0.08rem; + } + + &__benefit-icon { + width: 0.4rem; + height: 0.4rem; + display: flex; + align-items: center; + justify-content: center; + background: #EDF9FA; border-radius: 50%; - overflow: hidden; flex-shrink: 0; - img { - width: 100%; - height: 100%; - object-fit: cover; + svg { + width: 0.24rem; + height: 0.24rem; } } - &__testimonial-content { - flex: 1; - } - - &__testimonial-stars { - color: #F5A623; - font-size: 0.14rem; - margin-bottom: 0.08rem; - } - - &__testimonial-text { - font-size: 0.12rem; - color: $text-dark; - line-height: 1.8; - margin-bottom: 0.1rem; - } - - &__testimonial-author { - font-size: 0.11rem; - } - - &__testimonial-name { - font-weight: 600; - color: $text-dark; - } - - &__testimonial-desc { - color: $accent; - margin-left: 0.04rem; - } - - - // ==================== 下单步骤通用 ==================== - &__order { - flex: 1; + &__benefit-info { display: flex; flex-direction: column; - overflow: hidden; - } - - &__order-header { - display: flex; - align-items: center; - padding: 0.2rem 0.3rem; - border-bottom: 1px solid $border-color; - flex-shrink: 0; - } - - &__order-back { - font-size: 0.14rem; - color: $text-middle; - cursor: pointer; - white-space: nowrap; - min-width: 1.2rem; - - &:hover { - color: $text-dark; - } - } - - // ==================== 步骤条 ==================== - &__steps { - display: flex; - align-items: center; - justify-content: center; - flex: 1; - gap: 0.08rem; - } - - &__step { - display: flex; - align-items: center; - gap: 0.06rem; - } - - &__step-num { - width: 0.24rem; - height: 0.24rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.11rem; - font-weight: 600; - background: $bg-main; - color: $text-middle; - } - - &__step-label { - font-size: 0.12rem; - color: $text-middle; - } - - &__step--active { - .member-dialog__step-num { - background: $accent; - color: $bg-white; - } - - .member-dialog__step-label { - color: $text-dark; - font-weight: 600; - } - } - - &__step--done { - .member-dialog__step-num { - background: $accent; - color: $bg-white; - } - - .member-dialog__step-label { - color: $accent; - } - } - - &__step-line { - width: 0.6rem; - height: 2px; - background: $border-color; - - &--done { - background: $accent; - } - } - - // ==================== 下单步骤一：主体 ==================== - &__order-body { - flex: 1; - display: flex; - overflow-y: auto; - } - - &__order-left { - flex: 1; - padding: 0.3rem; - } - - &__order-right { - width: 2.8rem; - padding: 0.3rem 0.24rem; - background: $bg-main; - flex-shrink: 0; - } - - &__order-title { - font-size: 0.24rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.1rem; - } - - &__order-desc { - font-size: 0.13rem; - color: $text-middle; - margin-bottom: 0.28rem; - line-height: 1.6; - } - - // ==================== 下单套餐选择卡片 ==================== - &__order-plans { - display: flex; - gap: 0.16rem; - margin-bottom: 0.3rem; - } - - &__order-plan-card { - flex: 1; - border: 1px solid $border-color; - border-radius: 0.12rem; - padding: 0.2rem 0.16rem; - cursor: pointer; - transition: all 0.2s; - position: relative; - display: flex; - align-items: flex-start; - gap: 0.12rem; - - &:hover { - border-color: $accent; - } - - &--active { - border-color: $accent; - background: rgba(79, 194, 201, 0.03); - } - } - - &__order-plan-badge { - position: absolute; - top: -0.1rem; - left: 50%; - transform: translateX(-50%); - background: $accent; - color: $bg-white; - font-size: 0.09rem; - padding: 0.02rem 0.1rem; - border-radius: 0.08rem; - font-weight: 600; - white-space: nowrap; - } - - &__order-plan-radio { - width: 0.18rem; - height: 0.18rem; - border-radius: 50%; - border: 2px solid $border-color; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - margin-top: 0.02rem; - - .member-dialog__order-plan-card--active & { - border-color: $accent; - } - } - - &__order-plan-radio-inner { - width: 0.1rem; - height: 0.1rem; - border-radius: 50%; - background: $accent; - } - - &__order-plan-info { - flex: 1; - } - - &__order-plan-name { - font-size: 0.14rem; - font-weight: 600; - color: $text-dark; - margin-bottom: 0.06rem; - } - - &__order-plan-price { - display: flex; - align-items: baseline; - margin-bottom: 0.06rem; - } - - &__order-plan-price-symbol { - font-size: 0.14rem; - font-weight: 700; - color: $text-dark; - } - - &__order-plan-price-num { - font-size: 0.28rem; - font-weight: 700; - color: $text-dark; - line-height: 1; - } - - &__order-plan-price-unit { - font-size: 0.11rem; - color: $text-middle; - margin-left: 0.03rem; - } - - &__order-plan-desc { - font-size: 0.1rem; - color: $text-middle; - line-height: 1.5; - } - - // ==================== 支付方式 ==================== - &__order-payment { - margin-bottom: 0.28rem; - } - - &__order-payment-title { - font-size: 0.16rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.16rem; - } - - &__order-payment-methods { - display: flex; - gap: 0.16rem; - margin-bottom: 0.16rem; - } - - &__order-payment-item { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - gap: 0.08rem; - padding: 0.16rem; - border: 1px solid $border-color; - border-radius: 0.1rem; - cursor: pointer; - transition: all 0.2s; - - &:hover { - border-color: $accent; - } - - &--active { - border-color: $accent; - background: rgba(79, 194, 201, 0.05); - } - } - - &__order-payment-icon { - font-size: 0.2rem; - } - - &__order-payment-name { - font-size: 0.13rem; - color: $text-dark; - } - - &__order-payment-hint { - text-align: center; - padding: 0.14rem; - background: $bg-main; - border-radius: 0.08rem; - font-size: 0.12rem; - color: $text-middle; - margin-bottom: 0.1rem; - } - - &__order-payment-safe { - font-size: 0.11rem; - color: $text-light; - } - - // ==================== 保障标签 ==================== - &__order-guarantees { - display: flex; - gap: 0.16rem; - margin-bottom: 0.3rem; - padding: 0.14rem 0; - border-top: 1px solid $border-color; - border-bottom: 1px solid $border-color; - } - - &__order-guarantee-item { - font-size: 0.12rem; - color: $text-middle; - display: flex; - align-items: center; gap: 0.04rem; } - // ==================== 常见问题 ==================== - &__order-faq { - margin-bottom: 0.2rem; - } - - &__order-faq-title { - font-size: 0.16rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.16rem; - } - - &__order-faq-item { - border: 1px solid $border-color; - border-radius: 0.1rem; - padding: 0.16rem; - margin-bottom: 0.1rem; - cursor: pointer; - transition: background 0.2s; - - &:hover { - background: $bg-main; - } - } - - &__order-faq-question { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.13rem; - font-weight: 600; - color: $text-dark; - } - - &__order-faq-arrow { - font-size: 0.16rem; - color: $text-light; - transition: transform 0.2s; - transform: rotate(90deg); - - &--open { - transform: rotate(-90deg); - } - } - - &__order-faq-answer { - font-size: 0.12rem; - color: $text-middle; - margin-top: 0.1rem; - line-height: 1.6; - } - - // ==================== 右侧订单摘要 ==================== - &__order-summary { - background: $bg-white; - border-radius: 0.12rem; - padding: 0.24rem; - } - - &__order-summary-title { - font-size: 0.16rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.2rem; - } - - &__order-summary-row { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.12rem; - } - - &__order-summary-plan { + &__benefit-name { + font-weight: 450; font-size: 0.14rem; - font-weight: 600; - color: $text-dark; - } - - &__order-summary-duration { - font-size: 0.11rem; - color: $text-middle; - margin-top: 0.02rem; - } - - &__order-summary-price { - font-size: 0.14rem; - color: $text-dark; - } - - &__order-summary-divider { - height: 1px; - background: $border-color; - margin: 0.14rem 0; - } - - &__order-summary-label { - font-size: 0.14rem; - font-weight: 600; - color: $text-dark; - } - - &__order-summary-total { - font-size: 0.22rem; - font-weight: 700; + line-height: 0.19rem; color: $accent; } - &__order-summary-agree { - display: flex; - align-items: flex-start; - gap: 0.08rem; - margin: 0.16rem 0; - font-size: 0.1rem; + &__benefit-desc { + font-weight: 330; + font-size: 0.12rem; + line-height: 0.16rem; color: $text-middle; - line-height: 1.5; + } - a { - color: $accent; - text-decoration: none; + // ==================== 支付方式选择 ==================== + &__payment { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + &__payment-label { + font-weight: 450; + font-size: 0.14rem; + line-height: 0.19rem; + color: $text-dark; + } + + &__payment-methods { + display: flex; + align-items: center; + gap: 0.24rem; + } + + &__payment-item { + display: flex; + align-items: center; + padding: 0.04rem 0.08rem; + gap: 0.06rem; + border-radius: 0.04rem; + cursor: pointer; + transition: background 0.2s; + + svg { + width: 0.16rem; + height: 0.16rem; + flex-shrink: 0; + } + + // 微信选中态 + &--wechat-active { + background: #EBFEF4; + } + + // 支付宝选中态 + &--alipay-active { + background: #EBF3FF; + } + } + + &__payment-text { + font-weight: 520; + font-size: 0.12rem; + line-height: 0.18rem; + + &--wechat { + color: #07C160; + } + + &--alipay { + color: #1677FF; + } + } + + // ==================== 购买按钮 ==================== + &__buy-btn { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 0.08rem 0.12rem; + height: 0.35rem; + background: #AEE6EA; + border-radius: 0.08rem; + border: none; + font-weight: 450; + font-size: 0.14rem; + line-height: 0.19rem; + color: $bg-white; + cursor: default; + opacity: 0.4; + transition: background 0.2s, opacity 0.2s; + + // 选择了支付方式后变为主题色、不透明、可点击 + &--active { + background: $accent; + opacity: 1; + cursor: pointer; &:hover { - text-decoration: underline; + background: $accent-hover; } } } - // 自定义复选框 - &__order-checkbox { - position: relative; + // ==================== 扫码支付弹窗内容 ==================== + &__qrcode-content { display: flex; + flex-direction: column; align-items: center; - flex-shrink: 0; - - input { - position: absolute; - opacity: 0; - width: 0; - height: 0; - - &:checked + .member-dialog__order-checkbox-mark { - background: $accent; - border-color: $accent; - - &::after { - display: block; - } - } - } - } - - &__order-checkbox-mark { - width: 0.16rem; - height: 0.16rem; - border: 2px solid $border-color; - border-radius: 0.03rem; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s; - - &::after { - content: '✓'; - display: none; - color: $bg-white; - font-size: 0.1rem; - font-weight: 700; - } - } - - &__order-submit-btn { + gap: 0.16rem; width: 100%; - padding: 0.14rem; - background: $accent; - color: $bg-white; - border: none; - border-radius: 0.08rem; - font-size: 0.14rem; - font-weight: 600; - cursor: pointer; - transition: background 0.2s; - - &:hover { - background: $accent-hover; - } - - &:disabled { - background: $border-color; - color: $text-light; - cursor: not-allowed; - } - } - - &__order-submit-tip { - font-size: 0.1rem; - color: $text-light; - text-align: center; - margin-top: 0.1rem; - } - - // 你将获得 - &__order-benefits { - margin-top: 0.24rem; - padding-top: 0.2rem; - border-top: 1px solid $border-color; - } - - &__order-benefits-title { - font-size: 0.13rem; - font-weight: 600; - color: $text-dark; - margin-bottom: 0.14rem; - } - - &__order-benefits-item { - display: flex; - align-items: center; - gap: 0.08rem; - font-size: 0.12rem; - color: $text-dark; - margin-bottom: 0.1rem; - } - - &__order-benefits-check { - color: $accent; - font-weight: 700; - } - - // ==================== 下单步骤二：确认支付 ==================== - &__order-confirming { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - padding: 0.4rem; - background: #F0F8F8; - } - - &__order-confirming-card { - background: $bg-white; - border-radius: 0.16rem; - padding: 0.6rem 0.8rem; - text-align: center; - box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.06); - } - - &__order-loading-spinner { - width: 0.5rem; - height: 0.5rem; - border: 3px solid #E8F8F8; - border-top-color: $accent; - border-radius: 50%; - margin: 0 auto 0.24rem; - animation: member-spin 1s linear infinite; - } - - @keyframes member-spin { - to { - transform: rotate(360deg); - } - } - - &__order-confirming-title { - font-size: 0.2rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.1rem; - } - - &__order-confirming-desc { - font-size: 0.13rem; - color: $text-middle; - } - - // ==================== 下单步骤三：支付成功 ==================== - &__order-success { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - padding: 0.4rem; - background: #F0F8F8; - } - - &__order-success-card { - background: $bg-white; - border-radius: 0.16rem; - padding: 0.5rem 0.8rem; - text-align: center; - box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.06); - min-width: 4rem; - } - - &__order-success-icon { - 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.28rem; - font-weight: 700; - margin: 0 auto 0.24rem; - } - - &__order-success-title { - font-size: 0.22rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.12rem; - } - - &__order-success-desc { - font-size: 0.13rem; - color: $text-middle; - line-height: 1.6; - margin-bottom: 0.3rem; - } - - &__order-success-btn { - width: 100%; - padding: 0.14rem; - background: $accent; - color: $bg-white; - border: none; - border-radius: 0.08rem; - font-size: 0.14rem; - font-weight: 600; - cursor: pointer; - transition: background 0.2s; - margin-bottom: 0.12rem; - - &:hover { - background: $accent-hover; - } - } - - &__order-success-btn-secondary { - width: 100%; - padding: 0.14rem; - background: $bg-white; - color: $accent; - border: 1px solid $border-color; - border-radius: 0.08rem; - font-size: 0.14rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s; - - &:hover { - border-color: $accent; - } - } - - // ==================== 付款二维码遮罩层 ==================== - &__qrcode-overlay { - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 20; - border-radius: 0.2rem; - } - - &__qrcode-modal { - background: $bg-white; - border-radius: 0.16rem; - padding: 0.3rem 0.4rem; - text-align: center; - position: relative; - width: 5rem; - max-height: 80vh; - overflow-y: auto; - box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.15); - } - - &__qrcode-close { - position: absolute; - top: 0.12rem; - right: 0.16rem; - font-size: 0.16rem; - color: $text-light; - cursor: pointer; - - &:hover { - color: $text-dark; - } - } - - &__qrcode-title { - display: flex; - align-items: center; - justify-content: center; - gap: 0.06rem; - font-size: 0.13rem; - color: $accent; - font-weight: 600; - margin-bottom: 0.12rem; - } - - &__qrcode-title-icon { - font-size: 0.16rem; - } - - &__qrcode-subtitle { - font-size: 0.18rem; - font-weight: 700; - color: $text-dark; - margin-bottom: 0.08rem; - } - - &__qrcode-desc { - font-size: 0.11rem; - color: $text-middle; - margin-bottom: 0.2rem; - line-height: 1.5; } &__qrcode-image { width: 2.1rem; height: 2.1rem; - margin: 0 auto 0.16rem; display: flex; align-items: center; justify-content: center; @@ -1180,7 +428,6 @@ border-radius: 0.08rem; } - /* 微信二维码 iframe */ &__wechat-qr-iframe { width: 2.2rem; height: 2.2rem; @@ -1188,30 +435,58 @@ border-radius: 0.08rem; } - &__qrcode-placeholder { - width: 100%; - height: 100%; - background: $bg-main; - border: 1px dashed $border-color; - border-radius: 0.08rem; + &__qrcode-price-row { + display: flex; + align-items: flex-end; + gap: 0.08rem; } - &__qrcode-amount { - font-size: 0.22rem; - font-weight: 700; + &__qrcode-price { + font-weight: 630; + font-size: 0.32rem; + line-height: 0.25rem; color: $text-dark; - margin-bottom: 0.2rem; } - &__qrcode-confirm-btn { - width: 100%; - padding: 0.12rem; - background: $accent; - color: $bg-white; - border: none; - border-radius: 0.08rem; + &__qrcode-tip { + font-weight: 330; font-size: 0.14rem; - font-weight: 600; + line-height: 0.1rem; + color: $text-dark; + } + + &__qrcode-agreement { + font-weight: 330; + font-size: 0.14rem; + line-height: 0.19rem; + color: $text-light; + margin: 0; + + a { + color: $text-light; + text-decoration: none; + + &:hover { + color: $accent; + } + } + } + + // 已支付成功按钮 + &__paid-btn { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 0.08rem 0.12rem; + height: 0.35rem; + background: $accent; + border-radius: 0.08rem; + border: none; + font-weight: 450; + font-size: 0.14rem; + line-height: 0.19rem; + color: $bg-white; cursor: pointer; transition: background 0.2s; diff --git a/src/assets/styles/components/settings-dialog.scss b/src/assets/styles/components/settings-dialog.scss index b03811d..61f1aaa 100644 --- a/src/assets/styles/components/settings-dialog.scss +++ b/src/assets/styles/components/settings-dialog.scss @@ -16,7 +16,7 @@ .settings-dialog { position: relative; - width: 8.6rem; + width: 6.4rem; height: 6.2rem; background: $bg-white; border-radius: 0.12rem; @@ -60,35 +60,24 @@ &__nav-item { display: flex; align-items: center; - gap: 0.08rem; - padding: 0.12rem 0.2rem; + padding: 0.1rem 0.16rem; + margin: 0.02rem 0.12rem; font-size: 0.14rem; color: $text-dark; cursor: pointer; transition: all 0.2s; - border-left: 0.03rem solid transparent; + border-radius: 0.08rem; font-weight: 500; &:hover { - background: $bg-white; - color: $accent; + background: #E2E4E9; } &--active { - background: $bg-white; - color: $accent; - border-left-color: $accent; - font-weight: 600; + background: #E2E4E9; } } - &__nav-icon { - font-size: 0.16rem; - flex-shrink: 0; - width: 0.18rem; - text-align: center; - } - // 底部操作 &__bottom-actions { margin-top: auto; @@ -139,7 +128,10 @@ // ===== 账号与安全 ===== &__section { - margin-bottom: 0.28rem; + margin-bottom: 0.16rem; + padding: 0.16rem 0.24rem; + background: #F9FAFB; + border-radius: 0.08rem; } &__section-label { @@ -156,7 +148,12 @@ } &__danger-section { - margin-top: 0.32rem; + padding: 0.16rem 0.24rem; + background: #F9FAFB; + border-radius: 0.08rem; + display: flex; + align-items: center; + justify-content: space-between; } &__danger-title { @@ -179,161 +176,238 @@ } &__danger-btn { - background: $bg-main; - border: 1px solid $border-color; - border-radius: 0.06rem; + border: none; + background: none; padding: 0.07rem 0.16rem; font-size: 0.13rem; - color: $text-dark; + color: $danger; cursor: pointer; white-space: nowrap; transition: all 0.2s; &:hover { - border-color: $danger; - color: $danger; } } - // ===== 会员 ===== - &__member-card { - background: $bg-white; - border: 1px solid $border-color; - border-radius: 0.1rem; - padding: 0.2rem 0.24rem; - margin-bottom: 0.24rem; - } - - &__member-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.1rem; - } - - &__member-title-row { - display: flex; - align-items: center; - gap: 0.1rem; - } - - &__member-name { - font-size: 0.16rem; - font-weight: 700; - color: $text-dark; - } - - &__member-badge { - background: $accent; - color: $bg-white; - font-size: 0.11rem; - padding: 0.02rem 0.08rem; - border-radius: 0.1rem; - - &--inactive { - background: #ccc; - color: $bg-white; - } - } - - &__member-terms { - font-size: 0.12rem; - color: $accent; - cursor: pointer; - text-decoration: underline; - - &:hover { - color: $accent-hover; - } - } - - &__member-info-row { - display: flex; - align-items: center; - justify-content: space-between; - } - - &__member-price { - font-size: 0.13rem; - color: #555; + // ===== 会员卡片（新版） ===== + &__mcard { + padding: 0.16rem 0.24rem; + border-radius: 0.12rem; display: flex; flex-direction: column; - gap: 0.06rem; + gap: 0.32rem; - span { - margin-left: 0; - color: $text-light; + &--formal { + background: linear-gradient(90deg, #52CAD1 0%, #52D1A7 100%); + } + + &--trial { + background: linear-gradient(90deg, #F59E0B 0%, #F5B70B 100%); + } + + &--free { + background: #F3F4F6; } } - &__member-expire-line { - font-size: 0.13rem; - color: #555; + &__mcard-top { + display: flex; + align-items: flex-start; + justify-content: space-between; } - &__member-remain-line { - font-size: 0.13rem; - color: $accent; - font-weight: 600; + &__mcard-title { + font-size: 0.18rem; + font-weight: 520; + color: #FFFFFF; + line-height: 0.24rem; + + &--free { + color: #6A7282; + } } - &__member-manage-btn { - background: $bg-main; - border: 1px solid $border-color; - border-radius: 0.06rem; - padding: 0.07rem 0.16rem; - font-size: 0.13rem; - color: $text-dark; + &__mcard-remain { + display: flex; + align-items: flex-end; + gap: 0.04rem; + } + + &__mcard-remain-label { + font-size: 0.14rem; + font-weight: 330; + color: #FFFFFF; + line-height: 0.19rem; + } + + &__mcard-remain-days { + font-size: 0.18rem; + font-weight: 520; + color: #FFFFFF; + line-height: 0.24rem; + } + + &__mcard-bottom { + display: flex; + align-items: flex-end; + justify-content: space-between; + } + + &__mcard-expire { + font-size: 0.12rem; + font-weight: 330; + color: #FFFFFF; + line-height: 0.16rem; + + &--free { + color: #6A7282; + } + } + + &__mcard-actions { + display: flex; + align-items: flex-start; + gap: 0.08rem; + } + + &__mcard-btn { + display: flex; + align-items: center; + justify-content: center; + padding: 0.04rem 0.12rem; + font-size: 0.12rem; + font-weight: 330; + line-height: 0.16rem; + border-radius: 0.12rem; cursor: pointer; - transition: all 0.2s; + white-space: nowrap; + border: none; + transition: opacity 0.2s; &:hover { - border-color: $accent; - color: $accent; + opacity: 0.85; + } + + &--outline { + background: transparent; + border: 1px solid #FFFFFF; + color: #FFFFFF; + } + + &--solid-formal { + background: #FFFFFF; + color: #52CAD1; + } + + &--solid-trial { + background: #FFFFFF; + color: #F59E0B; + } + + &--solid-accent { + background: #52CAD1; + color: #FFFFFF; } } - &__member-issue { - text-align: center; - padding: 0.2rem 0; + // ===== 问题反馈 ===== + &__feedback-wrap { + background: #F9FAFB; + border-radius: 0.08rem; + padding: 0.16rem 0.24rem; + display: flex; + flex-direction: column; + gap: 0.24rem; } - &__member-issue-title { - font-size: 0.15rem; - font-weight: 600; - color: $text-dark; - margin-bottom: 0.1rem; + &__feedback-section { + display: flex; + flex-direction: column; + gap: 0.12rem; } - &__member-issue-desc { - font-size: 0.12rem; - color: #666; - line-height: 1.8; - margin-bottom: 0.16rem; - max-width: 5.0rem; - margin-left: auto; - margin-right: auto; + &__feedback-label { + font-size: 0.14rem; + font-weight: 520; + color: #1A1A1A; + line-height: 0.19rem; } - &__member-issue-actions { + &__feedback-options { + display: flex; + flex-wrap: wrap; + gap: 0.08rem; + } + + &__feedback-option { display: flex; justify-content: center; - gap: 0.16rem; - } - - &__member-issue-btn { - background: $bg-white; - border: 1px solid $border-color; - border-radius: 0.06rem; - padding: 0.08rem 0.24rem; - font-size: 0.13rem; - color: $text-dark; + align-items: center; + padding: 0.08rem 0.12rem; + font-size: 0.12rem; + font-weight: 330; + line-height: 0.16rem; + text-align: center; + color: $accent; + border: 1px solid $accent; + border-radius: 0.08rem; cursor: pointer; transition: all 0.2s; + flex: 1 1 30%; + min-width: 0; &:hover { + background: rgba(82, 202, 209, 0.08); + } + + &--active { + background: $accent; + color: #FFFFFF; border-color: $accent; - color: $accent; + + &:hover { + background: $accent; + } + } + } + + &__feedback-textarea { + width: 100%; + min-height: 0.64rem; + padding: 0.08rem 0.12rem; + font-size: 0.12rem; + font-weight: 330; + line-height: 0.16rem; + color: #1A1A1A; + background: #FFFFFF; + border: none; + border-radius: 0.08rem; + resize: vertical; + outline: none; + box-sizing: border-box; + + &::placeholder { + color: #99A1AF; + } + } + + &__feedback-submit { + margin-top: 0.44rem; + margin-left: auto; + margin-right: auto; + display: block; + padding: 0.08rem 0.24rem; + background: $accent; + color: #FFFFFF; + font-size: 0.13rem; + font-weight: 500; + border: none; + border-radius: 0.08rem; + cursor: pointer; + transition: opacity 0.2s; + + &:hover { + opacity: 0.85; } } @@ -468,6 +542,9 @@ font-size: 0.13rem; color: #555; line-height: 1.8; + padding: 0.16rem 0.24rem; + background: #F9FAFB; + border-radius: 0.08rem; } &__privacy-section { diff --git a/src/assets/styles/components/settings-invite-dialog.scss b/src/assets/styles/components/settings-invite-dialog.scss index 9171c60..4df7906 100644 --- a/src/assets/styles/components/settings-invite-dialog.scss +++ b/src/assets/styles/components/settings-invite-dialog.scss @@ -1,6 +1,6 @@ @use '../variables' as *; -// ==================== 邀请注册送会员弹窗（重设计版） ==================== +// ==================== 邀请注册送会员弹窗 ==================== .settings-invite-overlay { position: fixed; top: 0; @@ -16,213 +16,219 @@ } .settings-invite-dialog { - position: relative; - width: 4.2rem; - height: 5.0rem; - background: $bg-white; - border-radius: 0.26rem; - box-shadow: 0 0.2rem 0.44rem rgba(0, 0, 0, 0.14); - overflow: hidden; + 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: 0 0 0.16rem rgba(0, 0, 0, 0.05); + border-radius: 0.12rem; - // 顶部渐变区域 + // 顶部：标题行 + 关闭按钮 &__header { - width: 100%; - height: 1.04rem; - background: linear-gradient(90deg, #12C7BE 0%, #06B6D4 100%); - border-radius: 0.26rem; display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; + justify-content: space-between; + align-items: flex-start; + width: 100%; } - // 皇冠图标 - &__crown { - font-size: 0.32rem; - line-height: 0.39rem; - color: $bg-white; - font-weight: 700; + &__header-text { + display: flex; + flex-direction: column; + gap: 0.04rem; + } + + &__title { + font-size: 0.18rem; + font-weight: 520; + line-height: 0.24rem; + color: $text-dark; + margin: 0; + } + + &__subtitle { + font-size: 0.12rem; + font-weight: 330; + line-height: 0.16rem; + color: $text-middle; + margin: 0; } // 关闭按钮 &__close { - position: absolute; - top: 0.24rem; - right: 0.27rem; - font-size: 0.22rem; - line-height: 0.27rem; - color: #8EA0B8; + width: 0.24rem; + height: 0.24rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.14rem; + color: $text-middle; cursor: pointer; transition: color 0.2s; - z-index: 1; + flex-shrink: 0; &:hover { color: $text-dark; } } - // 内容区域 - &__body { - flex: 1; - padding: 0.22rem 0.28rem 0.2rem; - display: flex; - flex-direction: column; - } - - // 标题 - &__title { - font-size: 0.21rem; - font-weight: 700; - color: #132034; - text-align: center; - margin: 0 0 0.05rem 0; - line-height: 0.25rem; - } - - // 副标题 - &__subtitle { - font-size: 0.13rem; - font-weight: 400; - color: #64748B; - text-align: center; - margin: 0 0 0.2rem 0; - line-height: 0.16rem; - } - // 邀请链接区域 &__link-box { + box-sizing: border-box; display: flex; align-items: center; - width: 3.64rem; - height: 0.44rem; - background: #F3FFFD; - border-radius: 0.22rem; - padding: 0 0.06rem 0 0.16rem; - margin: 0 auto 0.2rem; - box-sizing: border-box; + justify-content: space-between; + padding: 0.12rem 0.16rem; + width: 100%; + background: #F4FBFB; + border: 1px solid #AEE6EA; + border-radius: 0.08rem; } &__link-text { - flex: 1; - font-size: 0.11rem; - line-height: 0.13rem; - color: #334155; - white-space: nowrap; + font-size: 0.14rem; + font-weight: 330; + line-height: 0.19rem; + color: $text-dark; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } - // 复制链接按钮 &__copy-btn { - width: 1.0rem; - height: 0.32rem; - border: none; - border-radius: 0.16rem; - background: #0F172A; - color: $bg-white; - font-size: 0.13rem; - font-weight: 600; - line-height: 0.16rem; + font-size: 0.14rem; + font-weight: 450; + line-height: 0.19rem; + color: $accent; cursor: pointer; flex-shrink: 0; + margin-left: 0.08rem; transition: opacity 0.2s; + + &:hover { + opacity: 0.7; + } + } + + // 邀请步骤区域 + &__steps { + display: flex; + flex-direction: column; + gap: 0.16rem; + width: 100%; + } + + &__steps-title { + font-size: 0.14rem; + font-weight: 450; + line-height: 0.19rem; + color: $accent; + } + + &__steps-list { + display: flex; + flex-direction: column; + gap: 0.16rem; + width: 100%; + } + + // 步骤卡片 + &__step-item { + box-sizing: border-box; + display: flex; + align-items: center; + padding: 0.12rem 0.16rem; + gap: 0.10rem; + width: 100%; + background: $bg-white; + border: 1px solid #F0F0F0; + border-radius: 0.08rem; + } + + // 步骤数字圆圈 + &__step-num { + display: flex; + justify-content: center; + align-items: center; + width: 0.20rem; + min-width: 0.20rem; + height: 0.20rem; + background: $bg-main; + border-radius: 0.10rem; + font-size: 0.14rem; + font-weight: 330; + line-height: 0.20rem; text-align: center; + color: $text-middle; + flex-shrink: 0; + } + + // 步骤文字 + &__step-text { + font-size: 0.14rem; + font-weight: 330; + line-height: 0.19rem; + color: $text-dark; + } + + // 底部：统计 + 按钮 + &__footer { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + // 统计信息 + &__stat { + display: flex; + flex-direction: column; + gap: 0.02rem; + } + + &__stat-line { + font-size: 0.14rem; + font-weight: 330; + line-height: 0.19rem; + color: $text-middle; + + em { + font-style: normal; + color: $accent; + font-weight: 450; + } + } + + // 成为正式会员按钮 + &__member-btn { + display: flex; + align-items: center; + padding: 0.08rem 0.12rem; + gap: 0.04rem; + background: $accent; + border-radius: 0.08rem; + border: none; + cursor: pointer; + transition: opacity 0.2s; + + span { + font-size: 0.14rem; + font-weight: 520; + line-height: 0.19rem; + text-align: center; + color: #FFFFFF; + } &:hover { opacity: 0.85; } } - // 步骤卡片 - &__step { - display: flex; - align-items: center; - width: 3.64rem; - height: 0.46rem; - background: #F3FFFD; - border-radius: 0.14rem; - padding: 0 0.14rem; - margin: 0 auto 0.12rem; - box-sizing: border-box; - } - - // 步骤数字圆圈 - &__step-circle { - width: 0.26rem; - height: 0.26rem; - border-radius: 50%; - background: $bg-white; - border: 1px solid #BFEFE8; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.12rem; - font-weight: 700; - color: #12C7BE; - line-height: 0.15rem; - flex-shrink: 0; - box-sizing: border-box; - } - - // 步骤文字 - &__step-text { - margin-left: 0.14rem; - font-size: 0.13rem; - font-weight: 500; - color: #334155; - line-height: 0.16rem; - } - - // 底部统计 + 按钮 - &__footer { - display: flex; - align-items: center; - margin-top: auto; - padding-top: 0.06rem; - } - - // 统计项 - &__stat { - display: flex; - flex-direction: column; - margin-right: 0.2rem; - } - - &__stat-label { - font-size: 0.13rem; - font-weight: 500; - color: #64748B; - line-height: 0.16rem; - } - - &__stat-value { - font-size: 0.13rem; - font-weight: 500; - color: #64748B; - line-height: 0.16rem; - } - - // 成为正式会员按钮 - &__member-btn { - margin-left: auto; - width: 1.1rem; - height: 0.29rem; - background: #F3FFFD; - border: 1px solid #BFEFE8; - border-radius: 0.08rem; - font-size: 0.13rem; - font-weight: 400; - color: #000000; - line-height: 0.16rem; - cursor: pointer; - transition: all 0.2s; - text-align: center; - - &:hover { - background: #e8faf8; - border-color: $accent; - } + &__member-btn-arrow { + font-size: 0.16rem; } } diff --git a/src/assets/styles/components/side-nav.scss b/src/assets/styles/components/side-nav.scss index c9665d8..fa5c7d9 100644 --- a/src/assets/styles/components/side-nav.scss +++ b/src/assets/styles/components/side-nav.scss @@ -142,11 +142,21 @@ .side-nav__dialog-close { cursor: pointer; - color: $text-light; - font-size: 0.16rem; + display: flex; + align-items: center; + justify-content: center; + width: 0.24rem; + height: 0.24rem; + border-radius: 4px; + transition: background 0.2s; &:hover { - color: $text-dark; + background: rgba(0, 0, 0, 0.05); + } + + svg { + width: 0.14rem; + height: 0.14rem; } } @@ -158,75 +168,116 @@ // ==================== 消息通知弹窗（左右分栏） ==================== .side-nav__message-dialog { - background: $bg-white; - border-radius: 0.12rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0.24rem 0.32rem; + gap: 0.24rem; width: 8rem; height: 6rem; max-width: 90vw; max-height: 90vh; - box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15); - display: flex; - flex-direction: column; + background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 12.08%); + border: 1px solid #F0F0F0; + box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05); + border-radius: 0.12rem; } .side-nav__message-dialog-header { display: flex; align-items: center; justify-content: space-between; - padding: 0.16rem 0.2rem; - border-bottom: 1px solid $border-color; - font-size: 0.16rem; - font-weight: 600; - color: $text-dark; + width: 100%; flex-shrink: 0; + + span:first-child { + font-weight: 520; + font-size: 0.18rem; + line-height: 0.24rem; + color: $text-dark; + } } .side-nav__message-dialog-content { display: flex; + flex-direction: row; + align-items: flex-start; + gap: 0.16rem; + width: 100%; flex: 1; overflow: hidden; + background: $bg-white; } // 左侧消息列表 .side-nav__message-list { - width: 2.1rem; - border-right: 1px solid $border-color; + display: flex; + flex-direction: column; + gap: 0.04rem; + width: 2.24rem; + height: 100%; overflow-y: auto; flex-shrink: 0; } .side-nav__message-list-item { display: flex; - align-items: center; - padding: 0.12rem 0.10rem; + flex-direction: column; + align-items: flex-start; + padding: 0.16rem 0.12rem; + border-radius: 0.08rem; cursor: pointer; - border-bottom: 1px solid $border-color; transition: background 0.2s; &:hover { - background: $bg-main; + background: #F6F6F6; } &--active { - background: $theme-color; + background: #EDF9FA; } } -.side-nav__message-list-title { - flex: 1; - font-size: 0.13rem; - color: $text-dark; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +// 列表项内部行布局 +.side-nav__message-list-item-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.side-nav__message-list-item-left { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.08rem; } .side-nav__message-unread-dot { width: 0.08rem; height: 0.08rem; border-radius: 50%; - background: $danger; - margin-left: 0.06rem; + background: $accent; + flex-shrink: 0; +} + +.side-nav__message-list-title { + font-weight: 520; + font-size: 0.14rem; + line-height: 0.19rem; + color: $text-dark; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.side-nav__message-list-date { + font-weight: 330; + font-size: 0.12rem; + line-height: 0.16rem; + color: $text-light; flex-shrink: 0; } @@ -241,21 +292,45 @@ // 右侧消息详情 .side-nav__message-detail { flex: 1; - padding: 0.2rem; + height: 100%; overflow-y: auto; + position: relative; + padding: 0.16rem 0.24rem; +} + +.side-nav__message-detail-header { + display: flex; + justify-content: space-between; + align-items: center; } .side-nav__message-detail-title { - font-size: 0.16rem; - font-weight: 600; + font-weight: 630; + font-size: 0.22rem; + line-height: 0.29rem; color: $text-dark; - margin-bottom: 0.16rem; +} + +.side-nav__message-detail-time { + font-weight: 330; + font-size: 0.12rem; + line-height: 0.16rem; + color: $text-middle; + flex-shrink: 0; +} + +.side-nav__message-detail-divider { + width: 100%; + height: 1px; + background: #F0F0F0; + margin: 0.16rem 0; } .side-nav__message-detail-content { + font-weight: 330; font-size: 0.14rem; + line-height: 0.24rem; color: $text-dark; - line-height: 1.7; white-space: pre-wrap; word-break: break-word; } @@ -380,3 +455,279 @@ } } } + +// ==================== 邀请会员卡片 ==================== +.side-nav__referral-card { + width: 100%; + background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%); + border-radius: 0.08rem; + padding: 0.16rem; + box-sizing: border-box; + margin-top: 0.12rem; +} + +.side-nav__referral-title { + font-size: 0.16rem; + font-weight: 630; + color: #FFFFFF; + line-height: 0.21rem; +} + +.side-nav__referral-subtitle { + font-size: 0.10rem; + font-weight: 330; + color: #EAFBFC; + line-height: 0.13rem; + margin-top: 0.04rem; +} + +.side-nav__referral-panel { + background: #FFFFFF; + box-shadow: 0px 0.02rem 0.06rem rgba(26, 26, 26, 0.05); + border-radius: 0.06rem; + padding: 0.10rem 0.08rem; + margin-top: 0.10rem; +} + +.side-nav__referral-row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.side-nav__referral-label { + font-size: 0.10rem; + font-weight: 330; + color: #6B7280; + line-height: 0.13rem; +} + +.side-nav__referral-value { + font-size: 0.10rem; + font-weight: 520; + color: #52CAD1; + line-height: 0.13rem; +} + +.side-nav__referral-track { + width: 100%; + height: 0.02rem; + background: #D7F1F3; + border-radius: 9999px; + margin-top: 0.06rem; + overflow: hidden; +} + +.side-nav__referral-fill { + height: 100%; + background: #52CAD1; + border-radius: 9999px; +} + +.side-nav__referral-divider { + width: 100%; + border-top: 0.01rem solid #8C8C8C; + margin-top: 0.08rem; +} + +.side-nav__referral-tip { + font-size: 0.10rem; + font-weight: 330; + color: #1A1A1A; + line-height: 0.13rem; + margin-top: 0.08rem; + + strong { + font-weight: 630; + } +} + +.side-nav__referral-action { + font-size: 0.11rem; + font-weight: 520; + color: #52CAD1; + line-height: 0.15rem; + text-align: center; + margin-top: 0.08rem; + cursor: pointer; + + &:hover { + opacity: 0.8; + } +} + +// ==================== 用户信息模块 ==================== +.side-nav__user-info { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background: #F3F4F6; + border-radius: 0.08rem; + padding: 0.12rem 0.16rem; + box-sizing: border-box; + margin-top: 0.12rem; +} + +.side-nav__user-left { + display: flex; + flex-direction: column; + gap: 0.04rem; +} + +.side-nav__user-phone { + font-size: 0.14rem; + font-weight: 330; + color: #1A1A1A; + line-height: 0.19rem; +} + +.side-nav__user-member-tag { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.02rem 0.04rem; + border-radius: 0.04rem; + font-size: 0.10rem; + font-weight: 520; + line-height: 0.13rem; + width: fit-content; + + // 正式会员：主题色字 + 浅绿底 + &--formal { + color: #52CAD1; + background: #EDF9FA; + } + + // 试用会员：橙色字 + 浅橙底 + &--trial { + color: #F59E0B; + background: #FFFBF5; + } + + // 免费用户：中灰字 + 灰底 + &--free { + color: #6A7282; + background: #F3F4F6; + } +} + +.side-nav__user-bell { + width: 0.20rem; + height: 0.20rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + + svg { + width: 100%; + height: 100%; + } + + &:hover { + opacity: 0.7; + } +} + +// 铃铛右上角未读红点 +.side-nav__user-bell-dot { + position: absolute; + top: -0.005rem; + right: 0.01rem; + width: 0.08rem; + height: 0.08rem; + background: #EF4444; + border-radius: 50%; +} + +// ==================== 账户弹窗 ==================== +.side-nav__user-info-wrapper { + position: relative; + margin-top: 0.12rem; +} + +.side-nav__account-popup { + position: absolute; + bottom: calc(100% + 0.08rem); + left: 0; + width: 100%; + background: #FFFFFF; + border: 1px solid #F0F0F0; + box-shadow: 0px 0.02rem 0.08rem rgba(0, 0, 0, 0.04); + border-radius: 0.08rem; + overflow: hidden; + z-index: 100; +} + +.side-nav__account-popup-header { + padding: 0.16rem; + background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%); + border-radius: 0.08rem 0.08rem 0 0; +} + +.side-nav__account-popup-header-row { + display: flex; + align-items: center; + justify-content: space-between; +} + +.side-nav__account-popup-header-left { + display: flex; + flex-direction: column; + gap: 0.04rem; +} + +.side-nav__account-popup-member-type { + font-size: 0.14rem; + font-weight: 450; + line-height: 0.19rem; + + // 正式会员 — 主题色 + &--formal { + color: $accent; + } + + // 试用会员 — 橙色 + &--trial { + color: #F59E0B; + } + + // 免费用户 — 中灰色 + &--free { + color: $text-middle; + } +} + +.side-nav__account-popup-expire { + font-size: 0.12rem; + font-weight: 330; + color: $text-light; + line-height: 0.16rem; +} + +.side-nav__account-popup-detail { + font-size: 0.12rem; + font-weight: 330; + color: $text-light; + line-height: 0.16rem; + cursor: pointer; + + &:hover { + color: $accent; + } +} + +.side-nav__account-popup-item { + padding: 0.12rem 0.16rem; + font-size: 0.12rem; + font-weight: 330; + color: #000000; + line-height: 0.16rem; + cursor: pointer; + + &:hover { + background: $bg-main; + } +} diff --git a/src/assets/styles/pages/job-detail.scss b/src/assets/styles/pages/job-detail.scss index 7316687..720c4cc 100644 --- a/src/assets/styles/pages/job-detail.scss +++ b/src/assets/styles/pages/job-detail.scss @@ -187,10 +187,28 @@ &__match-card { flex-shrink: 0; width: 2.06rem; - background: #FBFDF7; - border: 1px solid #9FD051; border-radius: 0.08rem; padding: 0.16rem 0.24rem; + border: 1px solid #9FD051; + background: #FBFDF7; + } + + // 高匹配度 + &__match-card--high { + background: #FBFDF7; + border-color: #9FD051; + } + + // 中匹配度 + &__match-card--medium { + background: #FFFBF5; + border-color: #F59E0B; + } + + // 低匹配度 + &__match-card--low { + background: #FFF6F5; + border-color: #FE6D52; } &__match-top { @@ -214,6 +232,24 @@ color: #9FD051; } + // 高匹配度文字色 + &__match-card--high &__match-score, + &__match-card--high &__match-label { + color: #9FD051; + } + + // 中匹配度文字色 + &__match-card--medium &__match-score, + &__match-card--medium &__match-label { + color: #F59E0B; + } + + // 低匹配度文字色 + &__match-card--low &__match-score, + &__match-card--low &__match-label { + color: #FE6D52; + } + &__match-list { display: flex; flex-direction: column; @@ -392,3 +428,8 @@ margin: 0; } } + +// ---- 骨架屏区域 ---- +.job-detail__skeleton { + padding: 0.32rem; +} diff --git a/src/assets/styles/pages/jobs.scss b/src/assets/styles/pages/jobs.scss index ab8ac82..fec073e 100644 --- a/src/assets/styles/pages/jobs.scss +++ b/src/assets/styles/pages/jobs.scss @@ -15,8 +15,6 @@ overflow: hidden; background: $bg-main; font-size: 0.14rem; - display: flex; - flex-direction: column; } // 页面标题 @@ -156,9 +154,6 @@ font-size: 0.12rem; line-height: 0.16rem; color: $accent; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; vertical-align: text-top; margin-left: 0.03rem; } @@ -278,11 +273,11 @@ } } - // 职位列表 + // 职位列表（用 calc 减去上方头部+筛选栏大致高度，保证列表独立滚动） &__list { gap: 0; - flex: 1; overflow-y: auto; + height: calc(var(--app-height, 100vh) - 1.8rem); padding-bottom: 0.2rem; margin: 0 0.24rem; @@ -307,7 +302,7 @@ &:hover { box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.06); - background: #fbfbfb; + //background: #fbfbfb; } &--selected { @@ -581,7 +576,7 @@ } } - // 不再显示 + // 不再显示（默认隐藏，hover 卡片时显示） &__hide-btn { display: block; margin-top: auto; @@ -589,15 +584,21 @@ font-weight: 330; color: #8C8C8C; cursor: pointer; - transition: color 0.2s; + transition: color 0.2s, opacity 0.2s; line-height: 0.19rem; white-space: nowrap; + opacity: 0; &:hover { color: $text-dark; } } + // hover 卡片时显示"不再显示"按钮 + &__job-card:hover &__hide-btn { + opacity: 1; + } + // 弹出菜单 &__job-popup { position: absolute; diff --git a/src/components/MemberDialog.vue b/src/components/MemberDialog.vue index 8d6436b..31f385a 100644 --- a/src/components/MemberDialog.vue +++ b/src/components/MemberDialog.vue @@ -5,362 +5,179 @@
- - ✕ - -
-

Offer 派 - AI 智能求职引擎

-

全自动海投、简历精修、模拟面试，助你轻松拿高薪。

- + +
+
+

会员中心

+

解锁更多求职功能，让投递更高效

+
+
+ + + 联系客服 +
+ 客服二维码 +
+
+ + ✕ +
- -
-
⚡ 求职加速会员
-

offer派，收 offer 就是快！

-

每天不到 1 元，少投无效岗位，把时间花在更可能拿面试的机会。

+ +
+
+ +
+ + + + + + + + + + 推荐
+ +
{{ plan.name }}
+ +
+ ¥ + {{ plan.priceInt }} + ¥{{ plan.originalPrice }} +
+ +
{{ plan.dailyDesc }}
+
+
- -
+ +
+

会员权益

+
+
+
+ + + + +
+
+ AI优化简历 + 享受无限次数 +
+
+
+
+ + + + +
+
+ AI+投递助手 + 会员专享 +
+
+
+
+ + +
+ 选择支付方式 +
-
★ 推荐：覆盖求职周期，性价比最高
-
{{ plan.tag }}
-
{{ plan.name }}
-
- ¥ - {{ plan.price }} - /{{ plan.unit }} -
-
折合仅 ¥{{ plan.perMonth }}/月
- + + + + + 微信支付
-
- - -
- ⏰ - 时间就是机会： - 热门岗位通常在发布后 24-48 小时内收到大量申请。使用 AI 加速工具，越早投递越容易被 HR 看到! -
- - -
-
-

求职加速能力

-
- {{ ability.icon }} - {{ ability.text }} -
-
-
-

会员能力对比

- - - - - - - - - - - - - - - -
核心能力免费版⚡ 会员版
{{ row.name }}{{ row.free }}✓ {{ row.pro }}
-
- 🔒 支付安全保障 - ⏰ 支持随时取消 -
-
-
- - -
-
- 用户头像 -
-
-
★★★★★
-

"开通后我主要用 AI 简历优化和岗位匹配，投递效率明显提升，每次网申节省了十几分钟，终于知道该重点投哪些岗位了。"

-
- 张同学 - · 成功入职某大厂运营 -
+
+ + + 支 + + 支付宝支付
- -
- -
- ‹ 返回会员介绍 - -
-
- {{ showQrCode ? '✓' : '1' }} - 选择套餐 -
-
-
- 2 - 支付方式 -
-
-
- 3 - 完成 -
-
+ + + +
+
+ + +
+
+ + +
+
+

扫码支付

- - -
- -
-

开启你的 AI 求职加速计划

-

解锁简历优化、岗位匹配、投递追踪、面试准备等能力，让你的求职过程更高效、更有方向。

- - -
-
-
★ 推荐
- -
-
-
{{ plan.name }}
- -
-
-
-
-
- ¥ - {{ plan.price }} - /{{ plan.unit }} -
-
{{ plan.orderDesc }}
-
- -
-
- - -
-

支付方式

-
-
- {{ method.icon }} - {{ method.name }} -
-
- -
- 点击右侧"立即开启求职加速"后，将弹出二维码完成支付。 -
-
支付信息将通过安全通道加密处理，请放心支付。
-
- - -
- 🔒 安全支付 - ⚡ 立即解锁 - ⏰ 支持取消续费 - 🎧 客服支持 -
- - -
-

常见问题

-
-
- {{ faq.question }} - › -
-
{{ faq.answer }}
-
-
-
- - -
-
-

订单摘要

- -
-
-
{{ currentPlan.name }}
-
{{ currentPlan.unit }}
-
- ¥{{ currentPlan.price }} -
- -
- -
- 今日支付 - ¥{{ currentPlan.price }} -
- -
- - 我已阅读并同意 《会员服务协议》 -
- - -
支付成功后立即解锁全部权益，可随时取消续费。
- - -
-

你将获得

-
- ✓ - {{ item }} -
-
-
-
+
+ ✕
- -
-
- -
-
- ✓ - 选择套餐 -
-
-
- 2 - 支付方式 -
-
-
- 3 - 完成 -
-
+ +
+ +
+
- -
-
- - -

正在确认支付结果

-

请稍候，请勿关闭此页面。

-
+ +
+
+ + +
+ ¥{{ currentPlan.priceInt }} + 扫码完成支付 +
+ + +

+ 开通即代表同意 《会员服务协议》 +

- -
-
- -
-
- ✓ - 选择套餐 -
-
-
- ✓ - 支付方式 -
-
-
- 3 - 完成 -
-
-
- -
-
- -
✓
-

支付成功，求职加速已开启

-

你已成功解锁 AI 求职加速权益，现在可以开始优化简历、匹配岗位并准备面试。

- - -
-
-
- - -
-
- - ✕ - -
- {{ selectedPayment === 'wechat' ? '💬' : '🔷' }} - {{ selectedPayment === 'wechat' ? '微信支付' : '支付宝' }} -
- -

{{ selectedPayment === 'alipay' ? '扫码完成支付' : '扫码完成支付' }}

-

{{ selectedPayment === 'alipay' ? '请在支付宝页面完成支付，完成后点击下方按钮确认。' : '请使用微信 App 扫描二维码完成支付，完成后此窗口会自动关闭。' }}

- -
- -
- -
- -
- -
¥{{ currentPlan.price }}
-
-
+ +
@@ -370,9 +187,9 @@