diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue b/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
index 16b0d81..384bc43 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
+++ b/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
@@ -10,11 +10,14 @@
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
+ @focus="() => (focus = true)"
+ @blur="() => (focus = false)"
/>
@@ -52,6 +55,7 @@ const textareaRef = ref(null);
const highlightRef = ref(null);
const inputValue = ref(props.modelValue || '');
const scrollTop = ref(0);
+const focus = ref(false);
const highlightedHtml = computed(() => generateHighlightedHtml());
// 监听外部modelValue变化
@@ -148,7 +152,7 @@ const handleTextareaScroll = (e: Event) => {
font-size: 14px;
line-height: 22px;
font-weight: 400px;
- border: 1px solid #e5e6eb;
+ border: 1px solid #d7d7d9;
border-radius: 4px;
resize: vertical;
white-space: pre-wrap;
@@ -156,15 +160,18 @@ const handleTextareaScroll = (e: Event) => {
}
.textarea-highlight {
@include textarea-style;
- padding: 8px 12px;
position: absolute;
top: 0;
left: 0;
z-index: 0;
- @include textarea-padding;
pointer-events: none;
background: #fff;
overflow: hidden;
+ @include textarea-padding;
+ &.focus {
+ border-color: rgb(var(--primary-6)) !important;
+ box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+ }
}
:deep(.arco-textarea-wrapper) {
@include textarea-style;
@@ -191,13 +198,5 @@ const handleTextareaScroll = (e: Event) => {
}
}
}
-
- /* 字数统计样式 */
- .word-count {
- margin-top: 8px;
- text-align: right;
- font-size: 12px;
- color: #86909c;
- }
}
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue b/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
index 46fbdb3..384bc43 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
+++ b/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
@@ -10,11 +10,14 @@
size="large"
class="textarea-input h-full w-full"
@input="handleInput"
+ @focus="() => (focus = true)"
+ @blur="() => (focus = false)"
/>
@@ -52,6 +55,7 @@ const textareaRef = ref(null);
const highlightRef = ref(null);
const inputValue = ref(props.modelValue || '');
const scrollTop = ref(0);
+const focus = ref(false);
const highlightedHtml = computed(() => generateHighlightedHtml());
// 监听外部modelValue变化
@@ -148,7 +152,7 @@ const handleTextareaScroll = (e: Event) => {
font-size: 14px;
line-height: 22px;
font-weight: 400px;
- border: 1px solid #e5e6eb;
+ border: 1px solid #d7d7d9;
border-radius: 4px;
resize: vertical;
white-space: pre-wrap;
@@ -164,6 +168,10 @@ const handleTextareaScroll = (e: Event) => {
background: #fff;
overflow: hidden;
@include textarea-padding;
+ &.focus {
+ border-color: rgb(var(--primary-6)) !important;
+ box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
+ }
}
:deep(.arco-textarea-wrapper) {
@include textarea-style;
@@ -190,13 +198,5 @@ const handleTextareaScroll = (e: Event) => {
}
}
}
-
- /* 字数统计样式 */
- .word-count {
- margin-top: 8px;
- text-align: right;
- font-size: 12px;
- color: #86909c;
- }
}