热点论坛页面实现

src/router/index.js

@@ -320,6 +320,13 @@ export const constantRoutes = [{
     name: 'videotest',
     meta: {title: '课程视频测试', icon: 'dashboard', noCache: true, affix: true},
   },
+  {
+    path: '/hotforum',
+    hidden: true,
+    component: (resolve) => require(['@/views/hotforum/Index'], resolve),
+    name: 'hotforum',
+    meta: {title: '热点论坛', icon: 'dashboard', noCache: true, affix: true},
+  },
   {
     path: '/404',
     component: (resolve) => require(['@/views/error/404'], resolve),

src/views/hotforum/Index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="hot">
+    <div class="center">
+      <div class="item" :style="{marginRight:(i%2==0||i==0)?'49px':'0'}" v-for="item,i in imgData" :key="i">
+        <img class="img" :src="require(`../../assets/images/hotforum/${item}.png`)" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "hotforum",
+    data() {
+      return {
+        imgData:['one','two','one','two'],
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.hot{
+  width: 100%;
+  max-width: 1528px;
+  min-height: 776px;
+  // min-height: 1373px;
+  background: url("../../assets/images/hotforum/background.jpg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  .center{
+    max-width: 1270px;
+    margin-bottom: 66px;
+    margin-top: 285px;
+    display: flex;
+    flex-wrap: wrap;
+    .item{
+      width: 610px;
+      height: 330px;
+      background: url("../../assets/images/hotforum/border.png") no-repeat;
+      background-size: 100%;
+      padding: 14px;
+      padding-top: 31px;
+      margin-bottom: 59px;
+      .img{
+        width: 581px;
+        height: 283px;
+      }
+    }
+  }
+}
+</style>