十次方项目前端，前台首页导航搭建（十一）
一、网站布局
（1）拷贝静态资源：将静态原型中的css、img、plugins目录拷贝至assets目录下 。
（2）我们参照静态原型中的activiti-index.html页面来编写网站的通用布局，即网站的头部和尾部
修改layouts下的default.vue，内容如下：
<template>
<div>
<header>
<div class="activity-head">
<div class="wrapper">
<div class="sui-navbar">
<div class="navbar-inner">
<a href="index-logined.html" class="sui-brand"><img src="~/assets/img/asset-logo-black.png" alt="社交"/></a>
<ul class="sui-nav">
<li class="active"><a href="~/assets/headline-
logined.html">头条</a></li>
<li><a href="~/assets/qa-logined.html" >问答</a></li>
<li><a href="~/assets/activity-index.html" >活动</a></li>
<li><a href="~/assets/makeFriends-index.html" >交友</a></li>
<li><a href="~/assets/spit-index.html" >吐槽</a></li>
<li><a href="~/assets/recruit-index.html" >招聘</a>
</li>
</ul>
<form class="sui-form sui-form pull-left">
<input type="text" placeholder="输入关键词...">
<span class="btn-search fa fa-search"></span>
</form>
<div class="sui-nav pull-right info">
<li><a href="~/assets/other-notice.html" target="_blank" class="notice">通知</a></li>
<li class="hover">
<span class="fa fa-plus "></span>
<ul class="hoverinfo">
<li><i class="fa fa-share-alt" aria-hidden="true"></i> <a href="~/assets/headline-submit.html">去分享</a></li>
<li><i class="fa fa-question-circle" aria-hidden="true"></i> <a href="~/assets/qa-submit.html" target="_blank">提问题</a></li>
<li><i class="fa fa-comments" aria-hidden="true"></i><a href="~/assets/spit-submit.html" target="_blank">去吐槽</a></li>
<li><i class="fa fa-heartbeat" aria-hidden="true"></i> <a href="~/assets/makeFriends-submit.html" target="_blank">发约会</a></li>
</ul>
</li>
<li><a href="~/assets/person-homepage.html" target="_blank" class="homego"><img src="~/assets/img/widget-photo.png" alt="用户头像"></a></li>
</div>
</div>
</div>
</div>
</div>
</header>
<nuxt/>
<!-- 底部版权声明 -->
<footer>
<div class="footer">
<div class="wrapper">
<div class="footer-bottom">
<div class="link">
<dl>
<dt>网站相关</dt>
<dd>关于我们</dd>
<dd>服务条款</dd>
<dd>帮助中心</dd>
<dd>编辑器语法</dd>
</dl>
<dl>
<dt>常用链接</dt>
<dd>传智播客</dd>
<dd>传智论坛</dd>
</dl>
<dl>
<dt>联系我们</dt>
<dd>联系我们</dd>
<dd>加入我们</dd>
<dd>建议反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>微博</dd<dd>twitter</dd>
</dl>
<div class="xuke">
<h3>内容许可</h3>
<p>除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可</p>
<p>本站由 传智研究院 提供更新服务</p>
</div>
</div>
<p class="Copyright">Copyright © 2017 传智问答社区 当前版本0.0.1</p>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
import '~/assets/plugins/normalize-css/normalize.css'
import '~/assets/plugins/yui/cssgrids-min.css'
import '~/assets/plugins/sui/sui.min.css'
import '~/assets/plugins/sui/sui-append.min.css'
import '~/assets/plugins/font-awesome/css/font-awesome.min.css'
import '~/assets/css/widget-base.css'
import '~/assets/css/widget-head-foot.css'
export default {
}
</script>
运行指挥的页面如下：
头部：
尾部：
二、头条页面
修改pages/index.vue ,内容如下：
参考headline-login.html页面构建，拷贝代码后将./批量替换为~/assets/,并添加 export default { }
<template>
<!--三列布局-->
<div class="sj-content">
<div class="left-nav">
<div class="float-nav" id="float-nav">
<ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
<li class="active"><a>热门</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>
</ul>
</div>
</div>
<div class="right-content">
<div class="fl middle">
<div class="carousel">
<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="~/assets/img/widget-banner01.png" />
</div>
<div class="item">
<img src="~/assets/img/widget-banner02.png" />
</div>
<div class="item">
<img src="~/assets/img/widget-banner01.png" />
</div>
</div>
</div>
</div>
<div class="data-list">
<ul class="headline fixed" id="headline">
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月22日 12:01</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月12日 13：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="~/assets/img/widget-list01.png" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月12日 13：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content"></p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月7日 10：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="~/assets/img/widget-list02.png" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月12日 13：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content"></p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月7日 10：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
</ul>
<div class="stop">
<a href="javascript:;">32分钟前看到这里，点击刷新 <i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>
<ul id="data-list-down" class="headline loading">
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月22日 12:01</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月12日 13：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="~/assets/img/widget-list01.png" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月12日 13：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content"></p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月7日 10：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="~/assets/img/widget-list02.png" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月12日 13：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content"></p> </li>
<li class="headline-item">
<div class="fl indexImg">
<img src="" />
</div>
<div class="words">
<h3>Drive.ai融资5000万吴恩达加入董事会 <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3>
<h5 class="author">
<div class="fl">
<span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> 玻璃通 </span>
<span>6月7日 10：34</span>
</div>
<div class="fr attention">
<span class="attentionText">关注</span>
<span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">不感兴趣</i> </span>
</div>
<div class="clearfix"></div> </h5>
</div> <p class="content">滴滴与360都开源了各自的插件化框架，VirtualAPK与RePlugin,作为一个插件化方面的狂热研究者，在周末就迫不及待的下载了Virtualapk框架来进行研究，本篇博客带的……</p> </li>
</ul>
<ul id="loaded" class="headline">
</ul>
</div>
<!-- <script src="~/assets/data-list.js" type="text/javascript"></script> -->
</div>
<div class="fl right">
<div class="activity">
<div class="acti">
<img src="~/assets/img/widget-activity01.png" alt="活动一" />
</div>
<div class="acti">
<img src="~/assets/img/widget-activity02.png" alt="活动一" />
</div>
</div>
<div class="block-btn">
<p>今天，有什么好东西要和大家分享么?</p>
<a class="sui-btn btn-block btn-share" href="~/assets/headline-submit.html" target="_blank">发布分享</a>
</div>
<div class="question-list">
<h3 class="title">热门回答</h3>
<div class="lists">
<ul>
<li class="list-item"> <p class="list-title">关于系统问答你都应该都应该都应该注意些什么吗？</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />玻璃筒</span> <span>6月22日 12:01</span> </p> </li>
<li class="list-item"> <p class="list-title">关于系统问答你都应该注意吗？</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />玻璃筒</span> <span>6月22日 12:01</span> </p> </li>
<li class="list-item"> <p class="list-title">关于系统问答你都应该注意吗？</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />玻璃筒</span> <span>6月22日 12:01</span> </p> </li>
<li class="list-item"> <p class="list-title">关于系统问答你都应该注意吗？</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />玻璃筒</span> <span>6月22日 12:01</span> </p> </li>
<li class="list-item"> <p class="list-title">关于系统问答你都应该注意吗？</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />玻璃筒</span> <span>6月22日 12:01</span> </p> </li>
</ul>
<a class="sui-btn btn-block btn-bordered btn-more">查看更多</a>
</div>
</div>
<div class="card-list">
<div class="head">
<h3 class="title">遇见TA</h3>
</div>
<div class="list">
<ul>
<li class="card-item">
<div class="attention">
<span>关注匹配度：<i class="degree">83%</i></span>
<span class="fr"><i class="fa fa-heart-o" aria-hidden="true"></i><i class="fa fa-times close" aria-hidden="true"></i></span>
</div>
<div class="img">
<img src="~/assets/img/widget-t01be3f1015cf52e1f3.png" alt="" />
</div>
<div class="info">
<div class="fl photo">
<img src="~/assets/img/widget-photo.png" alt="" />
</div>
<div class="fl intro">
<p>【馨儿】发布了雕刻时光约会邀请</p>
<p class="name">玻璃通 <span class="date">6月22日 12:01</span></p>
</div>
<div class="clearfix"></div>
</div> </li>
<li class="card-item">
<div class="attention">
<span>关注匹配度：<i class="degree">86%</i></span>
<span class="fr"><i class="fa fa-heart-o" aria-hidden="true"></i><i class="fa fa-times close" aria-hidden="true"></i></span>
</div>
<div class="img">
<img src="~/assets/img/widget-MOG88A60E7ZI.png" alt="" />
</div>
<div class="info">
<div class="fl photo">
<img src="~/assets/img/widget-photo.png" alt="" />
</div>
<div class="fl intro">
<p>【馨儿】发布了雕刻时光约会邀请</p>
<p class="name">玻璃通 <span class="date">6月22日 12:01</span></p>
</div>
<div class="clearfix"></div>
</div> </li>
<li class="card-item">
<div class="attention">
<span>关注匹配度：<i class="degree">78%</i></span>
<span class="fr"><i class="fa fa-heart-o" aria-hidden="true"></i><i class="fa fa-times close" aria-hidden="true"></i></span>
</div>
<div class="img">
<img src="~/assets/img/widget-t019e2d84e53580b099.png" alt="" />
</div>
<div class="info">
<div class="fl photo">
<img src="~/assets/img/widget-photo.png" alt="" />
</div>
<div class="fl intro">
<p>【馨儿】发布了雕刻时光约会邀请</p>
<p class="name">玻璃通 <span class="date">6月22日 12:01</span></p>
</div>
<div class="clearfix"></div>
</div> </li>
</ul>
<a class="sui-btn btn-block btn-bordered btn-more">查看更多</a>
</div>
</div>
<div class="activity-list">
<h3 class="title">活动日历</h3>
<div class="list">
<ul>
<li class="list-item"> <p class="list-time"> 2017/06/30 北京</p>
<div class="list-content clearfix">
<div class="fl img">
<img src="~/assets/img/widget-simple.png" alt="" />
</div>
<div>
<p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
</div>
</div> </li>
<li class="list-item"> <p class="list-time"> 2017/06/30 北京</p>
<div class="list-content clearfix">
<div class="fl img">
<img src="~/assets/img/widget-simple.png" alt="" />
</div>
<div>
<p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
</div>
</div> </li>
<li class="list-item"> <p class="list-time"> 2017/06/30 北京</p>
<div class="list-content clearfix">
<div class="fl img">
<img src="~/assets/img/widget-simple.png" alt="" />
</div>
<div>
<p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
</div>
</div> </li>
<li class="list-item"> <p class="list-time"> 2017/06/30 北京</p>
<div class="list-content clearfix">
<div class="fl img">
<img src="~/assets/img/widget-simple.png" alt="" />
</div>
<div>
<p>在线峰会 | 前端开发重难点技术剖析与创新实践</p>
</div>
</div> </li>
</ul>
<a class="sui-btn btn-block btn-bordered btn-more">查看更多</a>
</div>
</div>
<div class="ad-carousel">
<div class="carousel">
<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="~/assets/img/widget-ad01.png" />
</div>
<div class="item">
<img src="~/assets/img/widget-ad01.png" />
</div>
<div class="item">
<img src="~/assets/img/widget-ad01.png" />
</div>
</div>
<span class="adname">广告</span>
</div>
</div>
</div>
<!-- <link rel="import" href=".~/assets/.~/assets/modules/ui-modules/footer/footer.html?__inline"> -->
</div>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-headline-login.css'
export default {
}
</script>
完成后的显示结果如下:
三、其他频道页
按照上述方法构建以下页面
（1）建立pages/qa/index.vue （问答首页）
<template>
<div>
<div class="tab-nav ">
<div class="wrapper">
<ul class="fl sui-nav nav-tabs navbar-dark">
<li class="active"><a href="#index" data-toggle="tab">首页</a></li>
<li><a href="#php" data-toggle="tab">Php</a></li>
<li><a href="#js" data-toggle="tab">Javascript </a></li>
<li><a href="#python" data-toggle="tab">Python</a></li>
<li><a href="#java" data-toggle="tab">Java</a></li>
</ul>
<span class="fr more"><a href="~/assets/qa-allTag.html" target="_blank">更多</a></span>
<div class="clearfix"></div>
</div>
</div>
<!--两列布局-->
<div class="wrapper qa-content">
<div class="fl left-list">
<div class="tab-content">
<div id="index" class="tab-pane active">
<div class="tab-bottom-line">
<ul class="sui-nav nav-tabs">
<li class="active"><a href="#new" data-toggle="tab">最新回答</a></li>
<li><a href="#hot" data-toggle="tab">热门回答</a></li>
<li><a href="#wait" data-toggle="tab">等待回答</a></li>
</ul>
<div class="qa-list">
<div class="tab-content">
<div id="new" class="tab-pane active">
<ul class="detail-list">
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">12</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">9</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">luckness</span><span>3</span>分钟前回答</p>
<p class="title"><a href="~/assets/qa-detail.html" target="_blank">有关PHP初级进阶的问题？</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li>
</ul>
<div class="fr brower">
<p>浏览量 50 | 2017-07-05 15:09 来自 <a href="#">毕鹏 </a></p>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">12</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">9</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">牛奶糖</span><span>3</span>分钟前回答</p>
<p class="title"><a href="~/assets/qa-detail.html" target="_blank">springMVC的controller接收json数据失败</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li>
</ul>
<div class="fr brower">
<p>浏览量 50 | 2017-07-05 15:09 来自 <a href="#">毕鹏 </a></p>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">12</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">9</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">大白兔</span><span>3</span>分钟前回答</p>
<p class="title"><a href="~/assets/qa-detail.html" target="_blank">监听器中timer查询数据库</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li>
</ul>
<div class="fr brower">
<p>浏览量 50 | 2017-07-05 15:09 来自 <a href="#">毕鹏 </a></p>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">34</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">9</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">luckness</span><span>3</span>分钟前回答</p>
<p class="title"><a href="~/assets/qa-detail.html" target="_blank">服务器上安装了一个考试系统ASP.NET,安装完成后访问不了，求助</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li>
</ul>
<div class="fr brower">
<p>浏览量 50 | 2017-07-05 15:09 来自 <a href="#">毕鹏 </a></p>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">12</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">9</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">牛奶糖</span><span>3</span>分钟前回答</p>
<p class="title"><a href="~/assets/qa-detail.html" target="_blank">springMVC的controller接收json数据失败</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li>
</ul>
<div class="fr brower">
<p>浏览量 50 | 2017-07-05 15:09 来自 <a href="#">毕鹏 </a></p>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum">12</p>
<p>有用</p>
</div>
<div class="border answer">
<p class="ansnum">9</p>
<p>回答</p>
</div>
</div>
</div>
<div class="fl info">
<div class="question">
<p class="author"><span class="name">大白兔</span><span>3</span>分钟前回答</p>
<p class="title"><a href="~/assets/qa-detail.html" target="_blank">监听器中timer查询数据库</a></p>
</div>
<div class="other">
<ul class="fl sui-tag">
<li>Php</li>
<li>Javascript</li>
</ul>
<div class="fr brower">
<p>浏览量 50 | 2017-07-05 15:09 来自 <a href="#">毕鹏 </a></p>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
</ul>
</div>
<div id="hot" class="tab-pane">
<p>热门回答</p>
</div>
<div id="wait" class="tab-pane">
<p>等待回答</p>
</div>
</div>
</div>
</div>
</div>
<div id="php" class="tab-pane">
php
</div>
<div id="js" class="tab-pane">
Javascript
</div>
<div id="python" class="tab-pane">
python
</div>
<div id="java" class="tab-pane">
java
</div>
</div>
</div>
<div class="fl right-tag">
<div class="block-btn">
<p>今天，有什么好东西要和大家分享么?</p>
<a class="sui-btn btn-block btn-share" href="~/assets/qa-submit.html" target="_blank">发布问题</a>
</div>
<div class="hot-tags">
<div class="head">
<h3 class="title">热门标签</h3>
</div>
<div class="tags">
<ul class="sui-tag">
<li>Php</li>
<li>Javascript</li>
<li>Gif</li>
<li>Java</li>
<li>C#</li>
<li>iOS</li>
<li>C++</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-qa-login.css'
export default {
}
</script>
（2）建立pages/gathering/index.vue（活动首页）
<template>
<div>
<div class="wrapper activities">
<div class="activity-card-list">
<div class="top-title">
<h4 class="latest">最新活动</h4>
<div class="clearfix"></div>
</div>
<div class="activity-list">
<ul class="activity">
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity2.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">活动结束</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity3.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">活动进行中</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity5.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity4.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">活动进行中</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity5.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity3.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
<li class="activity-item">
<div class="activity-inner">
<a href="http://"></a>
<div class="img">
<a href="~/assets/activity-detail.html" target="_blank"><img src="~/assets/img/widget-activity1.png" alt="" /></a>
</div>
<div class="text">
<p class="title">APMCon2017中国应用性能管理大会</p>
<div class="fl goin">
<p>时间：2017-07-29 周六</p>
<p>城市：广州</p>
</div>
<div class="fr btn">
<span class="sui-btn btn-bao">立即报名</span>
</div>
<div class="clearfix"></div>
</div>
</div> </li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import '~/assets/css/page-sj-activity-index.css'
export default {
}
</script>
（3）建立pages/friends/index.vue（交友首页）
<template>
<div>
<div class="wrapper tag-item">
<div class="fl left-list">
<p class="full-info">为了获取更好的体验 请 <a href="makeFriends-edit.html" target="_blank">完善兴趣信息</a><span class="sui-icon icon-tb-close close"></span></p>
<div class="friend-dating-list">
<ul class="friends">
<li class="friend-item">
<div class="fl photo">
<span class="cafe-more"></span>
<div class="img">
<img src="~/assets/img/widget-dating1.png" alt="" />
</div>
<div class="tag">
<span class="tag-cafe cafe"><i class="fa fa-coffee" aria-hidden="true"></i> 喝咖啡</span>
</div>
</div>
<div class="fl content">
<p class="title"> <span class="name">全栈大牛</span> 邀你一起 <span class="cafe">喝咖啡</span> <b class="bold">匹配度 96%</b> </p>
<p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p>
<p class="point"> 他刚刚分享了XXX文章</p>
<p class="desc"> 推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
</div>
<div class="fr xy">
<ul>
<li><i class="like sui-icon icon-tb-like"></i></li>
<li><i class="close sui-icon icon-tb-roundclose"></i></li>
<li><i class="message sui-icon icon-tb-comment"></i></li>
</ul>
</div>
<div class="clearfix"></div> </li>
<li class="friend-item">
<div class="fl photo">
<span class="eat-more"></span>
<div class="img">
<img src="~/assets/img/widget-dating2.png" alt="" />
</div>
<div class="tag">
<span class="tag-cafe eat"><i class="fa fa-cutlery" aria-hidden="true"></i> 吃饭</span>
</div>
</div>
<div class="fl content">
<p class="title"> <span class="name">全栈大牛</span> 邀你一起 <span class="eat">吃饭</span> <b class="bold">匹配度 96%</b> </p>
<p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p>
<p class="point">他刚刚分享了XXX文章</p>
<p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
</div>
<div class="fr xy">
<ul>
<li><i class="like sui-icon icon-tb-like"></i></li>
<li><i class="close sui-icon icon-tb-roundclose"></i></li>
<li><i class="message sui-icon icon-tb-comment"></i></li>
</ul>
</div>
<div class="clearfix"></div> </li>
<li class="friend-item">
<div class="fl photo">
<span class="travel-more"></span>
<div class="img">
<img src="~/assets/img/widget-dating3.png" alt="" />
</div>
<div class="tag">
<span class="tag-cafe travel"><img src="~/assets/img/widget-fa-travel.png" alt="" /> 旅行</span>
</div>
</div>
<div class="fl content">
<p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="travel">旅行</span><b class="bold">匹配度 96%</b></p>
<p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p>
<p class="point">他刚刚分享了XXX文章</p>
<p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
</div>
<div class="fr xy">
<ul>
<li><i class="like sui-icon icon-tb-like"></i></li>
<li><i class="close sui-icon icon-tb-roundclose"></i></li>
<li><i class="message sui-icon icon-tb-comment"></i></li>
</ul>
</div>
<div class="clearfix"></div> </li>
<li class="friend-item">
<div class="fl photo">
<span class="sing-more"></span>
<div class="img">
<img src="~/assets/img/widget-dating3.png" alt="" />
</div>
<div class="tag">
<span class="tag-cafe sing"><img src="~/assets/img/widget-fa-sing.png" alt="" /> K歌</span>
</div>
</div>
<div class="fl content">
<p class="title"><span class="name">全栈大牛</span> 邀你一起<span class="sing">K歌</span><b class="bold">匹配度 96%</b></p>
<p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p>
<p class="point">他刚刚分享了XXX文章</p>
<p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
</div>
<div class="fr xy">
<ul>
<li><i class="like sui-icon icon-tb-like"></i></li>
<li><i class="close sui-icon icon-tb-roundclose"></i></li>
<li><i class="message sui-icon icon-tb-comment"></i></li>
</ul>
</div>
<div class="clearfix"></div> </li>
<li class="friend-item">
<div class="fl photo">
<span class="movie-more"></span>
<div class="img">
<img src="~/assets/img/widget-dating4.png" alt="" />
</div>
<div class="tag">
<span class="tag-cafe movie"><img src="~/assets/img/widget-fa-movie.png" alt="" /> 看电影</span>
</div>
</div>
<div class="fl content">
<p class="title"><span class="name">全栈大牛</span> 邀你一起<span class="movie">看电影</span><b class="bold">匹配度 96%</b></p>
<p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p>
<p class="point">他刚刚分享了XXX文章</p>
<p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
</div>
<div class="fr xy">
<ul>
<li><i class="like sui-icon icon-tb-like"></i></li>
<li><i class="close sui-icon icon-tb-roundclose"></i></li>
<li><i class="message sui-icon icon-tb-comment"></i></li>
</ul>
</div>
<div class="clearfix"></div> </li>
<li class="friend-item">
<div class="fl photo">
<span class="other-more"></span>
<div class="img">
<img src="~/assets/img/widget-dating5.png" alt="" />
</div>
<div class="tag">
<span class="tag-cafe other"><img src="~/assets/img/widget-fa-other.png" alt="" /> 其他</span>
</div>
</div>
<div class="fl content">
<p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="other">其他</span><b class="bold">匹配度 96%</b></p>
<p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p>
<p class="point">他刚刚分享了XXX文章</p>
<p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
</div>
<div class="fr xy">
<ul>
<li><i class="like sui-icon icon-tb-like"></i></li>
<li><i class="close sui-icon icon-tb-roundclose"></i></li>
<li><i class="message sui-icon icon-tb-comment"></i></li>
</ul>
</div>
<div class="clearfix"></div> </li>
</ul>
</div>
</div>
<div class="fl right-tag">
<div class="friend-info-card">
<div class="card">
<div class="photo-name">
<img src="~/assets/img/widget-photo.png" alt="" />
<div class="name-edit">
<p><span class="name">用户名</span> <span class="edit">编辑兴趣资料</span></p>
<p>认证</p>
</div>
<div class="clearfix"></div>
</div>
<div class="like">
<span class="like1">喜欢 <i class="num">400</i></span>
<span>被喜欢 <i class="num">5</i></span>
</div>
</div>
</div>
<div class="block-btn">
<p>约一约有趣的人，会一会好的时光！</p>
<a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会</a>
</div>
<div class="rank">
<div class="head">
<h3 class="title">排行榜</h3>
</div>
<div class="rank-list">
<ul class="rank">
<li> <span class="fl dating">喝咖啡</span> <span class="fr cafe">102258</span> </li>
<li> <span class="fl dating">吃饭</span> <span class="fr eat">9878</span> </li>
<li> <span class="fl dating">看电影</span> <span class="fr movie">2564</span> </li>
<li> <span class="fl dating">旅行</span> <span class="fr travel">897</span> </li>
</ul>
</div>
</div>
<div class="friend-line-card">
<div class="card">
<p>找个合适的参加一场线下活动</p>
</div>
</div>
<div class="friend-line-card">
<div class="card">
<p>找个合适的参加一场线下活动</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-makeFriends-index.css'
export default {
}
</script>
（4）建立pages/spit/index.vue （吐槽首页）
<template>
<div>
<div class="wrapper tag-item">
<div class="fl left-list">
<div class="tc-data-list">
<div class="tc-list">
<ul class="detail-list">
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 11 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次，都说还在等审批什么情况？工资什么的都谈好了，也要了工资证明。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-7-23 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 10 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次，都说还在等审批什么情况？工资什么的都谈好了，也要了工资证明。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-6-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 12 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次，都说还在等审批什么情况？工资什么的都谈好了，也要了工资证明。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-6-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 10 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次，都说还在等审批什么情况？工资什么的都谈好了，也要了工资证明。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-4-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 10 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-1-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 12 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次，都说还在等审批什么情况？工资什么的都谈好了，也要了工资证明。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-6-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 10 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次，都说还在等审批什么情况？工资什么的都谈好了，也要了工资证明。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-4-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
<li class="qa-item">
<div class="fl record">
<div class="number">
<div class="border useful">
<p class="usenum"><a href="#" class="zan"><i class="fa fa-thumbs-up " aria-hidden="true"></i></a></p>
<p class="zannum"> 10 </p>
</div>
<div class="border answer">
<a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="info">
<p class="text"> <a href="~/assets/spit-detail.html" target="_blank"> 面试说通过了要回去等offer，现在都两周了，还说在ceo审批，两天联系hr一次。面试说通过了，要回去等offer，现在都两周了还说在ceo审批，两天联系hr一次，都说还在等审批，什么情况？？工资什么的都谈好了，也要了工资证明。也工资证明。 </a> </p>
<div class="other">
<div class="fl date">
<span>2017-1-22 12:02</span>
</div>
<div class="fr remark">
<a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a>
<a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a>
</div>
</div>
</div>
<div class="clearfix"></div> </li>
</ul>
</div>
</div>
<!-- <script>
$(function () {
$(".zan").click(function () {
$(this).children(".fa").toggleClass("color");
var c = parseInt($(this).parent().siblings(".zannum").html());
c = c++;
});
$(".star").click(function () {
console.log("eeee");
$(this).children(".fa").removeClass("fa-star-o").addClass("fa-star color");
});
$(".detail-list").unbind("scroll").bind("scroll", function (e) {
var sum = this.scrollHeight;
if (sum - 10 <= $(this).scrollTop() + $(this).height()) {
$(".detail-list").append($("li").clone());
}
});
})
</script> -->
</div>
<div class="fl right-tag">
<div class="block-btn">
<p>来个匿名吐槽，发泄一下你心中的怒火吧！</p>
<a class="sui-btn btn-block btn-share" href="~/assets/spit-submit.html" target="_blank">发吐槽</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-spit-index.css'
export default {
}
</script>
（5）建立pages/recruit/index.vue （招聘首页）
<template>
<div>
<div class="wrapper tag-item">
<div class="fl left-list">
<div class="job-position">
<div class="job-type reco-job">
<div class="head">
<h4 class="title pull-left">推荐职位</h4>
<span class="more pull-right"><a href="#">更多职位推荐 <i class="fa fa-angle-right" aria-hidden="true"></i></a></span>
<div class="clearfix"></div>
</div>
<ul class="yui3-g job-list" style="display:block;">
<li class="yui3-u-1-2 job-item"> <p><span class="name"><a href="~/assets/recruit-detail.html" target="_blank">Python开发工程师</a></span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
</ul>
</div>
<div class="job-type latest-job">
<div class="head">
<h4 class="title pull-left">最新职位</h4>
<span class="more pull-right"><a href="#">更多职位推荐 <i class="fa fa-angle-right" aria-hidden="true"></i></a></span>
<div class="clearfix"></div>
</div>
<ul class="yui3-g job-list" style="display:block;">
<li class="yui3-u-1-2 job-item"> <p><span class="name"> <a href="~/assets/recruit-jobDetail.html" target="_blank">Python开发工程师</a></span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
<li class="yui3-u-1-2 job-item"> <p><span class="name">Python开发工程师</span><span class="city"><i class="fa fa-map-marker"></i> 北京</span></p> <p class="need"><span class="money">15K-25K</span>/经验3-5年/本科及以上/全职</p> <p><span class="company">百度 · 6天前</span></p> </li>
</ul>
</div>
</div>
</div>
<div class="fl right-tag">
<div class="hot-company">
<p class="mail">提交收录请发邮件至ccccccc@qq.com</p>
<div class="company">
<div class="head">
<h4>热门企业</h4>
</div>
<ul class="yui3-g company" style="display:block;">
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-baidu.png" alt="" /></p> <p class="title">百度</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-360.png" alt="" /></p> <p class="title">360</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-toutiao.png" alt="" /></p> <p class="title">今日头条</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-baidu.png" alt="" /></p> <p class="title">百度</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-360.png" alt="" /></p> <p class="title">360</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-toutiao.png" alt="" /></p> <p class="title">今日头条</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-baidu.png" alt="" /></p> <p class="title">百度</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-360.png" alt="" /></p> <p class="title">360</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
<li class="yui3-u-1-3 company-item"> <p><img src="~/assets/img/widget-toutiao.png" alt="" /></p> <p class="title">今日头条</p> <p class="position"><a href="~/assets/recruit-company.html" target="_blank">32个职位</a></p> </li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</template>
<script>
import '~/assets/css/page-sj-recruit-index.css'
export default {
}
</script>
四、网站导航
修改layouts/default.vue
<ul class="sui-nav">
<router-link to="/" tag="li" active-class="active" exact><a>头条</a></router-link>
<router-link to="/qa" tag="li" active-class="active"><a>问答</a></router-link>
<router-link to="/gathering" tag="li" active-class="active"><a>活动</a></router-link>
<router-link to="/friends" tag="li" active-class="active"><a>交友</a></router-link>
<router-link to="/spit" tag="li" active-class="active"><a>吐槽</a></router-link>
<router-link to="/recruit" tag="li" active-class="active"><a>招聘</a></router-link>
</ul>
五、效果展示：
问答界面：
活动页面：
交友页面：
吐槽页面：
招聘页面：
