Merge pull request #7 from gdmuna/gift

走马灯

.babelrc

@@ -11,7 +11,11 @@
   ],
   "plugins": [
     "transform-runtime",
-    "syntax-dynamic-import"
+    "syntax-dynamic-import",
+    ["component", {
+      "libraryName": "element-ui",
+      "styleLibraryName": "theme-chalk"
+    }]
   ],
   "env": {
     "test": {

package.json

@@ -43,6 +43,7 @@
     "babel-core": "^6.26.3",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.1.4",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.7.0",

src/pages/oj/index.js

@@ -11,6 +11,8 @@ import { GOOGLE_ANALYTICS_ID } from '@/utils/constants'
 import iView from 'iview'
 import 'iview/dist/styles/iview.css'
 
+import { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from 'element-ui'
+
 import Panel from '@oj/components/Panel.vue'
 import VerticalMenu from '@oj/components/verticalMenu/verticalMenu.vue'
 import VerticalMenuItem from '@oj/components/verticalMenu/verticalMenu-item.vue'
@@ -49,6 +51,8 @@ Vue.use(VueAnalytics, {
   id: GOOGLE_ANALYTICS_ID,
   router
 })
+Vue.use(ElCarousel)
+Vue.use(ElCarouselItem)
 
 Vue.component('ECharts', ECharts)
 Vue.component(VerticalMenu.name, VerticalMenu)

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

@@ -1,16 +1,9 @@
 <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>
+  <el-carousel :interval="4000" type="card" height="300px">
+    <el-carousel-item v-for="item in bannerList" :key="item">
+      <div class="banner-item" :style="{ 'background-image': 'url(' + item.imgUrl + ')' }"></div>
+    </el-carousel-item>
+  </el-carousel>
 </template>
 
 <script>
@@ -27,6 +20,22 @@ export default {
         {
           id: 2,
           imgUrl: '/static/img/lantern-2.jpg'
+        },
+        {
+          id: 3,
+          imgUrl: '/static/img/modem-1.jpg'
+        },
+        {
+          id: 4,
+          imgUrl: '/static/img/lantern-4.jpg'
+        },
+        {
+          id: 5,
+          imgUrl: '/static/img/lantern-5.jpg'
+        },
+        {
+          id: 6,
+          imgUrl: '/static/img/modem-2.jpg'
         }
       ]
     }
@@ -43,13 +52,21 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style>
+  /* .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  } */
+  
   .banner-item {
     margin: 0;
-    height: 400px;
+    height: 300px;
+    border-radius: 15px;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
   }
-
-</style>
+</style>