首页-底部

assets/main.css

@@ -4,15 +4,20 @@ body {
     width: 100%;
 }
 
+.min-win{
+  width: 1200px;
+}
+
 .main-container{
   margin-top:90px;
   min-height: 600px;
 }
 
 .container {
-    /*text-align: center;*/
-    font-size: 20px;
-    transition: all .5s cubic-bezier(.55, 0, .1, 1);
+  /*text-align: center;*/
+  font-size: 16px;
+  color: #333;
+  transition: all .5s cubic-bezier(.55, 0, .1, 1);
 }
 
 .flex-aic{
@@ -24,6 +29,39 @@ body {
   align-items: center;
   justify-content: space-between;
 }
+.flex-aic-jcc{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-fdc-jcc{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.flex-aic-jcb-warp{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.ellipsis {
+  overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;
+}
+.ellipsis2{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ft-40{
+  font-size: 40px;
+}
 
 .ft-20{
   font-size: 20px;
@@ -45,6 +83,10 @@ body {
   font-size: 12px;
 }
 
+.tc{
+  text-align: center;
+}
+
 /*路由跳转页面动画*/
 /*.page-enter-active,*/
 /*.page-leave-active {*/

components/banner.vue

+<template>
+    <div class="banner" style="width:100%;height: 400px;">
+        <div class="box">
+            <ul>
+                <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
+                    <img :src= "item.image_url" style="width:100%;" :alt="item.name"/>
+                </li>
+            </ul>
+            <div class="status">
+            <span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
+                  @mouseenter="changeBanner(index)"
+                  @mouseleave="startLoop"
+            >{{item.name}}
+        </span>
+            </div>
+            <!--<div class="btn">-->
+                <!--<span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop">《</span>-->
+                <!--<span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">》</span>-->
+            <!--</div>-->
+        </div>
+        <!--h1 @click="getArticle">{{msg}}</h1-->
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'banner',
+        data() {
+            return {
+                current: 0, // 当前索引
+                timerId: null, // 清除循环标记
+                intStyle: {}
+            }
+        },
+        props: [
+            'list',
+            'looptime',
+            'height',
+            'width',
+            'background',
+            'color',
+            'fontSize'
+        ],
+        methods: {
+            getArticle () {
+                this.$emit('getArticle', this.article)
+            },
+            // 鼠标移入状态圆点
+            changeBanner (index) {
+                this.$emit('change', this.current);
+                this.stopLoop();
+                this.current = index;
+            },
+            // 鼠标点击banner内容
+            bannerClick (index, item) {
+                this.$emit('click', index, item);
+            },
+            // 点击上一张按钮
+            prev () {
+                if(this.current > 0) {
+                    // 将对象列表对应的索引和整个对象传出去
+                    this.$emit('prev', this.current, this.list);
+                    this.current--;
+                } else {
+                    this.$emit('prev', this.current, this.list);
+                    this.current = this.list.length - 1 ;
+                }
+            },
+            // 点击下一张按钮
+            next () {
+                if(this.current < this.list.length - 1) {
+                    this.$emit('prev', this.current, this.list);
+                    this.current ++;
+                } else {
+                    this.$emit('prev', this.current, this.list);
+                    this.current = 0;
+                }
+            },
+            // 鼠标移出继续循环播放
+            startLoop () {
+                this.int(4000);
+            },
+            // 鼠标移入停止循环播放
+            stopLoop () {
+                clearTimeout(this.timerId); // 清除循环
+            },
+            // 初始化加载
+            int (time){
+                this.timerId = setInterval(()=> {
+                    this.next();
+                }, time);
+                // 初始化样式
+                this.intStyle = {
+                    width: this.width + 'px',
+                    height: this.height + 'px',
+                    background: this.background,
+                    color: this.color
+                }
+            }
+        },
+        created () {
+            this.int(4000);
+        }
+    }
+</script>
+
+<style scoped>
+    .banner-bg{
+        width: 100%;
+    }
+    li{
+        position:absolute;
+        left:0;
+        width:100%;
+        height:100%;
+        font-size:inherit;
+        color:#fff;
+        font-size:80px;
+        text-align:center;
+        opacity:0;
+        transition: all 1.5s;
+    }
+    .active{
+        opacity:1;
+        transition: all 1.5s;
+    }
+    ul{
+        height:100%;
+    }
+    .name-t{
+        display:inline-block;
+        height:40px;
+        width:100px;
+        font-size: 14px;
+        margin:0 5px;
+        background:#ccc;
+        color:#333;
+        cursor:pointer;
+    }
+    span.active{
+        color:#fff;
+        background:#1bbb9f;
+    }
+    .status{
+        position:absolute;
+        bottom:20px;
+        width:100%;
+        height:40px;
+        text-align:Center;
+        display: flex;
+      justify-content: center;
+    }
+    .box{
+        position:relative;
+        height:100%;
+    }
+    span{
+        display:block;
+        height:40px;
+        width:20px;
+        color:#fff;
+        line-height:40px;
+        text-align:Center;
+        background:rgba(0,0,0, .7);
+        cursor:pointer;
+    }
+    span.prev{
+        float:left;
+    }
+    span.next{
+        float:right;
+    }
+    .btn{
+        position:absolute;
+        top:50%;
+        width:100%;
+        transform: translateY(-50%);
+    }
+    .banner{
+        width:400px;
+        height:200px;
+        overflow:hidden;
+    }
+</style>

components/bannerActivity.vue

+<template>
+  <div class="banner-active">
+    <div class="box">
+      <ul>
+        <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
+          <img :src= "item.image_url" style="width:100%;" :alt="item.name"/>
+        </li>
+      </ul>
+      <div class="status">
+            <div class="name-t" v-for="(item, index) in list" :key="item.id">
+              <div class="ft-20" v-if="index === current">{{item.name}}</div>
+              <div class="ft-14" v-if="index === current">活动时间：{{item.desc}}</div>
+              <div class="ft-14" v-if="index === current">活动地点：{{item.desc}}</div>
+        </div>
+      </div>
+      <div class="btn">
+      <span class="prev" @click="prev">《</span>
+      <span class="next" @click="next">》</span>
+      </div>
+    </div>
+    <!--h1 @click="getArticle">{{msg}}</h1-->
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'banner',
+    data() {
+      return {
+        current: 0, // 当前索引
+        timerId: null, // 清除循环标记
+        intStyle: {}
+      }
+    },
+    props: [
+      'list',
+      'looptime',
+      'height',
+      'width',
+      'background',
+      'color',
+      'fontSize'
+    ],
+    methods: {
+      getArticle () {
+        this.$emit('getArticle', this.article)
+      },
+      // 鼠标移入状态圆点
+      changeBanner (index) {
+        this.$emit('change', this.current);
+        this.stopLoop();
+        this.current = index;
+      },
+      // 鼠标点击banner内容
+      bannerClick (index, item) {
+        this.$emit('click', index, item);
+      },
+      // 点击上一张按钮
+      prev () {
+        if(this.current > 0) {
+          // 将对象列表对应的索引和整个对象传出去
+          this.$emit('prev', this.current, this.list);
+          this.current--;
+        } else {
+          this.$emit('prev', this.current, this.list);
+          this.current = this.list.length - 1 ;
+        }
+      },
+      // 点击下一张按钮
+      next () {
+        if(this.current < this.list.length - 1) {
+          this.$emit('prev', this.current, this.list);
+          this.current ++;
+        } else {
+          this.$emit('prev', this.current, this.list);
+          this.current = 0;
+        }
+      },
+      // 鼠标移出继续循环播放
+      startLoop () {
+        this.int(4000);
+      },
+      // 鼠标移入停止循环播放
+      stopLoop () {
+        clearTimeout(this.timerId); // 清除循环
+      },
+      // 初始化加载
+      int (time){
+//        this.timerId = setInterval(()=> {
+//          this.next();
+//        }, time);
+        // 初始化样式
+        this.intStyle = {
+          width: this.width + 'px',
+          height: this.height + 'px',
+          background: this.background,
+          color: this.color
+        }
+      }
+    },
+    created () {
+      this.int(4000);
+    }
+  }
+</script>
+
+<style scoped>
+  .banner-bg{
+    width: 100%;
+  }
+  li{
+    position:absolute;
+    left:0;
+    width:100%;
+    height:100%;
+    font-size:inherit;
+    color:#fff;
+    font-size:80px;
+    text-align:center;
+    opacity:0;
+    transition: all 1.5s;
+  }
+  .active{
+    opacity:1;
+    transition: all 1.5s;
+  }
+  ul{
+    height:100%;
+  }
+  .name-t div{
+    /*font-size: 14px;*/
+    color:#fff;
+    padding: 0 20px;
+  }
+  span.active{
+    color:#fff;
+    background:#1bbb9f;
+  }
+  .status{
+    position:absolute;
+    bottom:20px;
+    width:100%;
+    display: flex;
+  }
+  .box{
+    position:relative;
+    height:100%;
+  }
+  span{
+    display:block;
+    height:40px;
+    width:20px;
+    color:#fff;
+    line-height:40px;
+    text-align:Center;
+    /*background:rgba(0,0,0, .7);*/
+    cursor:pointer;
+  }
+  span.prev{
+    float:left;
+  }
+  span.next{
+    float:right;
+  }
+  .btn{
+    position:absolute;
+    top:50%;
+    width:100%;
+    transform: translateY(-50%);
+  }
+  .banner-active{
+    width: 1200px;
+    height: 250px;
+    overflow:hidden;
+  }
+</style>

components/footer.vue

 <template>
   <div class="footer-container">
-    <!--<img src="../assets/images/footer.jpg" style="width:100%;" alt="欣新房车，让生活更美好">-->
+    <!--<img src="../assets/images/footer.jpg" style="width:100%;position:relative;z-index:-1" alt="欣新房车，让生活更美好">-->
     <div class="footer">
       <div class="flex-aic-jcb" style="height: 200px;width: 100%;">
         <div class="flex-aic">
           <div class="footer-scan">
             <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
-            <p class="ft-12">欣新房车微信公众号</p>
+            <p class="ft-12 tc">欣新房车微信公众号</p>
           </div>
           <div class="footer-scan">
             <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
-            <p class="ft-12">欣新房车助手小程序</p>
+            <p class="ft-12 tc">欣新房车助手小程序</p>
           </div>
           <div class="footer-scan">
             <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
-            <p class="ft-12">滴房车App(欣新旗下)</p>
+            <p class="ft-12 tc">滴房车App(欣新旗下)</p>
           </div>
         </div>
         <div class="r-contant">
-          <div class="ft-20 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>400-036-9369</div>
+          <div class="ft-20 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>400-0369-369</div>
           <div class="ft-12 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>广东省东莞市松山湖工业西路12号</div>
           <div class="ft-12 flex-aic r-contant-i"><img src="https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg" alt="欣新房车，让生活更美好"/>欣新房车控股集团（东莞）股份有限公司</div>
           <div class="contact">在线咨询</div>
         </div>
       </div>
     </div>
-    <div class="link-f"></div>
+    <div class="link-f flex-aic-jcc">
+      ©欣新房车控股集团（东莞）股份有限公司2019 保留一切权利。
+      <a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">备案号：粤ICP备19072339号-2</a>
+    </div>
   </div>
 </template>
 
@@ -66,10 +69,11 @@
     padding: 0px 20px;
     border-right: 1px solid #a2a2a2;
   }
+
   .footer-scan img{
-    width: 120px;
-    height: 120px;
-    padding: 10px;
+    width: 110px;
+    height: 110px;
+    padding: 5px;
   }
   .footer-scan:last-child{
     border: none;
@@ -81,6 +85,7 @@
     text-align: center;
     width: 100px;
     margin-top: 20px;
+    cursor: pointer;
   }
   .r-contant-i{
     margin: 5px 0;
@@ -91,6 +96,11 @@
     margin-right: 10px;
   }
   .link-f{
+    padding: 20px;
     border-top: 1px solid #a2a2a2;
+    font-size: 14px;
+  }
+  .link-f a{
+    color: #1bbb9f;
   }
 </style>

components/menu.vue

@@ -32,7 +32,7 @@
         ]
       }
     },
