From e5c823145db1a4ae3f8d55fd6aad2b9edf96fae8 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Fri, 15 Aug 2025 17:15:36 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/lib/reset.scss | 1 + .../detail/components/ai-suggest/index.vue | 2 +- .../detail/components/ai-suggest/style.scss | 207 +++++++++--------- .../explore/detail/style.scss | 34 +-- 4 files changed, 125 insertions(+), 119 deletions(-) diff --git a/src/styles/lib/reset.scss b/src/styles/lib/reset.scss index 00bdba2..6b94da8 100644 --- a/src/styles/lib/reset.scss +++ b/src/styles/lib/reset.scss @@ -9,6 +9,7 @@ html, body { + height: 100%; background: $color-background; font-family: $font-family-regular; font-size: 14px; diff --git a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue b/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue index 951b876..58330e3 100644 --- a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue +++ b/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue @@ -281,7 +281,7 @@ export default { }; return () => ( -
+
{!isEmpty(aiReview.value) && (
diff --git a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss b/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss index 154ea82..81a7616 100644 --- a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss +++ b/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss @@ -1,118 +1,121 @@ - -.ai-suggest-box { - width: 440px; - height: fit-content; - max-height: 100%; - border-radius: 16px; - background: linear-gradient(126deg, #eef2fd 8.36%, #f5ebfe 49.44%, #fdebf3 90.52%); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); - .cts { - color: #939499; - font-family: $font-family-regular; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 22px; - &.bold { +.ai-suggest-wrap { + top: $navbar-height; + height: calc(100% - ($navbar-height + 12px)); + .ai-suggest-box { + width: 440px; + height: fit-content; + max-height: 100%; + border-radius: 16px; + background: linear-gradient(126deg, #eef2fd 8.36%, #f5ebfe 49.44%, #fdebf3 90.52%); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); + .cts { + color: #939499; + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + &.bold { + font-family: $font-family-medium; + } + } + .ai-text { font-family: $font-family-medium; - } - } - .ai-text { - font-family: $font-family-medium; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 24px; - background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - :deep(.arco-textarea-wrapper) { - min-height: 38px; - display: flex; - border-color: transparent !important; - align-items: center; - border-radius: 8px !important; - background-color: #fff; - color: #211f24 !important; - transition: all 0.3s; - .arco-textarea-mirror, - .arco-textarea { - padding: 8px 16px !important; - } - &:hover { - border-color: #6d4cfe !important; - } - &.arco-textarea-focus { - border-color: #6d4cfe !important; - } - } - .result-box { - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(4px); - .result-item { - .s1 { - color: var(--Brand-6, #6d4cfe); - font-family: $font-family-manrope-medium; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: 32px; - } - &:first-child { - position: relative; - &::after { - content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 0; - width: 1px; - height: 32px; - background: var(--Border-1, #d7d7d9); - } - } - } - } - .collapse-box { - transition: all 0.3s; - } - .comment-box { - .cm { + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } - - .comment-list { + :deep(.arco-textarea-wrapper) { + min-height: 38px; + display: flex; + border-color: transparent !important; + align-items: center; + border-radius: 8px !important; + background-color: #fff; + color: #211f24 !important; + transition: all 0.3s; + .arco-textarea-mirror, + .arco-textarea { + padding: 8px 16px !important; + } + &:hover { + border-color: #6d4cfe !important; + } + &.arco-textarea-focus { + border-color: #6d4cfe !important; + } + } + .result-box { + background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); - .comment-item { - &:not(:last-child) { - margin-bottom: 8px; + .result-item { + .s1 { + color: var(--Brand-6, #6d4cfe); + font-family: $font-family-manrope-medium; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; } - &:hover { - border-radius: 8px; - background: rgba(255, 255, 255, 0.8); + &:first-child { + position: relative; + &::after { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + width: 1px; + height: 32px; + background: var(--Border-1, #d7d7d9); + } } } } - } - .main-box { - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - width: 0; - height: 0; - background: transparent; + .collapse-box { + transition: all 0.3s; } - &::-webkit-scrollbar-thumb { - background-color: transparent; - border: none; + .comment-box { + .cm { + background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .comment-list { + backdrop-filter: blur(4px); + .comment-item { + &:not(:last-child) { + margin-bottom: 8px; + } + &:hover { + border-radius: 8px; + background: rgba(255, 255, 255, 0.8); + } + } + } } - &::-webkit-scrollbar-track { - background: transparent; + .main-box { + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + width: 0; + height: 0; + background: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: transparent; + border: none; + } + &::-webkit-scrollbar-track { + background: transparent; + } } } } diff --git a/src/views/creative-generation-workshop/explore/detail/style.scss b/src/views/creative-generation-workshop/explore/detail/style.scss index f3c97ce..c1fa1fe 100644 --- a/src/views/creative-generation-workshop/explore/detail/style.scss +++ b/src/views/creative-generation-workshop/explore/detail/style.scss @@ -1,13 +1,27 @@ .explore-page { position: relative; - padding-top: $navbar-height; + // padding-top: $navbar-height; min-width: 1200px; height: 100vh; background: #fff; display: flex; flex-direction: column; - .page-header { + .fold-box { + width: 40px; + height: 40px; + border-radius: 30px; + border: 1px solid var(--Border-1, #d7d7d9); + background: #fff; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15); position: fixed; + right: 16px; + top: calc($navbar-height + 32px); + display: flex; + justify-content: center; + align-items: center; + } + .page-header { + position: sticky; left: 0; right: 0; top: 0; @@ -31,6 +45,7 @@ } .page-wrap { + width: calc(100% - 456px); flex: 1; display: flex; justify-content: center; @@ -47,20 +62,7 @@ line-height: 40px; /* 142.857% */ } } - .fold-box { - width: 40px; - height: 40px; - border-radius: 30px; - border: 1px solid var(--Border-1, #d7d7d9); - background: #fff; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15); - position: absolute; - right: 16px; - top: 32px; - display: flex; - justify-content: center; - align-items: center; - } + .main-video-box { width: 320px; height: 472px;