Skip to content

V
vue-ssr
Commit 731b2700 authored by lixy's avatar lixy
Browse files
Options

首页-底部

parent 3b31f1f6
Hide whitespace changes
Inline Side-by-side
Showing with 638 additions and 24 deletions
assets/main.css
View file @ 731b2700
...@@ -4,15 +4,20 @@ body { ...@@ -4,15 +4,20 @@ body {
width: 100%; width: 100%;
} }
.min-win{
width: 1200px;
}
.main-container{ .main-container{
margin-top:90px; margin-top:90px;
min-height: 600px; min-height: 600px;
} }
.container { .container {
/*text-align: center;*/ /*text-align: center;*/
font-size: 20px; font-size: 16px;
transition: all .5s cubic-bezier(.55, 0, .1, 1); color: #333;
transition: all .5s cubic-bezier(.55, 0, .1, 1);
} }
.flex-aic{ .flex-aic{
...@@ -24,6 +29,39 @@ body { ...@@ -24,6 +29,39 @@ body {
align-items: center; align-items: center;
justify-content: space-between; 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{ .ft-20{
font-size: 20px; font-size: 20px;
...@@ -45,6 +83,10 @@ body { ...@@ -45,6 +83,10 @@ body {
font-size: 12px; font-size: 12px;
} }
.tc{
text-align: center;
}
/*路由跳转页面动画*/ /*路由跳转页面动画*/
/*.page-enter-active,*/ /*.page-enter-active,*/
/*.page-leave-active {*/ /*.page-leave-active {*/
......
components/banner.vue 0 → 100644
View file @ 731b2700
<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 0 → 100644
View file @ 731b2700
<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
View file @ 731b2700
<template> <template>
<div class="footer-container"> <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="footer">
<div class="flex-aic-jcb" style="height: 200px;width: 100%;"> <div class="flex-aic-jcb" style="height: 200px;width: 100%;">
<div class="flex-aic"> <div class="flex-aic">
<div class="footer-scan"> <div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/> <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12">欣新房车微信公众号</p> <p class="ft-12 tc">欣新房车微信公众号</p>
</div> </div>
<div class="footer-scan"> <div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/> <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12">欣新房车助手小程序</p> <p class="ft-12 tc">欣新房车助手小程序</p>
</div> </div>
<div class="footer-scan"> <div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/> <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<p class="ft-12">滴房车App(欣新旗下)</p> <p class="ft-12 tc">滴房车App(欣新旗下)</p>
</div> </div>
</div> </div>
<div class="r-contant"> <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="欣新房车，让生活更美好"/>广东省东莞市松山湖工业西路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="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 class="contact">在线咨询</div>
</div> </div>
</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> </div>
</template> </template>
...@@ -66,10 +69,11 @@ ...@@ -66,10 +69,11 @@
padding: 0px 20px; padding: 0px 20px;
border-right: 1px solid #a2a2a2; border-right: 1px solid #a2a2a2;
} }
.footer-scan img{ .footer-scan img{
width: 120px; width: 110px;
height: 120px; height: 110px;
padding: 10px; padding: 5px;
} }
.footer-scan:last-child{ .footer-scan:last-child{
border: none; border: none;
...@@ -81,6 +85,7 @@ ...@@ -81,6 +85,7 @@
text-align: center; text-align: center;
width: 100px; width: 100px;
margin-top: 20px; margin-top: 20px;
cursor: pointer;
} }
.r-contant-i{ .r-contant-i{
margin: 5px 0; margin: 5px 0;
...@@ -91,6 +96,11 @@ ...@@ -91,6 +96,11 @@
margin-right: 10px; margin-right: 10px;
} }
.link-f{ .link-f{
padding: 20px;
border-top: 1px solid #a2a2a2; border-top: 1px solid #a2a2a2;
font-size: 14px;
}
.link-f a{
color: #1bbb9f;
} }
</style> </style>
components/menu.vue
View file @ 731b2700
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
] ]
} }
}, },
created() {debugger created() {
let router = this.$route.path; let router = this.$route.path;
this.router = router; this.router = router;
}, },
......
pages/index.vue
View file @ 731b2700
...@@ -2,30 +2,232 @@ ...@@ -2,30 +2,232 @@
<div class="container"> <div class="container">
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<img src="http://xxfangche.com/upload/1/editor/1564652860778wuweizhi.jpg" style="width:100%;" alt="欣新房车，让生活更美好"> <banner
这里是首页 v-if="showBanner"
<!--<h2>新闻列表</h2>--> :list = "list"
<!--<ul class="users">--> :looptime="looptime"
<!--<li v-for="user in users" :key="user.id">--> :width="width"
<!--<nuxt-link to="/users">{{ user.title }}</nuxt-link>--> :height="height"
<!--<div v-html="user.value"></div>--> :background="background"
<!--</li>--> :color="color"
<!--</ul>--> :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> </div>
<footer-modal></footer-modal> <footer-modal></footer-modal>
</div> </div>
</template> </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> <script>
import axios from 'axios' import axios from 'axios'
import banner from "../components/banner"
import bannerActivity from "../components/bannerActivity"
import menuModal from "../components/menu" import menuModal from "../components/menu"
import footerModal from "../components/footer" import footerModal from "../components/footer"
import lightsSlider from "../components/lightsSlider"
export default { export default {
transition: 'bounce', transition: 'bounce',
components: { components: {
menuModal, 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() { async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1'); // const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment