diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css index 450fc2656..02b3e2fc3 100644 --- a/frontend_nuxt/assets/global.css +++ b/frontend_nuxt/assets/global.css @@ -239,8 +239,16 @@ body { } .info-content-text img { - max-width: 100%; + max-width: 400px; + max-height: 600px; height: auto; + cursor: pointer; + box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.11); + transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.info-content-text img:hover { + box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.35); } .info-content-text table { diff --git a/frontend_nuxt/components/MessageEditor.vue b/frontend_nuxt/components/MessageEditor.vue index 815c7ee99..ae3fbc9b3 100644 --- a/frontend_nuxt/components/MessageEditor.vue +++ b/frontend_nuxt/components/MessageEditor.vue @@ -70,22 +70,6 @@ export default { onMounted(() => { vditorInstance.value = createVditor(editorId.value, { placeholder: '输入消息...', - toolbar: [ - 'emoji', - 'bold', - 'italic', - 'strike', - 'link', - '|', - 'list', - '|', - 'line', - 'quote', - 'code', - 'inline-code', - '|', - 'upload', - ], preview: { actions: [], markdown: { toc: false }, @@ -148,11 +132,17 @@ export default { border-radius: 8px; } +.vditor { + min-height: 50px; + max-height: 150px; +} + .message-bottom-container { display: flex; flex-direction: row; justify-content: flex-end; - padding: 10px; + margin-top: 10px; + margin-bottom: 10px; background-color: var(--bg-color-soft); border-top: 1px solid var(--border-color); border-bottom-left-radius: 8px; @@ -178,10 +168,4 @@ export default { .message-submit:not(.disabled):hover { background-color: var(--primary-color-hover); } - -.message-editor-container .vditor { - min-height: 80px; - max-height: 150px; - overflow-y: auto; -} diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue index c662a7b6b..39265b66a 100644 --- a/frontend_nuxt/pages/message-box/[id].vue +++ b/frontend_nuxt/pages/message-box/[id].vue @@ -703,13 +703,6 @@ function goBack() { opacity: 0.5; } -.info-content-text img, -.reply-content img { - max-width: 600px; - width: 100%; - cursor: pointer; -} - .reply-btn { cursor: pointer; padding: 4px;