From 6bb2945962fb08524beb11e041881da78cd4d8e4 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Wed, 8 Jan 2020 10:42:43 +0800
Subject: [PATCH] 产品中心banner

---
 src/assets/images/commonBanner.png | Bin 0 -> 2217465 bytes
 src/components/commonBanner.vue    | 41 +++++++++++++++++++++++++++++++++++++++++
 src/views/home/index.vue           | 17 +++++++++--------
 src/views/product/index.vue        | 40 ++++++++++++++++++++++++++++++++++++++--
 4 files changed, 88 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/images/commonBanner.png
 create mode 100644 src/components/commonBanner.vue

diff --git a/src/assets/images/commonBanner.png b/src/assets/images/commonBanner.png
new file mode 100644
index 0000000..7380250
Binary files /dev/null and b/src/assets/images/commonBanner.png differ
diff --git a/src/components/commonBanner.vue b/src/components/commonBanner.vue
new file mode 100644
index 0000000..9a35877
--- /dev/null
+++ b/src/components/commonBanner.vue
@@ -0,0 +1,41 @@
+<template>
+
+  <div class="banner">
+    <p>{{mainTitle}}</p>
+    <p>{{subTitle}}</p>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'commonBanner',
+  props:[
+    'mainTitle', 'subTitle'
+  ]
+}
+</script>
+
+<style scoped lang="scss">
+  .banner {
+    background: url("../assets/images/commonBanner.png") no-repeat;
+    background-size: 100% 100%;
+    height: 327px;
+    text-align: center;
+  }
+
+  .banner p:nth-of-type(1) {
+    padding: 100px 0 50px;
+    font-size: 40px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .banner p:nth-of-type(2) {
+    font-size: 30px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+  }
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 69785ac..9f65152 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -4,6 +4,7 @@
         <div class="swiper-container">
           <div class="swiper-wrapper">
             <div class="swiper-slide swiper1"></div>
+            <div class="swiper-slide swiper2">2</div>
           </div>
 
         </div>
@@ -245,14 +246,14 @@ export default {
   mounted(){
     new Swiper ('.swiper-container', {
 
-      // //自动轮播
-      // autoplay: {
-      //   delay: 5000,
-      //   //当用户滑动图片后继续自动轮播
-      //   disableOnInteraction: false,
-      // },
-      // //开启循环模式
-      // loop: true
+      //自动轮播
+      autoplay: {
+        delay: 5000,
+        //当用户滑动图片后继续自动轮播
+        disableOnInteraction: false,
+      },
+      //开启循环模式
+      loop: true
     })
   }
 
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index 5ff5ab8..1df8b03 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -1,13 +1,49 @@
 <template>
-    <div>产品中心</div>
+    <div>
+      <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct>
+      <div class="tab-wrapper">
+        <ul class="tab-main widthCommon">
+          <li>智慧停车</li>
+          <li>公安交通</li>
+          <li>公共交通</li>
+        </ul>
+      </div>
+    </div>
 </template>
 
 <script>
+import commonProduct from '@/components/commonBanner'
 export default {
-  name: 'index'
+  name: 'index',
+  components:{
+    commonProduct
+  },
+
 }
 </script>
 
 <style scoped lang="scss">
 
+  .tab-wrapper{
+    height:50px;
+    background:rgba(237,237,237,1);
+    /*line-height: 50px;*/
+    padding-top: 5px;
+  }
+  .tab-main{
+    padding-left: 100px;
+    height: 45px;
+    line-height: 45px;
+  }
+  .tab-main li{
+    float: left;
+    margin-right: 50px;
+    width: 125px;
+    background: #FFF;
+    border-radius: 5px;
+    color: #333;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+  }
 </style>
--
libgit2 0.21.4