将 WenshuSearch.vue 和 Search.vue 整合到 SearchIndex.vue, 并放到 views/search 模块

src/components/layout/NavBar.vue

@@ -245,8 +245,9 @@ export default {
         this.$router.push({
           path: '/search',
           query: {
+            searchType: 1,
             keyword: this.keyword,
-            pageNumber: 1
+            pn: 1
           }
         })
         this.$router.go(0)
@@ -254,8 +255,9 @@ export default {
         const routeUrl = this.$router.resolve({
           path: '/search',
           query: {
+            searchType: 1,
             keyword: this.keyword,
-            pageNumber: 1
+            pn: 1
           }
         })
         window.open(routeUrl.href, '_blank')

src/components/layout/NavBarNoSearch.vue

@@ -0,0 +1,231 @@
+<template>
+  <el-row class="el-menu-demo">
+    <el-col :md="2">
+      <ul role="menubar" class="el-menu--horizontal el-menu">
+        <li role="menuitem" class="el-menu-item">
+          <a href="/" style="color: #007bff;text-decoration-line: none">
+            <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+            tnb
+          </a>
+        </li>
+      </ul>
+    </el-col>
+    <el-col :md="8">
+      <el-menu
+        mode="horizontal"
+      >
+        <el-menu-item index="1">
+          <a href="/video" style="text-decoration-line: none">
+            <span style="color: #007bff">分区</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <a href="/shortvideo" style="text-decoration-line: none">
+            <span style="color: #007bff">短视频</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <a href="/playlist" style="text-decoration-line: none">
+            <span style="color: #007bff">播放列表</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="9">
+          <a href="/discover" style="text-decoration-line: none">
+            <span style="color: #007bff">发现</span>
+          </a>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="6">
+      <ul class="el-menu--horizontal el-menu">
+        <li class="el-menu-item">
+        </li>
+      </ul>
+    </el-col>
+    <el-col :md="8">
+      <ul class="el-menu--horizontal el-menu">
+        <li class="el-menu-item">
+          <el-dropdown v-if="user">
+            <img
+              :src="user.avatarUrl"
+              class="el-avatar--circle el-avatar--medium"
+              alt=""
+            >
+            <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
+              <el-dropdown-item
+                icon="el-icon-s-home"
+                class="size"
+                @click.native="goToUserHome"
+              >我的主页</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-collection"
+                class="size"
+                @click.native="goToPlaylist"
+              >播放列表</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-s-data"
+                class="size"
+                @click.native="goToHistory"
+              >历史记录
+              </el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-menu"
+                class="size"
+                @click.native="goToBackground"
+              >进入后台</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-error"
+                class="size"
+                @click.native="goToLogout"
+              >登出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <span
+            v-else
+            style="color: #007bff"
+            @click="login"
+          >登录</span>
+        </li>
+        <li class="el-menu-item" @click="goToTimeline">
+          <el-badge class="item" :value="statusCount" :max="99">
+            <span class="el-icon-view" style="color: #007bff">状态</span>
+          </el-badge>
+        </li>
+        <li class="el-menu-item" @click="goToMessage">
+          <el-badge class="item" :value="msgCount" :max="99">
+            <span class="el-icon-bell" style="color: #007bff">消息</span>
+          </el-badge>
+        </li>
+        <li class="el-menu-item">
+          <el-button size="mini" type="upload" icon="el-icon-upload" @click="goToPublish">投稿</el-button>
+        </li>
+      </ul>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import { keywordSuggest } from '@/api/search'
+import { getAuthedUser } from '@/utils/auth'
+import { getUnreadCount } from '@/api/user'
+
+export default {
+  name: 'NavBar',
+  mixins: [userMixin],
+  data() {
+    return {
+      user: null,
+      activeIndex: '1',
+      restaurants: [],
+      searchHint: '想要搜点神马呢',
+      searchType: '1',
+      keyword: '',
+      statusCount: 0,
+      msgCount: 0
+    }
+  },
+  created() {
+    /* const userdata = Vue.$cookies.get('USERDATA')
+    const userId = userdata.split(':')[0]*/
+    const userInfo = getAuthedUser()
+    if (userInfo !== null) {
+      this.user = userInfo
+      getUnreadCount().then(resp => {
+        if (resp.code === 0) {
+          this.msgCount = resp.data.total
+        }
+      })
+    }
+  },
+  methods: {
+    login() {
+      const path = '/login'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    register() {
+      console.log('帐号注册')
+    },
+    // ****************************************************************************************************************
+    goToUserHome() {
+      const path = '/user/' + this.user.userId
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToPlaylist() {
+      const path = '/background/my/album'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToHistory() {
+      const path = '/background/my/history'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToBackground() {
+      const path = '/background'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToTimeline() {
+      const path = '/timeline'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToMessage() {
+      const path = '/background/my/message'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    goToPublish() {
+      const path = '/background/post/video'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    }
+  }
+}
+</script>
+
+<style scoped>
+@media screen and (max-width: 768px) {
+}
+
+.logo {
+  width: 30px;
+  position: relative;
+}
+
+.size {
+  font-size: 16px;
+}
+
+.item {
+  margin-top: 10px;
+  margin-right: 10px;
+}
+</style>

src/router/index.js

@@ -8,7 +8,7 @@ import VodRouter from './vod'
 import MapRouter from './map'
 import ChartRouter from './chart'
 import GeoRouter from './geo'
-import WenshuRouter from './wenshu'
+import SearchRouter from './search'
 import DiskRouter from './disk'
 import AdminRouter from './admin'
 
@@ -33,7 +33,6 @@ const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
 const ArticlePage = () => import('views/home/ArticlePage')
 const Chat = () => import('views/home/Chat')
-const Search = () => import('views/home/Search')
 const PlaylistIndex = () => import('views/home/PlaylistIndex')
 const PlaylistView = () => import('views/home/PlaylistView')
 const Discover = () => import('views/home/Discover')
@@ -50,7 +49,7 @@ const routes = [
   VodRouter,
   ChartRouter,
   GeoRouter,
-  WenshuRouter,
+  SearchRouter,
   DiskRouter,
   AdminRouter,
   {
@@ -107,12 +106,6 @@ const routes = [
         component: Chat,
         meta: { needAuth: false }
       },
-      {
-        path: '/search',
-        name: 'search',
-        component: Search,
-        meta: { needAuth: false }
-      },
       {
         path: '/shortvideo',
         name: 'ShortVideoIndex',

src/router/search.js

@@ -0,0 +1,11 @@
+const SearchIndex = () => import('views/search/SearchIndex')
+const SearchResult = () => import('views/search/SearchResult')
+
+export default {
+  path: '/search',
+  name: 'SearchIndex',
+  component: SearchIndex,
+  meta: { needAuth: false },
+  children: [
+  ]
+}

src/router/wenshu.js

@@ -1,8 +0,0 @@
-const WenshuSearch = () => import('views/wenshu/WenshuSearch')
-
-export default {
-  path: '/wenshu',
-  name: 'WenshuIndex',
-  component: WenshuSearch,
-  meta: { needAuth: false }
-}

src/views/home/Discover.vue

@@ -66,18 +66,6 @@ export default {
           link: '/mall',
           coverUrl: ''
         },
-        {
-          title: 'vote',
-          desc: '投票',
-          link: '/vote',
-          coverUrl: ''
-        },
-        {
-          title: 'wenshu',
-          desc: '裁判文书',
-          link: '/wenshu',
-          coverUrl: ''
-        },
         {
           title: 'chart',
           desc: '图表',

src/views/search/SearchIndex.vue

@@ -0,0 +1,428 @@
+<template>
+  <el-container>
+    <el-main>
+      <nav-bar-no-search />
+      <el-row class="center">
+        <el-input
+          v-model="keyword"
+          placeholder="想要搜点神马呢"
+          class="input-with-select"
+          clearable
+          @focus="focus"
+          @blur="blur"
+          @keyup.enter.native="searchHandler"
+        >
+          <el-select
+            v-model="searchType"
+            slot="prepend"
+            placeholder="请选择"
+          >
+            <el-option label="全部" value="1"></el-option>
+            <el-option label="视频" value="2"></el-option>
+            <el-option label="文书" value="3"></el-option>
+          </el-select>
+          <el-button slot="append" icon="el-icon-search" @click="searchHandler"></el-button>
+        </el-input>
+        <!---设置z-index优先级,防止被走马灯效果遮挡-->
+        <el-card
+          v-if="isSearch"
+          id="search-box"
+          class="box-card"
+          style="position:relative;z-index:15"
+          @mouseenter="enterSearchBoxHanlder"
+        >
+          <dl v-if="isHistorySearch">
+            <dt v-show="history" class="search-title">历史搜索</dt>
+            <dt v-show="history" class="remove-history" @click="removeAllHistory">
+              <i class="el-icon-delete" />清空历史记录
+            </dt>
+            <el-tag
+              v-for="search in historySearchList"
+              :key="search.id"
+              closable
+              :type="search.type"
+              style="margin-right:5px; margin-bottom:5px;"
+              @close="closeHandler(search)"
+            >{{ search.name }}</el-tag>
+            <dt class="search-title">热门搜索</dt>
+            <dd v-for="search in hotSearchList" :key="search.id">{{ search }}</dd>
+          </dl>
+          <dl v-if="isSearchList">
+            <dd v-for="search in searchList" :key="search.id">{{ search }}</dd>
+          </dl>
+        </el-card>
+      </el-row>
+      <el-row>
+        <el-col :md="6" class="movie-list">
+          <hot-search :card-prop="cardProp" />
+        </el-col>
+        <el-col v-loading="loading" :md="18">
+          <el-row v-if="videoSearch" class="movie-list">
+            <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+              <search-video-card :video="video" />
+            </el-col>
+          </el-row>
+          <el-row v-if="wenshuSearch" class="movie-list">
+            <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+              <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span>{{ item.title }}</span>
+                    <el-button style="float: right; padding: 5px;" type="text" @click="getWenshuDetail(item.contentId)">查看详情</el-button>
+                  </div>
+                  <div class="text item">
+                    <el-row>
+                      <el-col :md="4">
+                        <el-image
+                          lazy
+                          fit="cover"
+                          :src="item.coverUrl"
+                          class="coverImg"
+                        />
+                      </el-col>
+                      <el-col :md="20">
+                        <el-row>
+                          <div style="padding: 14px">
+                            <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title }}</span>
+                          </div>
+                        </el-row>
+                        <el-row>
+                          <div style="padding: 14px">
+                            <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.excerpt }}</span>
+                          </div>
+                        </el-row>
+                      </el-col>
+                    </el-row>
+                    <el-row>
+                      <div style="padding: 14px">
+                        <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.publishAt }}</span>
+                      </div>
+                    </el-row>
+                  </div>
+                </el-card>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="18" class="pagination">
+              <el-pagination
+                :small="screenWidth <= 768"
+                hide-on-single-page
+                layout="prev, pager, next"
+                :page-size="pageSize"
+                :current-page="currentPage"
+                :total="totalSize"
+                @current-change="handleCurrentChange"
+              />
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row v-if="showEmpty" class="not-result">
+        <el-col :span="12" :offset="6">
+          <img src="@/assets/img/icon/not-result.png">
+          <div>没有结果</div>
+        </el-col>
+      </el-row>
+    </el-main>
+
+    <el-dialog title="裁判文书详情" :visible.sync="wenshuDetailDialog" width="70%" center>
+      <el-card v-if="wenshuDetail !== null" :model="wenshuDetail">
+        <el-descriptions class="margin-top" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user" />
+              案由
+            </template>
+            <span> {{ wenshuDetail.subject }} </span>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-mobile-phone" />
+              案号
+            </template>
+            <span> {{ wenshuDetail.typeStr }} </span>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-location-outline" />
+              发布日期
+            </template>
+            <span> {{ wenshuDetail.level }} </span>
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions class="margin-top" :column="1" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user" />
+              文书内容
+            </template>
+            <span v-html="wenshuDetail.content" />
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="wenshuDetailDialog = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import NavBarNoSearch from 'components/layout/NavBarNoSearch'
+import SearchVideoCard from '@/components/card/SearchVideoCard'
+import HotSearch from '@/components/card/HotSearch'
+import RandomUtil from '@/utils/random-util'
+import Store from '@/utils/store'
+import { videoQuery, hotKeyword, getWenshuDetail, wenshuQuery } from '@/api/search'
+
+export default {
+  name: 'SearchIndex',
+  components: {
+    NavBarNoSearch,
+    SearchVideoCard,
+    HotSearch
+  },
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      showEmpty: false,
+      cardProp: {
+        title: '热搜排行',
+        type: 'hotSearch',
+        dataList: []
+      },
+      loading: false,
+      search: '', // 当前输入框的值
+      keyword: '', // 当前输入框的值
+      searchType: '1',
+      isFocus: false, // 是否聚焦
+      hotSearchList: ['暂无热门搜索'], // 热门搜索数据
+      historySearchList: [], // 历史搜索数据
+      searchList: ['暂无数据'], // 搜索返回数据,
+      history: false,
+      types: ['', 'success', 'info', 'warning', 'danger'], // 搜索历史tag式样
+      wenshuDetailDialog: false,
+      wenshuDetail: null,
+      videoSearch: false,
+      wenshuSearch: false
+    }
+  },
+  computed: {
+    isHistorySearch() {
+      return this.isFocus && !this.search
+    },
+    isSearchList() {
+      return this.isFocus && this.search
+    },
+    isSearch() {
+      return this.isFocus
+    }
+  },
+  mounted() {
+    hotKeyword().then(resp => {
+      if (resp.code === 0) {
+        this.cardProp.title = '热搜排行'
+        this.cardProp.type = 'hotSearch'
+        this.cardProp.dataList = resp.data
+      }
+    })
+  },
+  created() {
+    this.keyword = this.$route.query.keyword
+    this.searchType = this.$route.query.searchType
+    this.currentPage = parseInt(this.$route.query.pn)
+    this.videoQueryWrapper(this.keyword, this.currentPage)
+    document.title = '搜索 - ' + this.keyword
+  },
+  methods: {
+    handleCurrentChange(currentPage) {
+      this.$router.push({
+        path: '/search',
+        query: {
+          searchType: this.searchType,
+          keyword: this.keyword,
+          pn: currentPage
+        }
+      })
+      this.$router.go(0)
+    },
+    focus() {
+      // this.$message.info('input focus')
+      this.isFocus = true
+      this.historySearchList = Store.loadHistory() == null ? [] : Store.loadHistory()
+      this.history = this.historySearchList.length !== 0
+    },
+    blur() {
+      // this.$message.info('input blur')
+      var self = this
+      this.searchBoxTimeout = setTimeout(function() {
+        self.isFocus = false
+      }, 300)
+    },
+    enterSearchBoxHanlder() {
+      clearTimeout(this.searchBoxTimeout)
+    },
+    searchHandler() {
+      if (this.searchType === '3') {
+        this.videoSearch = false
+        this.wenshuSearch = true
+        wenshuQuery(this.keyword).then(resp => {
+          if (resp.code === 0) {
+            console.log(resp.data)
+          }
+        })
+
+        this.dataList.push(
+          {
+            contentId: 111,
+            title: 'aaa',
+            coverUrl: 'bbb',
+            excerpt: 'ccc'
+          },
+          {
+            contentId: 222,
+            title: '222',
+            coverUrl: 'bbb',
+            excerpt: 'ccc'
+          },
+          {
+            contentId: 333,
+            title: '333',
+            coverUrl: 'bbb',
+            excerpt: 'ccc'
+          },
+          {
+            contentId: 444,
+            title: '444',
+            coverUrl: 'bbb',
+            excerpt: 'ccc'
+          }
+        )
+        this.totalSize = this.dataList.length
+
+        // 随机生成搜索历史tag式样
+        const n = RandomUtil.getRandomNumber(0, 5)
+        const exist =
+          this.historySearchList.filter(value => {
+            return value.name === this.search
+          }).length !== 0
+        if (!exist) {
+          this.historySearchList.push({ name: this.search, type: this.types[n] })
+          Store.saveHistory(this.historySearchList)
+        }
+        this.history = this.historySearchList.length !== 0
+      } else {
+        this.videoSearch = true
+        this.wenshuSearch = false
+        this.videoQueryWrapper(this.search, this.currentPage)
+      }
+    },
+    closeHandler(search) {
+      this.historySearchList.splice(this.historySearchList.indexOf(search), 1)
+      Store.saveHistory(this.historySearchList)
+      clearTimeout(this.searchBoxTimeout)
+      if (this.historySearchList.length === 0) {
+        this.history = false
+      }
+    },
+    removeAllHistory() {
+      Store.removeAllHistory()
+    },
+    getWenshuDetail(val) {
+      getWenshuDetail(val).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
+          this.$message.info('get wenshu -> ' + val)
+          this.wenshuDetail = {}
+        }
+      }).finally(() => {
+        this.wenshuDetailDialog = true
+      })
+    },
+    videoQueryWrapper(keyword, pageNumber) {
+      this.loading = true
+      videoQuery(keyword, pageNumber).then(resp => {
+        if (resp.code === 0) {
+          this.total = resp.data.totalSize
+          this.length = resp.data.totalPages
+          this.dataList = resp.data.list
+
+          if (this.total === 0) {
+            this.showEmpty = true
+          }
+        } else {
+          this.$notify.error({
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify.error({
+          message: error.m,
+          type: 'error',
+          duration: 3000
+        })
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.left {
+  margin-left: 200px;
+}
+.center {
+  margin-top: 15px;
+  margin-left: 50%;
+}
+#search {
+  background-color: #c60d37;
+  border-radius: 0%;
+}
+.search-title {
+  color: #bdbaba;
+  font-size: 15px;
+  margin-bottom: 5px;
+}
+.remove-history {
+  color: #bdbaba;
+  font-size: 15px;
+  float: right;
+  margin-top: -22px;
+}
+#search-box {
+  width: 555px;
+  height: 300px;
+  margin-top: 0px;
+  padding-bottom: 20px;
+}
+
+.movie-list {
+  padding-top: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.coverImg {
+  width: 100%;
+  height: 120px;
+  display: block;
+}
+
+.el-select .el-input {
+  width: 130px;
+}
+.input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+</style>

src/views/wenshu/WenshuSearch.vue

@@ -1,316 +0,0 @@
-<template>
-  <div>
-    <el-row>
-      <el-col :span="3" class="left">
-        <img src="@/assets/img/wenshu_logo.jpeg" alt="wenshu">
-      </el-col>
-      <el-col :span="8" class="center">
-        <el-input
-          v-model="search"
-          placeholder="搜索裁判文书"
-          @focus="focus"
-          @blur="blur"
-          @keyup.enter.native="searchHandler"
-        >
-          <el-button id="search" slot="append" icon="el-icon-search" @click="searchHandler" />
-        </el-input>
-        <!---设置z-index优先级,防止被走马灯效果遮挡-->
-        <el-card
-          v-if="isSearch"
-          id="search-box"
-          class="box-card"
-          style="position:relative;z-index:15"
-          @mouseenter="enterSearchBoxHanlder"
-        >
-          <dl v-if="isHistorySearch">
-            <dt v-show="history" class="search-title">历史搜索</dt>
-            <dt v-show="history" class="remove-history" @click="removeAllHistory">
-              <i class="el-icon-delete" />清空历史记录
-            </dt>
-            <el-tag
-              v-for="search in historySearchList"
-              :key="search.id"
-              closable
-              :type="search.type"
-              style="margin-right:5px; margin-bottom:5px;"
-              @close="closeHandler(search)"
-            >{{ search.name }}</el-tag>
-            <dt class="search-title">热门搜索</dt>
-            <dd v-for="search in hotSearchList" :key="search.id">{{ search }}</dd>
-          </dl>
-          <dl v-if="isSearchList">
-            <dd v-for="search in searchList" :key="search.id">{{ search }}</dd>
-          </dl>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row class="movie-list">
-      <el-col v-for="(item, index) in dataList" :key="index" :md="18" :sm="18" :xs="18">
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span>{{ item.title }}</span>
-              <el-button style="float: right; padding: 5px;" type="text" @click="onGetDetail(item.contentId)">查看详情</el-button>
-            </div>
-            <div class="text item">
-              <el-row>
-                <el-col :md="4">
-                  <el-image
-                    lazy
-                    fit="cover"
-                    :src="item.coverUrl"
-                    class="coverImg"
-                  />
-                </el-col>
-                <el-col :md="20">
-                  <!--                  <el-button style="float: left; padding: 3px 0" type="text" @click="onGetDetail">
-                    {{ item.title }}
-                  </el-button>-->
-                  <el-row>
-                    <div style="padding: 14px">
-                      <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title }}</span>
-                    </div>
-                  </el-row>
-                  <el-row>
-                    <div style="padding: 14px">
-                      <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.excerpt }}</span>
-                    </div>
-                  </el-row>
-                </el-col>
-              </el-row>
-              <el-row>
-                <div style="padding: 14px">
-                  <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.publishAt }}</span>
-                </div>
-              </el-row>
-            </div>
-          </el-card>
-        </el-row>
-      </el-col>
-      <el-col :span="18" class="pagination">
-        <el-pagination
-          :small="screenWidth <= 768"
-          hide-on-single-page
-          layout="prev, pager, next"
-          :page-size="pageSize"
-          :current-page="currentPage"
-          :total="totalSize"
-          @current-change="handleCurrentChange"
-        />
-      </el-col>
-    </el-row>
-
-    <el-dialog title="裁判文书详情" :visible.sync="wenshuDetailDialog" width="70%" center>
-      <el-card v-if="wenshuDetail !== null" :model="wenshuDetail">
-        <el-descriptions class="margin-top" :column="3" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-user" />
-              案由
-            </template>
-            <span> {{ wenshuDetail.subject }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-mobile-phone" />
-              案号
-            </template>
-            <span> {{ wenshuDetail.typeStr }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-location-outline" />
-              发布日期
-            </template>
-            <span> {{ wenshuDetail.level }} </span>
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions class="margin-top" :column="1" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-user" />
-              文书内容
-            </template>
-            <span v-html="wenshuDetail.content" />
-          </el-descriptions-item>
-        </el-descriptions>
-      </el-card>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="wenshuDetailDialog = false">关闭</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import RandomUtil from '@/utils/random-util'
-import Store from '@/utils/store'
-import { getWenshuDetail, wenshuQuery } from '@/api/search'
-
-export default {
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 10,
-      totalSize: 0,
-      dataList: [],
-      search: '', // 当前输入框的值
-      isFocus: false, // 是否聚焦
-      hotSearchList: ['暂无热门搜索'], // 热门搜索数据
-      historySearchList: [], // 历史搜索数据
-      searchList: ['暂无数据'], // 搜索返回数据,
-      history: false,
-      types: ['', 'success', 'info', 'warning', 'danger'], // 搜索历史tag式样
-      wenshuDetailDialog: false,
-      wenshuDetail: null
-    }
-  },
-  computed: {
-    isHistorySearch() {
-      return this.isFocus && !this.search
-    },
-    isSearchList() {
-      return this.isFocus && this.search
-    },
-    isSearch() {
-      return this.isFocus
-    }
-  },
-  methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    focus() {
-      this.isFocus = true
-      this.historySearchList = Store.loadHistory() == null ? [] : Store.loadHistory()
-      this.history = this.historySearchList.length !== 0
-    },
-    blur() {
-      var self = this
-      this.searchBoxTimeout = setTimeout(function() {
-        self.isFocus = false
-      }, 300)
-    },
-    enterSearchBoxHanlder() {
-      clearTimeout(this.searchBoxTimeout)
-    },
-    searchHandler() {
-      this.$message.info('search -> ' + this.search)
-      wenshuQuery(this.search).then(resp => {
-        if (resp.code === 0) {
-          console.log(resp.data)
-        }
-      })
-
-      this.dataList.push(
-        {
-          contentId: 111,
-          title: 'aaa',
-          coverUrl: 'bbb',
-          excerpt: 'ccc'
-        },
-        {
-          contentId: 222,
-          title: '222',
-          coverUrl: 'bbb',
-          excerpt: 'ccc'
-        },
-        {
-          contentId: 333,
-          title: '333',
-          coverUrl: 'bbb',
-          excerpt: 'ccc'
-        },
-        {
-          contentId: 444,
-          title: '444',
-          coverUrl: 'bbb',
-          excerpt: 'ccc'
-        }
-      )
-      this.totalSize = this.dataList.length
-
-      // 随机生成搜索历史tag式样
-      const n = RandomUtil.getRandomNumber(0, 5)
-      const exist =
-        this.historySearchList.filter(value => {
-          return value.name === this.search
-        }).length !== 0
-      if (!exist) {
-        this.historySearchList.push({ name: this.search, type: this.types[n] })
-        Store.saveHistory(this.historySearchList)
-      }
-      this.history = this.historySearchList.length !== 0
-    },
-    closeHandler(search) {
-      this.historySearchList.splice(this.historySearchList.indexOf(search), 1)
-      Store.saveHistory(this.historySearchList)
-      clearTimeout(this.searchBoxTimeout)
-      if (this.historySearchList.length === 0) {
-        this.history = false
-      }
-    },
-    removeAllHistory() {
-      Store.removeAllHistory()
-    },
-    onGetDetail(val) {
-      getWenshuDetail(val).then(resp => {
-        if (resp.code === 0) {
-          console.log(resp.data)
-          this.$message.info('get wenshu -> ' + val)
-          this.wenshuDetail = {}
-        }
-      }).finally(() => {
-        this.wenshuDetailDialog = true
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.left {
-  margin-left: 200px;
-}
-.center {
-  margin-top: 15px;
-  margin-left: 200px;
-}
-#search {
-  background-color: #c60d37;
-  border-radius: 0%;
-}
-.search-title {
-  color: #bdbaba;
-  font-size: 15px;
-  margin-bottom: 5px;
-}
-.remove-history {
-  color: #bdbaba;
-  font-size: 15px;
-  float: right;
-  margin-top: -22px;
-}
-#search-box {
-  width: 555px;
-  height: 300px;
-  margin-top: 0px;
-  padding-bottom: 20px;
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-
-.coverImg {
-  width: 100%;
-  height: 120px;
-  display: block;
-}
-</style>