diff --git a/web/assest/新闻logo.png b/web/assest/新闻logo.png new file mode 100644 index 0000000..a18deca Binary files /dev/null and b/web/assest/新闻logo.png differ diff --git a/web/dbzq.css b/web/dbzq.css index fa1b11d..45f3872 100644 --- a/web/dbzq.css +++ b/web/dbzq.css @@ -367,7 +367,7 @@ img { transform: translateX(-50%); width: 1200px; height: 105px; - background: rgba(255, 255, 255, 0.3); + background: #FDFDFD; box-sizing: border-box; z-index: 2; display: flex; @@ -416,13 +416,231 @@ img { white-space: nowrap; } +/* ========== 板块4 ========== */ +.block-4 { + position: absolute; + top: 614px; + left: 50%; + transform: translateX(-50%); + width: 1200px; + height: 400px; + background: #FDFDFD; + box-sizing: border-box; + z-index: 2; +} + +.block-4 .block-4-logo { + position: absolute; + top: 2px; + right: 21px; + width: 64px; + height: 61px; + z-index: 3; +} + +.block-4 .block-4-carousel { + position: absolute; + left: 14px; + top: 15px; + width: 616px; + height: 344px; + background: #d9d9d9; + overflow: hidden; +} + +.block-4 .carousel-slide { + position: absolute; + inset: 0; + opacity: 0; + transition: opacity 0.4s ease; +} + +.block-4 .carousel-slide.is-active { + opacity: 1; + z-index: 1; +} + +.block-4 .carousel-slide img { + width: 100%; + height: 100%; + object-fit: cover; + background: #c5d0de; +} + +.block-4 .carousel-slide:nth-child(2) img { + background: #b7c6d8; +} + +.block-4 .carousel-slide:nth-child(3) img { + background: #a8bbd0; +} + +.block-4 .carousel-slide p { + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 40px; + margin: 0; + padding: 0 16px; + background: rgba(11, 64, 138, 0.72); + color: #fff; + font-family: "Microsoft YaHei", "微软雅黑", sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 40px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.block-4 .carousel-btn { + position: absolute; + top: 50%; + z-index: 2; + width: 28px; + height: 48px; + margin-top: -24px; + border: 0; + background: rgba(0, 0, 0, 0.35); + color: #fff; + font-size: 24px; + line-height: 48px; + cursor: pointer; +} + +.block-4 .carousel-prev { + left: 0; +} + +.block-4 .carousel-next { + right: 0; +} + +.block-4 .carousel-dots { + position: absolute; + right: 12px; + bottom: 12px; + z-index: 2; + display: flex; + gap: 6px; +} + +.block-4 .carousel-dots button { + width: 8px; + height: 8px; + padding: 0; + border: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.55); + cursor: pointer; +} + +.block-4 .carousel-dots button.is-active { + background: #fff; +} + +.block-4 .block-4-tabs { + position: absolute; + left: 666px; + top: 25px; + display: flex; + gap: 8px; +} + +.block-4 .block-4-tab { + width: 83px; + height: 22px; + padding: 0; + border: 0; + border-radius: 11px; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.block-4 .block-4-tab span { + width: 100%; + height: 22px; + font-family: "Microsoft YaHei", "微软雅黑", sans-serif; + font-weight: 300; + font-size: 16px; + color: #7EA3CC; + line-height: 22px; + text-align: center; + font-style: normal; + text-transform: none; +} + +.block-4 .block-4-tab.is-active { + background: #7EA3CC; +} + +.block-4 .block-4-tab.is-active span { + color: #FFFFFF; +} + +.block-4 .block-4-line { + position: absolute; + left: 659px; + top: 66px; + width: 523px; + height: 1px; + background: #6789B0; +} + +.block-4 .block-4-panel { + display: none; +} + +.block-4 .block-4-panel.is-active { + display: block; +} + +.block-4 .block-4-item { + position: absolute; + left: 660px; + width: 495px; + height: 36px; + background: #D9D9D9; + display: flex; + align-items: center; + padding-left: 12px; + box-sizing: border-box; +} + +.block-4 .block-4-item span { + width: 305px; + height: 16px; + font-family: "Microsoft YaHei", "微软雅黑", sans-serif; + font-weight: 400; + font-size: 16px; + color: #414141; + line-height: 16px; + letter-spacing: 1px; + text-align: left; + font-style: normal; + text-transform: none; + white-space: nowrap; + overflow: hidden; +} + +.block-4 .block-4-item:nth-child(1) { top: 73px; } +.block-4 .block-4-item:nth-child(2) { top: 123px; } +.block-4 .block-4-item:nth-child(3) { top: 173px; } +.block-4 .block-4-item:nth-child(4) { top: 223px; } +.block-4 .block-4-item:nth-child(5) { top: 273px; } +.block-4 .block-4-item:nth-child(6) { top: 323px; } + /* ========== Footer ========== */ .footer { position: relative; width: 100%; height: 522px; background: url("assest/网站底部1600 1.png") center top / 100% 100% no-repeat; - margin-top: 120px; + margin-top: 540px; box-sizing: border-box; } diff --git a/web/dbzq.html b/web/dbzq.html index 3272998..440c0f9 100644 --- a/web/dbzq.html +++ b/web/dbzq.html @@ -147,6 +147,62 @@ + +
+ + +
+ + + +
+
+
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
+
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
+
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
+
+ + \ No newline at end of file