save

src/pages/Social/Sustainability.module.css

@@ -0,0 +1,91 @@
+.socialResponsibilityCaseDataContent {
+    margin-top: -50px;
+    margin-bottom: 100px;
+}
+
+.socialResponsibilityCaseDataItems {
+    /* 2列布局 gap-30 每行交替变化，如：
+    [810*480 | 560*480]
+    [560*480 | 810*480]
+    使用 flex + nth-child 分配宽窄比例
+    */
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+}
+
+.socialResponsibilityCaseDataItem {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #fff;
+    position: relative;
+
+    .mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.1);
+    }
+
+    &:hover {
+        .socialResponsibilityCaseDataItemContentInner {
+            background: rgba(20,53,92,0.9);
+            justify-content: flex-start;
+            .socialResponsibilityCaseDataItemTitle {
+                text-align: left;
+            }
+        }
+
+        .socialResponsibilityCaseDataItemContent {
+            display: block;
+        }
+    }
+    .socialResponsibilityCaseDataItemContentInner {
+        padding: 50px;
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+
+    .socialResponsibilityCaseDataItemTitle {
+        font-weight: 500;
+        font-size: 24px;
+        color: #FFFFFF;
+        line-height: 34px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .socialResponsibilityCaseDataItemContent {
+        margin-top: 20px;
+        font-weight: 400;
+        font-size: 18px;
+        color: #FFFFFF;
+        line-height: 34px;
+        text-align: justify;
+        font-style: normal;
+        text-transform: none;
+        display: none;
+    }
+}
+
+/* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */
+/* 偶数行 [窄|宽]: 4n+3 窄, 4n+4 宽 */
+/* 810+560=1370，每行总宽 = 100% - 30px */
+.socialResponsibilityCaseDataItem:nth-child(4n + 1),
+.socialResponsibilityCaseDataItem:nth-child(4n + 4) {
+    flex-basis: calc((100% - 30px) * 810 / 1370);
+    aspect-ratio: 810 / 480;
+}
+
+.socialResponsibilityCaseDataItem:nth-child(4n + 2),
+.socialResponsibilityCaseDataItem:nth-child(4n + 3) {
+    flex-basis: calc((100% - 30px) * 560 / 1370);
+    aspect-ratio: 560 / 480;
+}