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> <template>
<div class="banner" style="width:100%;height: 400px;"> <div class="banner">
<div class="box"> <div class="box">
<ul> <ul>
<li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)"> <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> </li>
</ul> </ul>
<div class="status"> <div class="status">
<span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" <span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
@mouseenter="changeBanner(index)" @mouseenter="changeBanner(index)"
@mouseleave="startLoop" @mouseleave="startLoop"
>{{item.name}} >{{item.title}}
</span> </span>
</div> </div>
<!--<div class="btn">--> <!--<div class="btn">-->
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
} }
.box{ .box{
position:relative; position:relative;
height:100%; height:500px;
} }
span{ span{
display:block; display:block;
...@@ -177,8 +177,7 @@ ...@@ -177,8 +177,7 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.banner{ .banner{
width:400px; width:100%;
height:200px; max-height:500px;
overflow:hidden;
} }
</style> </style>
components/bannerActivity.vue
View file @ 013b9e8c
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<div class="box"> <div class="box">
<ul> <ul>
<li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)"> <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> </li>
</ul> </ul>
<div class="status"> <div class="status">
<div class="name-t" v-for="(item, index) in list" :key="item.id"> <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-20" v-if="index === current">{{item.title}}</div>
<div class="ft-14" v-if="index === current">活动时间：{{item.desc}}</div> <div class="ft-14" v-if="index === current">活动时间：{{item.startTime}}至{{item.endTime}}</div>
<div class="ft-14" v-if="index === current">活动地点：{{item.desc}}</div> <div class="ft-14" v-if="index === current">活动地点：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
...@@ -112,20 +112,21 @@ ...@@ -112,20 +112,21 @@
position:absolute; position:absolute;
left:0; left:0;
width:100%; width:100%;
height:100%; height:auto;
font-size:inherit; font-size:inherit;
color:#fff; color:#fff;
font-size:80px; font-size:80px;
text-align:center; text-align:center;
opacity:0; opacity:0;
transition: all 1.5s; transition: all 1.5s;
list-style: none;
} }
.active{ .active{
opacity:1; opacity:1;
transition: all 1.5s; transition: all 1.5s;
} }
ul{ ul{
height:100%; height:auto;
} }
.name-t div{ .name-t div{
/*font-size: 14px;*/ /*font-size: 14px;*/
...@@ -170,7 +171,7 @@ ...@@ -170,7 +171,7 @@
} }
.banner-active{ .banner-active{
width: 1200px; width: 1200px;
height: 250px; height: 312px;
overflow:hidden; /*overflow:hidden;*/
} }
</style> </style>
components/footer.vue
View file @ 013b9e8c
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<p class="ft-12 tc">欣新房车微信公众号</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/xxfczs.jpg" alt="欣新房车，让生活更美好"/>
<p class="ft-12 tc">欣新房车助手小程序</p> <p class="ft-12 tc">欣新房车助手小程序</p>
</div> </div>
<div class="footer-scan"> <div class="footer-scan">
......
nuxt.config.js
View file @ 013b9e8c
...@@ -20,7 +20,9 @@ module.exports = { ...@@ -20,7 +20,9 @@ module.exports = {
loading: '~/components/loading.vue', loading: '~/components/loading.vue',
plugins: [ 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: { build: {
......
package.json
View file @ 013b9e8c
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
"multer": "^1.3.0", "multer": "^1.3.0",
"muse-ui": "^2.1.0", "muse-ui": "^2.1.0",
"swiper": "^4.0.7", "swiper": "^4.0.7",
"vue-infinite-loading": "^2.4.4",
"vue-infinite-scroll": "^2.0.2",
"nuxt": "^1.0.0" "nuxt": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
......
pages/index.vue
View file @ 013b9e8c
<template> <template>
<div class="container"> <div class="container">
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<banner <banner
v-if="showBanner" v-if="showBanner"
:list = "list" :list = "bannerList"
:looptime="looptime" :looptime="looptime"
:width="width" :width="width"
:height="height" :height="height"
...@@ -17,30 +18,31 @@ ...@@ -17,30 +18,31 @@
@click="bannerClick" @click="bannerClick"
class="mb-50"> class="mb-50">
</banner> </banner>
<div class="flex-fdc-jcc"> <div class="flex-fdc-jcc video-container">
<div class="tc title">3分钟了解欣新房车</div> <div class="tc title">3分钟了解欣新房车</div>
<div class="flex-aic-jcb" style="margin-bottom: 25px;"> <div class="flex-aic-jcb" style="margin-bottom: 25px;">
<div style="width: 1100px;text-align: center"> <div style="width: 1100px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </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.mp4" type="video/mp4">
<source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg"> <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。 您的浏览器不支持 HTML5 video 标签。
</video> </video>
</div> </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="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 style="width: 1100px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
<nuxt-link to="/activity"><div>MORE</div></nuxt-link> <nuxt-link to="/activity"><div>MORE</div></nuxt-link>
</div> </div>
<banner-activity <banner-activity
:list = "list1" :list = "activityList"
:looptime="looptime" :looptime="looptime"
:width="width" :width="width"
:height="height" :height="height"
...@@ -54,7 +56,6 @@ ...@@ -54,7 +56,6 @@
class="mb-50"> class="mb-50">
</banner-activity> </banner-activity>
</div> </div>
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;"> <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="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" style="margin-bottom: 25px;">
...@@ -63,10 +64,9 @@ ...@@ -63,10 +64,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex-fdc-jcc vehicle-container" style="padding: 30px 0;">
<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="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 style="width: 1100px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
...@@ -170,38 +170,21 @@ ...@@ -170,38 +170,21 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;"> <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="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 style="width: 1100px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
<nuxt-link to="/news"><div>MORE</div></nuxt-link> <nuxt-link to="/news"><div>MORE</div></nuxt-link>
</div> </div>
<div class="flex-aic-jcb-warp min-win"> <div class="flex-aic-jcb-warp min-win">
<div class="item-c flex-aic"> <div class="item-c flex-aic" v-for="item in newsList" :key="item.id" >
<img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/> <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="item-c-r">
<div class="ellipsis2">标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好</div> <div class="ellipsis2">{{item.title}}</div>
<div class="desc ellipsis2">标题</div> <div class="desc ellipsis2">{{item.epitome}}</div>
<div>2018-02-09</div> <div>{{item.addTime}}</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>
...@@ -210,73 +193,7 @@ ...@@ -210,73 +193,7 @@
<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;
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> <script>
import axios from 'axios' import axios from 'axios'
import banner from "../components/banner" import banner from "../components/banner"
...@@ -289,6 +206,7 @@ import 'swiper/dist/css/swiper.min.css'; ...@@ -289,6 +206,7 @@ import 'swiper/dist/css/swiper.min.css';
export default { export default {
transition: 'bounce', transition: 'bounce',
components: { components: {
menuModal, menuModal,
footerModal, footerModal,
...@@ -345,6 +263,53 @@ export default { ...@@ -345,6 +263,53 @@ export default {
}, },
created(){ 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: { methods: {
/** /**
...@@ -438,12 +403,109 @@ export default { ...@@ -438,12 +403,109 @@ export default {
swiper: galleryThumbs 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> </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