Skip to content

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

合并

parent 9059aaa7
Show whitespace changes
Inline Side-by-side
Showing with 407 additions and 68 deletions
assets/main.css
View file @ efc40e88
......@@ -114,6 +114,12 @@ h2{
display: flex;
justify-content: space-between;
}
.flex-aic-jca{
display: flex;
justify-content: space-around;
align-items: center;
}
.wrap {
width: 1200px;
margin: 0 auto 30px auto;
......@@ -137,7 +143,7 @@ h2{
background: #fff;
padding: 20px;
}
.new-item:hover, .activity-item:hover, .content-new:hover, .vehicle-item:hover{
.new-item:hover, .activity-item:hover, .content-new:hover, .vehicle-item:hover, .item-c:hover{
box-shadow: 0 0 5px #ccc;
}
.total-div{
......
components/banner.vue
View file @ efc40e88
......@@ -144,7 +144,8 @@
}
.status{
position:absolute;
bottom:20px;
/*top:90%;*/
bottom: 30px;
width:100%;
height:40px;
text-align:Center;
......@@ -154,6 +155,7 @@
.box{
position:relative;
height:500px;
min-height: 300px;
}
span{
display:block;
......
components/menu.vue
View file @ efc40e88
<template>
<div>
<div style="width: 100%;width: 100%;position: fixed;top: 0;z-index: 1000;border-bottom: 1px solid #eee;">
<div style="width: 100%;position: fixed;top: 0;z-index: 1000;border-bottom: 1px solid #eee;">
<div class="flex-aic-jcb" style="width: 1200px; margin: 0 auto;font-size:12px;height: 25px;">
<div>您好！欢迎进入欣新房车集团官方网站</div>
<div>服务热线： 400-0369-369</div>
......@@ -8,7 +8,15 @@
</div>
<div class="menu-container">
<div class="menu">
<nuxt-link to="/"><img :src="logo" style="width:200px;max-height: 100px;" alt="欣新房车，让生活更美好"></nuxt-link>
<nuxt-link to="/">
<div class="flex-aic" style="width: 135px;">
<img src="../assets/images/logo.png" style="width:35px;margin-right: 5px;" alt="欣新房车，让生活更美好">
<div>
<div class="logo-t">欣新房车</div>
<div class="logo-d">让生活更美好</div>
</div>
</div>
</nuxt-link>
<ul class="users">
<li v-for="menu in menuList" :key="menu.id">
<nuxt-link v-if="menu.link=='/'" :to="menu.link" :class="router== menu.link?'active':''">{{ menu.name }}</nuxt-link>
......@@ -18,7 +26,6 @@
</div>
</div>
</div>
</template>
<script>
......@@ -30,7 +37,6 @@
data () {
return {
router: "/",
logo: "https://xxfangche.com/upload/1/app/ab709954135a0f02a99d6a20aa95ea7.jpg",
menuList:[
{id: 1, name: "首页", link:"/"},
{id: 2, name: "房车租赁", link:"/vehicle"},
......@@ -60,11 +66,18 @@
display: flex;
justify-content: center;
}
.logo-t{
color: #333;
font-size: 16px;
}
.logo-d{
color: #9F9F9F;
font-size: 12px;
}
.menu {
font-family: sans-serif;
position: fixed;
top:0;
padding: 25px 0;
top:35px;
display: flex;
align-items: center;
width: 1200px;
......@@ -81,8 +94,6 @@
}
.users li a {
display: inline-block;
/* border: 1px #ddd solid; */
margin: 0 30px;
padding: 10px 0;
text-align: left;
......
nuxt.config.js
View file @ efc40e88
......@@ -23,7 +23,8 @@ module.exports = {
loading: '~/components/loading.vue',
plugins: [
{ src: '~plugins/muse-ui.js', ssr: true }
{ src: '~plugins/muse-ui.js', ssr: true },
{ src: '~plugins/filters.js', srr: false }
],
build: {
......
pages/aboutXx.vue
View file @ efc40e88
......@@ -2,32 +2,192 @@
<div>
<menu-modal></menu-modal>
<div class="main-container">
<div class="wrap">
<p>这里是关于欣新</p>
</div>
<vehicle-banner
:list = "bannerList"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
:fontSize="fontSize"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
import axios from "axios";
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
export default {
transition: 'bounce',
transition: "bounce",
components: {
menuModal,
footerModal
footerModal,
vehicleBanner
},
data() {
return {
totalCount: "",
dataDetail: [],
bannerList: [],//关于欣新banner列表
listQuery: {
type: "",
pageNo: 1,
pageSize: 6
},
store: "",
curId: 0,
items1: {},
curId1: 0,
looptime: 4000, // 循环时间
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
};
},
created() {
this.getAll();
this.getBanner();
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
},
methods: {
// 点击下一页回调
prev () {
},
// 点击下一页回调
next () {
},
// 鼠标移入状态点回调
changeBanner () {
},
// 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}
// },
head: {
title: '关于欣新'
bannerClick () {
},
/**
* 获取车型列表页banner
*/
async getBanner(){
//关于欣新banner
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=6&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
},
chooseSelect(e) {
console.log(e.target.value);
this.listQuery.type = e.target.value;
this.getAll();
},
async getAll() {
let {
data: { data }
} = await axios.get(
`https://dev.dfangche.com/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=1&limit=100`
);
// console.log(data);
this.totalCount = data.totalCount;
data.data.map(function(item){
// item.modelParam = JSON.parse( item.modelParam);
item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
item.link = encodeURI(item.link);
item.pictureList = item.picture.split(",");
item.coverPic = item.coverPic?item.coverPic: item.pictureList.length>0?item.pictureList[0]:'';
});
this.dataDetail = data.data;
// this.dataDetail = this.dataDetail.push(data.data);
},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
},
scrollHandle: function(e) {
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滚动条到底部的条件
if(scrollTop+windowHeight+0.7>scrollHeight){
//写后台加载数据的函数
//           console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
// this.listQuery.pageNo++;
// this.getAll();
}
}
},
};
</script>
<style scoped>
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.wrap {
width: 1200px;
margin: 0 auto;
background: #fff;
}
.banner {
/* background-color: #fff; */
text-align: center;
}
.banner h2 {
font-size: 20px;
font-weight: 700;
padding-top: 40px;
}
.banner h3 {
font-size: 16px;
padding-top: 20px;
font-weight: 400;
padding-bottom: 40px;
}
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
}
.campsiteDetail li {
list-style: none;
display: flex;
}
.toDetail {
font-size: 16px;
}
.buttonDetails {
width: 156px; /* 宽度 */
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
}
</style>
pages/activity.vue
View file @ efc40e88
......@@ -26,7 +26,7 @@
<img :src="item.banner" alt style="width:438px;height: 100%; max-height: 238px;" />
<div style="margin-left:20px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2>
<div>{{item.startTime}}~{{item.endTime}}</div>
<div>{{item.startTime | formatDate('yyyy-MM-dd hh:mm:ss')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</div>
<div class="ellipsis2">{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
</div>
</nuxt-link>
......@@ -122,8 +122,8 @@
// console.log(data);
this.totalCount = data.totalCount;
data.data.map(function (item) {
item.startTime = timestamp2Date(item.startTime);
item.endTime = timestamp2Date(item.endTime);
// item.startTime = timestamp2Date(item.startTime);
// item.endTime = timestamp2Date(item.endTime);
})
this.dataDetail = data.data;
// this.dataDetail = this.dataDetail.push(data.data);
......@@ -148,24 +148,6 @@
}
}
},
// head: {
// title: "房车营地"
// }
// async asyncData({store,listQuery}) {
// let [dataType,dataDetail] = await Promise.all([
// axios.get("https://dev.dfangche.com/api/campsite/campsiteTag/app/unauth/tags"),
// axios.get("https://dev.dfangche.com/api/uccn/app/unauth/campsite/shops")
// ])
// console.log(dataDetail.data.data.data);
// console.log(dataType.data.data,);
// return {
// dataType:dataType.data.data,
// dataDetail:dataDetail.data.data.data,
// data3:dataDetail.data.data
// };
// },
};
</script>
......
pages/index.vue
View file @ efc40e88
......@@ -26,8 +26,9 @@
</div>
</div>
<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">
<!--autoplay="autoplay"-->
<video class="video-play" width="320" height="240" controls muted>
<source src="https://xxtest.upyuns.com/image/test.mp4" type="video/mp4">
<source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
......@@ -63,6 +64,76 @@
<div class="line-title"></div>
</div>
</div>
<div class="flex-aic-jca min-win">
<div class="tour-t">
<div>
<div class="tour-t-s"> 01 </div>
<div class="tour-t-s-b"> </div>
</div>
<div style="margin-left: 10px;">
<div class="tour-t-s-t">主题线路</div>
<div class="ft-12">特色旅游线路</div>
<div class="ft-12">倡导全新旅程生活方式</div>
</div>
</div>
<div class="tour-t">
<div>
<div class="tour-t-s"> 02 </div>
<div class="tour-t-s-b"> </div>
</div>
<div style="margin-left: 10px;">
<div class="tour-t-s-t">全程服务</div>
<div class="ft-12">欣新领队全程陪同</div>
<div class="ft-12">个性化服务</div>
</div>
</div>
<div class="tour-t">
<div>
<div class="tour-t-s"> 03 </div>
<div class="tour-t-s-b"> </div>
</div>
<div style="margin-left: 10px;">
<div class="tour-t-s-t">详尽攻略</div>
<div class="ft-12">详尽旅游攻略</div>
<div class="ft-12">打造轻松的房车旅行</div>
</div>
</div>
<div class="tour-t">
<div>
<div class="tour-t-s"> 04 </div>
<div class="tour-t-s-b"> </div>
</div>
<div style="margin-left: 10px;">
<div class="tour-t-s-t">贴心售后</div>
<div class="ft-12">7X24小时在线咨询热线</div>
<div class="ft-12">全天为您服务</div>
</div>
</div>
</div>
<div style="position: relative;margin-top: 30px;">
<div style="display: flex;">
<div class="tour-t-l-01">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 518px;height: 348px;"/>
<div class="show-detail">查看详情</div>
</div>
<div style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/>
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/>
</div>
</div>
<div style="display: flex;">
<div style="width: 518px;justify-content: space-between; display: flex;">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/>
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/>
</div>
<div class="tour-b-r-03">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 518px;height: 348px;position: absolute; top: 165px;left: 527px;"/>
<div class="show-detail">
</div>
<div class="show-detail">查看详情</div>
</div>
</div>
</div>
</div>
<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>
......@@ -180,12 +251,14 @@
</div>
<div class="flex-aic-jcb-warp min-win">
<div class="item-c flex-aic" v-for="item in newsList" :key="item.id" >
<nuxt-link :to="'/newsList/'+item.id" class="flex-aic">
<img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
<div class="item-c-r">
<div class="ellipsis2">{{item.title}}</div>
<div class="ellipsis2 new-tt">{{item.title}}</div>
<div class="desc ellipsis2">{{item.epitome}}</div>
<div>{{item.addTime}}</div>
<div class="desc">{{item.addTime}}</div>
</div>
</nuxt-link>
</div>
</div>
</div>
......@@ -413,8 +486,15 @@ export default {
position: relative;
background:url("../assets/images/1.jpg") no-repeat;
}
.new-tt{
font-size: 14px;
color: #333;
}
.video-play{
position: absolute;
width: 770px;
height: 570px;
margin-top: -60px;
}
.activity-container{
width: 100%;
......@@ -422,12 +502,36 @@ export default {
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;
}
.tour-t-l-01, .tour-b-r-03{
cursor: pointer;
}
.tour-t-l-01:hover .show-detail{
display: block;
}
.tour-b-r-03:hover .show-detail{
display: block;
top: 165px;
right: 0px;
}
.tour-t-l-01 .show-detail, .tour-b-r-03 .show-detail{
display: none;
background: #888888;
opacity: 0.6;
width: 518px;
height: 348px;
position: absolute;
top: 0;
text-align: center;
line-height: 300px;
color: #000;
}
.more-container{
position: relative;
margin-bottom: 25px;
......@@ -447,10 +551,49 @@ export default {
justify-content: space-between;
display: flex;
}
.tour-t{
color: #666;
padding: 10px;
display: flex;
border: 1px solid #eee;
}
.tour-t:hover{
background: linear-gradient(to right, #5DE6AD , #3EC6AD);
color: #fff;
padding: 10px;
display: flex;
}
.tour-t:hover .tour-t-s{
color: #fff;
}
.tour-t:hover .tour-t-s-b{
border-bottom: 3px solid #fff;
}
.tour-t-s, .tour-t-s-b{
font-size: 54px;
color: #E1E1E1;
margin: 0 auto;
}
.tour-t-s-b{
border-bottom: 3px solid #e1e1e1;
width: 20px;
}
.tour-t:hover .tour-t-s-b{
color: #fff;
border-bottom: 3px solid #fff;
}
.tour-t-s-t{
font-size: 16px;
font-weight: 700;
margin-bottom: 22px;
}
.item-c{
/*width: 600px;*/
height: 150px;
padding: 0 10px;
/*height: 150px;*/
padding: 10px;
margin: 10px;
}
.title{
width: 1200px;
......@@ -461,15 +604,16 @@ export default {
align-items: center;
}
.item-c-img{
width: 100px;
height: 100px;
width: 180px;
height: 150px;
margin-right: 20px;
}
.item-c-r{
width: 400px;
width: 350px;
}
.item-c-r .desc{
font-size: 14px;
color: #666;
}
.line-title{
background: #1bbb9f;
......
pages/vehicle.vue
View file @ efc40e88
......@@ -99,7 +99,7 @@
*/
async getBanner(){
//车型banner
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=1&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
},
......
plugins/filters.js 0 → 100644
View file @ efc40e88
import Vue from 'vue'
// 时间格式化
export function formatDate (date, fmt) {
let newDate = new Date(date)
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': newDate.getMonth() + 1,
'd+': newDate.getDate(),
'h+': newDate.getHours(),
'm+': newDate.getMinutes(),
's+': newDate.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)
}
let filters = {
formatDate
}
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
export default filters
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