媒体矩阵，顶部效果

nngkxxdp/src/main/resources/static/mxt/css/index.css

@@ -92,26 +92,30 @@ li {
 	height: 55px;
 	background-color: #F2F2F2;
 	margin-top: 15px;
-	display: flex;
 }
 
 .box-nav li {
-	width: 16.67%;
+	width: 13%;
 	height: 21px;
 	list-style: none;
-	padding: 18px 18px;
+	padding: 18px 10px;
 	text-align: center;
 	color: #333333;
 	cursor: pointer;
 	font-weight: 600;
     font-family: 微软雅黑;
     position: relative;
+	float: left;
 }
 
 .box-nav>li:nth-child(1) {
 	width: 22%;
 }
 
+.box-nav>li:nth-child(6) {
+	width: 14%;
+}
+
 .box-nav li.active {
 	height: 25px;
 	background-color: #176AB7;
@@ -165,11 +169,18 @@ li {
 	height: 50px;
 	position: absolute;
 	top: 220px;
-	left: 171.6485px;
+	left: 160.6485px;
 	background-color: #F98034;
 	color: #fff;
 	text-align: center;
 	line-height: 50px;
+	font-size: 20px;
+}
+
+.text_rzzt {
+	padding: 0px 10px 0px 10px;
+	box-sizing: border-box;
+	margin-top: 32px;
 }
 
 /* .box-item .top {
@@ -185,9 +196,8 @@ li {
 } */
 
 .box-item .content {
-	padding:0px 10px 10px;
 	box-sizing: border-box;
-	margin-top: 61px;
+	padding: 0px 10px 10px;
 }
 
 .box-item .content li{
@@ -195,7 +205,7 @@ li {
 	font-family: Source Han Sans SC;
 	color: #333333;
 	line-height: 24px;
-	margin-top: 29px;
+	margin-top: 15px;
 	overflow : hidden;
 	text-overflow: ellipsis;
 	display: -webkit-box;
@@ -662,24 +672,29 @@ li {
 
 .box_left {
 	width: 46%;
-	margin: 10px 13px 0 10px;
+	margin: 70px 13px 0 10px;
+	display: flex;
+	flex-wrap: wrap;
 }
 
 .box_right {
 	width: 48%;
-	margin: 10px 10px 0 0;
+	margin: 70px 10px 0 0;
+	display: flex;
+	flex-wrap: wrap;
 }
 
 .text_nafb {
 	width: 230px;
 	height: 50px;
 	position: absolute;
-	top: 108px;
-	left: 25.453px;
+	top: 10px;
+	left: 160.1795px;
 	background-color: #F98034;
 	color: #fff;
 	text-align: center;
 	line-height: 50px;
+	font-size: 20px;
 }
 
 .nafb_title {
@@ -770,12 +785,23 @@ li {
 	margin-bottom: 15px;
 }
 
+.rzzt_nanfb {
+	font-size: 16px;
+	font-family: Microsoft YaHei;
+	font-weight: 400;
+	color: #333333;
+	margin-bottom: 15px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 .nanafb_content {
 	font-size: 14px;
 	font-family: Microsoft YaHei;
 	font-weight: 400;
 	color: #666666;
-	text-indent:2em;
+	text-indent: 1.9em;
 	margin-bottom: 49px;
 	line-height: 24px;
 }
@@ -795,4 +821,8 @@ li {
 	width: 20px;
 	height: 20px;
 	margin-right: 4px;
+}
+
+.left_title {
+	margin-left: 10px;
 }

nngkxxdp/src/main/resources/static/mxt/js/index.js

@@ -1,6 +1,8 @@
-var topModule = ["重庆市南岸区人民政府", "南岸健康卫士", "南岸人力社保", "南岸公安", "南岸智慧城管", "遇见南坪"];
+// var topModule = ["重庆市南岸区人民政府", "南岸健康卫士", "南岸人力社保", "南岸公安", "南岸智慧城管", "遇见南坪"];
+var topModule = ['重庆市南岸区人民政府', '南岸发布', '广阳湾智创生态城', '南岸文旅', '南岸健康卫士', '南岸公安'];
 var page = 1, limit = 12;
 var topData = [];
+var ofaData = [];
 $(function() {
 	initPage();
 	$('#topTime').text(new Date().format("yyyy-MM-dd hh") + ':00');
@@ -21,9 +23,13 @@ $(function() {
 });
 
 function initPage() {
-//	var loading = layer.load(2, {
-//		shade: [0.3, '#393D49'],
-//	});
+	var loading = layer.load(2, {
+		shade: [0.3, '#393D49'],
+	});
+
+	// 渲染BoxNav
+	renderBoxNav();
+
 	$.ajax({
 		type: 'GET',
 		url: '/article/getAllOfficialAccount',
@@ -32,16 +38,16 @@ function initPage() {
 				var data = json.data;
 				console.log(data)
 				topData = data.array;
+				ofaData = data.ofa;
 				// initTop(data.array);
-				console.log(topData)
 				$('.box-contanier').empty().append(topLeftComponent(topData[topModule[0]], topModule[0]) + topRightComponent(topData[topModule[1]], topModule[1]));
 				initCenterByLeft(data.ofa);
 				initJrttList(data.jrtt);
 			}
-//			layer.close(loading);
+			layer.close(loading);
 		}, 
 		error: function(e) {
-//			layer.close(loading);
+			layer.close(loading);
 		}
 	});
 }
@@ -225,31 +231,46 @@ Date.prototype.format = function(fmt) {
    return fmt; 
 }
 
-$(".box-nav li").click(function() {
+$(".box-nav").on('click', 'li', function() {
 	$(this).addClass("active").siblings().removeClass("active");
 	var index = parseInt($(this).attr('data-index'));
+	var colorIndex = $(this).css("color");
+	console.log(colorIndex);
+	if (colorIndex == "rgb(255, 255, 255)") {
+		$(this).children("i").css("display","block");
+		$(this).siblings().children("i").css("display","none");
+	}
 	if (index == 5) {
 		$('.box-contanier').empty().append(topLeftComponent(topData[topModule[index]], topModule[index]) + topRightComponent(topData[topModule[0]], topModule[0]));
-		// $('.box-contanier').empty().append(topLeftComponent(topRightComponent(topData[topModule[index]], topModule[index]) + topData[topModule[0]], topModule[0]));
 	} else {
 		$('.box-contanier').empty().append(topLeftComponent(topData[topModule[index]], topModule[index]) + topRightComponent(topData[topModule[index + 1]], topModule[index + 1]));
 	}
 })
 
+/**
+ * 生成南岸区新媒体发布厅，左边部分html
+ * @param data
+ * @param name
+ * @returns {string}
+ */
 function topLeftComponent(data, name) {
-	console.log(data)
+	var wofa = getWOFAData(name, "微信公众号");
 	var html = `
 	<div class="box-item">
-		<a>
+		<a href="${data[0].url}" title="${data[0].title}" target="_blank">
 			<img src="data:${data[0].cover}">
 		</a>
           <p class="text_top">${name} </p>
+		  <div class="text_rzzt">
+			<h6 class="rzzt_nanfb">
+				认证主体
+				<div class="content_title left_title"><img src="./img/rztb.png" class="img_content" /><p class="content_descripe" title="${wofa.authSubject}">${wofa.authSubject}</p></div>
+			</h6>
+		  </div>
           <div class="content">
             <ul>
               `;
 	for (var i = 0; i < 4; i++) {
-		console.log(i)
-		console.log(data[i].createTime)
 		var dateArr = (data[i].createTime||"").split('-');
 		html += `
 				<li>
@@ -262,7 +283,7 @@ function topLeftComponent(data, name) {
 						</div>
 					</div>
 					<div class="center_line"></div>
-					<div class="text_title"><a style="width: 100%; height: 100%;text-decoration: none;color: #333333;" href="${data[i].url}" target="_blank">${data[i].title}</a></div>
+					<div class="text_title"><a title="${data[i].title}" style="width: 100%; height: 100%;text-decoration: none;color: #333333;" href="${data[i].url}" target="_blank">${data[i].title}</a></div>
 				</li>
 			`
 	}
@@ -274,66 +295,75 @@ function topLeftComponent(data, name) {
 	return html;
 }
 
+/**
+ * 生成南岸区新媒体发布厅，右边部分html
+ * @param data
+ * @param name
+ * @returns {string}
+ */
 function topRightComponent(data, name) {
-	console.log(data)
+	var wofa = getWOFAData(name, "微信公众号");
 	var html = `
 	<div class="box-item" style="display: flex;flex-wrap: wrap;">
           <div class="box_left">
-          	<a>
-            	<img src="data:${data[0].cover}" class="second_img">
+          	`;
+	for (var i = 0; i < 4; i++) {
+		html += `
+			<a href="${data[0].url}" title="${data[0].title}" target="_blank">
+            	<img src="data:${data[i].cover}" class="second_img">
             </a>
-            <p class="text_nafb">${name} </p>
-<!--            <div class="nafb_title">南岸区关于解除部分区域封控 防范措施的通告</div>-->
-<!--            <p class="nafb_content">根据国务院联防联控机制有关规定，经专家-->
-<!--              组综合研判，区疫情防控领导小组指挥部决-->
-<!--              定解除南岸区南坪镇绿洲龙城（青龙路94-->
-<!--              号）、南坪镇红糖馒头店（回龙湾社区居委-->
-<!--              会旁）、南坪镇回龙湾社区居委会及新民小-->
-<!--              区（回龙路71号）、涂山镇美心馒头店（南-->
-<!--              滨东路6号附1号）、涂山镇江南三合鱼（腾-->
-<!--              江路209号）、涂山镇蒋艺造型（腾龙大道-->
-<!--              47号附15号）、涂山镇艾雨便利店（腾龙-->
-<!--              路213号）、涂山镇美心江与江南小区及美-->
-<!--              心长江一期A6—1地块工地 ...    <a>详情></a>-->
-<!--            </p>-->
+		`;
+		if (i == 1) {
+			html += `<p class="text_nafb">${name} </p>`;
+		}
+	}
+	html +=`
           </div>
-          <div class="box_right">
+          <ul class="box_right">
 		`;
 	for (var i = 0; i < 4; i++) {
 
 		var dateArr = data[i].createTime.split('-');
-		if (i <= 1) {
-			html += `
-					<div class="right_time">
-				  <p class="right_top">${dateArr[2]}</p>
-				  <div class="right_center"></div>
-				  <div class="right_data">${dateArr[0]}·${dateArr[1]}</div>
-				</div>
-				<p class="p_text"><a style="width: 100%; height: 100%;text-decoration: none;color: #333333;" href="${data[i].url}" target="_blank">${data[i].title}</a></p>
-			`
-		}
-
-		if (i == 1) {
-			html += `
-          		</div>
-          		<div class="box_bottom">
-			`
-		}
-		if (i > 1) {
-			html += `
-					<div class="right_time">
-				  <p class="right_top">${dateArr[2]}</p>
-				  <div class="right_center"></div>
-				  <div class="right_data">${dateArr[0]}·${dateArr[1]}</div>
+		html += `
+			<li class="warp_right">
+				<div class="right_time">
+					<p class="right_top">${dateArr[2]}</p>
+					<div class="right_center"></div>
+					<div class="right_data">${dateArr[0]}·${dateArr[1]}</div>
 				</div>
-				<p class="p_text"><a style="width: 100%; height: 100%;text-decoration: none;color: #333333;" href="${data[i].url}" target="_blank">${data[i].title}</a></p>
-			`
-		}
+				<p class="p_text"><a title="${data[i].title}" style="width: 100%; height: 100%;text-decoration: none;color: #333333;" href="${data[i].url}" target="_blank">${data[i].title}</a></p>
+			</li>	
+		`;
 	}
 
 		html +=	`
           </div>
-        </div>
+        </ul>
 	`
 	return html;
+}
+
+/**
+ * 在ofa数据中根据类型和名称查找对应数据
+ * @param name
+ * @returns {*}
+ */
+function getWOFAData(name, type) {
+	for (var i = 0; i < ofaData.length; i++) {
+		var item = ofaData[i];
+		if(item.wType == type && item.wName == name) {
+			return item;
+		}
+	}
+}
+
+/**
+ * 渲染顶部boxNav
+ */
+function renderBoxNav() {
+	var html = '';
+	for (var i = 0; i < topModule.length; i++) {
+		html += '<li data-index="' + i + '" class="' + (i == 0 ? 'active' : '') + '">' + topModule[i] + '<i></i></li>';
+	}
+	$('.box-nav').empty().append(html);
 }

nngkxxdp/src/main/resources/static/mxt/mxt.html

@@ -16,110 +16,114 @@
 			<div class="block-contanier">
 
 				<ul class="box-nav">
-					<li data-index="0" class="active">重庆市南岸区人民政府<i></i></li>
-					<li data-index="1">南岸健康卫士<i></i></li>
-					<li data-index="2">南岸人力社保<i></i></li>
-					<li data-index="3">南岸公安<i></i></li>
-					<li data-index="4">南岸智慧城管<i></i></li>
-					<li data-index="5">遇见南坪<i></i></li>
+<!--					<li data-index="0" class="active">重庆市南岸区人民政府<i></i></li>-->
+<!--					<li data-index="1">南岸发布<i></i></li>-->
+<!--					<li data-index="2">广阳湾智创生态城<i></i></li>-->
+<!--					<li data-index="3">南岸文旅<i></i></li>-->
+<!--					<li data-index="4">南岸健康卫士<i></i></li>-->
+<!--					<li data-index="5">南岸公安<i></i></li>-->
 				</ul>
 
 				<div class="box-contanier">
-					<div class="box-item">
-						<div class="top">重庆市南岸区人民政府</div>
-						<p class="text_top">重庆市南岸区人民政府 </p>
-						<div class="content">
-							<ul>
-								<li>
-									<div class="time_data">
-										<p>30</p>
-										<div class="time_wrap">
-											<div class="time_now">03</div>
-											<div class="time_point"></div>
-											<div class="time_now">2022</div>
-										</div>
-									</div>
-									<div class="center_line"></div>
-									<div class="text_title">习近平在省部级主要领导干部学习贯彻党的十    九届六中全会精神专题研讨班开班式上发表重</div>
-								</li>
-								<li>
-									<div class="time_data">
-										<p>22</p>
-										<div class="time_wrap">
-											<div class="time_now">03</div>
-											<div class="time_point"></div>
-											<div class="time_now">2022</div>
-										</div>
-									</div>
-									<div class="center_line"></div>
-									<div class="text_title">【指南针】“场所码”是啥？扫了还亮“渝康码”不？</div>
-								</li>
-								<li>
-									<div class="time_data">
-										<p>12</p>
-										<div class="time_wrap">
-											<div class="time_now">03</div>
-											<div class="time_point"></div>
-											<div class="time_now">2022</div>
-										</div>
-									</div>
-									<div class="center_line"></div>
-									<div class="text_title">【指南针】一图了解：支持小微企业发展，2022年“六税  两费”减免政策再添力</div>
-								</li>
-								<li>
-									<div class="time_data">
-										<p>09</p>
-										<div class="time_wrap">
-											<div class="time_now">03</div>
-											<div class="time_point"></div>
-											<div class="time_now">2022</div>
-										</div>
-									</div>
-									<div class="center_line"></div>
-									<div class="text_title">【消息树】全国通报表扬!南岸区连续7年蝉联“全国文明城 区”荣誉称号！</div>
-								</li>
-							</ul>
-						</div>
-					</div>
+<!--					<div class="box-item">-->
+<!--						<div class="top">重庆市南岸区人民政府</div>-->
+<!--						<p class="text_top">重庆市南岸区人民政府 </p>-->
+<!--						<div class="text_rzzt">-->
+<!--							<h6 class="nanafb_title">认证主体</h6>-->
+<!--							<div class="content_title"><img src="./img/rztb.png" class="img_content" /><p class="content_descripe">中国共产党重庆市南岸区委员会宣传部</p></div>-->
+<!--						</div>-->
+<!--						<div class="content">-->
+<!--							<ul>-->
+<!--								<li>-->
+<!--									<div class="time_data">-->
+<!--										<p>30</p>-->
+<!--										<div class="time_wrap">-->
+<!--											<div class="time_now">03</div>-->
+<!--											<div class="time_point"></div>-->
+<!--											<div class="time_now">2022</div>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="center_line"></div>-->
+<!--									<div class="text_title">习近平在省部级主要领导干部学习贯彻党的十    九届六中全会精神专题研讨班开班式上发表重</div>-->
+<!--								</li>-->
+<!--								<li>-->
+<!--									<div class="time_data">-->
+<!--										<p>22</p>-->
+<!--										<div class="time_wrap">-->
+<!--											<div class="time_now">03</div>-->
+<!--											<div class="time_point"></div>-->
+<!--											<div class="time_now">2022</div>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="center_line"></div>-->
+<!--									<div class="text_title">【指南针】“场所码”是啥？扫了还亮“渝康码”不？</div>-->
+<!--								</li>-->
+<!--								<li>-->
+<!--									<div class="time_data">-->
+<!--										<p>12</p>-->
+<!--										<div class="time_wrap">-->
+<!--											<div class="time_now">03</div>-->
+<!--											<div class="time_point"></div>-->
+<!--											<div class="time_now">2022</div>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="center_line"></div>-->
+<!--									<div class="text_title">【指南针】一图了解：支持小微企业发展，2022年“六税  两费”减免政策再添力</div>-->
+<!--								</li>-->
+<!--								<li>-->
+<!--									<div class="time_data">-->
+<!--										<p>09</p>-->
+<!--										<div class="time_wrap">-->
+<!--											<div class="time_now">03</div>-->
+<!--											<div class="time_point"></div>-->
+<!--											<div class="time_now">2022</div>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="center_line"></div>-->
+<!--									<div class="text_title">【消息树】全国通报表扬!南岸区连续7年蝉联“全国文明城 区”荣誉称号！</div>-->
+<!--								</li>-->
+<!--							</ul>-->
+<!--						</div>-->
+<!--					</div>-->
 
-					<div class="box-item" style="display: flex;flex-wrap: wrap">
-						<div class="box_left">
-							<div class="top_different"></div>
-							<p class="text_nafb">南岸发布 </p>
-							<div class="content_nafb">
-								<h6 class="nanafb_title">公众号简介</h6>
-								<p class="nanafb_content">真诚与您沟通，真心为您服务!南岸发布将及时、准确、全面地为您播报有关重庆市南岸区经济社会发展的各项重点工作、重大活动，并接受相关咨询与投诉。</p>
-								<h6 class="nanafb_title">认证主体</h6>
-								<div class="content_title"><img src="./img/rztb.png" class="img_content" /><p class="content_descripe">中国共产党重庆市南岸区委员会宣传部</p></div>
-							</div>
-						</div>
-						<div class="box_right">
-							<div class="right_time">
-								<p class="right_top">30</p>
-								<div class="right_center"></div>
-								<div class="right_data">2020·03</div>
-							</div>
-							<p class="p_text">上海和吉林疫情仍处于发展状态、 三针疫苗接种可有效降低感染奥 密克戎后的病死率……权威回应！</p>
-							<div class="right_time">
-								<p class="right_top">21</p>
-								<div class="right_center"></div>
-								<div class="right_data">2020·03</div>
-							</div>
-							<p class="p_text">【指南针】一图了解：支持小微企业发展，2022年“六税两费”减免政策再添力</p>
-							<div class="right_time">
-								<p class="right_top">02</p>
-								<div class="right_center"></div>
-								<div class="right_data">2020·03</div>
-							</div>
-							<p class="p_text">南岸区关于解除部分区域封控防 范措施的通告 </p>
-							<div class="right_time">
-								<p class="right_top">28</p>
-								<div class="right_center"></div>
-								<div class="right_data">2020·03</div>
-							</div>
-							<p class="p_text">一封感谢信 讲述着这个隔离点的 温暖守护 </p>
-						</div>
-					</div>
+<!--					<div class="box-item" style="display: flex;flex-wrap: wrap">-->
+<!--						<div class="box_left">-->
+<!--							<div class="top_different"></div>-->
+<!--							<p class="text_nafb">南岸发布 </p>-->
+<!--							<div class="content_nafb">-->
+<!--								<h6 class="nanafb_title">公众号简介</h6>-->
+<!--								<p class="nanafb_content">真诚与您沟通，真心为您服务!南岸发布将及时、准确、全面地为您播报有关重庆市南岸区经济社会发展的各项重点工作、重大活动，并接受相关咨询与投诉。</p>-->
+<!--								<h6 class="nanafb_title">认证主体</h6>-->
+<!--								<div class="content_title"><img src="./img/rztb.png" class="img_content" /><p class="content_descripe">中国共产党重庆市南岸区委员会宣传部</p></div>-->
+<!--							</div>-->
+<!--						</div>-->
+<!--						<div class="box_right">-->
+<!--							<div class="right_time">-->
+<!--								<p class="right_top">30</p>-->
+<!--								<div class="right_center"></div>-->
+<!--								<div class="right_data">2020·03</div>-->
+<!--							</div>-->
+<!--							<p class="p_text">上海和吉林疫情仍处于发展状态、 三针疫苗接种可有效降低感染奥 密克戎后的病死率……权威回应！</p>-->
+<!--							<div class="right_time">-->
+<!--								<p class="right_top">21</p>-->
+<!--								<div class="right_center"></div>-->
+<!--								<div class="right_data">2020·03</div>-->
+<!--							</div>-->
+<!--							<p class="p_text">【指南针】一图了解：支持小微企业发展，2022年“六税两费”减免政策再添力</p>-->
+<!--							<div class="right_time">-->
+<!--								<p class="right_top">02</p>-->
+<!--								<div class="right_center"></div>-->
+<!--								<div class="right_data">2020·03</div>-->
+<!--							</div>-->
+<!--							<p class="p_text">南岸区关于解除部分区域封控防 范措施的通告 </p>-->
+<!--							<div class="right_time">-->
+<!--								<p class="right_top">28</p>-->
+<!--								<div class="right_center"></div>-->
+<!--								<div class="right_data">2020·03</div>-->
+<!--							</div>-->
+<!--							<p class="p_text">一封感谢信 讲述着这个隔离点的 温暖守护 </p>-->
+<!--						</div>-->
+<!--					</div>-->
 
 				</div>
 			</div>
@@ -196,7 +200,7 @@
 		<div class="wrap_child">
 			<div class="blog-contanier">
 				<div class="topic">
-					<span class="left">新浪微博</span>
+					<span class="left">新浪微博矩阵</span>
 				</div>
 				<div class="line"></div>
 				<div class="wrap">
@@ -234,7 +238,7 @@
 		<div class="wrap_child">
 			<div class="jrtt-contanier">
 				<div class="topic">
-					<span class="left">今日头条</span>
+					<span class="left">今日头条矩阵</span>
 				</div>
 				<div class="line"></div>
 				<div id="jrttList">