@charset "UTF-8"; /* Element Chalk Variables */ /** 全局SCSS变量 */ [data-v-343310bd]:root { --menu-background: #fff; --menu-text: #212121; --menu-active-text: var( --el-menu-active-color ); --menu-hover: #e6f4ff; --sidebar-logo-background: #f5f5f5; --sidebar-logo-text-color: #333; } /** 浅色主题-深蓝色侧边栏配色 */ html.sidebar-color-blue[data-v-343310bd] { --menu-background: #304156; --menu-text: #bfcbd9; --menu-active-text: var(--el-menu-active-color); --menu-hover: #263445; --sidebar-logo-background: #2d3748; --sidebar-logo-text-color: #fff; } /** 暗黑主题 */ html.dark[data-v-343310bd] { --menu-background: var(--el-bg-color-overlay); --menu-text: #fff; --menu-active-text: var(--el-menu-active-color); --menu-hover: rgb(0 0 0 / 20%); --sidebar-logo-background: rgb(0 0 0 / 20%); --sidebar-logo-text-color: #fff; /** WangEditor Dark */ /* Textarea - css vars */ --w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */ --w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */ --w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */ --w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */ --w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色,用于不那么重要的元素 */ --w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */ --w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */ --w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */ /* Toolbar - css vars */ --w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */ --w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */ --w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */ --w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */ --w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */ --w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */ /* Modal - css vars */ --w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */ --w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */ } .app-grid-card[data-v-343310bd] { position: relative; display: flex; flex-direction: column; height: calc(100vh - 200px); } .app-grid-card[data-v-343310bd] .el-card__footer { display: flex; justify-content: flex-end; margin-top: auto; } .card-header[data-v-343310bd] { display: flex; align-items: center; justify-content: space-between; } .app-grid-container[data-v-343310bd] { flex: 1; padding: 2px 0; } .grid-wrapper[data-v-343310bd] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; justify-items: stretch; padding: 0 2px; } @media (max-width: 768px) { .grid-wrapper[data-v-343310bd] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } } @media (max-width: 480px) { .grid-wrapper[data-v-343310bd] { grid-template-columns: 1fr; gap: 12px; } } .app-card[data-v-343310bd] { display: flex; flex-direction: column; height: 100%; overflow: hidden; cursor: pointer; background: linear-gradient(145deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%); border: 1px solid var(--el-border-color-lighter); border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .app-card[data-v-343310bd]:hover { border-color: var(--el-color-primary); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .app-card[data-v-343310bd]:active { transform: translateY(0); } .app-card.card-disabled[data-v-343310bd] { cursor: not-allowed; opacity: 0.6; } .app-card.card-disabled[data-v-343310bd]:hover { border-color: var(--el-border-color-lighter); box-shadow: none; transform: none; } .app-card[data-v-343310bd] .el-card__header { padding: 16px 18px 14px; background: linear-gradient(90deg, rgba(var(--el-color-primary-rgb), 0.02) 0%, transparent 100%); border-bottom: 1px solid var(--el-border-color-lighter); } .app-card[data-v-343310bd] .el-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px; } .app-card[data-v-343310bd] .el-card__footer { padding: 12px 18px 16px; background: rgba(var(--el-fill-color-light-rgb), 0.3); border-top: 1px solid var(--el-border-color-lighter); } .app-info-header[data-v-343310bd] { position: relative; display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .app-avatar[data-v-343310bd] { flex-shrink: 0; background: var(--el-fill-color-light); border: 2px solid var(--el-border-color-lighter); transition: all 0.3s ease; } .app-card:hover .app-avatar[data-v-343310bd] { background: rgba(var(--el-color-primary-rgb), 0.1); border-color: var(--el-color-primary); } .app-title-wrap[data-v-343310bd] { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; } .app-name[data-v-343310bd] { margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--el-text-color-primary); white-space: nowrap; } .status-tag[data-v-343310bd] { align-self: flex-start; padding: 2px 10px; font-size: 12px; font-weight: 500; border-radius: 12px; } .card-actions[data-v-343310bd] { position: absolute; top: 50%; right: -10px; z-index: 10; padding: 8px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); transform: translateY(-50%); } .card-actions .el-button[data-v-343310bd] { padding: 4px 8px; margin: 0 2px; } .card-actions .el-button[data-v-343310bd]:first-child { margin-left: 0; } .card-actions .el-button[data-v-343310bd]:last-child { margin-right: 0; } .app-content[data-v-343310bd] { display: flex; flex: 1; flex-direction: column; justify-content: center; } .app-description[data-v-343310bd] { display: -webkit-box; margin: 0; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; line-height: 1.6; color: var(--el-text-color-regular); -webkit-box-orient: vertical; } .card-footer[data-v-343310bd] { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4px; } .footer-item[data-v-343310bd] { display: flex; flex-shrink: 0; gap: 6px; align-items: center; min-width: 0; } .footer-icon[data-v-343310bd] { color: var(--el-text-color-secondary); } .footer-text[data-v-343310bd] { overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--el-text-color-secondary); white-space: nowrap; } @media (max-width: 768px) { .app-name[data-v-343310bd] { font-size: 15px; } .app-description[data-v-343310bd] { font-size: 13px; } .card-actions[data-v-343310bd] { position: static; align-self: flex-end; margin-top: 8px; transform: none; } .card-actions .el-button[data-v-343310bd] { padding: 3px 6px; font-size: 12px; } } @media (max-width: 480px) { .app-card[data-v-343310bd] .el-card__header { padding: 14px 16px; } .app-card[data-v-343310bd] .el-card__body { padding: 16px; } .app-card[data-v-343310bd] .el-card__footer { padding: 10px 16px 12px; } .app-name[data-v-343310bd] { font-size: 14px; } }