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

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

@ -1,74 +1,57 @@
#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;
--el-input-focus-border-color: #47fff1;
--el-input-hover-border-color: #2da39a;
box-shadow: none; 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;
@ -78,7 +61,6 @@
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;
@ -88,170 +70,137 @@
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 {
display: none;
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 16px; top: 16px;
color: #fff; 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;
}
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-opt .el-icon {
margin-right: 8px; 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;
padding: 10px 30px;
display: flex; display: flex;
flex-direction: row;
align-items: center;
justify-content: center; justify-content: center;
padding-top: 10px; justify-items: center;
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;
border-radius: 5px;
cursor: pointer;
}
#app .chat-page .el-main .chat-container .chat-config .setting .iconfont {
font-size: 18px;
color: #19c37d;
}
#app .chat-page .el-main .chat-container .chat-config .setting:hover {
background: #d5fad3;
}
#app .chat-page .el-main .chat-container .chat-config .el-button .el-icon {
margin-right: 5px; margin-right: 5px;
} }
#app .chat-page .el-main .chat-container #container {
#app .chat-page .el-main .chat-head .iconfont {
margin-right: 5px;
}
#app .chat-page .el-main .chat-head .is-circle {
margin-left: 5px;
}
#app .chat-page .el-main .chat-head .is-circle .iconfont {
margin-right: 0;
}
#app .chat-page .el-main .chat-box {
min-width: 0;
flex: 1;
background-color: #fff;
border-left: 1px solid #4f4f4f;
}
#app .chat-page .el-main .chat-box #container {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
position: relative;
} }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar {
#app .chat-page .el-main .chat-box #container ::-webkit-scrollbar { width: 12px /* 滚动条宽度 */;
width: 0; background: #f1f1f1;
height: 0;
background-color: transparent;
} }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar-track {
#app .chat-page .el-main .chat-box #container .chat-box { background-color: #e1e1e1;
overflow-y: scroll; }
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 12px;
}
#app .chat-page .el-main .chat-container #container ::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8;
}
#app .chat-page .el-main .chat-container #container .chat-box {
overflow-y: auto;
--content-font-size: 16px; --content-font-size: 16px;
--content-color: #c1c1c1; --content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
padding: 0 0 50px 0; 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 .chat-box .chat-line {
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
#app .chat-page .el-main .chat-container #container .input-box {
#app .chat-page .el-main .chat-box #container .re-generate {
position: relative;
display: flex;
justify-content: center;
}
#app .chat-page .el-main .chat-box #container .re-generate .btn-box {
position: absolute; position: absolute;
bottom: 10px; 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 .re-generate .btn-box .el-button .el-icon {
margin-right: 5px;
}
#app .chat-page .el-main .chat-box #container .input-box {
background-color: #fff;
display: flex; display: flex;
background-color: #fff;
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;
border-radius: 6px;
color: #19c37d;
display: flex;
justify-content: center;
justify-items: center;
padding: 6px;
cursor: pointer;
background: #f2f2f2;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .tool-item:hover {
background: #d5fad3;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .tool-item .iconfont {
font-size: 24px;
}
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body {
width: 100%; width: 100%;
margin: 0; margin: 0;
border: none; border: none;
@ -260,65 +209,83 @@
justify-content: center; justify-content: center;
position: relative; 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 .el-textarea .el-textarea__inner::-webkit-scrollbar { white-space: pre-wrap; /* 保持文本换行 */
visibility: hidden; /* 隐藏 div */
position: absolute; /* 脱离文档流 */
line-height: 24px;
font-size: 14px;
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 {
display: flex;
width: 100%;
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; width: 0;
height: 0; height: 0;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .input-inner .prompt-input {
#app .chat-page .el-main .chat-box #container .input-box .input-container .select-file { width: 100%;
position: absolute; line-height: 24px;
right: 48px; border: none;
top: 20px; 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 {
#app .chat-page .el-main .chat-box #container .input-box .input-container .send-btn { width: 32px;
position: absolute; margin-left: 10px;
right: 12px;
top: 20px;
} }
#app .chat-page .el-main .chat-container #container .input-box .input-box-inner .input-body .input-border .send-btn .el-button {
#app .chat-page .el-main .chat-box #container .input-box .input-container .send-btn .el-button {
padding: 8px 5px; padding: 8px 5px;
border-radius: 6px; border-radius: 6px;
background: #19c37d;
color: #fff;
font-size: 20px; font-size: 20px;
} }
#app .chat-page .el-main .chat-container #container::-webkit-scrollbar {
#app .chat-page .el-main .chat-box #container::-webkit-scrollbar {
width: 0; width: 0;
height: 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;
@ -327,52 +294,41 @@
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;
}
.el-overlay-dialog .el-dialog .el-dialog__body .notice .el-text {
font-size: 16px; font-size: 16px;
overflow: auto;
height: 100%;
} }
.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"/>