fireworks-schedule/dist/vue3/style.css

fireworks的个人课表组件 - 包含 vue2.0 和 vue3 版本

[data-v-d88eaf94]:root{--primary-color: #4299e1;--drag-bg-color: #ebf8ff;--watermark-color: rgba(66, 153, 225, .3);--subject-list-bg-color: #f7faff;--course-row-col-bg-color: #f0f7ff;--drag-bg-hover-color: #d6eaf8;--subject-list-bg-hover-color: #e0f0ff;--course-row-col-bg-hover-color: #d0e5ff}.course-schedule-container[data-v-d88eaf94]{display:flex;font-family:Segoe UI,Microsoft YaHei,sans-serif;border:none;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #00000014;background-color:#fff}.subject-list[data-v-d88eaf94]{padding:20px;border-right:1px solid #e6f0ff}.subject-list h3[data-v-d88eaf94]{margin-top:0;margin-bottom:20px;color:#2c5282;font-weight:600;font-size:18px;letter-spacing:.5px}.datalist[data-v-d88eaf94]{list-style:none;padding:0;margin:0}.datalist li[data-v-d88eaf94]{padding:12px 16px;margin-bottom:8px;background-color:#fff;border-radius:6px;cursor:pointer;transition:all .2s ease;user-select:none;color:#4a5568;border:1px solid #edf2f7;box-shadow:0 1px 3px #00000005}.datalist li[data-v-d88eaf94]:hover{background-color:var(--drag-bg-hover-color);transform:translateY(-1px)}.datalist li.active[data-v-d88eaf94]{background-color:var(--drag-bg-color);border-left:3px solid var(--primary-color);color:var(--primary-color);font-weight:500}.datalist li[draggable=true][data-v-d88eaf94]{cursor:grab}.datalist li[draggable=true][data-v-d88eaf94]:active{cursor:grabbing}.schedule-container[data-v-d88eaf94]{flex:1;padding:20px;background-color:#fff}.schedule-header[data-v-d88eaf94]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.schedule-header h3[data-v-d88eaf94]{margin:0;color:#2c5282;font-weight:600;font-size:18px;letter-spacing:.5px}.action-buttons[data-v-d88eaf94]{display:flex;gap:10px}.export-btn[data-v-d88eaf94],.clear-btn[data-v-d88eaf94]{background-color:var(--primary-color);color:#fff;border:none;padding:10px 18px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;box-shadow:0 2px 4px #4299e133}.export-btn[data-v-d88eaf94]:hover,.clear-btn[data-v-d88eaf94]:hover{background-color:#3182ce;transform:translateY(-1px);box-shadow:0 4px 6px #4299e140}.export-btn[data-v-d88eaf94]:active,.clear-btn[data-v-d88eaf94]:active{transform:translateY(0)}.schedule-grid[data-v-d88eaf94]{position:relative;border:1px solid #e6f0ff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #00000008}.grid-row[data-v-d88eaf94]{display:flex}.grid-cell[data-v-d88eaf94]{flex:1;border:1px solid #e6f0ff;padding:12px;display:flex;align-items:center;justify-content:center;text-align:center;transition:background-color .2s ease}.grid-cell[data-v-d88eaf94]:hover{background-color:var(--course-row-col-bg-hover-color)}.header-row[data-v-d88eaf94]{background-color:var(--course-row-col-bg-color)}.header-row .grid-cell[data-v-d88eaf94]:hover{background-color:var(--course-row-col-bg-hover-color)}.header-cell[data-v-d88eaf94]{min-height:50px;font-weight:600;color:#2c5282;letter-spacing:.5px}.time-cell[data-v-d88eaf94]{background-color:var(--course-row-col-bg-color)}.time-cell[data-v-d88eaf94]:hover{background-color:var(--course-row-col-bg-hover-color)}.course-item[data-v-d88eaf94]{width:100%;height:100%;background-color:var(--drag-bg-color);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:8px;color:var(--primary-color);font-weight:500;box-shadow:0 2px 5px #4299e11a;transition:all .2s ease}.course-item[data-v-d88eaf94]:hover{background-color:var(--drag-bg-hover-color);transform:scale(1.02)}.watermark[data-v-d88eaf94]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--watermark-color);pointer-events:none;white-space:nowrap;user-select:none;transform:rotate(-30deg);z-index:10}.grid-cell.drag-over[data-v-d88eaf94]{background-color:var(--drag-bg-color);border:2px dashed var(--primary-color)}.move-success-tip[data-v-d88eaf94]{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:10px 20px;border-radius:6px;z-index:100}.confirm-dialog[data-v-d88eaf94]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:200}.dialog-content[data-v-d88eaf94]{background-color:#fff;padding:20px;border-radius:6px;box-shadow:0 4px 20px #0003}.dialog-buttons[data-v-d88eaf94]{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.confirm-btn[data-v-d88eaf94],.cancel-btn[data-v-d88eaf94]{background-color:var(--primary-color);color:#fff;border:none;padding:10px 18px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;box-shadow:0 2px 4px #4299e133}.confirm-btn[data-v-d88eaf94]:hover,.cancel-btn[data-v-d88eaf94]:hover{background-color:#3182ce;transform:translateY(-1px);box-shadow:0 4px 6px #4299e140}.confirm-btn[data-v-d88eaf94]:active,.cancel-btn[data-v-d88eaf94]:active{transform:translateY(0)}@media (max-width: 768px){.course-schedule-container[data-v-d88eaf94]{flex-direction:column}.subject-list[data-v-d88eaf94]{width:100%;border-right:none;border-bottom:1px solid #e6f0ff}}