From 822493735158b58b9df5db9e22a1a5c9f659a032 Mon Sep 17 00:00:00 2001 From: tiantian <1012874180@qq.com> Date: Thu, 9 Jan 2025 11:42:35 +0800 Subject: [PATCH] change css --- frontend/src/assets/chat.scss | 6 ++--- .../src/components/localchat/AiChatMain.vue | 3 ++- frontend/src/components/setting/setStyle.css | 27 ++++++++++++++++++- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/frontend/src/assets/chat.scss b/frontend/src/assets/chat.scss index 3a8e140..7e1f5ce 100644 --- a/frontend/src/assets/chat.scss +++ b/frontend/src/assets/chat.scss @@ -108,11 +108,9 @@ @media screen and (max-width: 768px) { .chat-bot{ .input-area{ + padding: 0; .file-btn{ - margin-left: vw(-20); - } - .websearch-btn{ - margin-left: vw(-5); + margin-left: vw(-10); } } } diff --git a/frontend/src/components/localchat/AiChatMain.vue b/frontend/src/components/localchat/AiChatMain.vue index 8512bd0..003564b 100644 --- a/frontend/src/components/localchat/AiChatMain.vue +++ b/frontend/src/components/localchat/AiChatMain.vue @@ -7,6 +7,7 @@ import { ElScrollbar } from "element-plus"; import { getSystemConfig } from "@/system/config"; import { Vue3Lottie } from "vue3-lottie"; import { file } from "jszip"; +import { isMobileDevice } from "@/util/device"; const chatStore = useAiChatStore(); const modelStore = useModelStore(); const isPadding = ref(false); //是否发送中 @@ -242,7 +243,7 @@ const uploadImage = async (event: any) => { + @keydown="handleKeydown" :autofocus="isMobileDevice() ? false : true" class="ai-input-area" /> diff --git a/frontend/src/components/setting/setStyle.css b/frontend/src/components/setting/setStyle.css index f9ada8f..7629113 100644 --- a/frontend/src/components/setting/setStyle.css +++ b/frontend/src/components/setting/setStyle.css @@ -74,8 +74,33 @@ text-align: right; } @media screen and (max-width: 768px) { + .container { + flex-direction: column; + } .nav { - width: 25%; + background-color: #f9f9f9; + width: 100%; + } + .nav ul { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr)); + } + .nav li { + padding: 10px 0; + text-align: center; + } + .nav li.active { + background-color: #fff; + } + .nav li.active:hover { + background-color: #fff; + } + .nav li.active::after { + background-color: #80bbe9; + } + .setting { + margin-top: 20px; + box-sizing: border-box; } .setting-item:first-child { margin-top: 0px !important;