项目实训（四）检索页面的设计

目录

一、页面布局

1、页头面包屑

2、检索

效果展示：

3、结果表格展示

 4、数据初始化

---

一、页面布局

1、页头面包屑

页面为导航栏中“检索”的下级菜单“关键词查询”，检索包括关键词查询和段落查询。

所以设计一个区域，显示当前页面的路径，方便用户快速返回之前的任意页面。

代码如下：

 <!-- Start Page Title Banner -->
    <section class="inner-page-banner" data-background="static/img/面包屑.png">
      <div class="container">
        <h1 class="page-title">检索</h1>
        <div class="pagination ul-li">
          <ul>
            <li><a href="/indexOne">首页</a></li>
            <li><a href="/easysearch">关键词查询</a></li>
          </ul>
        </div>
        <!--个性推荐-->
        <div class="footer">
          <div class="container">
            <div class="row justify-content-between">
              <div class="col-lg-2" style="float: left">
                <div class="footer-widget pl-15" >
                  <ul style="color: #FBD15B;font-size: 18px"> 热门推荐
                    <li v-for="item in hot" @click="byHot(item)">{
  {item}}</li>
                  <