-    created() {debugger
+    created() {
       let router = this.$route.path;
       this.router = router;
     },

pages/index.vue

@@ -2,30 +2,232 @@
   <div class="container">
     <menu-modal></menu-modal>
     <div class="main-container">
-      <img src="http://xxfangche.com/upload/1/editor/1564652860778wuweizhi.jpg" style="width:100%;" alt="欣新房车，让生活更美好">
-      这里是首页
-      <!--<h2>新闻列表</h2>-->
-      <!--<ul class="users">-->
-        <!--<li v-for="user in users" :key="user.id">-->
-          <!--<nuxt-link to="/users">{{ user.title }}</nuxt-link>-->
-          <!--<div v-html="user.value"></div>-->
-        <!--</li>-->
-      <!--</ul>-->
+      <banner
+        v-if="showBanner"
+        :list = "list"
+        :looptime="looptime"
+        :width="width"
+        :height="height"
+        :background="background"
+        :color="color"
+        :fontSize="fontSize"
+        @prev="prev"
+        @next="next"
+        @change="changeBanner"
+        @click="bannerClick"
+        class="mb-50">
+      </banner>
+      <div class="flex-fdc-jcc">
+        <div class="tc title">3分钟了解欣新房车</div>
+        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+          <div style="width: 1100px;text-align: center">
+            <div class="line-title"></div>
+          </div>
+        </div>
+        <video width="320" height="240" controls autoplay="autoplay" muted>
+          <source src="https://www.runoob.com/try/demo_source/movie.mp4"  type="video/mp4">
+          <source src="https://www.runoob.com/try/demo_source/movie.ogg"  type="video/ogg">
+          您的浏览器不支持 HTML5 video 标签。
+        </video>
+      </div>
+
+      <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
+        <div class="tc title">最新活动 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 从这里启程</div>
+        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+          <div style="width: 1100px;text-align: center">
+            <div class="line-title"></div>
+          </div>
+          <nuxt-link to="/activity"><div>MORE</div></nuxt-link>
+        </div>
+        <banner-activity
+          :list = "list1"
+          :looptime="looptime"
+          :width="width"
+          :height="height"
+          :background="background"
+          :color="color"
+          :fontSize="fontSize"
+          @prev="prev"
+          @next="next"
+          @change="changeBanner"
+          @click="bannerClick"
+          class="mb-50">
+        </banner-activity>
+      </div>
+
+      <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
+        <div class="tc title">精选房车游 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 说走就走的房车之旅</div>
+        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+          <div style="width: 1100px;text-align: center">
+            <div class="line-title"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-fdc-jcc" style="padding: 30px 0;">
+        <div class="tc title">热门房车 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 多款房车任你选择</div>
+        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+          <div style="width: 1100px;text-align: center">
+            <div class="line-title"></div>
+          </div>
+          <nuxt-link to="/vehicle"><div>MORE</div></nuxt-link>
+        </div>
+        <div>
+          <ul class="v-type-ul">
+            <li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li>
+            <li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li>
+            <li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li>
+            <li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li>
+          </ul>
+          <!--<lightsSlider></lightsSlider>-->
+        </div>
+      </div>
+
+      <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
+        <div class="tc title">新闻动态 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 最新资讯与你分享</div>
+        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+          <div style="width: 1100px;text-align: center">
+            <div class="line-title"></div>
+          </div>
+          <nuxt-link to="/news"><div>MORE</div></nuxt-link>
+        </div>
+        <div class="flex-aic-jcb-warp min-win">
+          <div class="item-c flex-aic">
+            <img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/>
+            <div class="item-c-r">
+              <div class="ellipsis2">标题标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更</div>
+              <div class="desc ellipsis2">标题</div>
+              <div>2018-02-09</div>
+            </div>
+          </div>
+          <div class="item-c flex-aic">
+            <img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/>
+            <div class="item-c-r">
+              <div class="ellipsis2">标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好</div>
+              <div class="desc ellipsis2">标题</div>
+              <div>2018-02-09</div>
+            </div>
+          </div>
+          <div class="item-c flex-aic">
+            <img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/>
+            <div class="item-c-r">
+              <div class="ellipsis2">标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好</div>
+              <div class="ellipsis2 desc">标题欣新房车，让生活车，让生活车，让生活车，让生活车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活标题让生活标题</div>
+              <div>2018-02-09</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <footer-modal></footer-modal>
   </div>
 </template>
-
+<style>
+  .v-type-active{
+    background: #1bbb9f;
+    color: #fff;
+  }
+  .v-type{
+    padding: 10px;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .v-type-ul{
+    width: 600px;
+    justify-content: space-between;
+    display: flex;
+  }
+  .item-c{
+    /*width: 600px;*/
+    height: 150px;
+    padding: 0 10px;
+  }
+  .title{
+    width: 1200px;
+    padding: 10px;
+    font-size: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .item-c-img{
+    width: 100px;
+    height: 100px;
+    margin-right: 20px;
+  }
+  .item-c-r{
+    width: 400px;
+  }
+  .item-c-r .desc{
+    font-size: 14px;
+  }
+  .line-title{
+    background: #1bbb9f;
+    width: 30px;
+    height: 5px;
+    margin: 0 auto;
+  }
+</style>
 <script>
 import axios from 'axios'
+import banner from "../components/banner"
+import bannerActivity from "../components/bannerActivity"
 import menuModal from "../components/menu"
 import footerModal from "../components/footer"
+import lightsSlider from "../components/lightsSlider"
+
 
 export default {
   transition: 'bounce',
   components: {
     menuModal,
-    footerModal
+    footerModal,
+    banner,
+    bannerActivity,
+    lightsSlider
+  },
+  data () {
+    return {
+      showBanner: !0,
+      items: [],
+      curId: 0,
+      items1: {},
+      curId1: 0,
+      looptime: 4000, // 循环时间
+      width: 400,
+      height:200,
+      background: 'red',
+      color: '#fff',
+      fontSize: '70px',
+      list: [{id: 1,image_url:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg", name:'异地取还' },{id: 2,image_url:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg", name:'欣新房车' }],
+      items2: [],
+      industryList: [],
+      hasIndustry: !1,
+      list1: [{id: 1,image_url:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg", name:'异地取还',desc:"房车活动" },
+       {id: 2,image_url:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg", name:'欣新房车',desc:"房车活动异地取还" }
+      ],
+      tabIndex: 0,//当前选中车型
+    }
+  },
+  methods: {
+    /**
+     * 车型切换
+     */
+    changeVehicle(index){
+      console.log(index);
+      this.tabIndex = index;
+    },
+    // 点击下一页回调
+    prev () {
+    },
+    // 点击下一页回调
+    next () {
+    },
+    // 鼠标移入状态点回调
+    changeBanner () {
+    },
+    bannerClick () {
+    }
   },
   async asyncData() {
 //    const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');