jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

.ql-editor 关于tab切换的样式同步

Browse Source
This commit is contained in:
liangjiami
2025-07-23 17:20:11 +08:00
parent f8dc645048
commit b99c07ef4a
1 changed files with 93 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
public/static/index/pc/css/public.css
View File

@@ -1455,3 +1455,96 @@ div{
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]:before { .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]:before {
content: "32px" content: "32px"
} }
/*tab切换样式*/
.ql-editor {
min-height: 600px;
cursor: text !important;
user-select: text !important;
}
/* 标签页样式 */
.quill-tabs {
margin: 15px 0;
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 4px;
}
/* 用伪元素添加图标（可替换为自己的图标） */
.ql-tabs::before {
font-size: 16px;
content: "T";
/* 用 emoji 或字体图标 */
}
.quill-tab-list {
display: flex;
background-color: #f8f9fa;
border-bottom: 1px solid #dddddd;
}
.quill-tab-list .quill-tab-button {
padding: 10px 15px;
font-weight: 500;
cursor: pointer;
background: transparent;
border: none;
transition: background-color 0.2s;
}
.quill-tab-list .quill-tab-button.active {
color: #007bff;
background-color: white;
border-bottom: 2px solid #007bff;
}
.quill-tab-list .quill-tab-edit-btn {
display: flex;
align-items: center;
padding: 10px;
margin-left: auto;
color: #606266;
cursor: pointer;
background: transparent;
border: none;
}
.quill-tab-list .quill-tab-edit-btn:hover {
color: #007bff;
}
.quill-tab-button {
padding: 10px 15px;
font-weight: 500;
cursor: pointer;
background: transparent;
border: none;
transition: background-color 0.2s;
}
.quill-tab-button.active {
color: #007bff;
background-color: white;
border-bottom: 2px solid #007bff;
}
.quill-tab-content-list {
padding: 15px;
}
.quill-tab-content {
display: none;
}
.quill-tab-content.active {
display: block;
}
/* 标签页标题编辑样式 */
.tab-title-edit {
display: flex;
align-items: center;
}
.tab-title-edit .title-text {
display: inline-block;
min-width: 60px;
padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.tab-title-edit .title-input {
width: 100px;
margin: -2px 0;
/* 与标签对齐 */
}