前段
Change-Id: I718d4d07ea03c6d2b6bcbd4d426c5d1af2201bf4
diff --git a/src/components/Dashboard.css b/src/components/Dashboard.css
new file mode 100644
index 0000000..af9e421
--- /dev/null
+++ b/src/components/Dashboard.css
@@ -0,0 +1,649 @@
+/* src/components/Dashboard.css */
+.dashboard-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ background-color: #f5f5f5;
+ }
+
+ .top-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ }
+
+ .search-container {
+ display: flex;
+ flex-grow: 1;
+ max-width: 600px;
+ margin: 0 auto;
+ }
+
+ .search-input {
+ flex-grow: 1;
+ padding: 8px 15px;
+ border: 1px solid #ddd;
+ border-radius: 20px 0 0 20px;
+ font-size: 16px;
+ outline: none;
+ }
+
+ .search-button {
+ padding: 8px 15px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 0 20px 20px 0;
+ cursor: pointer;
+ font-size: 16px;
+ }
+
+ .search-button:hover {
+ background-color: #0056b3;
+ }
+
+ .user-info {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .user-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+
+ .username {
+ font-weight: bold;
+ }
+
+ .logout-button {
+ padding: 5px 10px;
+ background-color: #f8f9fa;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 10px;
+ }
+
+ .logout-button:hover {
+ background-color: #e9ecef;
+ }
+
+ .nav-tabs {
+ display: flex;
+ background-color: #fff;
+ border-bottom: 1px solid #ddd;
+ padding: 0 20px;
+ }
+
+ .tab-button {
+ padding: 12px 20px;
+ background: none;
+ border: none;
+ border-bottom: 3px solid transparent;
+ cursor: pointer;
+ font-size: 16px;
+ color: #666;
+ }
+
+ .tab-button:hover {
+ color: #007bff;
+ }
+
+ .tab-button.active {
+ color: #007bff;
+ border-bottom-color: #007bff;
+ font-weight: bold;
+ }
+
+ .content-area {
+ flex-grow: 1;
+ padding: 20px;
+ background-color: #fff;
+ margin: 20px;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ }
+
+ .loading, .error {
+ padding: 20px;
+ text-align: center;
+ font-size: 18px;
+ }
+
+ .error {
+ color: #dc3545;
+ }
+
+/* 公告区样式 */
+ /* 轮播图样式 */
+.carousel-container {
+ position: relative;
+ width: 100%;
+ height: 200px;
+ overflow: hidden;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ }
+
+ .carousel-slide {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 1s ease-in-out;
+ }
+
+ .carousel-slide.active {
+ opacity: 1;
+ }
+
+ .carousel-image {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-weight: bold;
+ color: white;
+ }
+
+ .gray-bg {
+ background-color: #666;
+ }
+
+ .carousel-dots {
+ position: absolute;
+ bottom: 15px;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.5);
+ cursor: pointer;
+ }
+
+ .dot.active {
+ background-color: white;
+ }
+
+ /* 公告网格样式 */
+ .announcement-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 20px;
+ }
+
+ .announcement-card {
+ background-color: white;
+ padding: 15px;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ transition: transform 0.2s, box-shadow 0.2s;
+ }
+
+ .announcement-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .announcement-card h3 {
+ margin-top: 0;
+ color: #007bff;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 8px;
+ }
+
+ .announcement-card p {
+ margin-bottom: 0;
+ color: #666;
+ line-height: 1.5;
+ }
+/* 分享区样式 */
+ /* 上传头部样式 */
+.upload-header {
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: flex-start;
+}
+
+.upload-btn {
+ padding: 10px 20px;
+ background: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.upload-btn:hover {
+ background: #40a9ff;
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0,0,0,0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.upload-modal {
+ background: white;
+ padding: 25px;
+ border-radius: 8px;
+ width: 500px;
+ max-width: 90%;
+ position: relative;
+}
+
+.close-btn {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: none;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+}
+
+/* 表单样式 */
+.form-group {
+ margin-bottom: 15px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 5px;
+ font-weight: 500;
+}
+
+.form-group input[type="text"],
+.form-group select,
+.form-group textarea {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+}
+
+.form-group textarea {
+ min-height: 80px;
+}
+
+.form-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ margin-top: 20px;
+}
+
+.cancel-btn {
+ padding: 8px 15px;
+ background: #f5f5f5;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.cancel-btn:hover {
+ background: #e6e6e6;
+}
+ /* 筛选区域 */
+.filter-section {
+ background: #f9f9f9;
+ padding: 15px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+}
+
+.filter-group {
+ margin-bottom: 15px;
+}
+
+.filter-group h4 {
+ margin: 0 0 8px 0;
+ font-size: 15px;
+ color: #666;
+}
+
+/* 筛选按钮 */
+.filter-btn {
+ padding: 6px 12px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+ border: 1px solid #ddd;
+ background: white;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.filter-btn:hover {
+ border-color: #1890ff;
+ color: #1890ff;
+}
+
+.filter-btn.active {
+ background: #1890ff;
+ color: white;
+ border-color: #1890ff;
+}
+
+/* 确定按钮 */
+.confirm-btn {
+ padding: 8px 20px;
+ background: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: opacity 0.3s;
+}
+
+.confirm-btn:hover {
+ background: #007bff;
+}
+
+.confirm-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+
+/* 资源列表 */
+.resource-list {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.resource-item {
+ display: flex;
+ align-items: center;
+ padding: 15px;
+ background-color: white;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.resource-item:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.resource-poster {
+ margin-right: 15px;
+}
+
+.poster-image {
+ width: 60px;
+ height: 80px;
+ background-color: #666;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 24px;
+ font-weight: bold;
+ border-radius: 4px;
+}
+
+.resource-info {
+ flex-grow: 1;
+}
+
+.resource-title {
+ margin: 0 0 5px 0;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.resource-meta {
+ margin: 0;
+ font-size: 14px;
+ color: #666;
+}
+
+.resource-stats {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ margin-right: 20px;
+ min-width: 150px;
+}
+
+.stat {
+ font-size: 13px;
+ color: #666;
+ margin-bottom: 5px;
+}
+
+.download-btn {
+ padding: 8px 15px;
+ background-color: #28a745;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.2s;
+}
+
+.download-btn:hover {
+ background-color: #218838;
+}
+/* 发帖按钮样式 */
+.post-header {
+ margin-bottom: 20px;
+ text-align: right;
+}
+
+.create-post-btn {
+ background-color: #1890ff;
+ color: white;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
+}
+
+.create-post-btn:hover {
+ background-color: #40a9ff;
+}
+
+/* 弹窗样式 */
+.post-modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.post-modal {
+ background-color: white;
+ padding: 24px;
+ border-radius: 8px;
+ width: 500px;
+ max-width: 90%;
+ position: relative;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.post-modal h3 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ font-size: 18px;
+ color: #333;
+}
+
+.modal-close-btn {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ background: none;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ color: #999;
+}
+
+.modal-close-btn:hover {
+ color: #666;
+}
+
+/* 表单样式 */
+.form-group {
+ margin-bottom: 16px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: 500;
+ color: #333;
+}
+
+.form-group input[type="text"],
+.form-group textarea {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid #d9d9d9;
+ border-radius: 4px;
+ font-size: 14px;
+}
+
+.form-group textarea {
+ min-height: 120px;
+ resize: vertical;
+}
+
+.upload-image-btn {
+ display: flex;
+ align-items: center;
+}
+
+.upload-image-btn label {
+ background-color: #f5f5f5;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ border: 1px dashed #d9d9d9;
+ margin-right: 10px;
+ transition: all 0.3s;
+}
+
+.upload-image-btn label:hover {
+ border-color: #1890ff;
+ color: #1890ff;
+}
+
+.image-name {
+ font-size: 14px;
+ color: #666;
+}
+
+/* 按钮样式 */
+.form-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 24px;
+}
+
+.cancel-btn {
+ background-color: #f5f5f5;
+ color: #333;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 10px;
+ transition: background-color 0.3s;
+}
+
+.cancel-btn:hover {
+ background-color: #e6e6e6;
+}
+
+.submit-btn {
+ background-color: #1890ff;
+ color: white;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.submit-btn:hover {
+ background-color: #40a9ff;
+}
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ margin: 20px 0;
+ gap: 5px;
+}
+
+.pagination button {
+ padding: 5px 10px;
+ border: 1px solid #ddd;
+ background: white;
+ cursor: pointer;
+}
+
+.pagination button.active {
+ background: #1890ff;
+ color: white;
+ border-color: #1890ff;
+}
+
+.pagination button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.filter-section {
+ position: sticky;
+ top: 0;
+ background: white;
+ z-index: 100;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
\ No newline at end of file