diff --git a/web/assest/Polygon 28.png b/web/assest/Polygon 28.png new file mode 100644 index 0000000..e3c7be3 Binary files /dev/null and b/web/assest/Polygon 28.png differ diff --git a/web/assest/Vector.png b/web/assest/Vector.png new file mode 100644 index 0000000..eec4232 Binary files /dev/null and b/web/assest/Vector.png differ diff --git a/web/assest/云 1.png b/web/assest/云 1.png new file mode 100644 index 0000000..39631ff Binary files /dev/null and b/web/assest/云 1.png differ diff --git a/web/assest/注册 1.png b/web/assest/注册 1.png new file mode 100644 index 0000000..a1f5381 Binary files /dev/null and b/web/assest/注册 1.png differ diff --git a/web/assest/登出 1.png b/web/assest/登出 1.png new file mode 100644 index 0000000..5bf64d7 Binary files /dev/null and b/web/assest/登出 1.png differ diff --git a/web/dbzq.css b/web/dbzq.css new file mode 100644 index 0000000..347a64d --- /dev/null +++ b/web/dbzq.css @@ -0,0 +1,573 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 1600px; + margin: 0 auto; + background: #FFFFFF; + font-family: "Microsoft YaHei", Arial, sans-serif; + color: #333; +} + +a { + text-decoration: none; + color: inherit; +} + +ul { + list-style: none; +} + +img { + display: block; + border: 0; +} + +.wrap { + width: 1600px; + margin: 0 auto; +} + +/* ========== 板块1:顶部工具栏 ========== */ +.topbar { + position: relative; + width: 1600px; + height: 43px; + background: #f5f5f5; + border-bottom: 1px solid #e5e5e5; + font-size: 12px; + color: #555; +} + +.topbar .wrap { + height: 100%; + display: flex; + align-items: center; +} + +.topbar .welcome { + position: absolute; + left: 203px; + top: 50%; + transform: translateY(-50%); + color: #333; + display: flex; + align-items: center; +} + +.topbar .welcome img { + width: 13px; + height: 13px; + margin-right: 6px; +} + +.topbar .welcome .arrow { + width: 8px; + height: 5px; + margin-left: 14px; + margin-right: 0; +} + +.topbar .nav { + position: absolute; + left: 416px; + top: 50%; + transform: translateY(-50%); + color: #333; + display: flex; + align-items: center; +} + +.topbar .nav-arrow { + position: absolute; + left: 474px; + top: 50%; + transform: translateY(-50%); + width: 8px; + height: 5px; +} + +.topbar .searchbox { + position: absolute; + left: 688px; + top: 50%; + transform: translateY(-50%); + display: flex; +} + +.topbar .searchbox input { + height: 33px; + width: 228px; + padding: 0 8px; + border: 1px solid #ccc; + font-size: 12px; + outline: none; +} + +.topbar .searchbox button { + height: 33px; + width: 79px; + padding: 0 14px; + border: 1px solid #ccc; + border-left: 0; + background: #fff; + cursor: pointer; + font-size: 12px; +} + +.topbar .toplinks { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); +} + +.topbar .toplinks a { + color: #555; + margin: 0 4px; +} + +.topbar .toplinks a:hover { + color: #c00; +} + +/* ========== 板块2:导航栏 53px ========== */ +.navbar { + width: 100%; + height: 53px; + background: #1a4a8a; +} + +.navbar .wrap { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.navbar ul { + display: flex; + height: 100%; +} + +.navbar ul li { + height: 100%; +} + +.navbar ul li a { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 0 32px; + color: #fff; + font-size: 16px; + font-weight: bold; +} + +.navbar ul li a:hover, +.navbar ul li a.active { + background: #0d3266; +} + +/* ========== 板块3:网站头部切图 ========== */ +.header-banner { + width: 100%; +} + +.header-banner img { + width: 100%; +} + +/* ========== 通用板块容器 ========== */ +.section { + width: 100%; + padding: 30px 0; +} + +.section .wrap { + display: flex; + gap: 20px; +} + +/* ========== 板块标题 ========== */ +.sec-title { + text-align: center; + margin-bottom: 20px; +} + +.sec-title h2 { + display: inline-block; + font-size: 22px; + color: #1a4a8a; + border-bottom: 2px solid #1a4a8a; + padding: 0 20px 8px; + font-weight: bold; +} + +.sec-title-en { + font-size: 12px; + color: #999; + margin-top: 4px; + letter-spacing: 1px; +} + +/* ========== 板块4:新闻资讯(3列) ========== */ +.news-section { + background: #fff; +} + +.news-col { + flex: 1; + background: #f9f9f9; + border: 1px solid #e8e8e8; + padding: 15px; +} + +.news-col h3 { + font-size: 16px; + color: #1a4a8a; + 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; +} + +.news-list li a { + color: #333; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 10px; + position: relative; +} + +.news-list li a::before { + content: "·"; + position: absolute; + left: 0; + color: #1a4a8a; + font-weight: bold; +} + +.news-list li .date { + color: #999; + font-size: 12px; +} + +.news-list li a:hover { + color: #c00; +} + +.news-rank li { + display: flex; + align-items: center; + padding: 7px 0; + border-bottom: 1px dashed #eee; + font-size: 13px; +} + +.news-rank .rank-num { + display: inline-block; + width: 18px; + height: 18px; + line-height: 18px; + text-align: center; + background: #ccc; + color: #fff; + 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; +} + +.news-rank li a:hover { + color: #c00; +} + +/* ========== 蓝色波浪分隔条 ========== */ +.divider-wave { + width: 100%; + height: 60px; + background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; +} + +.divider-wave-2 { + width: 100%; + height: 50px; + background: url("data:image/svg+xml;utf8,") center/100% 100% no-repeat; +} + +/* ========== 红色丝带分隔条 ========== */ +.divider-ribbon { + width: 100%; + height: 50px; + background: url("data:image/svg+xml;utf8,") 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; +} + +.card img { + width: 100%; + height: 200px; + background: #ddd; + object-fit: cover; +} + +.card-body { + padding: 15px; +} + +.card-body h4 { + font-size: 16px; + color: #1a4a8a; + margin-bottom: 8px; + text-align: center; +} + +.card-body p { + font-size: 13px; + color: #666; + line-height: 1.6; +} + +/* ========== 板块7:双列+侧边栏 ========== */ +.layout-sidebar { + display: flex; + gap: 20px; +} + +.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; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); + color: #fff; + padding: 8px 12px; + font-size: 14px; +} + +/* ========== 板块:Footer ========== */ +.footer { + width: 100%; + background: #1a4a8a; + color: #fff; + padding: 30px 0; + margin-top: 20px; +} + +.footer .wrap { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.footer-left h4 { + font-size: 18px; + margin-bottom: 10px; +} + +.footer-left p { + font-size: 13px; + line-height: 1.8; + color: #c8d4e8; +} + +.footer-right { + text-align: right; + font-size: 12px; + color: #c8d4e8; + line-height: 1.8; +} diff --git a/web/dbzq.html b/web/dbzq.html index de188b1..a789221 100644 --- a/web/dbzq.html +++ b/web/dbzq.html @@ -5,534 +5,7 @@
东部战区海军强军网集群
+
+
+
+
为畅通官兵诉求渠道,倾听基层声音,欢迎广大官兵通过留言板反映问题、提出建议,我们将认真对待每一条留言,及时反馈处理结果。
- 提供文件存储、共享、下载等便捷服务,方便官兵日常工作和学习资料的存储与共享,支持多种文件格式上传与管理。
+提供文件存储、共享、下载等便捷服务,方便官兵日常工作和学习资料的存储与共享,支持多种文件格式上传与管理。