Update templates/index.html

templates/index.html

@@ -169,6 +169,7 @@
             width: 75%;
             box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
             transition: transform 0.3s ease, background-color 0.3s ease;
+            height: 50%;
         }
         .time-slot .course:hover {
             transform: scale(1.05);
@@ -178,7 +179,7 @@
         .schedule-container {
             display: grid;
             grid-template-columns: 70px repeat(7, 1fr);
-            gap: 2px;
+            gap: 1px;
             margin: 10px 20px;
             background-color: #fff;
             border-radius: 10px;
@@ -188,7 +189,7 @@
 
         /* 移动端适配 */
         @media (max-width: 768px) {
-            body {
+             body {
                 font-size: 14px;
                 padding: 5px;
             }
@@ -196,52 +197,86 @@
                 font-size: 20px;
                 margin: 15px 0;
             }
-            .controls {
-                flex-direction: column;
-                padding: 10px;
-                margin: 5px;
-            }
-            .controls select,
-            .controls button {
-                padding: 8px;
-                font-size: 12px;
-                margin: 5px;
-            }
+             .controls {
+                    display: flex;
+                    flex-direction: row; /* 保持在一行内 */
+                    flex-wrap: nowrap; /* 禁止换行 */
+                    justify-content: space-around; /* 均匀分布各个控件 */
+                    align-items: center; /* 纵向居中 */
+                    padding: 10px 5px; /* 增加一些内边距，使其不显得太拥挤 */
+                    margin: 5px;
+                    gap: 5px; /* 控制组件之间的间距 */
+                }
+                .controls select,
+                .controls button {
+                    padding: 6px; /* 适当减少内边距以适应小屏幕 */
+                    font-size: 12px; /* 调整字体大小适应小屏幕 */
+                    margin: 2px;
+                    min-width: 80px; /* 设置最小宽度，确保控件在小屏幕上仍可点击 */
+                }
+
             .time-header {
-                grid-template-columns: 50px repeat(7, 1fr);
-                font-size: 10px;
-                padding: 8px;
+                grid-template-columns: 25px repeat(7, 1fr);
+                font-size: 12px; /* 调整字体大小以适合移动端 */
+                padding: 12px 5px; /* 增加上下的内边距使其看起来更高 */
+                width: 95%;
+                margin: 10px 5px;
             }
             .schedule-container {
-                grid-template-columns: 50px repeat(7, 1fr);
-                margin: 5px;
+                grid-template-columns: 22px repeat(7, minmax(0, 1fr));
+                margin: 3px;
+                display: grid;
+                gap: 1px;
+
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+
             }
             .day {
                 padding: 3px;
                 border: 1px solid #ccc;
                 border-radius: 5px;
             }
-            /* .time-slot .course {
-                font-size: 10px;
-                padding: 10px;
-                width: 85%;
-            } */
-           .time-slot .course {
-            position: absolute;
-            background-color: #a7d8de;
-            color: #333;
-            border-radius: 5px;
-            padding: 25px;
-            font-size: 10px;
-            font-weight: bold;
-            text-align: center;
-            margin: 5px;
-            width: 65%;
-            /* height: 100%; */
-            box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, background-color 0.3s ease;
-        }
+            .time-column {
+                grid-column: 1;
+                text-align: center;
+                font-size: 15px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                line-height: 1.2;
+
+            }
+            .time-slot .course {
+                font-size: 12px;
+                padding: 3px;
+                /*height: auto;*/
+                width: auto;
+                word-break: break-word; /* 确保长单词在小屏幕上也会换行 */
+                white-space: normal; /* 允许文本换行 */
+                overflow-wrap: break-word; /* 处理可能过长的文本，强制其换行 */
+                 margin: 1px;
+                height: 90%;
+            }
         }
+        /*   .time-slot .course {*/
+        /*    position: absolute;*/
+        /*    background-color: #a7d8de;*/
+        /*    color: #333;*/
+        /*    border-radius: 5px;*/
+        /*    padding: 25px;*/
+        /*    font-size: 10px;*/
+        /*    font-weight: bold;*/
+        /*    text-align: center;*/
+        /*    margin: 5px;*/
+        /*    width: 65%;*/
+        /*    !* height: 100%; *!*/
+        /*    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);*/
+        /*    transition: transform 0.3s ease, background-color 0.3s ease;*/
+        /*}*/
+
     </style>
 </head>