合并冲突
Change-Id: I3b6ac5ae87aad8fe746eceecc8f92fc5574b50a8
diff --git a/src/pages/Home/index.module.css b/src/pages/Home/index.module.css
new file mode 100644
index 0000000..cf6faa4
--- /dev/null
+++ b/src/pages/Home/index.module.css
@@ -0,0 +1,359 @@
+.homeContainer {
+ padding: 20px;
+ margin-top: 20px;
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+ border-radius: 15px;
+ min-height: 100vh;
+}
+
+.searchBarContainer {
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ top: 60px;
+ left: 0;
+ right: 0;
+ /* z-index: 1000; */
+ padding: 10px 0;
+ background: rgba(255, 255, 255, 0.05);
+ min-width: fit-content
+}
+
+.searchInput {
+ width: 80%;
+ padding: 8px;
+ font-size: 18px;
+ max-width: 1000px;
+ border: 2px solid #333;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ color: white;
+ backdrop-filter: blur(5px);
+}
+
+.searchInput:focus {
+ outline: none;
+ border: 2px solid #666;
+ /* 灰色高亮边框 */
+}
+
+
+.secondRow {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+
+.leftBox {
+ margin-left: 20px;
+ flex: 1;
+ padding: 20px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ max-width: 500px;
+ min-width: 500px;
+ gap: 15px;
+}
+
+.rightCard {
+ flex: 1;
+ padding: 20px;
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
+ /* 星空渐变背景 */
+ border-radius: 12px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ max-width: 350px;
+ margin-left: 20px;
+ height: 200px;
+}
+
+.rightCard2 {
+ flex: 1;
+ padding: 10px;
+ background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
+ /* 星空渐变背景 */
+ border-radius: 12px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ max-width: 200px;
+ width: 100px;
+ margin-left: 20px;
+ height: 200px;
+}
+
+/* 覆盖Ant Design Card默认样式 */
+.rightCard .ant-card {
+ background: transparent;
+ border-radius: 12px;
+}
+
+.rightCard .ant-card-head {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.rightCard .ant-card-head-title {
+ color: #fff;
+ font-size: 16px;
+}
+
+/* 覆盖Statistic组件样式 */
+.rightCard .ant-statistic-title {
+ color: #a8b2d1;
+ font-size: 12px;
+}
+
+.rightCard .ant-statistic-content-value {
+ color: #fff;
+ font-size: 16px;
+ font-weight: 600;
+}
+
+/* 覆盖Button组件样式 */
+.rightCard .ant-btn {
+ padding: 10px;
+ background: linear-gradient(135deg, #4a69bd, #6c5ce7);
+ border: none;
+ border-radius: 8px;
+ color: white;
+ font-size: 14px;
+ transition: transform 0.2s;
+}
+
+.rightCard .ant-btn:hover {
+ transform: translateY(-2px);
+ background: linear-gradient(135deg, #3c56a8, #5b4ac7);
+ color: white;
+}
+
+.rightCard .ant-btn-primary {
+ background: linear-gradient(135deg, #6c5ce7, #4a69bd);
+ /* 主按钮颜色调整 */
+}
+
+.statsContainer {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 15px;
+}
+
+.statItem {
+ flex: 1;
+ padding: 12px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 8px;
+ text-align: center;
+}
+
+.statTitle {
+ font-size: 12px;
+ color: #a8b2d1;
+ margin-bottom: 4px;
+}
+
+.statValue {
+ font-size: 16px;
+ color: #fff;
+ font-weight: 600;
+}
+
+.buttonGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.actionButton {
+ padding: 10px;
+ background: linear-gradient(135deg, #4a69bd, #6c5ce7);
+ /* 星空蓝紫色渐变 */
+ border: none;
+ border-radius: 8px;
+ color: white;
+ font-size: 14px;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.actionButton:hover {
+ transform: translateY(-2px);
+ background: linear-gradient(135deg, #3c56a8, #5b4ac7);
+}
+
+.textContent {
+ display: flex;
+
+ flex-direction: column;
+ /* 垂直排列 */
+ width: min-content;
+}
+
+.titlebox {
+ width: 220px;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.middleBox {
+ margin-left: 20px;
+ flex: 1;
+ padding: 20px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ max-width: 350px;
+}
+
+.gitAnimation {
+ height: 150px;
+ min-width: 150px;
+ /* 固定动图区域宽度 */
+ /* 保持正方形 */
+ width: 150px;
+ min-width: 150px;
+ border-radius: 8px;
+ /* 移除背景色，使用实际图片 */
+}
+
+.gitSquare {
+ width: 100%;
+ /* 完全填充容器 */
+ height: 100%;
+ object-fit: cover;
+ /* 保持宽高比填充 */
+ border-radius: 8px;
+ min-width: 60px;
+ min-height: 60px;
+}
+
+.rightBox {
+ flex: 1;
+ padding: 20px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ margin-left: 20px;
+ backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.carouselContainer {
+ overflow: hidden;
+ position: relative;
+}
+
+.carouselItem {
+ padding: 10px 0;
+}
+
+.thirdRow {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 24px;
+ margin-top: 32px;
+}
+
+.postCard {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 16px;
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+ padding: 16px;
+ min-width: 280px;
+ max-width: 320px;
+ display: flex;
+ flex-direction: column;
+ min-height: 200px;
+}
+
+.cardContent {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ width: 100%;
+}
+
+.postCard:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.cardContent {
+ display: flex;
+ gap: 16px;
+ width: 100%;
+}
+
+.cardImage {
+ width: 120px;
+ height: 90px;
+ object-fit: cover;
+ border-radius: 8px;
+ background: #f0f0f0;
+}
+
+.infoWrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.postTitle {
+ font-size: 14px;
+ font-weight: 500;
+ color: white;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+}
+
+.postAuthor {
+ font-size: 12px;
+ color: #ddd;
+ margin: 0;
+}
+
+.tagsContainer {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ margin: 4px 0;
+}
+
+.tag {
+ font-size: 11px;
+ padding: 2px 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 12px;
+ color: #eee;
+}
+
+.statsContainer {
+ display: flex;
+ gap: 16px;
+ margin-top: auto;
+}
+
+.statItem {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ color: #bbb;
+}
\ No newline at end of file