十次方项目前端，前台首页导航搭建（十一）

其他 2019-09-07 01:06:51 阅读次数: 0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/Eknaij/article/details/96999226

一、网站布局

（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="#">更多职位推荐&nbsp;&nbsp;<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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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="#">更多职位推荐&nbsp;&nbsp;<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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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">百度 &middot; 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>

五、效果展示：

问答界面：
在这里插入图片描述
活动页面：
在这里插入图片描述
交友页面：
在这里插入图片描述
吐槽页面：
在这里插入图片描述
招聘页面：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Eknaij/article/details/96999226
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022