更新 History.vue 播放历史页面

src/views/post/History.vue

@@ -1,69 +1,68 @@
 <template>
-  <div id="history-list">
-    <!--搜索结果面包屑-->
-    <el-breadcrumb
-      v-if="this.$route.path.indexOf('history') > -1"
-      class="bread"
-      separator-class="el-icon-arrow-right"
-    >
-      <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>播放历史记录：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
-    </el-breadcrumb>
-
-    <el-row v-if="visitList.length !== 0" class="movie-list">
-      <el-col style="text-align: center">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          round
-          title="一键清空历史"
-          @click="removeAll"
-        >一键清空历史</el-button>
-      </el-col>
-      <el-col :md="8">
-        <div style="display: flex; justify-content: center;">
-          <el-timeline
-            :reverse="reverse"
-            style="overflow: auto"
-          >
-            <el-timeline-item
-              v-for="(record, index) in visitList"
-              :key="index"
-              :timestamp="record.createAt"
-              placement="top"
-              style="overflow: auto"
-            >
-              <history-video-card :video="record" />
-              <el-button
-                type="danger"
-                icon="el-icon-delete"
-                circle
-                size="small"
-                title="移除该历史记录"
-                @click.stop="removeHistory(record.videoId)"
-              />
-            </el-timeline-item>
-          </el-timeline>
-        </div>
-        <div style="display: flex; justify-content: center;" v-if="hasMore">
-          <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
-            加载更多
-          </el-button>
-        </div>
-        <div style="display: flex; justify-content: center;" v-else>
-          <span>
-            已经到底啦~
-          </span>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row v-else class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-history.png">
-        <div>你还没有看过任何东西呢</div>
-      </el-col>
-    </el-row>
-  </div>
+  <el-container>
+    <el-header height="120">
+      <!--搜索结果面包屑-->
+      <el-breadcrumb
+        v-if="this.$route.path.indexOf('history') > -1"
+        class="bread"
+        separator-class="el-icon-arrow-right"
+      >
+        <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
+        <el-breadcrumb-item>播放历史记录：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-button style="margin-top: 5px" type="text" icon="el-icon-delete" @click="removeAll">清空历史记录</el-button>
+    </el-header>
+    <el-main>
+      <div id="history-list">
+        <el-row v-if="visitList.length !== 0" class="movie-list">
+          <el-col :md="8">
+            <div style="height: 60vh;">
+              <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
+                <div style="display: flex; justify-content: center;">
+                  <el-timeline
+                    :reverse="reverse"
+                    style="overflow: auto"
+                  >
+                    <el-timeline-item
+                      v-for="(record, index) in visitList"
+                      :key="index"
+                      :timestamp="record.createAt"
+                      placement="top"
+                      style="overflow: auto"
+                    >
+                      <history-video-card :video="record" />
+                      <el-button
+                        type="danger"
+                        icon="el-icon-delete"
+                        circle
+                        size="small"
+                        title="移除该历史记录"
+                        @click.stop="removeHistory(record.videoId)"
+                      />
+                    </el-timeline-item>
+                  </el-timeline>
+                </div>
+                <div style="display: flex; justify-content: center;" v-if="hasMore">
+                  <el-button link type="plain" icon="el-icon-bottom" @click="loadMore">
+                    加载更多
+                  </el-button>
+                </div>
+                <div style="display: flex; justify-content: center;" v-else>
+                  <span>已经到底啦~</span>
+                </div>
+              </el-scrollbar>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row v-else class="not-result">
+          <el-col :span="12" :offset="6">
+            <img src="@/assets/img/icon/not-history.png">
+            <div>你还没有看过任何东西呢</div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>