团队作业-第二阶段(2)

发布时间 2023-04-25 22:31:09作者: 旺旺大菠萝

搭建树形分类界面;

利用container样式构造页面。

<el-container>

<el-aside></el-aside>

<el-container>

<el-header></el-header>

<el-main></el-main>

</el-container>

</container>

 

  1 <template>
  2   <div>
  3     <el-container>
  4       <!-- 查询框部分 -->
  5       <el-header>
  6         <el-row>
  7           <el-col :span="12" :offset="6" style="margin-top: 2px">
  8             <el-input type="text" placeholder="请输入标题" v-model="keyword">
  9               <el-button slot="prepend" type="primary" @click="gohighSearch">高级检索</el-button>
 10               <el-button slot="append" type="primary" @click="search">搜索</el-button>
 11             </el-input>
 12           </el-col>
 13         </el-row>
 14       </el-header>
 15       <el-container>
 16         <el-aside width="200px" style="margin-top: 1%">
 17            <el-menu :default-openeds="['1', '2']">
 18             <el-submenu index="1">
 19               <template slot="title"><i class="el-icon-menu"></i>
 20                 <span>分类</span>
 21               </template>
 22               <el-menu-item-group>
 23                 <router-link class="alink" to="/personalCenter/information">
 24                    <el-menu-item index="1-1">全部</el-menu-item>
 25                 </router-link>
 26                 <div @click="gohighSearch">
 27                    <el-menu-item index="1-2">分类2</el-menu-item>
 28                 </div>
 29                 <div @click="gohighSearch">
 30                    <el-menu-item index="1-3">分类3</el-menu-item>
 31                 </div>
 32                 <div @click="gohighSearch">
 33                    <el-menu-item index="1-4">分类4</el-menu-item>
 34                 </div>
 35                 <div @click="gohighSearch">
 36                    <el-menu-item index="1-5">分类5</el-menu-item>
 37                 </div>
 38                 <div @click="gohighSearch">
 39                    <el-menu-item index="1-6">分类6</el-menu-item>
 40                 </div>
 41               </el-menu-item-group>
 42             </el-submenu>
 43           </el-menu>
 44         </el-aside>
 45         <br />
 46         <el-main>
 47           <div class="showlist">
 48             <!-- <el-row class="art-item" v-model="bookList"  v-for="userblog in searchList.content"> -->
 49             <el-row
 50               class="art-item"
 51               v-model="bookList"
 52               :key="userblog.id"
 53               v-for="userblog in bookList"
 54             >
 55               <el-card shadow="hover" style="height: 180px; border: 1px solid #18a0ec;">
 56                 <el-row class="art-info d-flex align-items-center justify-content-start">
 57                   <div class="d-flex align-items-center">
 58                     <div class="art-title">
 59                       <span @click="addHistory(userblog.title, userblog.author);
 60                         viewPDF('view?url=' + userblog.url + '&name=' + userblog.title + '&type=inline');">
 61                         {{ userblog.title }}</span>
 62                     </div>
 63                   </div>
 64                 </el-row>
 65                 <el-row class="art-body">
 66                   <div class="side-abstract">
 67                     <div class="art-abstract">
 68                       {{ userblog.Abstract }}
 69                     </div>
 70                   </div>
 71                 </el-row>
 72                 <el-row class="art-floor">
 73                   <div class="art-more">
 74                     <el-button
 75                       style="border-radius: 200px"
 76                       @click="downloadPDF('view?url=' +userblog.url +'&name=' +userblog.title +'&type=attachment')">
 77                       <span>下载文章</span>
 78                     </el-button>
 79                   </div>
 80                   <div class="art-time">
 81                     <i class="el-icon-apple">作者:</i>{{ userblog.author }}
 82                     <i class="el-icon-time"></i>: {{ userblog.date }}
 83                   </div>
 84                 </el-row>
 85               </el-card>
 86             </el-row>
 87 
 88             <!-- 分页插件部分 -->
 89             <el-row>
 90               <el-col :span="16" :offset="4">
 91                 <el-pagination
 92                   background
 93                   @size-change="handleSizeChange"
 94                   @current-change="handleCurrentChange"
 95                   :current-page="currentPage"
 96                   :page-sizes="[1, 2, 50, 100]"
 97                   :page-size="pageSize"
 98                   layout="total,sizes, prev, pager, next, jumper"
 99                   :total="total"
100                 >
101                 </el-pagination>
102               </el-col>
103             </el-row>
104           </div>
105         </el-main>
106       </el-container>
107     </el-container>
108   </div>
109 </template>