添加 SiteNotice 到 Index

src/components/card/SiteNotice.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
+    <div slot="header" class="clearfix">
+      <img src="@/assets/img/icon/speaker.png" alt="" class="recommand-icon">
+      <span>站点公告</span>
+    </div>
+    <div class="item">
+      <span style="left: 0;margin-bottom: 0px;color: darkslateblue;"> 哈哈哈哈 </span>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'SiteNotice',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 15
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  data() {
+    return {
+      dataList: []
+    }
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+@media screen and (max-width: 768px) {
+  .clearfix span {
+    font-size: 15px;
+    position: absolute;
+    bottom: 8px;
+    left: 35px;
+  }
+  .text {
+    font-size: 14px;
+  }
+}
+
+.item {
+  height: 25px;
+  margin-top: 4px;
+  margin-bottom: 16px;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  position: relative;
+}
+.clearfix span {
+  font-size: 20px;
+  position: absolute;
+  bottom: 8px;
+  left: 35px;
+}
+.box-card {
+  width: 100%;
+}
+
+.recommand-icon {
+  width: 30px;
+}
+</style>

src/views/home/Index.vue

@@ -24,7 +24,12 @@
         </el-row>
       </el-col>
       <el-col :md="6">
-        <hot-video />
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <site-notice />
+        </el-row>
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <hot-video />
+        </el-row>
       </el-col>
     </el-row>
   </div>
@@ -33,11 +38,12 @@
 <script>
 import VideoCard from '@/components/card/VideoCard'
 import HotVideo from '@/components/card/HotVideo'
+import SiteNotice from '@/components/card/SiteNotice'
 import { videoRecommend } from '@/api/video'
 
 export default {
   name: 'Index',
-  components: { VideoCard, HotVideo },
+  components: { VideoCard, HotVideo, SiteNotice },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -88,7 +94,7 @@ export default {
     },
     load() {
       this.max++
-      if (this.max > 10) {
+      if (this.max > 1) {
         return
       }