Skip to content

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

车型

parent e0e1690c
Show whitespace changes
Inline Side-by-side
Showing with 554 additions and 53 deletions
assets/main.css
View file @ d0cd9eb0
...@@ -12,6 +12,43 @@ body { ...@@ -12,6 +12,43 @@ body {
} }
.bread-menu a{ .bread-menu a{
text-decoration: none; text-decoration: none;
color: #666;
}
.r-content{
margin-left: 20px;
}
.r-content h1{
font-size: 20px;
}
.r-content p{
padding: 5px 0;
padding: 5px 0;
color: #666;
font-size: 14px;
}
.r-cc{
background: #f6f6f6;
padding: 20px;
margin: 20px 0;
}
.content{
display: flex;
justify-content: space-between;
background: #fff;
padding: 20px;
}
.content-t{
/*border-bottom: 5px solid #1bbb9f;*/
width: 100px;
text-align: center;
padding: 10px;
margin-bottom: 20px;
font-weight: normal;
}
.bread-menu span{
color: #666;
} }
.bread-menu a:hover{ .bread-menu a:hover{
...@@ -73,11 +110,15 @@ h2{ ...@@ -73,11 +110,15 @@ h2{
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-jcb{
display: flex;
justify-content: space-between;
}
.wrap { .wrap {
width: 1200px; width: 1200px;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background: #fff; background: #f1f1f1;
padding: 20px; /*padding: 20px;*/
} }
.more-container a{ .more-container a{
position: absolute; position: absolute;
......
components/menu.vue
View file @ d0cd9eb0
<template> <template>
<div> <div>
<div style="width: 100%;width: 100%;position: fixed;top: 0;z-index: 1000;border-bottom: 1px solid #eee;"> <div style="width: 100%;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: 20px;"> <div class="flex-aic-jcb" style="width: 1200px; margin: 0 auto;font-size:12px;height: 25px;">
<div>您好！欢迎进入欣新房车集团官方网站</div> <div>您好！欢迎进入欣新房车集团官方网站</div>
<div>服务热线： 400-0369-369</div> <div>服务热线： 400-0369-369</div>
</div> </div>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
font-family: sans-serif; font-family: sans-serif;
position: fixed; position: fixed;
top:0; top:0;
padding: 15px 0; padding: 25px 0;
display: flex; display: flex;
align-items: center; align-items: center;
width: 1200px; width: 1200px;
......
pages/activityList/_id.vue
View file @ d0cd9eb0
...@@ -8,29 +8,27 @@ ...@@ -8,29 +8,27 @@
<nuxt-link to="/activity">欣新活动></nuxt-link> <nuxt-link to="/activity">欣新活动></nuxt-link>
<span>{{detail.title}}</span> <span>{{detail.title}}</span>
</div> </div>
<div style="display: flex;"> <div style="display: flex;padding: 20px;background: #fff">
<img :src="detail.banner" style="width: 50%;height: 100%;"/> <img :src="detail.banner" style="width: 50%;height: 100%;"/>
<div class="r-content"> <div class="r-content">
<h1>{{detail.title}}</h1> <h1>{{detail.title}}</h1>
<p>活动时间:{{detail.startTime}}~{{detail.endTime}}</p> <div class="r-cc">
<p>活动地点：{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</p> <p>活动人数<span style="margin-left: 20px;">{{detail.limitNum}}</span></p>
<div class="buttonDetails">报名参加</div> <p>活动时间<span style="margin-left: 20px;">{{detail.startTime}}~{{detail.endTime}}</span></p>
</div> <p style="ellipsis2">活动地点<span style="margin-left: 20px;">{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</span></p>
</div> </div>
<div class="flex-aic-jcb"> <div class="buttonDetails">报名参加</div>
<div style="width: 67%;"><h3 class="content-t">活动详情</h3></div>
<div class="content-r-link">
<h3>热门活动</h3>
</div> </div>
</div> </div>
<div class="content"> <div class="flex-jcb">
<div style="width: 67%;padding-top: 20px;"> <div style="width: 68%;background: #fff;margin: 20px 0;padding: 20px;">
<h3>活动详情</h3> <h3 class="content-t">活动详情</h3>
<div class="content-detail" v-html="detail.content"></div> <div class="models-details" v-html="detail.content"></div>
</div> </div>
<div class="content-r-link"> <div class="content-r-link" style="width: 31%;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t" style="border-bottom: none;margin-bottom: 0;">热门活动</h3>
<div class="content-detail" v-for="item in hotList" :key="item.id"> <div class="content-detail" v-for="item in hotList" :key="item.id">
<img :src="item.banner" style="width:100%;"/> <img :src="item.banner" :alt="item.title" style="width:100%;"/>
<div class="tc ellipsis cc-title">{{item.title}}</div> <div class="tc ellipsis cc-title">{{item.title}}</div>
<nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></nuxt-link> <nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></nuxt-link>
</div> </div>
...@@ -96,10 +94,11 @@ ...@@ -96,10 +94,11 @@
let detail = data.data; let detail = data.data;
detail.startTime = timestamp2Date(detail.startTime); detail.startTime = timestamp2Date(detail.startTime);
detail.endTime = timestamp2Date(detail.endTime); detail.endTime = timestamp2Date(detail.endTime);
detail.content =detail.content.replace(/<img/g,"<img style='width:100%'");
if (!detail) { if (!detail) {
return error({ message: 'detail not found', statusCode: 404 }) return error({ message: 'detail not found', statusCode: 404 })
} }
let tempBannerData = await axios.get( env.host + '/api/uccn/summitActivity/app/unauth/hot'); let tempBannerData = await axios.get( env.host + '/api/uccn/random/list/app/unauth/get?type=4');
let hot = tempBannerData.data.data; let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot} return {detail: detail, hotList: hot}
}, },
...@@ -147,12 +146,6 @@ ...@@ -147,12 +146,6 @@
} }
</script> </script>
<style scoped> <style scoped>
.r-content{
margin-left: 20px;
}
.r-content p{
padding: 5px 0;
}
.is-fixed{ .is-fixed{
position: fixed; position: fixed;
width: 1200px; width: 1200px;
...@@ -162,17 +155,6 @@ ...@@ -162,17 +155,6 @@
padding-left: 0; padding-left: 0;
top: 90px; top: 90px;
} }
.content{
display: flex;
justify-content: space-between;
}
.content-t{
border-bottom: 5px solid #1bbb9f;
width: 100px;
text-align: center;
padding: 10px;
font-weight: normal;
}
.tc { .tc {
text-align: center; text-align: center;
} }
......
pages/newsList/_id.vue
View file @ d0cd9eb0
...@@ -169,6 +169,7 @@ ...@@ -169,6 +169,7 @@
.content{ .content{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #fff;
} }
.content-t{ .content-t{
border-bottom: 5px solid #1bbb9f; border-bottom: 5px solid #1bbb9f;
......
pages/vehicle.vue
View file @ d0cd9eb0
...@@ -2,8 +2,39 @@ ...@@ -2,8 +2,39 @@
<div> <div>
<menu-modal></menu-modal> <menu-modal></menu-modal>
<div class="main-container"> <div class="main-container">
<div class="wrap"> <vehicle-banner
<p>这里是房车租赁</p> :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 class="wrap" style="background: #f1f1f1;">
<div class="total-div">
共{{totalCount}}款车型
</div>
<ul class="campsiteDetail clearfix">
<li v-for="item in dataDetail" :key="item.id" class="vehicle-item">
<img :src="item.coverPic" alt="房车租赁" style="width:30%;height:100%;" />
<div style="margin-left: 20px;">
<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
<div>{{item.keyword}}</div>
</div>
<nuxt-link :to="item.link">
<button class="buttonDetails">租车详情</button>
</nuxt-link>
</li>
</ul>
<div class="right">
<nuxt-child :key="$route.params.id" />
</div>
</div> </div>
</div> </div>
<footer-modal></footer-modal> <footer-modal></footer-modal>
...@@ -11,23 +42,172 @@ ...@@ -11,23 +42,172 @@
</template> </template>
<script> <script>
import axios from 'axios' import axios from "axios";
import menuModal from "../components/menu" import menuModal from "../components/menu";
import footerModal from "../components/footer" import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
export default { export default {
transition: 'bounce', transition: "bounce",
components: { components: {
menuModal, 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 () {
}, },
async asyncData() { // 点击下一页回调
const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1'); next () {
let cc = data.data;
return { users: cc}
}, },
head: { // 鼠标移入状态点回调
title: '房车租赁' changeBanner () {
},
bannerClick () {
},
/**
* 获取车型列表页banner
*/
async getBanner(){
//车型banner
let tempBannerData = await axios.get( 'https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=0&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> </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/vehicleList/_id.vue 0 → 100644
View file @ d0cd9eb0
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container" style="margin-top: 110px;">
<div class="wrap">
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/vehicle">房车租赁></nuxt-link>
<span>{{detail.name}}</span>
</div>
<div style="display: flex;padding: 20px;background: #fff">
<div style="width:50%">
<div class="gallery-top-box" style="width:100%">
<div class="swiper-container gallery-top" style="width: 100%" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in detail.pictureList" :key="item">
<img :src="item" style="width:100%">
</div>
</div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper swiper-wrapper-thu">
<div class="swiper-slide" v-for="(item,index) in detail.pictureList" :key="index" @click="changeImgIndex(index,detail.pictureList.length)">
<img :src="item" :class="preIndex==index?'active':''" alt="" style="width:100%">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="r-content">
<h1>{{detail.name}}</h1>
<div class="r-cc">
<p>{{detail.keyword}}</p>
<!--<p>活动时间<span style="margin-left: 20px;">{{detail.startTime}}~{{detail.endTime}}</span></p>-->
<!--<p style="ellipsis2">活动地点<span style="margin-left: 20px;">{{detail.province}}{{detail.city}}{{detail.town}}{{detail.address}}</span></p>-->
</div>
<div class="buttonDetails">预定用车</div>
</div>
</div>
<!--<div style="display: flex;background: #fff;">-->
<!--<div style="width:50%">-->
<!--<div class="gallery-top-box" style="width:100%">-->
<!--<div class="swiper-container gallery-top" ref="mySwiper">-->
<!--<div class="swiper-wrapper">-->
<!--<div class="swiper-slide" v-for="item in detail.pictureList" :key="item">-->
<!--<img :src="item" style="width:100%">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="gallery-thumbs-box">-->
<!--<div class="swiper-container gallery-thumbs">-->
<!--<div class="swiper-wrapper swiper-wrapper-thu">-->
<!--<div class="swiper-slide" v-for="(item,index) in detail.pictureList" :key="index" @click="changeImgIndex(index,detail.pictureList.length)">-->
<!--<img :src="item" :class="preIndex==index?'active':''" alt="" style="width:100%">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div style="margin-left:20px">-->
<!--<h1>{{detail.name}}</h1>-->
<!--<button class="buttonDetails">预定用车</button>-->
<!--</div>-->
<!--</div>-->
<div class="flex-jcb">
<div style="width: 68%;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t">房车详情</h3>
<div class="models-details" v-html="detail.modelsDetails"></div>
<h3 class="content-t">租车须知</h3>
<div class="models-details" v-html="notice[0].value"></div>
<h3 class="content-t">房车配置</h3>
<div class="kr-article-article" style="background: #fff;">
<div class="flex-aic modal-item" v-for="iitem in detail.modelParam" :key="iitem.id">
<div class="left-item ellipsis color-666">{{iitem.key}}</div>
<div class="right-item ellipsis color-666">{{iitem.val}}</div>
</div>
</div>
</div>
<div class="content-r-link" style="width: 31%;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t" style="border-bottom: none;margin-bottom: 0;">热门车型</h3>
<div class="content-detail" v-for="item in hotList" :key="item.id">
<img :src="item.coverPic" :alt="item.name" style="width:100%;"/>
<div class="tc ellipsis cc-title">{{item.name}}</div>
<nuxt-link :to="item.link"><div class="detail-new">租车详情</div></nuxt-link>
</div>
</div>
</div>
</div>
</div>
<footer-modal></footer-modal>
</div>
</template>
<script>
import axios from 'axios'
import menuModal from "../../components/menu"
import footerModal from "../../components/footer"
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
transition: 'bounce',
components: {
menuModal,
footerModal
},
data(){
return{
lengthPic:0,
preIndex: 0,//当前轮播选中图
}
},
validate ({ params }) {
console.log(params.id);
return !isNaN(+params.id)
},
async asyncData({ env, params, route, error}) {
const { data } = await axios.get( env.host + '/api/uccn/vehicleModel/app/unauth/detail/'+route.query.name);
let user = data.data;
data.data.modelsDetails = data.data.modelsDetails.replace(/<img/g,"<img style='width:100%'");
data.data.modelParam = JSON.parse(data.data.modelParam );
let pic = data.data.picture.split(",");
user.pictureList = pic;
user.pictureNum = pic.length;
console.log(user);
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get( env.host + '/api/uccn/random/list/app/unauth/get?type=1');
let hot = tempBannerData.data.data;
hot.map(function(item){
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]:'';
});
let noticeData = await axios.get( env.host + '/api/app/cofig/app/unauth/types?types=6');
let notice = noticeData.data.data;
return {detail: user, hotList: hot, notice: notice}
},
methods:{
changeImgIndex(index,length){
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
this.lengthPic = length;
console.log(this.lengthPic);
},
},
mounted(){
let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
on: {
slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1;
if(t.preIndex == t.detail.pictureNum){
t.preIndex = 0
}
},
},
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
thumbs: {
swiper: galleryThumbs
}
});
}
}
</script>
<style scoped>
.left-item{
width: 30%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
/*border-bottom: 1px solid #999;*/
padding: 5px 3px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
/*border-bottom: 1px solid #999;*/
padding: 5px 3px;
}
.modal-item{
border-top:1px solid #ccc;
}
.kr-article-article .modal-item:last-child{
border-bottom: 1px solid #ccc;
}
p img{
width: 100%;
}
.content-detail, .content-t{
margin-bottom: 20px;
}
.content-detail .cc-title{
padding: 5px;
}
.content-r-link{
margin-left: 3%;
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
.detail-new{
width: 156px;
padding: 5px 0;
cursor: pointer;
font-family: Microsoft YaHei;
color: #1bbb9f;
border: 1px solid #1bbb9f;
text-align: center;
margin: 0 auto;
}
.detail-new:hover{
color: #fff;
background: #1bbb9f;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.buttonDetails {
width: 156px;
padding: 10px 0;
background: #1bbb9f;
cursor: pointer;
font-family: Microsoft YaHei;
color: #fff;
text-align: center;
}
.models-details img{
width: 100% !important;
}
.swiper-container {
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>
pages/vehicleList/vehicleList.vue 0 → 100644
View file @ d0cd9eb0
<template>
<h2>Please select an user.</h2>
</template>
<script>
export default {
head: {
title: 'Please select an user'
}
}
</script>
<style scoped>
h2 {
text-align: center;
margin-top: 100px;
font-family: sans-serif;
}
</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