一键修复样式微调

This commit is contained in:
2026-07-08 23:20:22 +08:00
parent f0b29d9abb
commit ed959e6e6d
2 changed files with 89 additions and 17 deletions
@@ -27,7 +27,7 @@
right: 0;
width: 8rem;
height: var(--app-height, 100vh);
background: $bg-main;
background: #fff;
z-index: 2001;
display: flex;
flex-direction: column;
@@ -85,7 +85,7 @@
// ---- 模块标题 ----
&__module-title {
font-size: 0.16rem;
font-size: 0.18rem;
font-weight: 700;
color: $text-dark;
margin: 0.24rem 0 0.12rem 0;
@@ -98,6 +98,9 @@
// ---- 单条经历记录 ----
&__record {
margin-bottom: 0.2rem;
background: $bg-main;
padding: 0.16rem;
border-radius: 0.12rem;
}
&__record-label {
@@ -109,14 +112,34 @@
// ---- 卡片容器 ----
&__card {
background: $bg-white;
background: transparent;
border-radius: 0.1rem;
padding: 0.16rem;
border: 1px solid $border-color;
position: relative;
overflow: hidden;
&--ai {
border: 1px solid rgba($accent, 0.3);
background: rgba($accent, 0.03);
}
/* 顶部渐变背景层,不遮挡内容 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.1rem;
background: linear-gradient(to bottom, #EDF9FA 0, #fff 0.8rem);
z-index: 0;
}
/* 让卡片内所有内容在渐变之上 */
> * {
position: relative;
z-index: 1;
}
}
@@ -152,6 +175,8 @@
font-weight: 600;
color: $accent;
margin: 0 0 0.08rem 0;
display: flex;
align-items: flex-start;
}
&__ai-text {
@@ -175,17 +200,19 @@
font-size: 0.12rem;
font-weight: 500;
border: 1px solid $accent;
border-radius: 0.14rem;
padding: 0.04rem 0.12rem;
border-radius: 0.04rem;
padding: 0.04rem 0.06rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.04rem;
&--replace {
color: $accent;
background: $bg-white;
color: #fff;
background: $accent;
&:hover {
background: rgba($accent, 0.08);
}
}
+53 -8
View File
@@ -16,8 +16,15 @@
<!-- 顶部栏 -->
<div class="fix-all-drawer__header">
<button class="fix-all-drawer__close-btn" @click="handleClose" aria-label="收起">
<svg viewBox="0 0 16 16" fill="none" class="fix-all-drawer__close-icon">
<path d="M10 3l-5 5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_154_1595)">
<path d="M11.9998 13.3998L7.0998 18.2998C6.91647 18.4831 6.68314 18.5748 6.3998 18.5748C6.11647 18.5748 5.88314 18.4831 5.6998 18.2998C5.51647 18.1165 5.4248 17.8831 5.4248 17.5998C5.4248 17.3165 5.51647 17.0831 5.6998 16.8998L10.5998 11.9998L5.6998 7.0998C5.51647 6.91647 5.4248 6.68314 5.4248 6.3998C5.4248 6.11647 5.51647 5.88314 5.6998 5.6998C5.88314 5.51647 6.11647 5.4248 6.3998 5.4248C6.68314 5.4248 6.91647 5.51647 7.0998 5.6998L11.9998 10.5998L16.8998 5.6998C17.0831 5.51647 17.3165 5.4248 17.5998 5.4248C17.8831 5.4248 18.1165 5.51647 18.2998 5.6998C18.4831 5.88314 18.5748 6.11647 18.5748 6.3998C18.5748 6.68314 18.4831 6.91647 18.2998 7.0998L13.3998 11.9998L18.2998 16.8998C18.4831 17.0831 18.5748 17.3165 18.5748 17.5998C18.5748 17.8831 18.4831 18.1165 18.2998 18.2998C18.1165 18.4831 17.8831 18.5748 17.5998 18.5748C17.3165 18.5748 17.0831 18.4831 16.8998 18.2998L11.9998 13.3998Z" fill="#6A7282"/>
</g>
<defs>
<clipPath id="clip0_154_1595">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<h3 class="fix-all-drawer__title">一键修复</h3>
@@ -51,15 +58,53 @@
<!-- AI 润色结果区 -->
<div class="fix-all-drawer__ai-section">
<p class="fix-all-drawer__ai-label"> AI润色结果</p>
<div class="fix-all-drawer__card fix-all-drawer__card--ai">
<p class="fix-all-drawer__ai-label">
<svg class="pt2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_154_1838)">
<path d="M6.0714 3.63216C6.47007 2.4655 8.08207 2.43016 8.55474 3.52616L8.59474 3.63283L9.13274 5.20616C9.25603 5.56699 9.45527 5.89717 9.71702 6.17445C9.97877 6.45172 10.2969 6.66964 10.6501 6.8135L10.7947 6.8675L12.3681 7.40483C13.5347 7.8035 13.5701 9.4155 12.4747 9.88816L12.3681 9.92816L10.7947 10.4662C10.4338 10.5894 10.1035 10.7886 9.82608 11.0503C9.54869 11.3121 9.33067 11.6303 9.18674 11.9835L9.13274 12.1275L8.5954 13.7015C8.19674 14.8682 6.58474 14.9035 6.11274 13.8082L6.0714 13.7015L5.53407 12.1282C5.41086 11.7672 5.21165 11.4369 4.9499 11.1595C4.68814 10.8821 4.36993 10.6641 4.01674 10.5202L3.87274 10.4662L2.2994 9.92883C1.13207 9.53016 1.09674 7.91816 2.19274 7.44616L2.2994 7.40483L3.87274 6.8675C4.23356 6.7442 4.56374 6.54496 4.84102 6.28321C5.11829 6.02146 5.33621 5.70329 5.48007 5.35016L5.53407 5.20616L6.0714 3.63216ZM7.3334 4.06283L6.79607 5.63616C6.60833 6.18637 6.30292 6.68903 5.90109 7.10916C5.49927 7.52929 5.0107 7.85678 4.4694 8.06883L4.30274 8.1295L2.7294 8.66683L4.30274 9.20416C4.85294 9.3919 5.35561 9.69732 5.77573 10.0991C6.19586 10.501 6.52335 10.9895 6.7354 11.5308L6.79607 11.6975L7.3334 13.2708L7.87074 11.6975C8.05848 11.1473 8.36389 10.6446 8.76571 10.2245C9.16753 9.80437 9.65611 9.47688 10.1974 9.26483L10.3641 9.20483L11.9374 8.66683L10.3641 8.1295C9.81387 7.94176 9.3112 7.63634 8.89107 7.23452C8.47094 6.8327 8.14345 6.34413 7.9314 5.80283L7.8714 5.63616L7.3334 4.06283ZM12.6667 1.3335C12.7915 1.3335 12.9137 1.36848 13.0195 1.43448C13.1253 1.50047 13.2105 1.59483 13.2654 1.70683L13.2974 1.78483L13.5307 2.46883L14.2154 2.70216C14.3404 2.74463 14.45 2.82324 14.5302 2.92804C14.6105 3.03284 14.6578 3.15911 14.6663 3.29084C14.6747 3.42258 14.6438 3.55385 14.5775 3.66802C14.5113 3.78219 14.4126 3.87412 14.2941 3.93216L14.2154 3.96416L13.5314 4.1975L13.2981 4.88216C13.2555 5.00712 13.1769 5.11663 13.072 5.19682C12.9672 5.27702 12.8409 5.32429 12.7092 5.33264C12.5774 5.341 12.4462 5.31006 12.3321 5.24375C12.2179 5.17744 12.1261 5.07874 12.0681 4.96016L12.0361 4.88216L11.8027 4.19816L11.1181 3.96483C10.9931 3.92237 10.8835 3.84375 10.8033 3.73895C10.723 3.63415 10.6756 3.50788 10.6672 3.37615C10.6588 3.24441 10.6897 3.11314 10.7559 2.99897C10.8222 2.8848 10.9208 2.79287 11.0394 2.73483L11.1181 2.70283L11.8021 2.4695L12.0354 1.78483C12.0804 1.65311 12.1654 1.53877 12.2786 1.45783C12.3918 1.37689 12.5276 1.33341 12.6667 1.3335Z" fill="#52CAD1"/>
</g>
<defs>
<clipPath id="clip0_154_1838">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<span>AI润色结果</span>
</p>
<p class="fix-all-drawer__ai-text">{{ record.polishText }}</p>
<!-- 操作按钮 -->
<div class="fix-all-drawer__ai-actions">
<button class="fix-all-drawer__action-btn fix-all-drawer__action-btn--replace" @click="handleReplaceToOriginal(record)">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_154_1847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.79167 10.3333C4.56737 10.3333 4.37947 10.2573 4.22801 10.1053C4.07653 9.95334 4.00053 9.76544 4 9.54167C3.99948 9.31789 4.07548 9.13 4.22801 8.978C4.38054 8.82601 4.56842 8.75 4.79167 8.75H8.75V4.79167C8.75 4.56737 8.82601 4.37947 8.978 4.22801C9.13 4.07653 9.31789 4.00053 9.54167 4C9.76544 3.99948 9.9536 4.07548 10.1061 4.22801C10.2587 4.38054 10.3344 4.56842 10.3333 4.79167V8.75H14.2917C14.516 8.75 14.7041 8.82601 14.8561 8.978C15.0081 9.13 15.0839 9.31789 15.0833 9.54167C15.0828 9.76544 15.0068 9.9536 14.8553 10.1061C14.7039 10.2587 14.516 10.3344 14.2917 10.3333H10.3333V14.2917C10.3333 14.516 10.2573 14.7041 10.1053 14.8561C9.95334 15.0081 9.76544 15.0839 9.54167 15.0833C9.31789 15.0828 9.13 15.0068 8.978 14.8553C8.82601 14.7039 8.75 14.516 8.75 14.2917V10.3333H4.79167Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_154_1847">
<rect width="19" height="19" fill="white"/>
</clipPath>
</defs>
</svg>
<span>替换为此内容</span>
</button>
<button class="fix-all-drawer__action-btn fix-all-drawer__action-btn--regenerate" @click="handleRegenerate(record)">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_154_1852)">
<path d="M9.50033 15.8332C7.73227 15.8332 6.2347 15.2196 5.00762 13.9925C3.78053 12.7655 3.16699 11.2679 3.16699 9.49984C3.16699 7.73178 3.78053 6.23421 5.00762 5.00713C6.2347 3.78005 7.73227 3.16651 9.50033 3.16651C10.4107 3.16651 11.2816 3.3544 12.1128 3.73017C12.9441 4.10595 13.6566 4.64376 14.2503 5.34359V3.95817C14.2503 3.73387 14.3263 3.54598 14.4783 3.39451C14.6303 3.24303 14.8182 3.16703 15.042 3.16651C15.2658 3.16598 15.4539 3.24198 15.6065 3.39451C15.759 3.54703 15.8347 3.73492 15.8337 3.95817V7.91651C15.8337 8.14081 15.7577 8.32897 15.6057 8.48097C15.4537 8.63297 15.2658 8.7087 15.042 8.70817H11.0837C10.8594 8.70817 10.6715 8.63217 10.52 8.48017C10.3685 8.32817 10.2925 8.14028 10.292 7.91651C10.2915 7.69273 10.3675 7.50484 10.52 7.35284C10.6725 7.20084 10.8604 7.12484 11.0837 7.12484H13.617C13.1948 6.38595 12.6176 5.8054 11.8856 5.38317C11.1536 4.96095 10.3585 4.74984 9.50033 4.74984C8.18088 4.74984 7.05935 5.21165 6.13574 6.13526C5.21213 7.05887 4.75033 8.1804 4.75033 9.49984C4.75033 10.8193 5.21213 11.9408 6.13574 12.8644C7.05935 13.788 8.18088 14.2498 9.50033 14.2498C10.3975 14.2498 11.219 14.0224 11.9648 13.5674C12.7105 13.1125 13.2877 12.5021 13.6962 11.7363C13.8017 11.5516 13.9503 11.4231 14.1419 11.3508C14.3335 11.2785 14.5279 11.275 14.7253 11.3405C14.9364 11.4064 15.0882 11.545 15.1805 11.7561C15.2729 11.9672 15.2663 12.1651 15.1607 12.3498C14.6198 13.4054 13.8479 14.2498 12.8451 14.8832C11.8423 15.5165 10.7274 15.8332 9.50033 15.8332Z" fill="#52CAD1"/>
</g>
<defs>
<clipPath id="clip0_154_1852">
<rect width="19" height="19" fill="white"/>
</clipPath>
</defs>
</svg>
<span>重新生成</span>
</button>
</div>
</div>
<!-- 操作按钮 -->
<div class="fix-all-drawer__ai-actions">
<button class="fix-all-drawer__action-btn fix-all-drawer__action-btn--replace" @click="handleReplaceToOriginal(record)">+替换为此内容</button>
<button class="fix-all-drawer__action-btn fix-all-drawer__action-btn--regenerate" @click="handleRegenerate(record)"> 重新生成</button>
</div>
</div>
</div>
</template>