master

分支 (1)

管理

管理

master

webtpl
/
article.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">
  <link rel="stylesheet" href="assets/css/article.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">
				<div class="layui-col-md9 flex-def">
		    	<!-- 文章导航 -->
		    	<div class="profile layui-hide-xs">
		    		<div id="profile" class="profile-block">
							<fieldset class="layui-elem-field layui-field-title top-25">
							  <legend>文章导航</legend>
							</fieldset>
							<div class="profile_right">
					        <div class="profile_right_cnt">
				            <div class="profile_right_cnt_first"></div>
				            <p class="floatnav_a_cur"><a class="a-anchors" id="a00" href="#a0">一般信息</a></p>
				            <p class="sec"><a class="sec a-anchors" id="a11" href="#a1">分类</a></p>
				            <p class="sec"><a class="sec a-anchors" id="a22" href="#a2">产品分类</a></p>
				            <p class="sec"><a class="sec a-anchors" id="a33" href="#a3">产品属性与价格</a></p>
				            <p class="sec"><a class="sec a-anchors" id="a44" href="#a4">模板配置</a></p>
				            <p><a class="a-anchors" id="a55" href="#a5">属性</a></p>
				            <p><a class="a-anchors" id="a66" href="#a6">收款</a></p>
				            <p><a class="a-anchors" id="a77" href="#a7">卖家要求</a></p>
				            <p><a class="a-anchors" id="a88" href="#a8">卖货政策</a></p>
				            <div class="profile_right_cnt_last"></div>
			        		</div>
								</div>
				    </div>
					</div>

		    	<div class="block">
		    		<!-- article -->
		    		<div class="article top-25">
		    			<!-- article-article -->
		    			<div class="article-title">
		    				<h1>春节两周揽下全年25%销量，走不出天津成大烦恼</h1>
		    			</div>
		    			<!-- author -->
		    			<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>
							<!-- article info -->
							<div class="article-info flex-def flex-zBetween flex-cCenter">
								<div class="category">
									<div class="post-info">
										<span><a class="cat" href="#">遥远</a></span>
										<span><a class="top" href="#">热点</a></span>
									</div>
								</div>
								<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>
							<!-- content -->
							<div class="article-content typo">
								<div id="content" class="content">
                        <p>对个人进行实人认证，核验方式包括人脸识别、眼纹识别、姓名和身份证号验证等。要讲认证主要解决线上实人开户、帐号实名认证、帐号实人登录等场景中个人身份的识别问题。与其他实人认证服务相比，要讲认证在使用流程中甚至不需要用户做动作就能快速得出认证结果，速度快、体验好、通过率高，拥有业内独有的眼纹人脸双因子认证技术，安全水平已达金融级要求。</p>
                        <h1>1.产品特色</h1>
                        <ul>
                          <li>
                            <strong>金融级安全防控：</strong> 10年金融行业实名认证积累使得本产品具有精准识别身份冒用等风险防控能力；
                          </li>
                          <li>
                            <strong>工业级成熟能力：在</strong> 金融，直播，税务，二手交易，酒店，出行，租房等各种成熟业务场景大规模使用；
                          </li>
                          <li>
                            <strong>流畅刷脸体验：</strong> 接入流程简洁高效，提供不同验证方式的智能组合接入，可以方便商户快速接入。实人认证过程流畅自然，体验良好，正常用户通过率高。
                          </li>
                        </ul>
                        <h2>2.使用场景</h2>
                        <p>
                          <strong>1.标准认证方案实现快速实人认证</strong><br> 标准认证方案提供基于支付宝客户端的实人认证能力，采用多因子认证技术快速得出认证结果，方案包含4种子产品，可支持不同细分场景的多种定制化认证需求。标准认证方案包含4种子产品，可支持不同细分场景的多种定制化认证需求，场景介绍请见下：
                          <br>
                        </p>
                        <h3>
                          3.全量认证方案实现全渠道实人认证
                        </h3>
                        <img src="assets/img/post-photo-big.jpg" alt="">
                        <p>全量认证方案提供“标准认证方案”和“人脸认证SDK”相结合的综合方案，能够自动判断用户当前环境是否安装支付宝客户端，对于已安装的用户提供体验更好安全性更高的“标准认证方案”，对于未安装的用户提供“人脸认证SDK”，帮助合作伙伴的APP实现对未安装支付宝客户端用户的覆盖。<br> 全量认证方案包含“标准认证方案”4种子产品以及“人脸认证SDK”。“标准认证方案”场景介绍请见“标准认证方案场景介绍”；“人脸认证SDK”场景介绍请见下表：
                        <br>
                        </p>
                        <h4>4.产品出入参</h4>
                        <div>
                          <table>
                            <tbody>
                              <tr>
                                <td>
                                  <div><strong>子产品</strong></div>
                                </td>
                                <td>
                                  <div><strong>输入参数</strong></div>
                                </td>
                                <td>
                                  <div><strong>输出参数</strong></div>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div>多因子人脸认证</div>
                                  <div>多因子证照和人脸认证</div>
                                  <div>多因子证照认证</div>
                                  <div>多因子快捷认证</div>
                                </td>
                                <td>
                                  <div>以下任意一种：</div>
                                  <div>（1）姓名+身份证号</div>
                                  <div>（2）支付宝账号ID</div>
                                  <div>（3）要讲实人ID</div>
                                  <div>（4）无入参（直接唤起支付宝客户端）</div>
                                </td>
                                <td>
                                  <div>（1）根据是否认证通过，输出“是”或“否”</div>
                                  <div>（2）如果认证通过，则同时输出唯一身份标识</div>
                                  <div>（3）如果认证不通过，则同时输出不通过的原因</div>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <div>人脸认证SDK</div>
                                </td>
                                <td>
                                  <div>姓名+身份证号</div>
                                </td>
                                <td>
                                  <div>（1）根据是否认证通过，输出“是”或“否”</div>
                                  <div>（2）如果认证不通过，则同时出不通过的原因<br></div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <h5>5.申请条件</h5>
                        <p>1）合法成立的单位组织，拥有主体资格证明文件，需提供真实有效的营业执照，且认证账户名称需与营业执照主体一致。<br> 2）须具备所属行业的经营许可，拥有经营许可证明文件（若有）。<br> 3）须具备相应的安全技术系统和信息安全管理规范，确保用户信息的数据安全。
                        </p>
                        <h6>6.资费标准</h6>
                        <p>注：2017年3月16日至2018年4月15日之间，“信用＋联盟”商家调用本产品免费（人脸认证SDK除外）。
                          <a href="#">查看详情</a>
                        </p>
                        <h1>1.计费价格</h1>
                        <ul>
                          <li>多因子人脸认证通过<br>
                            <em>0.40</em>元/次</li>
                          <li>多因子证照和人脸认证通过<br>
                            <em>0.40</em>元/次</li>
                          <li>多因子证照认证通过<br>
                            <em>0.40</em>元/次</li>
                          <li>多因子快捷认证通过<br>
                            <em>0.10</em>元/次</li>
                          <li>人脸SDK认证通过<br>
                            <em>1.00</em>元/次</li>
                        </ul>
                        <h2>2.12313132</h2>
                        <p>
                          <strong>本接口及文档资料由要讲信用提供。您使用本接口，需要遵守开放平台相关协议及要讲信用要求。</strong>
                        </p>
                </div>
							</div>

							<!-- tags -->
							<div class="tags flex-def flex-cCenter">
								<h3>标签： </h3>
								<div class="tags-wrap">
				    			<a href="#"><span>热点</span></a>
				    			<a href="#"><span>商界</span></a>
				    			<a href="#"><span>见闻</span></a>
				    		</div>
							</div>

							<!-- previous next -->
							<div class="pre-next">
								<div class="pre">
									<a href="#" class="layui-btn layui-btn-primary layui-btn-sm">上一页</a>
									圆角的交叉组合，可以形成难以计算的按钮种类。
								</div>
								<div class="next">
									<a href="#" class="layui-btn layui-btn-primary layui-btn-sm">下一页</a>
									如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。
								</div>
							</div>
		    		</div>

		    		<hr class="top-25">

		    		<!-- coment -->
						<div class="comment top-25">
							<div class="block-header">
								<h2>
									评论区
								</h2>
							</div>
							<!-- form -->
							<div class="comment-form">
								<form class="layui-form" action="">
									<div class="layui-form-item">
										<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
									</div>
									<div class="layui-form-item">
								    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
								  </div>
								</form>
							</div>

							<!-- comment list -->
							<div class="comment-list top-25">
								<ul>
									<li class="comment-item">
										<div class="comment-item-top">
											<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>
										<div class="comment-item-bot">
											<div class="comment-text">
												本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
											</div>
											<div class="comment-op top-25">
												<a href="javascript:;">回复</a>
												<a href="javascript:;">删除</a>
											</div>
										</div>
										<hr class="top-25">
									</li>
									<li class="comment-item">
										<div class="comment-item-top">
											<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>
										<div class="comment-item-bot">
											<div class="comment-text">
												本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
											</div>

											<div class="comment-op top-25">
												<a href="javascript:;">回复</a>
												<a href="javascript:;">删除</a>
											</div>
										</div>
										<ul class="reply">
											<li class="comment-item">
												<div class="comment-item-top">
													<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>
												<div class="comment-item-bot">
													<div class="comment-text">
														本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
													</div>

													<div class="comment-op top-25">
														<a href="javascript:;">回复</a>
														<a href="javascript:;">删除</a>
													</div>
												</div>
											</li>
											<li class="comment-item">
												<div class="comment-item-top">
													<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>
												<div class="comment-item-bot">
													<div class="comment-text">
														本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
													</div>

													<div class="comment-op top-25">
														<a href="javascript:;">回复</a>
														<a href="javascript:;">删除</a>
													</div>
												</div>
											</li>
										</ul>
										<hr class="top-25">
									</li>
									<li class="comment-item">
										<div class="comment-item-top">
											<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>
										<div class="comment-item-bot">
											<div class="comment-text">
												本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块
											</div>
											<div class="comment-op top-25">
												<a href="javascript:;">回复</a>
												<a href="javascript:;">删除</a>
											</div>
										</div>
										<hr class="top-25">
									</li>
								</ul>
								<!-- pager -->
				    		<div id="pagination" class="flex-def flex-zCenter top-25">
				    			<div id="pager"></div>
				    		</div>
							</div>
						</div>
		    	</div>
		    </div>
		    <div class="layui-col-md3">
		      <!-- hot articles -->
		      <div class="block hot-article">
		      	<div class="block-header flex-def flex-zBetween">
								<h2>热门文章</h2>
								<a href="#" class="more">
									更多
									<i class="layui-icon layui-icon-right"></i>
								</a>
							</div>
		      	<ul class="hot-article-wrap">
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/6.jpg">
		      			</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
			      			<img src="assets/img/5.jpg">
			      		</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/4.jpg">
		      			</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/3.jpg">
		      			</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/2.jpg">
		      			</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/1.jpg">
		      			</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/0.jpg">
		      			</div>
		      		</li>
		      		<li class="hot-article-item">
		      			<a href="#">劝爸妈戴口罩太难了，就像当年他们劝我穿秋裤</a>
		      			<div class="hot-img">
		      				<img src="assets/img/6.jpg">
		      			</div>
		      		</li>
		      	</ul>
		      </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','profile'], function(){
  var layer = layui.layer
  ,$ = layui.jquery
  ,swiper = layui.swiper
  ,element = layui.element
  ,profile = layui.profile
  ,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>   '
  });

  //锚点导航
  profile.init('#content','#profile');

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