Skip to content

V
vue-ssr
Commit 013b9e8c authored by lixy's avatar lixy
Browse files
Options

首页-接口联调

parent 23a2f93d
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 123 deletions
components/banner.vue
View file @ 013b9e8c
<template>
<div class="banner" style="width:100%;height: 400px;">
<div class="banner">
<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"/>
<img :src= "item.cover" style="width:100%;" :alt="item.title"/>
</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}}
>{{item.title}}
</span>
</div>
<!--<div class="btn">-->
......@@ -152,7 +152,7 @@
}
.box{
position:relative;
height:100%;
height:500px;
}
span{
display:block;
......@@ -177,8 +177,7 @@
transform: translateY(-50%);
}
.banner{
width:400px;
height:200px;
overflow:hidden;
width:100%;
max-height:500px;
}
</style>
components/bannerActivity.vue
View file @ 013b9e8c
......@@ -3,14 +3,14 @@
<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"/>
<img :src= "item.banner" style="width:100%;height: auto" :alt="item.title"/>
</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 class="ft-20" v-if="index === current">{{item.title}}</div>
<div class="ft-14" v-if="index === current">活动时间：{{item.startTime}}至{{item.endTime}}</div>
<div class="ft-14" v-if="index === current">活动地点：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
</div>
</div>
<div class="btn">
......@@ -112,20 +112,21 @@
position:absolute;
left:0;
width:100%;
height:100%;
height:auto;
font-size:inherit;
color:#fff;
font-size:80px;
text-align:center;
opacity:0;
transition: all 1.5s;
list-style: none;
}
.active{
opacity:1;
transition: all 1.5s;
}
ul{
height:100%;
height:auto;
}
.name-t div{
/*font-size: 14px;*/
......@@ -170,7 +171,7 @@
}
.banner-active{
width: 1200px;
height: 250px;
overflow:hidden;
height: 312px;
/*overflow:hidden;*/
}
</style>
components/footer.vue
View file @ 013b9e8c
......@@ -9,7 +9,7 @@
<p class="ft-12 tc">欣新房车微信公众号</p>
</div>
<div class="footer-scan">
<img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
<img src="../assets/images/xxfczs.jpg" alt="欣新房车，让生活更美好"/>
<p class="ft-12 tc">欣新房车助手小程序</p>
</div>
<div class="footer-scan">
......
nuxt.config.js
View file @ 013b9e8c
......@@ -20,7 +20,9 @@ module.exports = {
loading: '~/components/loading.vue',
plugins: [
{ src: '~plugins/muse-ui.js', ssr: true }
{ src: '~plugins/muse-ui.js', ssr: true },
{ src: '~plugins/loadMore.js', ssr: false },
{ src: '~plugins/dateFormattor.js', ssr: false }
],
build: {
......
package.json
View file @ 013b9e8c
......@@ -21,6 +21,8 @@
"multer": "^1.3.0",
"muse-ui": "^2.1.0",
"swiper": "^4.0.7",
"vue-infinite-loading": "^2.4.4",
"vue-infinite-scroll": "^2.0.2",
"nuxt": "^1.0.0"
},
"devDependencies": {
......
pages/index.vue
View file @ 013b9e8c
<template>
<div class="container">
<menu-modal></menu-modal>
<div class="main-container">
<banner
v-if="showBanner"
:list = "list"
:list = "bannerList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -17,30 +18,31 @@
@click="bannerClick"
class="mb-50">
</banner>
<div class="flex-fdc-jcc">
<div class="flex-fdc-jcc video-container">
<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>
<img src="../assets/images/tv.png"/>
<video class="video-play" 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="flex-fdc-jcc activity-container" 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 class="flex-aic-jcb more-container">
<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"
:list = "activityList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -54,7 +56,6 @@
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;">
......@@ -63,10 +64,9 @@
</div>
</div>
</div>
<div class="flex-fdc-jcc" style="padding: 30px 0;">
<div class="flex-fdc-jcc vehicle-container" 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 class="flex-aic-jcb more-container">
<div style="width: 1100px;text-align: center">
<div class="line-title"></div>
</div>
......@@ -170,38 +170,21 @@
</div>
</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 class="flex-aic-jcb more-container">
<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 flex-aic" v-for="item in newsList" :key="item.id" >
<img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
<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 class="ellipsis2">{{item.title}}</div>
<div class="desc ellipsis2">{{item.epitome}}</div>
<div>{{item.addTime}}</div>
</div>
</div>
</div>
......@@ -210,73 +193,7 @@
<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;
margin: 0 auto 20px auto;
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;
}
.swiper-container {
width: 1200px;
height: auto;
}
.gallery-top img{
width: 100%;
}
.swiper-wrapper-thu{
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img{
width: 100%;
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active{
border: 2px solid #1bbb9f;
padding: 5px;
}
</style>
<script>
import axios from 'axios'
import banner from "../components/banner"
......@@ -289,6 +206,7 @@ import 'swiper/dist/css/swiper.min.css';
export default {
transition: 'bounce',
components: {
menuModal,
footerModal,
......@@ -345,6 +263,53 @@ export default {
},
created(){
},
async asyncData({ env }) {
function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
function timestamp2Date(timestamp) {
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
function timestamp2DateNoTime(timestamp) {
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd');
}
// 首页活动
const { data } = await axios.get( env.host + '/api/uccn/summitActivity/app/unauth/home');
let cc = data.data;
cc.map(function(item){
item.startTime = timestamp2DateNoTime(item.startTime);
item.endTime = timestamp2DateNoTime(item.endTime);
});
//首页banner
let tempBannerData = await axios.get( env.host + '/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
let banner = tempBannerData.data.data;
//首页新闻
let newsData = await axios.get('https://xxtest.upyuns.com/api/uccn/article/app/unauth/homePage/1');
let news = newsData.data.data;
return { activityList: cc, bannerList: banner, newsList: news}
},
methods: {
/**
......@@ -438,12 +403,109 @@ export default {
swiper: galleryThumbs
}
});
},
async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data;
// return { users: cc}
},
}
}
</script>
<style>
.video-container{
width: 100%;
height: 100%;
position: relative;
background:url("../assets/images/1.jpg") no-repeat;
}
.video-play{
position: absolute;
}
.activity-container{
width: 100%;
height: 100%;
position: relative;
background:url("../assets/images/2.jpg") no-repeat;
}
.vehicle-container{
width: 100%;
height: 100%;
position: relative;
background:url("../assets/images/3.jpg") no-repeat;
}
.more-container{
position: relative;
margin-bottom: 25px;
}
.more-container a{
position: absolute;
right:0;
color: #999;
text-decoration: none;
}
.more-container a:hover{
right: 5px;
color: #1bbb9f;
box-shadow: 5px 5px 5px #888888;
}
.v-type-active{
background: #1bbb9f;
color: #fff;
}
.v-type{
padding: 10px;
display: inline-block;
cursor: pointer;
}
.v-type-ul{
width: 600px;
margin: 0 auto 20px auto;
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;
}
.swiper-container {
width: 1200px;
height: auto;
}
.gallery-top img{
width: 100%;
}
.swiper-wrapper-thu{
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img{
width: 100%;
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active{
border: 2px solid #1bbb9f;
padding: 5px;
}
</style>
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