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 @@
+
+
+
+
+
+
![]()
+
海军某部开展实战化训练 锤炼制胜本领
+
+
+
![]()
+
东部战区海军某驱逐舰支队海上演训
+
+
+
![]()
+
海军航空兵某团组织跨昼夜飞行训练
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
+
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
+
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
内容文字占位内容文字占位
+
+
+
+