Browse Source

change css

master
tiantian 5 months ago
parent
commit
8224937351
  1. 6
      frontend/src/assets/chat.scss
  2. 3
      frontend/src/components/localchat/AiChatMain.vue
  3. 27
      frontend/src/components/setting/setStyle.css

6
frontend/src/assets/chat.scss

@ -108,11 +108,9 @@
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.chat-bot{ .chat-bot{
.input-area{ .input-area{
padding: 0;
.file-btn{ .file-btn{
margin-left: vw(-20); margin-left: vw(-10);
}
.websearch-btn{
margin-left: vw(-5);
} }
} }
} }

3
frontend/src/components/localchat/AiChatMain.vue

@ -7,6 +7,7 @@ import { ElScrollbar } from "element-plus";
import { getSystemConfig } from "@/system/config"; import { getSystemConfig } from "@/system/config";
import { Vue3Lottie } from "vue3-lottie"; import { Vue3Lottie } from "vue3-lottie";
import { file } from "jszip"; import { file } from "jszip";
import { isMobileDevice } from "@/util/device";
const chatStore = useAiChatStore(); const chatStore = useAiChatStore();
const modelStore = useModelStore(); const modelStore = useModelStore();
const isPadding = ref(false); // const isPadding = ref(false); //
@ -242,7 +243,7 @@ const uploadImage = async (event: any) => {
</el-col> </el-col>
<el-col :span="17"> <el-col :span="17">
<el-input v-model="userMessage" :placeholder="t('aichat.askme')" size="large" clearable <el-input v-model="userMessage" :placeholder="t('aichat.askme')" size="large" clearable
@keydown="handleKeydown" autofocus class="ai-input-area" /> @keydown="handleKeydown" :autofocus="isMobileDevice() ? false : true" class="ai-input-area" />
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-button v-if="!isPadding" @click="sendMessage" icon="Promotion" type="info" size="large" circle /> <el-button v-if="!isPadding" @click="sendMessage" icon="Promotion" type="info" size="large" circle />

27
frontend/src/components/setting/setStyle.css

@ -74,8 +74,33 @@
text-align: right; text-align: right;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.nav { .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 { .setting-item:first-child {
margin-top: 0px !important; margin-top: 0px !important;

Loading…
Cancel
Save