简历详情样式微调
This commit is contained in:
@@ -700,6 +700,11 @@ body:not(#_) {
|
||||
background: $bg-white;
|
||||
}
|
||||
|
||||
.bg-linear-1{
|
||||
background: linear-gradient(to right, #52CAD1, #9FD051)
|
||||
}
|
||||
|
||||
|
||||
/*文字超出隐藏*/
|
||||
.text-over-h{
|
||||
white-space: nowrap; /* 保持文本在一行内显示 */
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
line-height: 1.5;
|
||||
background: #F7F7F7;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.1rem;
|
||||
padding: 0.16rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
// 表单内容区
|
||||
@@ -305,7 +305,7 @@
|
||||
|
||||
// AI润色结果区域
|
||||
&__ai-result {
|
||||
margin-top: 0.16rem;
|
||||
margin-top: 0.04rem;
|
||||
}
|
||||
|
||||
&__ai-result-label {
|
||||
@@ -317,7 +317,7 @@
|
||||
|
||||
&__ai-result-card {
|
||||
padding: 0.1rem 0.12rem;
|
||||
background: linear-gradient(to bottom,#F5FFFD,#ffffff);
|
||||
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
|
||||
@@ -438,13 +438,13 @@
|
||||
}
|
||||
|
||||
&__save-btn {
|
||||
padding: 0.06rem 0.2rem;
|
||||
padding: 0.06rem 0.24rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
color: $bg-white;
|
||||
background: $btn-dark;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: 0.08rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
@@ -454,13 +454,13 @@
|
||||
}
|
||||
|
||||
&__cancel-btn {
|
||||
padding: 0.06rem 0.2rem;
|
||||
padding: 0.06rem 0.24rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: 600;
|
||||
color: $accent;
|
||||
background: transparent;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: 0.08rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
@@ -112,16 +112,14 @@
|
||||
|
||||
// ---- 卡片容器 ----
|
||||
&__card {
|
||||
background: transparent;
|
||||
background: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.16rem;
|
||||
border: 1px solid $border-color;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&--ai {
|
||||
border: 1px solid rgba($accent, 0.3);
|
||||
}
|
||||
|
||||
/* 顶部渐变背景层，不遮挡内容 */
|
||||
&::before {
|
||||
@@ -132,9 +130,12 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.1rem;
|
||||
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.8rem);
|
||||
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.5rem);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 让卡片内所有内容在渐变之上 */
|
||||
> * {
|
||||
|
||||
@@ -692,6 +692,19 @@
|
||||
padding: 0.16rem;
|
||||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%);
|
||||
border-radius: 0.08rem 0.08rem 0 0;
|
||||
|
||||
/* 正式会员背景 */
|
||||
&--formal {
|
||||
background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 38.18%);
|
||||
}
|
||||
/* 试用会员背景 */
|
||||
&--trial {
|
||||
background: linear-gradient(180deg, #FEF5E7 0%, #FFFFFF 38.18%);
|
||||
}
|
||||
/* 免费用户背景 */
|
||||
&--free {
|
||||
background: linear-gradient(180deg, #F1F2F4 0%, #FFFFFF 38.18%);
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav__account-popup-header-row {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<!-- 个人资料编辑组件 — 内联模式（直接嵌入页面），通过 modelValue 控制显示/隐藏 -->
|
||||
<div v-if="modelValue" class="profile-edit-inline">
|
||||
<!-- 表单内容区 — 根据模块名动态渲染不同字段 -->
|
||||
<div class="profile-edit-inline__body">
|
||||
<div class="profile-edit-inline__body pb0">
|
||||
<!-- ========== 基本信息模块 ========== -->
|
||||
<template v-if="module === 'info'">
|
||||
<!-- 基本信息字段横排布局 -->
|
||||
@@ -204,9 +204,20 @@
|
||||
<!-- 标题 + AI润色按钮 -->
|
||||
<div class="profile-edit-inline__summary-header">
|
||||
<label class="profile-edit-inline__label">编辑个人概述</label>
|
||||
<button class="profile-edit-inline__ai-polish-btn" @click="handleAiPolish" :disabled="aiPolishing">
|
||||
<span><span>✦</span> AI润色</span>
|
||||
</button>
|
||||
<!-- AI润色按钮 -->
|
||||
<div class="dib dflex-center w66 h24 lh24 border-ra4 color-f aliite-c bg-linear-1 cursor-po mb4" @click="handleAiPolish" :disabled="aiPolishing">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_589_1500)">
|
||||
<path d="M4.55306 2.724C4.85206 1.849 6.06106 1.8225 6.41556 2.6445L6.44556 2.7245L6.84906 3.9045C6.94154 4.17512 7.09097 4.42276 7.28728 4.63071C7.48359 4.83867 7.72222 5.00211 7.98706 5.11L8.09556 5.1505L9.27556 5.5535C10.1506 5.8525 10.1771 7.0615 9.35556 7.416L9.27556 7.446L8.09556 7.8495C7.82485 7.94191 7.57712 8.09131 7.36907 8.28763C7.16103 8.48394 6.99751 8.7226 6.88956 8.9875L6.84906 9.0955L6.44606 10.276C6.14706 11.151 4.93806 11.1775 4.58406 10.356L4.55306 10.276L4.15006 9.096C4.05765 8.82529 3.90825 8.57755 3.71193 8.36951C3.51562 8.16146 3.27696 7.99795 3.01206 7.89L2.90406 7.8495L1.72406 7.4465C0.848564 7.1475 0.822064 5.9385 1.64406 5.5845L1.72406 5.5535L2.90406 5.1505C3.17468 5.05803 3.42232 4.9086 3.63028 4.71229C3.83823 4.51597 4.00167 4.27735 4.10956 4.0125L4.15006 3.9045L4.55306 2.724ZM5.49956 3.047L5.09656 4.227C4.95576 4.63965 4.7267 5.01665 4.42533 5.33175C4.12397 5.64684 3.75754 5.89246 3.35156 6.0515L3.22656 6.097L2.04656 6.5L3.22656 6.903C3.63922 7.0438 4.01622 7.27287 4.33131 7.57423C4.64641 7.8756 4.89203 8.24203 5.05106 8.648L5.09656 8.773L5.49956 9.953L5.90256 8.773C6.04337 8.36035 6.27243 7.98335 6.5738 7.66825C6.87516 7.35316 7.24159 7.10754 7.64756 6.9485L7.77256 6.9035L8.95256 6.5L7.77256 6.097C7.35991 5.9562 6.98291 5.72713 6.66782 5.42577C6.35272 5.1244 6.1071 4.75797 5.94806 4.352L5.90306 4.227L5.49956 3.047ZM9.49956 1C9.5931 1 9.68477 1.02624 9.76414 1.07574C9.84351 1.12523 9.90741 1.196 9.94856 1.28L9.97256 1.3385L10.1476 1.8515L10.6611 2.0265C10.7548 2.05835 10.837 2.11731 10.8972 2.19591C10.9574 2.27451 10.9929 2.36921 10.9992 2.46801C11.0055 2.56681 10.9824 2.66527 10.9327 2.75089C10.883 2.83652 10.809 2.90547 10.7201 2.949L10.6611 2.973L10.1481 3.148L9.97306 3.6615C9.94116 3.75521 9.88216 3.83735 9.80353 3.8975C9.7249 3.95764 9.63018 3.9931 9.53138 3.99936C9.43259 4.00563 9.33415 3.98242 9.24856 3.93269C9.16296 3.88296 9.09405 3.80893 9.05056 3.72L9.02656 3.6615L8.85156 3.1485L8.33806 2.9735C8.24432 2.94165 8.16215 2.88269 8.10195 2.80409C8.04175 2.72549 8.00624 2.63079 7.99993 2.53199C7.99361 2.43319 8.01676 2.33473 8.06645 2.24911C8.11615 2.16348 8.19014 2.09453 8.27906 2.051L8.33806 2.027L8.85106 1.852L9.02606 1.3385C9.05978 1.23971 9.12357 1.15395 9.20848 1.09325C9.2934 1.03254 9.39518 0.999937 9.49956 1Z" fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_589_1500">
|
||||
<rect width="12" height="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span class="ml2 fs12 fw600">AI润色</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-edit-inline__field">
|
||||
<textarea class="profile-edit-inline__textarea" placeholder="请输入个人概述" v-model="summaryText" rows="6"></textarea>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 单条经历内联编辑组件 -->
|
||||
<div class="profile-edit-inline">
|
||||
<div class="profile-edit-inline__body">
|
||||
<div class="profile-edit-inline__body pb0">
|
||||
<!-- 教育经历 -->
|
||||
<template v-if="moduleType === 'education'">
|
||||
<div class="profile-edit-inline__fields-row">
|
||||
@@ -76,33 +76,43 @@
|
||||
<!-- 经历描述 + AI润色 -->
|
||||
<div class="profile-edit-inline__summary-header">
|
||||
<label class="profile-edit-inline__label">经历描述</label>
|
||||
<button class="profile-edit-inline__ai-polish-btn" @click="handleAiPolish" :disabled="aiPolishing">
|
||||
<span>✦ AI润色</span>
|
||||
</button>
|
||||
<div class="dib dflex-center w66 h24 lh24 border-ra4 color-f aliite-c bg-linear-1 cursor-po mb4" @click="handleAiPolish" :disabled="aiPolishing">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_589_1500)">
|
||||
<path d="M4.55306 2.724C4.85206 1.849 6.06106 1.8225 6.41556 2.6445L6.44556 2.7245L6.84906 3.9045C6.94154 4.17512 7.09097 4.42276 7.28728 4.63071C7.48359 4.83867 7.72222 5.00211 7.98706 5.11L8.09556 5.1505L9.27556 5.5535C10.1506 5.8525 10.1771 7.0615 9.35556 7.416L9.27556 7.446L8.09556 7.8495C7.82485 7.94191 7.57712 8.09131 7.36907 8.28763C7.16103 8.48394 6.99751 8.7226 6.88956 8.9875L6.84906 9.0955L6.44606 10.276C6.14706 11.151 4.93806 11.1775 4.58406 10.356L4.55306 10.276L4.15006 9.096C4.05765 8.82529 3.90825 8.57755 3.71193 8.36951C3.51562 8.16146 3.27696 7.99795 3.01206 7.89L2.90406 7.8495L1.72406 7.4465C0.848564 7.1475 0.822064 5.9385 1.64406 5.5845L1.72406 5.5535L2.90406 5.1505C3.17468 5.05803 3.42232 4.9086 3.63028 4.71229C3.83823 4.51597 4.00167 4.27735 4.10956 4.0125L4.15006 3.9045L4.55306 2.724ZM5.49956 3.047L5.09656 4.227C4.95576 4.63965 4.7267 5.01665 4.42533 5.33175C4.12397 5.64684 3.75754 5.89246 3.35156 6.0515L3.22656 6.097L2.04656 6.5L3.22656 6.903C3.63922 7.0438 4.01622 7.27287 4.33131 7.57423C4.64641 7.8756 4.89203 8.24203 5.05106 8.648L5.09656 8.773L5.49956 9.953L5.90256 8.773C6.04337 8.36035 6.27243 7.98335 6.5738 7.66825C6.87516 7.35316 7.24159 7.10754 7.64756 6.9485L7.77256 6.9035L8.95256 6.5L7.77256 6.097C7.35991 5.9562 6.98291 5.72713 6.66782 5.42577C6.35272 5.1244 6.1071 4.75797 5.94806 4.352L5.90306 4.227L5.49956 3.047ZM9.49956 1C9.5931 1 9.68477 1.02624 9.76414 1.07574C9.84351 1.12523 9.90741 1.196 9.94856 1.28L9.97256 1.3385L10.1476 1.8515L10.6611 2.0265C10.7548 2.05835 10.837 2.11731 10.8972 2.19591C10.9574 2.27451 10.9929 2.36921 10.9992 2.46801C11.0055 2.56681 10.9824 2.66527 10.9327 2.75089C10.883 2.83652 10.809 2.90547 10.7201 2.949L10.6611 2.973L10.1481 3.148L9.97306 3.6615C9.94116 3.75521 9.88216 3.83735 9.80353 3.8975C9.7249 3.95764 9.63018 3.9931 9.53138 3.99936C9.43259 4.00563 9.33415 3.98242 9.24856 3.93269C9.16296 3.88296 9.09405 3.80893 9.05056 3.72L9.02656 3.6615L8.85156 3.1485L8.33806 2.9735C8.24432 2.94165 8.16215 2.88269 8.10195 2.80409C8.04175 2.72549 8.00624 2.63079 7.99993 2.53199C7.99361 2.43319 8.01676 2.33473 8.06645 2.24911C8.11615 2.16348 8.19014 2.09453 8.27906 2.051L8.33806 2.027L8.85106 1.852L9.02606 1.3385C9.05978 1.23971 9.12357 1.15395 9.20848 1.09325C9.2934 1.03254 9.39518 0.999937 9.49956 1Z" fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_589_1500">
|
||||
<rect width="12" height="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span class="ml2 fs12 fw600">AI润色</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-edit-inline__field">
|
||||
<textarea class="profile-edit-inline__textarea" placeholder="请输入经历描述" v-model="descriptionText" rows="4"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="profile-edit-inline__footer">
|
||||
<button class="profile-edit-inline__save-btn" @click.stop="handleSave">保存</button>
|
||||
<button class="profile-edit-inline__cancel-btn" @click.stop="handleCancel">取消</button>
|
||||
</div>
|
||||
|
||||
<!-- AI润色结果（保存取消下方） -->
|
||||
<div v-if="aiPolishResult" class="profile-edit-inline__ai-result">
|
||||
<p class="profile-edit-inline__ai-result-label">✦ AI润色结果</p>
|
||||
|
||||
<div class="profile-edit-inline__ai-result-card">
|
||||
<p class="profile-edit-inline__ai-result-label">✦ AI润色结果</p>
|
||||
<p class="profile-edit-inline__ai-result-text">{{ aiPolishResult }}</p>
|
||||
</div>
|
||||
<div class="profile-edit-inline__ai-result-actions">
|
||||
<button class="profile-edit-inline__ai-replace-btn" @click="handleReplaceWithAi">+ 替换为此内容</button>
|
||||
<button class="profile-edit-inline__ai-regenerate-btn" @click="handleAiPolish" :disabled="aiPolishing">↻ 重新生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="profile-edit-inline__footer mt16">
|
||||
<button class="profile-edit-inline__save-btn" @click.stop="handleSave">保存</button>
|
||||
<button class="profile-edit-inline__cancel-btn" @click.stop="handleCancel">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 全屏加载遮罩 -->
|
||||
<FullscreenLoading :visible="fullLoading" :text="fullLoadingText" title="Nova 正在帮您努力处理~" />
|
||||
</template>
|
||||
|
||||
@@ -44,7 +44,24 @@
|
||||
class="fix-all-drawer__record"
|
||||
>
|
||||
<!-- 经历标识（经历类模块显示标题，summary不显示） -->
|
||||
<p v-if="record.recordLabel" class="fix-all-drawer__record-label">{{ record.recordLabel }}</p>
|
||||
<div v-if="record.recordLabel" class="fix-all-drawer__record-label dflex-start">
|
||||
<span class="mr10">{{ record.recordLabel }}</span>
|
||||
<!-- AI润色按钮 -->
|
||||
<div class="dib dflex-center w66 h24 lh24 border-ra4 color-f aliite-c bg-linear-1 cursor-po" @click="handleAiPolishRecord(record)">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_589_1500)">
|
||||
<path d="M4.55306 2.724C4.85206 1.849 6.06106 1.8225 6.41556 2.6445L6.44556 2.7245L6.84906 3.9045C6.94154 4.17512 7.09097 4.42276 7.28728 4.63071C7.48359 4.83867 7.72222 5.00211 7.98706 5.11L8.09556 5.1505L9.27556 5.5535C10.1506 5.8525 10.1771 7.0615 9.35556 7.416L9.27556 7.446L8.09556 7.8495C7.82485 7.94191 7.57712 8.09131 7.36907 8.28763C7.16103 8.48394 6.99751 8.7226 6.88956 8.9875L6.84906 9.0955L6.44606 10.276C6.14706 11.151 4.93806 11.1775 4.58406 10.356L4.55306 10.276L4.15006 9.096C4.05765 8.82529 3.90825 8.57755 3.71193 8.36951C3.51562 8.16146 3.27696 7.99795 3.01206 7.89L2.90406 7.8495L1.72406 7.4465C0.848564 7.1475 0.822064 5.9385 1.64406 5.5845L1.72406 5.5535L2.90406 5.1505C3.17468 5.05803 3.42232 4.9086 3.63028 4.71229C3.83823 4.51597 4.00167 4.27735 4.10956 4.0125L4.15006 3.9045L4.55306 2.724ZM5.49956 3.047L5.09656 4.227C4.95576 4.63965 4.7267 5.01665 4.42533 5.33175C4.12397 5.64684 3.75754 5.89246 3.35156 6.0515L3.22656 6.097L2.04656 6.5L3.22656 6.903C3.63922 7.0438 4.01622 7.27287 4.33131 7.57423C4.64641 7.8756 4.89203 8.24203 5.05106 8.648L5.09656 8.773L5.49956 9.953L5.90256 8.773C6.04337 8.36035 6.27243 7.98335 6.5738 7.66825C6.87516 7.35316 7.24159 7.10754 7.64756 6.9485L7.77256 6.9035L8.95256 6.5L7.77256 6.097C7.35991 5.9562 6.98291 5.72713 6.66782 5.42577C6.35272 5.1244 6.1071 4.75797 5.94806 4.352L5.90306 4.227L5.49956 3.047ZM9.49956 1C9.5931 1 9.68477 1.02624 9.76414 1.07574C9.84351 1.12523 9.90741 1.196 9.94856 1.28L9.97256 1.3385L10.1476 1.8515L10.6611 2.0265C10.7548 2.05835 10.837 2.11731 10.8972 2.19591C10.9574 2.27451 10.9929 2.36921 10.9992 2.46801C11.0055 2.56681 10.9824 2.66527 10.9327 2.75089C10.883 2.83652 10.809 2.90547 10.7201 2.949L10.6611 2.973L10.1481 3.148L9.97306 3.6615C9.94116 3.75521 9.88216 3.83735 9.80353 3.8975C9.7249 3.95764 9.63018 3.9931 9.53138 3.99936C9.43259 4.00563 9.33415 3.98242 9.24856 3.93269C9.16296 3.88296 9.09405 3.80893 9.05056 3.72L9.02656 3.6615L8.85156 3.1485L8.33806 2.9735C8.24432 2.94165 8.16215 2.88269 8.10195 2.80409C8.04175 2.72549 8.00624 2.63079 7.99993 2.53199C7.99361 2.43319 8.01676 2.33473 8.06645 2.24911C8.11615 2.16348 8.19014 2.09453 8.27906 2.051L8.33806 2.027L8.85106 1.852L9.02606 1.3385C9.05978 1.23971 9.12357 1.15395 9.20848 1.09325C9.2934 1.03254 9.39518 0.999937 9.49956 1Z" fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_589_1500">
|
||||
<rect width="12" height="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span class="ml2 fw600">AI润色</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 原文编辑区 -->
|
||||
<div class="fix-all-drawer__card">
|
||||
@@ -385,6 +402,39 @@ async function handleRegenerate(record: RecordState) {
|
||||
}
|
||||
}
|
||||
|
||||
/** AI润色按钮 — 调用润色接口，将结果直接替换到 polishText */
|
||||
async function handleAiPolishRecord(record: RecordState) {
|
||||
// 收集当前原文编辑框内容作为输入
|
||||
let content: string[]
|
||||
if (record.moduleType === 'summary') {
|
||||
content = [record.editText.trim()]
|
||||
} else {
|
||||
content = record.editText.split('\n').filter(line => line.trim() !== '')
|
||||
}
|
||||
|
||||
if (!content.length) {
|
||||
ElMessage.warning('原文内容为空，无法润色')
|
||||
return
|
||||
}
|
||||
|
||||
fullLoadingText.value = 'AI 正在润色中…'
|
||||
fullLoading.value = true
|
||||
|
||||
try {
|
||||
const res = await polishDiagnosisIssue(content)
|
||||
if (res.code === 0 && res.data?.content) {
|
||||
record.polishText = res.data.content.join('\n')
|
||||
ElMessage.success('AI润色完成')
|
||||
} else {
|
||||
ElMessage.error(res.msg || '润色失败，请稍后重试')
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error('请求失败，请稍后重试')
|
||||
} finally {
|
||||
fullLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 一键使用AI润色结果 — 所有模块强制使用 AI 润色结果更新 */
|
||||
function handleUseAllAi() {
|
||||
const items: FixAllSubmitItem[] = []
|
||||
|
||||
@@ -64,8 +64,8 @@
|
||||
<div class="side-nav__user-info-wrapper" v-if="store.state.isAuthenticated && store.state.userInfo">
|
||||
<!-- 账户弹窗 -->
|
||||
<div v-if="showAccountPopup" class="side-nav__account-popup">
|
||||
<!-- 顶部渐变区域：会员信息 -->
|
||||
<div class="side-nav__account-popup-header">
|
||||
<!-- 顶部渐变区域：会员信息，根据会员类型显示不同渐变背景 -->
|
||||
<div class="side-nav__account-popup-header" :class="accountHeaderBgClass">
|
||||
<div class="side-nav__account-popup-header-row">
|
||||
<div class="side-nav__account-popup-header-left">
|
||||
<div class="side-nav__account-popup-member-type" :class="accountMemberColorClass">{{ memberTagText }}</div>
|
||||
@@ -660,6 +660,18 @@ const accountMemberColorClass = computed(() => {
|
||||
return 'side-nav__account-popup-member-type--free'
|
||||
})
|
||||
|
||||
/**
|
||||
* 账户弹窗顶部渐变背景 class
|
||||
* 正式会员：#EDF9FA → #FFF；试用会员：#FEF5E7 → #FFF；免费用户：#F1F2F4 → #FFF
|
||||
*/
|
||||
const accountHeaderBgClass = computed(() => {
|
||||
const status = store.state.memberStatus
|
||||
if (!status || !status.isMember) return 'side-nav__account-popup-header--free'
|
||||
if (status.memberType === 1) return 'side-nav__account-popup-header--formal'
|
||||
if (status.memberType === 2) return 'side-nav__account-popup-header--trial'
|
||||
return 'side-nav__account-popup-header--free'
|
||||
})
|
||||
|
||||
/**
|
||||
* 会员到期时间显示文字 — 使用项目时间工具 timestampToLocalDateTime
|
||||
*/
|
||||
@@ -673,9 +685,18 @@ const memberExpireText = computed(() => {
|
||||
})
|
||||
|
||||
/** 账户弹窗 — 点击"详情>"跳转会员页 */
|
||||
/** 账户弹窗 — 点击"详情>"：正式会员打开设置弹窗并切换到会员tab，试用/免费用户打开会员购买弹窗 */
|
||||
function handleAccountDetail() {
|
||||
showAccountPopup.value = false
|
||||
const status = store.state.memberStatus
|
||||
if (status && status.isMember && status.memberType === 1) {
|
||||
// 正式会员：打开设置弹窗，切换到会员页
|
||||
store.state.settingsTab = 'member'
|
||||
showSettingsDialog.value = true
|
||||
} else {
|
||||
// 试用会员 / 免费用户：打开会员购买弹窗
|
||||
showMemberDialog.value = true
|
||||
}
|
||||
}
|
||||
|
||||
/** 账户弹窗 — 点击"设置"打开设置弹窗 */
|
||||
|
||||
Reference in New Issue
Block a user