Compare commits
7 Commits
0768ba0ed2
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
 zhaichao
|
c915268d5b | ||
|
zhaichao
|
d28ba4810e | ||
|
zhaichao
|
f71648335a | ||
|
zhaichao
|
5480372b89 | ||
|
zhaichao
|
eb183c4a5c | ||
|
zhaichao
|
4c5994c13c | ||
|
zhaichao
|
0f7240ac57 |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
+475
-343
@@ -1,3 +1,17 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "叶根友飘悦飞草2.0";
|
||||||
|
src: url("fonts/叶根友飘悦飞草2.0.TTF") format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "方正粗倩简体";
|
||||||
|
src: url("fonts/FZCuQian.ttf") format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -9,6 +23,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
position: relative;
|
||||||
width: 1600px;
|
width: 1600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: #ECEBF1;
|
background: #ECEBF1;
|
||||||
@@ -55,7 +70,6 @@ img {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 房子图标 */
|
|
||||||
.topbar .welcome-icon {
|
.topbar .welcome-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 203px;
|
left: 203px;
|
||||||
@@ -65,7 +79,6 @@ img {
|
|||||||
height: 13px;
|
height: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 欢迎文字 */
|
|
||||||
.topbar .welcome-text {
|
.topbar .welcome-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 222px;
|
left: 222px;
|
||||||
@@ -75,7 +88,6 @@ img {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 欢迎右侧箭头 */
|
|
||||||
.topbar .welcome-arrow {
|
.topbar .welcome-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 380px;
|
left: 380px;
|
||||||
@@ -85,7 +97,6 @@ img {
|
|||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 军网导航 */
|
|
||||||
.topbar .nav {
|
.topbar .nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 416px;
|
left: 416px;
|
||||||
@@ -94,7 +105,6 @@ img {
|
|||||||
color: #414141;
|
color: #414141;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 军网导航箭头 */
|
|
||||||
.topbar .nav-arrow {
|
.topbar .nav-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 474px;
|
left: 474px;
|
||||||
@@ -104,7 +114,6 @@ img {
|
|||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 搜索框 */
|
|
||||||
.topbar .searchbox {
|
.topbar .searchbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 688px;
|
left: 688px;
|
||||||
@@ -151,13 +160,12 @@ img {
|
|||||||
padding: 0 14px;
|
padding: 0 14px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
background: #fff;
|
background: #F4F4F4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #626468;
|
color: #626468;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 用户信息 */
|
|
||||||
.user-info {
|
.user-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1046px;
|
left: 1046px;
|
||||||
@@ -167,7 +175,6 @@ img {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 右侧链接组 - 每个链接独立绝对定位 */
|
|
||||||
.topbar .toplinks-link {
|
.topbar .toplinks-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -210,7 +217,6 @@ img {
|
|||||||
left: 1326px;
|
left: 1326px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 最右侧箭头 */
|
|
||||||
.topbar .links-arrow {
|
.topbar .links-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1388px;
|
left: 1388px;
|
||||||
@@ -226,399 +232,525 @@ img {
|
|||||||
|
|
||||||
/* ========== 板块3：网站头部切图 ========== */
|
/* ========== 板块3：网站头部切图 ========== */
|
||||||
.header-banner {
|
.header-banner {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-banner img {
|
.header-banner img:first-child {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 通用板块容器 ========== */
|
.header-banner .header-logo {
|
||||||
.section {
|
position: absolute;
|
||||||
width: 100%;
|
left: 199px;
|
||||||
padding: 30px 0;
|
right: 1190px;
|
||||||
|
top: 23px;
|
||||||
|
bottom: 313px;
|
||||||
|
width: calc(100% - 1389px);
|
||||||
|
height: calc(100% - 336px);
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section .wrap {
|
.header-banner .layer-35 {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 32px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-banner .layer-35 > img:first-child {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-banner .layer-side-links {
|
||||||
|
position: absolute;
|
||||||
|
left: 1244px;
|
||||||
|
top: 11px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
flex-direction: column;
|
||||||
|
gap: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 板块标题 ========== */
|
.header-banner .layer-side-item {
|
||||||
.sec-title {
|
display: flex;
|
||||||
text-align: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
gap: 8px;
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-title h2 {
|
.header-banner .layer-side-item img {
|
||||||
display: inline-block;
|
width: 41px;
|
||||||
font-size: 22px;
|
height: 41px;
|
||||||
color: #1a4a8a;
|
flex-shrink: 0;
|
||||||
border-bottom: 2px solid #1a4a8a;
|
|
||||||
padding: 0 20px 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-title-en {
|
.header-banner .layer-side-item span {
|
||||||
font-size: 12px;
|
font-family: "方正粗倩简体", sans-serif;
|
||||||
color: #999;
|
font-size: 16px;
|
||||||
margin-top: 4px;
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-banner .layer-35-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 215px;
|
||||||
|
right: 392px;
|
||||||
|
top: 12px;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-banner .layer-nav-col {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-banner .layer-nav-col:not(:last-child)::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 8px;
|
||||||
|
width: 1px;
|
||||||
|
height: 70%;
|
||||||
|
background: rgba(180, 190, 210, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-banner .layer-nav-col h3 {
|
||||||
|
font-family: "叶根友飘悦飞草2.0", cursive;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 板块4：新闻资讯（3列） ========== */
|
.header-banner .layer-nav-col ul {
|
||||||
.news-section {
|
display: grid;
|
||||||
background: #fff;
|
grid-template-columns: 1fr 1fr;
|
||||||
|
column-gap: 6px;
|
||||||
|
row-gap: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-col {
|
.header-banner .layer-nav-culture ul {
|
||||||
flex: 1;
|
grid-template-columns: repeat(3, auto);
|
||||||
background: #f9f9f9;
|
column-gap: 10px;
|
||||||
border: 1px solid #e8e8e8;
|
justify-content: start;
|
||||||
padding: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-col h3 {
|
.header-banner .layer-nav-col li a {
|
||||||
font-size: 16px;
|
display: block;
|
||||||
color: #1a4a8a;
|
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
border-bottom: 1px solid #1a4a8a;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-pic img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
background: #ddd;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-pic h4 {
|
|
||||||
font-size: 15px;
|
|
||||||
color: #333;
|
|
||||||
margin: 10px 0 6px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-pic p {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #888;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-list li {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px dashed #eee;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
line-height: 1.6;
|
||||||
|
color: rgba(220, 228, 240, 0.9);
|
||||||
.news-list li a {
|
|
||||||
color: #333;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding-left: 10px;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-list li a::before {
|
.header-banner .layer-nav-col li a:hover {
|
||||||
content: "·";
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 板块3 ========== */
|
||||||
|
.block-3 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
top: 489px;
|
||||||
color: #1a4a8a;
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 1200px;
|
||||||
|
height: 105px;
|
||||||
|
background: #FDFDFD;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-3 .block-3-title {
|
||||||
|
width: 1024px;
|
||||||
|
height: 31px;
|
||||||
|
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 42px;
|
||||||
|
color: #0B408A;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-list li .date {
|
.block-3 .block-3-subs {
|
||||||
color: #999;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-list li a:hover {
|
|
||||||
color: #c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-rank li {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 7px 0;
|
justify-content: center;
|
||||||
border-bottom: 1px dashed #eee;
|
gap: 16px;
|
||||||
font-size: 13px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-rank .rank-num {
|
.block-3 .block-3-subs li {
|
||||||
display: inline-block;
|
width: 153px;
|
||||||
width: 18px;
|
height: 17px;
|
||||||
height: 18px;
|
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
line-height: 18px;
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #0B408A;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #ccc;
|
font-style: normal;
|
||||||
color: #fff;
|
text-transform: none;
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-rank li:nth-child(-n+3) .rank-num {
|
|
||||||
background: #c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-rank li a {
|
|
||||||
color: #333;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-rank li a:hover {
|
/* ========== 板块4 ========== */
|
||||||
color: #c00;
|
.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 {
|
||||||
.divider-wave {
|
position: absolute;
|
||||||
width: 100%;
|
top: 2px;
|
||||||
height: 60px;
|
right: 21px;
|
||||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 60' preserveAspectRatio='none'><path d='M0,30 Q200,0 400,30 T800,30 T1200,30 T1600,30 L1600,60 L0,60 Z' fill='%231a4a8a' opacity='0.15'/><path d='M0,40 Q200,20 400,40 T800,40 T1200,40 T1600,40' stroke='%231a4a8a' stroke-width='2' fill='none'/></svg>") center/100% 100% no-repeat;
|
width: 64px;
|
||||||
|
height: 61px;
|
||||||
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider-wave-2 {
|
.block-4 .block-4-carousel {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
height: 50px;
|
left: 14px;
|
||||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 50' preserveAspectRatio='none'><path d='M0,25 C200,5 400,45 800,25 C1200,5 1400,45 1600,25 L1600,50 L0,50 Z' fill='%231a4a8a' opacity='0.1'/></svg>") center/100% 100% no-repeat;
|
top: 15px;
|
||||||
}
|
width: 616px;
|
||||||
|
height: 344px;
|
||||||
/* ========== 红色丝带分隔条 ========== */
|
background: #d9d9d9;
|
||||||
.divider-ribbon {
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 50' preserveAspectRatio='none'><path d='M0,15 L1600,15 L1600,35 L800,45 L0,35 Z' fill='%23c00' opacity='0.85'/><path d='M0,15 L1600,15' stroke='%23ff6b6b' stroke-width='1'/></svg>") center/100% 100% no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 板块5：中心内容（标题+文章列表） ========== */
|
|
||||||
.article-section {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-section .wrap {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px dashed #e5e5e5;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list li .tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2px 8px;
|
|
||||||
background: #1a4a8a;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 12px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list li a {
|
|
||||||
flex: 1;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list li a:hover {
|
|
||||||
color: #c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list li .date {
|
|
||||||
color: #999;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 板块6：3卡片网格 ========== */
|
|
||||||
.card-grid-3 {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
flex: 1;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card img {
|
.block-4 .carousel-slide {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
height: 200px;
|
inset: 0;
|
||||||
background: #ddd;
|
opacity: 0;
|
||||||
object-fit: cover;
|
transition: opacity 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.block-4 .carousel-slide.is-active {
|
||||||
padding: 15px;
|
opacity: 1;
|
||||||
}
|
z-index: 1;
|
||||||
|
}
|
||||||
.card-body h4 {
|
|
||||||
font-size: 16px;
|
.block-4 .carousel-slide img {
|
||||||
color: #1a4a8a;
|
width: 100%;
|
||||||
margin-bottom: 8px;
|
height: 100%;
|
||||||
text-align: center;
|
object-fit: cover;
|
||||||
}
|
background: #c5d0de;
|
||||||
|
}
|
||||||
.card-body p {
|
|
||||||
font-size: 13px;
|
.block-4 .carousel-slide:nth-child(2) img {
|
||||||
color: #666;
|
background: #b7c6d8;
|
||||||
line-height: 1.6;
|
}
|
||||||
}
|
|
||||||
|
.block-4 .carousel-slide:nth-child(3) img {
|
||||||
/* ========== 板块7：双列+侧边栏 ========== */
|
background: #a8bbd0;
|
||||||
.layout-sidebar {
|
}
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
.block-4 .carousel-slide p {
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 260px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h3 {
|
|
||||||
background: #1a4a8a;
|
|
||||||
color: #fff;
|
|
||||||
padding: 12px 15px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar ul li a {
|
|
||||||
display: block;
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
color: #333;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar ul li a:hover {
|
|
||||||
background: #e8eef7;
|
|
||||||
color: #1a4a8a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #1a4a8a;
|
|
||||||
border-bottom: 2px solid #1a4a8a;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 板块8：4卡片网格（2x2） ========== */
|
|
||||||
.card-grid-4 {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 板块9：双列内容 ========== */
|
|
||||||
.two-col {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two-col-block {
|
|
||||||
flex: 1;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two-col-block h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #1a4a8a;
|
|
||||||
border-bottom: 2px solid #1a4a8a;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two-col-block .desc {
|
|
||||||
color: #666;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 板块10：2x2图片网格 ========== */
|
|
||||||
.img-grid-2x2 {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-grid-2x2 .img-item {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-grid-2x2 img {
|
|
||||||
width: 100%;
|
|
||||||
height: 240px;
|
|
||||||
background: #ddd;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-grid-2x2 .img-caption {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
bottom: 0;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: rgba(11, 64, 138, 0.72);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 8px 12px;
|
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 40px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 板块：Footer ========== */
|
.block-4 .carousel-btn {
|
||||||
.footer {
|
position: absolute;
|
||||||
width: 100%;
|
top: 50%;
|
||||||
background: #1a4a8a;
|
z-index: 2;
|
||||||
|
width: 28px;
|
||||||
|
height: 48px;
|
||||||
|
margin-top: -24px;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 30px 0;
|
font-size: 24px;
|
||||||
margin-top: 20px;
|
line-height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .wrap {
|
.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;
|
display: flex;
|
||||||
justify-content: space-between;
|
gap: 6px;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-left h4 {
|
.block-4 .carousel-dots button {
|
||||||
font-size: 18px;
|
width: 8px;
|
||||||
margin-bottom: 10px;
|
height: 8px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.55);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-left p {
|
.block-4 .carousel-dots button.is-active {
|
||||||
font-size: 13px;
|
background: #fff;
|
||||||
line-height: 1.8;
|
|
||||||
color: #c8d4e8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-right {
|
.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: 540px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-link {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
bottom: 494px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-link-stats {
|
||||||
|
left: 1134px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-link-login {
|
||||||
|
left: 1219px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-link:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* logo 基准：左306 底348 */
|
||||||
|
.footer .footer-logo {
|
||||||
|
position: absolute;
|
||||||
|
left: 306px;
|
||||||
|
bottom: 348px;
|
||||||
|
width: 237px;
|
||||||
|
height: 41px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 中国人民解放军：紧贴 logo 上方，同宽右对齐 */
|
||||||
|
.footer .footer-org {
|
||||||
|
position: absolute;
|
||||||
|
left: 306px;
|
||||||
|
bottom: 395px;
|
||||||
|
width: 237px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
color: #c8d4e8;
|
font-weight: bold;
|
||||||
line-height: 1.8;
|
color: #222;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧说明：紧贴 logo 下方，同宽右对齐 */
|
||||||
|
.footer .footer-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 306px;
|
||||||
|
top: 184px;
|
||||||
|
width: 237px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 竖线：logo 右缘外侧，高度覆盖左右内容 */
|
||||||
|
.footer .footer-divider {
|
||||||
|
position: absolute;
|
||||||
|
left: 560px;
|
||||||
|
bottom: 160px;
|
||||||
|
width: 1px;
|
||||||
|
height: 300px;
|
||||||
|
background: #9aa3ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧链接：竖线右侧，与「中国人民解放军」顶齐 */
|
||||||
|
.footer .footer-right {
|
||||||
|
position: absolute;
|
||||||
|
left: 580px;
|
||||||
|
bottom: 160px;
|
||||||
|
right: 180px;
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-label {
|
||||||
|
flex: 0 0 64px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links a {
|
||||||
|
color: #777;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links a:hover {
|
||||||
|
color: #0b408a;
|
||||||
}
|
}
|
||||||
|
|||||||
+318
-267
@@ -45,294 +45,345 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 板块3：网站头部切图 -->
|
<!-- 板块2：网站头部切图 -->
|
||||||
<div class="header-banner">
|
<div class="header-banner">
|
||||||
<img src="assest/网站头部切图.png" alt="网站头部切图">
|
<img src="assest/网站头部切图.png" alt="网站头部切图">
|
||||||
|
<img class="header-logo" src="assest/logo 19.png" alt="logo">
|
||||||
|
<div class="layer-35">
|
||||||
|
<img src="assest/图层 35.png" alt="">
|
||||||
|
<div class="layer-35-content">
|
||||||
|
<div class="layer-nav-col">
|
||||||
|
<h3>新闻资讯</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">军政要闻</a></li>
|
||||||
|
<li><a href="javascript:;">东海要闻</a></li>
|
||||||
|
<li><a href="javascript:;">部队要闻</a></li>
|
||||||
|
<li><a href="javascript:;">媒体东海</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="layer-nav-col">
|
||||||
|
<h3>学习强军</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">学习进行时</a></li>
|
||||||
|
<li><a href="javascript:;">东海血脉</a></li>
|
||||||
|
<li><a href="javascript:;">精品课程</a></li>
|
||||||
|
<li><a href="javascript:;">优秀教案</a></li>
|
||||||
|
<li><a href="javascript:;">专题策划</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="layer-nav-col">
|
||||||
|
<h3>东海砺剑</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">一线传真</a></li>
|
||||||
|
<li><a href="javascript:;">军情瞭望</a></li>
|
||||||
|
<li><a href="javascript:;">台海聚焦</a></li>
|
||||||
|
<li><a href="javascript:;">作战研究</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="layer-nav-col">
|
||||||
|
<h3>东海党建</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">党建动态</a></li>
|
||||||
|
<li><a href="javascript:;">党课教育</a></li>
|
||||||
|
<li><a href="javascript:;">党史数据</a></li>
|
||||||
|
<li><a href="javascript:;">先进典型</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="layer-nav-col">
|
||||||
|
<h3>东海服务</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">两项服务</a></li>
|
||||||
|
<li><a href="javascript:;">健康指南</a></li>
|
||||||
|
<li><a href="javascript:;">政务公开</a></li>
|
||||||
|
<li><a href="javascript:;">东海热线</a></li>
|
||||||
|
<li><a href="javascript:;">软件下载</a></li>
|
||||||
|
<li><a href="javascript:;">服务评价</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="layer-nav-col">
|
||||||
|
<h3>东海清风</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">廉洁教育</a></li>
|
||||||
|
<li><a href="javascript:;">案例分析</a></li>
|
||||||
|
<li><a href="javascript:;">廉洁文化</a></li>
|
||||||
|
<li><a href="javascript:;">监督举报</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="layer-nav-col layer-nav-culture">
|
||||||
|
<h3>东海文化</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="javascript:;">影视</a></li>
|
||||||
|
<li><a href="javascript:;">活动</a></li>
|
||||||
|
<li><a href="javascript:;">音乐</a></li>
|
||||||
|
<li><a href="javascript:;">文学</a></li>
|
||||||
|
<li><a href="javascript:;">绘画</a></li>
|
||||||
|
<li><a href="javascript:;">摄影</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-side-links">
|
||||||
|
<a class="layer-side-item" href="javascript:;">
|
||||||
|
<img src="assest/图层 37.png" alt="">
|
||||||
|
<span>首长信箱</span>
|
||||||
|
</a>
|
||||||
|
<a class="layer-side-item" href="javascript:;">
|
||||||
|
<img src="assest/LOGO.png" alt="">
|
||||||
|
<span>东海舰队发布</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 板块4：新闻资讯（3列） -->
|
<!-- 板块3 -->
|
||||||
<section class="section news-section">
|
<section class="block-3">
|
||||||
<div class="wrap">
|
<h2 class="block-3-title">大标题大标题大标题大标题大标题大标题大标题大标</h2>
|
||||||
<!-- 左：图片新闻 -->
|
<ul class="block-3-subs">
|
||||||
<div class="news-col">
|
<li>【小标题小标题小】</li>
|
||||||
<h3>图片新闻</h3>
|
<li>【小标题小标题小】</li>
|
||||||
<div class="news-pic">
|
<li>【小标题小标题小】</li>
|
||||||
<img src="" alt="">
|
<li>【小标题小标题小】</li>
|
||||||
<h4>海军某部开展实战化训练 锤炼制胜本领</h4>
|
<li>【小标题小标题小】</li>
|
||||||
<p>近日，海军某部组织开展了实战化训练，全面锤炼部队打赢能力...</p>
|
<li>【小标题小标题小】</li>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
|
||||||
<!-- 中：新闻列表 -->
|
|
||||||
<div class="news-col">
|
|
||||||
<h3>新闻动态</h3>
|
|
||||||
<ul class="news-list">
|
|
||||||
<li><a href="javascript:;">东部战区海军某驱逐舰支队开展海上实战化训练</a><span class="date">2026-08-28</span></li>
|
|
||||||
<li><a href="javascript:;">海军航空兵某团组织跨昼夜飞行训练</a><span class="date">2026-08-27</span></li>
|
|
||||||
<li><a href="javascript:;">某护卫舰大队开展编队协同训练提升作战能力</a><span class="date">2026-08-26</span></li>
|
|
||||||
<li><a href="javascript:;">战区海军组织机关干部军事体育考核</a><span class="date">2026-08-25</span></li>
|
|
||||||
<li><a href="javascript:;">海军陆战队某旅开展两栖装甲车驾驶训练</a><span class="date">2026-08-24</span></li>
|
|
||||||
<li><a href="javascript:;">某潜艇支队开展深海作战课题研练</a><span class="date">2026-08-23</span></li>
|
|
||||||
<li><a href="javascript:;">海军某基地组织新装备作战使用培训</a><span class="date">2026-08-22</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!-- 右：热门排行 -->
|
|
||||||
<div class="news-col">
|
|
||||||
<h3>热门排行</h3>
|
|
||||||
<ul class="news-rank">
|
|
||||||
<li><span class="rank-num">1</span><a href="javascript:;">东部战区海军隆重举行某重大演练活动</a></li>
|
|
||||||
<li><span class="rank-num">2</span><a href="javascript:;">海军某驱逐舰支队开展实弹射击训练</a></li>
|
|
||||||
<li><span class="rank-num">3</span><a href="javascript:;">战区海军某保障基地开展业务技能比武</a></li>
|
|
||||||
<li><span class="rank-num">4</span><a href="javascript:;">海军航空兵某师组织对抗空战训练</a></li>
|
|
||||||
<li><span class="rank-num">5</span><a href="javascript:;">某登陆舰支队开展装载训练提升投送能力</a></li>
|
|
||||||
<li><span class="rank-num">6</span><a href="javascript:;">海军陆战队某旅开展登陆作战演练</a></li>
|
|
||||||
<li><span class="rank-num">7</span><a href="javascript:;">战区海军机关组织开展主题党日活动</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 蓝色波浪分隔条 -->
|
<!-- 板块4 -->
|
||||||
<div class="divider-wave"></div>
|
<section class="block-4">
|
||||||
|
<img class="block-4-logo" src="assest/新闻logo.png" alt="">
|
||||||
<!-- 板块5：文章中心 -->
|
<div class="block-4-carousel">
|
||||||
<section class="section article-section">
|
<div class="carousel-slide is-active">
|
||||||
<div class="wrap">
|
<img src="" alt="">
|
||||||
<div class="sec-title">
|
<p>海军某部开展实战化训练 锤炼制胜本领</p>
|
||||||
<h2>学习中心</h2>
|
|
||||||
<div class="sec-title-en">STUDY CENTER</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="article-list">
|
<div class="carousel-slide">
|
||||||
<li><span class="tag">要闻</span><a href="javascript:;">习近平主席关于国防和军队建设重要论述选编</a><span
|
<img src="" alt="">
|
||||||
class="date">2026-08-28</span></li>
|
<p>东部战区海军某驱逐舰支队海上演训</p>
|
||||||
<li><span class="tag">理论</span><a href="javascript:;">深刻领会新时代党的强军思想的丰富内涵和实践要求</a><span
|
</div>
|
||||||
class="date">2026-08-27</span></li>
|
<div class="carousel-slide">
|
||||||
<li><span class="tag">教育</span><a href="javascript:;">战区海军部队广泛开展主题教育实践活动</a><span
|
<img src="" alt="">
|
||||||
class="date">2026-08-26</span></li>
|
<p>海军航空兵某团组织跨昼夜飞行训练</p>
|
||||||
<li><span class="tag">学习</span><a href="javascript:;">深入推进"四史"学习教育 汲取奋进力量</a><span
|
</div>
|
||||||
class="date">2026-08-25</span></li>
|
<button type="button" class="carousel-btn carousel-prev" aria-label="上一张">‹</button>
|
||||||
<li><span class="tag">研讨</span><a href="javascript:;">围绕加快建设强大现代化海军开展专题研讨</a><span
|
<button type="button" class="carousel-btn carousel-next" aria-label="下一张">›</button>
|
||||||
class="date">2026-08-24</span></li>
|
<div class="carousel-dots">
|
||||||
<li><span class="tag">讲话</span><a href="javascript:;">在战区海军党委扩大会议上的重要讲话精神</a><span
|
<button type="button" class="is-active" aria-label="第1张"></button>
|
||||||
class="date">2026-08-23</span></li>
|
<button type="button" aria-label="第2张"></button>
|
||||||
<li><span class="tag">文件</span><a href="javascript:;">关于全面加强部队建设的若干意见</a><span
|
<button type="button" aria-label="第3张"></button>
|
||||||
class="date">2026-08-22</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 红色丝带分隔条 -->
|
|
||||||
<div class="divider-ribbon"></div>
|
|
||||||
|
|
||||||
<!-- 板块6：3卡片网格 -->
|
|
||||||
<section class="section">
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="card-grid-3">
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>军事资讯</h4>
|
|
||||||
<p>提供最新军事动态、装备发展、训练演练等资讯内容，关注国防和军队现代化建设。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>战区要闻</h4>
|
|
||||||
<p>聚焦东部战区海军部队训练演习、战备执勤、抢险救灾等重要活动和重要时刻。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>部队动态</h4>
|
|
||||||
<p>展示基层部队官兵训练生活、典型事迹、经验做法等，记录海军官兵战斗风采。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="block-4-tabs">
|
||||||
|
<button type="button" class="block-4-tab is-active" data-tab="0"><span>军政要闻</span></button>
|
||||||
<!-- 蓝色波浪分隔条 -->
|
<button type="button" class="block-4-tab" data-tab="1"><span>东海要闻</span></button>
|
||||||
<div class="divider-wave-2"></div>
|
<button type="button" class="block-4-tab" data-tab="2"><span>部队要闻</span></button>
|
||||||
|
|
||||||
<!-- 板块7：双列+侧边栏 -->
|
|
||||||
<section class="section">
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="layout-sidebar">
|
|
||||||
<aside class="sidebar">
|
|
||||||
<h3>政策法规</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="javascript:;">条令条例</a></li>
|
|
||||||
<li><a href="javascript:;">军事法规</a></li>
|
|
||||||
<li><a href="javascript:;">规章制度</a></li>
|
|
||||||
<li><a href="javascript:;">规范标准</a></li>
|
|
||||||
<li><a href="javascript:;">操作规程</a></li>
|
|
||||||
<li><a href="javascript:;">管理规定</a></li>
|
|
||||||
<li><a href="javascript:;">实施细则</a></li>
|
|
||||||
</ul>
|
|
||||||
</aside>
|
|
||||||
<div class="main-content">
|
|
||||||
<h3>政策法规详情</h3>
|
|
||||||
<ul class="article-list">
|
|
||||||
<li><span class="tag">法规</span><a href="javascript:;">《中华人民共和国国防法》全文</a><span
|
|
||||||
class="date">2026-08-28</span></li>
|
|
||||||
<li><span class="tag">条令</span><a href="javascript:;">内务条令、纪律条令、队列条令相关内容</a><span
|
|
||||||
class="date">2026-08-27</span></li>
|
|
||||||
<li><span class="tag">制度</span><a href="javascript:;">军队基层建设纲要及配套规章制度</a><span
|
|
||||||
class="date">2026-08-26</span></li>
|
|
||||||
<li><span class="tag">规定</span><a href="javascript:;">海军部队军事训练相关管理规定</a><span
|
|
||||||
class="date">2026-08-25</span></li>
|
|
||||||
<li><span class="tag">标准</span><a href="javascript:;">军事训练考核标准及实施细则</a><span
|
|
||||||
class="date">2026-08-24</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="block-4-line"></div>
|
||||||
|
<div class="block-4-panel is-active" data-panel="0">
|
||||||
<!-- 红色丝带分隔条 -->
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="divider-ribbon"></div>
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<!-- 板块8：4卡片网格（2x2） -->
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<section class="section">
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="wrap">
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="sec-title">
|
|
||||||
<h2>强军风采</h2>
|
|
||||||
<div class="sec-title-en">MILITARY STYLE</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-grid-4">
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>训练剪影</h4>
|
|
||||||
<p>记录官兵训练瞬间，展现新时代海军官兵的战斗风采。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>演训一线</h4>
|
|
||||||
<p>聚焦海上演训一线，呈现实战化训练的精彩画面。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>装备风采</h4>
|
|
||||||
<p>展示新型武器装备，体现国防科技发展水平。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4>军旅生活</h4>
|
|
||||||
<p>反映海军官兵丰富多彩的军旅生活和战友情谊。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="block-4-panel" data-panel="1">
|
||||||
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<!-- 蓝色波浪分隔条 -->
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="divider-wave"></div>
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<!-- 板块9：双列内容 -->
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<section class="section">
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="wrap">
|
|
||||||
<div class="two-col">
|
|
||||||
<div class="two-col-block">
|
|
||||||
<h3>服务保障</h3>
|
|
||||||
<ul class="article-list">
|
|
||||||
<li><span class="tag">后勤</span><a href="javascript:;">战区海军后勤保障工作稳步推进</a><span
|
|
||||||
class="date">2026-08-28</span></li>
|
|
||||||
<li><span class="tag">装备</span><a href="javascript:;">海军装备维修保障能力建设取得新进展</a><span
|
|
||||||
class="date">2026-08-27</span></li>
|
|
||||||
<li><span class="tag">卫勤</span><a href="javascript:;">海上医疗救护演练提升卫勤保障能力</a><span
|
|
||||||
class="date">2026-08-26</span></li>
|
|
||||||
<li><span class="tag">运输</span><a href="javascript:;">海军运输投送能力建设成果显著</a><span
|
|
||||||
class="date">2026-08-25</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="two-col-block">
|
|
||||||
<h3>强军文化</h3>
|
|
||||||
<ul class="article-list">
|
|
||||||
<li><span class="tag">文化</span><a href="javascript:;">海军特色文化建设项目成果展示</a><span
|
|
||||||
class="date">2026-08-28</span></li>
|
|
||||||
<li><span class="tag">活动</span><a href="javascript:;">战区海军举办庆祝海军成立纪念活动</a><span
|
|
||||||
class="date">2026-08-27</span></li>
|
|
||||||
<li><span class="tag">作品</span><a href="javascript:;">海军官兵文学艺术作品征集评选活动</a><span
|
|
||||||
class="date">2026-08-26</span></li>
|
|
||||||
<li><span class="tag">典型</span><a href="javascript:;">宣传表彰强军路上先进典型事迹</a><span
|
|
||||||
class="date">2026-08-25</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="block-4-panel" data-panel="2">
|
||||||
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<!-- 红色丝带分隔条 -->
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="divider-ribbon"></div>
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<!-- 板块10：2x2图片网格 -->
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<section class="section">
|
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||||||
<div class="wrap">
|
|
||||||
<div class="img-grid-2x2">
|
|
||||||
<div class="img-item">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="img-caption">深蓝砺剑 - 海上实战化训练</div>
|
|
||||||
</div>
|
|
||||||
<div class="img-item">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="img-caption">逐梦深蓝 - 海军官兵风采</div>
|
|
||||||
</div>
|
|
||||||
<div class="img-item">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="img-caption">向海图强 - 装备建设发展</div>
|
|
||||||
</div>
|
|
||||||
<div class="img-item">
|
|
||||||
<img src="" alt="">
|
|
||||||
<div class="img-caption">练兵备战 - 演训一线报道</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 蓝色波浪分隔条 -->
|
|
||||||
<div class="divider-wave-2"></div>
|
|
||||||
|
|
||||||
<!-- 板块11：双列内容（在线留言/网盘等） -->
|
|
||||||
<section class="section">
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="two-col">
|
|
||||||
<div class="two-col-block">
|
|
||||||
<h3>在线留言</h3>
|
|
||||||
<p class="desc">
|
|
||||||
为畅通官兵诉求渠道，倾听基层声音，欢迎广大官兵通过留言板反映问题、提出建议，我们将认真对待每一条留言，及时反馈处理结果。</p>
|
|
||||||
</div>
|
|
||||||
<div class="two-col-block">
|
|
||||||
<h3>网盘服务</h3>
|
|
||||||
<p class="desc">提供文件存储、共享、下载等便捷服务，方便官兵日常工作和学习资料的存储与共享，支持多种文件格式上传与管理。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 板块：Footer -->
|
<!-- 板块：Footer -->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="wrap">
|
<a class="footer-link footer-link-stats" href="javascript:;">信息统计</a>
|
||||||
<div class="footer-left">
|
<a class="footer-link footer-link-login" href="javascript:;">管理登录</a>
|
||||||
<h4>东部战区海军强军网集群</h4>
|
|
||||||
<p>主办单位：东部战区海军政治工作部</p>
|
<h3 class="footer-org">中国人民解放军</h3>
|
||||||
<p>承办单位：东部战区海军网络宣传中心</p>
|
<img class="footer-logo" src="assest/logo3 1.png" alt="东部战区海军党委机关网">
|
||||||
<p>联系电话：XXX-XXXXXXXX Email: xxxxx@163.com</p>
|
|
||||||
|
<div class="footer-left">
|
||||||
|
<ul class="footer-info">
|
||||||
|
<li>开设单位:东部战区海军政治工作部</li>
|
||||||
|
<li>备案号: HJ2620181025002</li>
|
||||||
|
<li>域名: www.qjw.dbhj.hj</li>
|
||||||
|
<li>联系电话:0556-30612</li>
|
||||||
|
<li>联系人:值班员</li>
|
||||||
|
<li>推荐使用IE8以上浏览器</li>
|
||||||
|
<li>支持1024*768以上分辨率</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-divider"></div>
|
||||||
|
|
||||||
|
<div class="footer-right">
|
||||||
|
<div class="footer-row">
|
||||||
|
<span class="footer-label">军委机关</span>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="javascript:;">中央军委机关</a>
|
||||||
|
<a href="javascript:;">办公厅</a>
|
||||||
|
<a href="javascript:;">联合参谋部</a>
|
||||||
|
<a href="javascript:;">政治工作部</a>
|
||||||
|
<a href="javascript:;">后勤保障部</a>
|
||||||
|
<a href="javascript:;">装备发展部</a>
|
||||||
|
<a href="javascript:;">训练管理部</a>
|
||||||
|
<a href="javascript:;">国防动员部</a>
|
||||||
|
<a href="javascript:;">纪律检查委员会</a>
|
||||||
|
<a href="javascript:;">政法委员会</a>
|
||||||
|
<a href="javascript:;">科学技术委员会</a>
|
||||||
|
<a href="javascript:;">战略规划办公室</a>
|
||||||
|
<a href="javascript:;">改革和编制办公室</a>
|
||||||
|
<a href="javascript:;">国际军事合作办公室</a>
|
||||||
|
<a href="javascript:;">审计署</a>
|
||||||
|
<a href="javascript:;">机关事务管理总局</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-right">
|
<div class="footer-row">
|
||||||
<p>Copyright © 2026 东部战区海军强军网 版权所有</p>
|
<span class="footer-label">大单位</span>
|
||||||
<p>网站标识码：XXXXXXXXXX</p>
|
<div class="footer-links">
|
||||||
<p>京ICP备XXXXXXXX号 军网XX字第XXX号</p>
|
<a href="javascript:;">东部战区</a>
|
||||||
|
<a href="javascript:;">南部战区</a>
|
||||||
|
<a href="javascript:;">西部战区</a>
|
||||||
|
<a href="javascript:;">北部战区</a>
|
||||||
|
<a href="javascript:;">中部战区</a>
|
||||||
|
<a href="javascript:;">陆军</a>
|
||||||
|
<a href="javascript:;">海军</a>
|
||||||
|
<a href="javascript:;">空军</a>
|
||||||
|
<a href="javascript:;">火箭军</a>
|
||||||
|
<a href="javascript:;">战略支援部队</a>
|
||||||
|
<a href="javascript:;">联勤保障部队</a>
|
||||||
|
<a href="javascript:;">军事科学院</a>
|
||||||
|
<a href="javascript:;">国防大学</a>
|
||||||
|
<a href="javascript:;">国防科技大学</a>
|
||||||
|
<a href="javascript:;">武警部队</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-row">
|
||||||
|
<span class="footer-label">海军机关</span>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="javascript:;">参谋部</a>
|
||||||
|
<a href="javascript:;">政治工作部</a>
|
||||||
|
<a href="javascript:;">后勤部</a>
|
||||||
|
<a href="javascript:;">装备部</a>
|
||||||
|
<a href="javascript:;">纪律检查委员会</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-row">
|
||||||
|
<span class="footer-label">海军系统</span>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="javascript:;">北部战区海军</a>
|
||||||
|
<a href="javascript:;">东部战区海军</a>
|
||||||
|
<a href="javascript:;">南部战区海军</a>
|
||||||
|
<a href="javascript:;">陆战队</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-row">
|
||||||
|
<span class="footer-label">直属单位</span>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="javascript:;">92919部队</a>
|
||||||
|
<a href="javascript:;">91668部队</a>
|
||||||
|
<a href="javascript:;">92403部队</a>
|
||||||
|
<a href="javascript:;">92858部队</a>
|
||||||
|
<a href="javascript:;">91208部队</a>
|
||||||
|
<a href="javascript:;">92196部队</a>
|
||||||
|
<a href="javascript:;">92676部队</a>
|
||||||
|
<a href="javascript:;">92730部队</a>
|
||||||
|
<a href="javascript:;">91458部队</a>
|
||||||
|
<a href="javascript:;">92351部队</a>
|
||||||
|
<a href="javascript:;">92567部队</a>
|
||||||
|
<a href="javascript:;">91824部队</a>
|
||||||
|
<a href="javascript:;">92209部队</a>
|
||||||
|
<a href="javascript:;">92615部队</a>
|
||||||
|
<a href="javascript:;">92980部队</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-row">
|
||||||
|
<span class="footer-label">推荐网站</span>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="javascript:;">数字战场</a>
|
||||||
|
<a href="javascript:;">强军导航</a>
|
||||||
|
<a href="javascript:;">强军搜索</a>
|
||||||
|
<a href="javascript:;">爱搜搜索</a>
|
||||||
|
<a href="javascript:;">军网北斗</a>
|
||||||
|
<a href="javascript:;">军队自考网</a>
|
||||||
|
<a href="javascript:;">军综网防病毒服务平台</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var root = document.querySelector(".block-4-carousel");
|
||||||
|
if (!root) return;
|
||||||
|
var slides = root.querySelectorAll(".carousel-slide");
|
||||||
|
var dots = root.querySelectorAll(".carousel-dots button");
|
||||||
|
var index = 0;
|
||||||
|
var timer = null;
|
||||||
|
|
||||||
|
function show(next) {
|
||||||
|
index = (next + slides.length) % slides.length;
|
||||||
|
slides.forEach(function (slide, i) {
|
||||||
|
slide.classList.toggle("is-active", i === index);
|
||||||
|
});
|
||||||
|
dots.forEach(function (dot, i) {
|
||||||
|
dot.classList.toggle("is-active", i === index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
stop();
|
||||||
|
timer = setInterval(function () {
|
||||||
|
show(index + 1);
|
||||||
|
}, 4000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stop() {
|
||||||
|
if (timer) clearInterval(timer);
|
||||||
|
}
|
||||||
|
|
||||||
|
root.querySelector(".carousel-prev").addEventListener("click", function () {
|
||||||
|
show(index - 1);
|
||||||
|
start();
|
||||||
|
});
|
||||||
|
root.querySelector(".carousel-next").addEventListener("click", function () {
|
||||||
|
show(index + 1);
|
||||||
|
start();
|
||||||
|
});
|
||||||
|
dots.forEach(function (dot, i) {
|
||||||
|
dot.addEventListener("click", function () {
|
||||||
|
show(i);
|
||||||
|
start();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
root.addEventListener("mouseenter", stop);
|
||||||
|
root.addEventListener("mouseleave", start);
|
||||||
|
start();
|
||||||
|
})();
|
||||||
|
(function () {
|
||||||
|
var tabs = document.querySelectorAll(".block-4-tab");
|
||||||
|
var panels = document.querySelectorAll(".block-4-panel");
|
||||||
|
tabs.forEach(function (tab) {
|
||||||
|
tab.addEventListener("click", function () {
|
||||||
|
var index = tab.getAttribute("data-tab");
|
||||||
|
tabs.forEach(function (item) {
|
||||||
|
item.classList.toggle("is-active", item === tab);
|
||||||
|
});
|
||||||
|
panels.forEach(function (panel) {
|
||||||
|
panel.classList.toggle("is-active", panel.getAttribute("data-panel") === index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user