xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-18 01:06:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed styles

Browse Source
This commit is contained in:
RockYang 2024-08-19 06:42:53 +08:00
parent aa42d38387
commit 3ae7ebfeaf
3 changed files with 253 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

534
web/src/assets/css/chat-plus.css
View File

@ -1,378 +1,334 @@
#app { #app {
height: 100%; height: 100%;
} }
#app .chat-page { #app .chat-page {
height: 100%; height: 100%;
} }
#app .chat-page .el-aside { #app .chat-page .el-aside {
background-color: #252526; padding: 10px;
width: var(--el-aside-width, 320px);
} }
#app .chat-page .el-aside .title-box {
padding: 6px 10px;
display: flex;
color: #fff;
font-size: 20px;
}
#app .chat-page .el-aside .title-box span {
padding-top: 5px;
padding-left: 10px;
}
#app .chat-page .el-aside .chat-list { #app .chat-page .el-aside .chat-list {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
background-color: #28292a; border-radius: 10px;
border-top: 1px solid #2f3032; padding: 10px 0;
border-right: 1px solid #2f3032;
} }
#app .chat-page .el-aside .chat-list .search-box { #app .chat-page .el-aside .chat-list .search-box {
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 15px; padding: 10px 0;
} }
#app .chat-page .el-aside .chat-list .search-box .search-input {
#app .chat-page .el-aside .chat-list .search-box .el-input__wrapper { --el-input-bg-color: #363535;
background-color: #363535; --el-input-border-color: #464545;
box-shadow: none; --el-input-focus-border-color: #47fff1;
--el-input-hover-border-color: #2da39a;
box-shadow: none;
} }
#app .chat-page .el-aside .chat-list ::-webkit-scrollbar { #app .chat-page .el-aside .chat-list ::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
background-color: transparent; background-color: transparent;
} }
#app .chat-page .el-aside .chat-list .content { #app .chat-page .el-aside .chat-list .content {
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item { #app .chat-page .el-aside .chat-list .content .chat-list-item {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
border: 1px solid #3c3c3c;
margin-bottom: 6px;
border-radius: 5px;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item:hover { #app .chat-page .el-aside .chat-list .content .chat-list-item:hover {
background-color: #343540; background-color: #343540;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item .avatar { #app .chat-page .el-aside .chat-list .content .chat-list-item .avatar {
width: 28px; width: 32px;
height: 28px; height: 32px;
border-radius: 50%; border-radius: 50%;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-title-input { #app .chat-page .el-aside .chat-list .content .chat-list-item .chat-title-input {
font-size: 14px; font-size: 14px;
margin-top: 4px; margin-top: 4px;
margin-left: 10px; margin-left: 10px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 190px; width: 190px;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-title { #app .chat-page .el-aside .chat-list .content .chat-list-item .chat-title {
color: #c1c1c1; color: #c1c1c1;
padding: 5px 10px; padding: 5px 10px;
max-width: 220px; max-width: 220px;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-opt {
#app .chat-page .el-aside .chat-list .content .chat-list-item .btn { position: absolute;
display: none; right: 2px;
position: absolute; top: 16px;
right: 2px; color: #fff;
top: 16px;
color: #fff;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-opt .el-dropdown-link {
#app .chat-page .el-aside .chat-list .content .chat-list-item .btn .el-icon { color: #fff;
margin-right: 8px; }
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-opt .el-icon {
margin-right: 8px;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item.active { #app .chat-page .el-aside .chat-list .content .chat-list-item.active {
background-color: #343540; background-color: #343540;
border-color: #21aa93;
} }
#app .chat-page .el-aside .chat-list .content .chat-list-item.active .btn {
display: inline;
}
#app .chat-page .el-aside .tool-box { #app .chat-page .el-aside .tool-box {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
align-items: center; padding-top: 12px;
padding: 0 20px 10px 20px; border-top: 1px solid #3c3c3c;
border-top: 1px solid #3c3c3c;
} }
#app .chat-page .el-aside .tool-box .iconfont {
#app .chat-page .el-aside .tool-box .user-info { margin-right: 5px;
width: 100%;
padding-top: 10px;
} }
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link {
width: 100%;
cursor: pointer;
display: flex;
}
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link .el-image {
width: 20px;
height: 20px;
border-radius: 5px;
}
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link .username {
display: flex;
line-height: 22px;
width: 230px;
padding-left: 10px;
}
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link .el-icon {
color: #ccc;
line-height: 24px;
}
#app .chat-page .el-main { #app .chat-page .el-main {
overflow: hidden; overflow: hidden;
--el-main-padding: 0; --el-main-padding: 0;
margin: 0; margin: 0;
} }
#app .chat-page .el-main .chat-container {
#app .chat-page .el-main .chat-head { min-width: 0;
width: 100%; flex: 1;
height: 50px; background-color: var(--el-bg-color);
background-color: #28292a; color: var(--el-text-color-primary);
} }
#app .chat-page .el-main .chat-container .chat-config {
#app .chat-page .el-main .chat-head .chat-config { height: 30px;
display: flex; padding: 10px 30px;
flex-direction: row; display: flex;
align-items: center; justify-content: center;
justify-content: center; justify-items: center;
padding-top: 10px; border-bottom: 1px solid #d9d9e3;
} }
#app .chat-page .el-main .chat-container .chat-config .role-select-label {
#app .chat-page .el-main .chat-head .chat-config .role-select-label { color: #fff;
color: #fff;
} }
#app .chat-page .el-main .chat-container .chat-config .el-select {
#app .chat-page .el-main .chat-head .chat-config .el-select { max-width: 150px;
max-width: 150px; margin-right: 10px;
margin-right: 10px;
} }
#app .chat-page .el-main .chat-container .chat-config .role-select {
#app .chat-page .el-main .chat-head .chat-config .role-select { max-width: 130px;
max-width: 130px;
} }
#app .chat-page .el-main .chat-container .chat-config .setting {
#app .chat-page .el-main .chat-head .chat-config .el-button .el-icon { padding: 5px;
margin-right: 5px; border-radius: 5px;
cursor: pointer;
} }
#app .chat-page .el-main .chat-container .chat-config .setting .iconfont {
#app .chat-page .el-main .chat-head .iconfont { font-size: 18px;
margin-right: 5px; color: #19c37d;
} }
#app .chat-page .el-main .chat-container .chat-config .setting:hover {
#app .chat-page .el-main .chat-head .is-circle { background: #d5fad3;
margin-left: 5px;
} }
#app .chat-page .el-main .chat-container .chat-config .el-button .el-icon {
#app .chat-page .el-main .chat-head .is-circle .iconfont { margin-right: 5px;
margin-right: 0;
} }
#app .chat-page .el-main .chat-container #container {
#app .chat-page .el-main .chat-box { overflow: hidden;
min-width: 0; width: 100%;
flex: 1; position: relative;
background-color: #fff;
border-left: 1px solid #4f4f4f;
} }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar {
#app .chat-page .el-main .chat-box #container { width: 12px /* 滚动条宽度 */;
overflow: hidden; background: #f1f1f1;
width: 100%;
} }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar-track {
#app .chat-page .el-main .chat-box #container ::-webkit-scrollbar { background-color: #e1e1e1;
width: 0;
height: 0;
background-color: transparent;
} }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar-thumb {
#app .chat-page .el-main .chat-box #container .chat-box { background-color: #c1c1c1;
overflow-y: scroll; border-radius: 12px;
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
padding: 0 0 50px 0;
} }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar-thumb:hover {
#app .chat-page .el-main .chat-box #container .chat-box .chat-line { background-color: #a8a8a8;
font-size: 14px;
display: flex;
align-items: flex-start;
} }
#app .chat-page .el-main .chat-container #container .chat-box {
#app .chat-page .el-main .chat-box #container .re-generate { overflow-y: auto;
position: relative; --content-font-size: 16px;
display: flex; --content-color: #c1c1c1;
justify-content: center; font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
padding: 0 0 50px 0;
} }
#app .chat-page .el-main .chat-container #container .chat-box .chat-line {
#app .chat-page .el-main .chat-box #container .re-generate .btn-box { font-size: 14px;
position: absolute; display: flex;
bottom: 10px; align-items: flex-start;
} }
#app .chat-page .el-main .chat-container #container .input-box {
#app .chat-page .el-main .chat-box #container .re-generate .btn-box .el-button .el-icon { position: absolute;
margin-right: 5px; bottom: 0;
width: 100%;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner {
#app .chat-page .el-main .chat-box #container .input-box { display: flex;
background-color: #fff; background-color: #fff;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; box-shadow: 0 2px 15px rgba(0,0,0,0.1);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); padding: 0 15px;
padding: 0 15px;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .tool-item {
#app .chat-page .el-main .chat-box #container .input-box .input-container { margin-right: 15px;
width: 100%; border-radius: 6px;
margin: 0; color: #19c37d;
border: none; display: flex;
padding: 10px 0; justify-content: center;
display: flex; justify-items: center;
justify-content: center; padding: 6px;
position: relative; cursor: pointer;
background: #f2f2f2;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .tool-item:hover {
#app .chat-page .el-main .chat-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar { background: #d5fad3;
width: 0;
height: 0;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .tool-item .iconfont {
#app .chat-page .el-main .chat-box #container .input-box .input-container .select-file { font-size: 24px;
position: absolute;
right: 48px;
top: 20px;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body {
#app .chat-page .el-main .chat-box #container .input-box .input-container .send-btn { width: 100%;
position: absolute; margin: 0;
right: 12px; border: none;
top: 20px; padding: 10px 0;
display: flex;
justify-content: center;
position: relative;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .hide-div {
#app .chat-page .el-main .chat-box #container .input-box .input-container .send-btn .el-button { white-space: pre-wrap; /* 保持文本换行 */
padding: 8px 5px; visibility: hidden; /* 隐藏 div */
border-radius: 6px; position: absolute; /* 脱离文档流 */
background: #19c37d; line-height: 24px;
color: #fff; font-size: 14px;
font-size: 20px; word-wrap: break-word; /* 允许单词换行 */
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border {
#app .chat-page .el-main .chat-box #container::-webkit-scrollbar { display: flex;
width: 0; width: 100%;
height: 0; overflow: hidden;
border: 2px solid #21aa93;
border-radius: 10px;
padding: 10px;
background-color: #f4f4f4;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .input-inner {
display: flex;
flex-flow: column;
width: 100%;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .input-inner .file-list {
padding-bottom: 10px;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .input-inner .prompt-input::-webkit-scrollbar {
width: 0;
height: 0;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .input-inner .prompt-input {
width: 100%;
line-height: 24px;
border: none;
font-size: 14px;
background: none;
resize: none;
white-space: pre-wrap; /* 保持文本换行 */
word-wrap: break-word; /* 允许单词换行 */
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .send-btn {
width: 32px;
margin-left: 10px;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .send-btn .el-button {
padding: 8px 5px;
border-radius: 6px;
font-size: 20px;
}
#app .chat-page .el-main .chat-container #container::-webkit-scrollbar {
width: 0;
height: 0;
} }
#app .el-message-box { #app .el-message-box {
width: 90%; width: 90%;
max-width: 420px; max-width: 420px;
} }
#app .el-message { #app .el-message {
min-width: 100px; min-width: 100px;
max-width: 600px; max-width: 600px;
} }
.el-select-dropdown__wrap .el-select-dropdown__item .role-option { .el-select-dropdown__wrap .el-select-dropdown__item .role-option {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
margin-top: 8px; margin-top: 8px;
} }
.el-select-dropdown__wrap .el-select-dropdown__item .role-option .el-image { .el-select-dropdown__wrap .el-select-dropdown__item .role-option .el-image {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
} }
.el-select-dropdown__wrap .el-select-dropdown__item .role-option span { .el-select-dropdown__wrap .el-select-dropdown__item .role-option span {
margin-left: 5px; margin-left: 5px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
.account { .account {
display: flex; display: flex;
background-color: #90ffc2; background-color: #90ffc2;
color: #000; color: #000;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
} }
.account .vip-logo .el-image { .account .vip-logo .el-image {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 100%; border-radius: 100%;
background-color: #fff; background-color: #fff;
} }
.account .vip-info { .account .vip-info {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
} }
.account .vip-info h4, .account .vip-info h4,
.account .vip-info p { .account .vip-info p {
margin: 0; margin: 0;
} }
.account .vip-info h4 { .account .vip-info h4 {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
.account .vip-info p { .account .vip-info p {
color: #333; color: #333;
} }
.account .pay-btn { .account .pay-btn {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: right; justify-content: right;
align-items: center; align-items: center;
} }
.el-overlay-dialog .el-dialog .el-dialog__body .notice { .el-overlay-dialog .el-dialog .el-dialog__body .notice {
padding: 0 20px 0 20px; line-height: 1.8;
line-height: 1.8; font-size: 16px;
overflow: auto;
height: 100%;
} }
.el-overlay-dialog .el-dialog .el-dialog__body .notice .el-text {
font-size: 16px;
}
.dialog-service { .dialog-service {
text-align: center; text-align: center;
} }
.dialog-service .el-image { .dialog-service .el-image {
width: 360px; width: 360px;
} }

3
web/src/assets/css/chat-plus.styl
View File

@ -412,9 +412,10 @@ $borderColor = #4676d0;
.el-dialog { .el-dialog {
.el-dialog__body { .el-dialog__body {
.notice { .notice {
//padding 0 20px 0 20px
line-height 1.8 line-height 1.8
font-size 16px font-size 16px
overflow auto
height 100%
} }
} }
} }

10
web/src/views/ChatPlus.vue
View File

@ -184,11 +184,13 @@
> >
<div class="notice"> <div class="notice">
<div v-html="notice"></div> <div v-html="notice"></div>
<p style="text-align: right">
<el-button @click="notShow" type="success" plain>我知道了，不再显示</el-button>
</p>
</div> </div>
<template #footer>
<span class="dialog-footer">
<el-button @click="notShow" type="success" plain>我知道了，不再显示</el-button>
</span>
</template>
</el-dialog> </el-dialog>
<ChatSetting :show="showChatSetting" @hide="showChatSetting = false"/> <ChatSetting :show="showChatSetting" @hide="showChatSetting = false"/>