Merge pull request #6 from gdmuna/clover

添加首页轮播图组件

src/pages/oj/views/general/Banner.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="block">
+    <Carousel
+      autoplay
+      autoplay-speed="3000"
+      dots="inside"
+      trigger="hover"
+      arrow="hover">
+      <Carousel-item v-for="item in bannerList" :key="item">
+        <div class="banner-item" :style="{ 'background-image': 'url(' + item.imgUrl + ')' }"></div>
+      </Carousel-item>
+    </Carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Banner',
+  components: {},
+  data () {
+    return {
+      bannerList: [
+        {
+          id: 1,
+          imgUrl: '/static/img/lantern-1.jpg'
+        },
+        {
+          id: 2,
+          imgUrl: '/static/img/lantern-2.jpg'
+        }
+      ]
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  },
+  computed: {
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .banner-item {
+    margin: 0;
+    height: 400px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+</style>

src/pages/oj/views/general/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <Row type="flex" justify="space-around">
     <Col :span="22">
+    <Banner class="banner"></Banner>
     <panel shadow v-if="contests.length" class="contest">
       <div slot="title">
         <Button type="text"  class="contest-title" @click="goContest">{{contests[index].title}}</Button>
@@ -32,6 +33,7 @@
 </template>
 
 <script>
+  import Banner from './Banner.vue'
   import Announcements from './Announcements.vue'
   import api from '@oj/api'
   import time from '@/utils/time'
@@ -40,6 +42,7 @@
   export default {
     name: 'home',
     components: {
+      Banner,
       Announcements
     },
     data () {
@@ -85,4 +88,8 @@
   .announcement {
     margin-top: 20px;
   }
+
+  .banner {
+    margin-top: 20px;
+  }
 </style>