update: 调整新会话按钮样式,增加按钮的内边距和最小宽度,优化按钮在不同状态下的表现
This commit is contained in:
parent
ce61528088
commit
ecaca53dfa
|
@ -75,7 +75,6 @@
|
|||
class="new-chat-btn"
|
||||
@click="chatStore.startNewChat"
|
||||
:disabled="newChatButtonsDisabled"
|
||||
:icon="Plus"
|
||||
>
|
||||
新会话
|
||||
</el-button>
|
||||
|
@ -773,17 +772,39 @@ onUnmounted(() => {
|
|||
--el-button-active-bg-color: #e9ecef;
|
||||
--el-button-active-border-color: #c0c4cc;
|
||||
--el-button-active-text-color: #303133;
|
||||
padding: 0 12px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
margin-right: 2px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 40px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-button-hover-bg-color);
|
||||
border-color: var(--el-button-hover-border-color);
|
||||
color: var(--el-button-hover-text-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--el-button-active-bg-color);
|
||||
border-color: var(--el-button-active-border-color);
|
||||
color: var(--el-button-active-text-color);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-color: #dcdfe6 !important;
|
||||
color: #999 !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-button.new-chat-btn > span) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-button--primary) {
|
||||
--el-button-bg-color: #07c160;
|
||||
--el-button-border-color: #07c160;
|
||||
|
@ -809,6 +830,11 @@ onUnmounted(() => {
|
|||
.input-area {
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
|
||||
.new-chat-btn {
|
||||
padding: 0 12px;
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
|
|
Loading…
Reference in New Issue