/* 网盘工具栏样式 */ /* 头部 */ .header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: white; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; } /* 面包屑导航 */ .breadcrumb { display: flex; align-items: center; flex: 1; overflow-x: auto; gap: 8px; } .breadcrumb-item { display: inline-flex; align-items: center; padding: 6px 12px; color: #666; font-size: 14px; white-space: nowrap; cursor: pointer; border-radius: 4px; transition: all 0.2s; } .breadcrumb-item:hover { background: #f0f0f0; color: #333; } .breadcrumb-item.active { color: #333; font-weight: 500; } .breadcrumb-item:not(:last-child)::after { content: '/'; margin-left: 8px; color: #999; } /* 头部右侧区域 */ .header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* 上传按钮 */ .btn-upload { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); } .btn-upload:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .btn-upload:active { transform: translateY(0); } .btn-upload svg { flex-shrink: 0; } /* 搜索框 */ .search-box { display: flex; align-items: center; position: relative; background: #f5f5f5; border-radius: 20px; padding: 0 12px; transition: all 0.2s; } .search-box:focus-within { background: white; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); } .search-icon { color: #999; flex-shrink: 0; } .search-box input { width: 180px; padding: 8px 8px; border: none; background: transparent; font-size: 14px; outline: none; color: #333; } .search-box input::placeholder { color: #999; } .search-clear { display: flex; align-items: center; justify-content: center; background: none; border: none; color: #999; cursor: pointer; padding: 4px; flex-shrink: 0; } .search-clear:hover { color: #666; } /* 操作按钮 */ /* 选中操作栏 */ .selection-bar { display: none; justify-content: space-between; align-items: center; padding: 10px 24px; background: #f7f9fc; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; } .selection-bar.show { display: flex; } .selection-count { font-size: 14px; color: #666; } .selection-actions { display: flex; align-items: center; gap: 4px; } .btn-action { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: transparent; color: #333; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .btn-action:hover { background: rgba(24, 144, 255, 0.1); color: #1890ff; } .btn-action svg { color: inherit; } .btn-action.btn-danger { color: #333; background: transparent; } .btn-action.btn-danger:hover { background: rgba(255, 77, 79, 0.1); color: #ff4d4f; }