-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -167,35 +173,44 @@ $input-height: 3rem;
.home-left {
height: 100%;
+ width: 100%;
display: grid;
- gap: 10px;
+ grid-template-rows: repeat(2, 1fr);
+ grid-template-columns: repeat(1, 1fr);
+ gap: 20px;
+ .left-box {
+ display: flex; // 使用 Flexbox 布局
+ flex-direction: row; // 子元素水平排列(默认值)
+ align-items: flex-start; // 子元素顶部对齐
+ overflow-x: auto; // 横向滚动支持
+ width: 100%; // 父容器宽度占满
+ gap: 10px; // 子元素之间的间距(可选)
+ .card {
+ flex: 0 0 auto;
+ width: calc(100% / 3 - 10px);
+ height: 100%;
+ min-width: 200px;
+ border: 1px solid rgb(225, 225, 225);
+ border-radius: 10px;
+ background: rgba(147, 203, 255, 0.1);
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
- .card {
- text-align: center;
- width: 100%;
- height: 100%;
- border: 1px solid rgb(225, 225, 225);
- position: relative;
- border-radius: 10px 10px 10px 10px;
- background: #ffffff;
- background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
- background: rgba(147, 203, 255, 0.1);
-
- .title-line {
- height: 1vw;
- background-color: #b3d9ff;
- position: absolute;
- width: 100%;
- border-radius: 10px 10px 0 0;
- margin: -2.12rem;
- }
+ .title-line {
+ height: 1vw;
+ background-color: #b3d9ff;
+ position: absolute;
+ width: 100%;
+ border-radius: 10px 10px 0 0;
+ margin: -2.12rem;
+ }
- .card-title-name {
- display: flex;
- align-items: center;
- gap: 10px;
- font-size: 20px;
- padding: 1rem;
+ .card-title-name {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 20px;
+ padding: 1rem;
+ }
}
}
}