使用 gemini 优化 SearchIndex.vue 的 UI

src/router/index.js

@@ -3,7 +3,6 @@ import Vue from 'vue'
 
 import DiskRouter from './disk'
 import UserRouter from './user'
-import SearchRouter from './search'
 import BlogRouter from './blog'
 import BackgroundDevopsRouter from './background_devops'
 import BackgroundAccountRouter from './background_account'
@@ -30,6 +29,7 @@ const AudioPage = () => import('views/home/AudioPage')
 const ImagePage = () => import('views/home/ImagePage')
 const PlaylistIndex = () => import('views/home/PlaylistIndex')
 const PlaylistView = () => import('views/home/PlaylistView')
+const SearchIndex = () => import('views/home/SearchIndex')
 
 const Index = () => import('views/Index')
 const Login = () => import('views/Login')
@@ -44,7 +44,6 @@ Vue.use(VueRouter)
 export const constantRoutes = [
   DiskRouter,
   UserRouter,
-  SearchRouter,
   BlogRouter,
   {
     path: '/',
@@ -70,6 +69,14 @@ export const constantRoutes = [
         component: RegionIndex,
         meta: { needAuth: false }
       },
+      {
+        path: '/search',
+        name: 'SearchIndex',
+        component: SearchIndex,
+        meta: { needAuth: false },
+        children: [
+        ]
+      },
       {
         path: '/video/:id',
         name: 'VideoPage',

src/router/search.js

@@ -1,11 +0,0 @@
-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/views/home/SearchIndex.vue

@@ -0,0 +1,261 @@
+<template>
+  <el-container class="search-page">
+    <el-main>
+      <div class="search-header-container">
+        <div class="input-wrapper">
+          <el-input
+            v-model="keyword"
+            :placeholder="searchHint"
+            class="custom-search-input"
+            clearable
+            @focus="focus"
+            @input="inputEvent"
+            @keyup.enter.native="handleOnSearch"
+            @blur="onBlur"
+          >
+            <el-button slot="append" icon="el-icon-search" class="search-btn" @click="handleOnSearch" />
+          </el-input>
+
+          <transition name="el-zoom-in-top">
+            <el-card v-if="isFocus" class="search-suggest-card shadow-hover">
+
+              <div v-if="hotSearchList.length > 0" class="suggest-section">
+                <div class="search-title">
+                  <i class="el-icon-hot-water"></i> 热门搜索
+                </div>
+                <div class="hot-tags-container">
+                  <div
+                    v-for="(hotSearch, index) in hotSearchList"
+                    :key="'hot-'+index"
+                    class="suggest-tag"
+                    @mousedown="onClickHot(hotSearch.keyword)"
+                  >
+                    {{ hotSearch.keyword }}
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="keyword !== '' && searchList.length > 0" class="suggest-section suggest-list-box">
+                <div class="search-title">
+                  <i class="el-icon-magic-stick"></i> 搜索建议
+                </div>
+                <div class="suggest-list">
+                  <div
+                    v-for="(searchSuggest, index) in searchList"
+                    :key="'sug-'+index"
+                    class="suggest-list-item"
+                    @mousedown="onClickHot(searchSuggest.value)"
+                  >
+                    <i class="el-icon-search"></i> {{ searchSuggest.value }}
+                  </div>
+                </div>
+              </div>
+            </el-card>
+          </transition>
+        </div>
+      </div>
+
+      <div v-if="isFocus" class="search-mask" @click="blur"></div>
+
+      <div class="result-container">
+        <el-row v-loading="loading" :gutter="isMobile ? 8 : 14" class="movie-list">
+          <el-col
+            v-for="(video, index) in dataList"
+            :key="'res-'+index"
+            :lg="4" :md="6" :sm="8" :xs="12"
+            class="video-col"
+          >
+            <search-video-card :video="video" />
+          </el-col>
+        </el-row>
+
+        <div v-if="showEmpty && !loading" class="empty-result">
+          <img src="@/assets/img/not-result.png" alt="无结果">
+          <p>没有找到关于 "{{ keyword }}" 的内容</p>
+        </div>
+
+        <el-row v-if="dataList.length > 0" class="pagination-row">
+          <el-pagination
+            :small="isMobile"
+            background
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handleCurrentChange"
+          />
+        </el-row>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import SearchVideoCard from '@/components/card/SearchVideoCard'
+import { videoQuery, keywordSuggest, hotKeyword } from '@/api/search'
+
+export default {
+  name: 'SearchIndex',
+  components: { SearchVideoCard },
+  data() {
+    return {
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      hotSearchList: [],
+      searchList: [],
+      searchHint: '搜索你感兴趣的内容',
+      showEmpty: false,
+      loading: false,
+      keyword: '',
+      isFocus: false, // 核心状态控制
+      timer: null
+    }
+  },
+  computed: {
+    isMobile() { return this.screenWidth <= 768 }
+  },
+  watch: {
+    '$route.query': {
+      immediate: true,
+      handler(newQuery) {
+        this.keyword = newQuery.keyword || '';
+        this.currentPage = parseInt(newQuery.pn) || 1;
+        if (this.keyword) {
+          this.searchHandler();
+          document.title = '搜索 - ' + this.keyword;
+        }
+      }
+    }
+  },
+  mounted() {
+    this.fetchHotKeywords();
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleResize() { this.screenWidth = document.body.clientWidth },
+    fetchHotKeywords() {
+      hotKeyword().then(resp => {
+        if (resp.code === 0) this.hotSearchList = resp.data;
+      });
+    },
+    handleCurrentChange(p) {
+      if (this.currentPage === p) return;
+      this.$router.push({
+        path: '/search',
+        query: { keyword: this.keyword, pn: p }
+      }).catch(err => {
+        if (err.name !== 'NavigationDuplicated') throw err;
+      });
+    },
+    handleOnSearch() {
+      if (!this.keyword || !this.keyword.trim()) return;
+      this.isFocus = false;
+      this.$router.push({
+        path: '/search',
+        query: { keyword: this.keyword.trim(), pn: 1 }
+      });
+    },
+    searchHandler() {
+      this.loading = true;
+      videoQuery(this.keyword, this.currentPage).then(resp => {
+        if (resp.code === 0) {
+          this.totalSize = resp.data.totalSize;
+          this.dataList = resp.data.list;
+          this.showEmpty = this.totalSize === 0;
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+      }).finally(() => { this.loading = false; });
+    },
+    focus() {
+      this.isFocus = true;
+    },
+    // 修复点 2: 延迟关闭，确保 mousedown 事件能先执行
+    onBlur() {
+      setTimeout(() => {
+        this.isFocus = false;
+      }, 200);
+    },
+    blur() {
+      this.isFocus = false;
+    },
+    inputEvent() {
+      if (!this.keyword) {
+        this.searchList = [];
+        return;
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        keywordSuggest(this.keyword).then(resp => {
+          if (resp.code === 0) {
+            this.searchList = resp.data.map(item => ({ value: item.keyword }));
+          }
+        });
+      }, 300);
+    },
+    onClickHot(val) {
+      this.keyword = val;
+      this.handleOnSearch();
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.search-page { background-color: #f6f8fa; min-height: 100vh; }
+.search-header-container { max-width: 700px; margin: 15px auto 30px; padding: 0 10px; }
+.input-wrapper { position: relative; z-index: 2001; }
+
+.custom-search-input ::v-deep .el-input__inner {
+  height: 48px; border-radius: 24px 0 0 24px; border: 2px solid #fe2c55; padding-left: 20px; font-size: 15px;
+}
+.custom-search-input ::v-deep .el-input-group__append {
+  background-color: #fe2c55; border: 2px solid #fe2c55; border-radius: 0 24px 24px 0; color: #fff; padding: 0 25px; cursor: pointer;
+}
+
+.search-suggest-card {
+  position: absolute; top: 55px; left: 0; width: 100%; border-radius: 16px; border: none; box-shadow: 0 12px 32px rgba(0,0,0,0.15); z-index: 2005;
+}
+
+.suggest-section {
+  padding: 10px 5px;
+  &:not(:last-child) {
+    border-bottom: 1px solid #f2f6fc;
+  }
+}
+
+.hot-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
+.suggest-tag {
+  padding: 6px 14px; background-color: #f4f4f5; border-radius: 18px; font-size: 13px; color: #606266; cursor: pointer;
+  &:hover { background-color: #fe2c55; color: #fff; }
+}
+
+.suggest-list { margin-top: 5px; }
+.suggest-list-item {
+  padding: 10px 8px; font-size: 14px; color: #303133; cursor: pointer; border-radius: 8px;
+  &:hover { background-color: #f5f7fa; color: #fe2c55; }
+  i { margin-right: 8px; color: #909399; }
+}
+
+.search-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.1); z-index: 1000; }
+.result-container { max-width: 1400px; margin: 0 auto; padding: 0 10px; }
+.video-col { margin-bottom: 15px; }
+.pagination-row { display: flex; justify-content: center; margin: 40px 0; }
+
+.search-title {
+  font-size: 14px;
+  color: #909399;
+  font-weight: bold;
+  margin-bottom: 8px;
+  i { margin-right: 5px; color: #fe2c55; }
+}
+
+@media screen and (max-width: 768px) {
+  .video-col { padding: 0 4px !important; }
+}
+</style>

src/views/search/SearchIndex.vue

@@ -1,465 +0,0 @@
-<template>
-  <el-container>
-    <el-main>
-      <el-row style="padding: 5px">
-        <el-input
-          v-model="keyword"
-          :placeholder="searchHint"
-          class="input-with-select"
-          clearable
-          @focus="focus"
-          @blur="blur"
-          @input="inputEvent"
-          @keyup.enter.native="handleOnSearch"
-        >
-          <el-select
-            slot="prepend"
-            v-model="searchType"
-            placeholder="请选择"
-          >
-            <el-option label="全部" value="1" />
-            <el-option label="视频" value="2" />
-            <el-option label="文书" value="3" />
-          </el-select>
-          <el-button slot="append" icon="el-icon-search" @click="handleOnSearch" />
-        </el-input>
-        <!---设置z-index优先级,防止被走马灯效果遮挡-->
-        <el-card
-          v-if="isSearch"
-          id="search-box"
-          class="box-card"
-          style="position:relative;z-index:15"
-        >
-          <dl v-if="isHistorySearch">
-            <div class="search-title">热门搜索</div>
-            <el-col v-if="hotSearchList.length === 0" :md="6" style="padding: 5px;">
-              暂无热门搜索
-            </el-col>
-            <el-col v-for="hotSearch in hotSearchList" :key="hotSearch.keyword" :md="6" style="padding: 5px;">
-              <el-button style="padding: 5px;" type="text" @click="onClickHot(hotSearch.keyword)">
-                {{ hotSearch.keyword }}
-              </el-button>
-            </el-col>
-          </dl>
-          <dl v-if="isSearchList">
-            <div class="search-title">搜索建议</div>
-            <el-col v-if="searchList.length === 0" :md="6" style="padding: 5px;">
-              暂无搜索建议
-            </el-col>
-            <el-col v-else v-for="searchSuggest in searchList" :key="searchSuggest.value" :md="6" style="padding: 5px;">
-              <el-button style="padding: 5px;" type="text" @click="onClickHot(searchSuggest.value)">
-                {{ searchSuggest.value }}
-              </el-button>
-            </el-col>
-          </dl>
-        </el-card>
-      </el-row>
-      <!--  返回的搜索数据    -->
-      <el-row style="padding: 5px">
-        <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 v-html="item.caseName" />
-                    <el-button style="float: right; padding: 5px;" type="text" @click="onGetWenshuDetail(item.id)">查看详情</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.caseId }}</span>
-                          </div>
-                        </el-row>
-                        <el-row>
-                          <div style="padding: 14px">
-                            <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.cause }}</span>
-                          </div>
-                        </el-row>
-                      </el-col>
-                    </el-row>
-                    <el-row>
-                      <div style="padding: 14px">
-                        <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.judgmentDate }}</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" style="padding: 5px">
-        <div>
-          <img src="@/assets/img/not-result.png">
-          <span>没有结果</span>
-        </div>
-      </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="2" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-location-outline" />
-              案号
-            </template>
-            <span> {{ wenshuDetail.caseId }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-user" />
-              案件名称
-            </template>
-            <span> {{ wenshuDetail.caseName }} </span>
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions class="margin-top" :column="2" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-mobile-phone" />
-              法院
-            </template>
-            <span> {{ wenshuDetail.court }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-user" />
-              所属地区
-            </template>
-            <span> {{ wenshuDetail.region }} </span>
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions class="margin-top" :column="2" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-mobile-phone" />
-              案件类型
-            </template>
-            <span> {{ wenshuDetail.caseType }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-location-outline" />
-              审理程序
-            </template>
-            <span> {{ wenshuDetail.procedure }} </span>
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions class="margin-top" :column="2" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-mobile-phone" />
-              当事人
-            </template>
-            <span> {{ wenshuDetail.parties }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-mobile-phone" />
-              案由
-            </template>
-            <span> {{ wenshuDetail.cause }} </span>
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions class="margin-top" :column="2" border>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-user" />
-              审判日期
-            </template>
-            <span> {{ wenshuDetail.judgmentDate }} </span>
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template slot="label">
-              <i class="el-icon-location-outline" />
-              发布日期
-            </template>
-            <span> {{ wenshuDetail.publicDate }} </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-for="(item, index) in wenshuDetail.legalBasis.split('；')" :key="index">
-              <span>{{ item }}</span>
-              <br>
-            </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.fullText" />
-          </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 SearchVideoCard from '@/components/card/SearchVideoCard'
-import { videoQuery, getWenshuDetail, wenshuQuery, keywordSuggest, hotKeyword } from '@/api/search'
-
-export default {
-  name: 'SearchIndex',
-  components: {
-    SearchVideoCard
-  },
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 12,
-      totalSize: 0,
-      dataList: [], // 搜索结果
-      hotSearchList: ['暂无热门搜索'], // 热门搜索
-      searchList: [], // 搜索建议
-      searchHint: '想要搜点神马呢',
-      showEmpty: false,
-      loading: false,
-      keyword: '', // 当前输入框的值
-      searchType: '1',
-      isFocus: false, // 是否聚焦
-      wenshuDetailDialog: false,
-      wenshuDetail: null,
-      videoSearch: false,
-      wenshuSearch: false
-    }
-  },
-  computed: {
-    isHistorySearch() {
-      return this.isFocus && this.keyword === ''
-    },
-    isSearchList() {
-      return this.isFocus && this.keyword !== ''
-    },
-    isSearch() {
-      return this.isFocus
-    }
-  },
-  mounted() {
-    hotKeyword().then(resp => {
-      if (resp.code === 0) {
-        this.hotSearchList = resp.data
-      }
-    })
-  },
-  created() {
-    const keyword = this.$route.query.keyword
-    const searchType = this.$route.query.searchType
-    const currentPage = parseInt(this.$route.query.pn)
-    if (keyword !== undefined && searchType !== undefined && currentPage !== undefined) {
-      this.keyword = keyword
-      this.searchType = searchType
-      this.currentPage = currentPage
-      this.searchHandler()
-      document.title = '搜索 - ' + this.keyword
-    } else {
-      document.title = '搜索'
-    }
-  },
-  methods: {
-    handleCurrentChange(currentPage) {
-      this.$router.push({
-        path: '/search',
-        query: {
-          searchType: this.searchType,
-          keyword: this.keyword,
-          pn: currentPage
-        }
-      })
-      this.$router.go(0)
-    },
-    handleOnSearch() {
-      this.$router.push({
-        path: '/search',
-        query: {
-          searchType: this.searchType,
-          keyword: this.keyword,
-          pn: 1
-        }
-      })
-      this.$router.go(0)
-    },
-    focus() {
-      this.isFocus = true
-    },
-    blur() {
-      this.isFocus = false
-    },
-    inputEvent() {
-      const queryString = this.keyword
-      if (queryString === '') {
-        return
-      }
-
-      setTimeout(() => {
-        keywordSuggest(queryString).then(resp => {
-          if (resp.code === 0) {
-            this.searchList = []
-            this.searchList = resp.data.map((item) => {
-              return {
-                value: item.keyword,
-                rank: 1
-              }
-            })
-          }
-        })
-      }, 500)
-    },
-    searchHandler() {
-      if (this.searchType === '3') {
-        this.videoSearch = false
-        this.wenshuSearch = true
-        wenshuQuery(this.keyword, this.currentPage).then(resp => {
-          if (resp.code === 0) {
-            const respData = resp.data
-            this.totalSize = respData.totalSize
-            this.dataList = respData.list
-          }
-        })
-      } else {
-        this.videoSearch = true
-        this.wenshuSearch = false
-        this.videoQueryWrapper(this.keyword, this.currentPage)
-      }
-    },
-    onGetWenshuDetail(val) {
-      getWenshuDetail(val, this.keyword).then(resp => {
-        if (resp.code === 0) {
-          this.wenshuDetail = resp.data
-        }
-      }).finally(() => {
-        this.wenshuDetailDialog = true
-      })
-    },
-    videoQueryWrapper(keyword, pageNumber) {
-      this.loading = true
-      videoQuery(keyword, pageNumber).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          this.totalSize = respData.totalSize
-          this.dataList = respData.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
-      })
-    },
-    onClickHot(val) {
-      this.keyword = val
-      this.handleOnSearch()
-    }
-  }
-}
-</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/search/SearchResult.vue

@@ -1,165 +0,0 @@
-<template>
-  <div id="search-list">
-    <!--搜索结果面包屑-->
-    <el-breadcrumb
-      class="bread"
-      separator-class="el-icon-arrow-right"
-    >
-      <el-breadcrumb-item>
-        对 <span class="result">{{ keyword }}</span> 的搜索结果共有<span class="result"> {{ total }} </span>条记录
-      </el-breadcrumb-item>
-    </el-breadcrumb>
-
-    <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 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>
-          <!--
-            分页按钮：
-              page-size：每页显示条数
-              total：总条数
-              hide-on-single-page： 页数为一时隐藏
-          -->
-          <el-col :span="24" class="pagination">
-            <el-pagination
-              background
-              :small="screenWidth <= 768"
-              hide-on-single-page
-              layout="prev, pager, next"
-              :current-page="currentPage"
-              :page-size="pageSize"
-              :total="total"
-              @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/not-result.png">
-        <div>没有结果</div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import SearchVideoCard from '@/components/card/SearchVideoCard'
-import HotSearch from '@/components/card/HotSearch'
-
-import { videoQuery, hotKeyword } from '@/api/search'
-
-export default {
-  name: 'Search',
-  components: { SearchVideoCard, HotSearch },
-  data() {
-    return {
-      keyword: null,
-      currentPage: 1,
-      total: 0,
-      length: 0,
-      pageSize: 12,
-      dataList: [],
-      showEmpty: false,
-      cardProp: {
-        title: null,
-        type: null,
-        dataList: []
-      },
-      loading: false
-    }
-  },
-  mounted() {
-    hotKeyword().then(resp => {
-      if (resp.code === 0) {
-        this.cardProp.dataList = resp.data
-        this.cardProp.title = '热搜排行'
-        this.cardProp.type = 'hotSearch'
-      }
-    })
-  },
-  created() {
-    this.keyword = this.$route.query.keyword
-    this.currentPage = parseInt(this.$route.query.pageNumber)
-    this.videoQueryWrapper(this.keyword, this.currentPage)
-    document.title = '搜索 - ' + this.keyword
-  },
-  methods: {
-    handleCurrentChange(currentPage) {
-      this.$router.push({
-        path: '/search',
-        query: {
-          keyword: this.keyword,
-          pageNumber: currentPage
-        }
-      })
-      this.$router.go(0)
-    },
-    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 scoped>
-	#search-list {
-		padding-left: 3px;
-		padding-right: 3px;
-		padding-top: 3px;
-	}
-
-	.bread {
-		font-size: 15px;
-	}
-
-	.movie-list {
-		padding-top: 15px;
-	}
-
-	.pagination {
-		text-align: center;
-		padding: 10px;
-	}
-
-	.result {
-		color: red;
-	}
-
-	.not-result {
-		padding-top: 100px;
-		padding-bottom: 100px;
-		text-align: center;
-	}
-</style>