master

分支 (1)

管理

管理

master

webtpl
/
topic.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>开始使用layui</title>
  <link rel="stylesheet" href="assets/libs/layui/css/layui.css">
  <link rel="stylesheet" href="assets/libs/swiper/css/swiper.css">

  <!-- 自定义css -->
  <link rel="stylesheet" href="assets/css/common.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body class="bg-body">

	<!-- header -->
	<section class="header">
		<!-- 主导航 -->
		<div class="layui-bg-black main-nav">
			<div class="layui-container">
				<div class="layui-nav layui-bg-black flex-def flex-zBetween">
					<!-- logo -->
					<div class="layui-nav-item">
						<a class="flex-def flex-cCenter" href="/">
				      <img src="assets/img/logo.png" width="82" height="31" alt="logo">
				    </a>
					</div>
					<!-- nav list -->
			    <div>
					  <div class="layui-nav-item layui-hide layui-show-xs-block">
						  <a id="main_nav_btn" class="text-center" href="javascript:;">
						  	<i class="layui-icon layui-icon-app"></i>
						  </a>
					  </div>
						<ul id="main_nav_list" class="layui-hide-xs">
						  <li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">最新活动</a></li>
						  <li class="layui-nav-item layui-show-xs-block layui-this"><a href="javascript:;">产品</a></li>
						  <li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">大数据</a></li>
						  <li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">社区</a></li>
						  <li class="layui-nav-item layui-show-xs-block">
						    <a href="javascript:;">
						    	<img src="assets/img/user.jpg" class="layui-nav-img">我
						    </a>
						    <dl class="layui-nav-child">
						      <dd><a href="javascript:;">修改信息</a></dd>
						      <dd><a href="javascript:;">安全管理</a></dd>
						      <dd><a href="javascript:;">退了</a></dd>
						    </dl>
						  </li>
						  <!-- 登录 注册
						  <li class="layui-nav-item"><a class="signup" href="#">登录</a></li>
						  <li class="layui-nav-item"><a class="signup" href="#">注册</a></li> -->
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 次导航 -->
		<div class="ci-nav bg-white shadow">
			<div class="layui-container swiper-box">
				<div id="nav_swiper" class="swiper-container">
					<div class="swiper-wrapper">
				    <a class="swiper-slide active" href="#">Dashboard</a>
				    <a class="swiper-slide" href="#">Friends</a>
				    <a class="swiper-slide" href="#">Explore</a>
				    <a class="swiper-slide" href="#">Suggestions</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				    <a class="swiper-slide" href="#">Link</a>
				  </div>
				</div>
				<!-- 如果需要导航按钮 -->
				<span id="nav_prev" class="swiper-button-prev"></span>
				<span id="nav_next" class="swiper-button-next"></span>
			</div>
		</div>
	</section>

	<!-- crumb -->
	<section class="crumb top-25 layui-hide-xs">
		<div class="layui-container">
			<span class="layui-breadcrumb">
				<a href="/"><i class="layui-icon layui-icon-home"></i></a>
				<a href="">国际新闻</a>
				<a href="">亚太地区</a>
				<a><cite>正文</cite></a>
			</span>
		</div>
	</section>

	<!-- body -->
	<section class="body top-25">
		<div class="layui-container">
			<div class="layui-row layui-col-space20">
				<!-- left -->
				<div class="layui-col-md3">
					<!-- subscribe -->
					<div class="subscribe-tab">
						<div class="subscribe-header">
							<h2 class="subscribe-tab-title">1月29日</h2>
							<div class="subscribe-tab-time">
								<span>JAN.29</span>
								<span>农历一月四日</span>
								<span>星期三</span>
							</div>
						</div>
						<div class="subscribe-footer">
							<p>共订阅2个媒体<i class="layui-icon layui-icon-right"></i></p>
					  </div>
					</div>
				</div>
				<!-- center -->
				<div class="layui-col-md6">
					<div class="block">
						<!-- topic info -->
		    		<div class="topic-state">
		    			<div class="block-header flex-def flex-zBetween">
								<h2>
									<i class="layui-icon layui-icon-flag best-icon"></i>
									话题专栏
								</h2>
							</div>
							<div class="flex-def flex-zBetween">
								<div class="topic-logo">
									<img src="assets/img/36k.jpg">
									<h2>果壳</h2>
								</div>
								<div class="topic-info layui-card">
								  <div class="layui-card-header">卡片面板</div>
								  <div class="layui-card-body">
								    <p>卡片式面板面板通常用于非白色背景色的主体内</p>
								    <p>从而映衬出边框投影</p>
								    <p>科学和技术，是我们和这个世界对话所用的语言。</p>
								  </div>
								</div>
							</div>
		    		</div>

						<!-- hot topic -->
		    		<div class="topic top-25">
		    			<div class="block-header flex-def flex-zBetween">
								<h2>
									<i class="layui-icon layui-icon-heart best-icon"></i>
									热门专题
								</h2>
								<a href="#" class="more">
									更多专题
									<i class="layui-icon layui-icon-right"></i>
								</a>
							</div>
							<ul class="topic-tags">
								<li><a href="#">热点</a></li>
								<li><a href="#">见闻</a></li>
								<li><a href="#">新知</a></li>
								<li><a href="#">读心</a></li>
								<li><a href="#">职场</a></li>
								<li><a href="#">娱乐</a></li>
								<li><a href="#">潮流</a></li>
								<li><a href="#">商界</a></li>
								<li><a href="#">人文</a></li>
								<li><a href="#">乐活</a></li>
								<li><a href="#">腔调</a></li>
								<li title="换一批"><a href="#"><i class="layui-icon layui-icon-refresh-1"></i></a></li>
							</ul>
		    		</div>

						<!-- posts -->
		    		<div class="posts top-25">
		    			<div class="block-header flex-def flex-zBetween">
								<h2><i class="layui-icon layui-icon-read best-icon"></i> 最新文章</h2>
							</div>

							<!-- post list -->
							<ul>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>

									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3>
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/0.jpg" class="heightsuit">
										</div>
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>

									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3>
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/1.jpg" class="heightsuit">
										</div>
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>

									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3>
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<!-- <div class="post-right">
											<img src="assets/img/2.jpg" class="heightsuit">
										</div> -->
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>

									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3>
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<!-- <div class="post-right">
											<img src="assets/img/3.jpg" class="heightsuit">
										</div> -->
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>

									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3>
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/4.jpg" class="heightsuit">
										</div>
									</div>
								</li>
								<li class="post-item">
									<div class="user-info">
										<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
										<div class="user-profile">
											<span class="user-name">〃我</span>
											<span class="post-time">3小时前</span>
										</div>
									</div>

									<div class="post-body">
										<div class="post-left">
											<div class="post-info">
												<span><a class="cat" href="#">遥远</a></span>
												<span><a class="top" href="#">热点</a></span>
											</div>
											<h3 class="post-title">
												<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
											</h3>
											<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》  陈能场演讲视频：   以下为陈能场演讲实录：  大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
											<div class="post-like">
												<span><i class="layui-icon layui-icon-heart"></i>  2</span>
												<span><i class="layui-icon layui-icon-chat"></i>  3</span>
											</div>
										</div>
										<div class="post-right">
											<img src="assets/img/5.jpg" class="heightsuit">
										</div>
									</div>
								</li>
							</ul>
		    		</div>

		    		<!-- pager -->
		    		<div id="pagination" class="flex-def flex-zCenter top-25">
		    			<div id="pager"></div>
		    		</div>

					</div>
				</div>
				<!-- right -->
				<div class="layui-col-md3">
					<!-- 订阅 -->
		      <div class="block medium-card">
		    		<div class="medium-top">
	    				<div>
	    					<img src="assets/img/0.webp">
	    					<h3>历史品读</h3>
	    				</div>
    					<!-- <a  href="#" class="focus">订阅</a>  -->
    					<a class="unfocus" href="#">已订阅</a>
		    		</div>
		    		<div class="medium-bottom">
		    			全球视野，价值视角。
		    		</div>
		    	</div>

		    	<!-- 订阅 -->
		      <div class="block medium-card top-25">
		    		<div class="medium-top">
	    				<div>
	    					<img src="assets/img/0.webp">
	    					<h3>历史品读</h3>
	    				</div>
    					<a  href="#" class="focus">订阅</a>
    					<!-- <a class="unfocus" href="#">已订阅</a> -->
		    		</div>
		    		<div class="medium-bottom">
		    			全球视野，价值视角。
		    		</div>
		    	</div>

		    	<!-- 作者 -->
		      <div class="block author top-25">
		      	<div class="block-header">
		      		<h2>推荐作者</h2>
		      		<a href="#" class="more">
						    更多
						    <i class="layui-icon layui-icon-right"></i>
						  </a>
		      	</div>
		    		<div class="author-wrap">
		    			<ul>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    				<li class="author-item">
		    					<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
		    					<div class="author-info">
		    						<h3>你我他</h3>
		    						<p>文章 123, 话题 12</p>
		    					</div>
		    				</li>
		    			</ul>
		    		</div>
		    	</div>

					<!-- 标签 -->
		    	<div class="block tags top-25">
		      	<div class="block-header">
		      		<h2>热门标签</h2>
		      		<a href="#" class="more">
						    更多
						    <i class="layui-icon layui-icon-right"></i>
						  </a>
		      	</div>
		    		<div class="tags-wrap">
		    			<a href="#"><span>热点</span></a>
		    			<a href="#"><span>商界</span></a>
		    			<a href="#"><span>见闻</span></a>
		    			<a href="#"><span>职场</span></a>
		    			<a href="#"><span>娱乐</span></a>
		    			<a href="#"><span>新知</span></a>
		    			<a href="#"><span>读心</span></a>
		    			<a href="#"><span>乐活</span></a>
		    			<a href="#"><span>潮流</span></a>
		    			<a href="#"><span>人文</span></a>
		    			<a href="#"><span>腔调</span></a>
		    		</div>
		    	</div>

				</div>
			</div>
		</div>
	</section>

	<!-- footer -->
	<section class="footer">
    <p>
      Copyright © 2019<a href="javascript:;" target="_blank">daimajie.com</a>
      <a href="javascript:;" target="_blank">DAIMAJIE社区</a>
      <a href="javascript:;" target="_blank" rel="nofollow">黑ICP备123456789号</a>
    </p>
  </section>


<script src="assets/libs/layui/layui.js"></script>
<script src="assets/js/config.js"></script>
<script>
layui.use(['layer', 'element', 'swiper', 'jquery', 'laypage'], function(){
  var layer = layui.layer
  ,$ = layui.jquery
  ,swiper = layui.swiper
  ,element = layui.element
  ,laypage = layui.laypage;

  //导航JS
  (function nav(){
		/*主导航*/
	  $('#main_nav_btn').on('click', function(){
	  	$('#main_nav_list').toggleClass('layui-hide-xs');
	  });

	  /*次导航*/
	  var mainNavSwiper = new Swiper('#nav_swiper',{
	  		slidesPerView : 'auto',
	  		navigation: {
		      nextEl: '#nav_prev',
		      prevEl: '#nav_next',
		    },
	  });
  })();


  //分页
  laypage.render({
    elem: 'pagination'
    ,count: 50
    ,prev : '<i class="layui-icon layui-icon-left"></i>   '
    ,next : '<i class="layui-icon layui-icon-right"></i>   '
  });

  layer.msg('Hello World');
});
</script>
</body>
</html>