389 lines
18 KiB
HTML
389 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>东部战区海军</title>
|
||
<link rel="stylesheet" href="dbzq.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 板块1：顶部工具栏 -->
|
||
<div class="topbar">
|
||
<div class="wrap">
|
||
<img class="welcome-icon" src="assest/房子 1@2x.png" alt="">
|
||
<span class="welcome-text">东部战区海军强军网集群</span>
|
||
<img class="welcome-arrow" src="assest/Polygon 28.png" alt="">
|
||
|
||
<span class="nav">军网导航</span>
|
||
<img class="nav-arrow" src="assest/Polygon 28.png" alt="">
|
||
|
||
<form class="searchbox" onsubmit="return false;">
|
||
<div class="search-input-wrap">
|
||
<img class="search-icon" src="assest/Vector.png" alt="">
|
||
<input type="text" placeholder="请输入关键字">
|
||
</div>
|
||
<button type="submit">全站搜索</button>
|
||
</form>
|
||
|
||
<a class="user-info" href="javascript:;">标题标题 已登录</a>
|
||
|
||
<a class="toplinks-link link-exit" href="javascript:;">
|
||
<img class="top-icon" src="assest/登出 1.png" alt="">
|
||
退出
|
||
</a>
|
||
<a class="toplinks-link link-register" href="javascript:;">
|
||
<img class="top-icon" src="assest/注册 1.png" alt="">
|
||
注册
|
||
</a>
|
||
<a class="toplinks-link link-disk" href="javascript:;">
|
||
<img class="top-icon" src="assest/云 1.png" alt="">
|
||
网盘
|
||
</a>
|
||
<img class="links-arrow" src="assest/Polygon 28.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 板块2：网站头部切图 -->
|
||
<div class="header-banner">
|
||
<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>
|
||
|
||
<!-- 板块3 -->
|
||
<section class="block-3">
|
||
<h2 class="block-3-title">大标题大标题大标题大标题大标题大标题大标题大标</h2>
|
||
<ul class="block-3-subs">
|
||
<li>【小标题小标题小】</li>
|
||
<li>【小标题小标题小】</li>
|
||
<li>【小标题小标题小】</li>
|
||
<li>【小标题小标题小】</li>
|
||
<li>【小标题小标题小】</li>
|
||
<li>【小标题小标题小】</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 板块4 -->
|
||
<section class="block-4">
|
||
<img class="block-4-logo" src="assest/新闻logo.png" alt="">
|
||
<div class="block-4-carousel">
|
||
<div class="carousel-slide is-active">
|
||
<img src="" alt="">
|
||
<p>海军某部开展实战化训练 锤炼制胜本领</p>
|
||
</div>
|
||
<div class="carousel-slide">
|
||
<img src="" alt="">
|
||
<p>东部战区海军某驱逐舰支队海上演训</p>
|
||
</div>
|
||
<div class="carousel-slide">
|
||
<img src="" alt="">
|
||
<p>海军航空兵某团组织跨昼夜飞行训练</p>
|
||
</div>
|
||
<button type="button" class="carousel-btn carousel-prev" aria-label="上一张">‹</button>
|
||
<button type="button" class="carousel-btn carousel-next" aria-label="下一张">›</button>
|
||
<div class="carousel-dots">
|
||
<button type="button" class="is-active" aria-label="第1张"></button>
|
||
<button type="button" aria-label="第2张"></button>
|
||
<button type="button" aria-label="第3张"></button>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<button type="button" class="block-4-tab" data-tab="2"><span>部队要闻</span></button>
|
||
</div>
|
||
<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="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
</div>
|
||
<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="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
</div>
|
||
<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="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 板块：Footer -->
|
||
<footer class="footer">
|
||
<a class="footer-link footer-link-stats" href="javascript:;">信息统计</a>
|
||
<a class="footer-link footer-link-login" href="javascript:;">管理登录</a>
|
||
|
||
<h3 class="footer-org">中国人民解放军</h3>
|
||
<img class="footer-logo" src="assest/logo3 1.png" alt="东部战区海军党委机关网">
|
||
|
||
<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 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>
|
||
</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>
|
||
</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>
|
||
|
||
</html> |