Skip to content

V
vue-ssr
Commit 2ec0fb54 authored by guoyou's avatar guoyou
Browse files
Options

官网改版

parent 49261966
Show whitespace changes
Inline Side-by-side
Showing with 3569 additions and 2518 deletions
.nuxt/App.js
View file @ 2ec0fb54
......@@ -11,7 +11,7 @@ let layouts = {
let resolvedLayouts = {}
export default {
head: {"title":"欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"keywords","name":"keywords","content":"欣新房车，房车旅游，房车，房车租赁，房车销售，房车价格，房车之家，房车经济，房车高峰论坛"},{"hid":"description","name":"description","content":"欣新房车是一家专业从事房车销售，房车租赁，房车旅游，房车托管及房车产业配套与服务的免费异地取车异地还车已在全国各地举办多届房车经济峰会的集团股份公司"}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fimage\u002F1\u002Fapp\u002F5d9c62b7412efd926f70e0ed5efb19a.png"},{"rel":"stylesheet","href":"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:300,400,500,700,400italic"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fmain.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fmenu.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Ffooter.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Findex.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Ficonfont.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002FgoTop.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fswiper.min.css"},{"rel":"stylesheet","href":"https:\u002F\u002Fwww.xxfangche.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fel\u002Findex.css"}],"script":[{"src":"https:\u002F\u002Fdev.dfangche.com\u002Fh5\u002FappHtml\u002Fjs\u002Futil.js"}],"style":[]},
head: {"title":"欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"keywords","name":"keywords","content":"欣新房车，房车旅游，房车，房车租赁，房车销售，房车价格，房车之家，房车经济，房车高峰论坛"},{"hid":"description","name":"description","content":"欣新房车是一家专业从事房车销售，房车租赁，房车旅游，房车托管及房车产业配套与服务的免费异地取车异地还车已在全国各地举办多届房车经济峰会的集团股份公司"}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"https:\u002F\u002Fmgmt.dfangche.com\u002Fxxfccn\u002Fimage\u002F1\u002Fapp\u002F5d9c62b7412efd926f70e0ed5efb19a.png"},{"rel":"stylesheet","href":"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:300,400,500,700,400italic"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fmain.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fmenu.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Ffooter.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Findex.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Ficonfont.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002FgoTop.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fswiper.min.css"},{"rel":"stylesheet","href":"http:\u002F\u002Fxxtest.upyuns.com\u002Fxxfccn\u002Fcss\u002Fpc\u002Fel\u002Findex.css"}],"script":[{"src":"https:\u002F\u002Fdev.dfangche.com\u002Fh5\u002FappHtml\u002Fjs\u002Futil.js"}],"style":[]},
render(h, props) {
const loadingEl = h('nuxt-loading', { ref: 'loading' })
const layoutEl = h(this.layout || 'nuxt')
......
assets/footer.css
View file @ 2ec0fb54
.footer-container {
width: 100%;
height: 300px;
height: 230px;
position: relative;
background:url(https://mgmt.dfangche.com/xxfccn/image/home/background04.jpg) no-repeat;
/* background:url(https://mgmt.dfangche.com/xxfccn/image/home/background04.jpg) no-repeat; */
color: #fff;
margin-top: -5px;
background: #fff;
}
.footer {
font-family: sans-serif;
padding: 10px 0;
display: flex;
width: 1120px;
margin: 0 auto;
......
assets/index.css
View file @ 2ec0fb54
......@@ -156,9 +156,10 @@ li {
width: 49.5%;
float: left;
background: #fff;
padding-bottom: 10px;
padding-bottom: 17px;
transition: all 0.2s linear;
overflow: hidden;
border: 1px solid #eee;
}
.swiper-containerActivity .left:hover {
......@@ -210,6 +211,7 @@ li {
padding: 12px 10px;
margin-bottom: 10px;
background: #fff;
border: 1px solid #eee;
transition: all 0.2s linear;
}
......@@ -548,7 +550,7 @@ li {
transition: all .3s ease;
color: #fff;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .15);
background: rgba(27,187,159, 1);
background: rgba(27, 187, 159, 1);
}
.tourActive .tour-t-s,
......@@ -565,11 +567,11 @@ li {
.hot-car {
background: rgb(68, 68, 68);
position: relative;
background: rgb(245, 245, 245);
}
.embellish-1,
/* .embellish-1,
.embellish-2,
.embellish-3 {
border-radius: 40px;
......@@ -597,11 +599,8 @@ li {
height: 225px;
top: 97px;
right: -37px;
}
/* .hot-car .flex-aic-jcb a{
color: #fff;
} */
.hot-car .min-win .v-type-ul {
color: #fff;
width: 400px;
......@@ -624,14 +623,9 @@ li {
margin: 0;
}
/* .hot-car .min-win a {
position: absolute;
top: 0;
right: 0;
} */
.hot-car .min-win ul .hotActiveBtn {
background: #1bbb9f;
color: #fff !important;
}
.hot-car .min-win .left,
......@@ -650,6 +644,7 @@ li {
.hot-car .min-win .left>ul>li {
width: 49%;
background: #fff;
padding: 10px 0 10px 10px;
}
.left-content {
......@@ -666,12 +661,16 @@ li {
text-align: center;
line-height: 46px;
margin: 0 auto;
margin-top: 13px;
margin-bottom: 20.5px;
cursor: pointer;
}
.left-content li:last-child {
margin-bottom: 0;
}
.pic-show {
width: 481px;
width: 470px;
display: inline-block;
position: relative;
}
......@@ -727,6 +726,14 @@ li {
color: #333;
line-height: 30px;
padding: 30px 0;
transition: all 0.2s linear;
border-radius: 5px;
border-top: 5px solid transparent;
}
.flex-fdc-jcc .right ul li:hover {
box-shadow: 0px 20px 40px 0px rgba(102, 102, 102, 0.3);
border-top: 5px solid #1bbb9f;
}
.flex-fdc-jcc .right ul li>img {
......@@ -842,10 +849,11 @@ li {
.flex-aic-jcb-warp .left {
width: 540px;
height: 426px;
background: rgb(242, 242, 242);
background: #fff;
padding: 30px;
display: inline-block;
}
.flex-aic-jcb-warp .left h3 {
font-size: 16px;
margin-bottom: 20px;
......@@ -889,21 +897,24 @@ li {
.flex-aic-jcb-warp .right li a {
color: #666;
font-size: 14px;
font-size: 16px;
}
.flex-aic-jcb-warp .right li:hover {
background: #1bbb9f;
background: #fff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .15);
}
.flex-aic-jcb-warp .right li:hover a {
color: #fff;
font-size: 16px;
text-indent: 4px;
/* color: #fff; */
/* font-size: 16px;
text-indent: 4px; */
}
.flex-aic-jcb-warp .right li:hover span:nth-child(2){
.flex-aic-jcb-warp .right li:hover span:nth-child(2) {
text-indent: 15px;
}
.flex-aic-jcb-warp .right li:hover span:nth-child(1) {
width: 430px;
}
......@@ -912,37 +923,42 @@ li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 454px;
width: 445px;
margin-right: 13px;
}
.flex-aic-jcb-warp .right li span:nth-child(2) {
position: relative;
top: -17px;
float: right;
}
.city-covers {
width: 1120px;
margin: 0 auto;
position: absolute;
text-align: right;
/* width: 1120px;
margin: 0 auto; */
/* position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -565px;
margin-left: -565px; */
}
.introduce {
width: 465px;
background: rgba(0, 0, 0, .4);
background: #fff;
display: inline-block;
height: 380px;
margin-top: 13px;
padding: 30px;
/* height: 380px; */
/* margin-top: 13px; */
padding: 30px 30px 0 30px;
position: relative;
top: -156px;
/* right: 0; */
text-align: left;
}
.introduce h3 {
font-size: 16px;
margin-bottom: 20px;
color: #333;
}
.introduce>p:nth-child(2) {
......@@ -964,6 +980,7 @@ li {
.introduce ul li p:nth-child(1) {
font-size: 50px;
color: #333;
}
.introduce ul li p:nth-child(2) {
......@@ -980,9 +997,11 @@ li {
cursor: pointer;
margin-top: 10px;
}
.look-info:hover{
background: rgba(18,156,132) !important;
.look-info:hover {
background: rgba(18, 156, 132) !important;
}
.campsite {
width: 1120px;
margin: 0 auto;
......@@ -995,9 +1014,9 @@ li {
}
.campsite .left-title {
background: #333;
background: #1bbb9f;
color: #fff;
padding: 15px;
padding: 12px;
}
.campsite .left-title span:nth-child(2) {
......@@ -1009,12 +1028,14 @@ li {
/* padding: 15px; */
/* transition: all 0.2s linear; */
}
/* .campsite .left img:hover{
transform: scale(1.2);
} */
.campsite .left ul {
padding: 0 15px 20px 15px;
}
/* .head-img img{
transition: all 0.2s linear;;
}
......
assets/main.css
View file @ 2ec0fb54
......@@ -212,14 +212,13 @@ h2{
}
.more-container a{
position: absolute;
right:20px;
right:0;
color: #999;
text-decoration: none;
z-index: 8;
}
.more-container a:hover{
/* right: 30px; */
right: 0;
right: -30px;
color: #1bbb9f;
/* box-shadow: 5px 5px 5px #888888; */
}
......@@ -249,7 +248,8 @@ h2{
cursor: pointer;
}
.total-div{
margin: 20px 0;
/* margin: 20px 0; */
margin-bottom: 20px;
color: #666;
background: #fff;
font-size: 16px;
......
assets/menu.css
View file @ 2ec0fb54
......@@ -146,7 +146,7 @@
align-items: center;
width: 100%;
margin: 0 auto;
background-color: #333;
background-color: #fff;
height: 50px;
}
......@@ -154,6 +154,7 @@
list-style-type: none;
display: flex;
width: 1120px;
height: 40px;
justify-content: space-between;
margin: 0 auto;
}
......@@ -163,9 +164,9 @@
margin: 0 30px;
padding: 10px 0;
text-align: left;
color: #fff;
color: #333;
text-decoration: none;
border-bottom: 3px solid #333;
border-bottom: 3px solid #fff;
font-size: 16px;
}
......@@ -240,7 +241,7 @@ a {
right: 0;
top: 50%;
margin-top: -50px;
background: #333;
background: #1bbb9f;
}
......@@ -268,11 +269,11 @@ a {
}
.sidebar ul li span:hover {
background: #1bbb9f;
background: rgb(18, 156, 132) !important
}
.sidebar ul li:hover span {
background: #1bbb9f;
background: rgb(18, 156, 132) !important
}
.sidebar ul li:nth-child(1):hover p {
......@@ -286,7 +287,7 @@ a {
position: absolute;
left: -164px;
top: 0px;
background: #1bbb9f;
background: rgb(18, 156, 132) !important;
color: #fff;
padding: 0 50px;
display: none;
......@@ -301,7 +302,7 @@ a {
position: absolute;
left: -146px;
top: -70px;
background: #1bbb9f;
background: rgb(18, 156, 132) !important;
color: #fff;
width: 146px;
padding: 10px;
......@@ -334,7 +335,7 @@ a {
.sidebar ul li:nth-child(4) div {
display: none;
position: absolute;
background: #1bbb9f;
background: rgb(18, 156, 132) !important;
color: #fff;
left: -147px;
top: -62px;
......
components/footer.vue
View file @ 2ec0fb54
......@@ -85,7 +85,7 @@ export default {
</script>
<style>
.my-outbox {
width: 800px;
width: 915px;
display: inline-block;
color: #fff;
overflow: hidden;
......@@ -107,7 +107,7 @@ export default {
line-height: 35px;
}
.my-uname {
color: #ccc;
color: #666;
transition: all 0.2s linear;
}
.my-uname:hover {
......@@ -119,11 +119,12 @@ export default {
}
.foot-content {
width: 100%;
border-bottom: 1px solid #444;
border-bottom: 1px solid #eee;
}
.links-title {
display: inline-block;
width: 169px;
color: #666;
}
.links-title span:nth-child(1) {
font-weight: bold;
......@@ -145,7 +146,7 @@ export default {
display: inline-block;
}
.hot-tel p:nth-child(1) {
color: #999;
color: #666;
}
.hot-tel p:nth-child(2) {
display: inline-block;
......@@ -167,11 +168,11 @@ export default {
}
.bottom-main .adress p:nth-child(1) {
font-size: 16px;
color: #ccc;
color: #666;
}
.bottom-main .adress p:nth-child(2) {
font-size: 12px;
color: #999;
color: #666;
margin-top: 20px;
}
</style>
\ No newline at end of file
components/menu.vue
View file @ 2ec0fb54
<template>
<div>
<div class="menu-container">
<div style="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;background:#f5f5f5">
<div
class="flex-aic-jcb"
style="width: 1120px; margin: 0 auto;font-size:12px;height: 40px;color: #666;position: relative"
style="width: 1120px; margin: 0 auto;font-size:12px;height: 30px;color: #666;position: relative"
>
<div>您好！欢迎进入欣新房车集团官方网站</div>
<div class="ft-14" style="position: relative;right:20px;">
......
components/productList.vue 0 → 100644
View file @ 2ec0fb54
<template>
<div class="sidebar-list-a">
<h2>产品展示</h2>
<p>房车租赁</p>
<ul>
<li v-for="(item,index) in vehicleList" :key="index" @click="rentLink(item.id)">
<nuxt-link :to="'/vehicle?types='+item.id" :class='{activeList:activeRouter == "/vehicle?types="+item.id}'>{{item.name}}</nuxt-link>
</li>
</ul>
<p>房车旅游</p>
<ul>
<li v-for="(item,index) in tourList" :key="index" @click="links(item.id)">
<nuxt-link :to="'/tour?tagIds='+item.id" :class='{activeList:activeRouter == "/tour?tagIds="+item.id}'>{{item.name}}</nuxt-link>
</li>
</ul>
<p>房车营地</p>
<ul>
<li v-for="(item,index) in campsiteList" :key="index" @click="campsiteLink(item.id)">
<nuxt-link :to="'/campsite?types='+item.id" :class='{activeList:activeRouter == "/campsite?types="+item.id}'>{{item.name}}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import axios from '../plugins/axios'
export default {
created() {
this.activeRouter = this.$route.fullPath
this.getType()
this.getVehicle()
this.getCampsite()
},
watch: {
$route(val,from) {
console.log(val);
console.log('新'+val.fullPath);
console.log('旧'+from.fullPath);
this.activeRouter = val.fullPath || ''
}
},
props: { productType: String },
data() {
return {
activeRouter:{},
tourList: [],
vehicleList: [],
campsiteList: []
}
},
methods: {
//旅游列表
async getType() {
const {
data: { data }
} = await axios.get('/api/uccn/app/unauth/tour/tagList')
data.unshift({ id: '', name: '全部' })
this.tourList = data
},
//房车租赁
async getVehicle() {
const {
data: { data }
} = await axios.get('/vehicle/cata/app/unauth/types')
data.unshift({ id: '', name: '全部' })
this.vehicleList = data
},
//房车营地
async getCampsite() {
const {
data: { data }
} = await axios.get('/api/campsite/campsiteTag/app/unauth/tags')
data.unshift({ id: '', name: '全部' })
this.campsiteList = data
},
//更新页面
links(val) {
this.$emit('fatherMethod',val);
},
rentLink(val){
this.$emit('fatherMethod',val);
},
campsiteLink(val){
this.$emit('fatherMethod',val);
}
}
}
</script>
<style>
.sidebar-list-a {
padding: 15px 0;
}
.sidebar-list-a h2 {
font-size: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.sidebar-list-a p {
font-size: 16px;
color: #333;
margin: 20px 0;
font-weight: bold;
}
.sidebar-list-a ul {
padding-left: 0;
}
.sidebar-list-a ul li {
margin-top: 15px;
}
.sidebar-list-a ul li a {
display: block;
}
.sidebar-list-a ul li a:hover {
color: #1bbb9f;
}
.activeList{
color: #1bbb9f
}
</style>
\ No newline at end of file
nuxt.config.js
View file @ 2ec0fb54
......@@ -10,22 +10,34 @@ module.exports = {
{ hid: 'description', name: 'description', content: '欣新房车是一家专业从事房车销售，房车租赁，房车旅游，房车托管及房车产业配套与服务的免费异地取车异地还车已在全国各地举办多届房车经济峰会的集团股份公司' }
],
link: [
// { rel: 'icon', type: 'image/x-icon', href: 'https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png' },
// { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/main.css' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/menu.css' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/footer.css' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/index.css' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/iconfont.css' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/goTop.css' },
// { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/swiper.min.css' },
// { rel: 'stylesheet', href: 'https://www.xxfangche.com/xxfccn/css/pc/el/index.css' }
{ rel: 'icon', type: 'image/x-icon', href: 'https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/main.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/menu.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/footer.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/index.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/iconfont.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/goTop.css' },
{ rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/swiper.min.css' },
{ rel: 'stylesheet', href: 'https://www.xxfangche.com/xxfccn/css/pc/el/index.css' }
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/main.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/menu.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/footer.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/index.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/iconfont.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/goTop.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/swiper.min.css' },
{ rel: 'stylesheet', href: 'http://xxtest.upyuns.com/xxfccn/css/pc/el/index.css' }
],
// http://xxtest.upyuns.com
//https://mgmt.dfangche.com/xxfccn
script: [
{ src: 'https://dev.dfangche.com/h5/appHtml/js/util.js' },
],
},
// css: ['~/assets/index.css','~/assets/menu.css','~/assets/main.css','~/assets/font/iconfont.css'],
// css: ['~/assets/index.css','~/assets/menu.css','~/assets/main.css','~/assets/font/iconfont.css','~/assets/footer.css'],
loading: '~/components/loading.vue',
plugins: [
......
pages/activity.vue
View file @ 2ec0fb54
......@@ -3,7 +3,7 @@
<menu-modal></menu-modal>
<div class="main-container">
<vehicle-banner
:list = "bannerList"
:list="bannerList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -14,15 +14,30 @@
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
class="mb-50"
></vehicle-banner>
<div class="wrap" style="background: #f1f1f1;">
<div class="bread-menu" style="margin-top: 20px;padding: 0">
<nuxt-link to="/">首页></nuxt-link>
<span>欣新活动</span>
</div>
<div class="main-content">
<div class="journalism">
<h3>新闻资讯</h3>
<ul>
<li>
<nuxt-link to="/news" style="color:#1bbb9f">欣新活动</nuxt-link>
</li>
<li>
<nuxt-link to="/activity">新闻动态</nuxt-link>
</li>
</ul>
</div>
<div style="width:917px">
<!-- <div class="total-div">共{{totalCount}}个活动</div> -->
<div class="total-div">
共{{totalCount}}个活动
<news />
</div>
<ul class="campsiteDetail clearfix">
<li v-for="item in dataDetail" :key="item.id" class="activity-item">
......@@ -30,18 +45,33 @@
<img :src="item.banner" alt style="width:438px;height: 243px;" />
<div style="margin-left:20px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2>
<div class="activity-time">{{item.startTime | formatDate('yyyy-MM-dd hh:mm')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm')}}</div>
<div class="ellipsis2 activity-addr"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY3NjhDRTNDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY3NjhDRTJDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmVjOTJkZGFkLWZlMWUtODE0Zi05NDNmLTQwNjFjZTI4MjZhMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7vvm3YAAABgklEQVR42qyUsUvDQBSHTdEapSBS0YJLBnURp4CTiwgKEhQKRbq4iosoTi62mZ0cqiBODiqCTjEgRdwcgn+AqLub0EXEivE7yHAeuTNCDz4eL/fe7+5e7p0Vx3FXJ0e37/upE57njWK2YBkc+IZnuIT9IAje0vJyGrEq5gm2YUwsDHmYhF14IWY+kyCBK5hT6DecbBCuiZ01ChIwhDnOWi44I6dg2uEmFJRvRzANM3ClzI3AurqKPJYU/4Tir0knuMc0YU6KKcOeTnBC8c9lB/EY0QtFcKpWq9k6wR7FL6XUbljx+7h6H7oavir+DjsqSUcWJ9gw5ag7vIVVyR+HR4RCbC8sgq3kNE1/uZFyxAGoJsW3U+YbWkGKHmEO/9G6B+Q8/NV64i6GGcTCpNfNrceKn5gK3BnExFwliTULcqfyrut+FYvFskZUfPMQe8/62rQFjuO0RCJE0lxkEhPD4oH9dZm5pG3lwRB/+SZxFxBrmQpr1ev1jr7YObkPOzF+BBgAae5of8BDmoUAAAAASUVORK5CYII=" alt="欣新房车，让生活更美好"/>{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
<div
class="activity-time"
>{{item.startTime | formatDate('yyyy-MM-dd hh:mm')}}~{{item.endTime | formatDate('yyyy-MM-dd hh:mm')}}</div>
<div class="ellipsis2 activity-addr">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY3NjhDRTNDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY3NjhDRTJDQTA4MTFFOUJDNEZGREQ4NkYzODA4MTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmVjOTJkZGFkLWZlMWUtODE0Zi05NDNmLTQwNjFjZTI4MjZhMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7vvm3YAAABgklEQVR42qyUsUvDQBSHTdEapSBS0YJLBnURp4CTiwgKEhQKRbq4iosoTi62mZ0cqiBODiqCTjEgRdwcgn+AqLub0EXEivE7yHAeuTNCDz4eL/fe7+5e7p0Vx3FXJ0e37/upE57njWK2YBkc+IZnuIT9IAje0vJyGrEq5gm2YUwsDHmYhF14IWY+kyCBK5hT6DecbBCuiZ01ChIwhDnOWi44I6dg2uEmFJRvRzANM3ClzI3AurqKPJYU/4Tir0knuMc0YU6KKcOeTnBC8c9lB/EY0QtFcKpWq9k6wR7FL6XUbljx+7h6H7oavir+DjsqSUcWJ9gw5ag7vIVVyR+HR4RCbC8sgq3kNE1/uZFyxAGoJsW3U+YbWkGKHmEO/9G6B+Q8/NV64i6GGcTCpNfNrceKn5gK3BnExFwliTULcqfyrut+FYvFskZUfPMQe8/62rQFjuO0RCJE0lxkEhPD4oH9dZm5pG3lwRB/+SZxFxBrmQpr1ev1jr7YObkPOzF+BBgAae5of8BDmoUAAAAASUVORK5CYII="
alt="欣新房车，让生活更美好"
/>
{{item.province}}{{item.city}}{{item.town}}{{item.address}}
</div>
</div>
</nuxt-link>
</li>
</ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
</div>
</div>
<div class="pagination-container" style="text-align:right">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
></el-pagination>
</div>
<div class="right">
<nuxt-child :key="$route.params.id" />
......@@ -54,167 +84,210 @@
</template>
<script>
import axios from '../plugins/axios'
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
import GoTop from "../components/goTop";
export default {
transition: "bounce",
import axios from '../plugins/axios'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
import news from '../components/news'
export default {
transition: 'bounce',
components: {
GoTop,
menuModal,
footerModal,
vehicleBanner
vehicleBanner,
news
},
data() {
return {
dataType: [],
totalCount: 0,
dataDetail: [],
bannerList: [],//车型banner列表
bannerList: [], //车型banner列表
listQuery: {
type: "",
type: '',
page: 1,
limit: 10
},
store: "",
store: '',
curId: 0,
items1: {},
curId1: 0,
looptime: 4000, // 循环时间
width: 400,
height:200,
height: 200,
background: 'red',
color: '#fff',
fontSize: '70px',
};
fontSize: '70px'
}
},
created() {
this.getAll();
this.getBanner();
this.getAll()
this.getBanner()
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
},
methods: {
// 点击下一页回调
prev () {
},
prev() {},
// 点击下一页回调
next () {
},
next() {},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
changeBanner() {},
bannerClick() {},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
this.listQuery.page = val
this.getAll()
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
this.listQuery.limit = val
this.listQuery.page = 1
this.getAll()
},
/**
* 获取车型列表页banner
*/
async getBanner(){
async getBanner() {
//活动banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=4&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
let tempBannerData = await axios.get(
'/api/app/banner/app/unauth/findBannerlist?type=4&platform=1'
)
let banner = tempBannerData.data.data
this.bannerList = banner
},
chooseSelect(e) {
this.listQuery.type = e.target.value;
this.getAll();
this.listQuery.type = e.target.value
this.getAll()
},
async getAll() {
let {
data: { data }
} = await axios.get( `/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
} = await axios.get(
`/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.page}&limit=${this.listQuery.limit}`
)
// console.log(data);
this.totalCount = data.totalCount;
this.dataDetail = data.data;
},
this.totalCount = data.totalCount
this.dataDetail = data.data
}
},
async asyncData() {
let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/5');
let head = headData.data.data;
return { headList : head}
let headData = await axios.get(
'/api/uccn/seo/app/unauth/officialWebsite/5'
)
let head = headData.data.data
return { headList: head }
},
head () {
head() {
return {
title: this.headList.title,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.headList.keywords },
{ hid: 'description', name: 'description', content: this.headList.description }
],
{
hid: 'keywords',
name: 'keywords',
content: this.headList.keywords
},
{
hid: 'description',
name: 'description',
content: this.headList.description
}
]
}
};
}
}
</script>
<style scoped>
.active-r{
.main-content {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
margin-top: 30px;
}
.journalism {
width: 190px;
background: #fff;
padding: 15px 0;
text-align: center;
height: 225px;
}
.journalism h3 {
font-size: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
color: #333;
}
.clearfix:after {
font-weight: normal;
}
.journalism ul {
margin: 40px 0;
padding: 0;
}
.journalism ul li {
margin-bottom: 40px;
}
.journalism ul li a:hover {
color: #1bbb9f;
}
.active-r {
color: #333;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.activity-time, .activity-addr{
}
.activity-time,
.activity-addr {
color: #666;
font-size: 14px;
margin: 20px 0;
display: flex;
align-items: center;
}
.clearfix {
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.banner {
}
.banner {
text-align: center;
}
}
.banner h2 {
.banner h2 {
font-size: 20px;
font-weight: 700;
padding-top: 40px;
}
}
.banner h3 {
.banner h3 {
font-size: 16px;
padding-top: 20px;
font-weight: 400;
padding-bottom: 40px;
}
}
.campsiteDetail {
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
}
}
.campsiteDetail li a {
.campsiteDetail li a {
padding: 0;
margin: 0;
list-style: none;
display: flex;
text-decoration: none;
}
}
.toDetail {
.toDetail {
font-size: 16px;
}
}
.buttonDetails {
.buttonDetails {
width: 156px; /* 宽度 */
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
......@@ -224,5 +297,5 @@
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
}
}
</style>
pages/campsite.vue
View file @ 2ec0fb54
......@@ -3,7 +3,7 @@
<menu-modal @goCam="goCam"></menu-modal>
<div class="main-container">
<vehicle-banner
:list = "bannerList"
:list="bannerList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -14,45 +14,67 @@
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
class="mb-50"
></vehicle-banner>
<div class="wrap">
<div class="bread-menu" style="margin-top: 20px;padding: 0">
<nuxt-link to="/">首页></nuxt-link>
<span>房车营地</span>
</div>
<div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
<div class="main-content">
<div class="produc-list">
<producList productType="1" @fatherMethod="fatherMethod" ref="producFex"/>
</div>
<div style="width:882px">
<div
class="clearfix total-div"
style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px"
>
共{{totalCount}}个房车营地
<el-select
<!-- <el-select
style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
value-key="id"
v-model="typeList"
placeholder="营地类型"
@change="chooseSelect()">
<el-option
v-for="item in dataType"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
@change="chooseSelect()"
>
<el-option v-for="item in dataType" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> -->
</div>
<h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
<ul class="campsiteDetail clearfix" v-if="!dataNull">
<li v-for="(item,idx) in dataDetail" :key="idx">
<nuxt-link :to="item.link" class="vehicle-item">
<img :src="item.logo" alt style="width:100%;height:223px" />
<h2 style="font-size:20px;margin-top:22px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.name }}</h2>
<button class="buttonDetails">营地详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
<img :src="item.logo" alt style="width:256px;height:190px" />
<h2 class="campsite-title"
>{{ item.name }}</h2>
<button class="buttonDetails">
营地详情
<img
style="position: absolute;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/>
</button>
</nuxt-link>
</li>
</ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
</div>
</div>
<div class="pagination-container" style="text-align:right">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[9,18,24, 45]" :page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
:page-sizes="[9,18,24, 45]"
:page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
></el-pagination>
</div>
</div>
</div>
......@@ -62,86 +84,95 @@
</template>
<script>
import axios from '../plugins/axios';
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
import GoTop from "../components/goTop";
import axios from '../plugins/axios'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
import producList from '../components/productList'
export default {
transition: "bounce",
transition: 'bounce',
components: {
GoTop,
menuModal,
footerModal,
vehicleBanner
vehicleBanner,
producList
},
data() {
return {
typeList:"营地类型",
typeList: '营地类型',
showBanner: !0,
looptime: 4000, // 循环时间
typeId: "营地类型",
typeId: '营地类型',
dataType: [],
totalCount: 0,
dataDetail: [],
width: 400,
height:200,
height: 200,
background: 'red',
color: '#fff',
fontSize: '70px',
listQuery: {
type: "",
type: '',
pageNo: 1,
pageSize: 9
},
store: "",
dataNull:false
};
store: '',
dataNull: false
}
},
created() {
this.listQuery.type = this.$route.query.types;
this.getType();
this.getAll();
this.listQuery.type = this.$route.query.types
this.getType()
this.getAll()
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
},
methods: {
fatherMethod(val) {
this.listQuery.type = val
console.log(val);
this.getAll()
},
chooseSelect() {
console.log(this.typeList);
this.listQuery.type = this.typeList;
this.$router.push({ path: "/campsite", query: { types: this.listQuery.type } });
this.getAll();
this.listQuery.type = this.typeList
this.$router.push({
path: '/campsite',
query: { types: this.listQuery.type }
})
this.getAll()
},
goCam(e){
this.listQuery.type = e;
for(var i = 0;i<this.dataType.length;i++){
if(e == this.dataType[i].id){
goCam(e) {
this.listQuery.type = e
for (var i = 0; i < this.dataType.length; i++) {
if (e == this.dataType[i].id) {
this.typeList = this.dataType[i].name
}
}
this.getAll();
this.getAll()
// this.typeList="营地类型";
},
handleCurrentChange(val) {
this.listQuery.pageNo = val;
this.getAll();
this.listQuery.pageNo = val
this.getAll()
},
handleSizeChange(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getAll();
this.listQuery.pageSize = val
this.listQuery.pageNo = 1
this.getAll()
},
async getType() {
const {
data: { data }
} = await axios.get("/api/campsite/campsiteTag/app/unauth/tags");
data.unshift({id:"",name:'全部'})
this.dataType = data;
for(var i = 0;i<this.dataType.length;i++){
if(this.$route.query.types == this.dataType[i].id){
} = await axios.get('/api/campsite/campsiteTag/app/unauth/tags')
data.unshift({ id: '', name: '全部' })
this.dataType = data
for (var i = 0; i < this.dataType.length; i++) {
if (this.$route.query.types == this.dataType[i].id) {
this.typeList = this.dataType[i].name
}
}
......@@ -149,74 +180,110 @@ export default {
async getAll() {
let {
data: { data }
} = await axios.get(`/api/uccn/app/unauth/campsite/shops?type=${this.listQuery.type}&pageNo=${this.listQuery.pageNo}&pageSize=${this.listQuery.pageSize}`);
data.data.map(function(item){
item.link = encodeURI('/campsiteDetails/' + item.id);
item.link = encodeURI(item.link);
});
if(!data.data.length == 0){
this.totalCount = data.totalCount;
this.dataDetail = data.data;
} = await axios.get(
`/api/uccn/app/unauth/campsite/shops?type=${this.listQuery.type}&pageNo=${this.listQuery.pageNo}&pageSize=${this.listQuery.pageSize}`
)
data.data.map(function(item) {
item.link = encodeURI('/campsiteDetails/' + item.id)
item.link = encodeURI(item.link)
})
if (!data.data.length == 0) {
this.totalCount = data.totalCount
this.dataDetail = data.data
this.dataNull = false
}else{
this.totalCount = 0;
this.dataDetail = data.data;
} else {
this.totalCount = 0
this.dataDetail = data.data
this.dataNull = true
}
},
// 点击下一页回调
prev () {
},
prev() {},
// 点击下一页回调
next () {
},
next() {},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
changeBanner() {},
bannerClick() {},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
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);
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();
              }  
}
}
},
async asyncData() {
const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=2&platform=1');
let cc = data.data;
let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/4');
let head = headData.data.data;
return { bannerList: cc, headList : head}
const { data } = await axios.get(
'/api/app/banner/app/unauth/findBannerlist?type=2&platform=1'
)
let cc = data.data
let headData = await axios.get(
'/api/uccn/seo/app/unauth/officialWebsite/4'
)
let head = headData.data.data
return { bannerList: cc, headList: head }
},
head () {
head() {
return {
title: this.headList.title,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.headList.keywords },
{ hid: 'description', name: 'description', content: this.headList.description }
],
{
hid: 'keywords',
name: 'keywords',
content: this.headList.keywords
},
{
hid: 'description',
name: 'description',
content: this.headList.description
}
]
}
}
};
}
</script>
<style scoped>
.campsite-title{
font-size:20px;margin-top:22px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
height: 52px;
}
.campsiteDetail li{
width: 283px;
margin-right: 17px;
}
.produc-list {
background: #fff;
width: 219px;
text-align: center;
}
.main-content {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
......@@ -239,20 +306,22 @@ export default {
flex-wrap: wrap;
}
.campsiteDetail li a{
.campsiteDetail li a {
padding: 14px;
margin-bottom: 20px;
list-style: none;
width: 360px;
width: 100%;
height: 372px;
float: left;
margin-right: 20px;
background-color: #fff
background-color: #fff;
}
.campsiteDetail li:nth-child(3n) a{
.campsiteDetail li:nth-child(3n) a {
margin-right: 0;
}
.campsiteDetail li:nth-child(3n+0) { margin-right:0px; }
.campsiteDetail li:nth-child(3n + 0) {
margin-right: 0px;
}
.toDetail {
font-size: 16px;
}
......@@ -266,6 +335,6 @@ export default {
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin: 27px 14px 0px 202px
margin: 27px 14px 0px 126px;
}
</style>
pages/campsiteDetails/_id.vue
View file @ 2ec0fb54
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container" >
<div class="main-container">
<div class="wrap">
<div class="bread-menu" style="margin-top: 20px;">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/campsite">房车营地></nuxt-link>
<span>{{detail.name}}</span>
</div>
<div class="clearfix" style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:522px">
<div
class="clearfix"
style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:522px"
>
<div style="float:left;width:544px;margin-right:10px">
<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,idx) in detail.pictureList"
:key="idx"
>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,idx) in detail.pictureList" :key="idx">
<img :src="item.imgUrl" style="width:100%;height:374px" />
</div>
</div>
......@@ -30,7 +29,6 @@
v-for="(item,index) in detail.pictureList"
:key="index"
@click="changeImgIndex(index,detail.pictureList.length)"
>
<img
:src="item.imgUrl"
......@@ -46,13 +44,19 @@
</div>
<div style="float:left;padding-left:20px;width:495px">
<h2 style="font-size:20px;font-weight:bold">{{detail.name}}</h2>
<div style="font-weight: 400;font-size:16px;margin:30px 0 210px 0"><img style="vertical-align:middle" src="../../assets/images/local.png" alt="欣新房车，让生活更美好"/>{{detail.address}}</div>
<div style="" class="clearfix">
<div style="font-weight: 400;font-size:16px;margin:30px 0 210px 0">
<img style="vertical-align:middle" src="../../assets/images/local.png" alt="欣新房车，让生活更美好" />
{{detail.address}}
</div>
<div style class="clearfix">
<button class="buttonDetails" @click="visiblePic()" style="float:left;margin-right:30px">预定营地</button>
<div style="float:left" class="clearfix" v-if="visible">
<div style="float:left;width:114px;margin-right:30px;text-align:center">
<div style="background:#FFF5E6;border:2px solid #FFB74B">
<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" style="width: 90px;margin:12px 10px 8px 10px;"/>
<img
src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png"
style="width: 90px;margin:12px 10px 8px 10px;"
/>
<div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">滴房车App</div>
</div>
<div style="margin-top:8px;" class="scan-notice-c">
......@@ -64,7 +68,7 @@
<div style="float:left;width:114px;text-align:center">
<div style="background:#FFF5E6;border:2px solid #FFB74B">
<img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;"/>
<img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;" />
<div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">欣新助手小程序</div>
</div>
<div style="margin-top:8px;" class="scan-notice-c">
......@@ -76,30 +80,59 @@
</div>
</div>
</div>
<div class="clearfix" style="margin-top:40px">
<div style="float:left;width:800px;background-color:#fff;padding:31px 50px;">
<h3 style="font-size:16px;font-weight:bold;margin-bottom:20px">营地详情</h3>
<div v-html="detail.content">
</div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">配套设施收费</h3>
<div v-html="detail.configure">
</div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">预定须知</h3>
<div v-html="notice[0].value">
</div>
<div class="clearfix" style="margin-top:40px;display: flex;justify-content: space-between;width: 1135px;">
<!-- 锚链接 -->
<ul class="sidebar-list" :class="barFixed?'isSidebar':''">
<li>
<p></p>
<p @click="goAnchor('1')">营地详情</p>
</li>
<li :class="{isFex1:fex1}">
<p></p>
<p @click="goAnchor('2')">配套设施/收费</p>
</li>
<li :class="{isFex2:fex2}">
<p></p>
<p @click="goAnchor('3')">预定须知</p>
</li>
</ul>
<div :class="barFixed?'empty':''" style="display:none"></div>
<!-- 主体内容 -->
<div style="float:left;width:682px;background-color:#fff;padding:31px 50px;">
<h3 style="font-size:16px;font-weight:bold;margin-bottom:20px" ref="fex1">营地详情</h3>
<div v-html="detail.content"></div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold" ref="fex2">配套设施收费</h3>
<div v-html="detail.configure"></div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold" ref="fex3">预定须知</h3>
<div v-html="notice[0].value"></div>
</div>
<div id = "fixContainer" class="hot-r-campsite" style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
<!-- 热门推荐 -->
<div
id="fixContainer"
class="hot-r-campsite"
style="float:left;width:220px;background-color:#fff;text-align:center"
>
<div id="campsiteHotId" :class="barFixed?'isFixed':''">
<h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门营地</h3>
<div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:25px 60px 0 60px">
<img :src="item.imgUrl" alt="" style="width:180px;height:135px">
<h5 style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;">{{item.name}}</h5>
<nuxt-link :to="item.link"><button class="buttonDetail" style="font-size:14px;margin-bottom:57px" >营地详情</button></nuxt-link>
<h3
style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px"
>热门营地</h3>
<div
v-for="(item,index) in hotList"
:key="index"
style="width:100%;padding: 25px 25px 0px;"
>
<img :src="item.imgUrl" alt style="width:180px;height:135px" />
<h5
style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;"
>{{item.name}}</h5>
<nuxt-link :to="item.link">
<button class="buttonDetail" style="font-size:14px;margin-bottom:57px">营地详情</button>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</div>
<go-top></go-top>
......@@ -109,13 +142,13 @@
<script>
import axios from '../../plugins/axios'
import menuModal from "../../components/menu";
import footerModal from "../../components/footer";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import GoTop from "../../components/goTop";
import menuModal from '../../components/menu'
import footerModal from '../../components/footer'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import GoTop from '../../components/goTop'
export default {
transition: "bounce",
transition: 'bounce',
components: {
GoTop,
menuModal,
......@@ -123,7 +156,8 @@ export default {
},
created() {
if (typeof window !== 'undefined') {
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('scroll', this.handleScroll)
window.addEventListener('scroll', this.slideScroll)
}
},
data() {
......@@ -131,78 +165,121 @@ export default {
lengthPic: 0,
preIndex: 0, //当前轮播选中图
visible: false,
barFixed: false
};
barFixed: false,
fex1: false,
fex2: false
}
},
validate({ params }) {
return !isNaN(+params.id);
return !isNaN(+params.id)
},
async asyncData({ env, params, route, error}) {
const { data } = await axios.get( "/api/uccn/app/unauth/campsite/shop?id=" + params.id);
let user = data.data;
data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
let pic = data.data.campsiteShopCarouselDetailVos;
user.pictureList = pic;
user.pictureNum = pic.length;
async asyncData({ env, params, route, error }) {
const { data } = await axios.get(
'/api/uccn/app/unauth/campsite/shop?id=' + params.id
)
let user = data.data
data.data.content = data.data.content.replace(
/<img/g,
"<img style='width:100%'"
)
let pic = data.data.campsiteShopCarouselDetailVos
user.pictureList = pic
user.pictureNum = pic.length
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get('/api/uccn/random/list/app/unauth/get?type=3');
let hot = tempBannerData.data.data;
hot.map(function(item){
item.link = encodeURI('/campsiteDetails/' + item.id);
let tempBannerData = await axios.get(
'/api/uccn/random/list/app/unauth/get?type=3'
)
let hot = tempBannerData.data.data
hot.map(function(item) {
item.link = encodeURI('/campsiteDetails/' + item.id)
item.link = encodeURI(item.link)
});
let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=13');
let notice = noticeData.data.data;
return {detail: user, hotList: hot, notice: notice}
})
let noticeData = await axios.get(
'/api/app/cofig/app/unauth/types?types=13'
)
let notice = noticeData.data.data
return { detail: user, hotList: hot, notice: notice }
},
methods: {
goAnchor(val) {
let fex1 = this.$refs.fex1
let fex2 = this.$refs.fex2
let fex3 = this.$refs.fex3
if (val == 1) {
window.scrollTo(0, fex1.offsetTop-200)
} else if (val == 2) {
window.scrollTo(0, fex2.offsetTop-200)
} else if (val == 3) {
window.scrollTo(0, fex3.offsetTop-200)
}
},
slideScroll() {
this.$nextTick(function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
let fex2 = this.$refs.fex2 || ''
let fex3 = this.$refs.fex3 || ''
scrollTop+210 > fex2.offsetTop - 20
? (this.fex1 = true)
: (this.fex1 = false)
scrollTop+210 > fex3.offsetTop - 20
? (this.fex2 = true)
: (this.fex2 = false)
})
},
changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
this.lengthPic = length;
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
this.lengthPic = length
},
visiblePic() {
this.visible = !this.visible;
this.visible = !this.visible
},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path.indexOf('/campsiteDetail') != -1 ){
var menuTop = document.querySelector('#campsiteHotId').offsetTop;
handleScroll: function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
let path = $nuxt.$route.path
if (path.indexOf('/campsiteDetail') != -1) {
var menuTop = document.querySelector('#campsiteHotId').offsetTop
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop-120) {
this.barFixed = true;
if (scrollTop > menuTop - 120) {
this.barFixed = true
}
let fixContainer = document.querySelector('#fixContainer')
.offsetTop
if (scrollTop < fixContainer - 120) {
this.barFixed = false
// this.tabIndex = 0;
}
let fixContainer = document.querySelector('#fixContainer').offsetTop;
if(scrollTop<fixContainer-120){
this.barFixed = false;
// this.tabIndex = 0;
}
}
},
},
mounted() {
let t = this;
let galleryThumbs = new Swiper(".gallery-thumbs", {
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", {
})
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
disableOnInteraction: false
},
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1;
t.preIndex = this.activeIndex - 1
if (t.preIndex == t.detail.pictureNum) {
t.preIndex = 0;
t.preIndex = 0
}
// console.log(this.activeIndex);
}
......@@ -214,41 +291,115 @@ export default {
thumbs: {
swiper: galleryThumbs
}
});
})
},
head() {
return {
title: this.detail.name,
meta: [
{ hid: "keywords", name: "keywords", content: this.detail.keywords },
{
hid: "description",
name: "description",
hid: 'keywords',
name: 'keywords',
content: this.detail.keywords
},
{
hid: 'description',
name: 'description',
content: this.detail.description
}
]
};
}
};
}
}
</script>
<style scoped>
.hot-r-campsite .isFixed{
.isSidebar {
position: fixed;
top: 172px;
width: 190px;
background: #fff;
}
.empty {
width: 190px;
display: block !important;
}
.sidebar-list {
width: 190px;
background: #fff;
padding: 20px;
height: 300px;
}
.sidebar-list li {
position: relative;
margin-bottom: 56px;
}
.sidebar-list li p:nth-child(1) {
width: 15px;
height: 15px;
background: #999;
position: relative;
border-radius: 50%;
display: inline-block;
}
.sidebar-list li p:nth-child(2) {
display: inline-block;
margin-left: 15px;
}
.sidebar-list li p:nth-child(1)::after {
content: '';
position: absolute;
width: 63px;
height: 1px;
background: #999;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
left: -24px;
top: -31px;
}
.sidebar-list li:first-child p:nth-child(1)::after {
width: 0;
}
.sidebar-list li:nth-child(1) p {
color: #1bbb9f;
}
.sidebar-list li:nth-child(1) p:nth-child(1) {
background: #1bbb9f;
}
.isFex1 p,
.isFex2 p {
color: #1bbb9f;
}
.isFex1 p:nth-child(1),
.isFex2 p:nth-child(1) {
background: #1bbb9f !important;
}
.isFex1 p:nth-child(1)::after,
.isFex2 p:nth-child(1)::after {
background: #1bbb9f !important;
}
.isFixed {
position: fixed;
top: 120px;
width: 300px;
width: 220px;
background: #fff;
}
}
.hot-r-campsite .isFixed {
position: fixed;
top: 120px;
width: 220px;
background: #fff;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.scan-notice-c{
.scan-notice-c {
color: #666;
font-size: 12px;
}
......@@ -259,12 +410,12 @@ export default {
.gallery-top img {
width: 100%;
}
.swiper-container{
.swiper-container {
height: auto;
}
.imgWidth{
height:64px;
width:100px!important
.imgWidth {
height: 64px;
width: 100px !important;
}
.swiper-wrapper-thu {
/*max-width: 293px;*/
......@@ -289,7 +440,7 @@ export default {
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
}
.buttonDetail{
.buttonDetail {
width: 150px;
height: 35px; /* 高度 */
border: 1px solid #1bbb9f;
......@@ -299,11 +450,10 @@ export default {
font-family: Microsoft YaHei; /* 设置字体 */
color: #1bbb9f; /* 字体颜色 */
}
.buttonDetail:hover{
.buttonDetail:hover {
color: #fff;
background: #1bbb9f;
}
}
</style>
pages/index.vue
View file @ 2ec0fb54
<template>
<div class="container" style="background: #fff;">
<div class="container" style="background: #fff;" ref="topScroll">
<menu-modal></menu-modal>
<div class="main-container" id="scroll-area">
......@@ -210,7 +210,7 @@
<!-- 热门房车,多款房车任你选择 -->
<div class="flex-fdc-jcc hot-car" style="margin-top:80px;padding-bottom:80px">
<div class="tc title" style="color: #fff;">
<div class="tc title" ref="hotCar">
热门房车
<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
</div>
......@@ -218,7 +218,7 @@
<div style="width: 1120px;text-align: center">
<div class="line-title"></div>
</div>
<nuxt-link to="vehicle?types=">
<nuxt-link to="vehicle?types=" style="top:61px">
<div>
MORE
<i class="iconfont iconsingle_arrow"></i>
......@@ -227,9 +227,14 @@
</div>
<div class="min-win">
<ul class="v-type-ul">
<li class="v-type" :class="tabIndex == 0 ? 'hotActiveBtn' : ''" @click="chooseHot(0)">房车租赁</li>
<li
style="margin-right:40px;"
class="v-type"
style="color:#666"
:class="tabIndex == 0 ? 'hotActiveBtn' : ''"
@click="chooseHot(0)"
>房车租赁</li>
<li
style="margin-right:40px;color:#666"
class="v-type"
:class="tabIndex == 1 ? 'hotActiveBtn' : ''"
@click="chooseHot(1)"
......@@ -404,14 +409,10 @@
</ul>
</div>
</div>
<div class="embellish-1"></div>
<div class="embellish-2"></div>
<div class="embellish-3"></div>
</div>
<!-- 最新活动●从这里启程 -->
<div class="flex-fdc-jcc activity-container" style="padding-bottom: 30px;">
<div class="flex-fdc-jcc activity-container" style="padding-bottom: 30px;background:#fff">
<div class="tc title" style="color: #000;">
最新活动
<span style="font-size: 16px;margin: 0 5px;">●</span> 从这里启程
......@@ -443,9 +444,9 @@
<p>活动地点:{{item[0].province}}{{item[0].city}}{{item[0].town}}{{item[0].address}}</p>
</nuxt-link>
</div>
<div v-for="(val,key) in item.slice(1)" :key="key">
<div>
<ul class="right">
<li>
<li v-for="(val,key) in item.slice(1)" :key="key">
<nuxt-link :to="'activityList/'+val.id">
<h3>{{val.title}}</h3>
</nuxt-link>
......@@ -473,7 +474,10 @@
</div>
<!-- 新闻动态 -->
<div class="flex-fdc-jcc" style="background: #fff;padding-bottom: 30px;">
<div
class="flex-fdc-jcc"
style="background: rgb(245,245,245);padding-bottom: 80px;margin-top: 55px;"
>
<div class="tc title">
新闻动态
<span style="font-size: 16px;margin: 0 5px;">●</span> 最新资讯与你分享
......@@ -522,8 +526,7 @@
</div>
<!-- 城市覆盖区域 -->
<div class="map-container" style="margin-top:80px">
<img style="width: 100%;" src="https://mgmt.dfangche.com/xxfccn/image/home/scope-bg.jpg" />
<div class="map-container" style='height:580px'>
<div class="city-covers">
<div class="introduce">
<h3>欣新房车是一家专业从事房车销售，房车租赁,房车旅游路线策划，房车托管及房车产业配套与服务一体化的企业。</h3>
......@@ -546,16 +549,13 @@
</nuxt-link>
</span>
</div>
<img
src="https://mgmt.dfangche.com/xxfccn/image/home/map_new.jpg"
style="width:654px;float:right"
alt
/>
<div style="display:inline-block"><img src="https://mgmt.dfangche.com/xxfccn/image/home/map_new.jpg" alt/></div>
</div>
</div>
<!-- 房车营地,欣新房车集团 -->
<div class="campsite" style="margin:80px auto">
<div style="width:100%;background:rgb(245,245,245);padding:80px 0">
<div class="campsite" style="margin:0 auto">
<div class="left">
<div class="left-title">
<span>房车营地</span>
......@@ -576,7 +576,7 @@
</li>
</ul>
</div>
<div class="right" style="height:467px">
<div class="right" style="height:461px">
<div class="left-title">
<span>欣新房车集团</span>
<nuxt-link to="company" style="float:right;color:#fff">
......@@ -618,6 +618,7 @@
</div>
</div>
</div>
</div>
<!-- <go-top></go-top> -->
<footer-modal></footer-modal>
</div>
......@@ -655,25 +656,29 @@ export default {
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg',
link: '/vehicleList/48?name=【上汽】大通RV80旅居车'
link:
'/vehicleList/48?name=%25E3%2580%2590%25E4%25B8%258A%25E6%25B1%25BD%25E3%2580%2591%25E5%25A4%25A7%25E9%2580%259ARV80%25E6%2597%2585%25E5%25B1%2585%25E8%25BD%25A6'
},
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg',
link: '/vehicleList/51?name=【金冠】格林卡诺C2'
link:
'/vehicleList/51?name=%25E3%2580%2590%25E9%2587%2591%25E5%2586%25A0%25E3%2580%2591%25E6%25A0%25BC%25E6%259E%2597%25E5%258D%25A1%25E8%25AF%25BAC2'
},
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg',
link: '/vehicleList/53?name=【齐星】依维柯'
link:
'/vehicleList/53?name=%25E3%2580%2590%25E9%25BD%2590%25E6%2598%259F%25E3%2580%2591%25E4%25BE%259D%25E7%25BB%25B4%25E6%259F%25AF'
},
{
id: 0,
url:
'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg',
link: '/vehicleList/55?name=【奔驰】斯宾特'
link:
'/vehicleList/55?name=%25E3%2580%2590%25E5%25A5%2594%25E9%25A9%25B0%25E3%2580%2591%25E6%2596%25AF%25E5%25AE%25BE%25E7%2589%25B9'
}
],
hotActiveTitle: '0',
......@@ -703,6 +708,7 @@ export default {
if (typeof window !== 'undefined') {
window.addEventListener('scroll', this.handleScroll)
}
this.lookInfo()
},
async asyncData({ env }) {
function formatDate(date, fmt) {
......@@ -848,6 +854,17 @@ export default {
}
},
methods: {
lookInfo() {
this.$nextTick(function() {
if (this.$route.query.isLook) {
this.tabIndex = 1
document.documentElement.scrollTop = 1500
console.log(document.documentElement.scrollTop + '////')
// window.scrollTo(0,1500)
console.log('数据渲染完成')
}
})
},
leave() {
this.grade.common = true
this.grade.gold = true
......@@ -1032,12 +1049,6 @@ export default {
// }
}
},
/**
* 缩略图点击切换大图
*/
changeImgIndex(index) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
},
// 点击下一页回调
prev() {},
// 点击下一页回调
......
pages/news.vue
View file @ 2ec0fb54
......@@ -3,7 +3,7 @@
<menu-modal></menu-modal>
<div class="main-container">
<vehicle-banner
:list = "bannerList"
:list="bannerList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -14,20 +14,37 @@
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
class="mb-50"
></vehicle-banner>
<div class="wrap" style="background: #f1f1f1;">
<div class="bread-menu" style="margin-top: 20px;padding: 0">
<nuxt-link to="/">首页></nuxt-link>
<span>新闻动态</span>
</div>
<div class="total-div">
共{{totalCount}}篇新闻资讯
<div class="main-content">
<div class="journalism">
<h3>新闻资讯</h3>
<ul>
<li>
<nuxt-link to='/news'>欣新活动</nuxt-link>
</li>
<li>
<nuxt-link to='/activity' style="color:#1bbb9f">新闻动态</nuxt-link>
</li>
</ul>
</div>
<div style="width:917px">
<div class="total-div">共{{totalCount}}篇新闻资讯</div>
<ul class="campsiteDetail">
<li v-for="item in dataDetail" :key="item.id" class="new-item">
<nuxt-link :to="'/newsList/'+item.id">
<img :src="item.coverImage" :alt="item.alt" style="width:270px !important;height: 172px !important" />
<img
:src="item.coverImage"
:alt="item.alt"
style="width:270px !important;height: 172px !important"
/>
<div style="margin-left:20px;width:802px" class="active-r">
<h2 class="ellipsis2">{{item.title }}</h2>
<div class="ellipsis2 epitome">导语：{{item.epitome}}</div>
......@@ -36,12 +53,19 @@
</nuxt-link>
</li>
</ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
</div>
</div>
<div class="pagination-container" style="text-align:right">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
></el-pagination>
</div>
<div class="right">
<nuxt-child :key="$route.params.id" />
......@@ -54,13 +78,13 @@
</template>
<script>
import axios from '../plugins/axios';
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
import GoTop from "../components/goTop";
export default {
transition: "bounce",
import axios from '../plugins/axios'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
export default {
transition: 'bounce',
components: {
menuModal,
footerModal,
......@@ -71,115 +95,154 @@
return {
totalCount: 0,
dataDetail: [],
bannerList: [],//banner列表
bannerList: [], //banner列表
listQuery: {
type: "",
type: '',
page: 1,
limit: 10
},
looptime: 4000, // 循环时间
width: 400,
height:200,
height: 200,
background: 'red',
color: '#fff',
fontSize: '70px',
};
fontSize: '70px'
}
},
created() {
this.getAll();
this.getBanner();
this.getAll()
this.getBanner()
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
},
methods: {
// 点击下一页回调
prev () {
},
prev() {},
// 点击下一页回调
next () {
},
next() {},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
changeBanner() {},
bannerClick() {},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
this.listQuery.page = val
this.getAll()
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
this.listQuery.limit = val
this.listQuery.page = 1
this.getAll()
},
/**
* 获取车型列表页banner
*/
async getBanner(){
async getBanner() {
//新闻banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=5&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
let tempBannerData = await axios.get(
'/api/app/banner/app/unauth/findBannerlist?type=5&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();
console.log(e.target.value)
this.listQuery.type = e.target.value
this.getAll()
},
async getAll() {
let {
data: { data }
} = await axios.get(`/api/uccn/article/app/unauth/list?type=1&page=${this.listQuery.page}&limit=${this.listQuery.limit}` );
} = await axios.get(
`/api/uccn/article/app/unauth/list?type=1&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
)
// console.log(data);
this.totalCount = data.total;
data.list.map(function(item){
item.addTime = item.addTime.substring(0, 10);
this.totalCount = data.total
data.list.map(function(item) {
item.addTime = item.addTime.substring(0, 10)
})
this.dataDetail = data.list;
},
this.dataDetail = data.list
}
},
async asyncData() {
let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/6');
let head = headData.data.data;
return { headList : head}
let headData = await axios.get(
'/api/uccn/seo/app/unauth/officialWebsite/6'
)
let head = headData.data.data
return { headList: head }
},
head () {
head() {
return {
title: this.headList.title,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.headList.keywords },
{ hid: 'description', name: 'description', content: this.headList.description }
],
{
hid: 'keywords',
name: 'keywords',
content: this.headList.keywords
},
{
hid: 'description',
name: 'description',
content: this.headList.description
}
]
}
};
}
}
</script>
<style scoped>
.active-r{
.main-content {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
margin-top: 30px;
}
.journalism {
width: 190px;
background: #fff;
padding: 15px 0;
text-align: center;
height: 225px;
}
.journalism h3 {
font-size: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
color: #333;
}
.campsiteDetail {
font-weight: normal;
}
.journalism ul {
margin:40px 0;
padding: 0;
}
.journalism ul li {
margin-bottom: 40px;
}
.journalism ul li a:hover{
color: #1bbb9f;
}
.active-r {
color: #333;
}
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
}
}
.campsiteDetail li a {
.campsiteDetail li a {
padding: 0;
margin: 0;
list-style: none;
display: flex;
text-decoration: none;
}
}
.toDetail {
.toDetail {
font-size: 16px;
}
}
.buttonDetails {
.buttonDetails {
width: 156px; /* 宽度 */
height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */
......@@ -189,5 +252,5 @@
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left: 10px;
}
}
</style>
pages/newsList/_id.vue
View file @ 2ec0fb54
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container" >
<div class="main-container">
<!-- 面包屑 -->
<div class="wrap">
<div class="bread-menu" style="margin-top: 20px;">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/news">新闻动态></nuxt-link>
<span>{{detail.title}}</span>
</div>
<div class="content">
</div>
<!-- 主体内容 -->
<div class="main-content">
<div class="content" style="width:806px;display:inline-block">
<div style="width: 100%;padding-top: 20px;">
<h3 class="tc news-title">{{detail.title}}</h3>
<div class="content-detail" v-html="detail.text"></div>
</div>
</div>
</div>
<div style="width: 1120px;margin: 0 auto 20px auto;">
<div class="flex-aic-jcb more-container new-cc">
<div style="width: 1100px;">
<div
id="fixContainer"
style="float:left;width:300px;background-color:#fff;text-align:center"
>
<div
style="width: 300px;background:#fff;text-align:center"
id="campsiteHotId"
:class="barFixed?'isFixed':''"
>
<div class="more-container new-cc">
<div>
<div>推荐咨讯</div>
</div>
<nuxt-link to="/news"><div>MORE<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkVFMDFEOTZDQjE1MTFFOUJFOTNEQzRCNjMyNDdBOUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkVFMDFEOTVDQjE1MTFFOUJFOTNEQzRCNjMyNDdBOUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2FhZjgzM2YtYjY4Ni0yMjRlLWJkMDMtYWI5YWIxYmE5ZjExIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmY5YzlkOTdkLTY5NDAtYmQ0Zi04MmMwLTYxN2RhNjkwOWRiYSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl/v7K8AAACYSURBVHjaYvz//z8DNQETA5XBqIGUAxZ0gVmzZuFT7wfE2kDcTrSBeIAoEC8BYl4glgPiHCD+S4mXXwNxPBB/B+IMIF4PxNyUhiHIECcgfgPEvkC8D4jFkBUwgnIKMNxANrGRYLAq1HApIL4LxF5AfAs5DEExEUVmxCoD8TFohB2DGfgViN9TmPxWg8KYcbRwGDWQdAAQYACwex9Q4YB1FQAAAABJRU5ErkJggg=="/></div></nuxt-link>
</div>
<div class="content-new" v-for="item in hotList" :key="item.id">
<div class="content-news" v-for="item in hotList" :key="item.id">
<nuxt-link :to="'/newsList/'+item.id">
<img :src="item.coverImage" style="width:180px;height: 114px;"/>
<div style="margin-left: 20px;">
<div class="ellipsis c-title">{{item.title}}</div>
<div class="ellipsis2 ep-hot">导语：{{item.epitome}}</div>
<div class="ep-time">{{item.addTime}}</div>
<img :src="item.coverImage" style="width:190px;height: 120px;display:block;margin:0 auto;" />
<div class="c-title">{{item.title}}</div>
</nuxt-link>
</div>
<nuxt-link to="/news" class="look-more">
MORE
<i class="iconfont iconsingle_arrow"></i>
</nuxt-link>
</div>
</div>
</div>
</div>
<go-top></go-top>
......@@ -40,94 +56,159 @@
</template>
<script>
import axios from '../../plugins/axios'
import menuModal from "../../components/menu"
import footerModal from "../../components/footer"
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import GoTop from "../../components/goTop";
export default {
import axios from '../../plugins/axios'
import menuModal from '../../components/menu'
import footerModal from '../../components/footer'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import GoTop from '../../components/goTop'
export default {
transition: 'bounce',
components: {
GoTop,
menuModal,
footerModal
},
data(){
return{
lengthPic:0,
preIndex: 0,//当前轮播选中图
data() {
return {
barFixed: false,
lengthPic: 0,
preIndex: 0 //当前轮播选中图
}
},
created() {
if (typeof window !== 'undefined') {
window.addEventListener('scroll', this.handleScroll)
}
},
validate ({ params }) {
console.log(params.id);
validate({ params }) {
console.log(params.id)
return !isNaN(+params.id)
},
async asyncData({ env, params, error}) {
const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+params.id+"&urlType=1");
let detail = data.data;
let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+params.id);
let hot = tempBannerData.data.data;
// detail.text = detail.text.replace(/<img/g,"<img style='width:90%'");
// detail.text = detail.text.replace(/font-size: 18px !important;/g,"font-size: 14px !important;color:#666;line-height: normal !important;");
return {detail: detail, hotList: hot}
async asyncData({ env, params, error }) {
const { data } = await axios.get(
'/api/uccn/article/app/unauth/one?id=' + params.id + '&urlType=1'
)
let detail = data.data
let tempBannerData = await axios.get(
'/api/uccn/article/app/unauth/three?type=1&number=2&id=' + params.id
)
let hot = tempBannerData.data.data
detail.text = detail.text.replace(/<img/g, "<img style='width:100%'")
detail.text = detail.text.replace(
/font-size: 18px !important;/g,
'font-size: 14px !important;color:#666;line-height: normal !important;'
)
return { detail: detail, hotList: hot }
},
methods:{
changeImgIndex(index,length){
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
this.lengthPic = length;
console.log(this.lengthPic);
methods: {
changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
this.lengthPic = length
console.log(this.lengthPic)
},
handleScroll: function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
this.$nextTick(function() {
var menuTop = document.querySelector('#campsiteHotId')
console.log(menuTop.offsetTop);
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop.offsetTop - 120) {
this.barFixed = true
}
let fixContainer = document.querySelector('#fixContainer')
if (scrollTop < fixContainer.offsetTop - 120) {
this.barFixed = false
}
})
}
},
mounted(){
let t = this;
mounted() {
let t = this
let galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
watchSlidesProgress: true
})
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
loop: true,
on: {
slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1;
if(t.preIndex == 5){
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1
if (t.preIndex == 5) {
t.preIndex = 0
}
console.log(this.activeIndex)
},
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: galleryThumbs
}
});
})
},
head () {
head() {
return {
title: this.detail.tagTitle,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.detail.keywords },
{ hid: 'description', name: 'description', content: this.detail.description }
],
{
hid: 'keywords',
name: 'keywords',
content: this.detail.keywords
},
{
hid: 'description',
name: 'description',
content: this.detail.description
}
]
}
}
}
</script>
<style scoped>
.r-content{
.isFixed {
position: fixed;
top: 120px;
width: 220px;
background: #fff;
}
.look-more {
border: 2px solid #bbb;
color: #bbb;
display: inline-block;
padding: 8px 30px;
transition: all 0.2s linear;
}
.look-more:hover {
border: 2px solid #1bbb9f;
background: #1bbb9f;
color: #fff;
}
.main-content {
width: 1120px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.r-content {
margin-left: 20px;
}
.r-content p{
}
.r-content p {
padding: 5px 0;
}
.is-fixed{
}
.is-fixed {
position: fixed;
width: 1200px;
background: #fff;
......@@ -135,65 +216,80 @@
margin-left: -30px;
padding-left: 0;
top: 90px;
}
.news-title{
}
.news-title {
font-size: 20px;
color: #333;
margin-bottom: 21px;
}
.ep-hot, .ep-time{
}
.ep-hot,
.ep-time {
font-size: 14px;
color: #666;
margin-top:20px;
}
.new-cc{
margin-top: 20px;
}
.new-cc {
background: #fff;
margin-bottom:10px;
border-bottom: 1px solid rgb(242, 242, 242);
padding: 20px;
position: relative;
}
.content{
}
.content {
display: flex;
justify-content: space-between;
background: #fff;
}
.content-t{
}
.content-t {
border-bottom: 5px solid #1bbb9f;
width: 100px;
text-align: center;
padding: 10px;
font-weight: normal;
}
.swiper-container {
}
.swiper-container {
height: auto;
}
.gallery-top img{
}
.gallery-top img {
width: 100%;
}
.content-detail{
}
.content-detail {
padding: 20px 0;
width: 100%;
}
.c-title{
}
.c-title {
color: #333;
font-size:20px;
}
.content-new a{
display: flex;
font-size: 14px;
width: 198px;
margin: 20px auto;
text-align: left;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.content-news {
text-align: center;
margin-bottom: 50px;
}
.content-news a {
/* display: flex; */
color: #333;
}
.swiper-wrapper-thu{
}
.swiper-wrapper-thu {
margin: 0 !important;
}
.swiper-wrapper-thu img{
}
.swiper-wrapper-thu img {
width: 100%;
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active{
}
.swiper-wrapper-thu img.active {
border: 2px solid #1bbb9f;
padding: 5px;
}
.buttonDetails {
}
.buttonDetails {
width: 156px; /* 宽度 */
padding: 10px 0;
background: #1bbb9f; /* 背景颜色 */
......@@ -201,12 +297,16 @@
font-family: Microsoft YaHei; /* 设置字体 */
color: #fff; /* 字体颜色 */
text-align: center;
}
.content-r-link{
}
.content-r-link {
margin-left: 3%;
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
}
/* img{
border: 1px solid red !important;
} */
</style>
pages/tour.vue
View file @ 2ec0fb54
<template>
<div>
<menu-modal v-on:goTour = "goTour"></menu-modal>
<menu-modal v-on:goTour="goTour"></menu-modal>
<div class="main-container">
<div>
<vehicle-banner
:list = "bannerList"
:list="bannerList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -15,51 +15,71 @@
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
class="mb-50"
></vehicle-banner>
</div>
<div class="wrap">
<div class="bread-menu" style="margin-top: 20px;padding: 0">
<nuxt-link to="/">首页></nuxt-link>
<span>房车旅行</span>
</div>
<div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
<div class="main-content">
<!-- <div class="produc-list" :class='{broadside:isBroadside}'> -->
<div class="produc-list">
<producList productType="1" @fatherMethod="fatherMethod" ref="producFex" />
</div>
<!-- <div v-if="isBroadside" style="width:219px;display:inline-block;height:996px;border:1px solid red"></div> -->
<div style="width:882px;">
<div
class="clearfix total-div"
style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px"
>
共{{totalCount}}个旅行路线
<el-select
<!-- <el-select
style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
value-key="id"
v-model="typeList"
placeholder="旅行类型"
@change="chooseSelect()">
<el-option
v-for="item in dataType"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
@change="chooseSelect()"
>
<el-option v-for="item in dataType" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>-->
</div>
<h3 v-if="dataNull" style="background-color: #fff;padding:20px;width:882px;height:100px;">暂无信息</h3>
<ul class="campsiteDetail" v-if="!dataNull" style="width:882px">
<li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index">
<div style="float:left">
<img :src="item.cover" alt style="width:225px;height:172px" />
</div>
<h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
<ul class="campsiteDetail" v-if="!dataNull">
<li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index" >
<div style="float:left"><img :src="item.cover" alt style="width:225px;height:172px"/></div>
<nuxt-link :to="item.link" class="flex-aic">
<div style="float:left;padding-top:10px;width:850px;color:#333">
<h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
<h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
<button class="buttonDetails">旅行详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
<button class="buttonDetails">
旅行详情
<img
style="position: absolute;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/>
</button>
</div>
</nuxt-link>
</li>
</ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
</div>
</div>
<div class="pagination-container" style="text-align:right">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
></el-pagination>
</div>
</div>
</div>
......@@ -69,91 +89,113 @@
</template>
<script>
import axios from '../plugins/axios'
import menuModal from "../components/menu"
import footerModal from "../components/footer"
import vehicleBanner from "../components/vehicleBanner"
import GoTop from "../components/goTop";
export default {
import axios from '../plugins/axios'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
import producList from '../components/productList'
export default {
transition: 'bounce',
components: {
GoTop,
menuModal,
footerModal,
vehicleBanner
vehicleBanner,
producList
},
created() {
this.listQuery.tagId = this.$route.query.tagIds;
this.getType();
this.getAll();
// if (typeof window !== 'undefined') {
// window.addEventListener('scroll', this.slideScroll)
// }
this.listQuery.tagId = this.$route.query.tagIds
this.getType()
this.getAll()
},
data(){
return{
typeList:"旅行类型",
data() {
return {
isBroadside: false,
typeList: '旅行类型',
showBanner: !0,
looptime: 4000, // 循环时间
typeId: "营地类型",
typeId: '营地类型',
dataType: [],
totalCount: 0,
dataDetail: [],
width: 400,
height:200,
height: 200,
background: 'red',
color: '#fff',
fontSize: '70px',
listQuery: {
tagId: "",
tagId: '',
page: 1,
limit: 10
},
store: "",
dataNull:false
};
store: '',
dataNull: false
}
},
methods:{
goTour(e){
this.listQuery.tagId = e;
for(var i = 0;i<this.dataType.length;i++){
if(e == this.dataType[i].id){
methods: {
//侧边栏悬浮吸顶
// slideScroll() {
// this.$nextTick(function() {
// let producFex = this.$refs.producFex || '';
// let scrollTop =
// window.pageYOffset ||
// document.documentElement.scrollTop ||
// document.body.scrollTop
// console.log(scrollTop);
// scrollTop > 300 ? this.isBroadside = true : this.isBroadside = false
// })
// },
fatherMethod(val) {
this.listQuery.tagId = val
this.getAll()
},
goTour(e) {
this.listQuery.tagId = e
for (var i = 0; i < this.dataType.length; i++) {
if (e == this.dataType[i].id) {
this.typeList = this.dataType[i].name
}
}
// console.log(this.dataType);
// this.typeList="旅行类型"
this.getAll();
this.getAll()
},
chooseSelect() {
this.listQuery.tagId = this.typeList;
this.$router.push({ path: "/tour", query: { tagIds: this.listQuery.tagId } });
this.getAll();
this.listQuery.tagId = this.typeList
this.$router.push({
path: '/tour',
query: { tagIds: this.listQuery.tagId }
})
this.getAll()
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
this.listQuery.page = val
this.getAll()
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
this.listQuery.limit = val
this.listQuery.page = 1
this.getAll()
},
choose(e) {
this.listQuery.tagId = e.target.value;
this.getAll();
this.listQuery.tagId = e.target.value
this.getAll()
},
async getType() {
const {
data: { data }
} = await axios.get("/api/uccn/app/unauth/tour/tagList" );
data.unshift({id:"",name:'全部'})
this.dataType = data;
} = await axios.get('/api/uccn/app/unauth/tour/tagList')
data.unshift({ id: '', name: '全部' })
this.dataType = data
this.loading = false
for(var i = 0;i<this.dataType.length;i++){
if(this.$route.query.tagIds == this.dataType[i].id){
for (var i = 0; i < this.dataType.length; i++) {
if (this.$route.query.tagIds == this.dataType[i].id) {
this.typeList = this.dataType[i].name
}
}
......@@ -161,53 +203,81 @@
async getAll() {
let {
data: { data }
} = await axios.get(`/api/uccn/app/unauth/tour/getGoodList?tagId=${this.listQuery.tagId}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
data.data.map(function(item){
item.link = encodeURI('/tourDetails/' + item.id);
item.link = encodeURI(item.link);
});
if(!data.data.length == 0){
this.totalCount = data.totalCount;
this.dataDetail = data.data;
} = await axios.get(
`/api/uccn/app/unauth/tour/getGoodList?tagId=${this.listQuery.tagId}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
)
data.data.map(function(item) {
item.link = encodeURI('/tourDetails/' + item.id)
item.link = encodeURI(item.link)
})
if (!data.data.length == 0) {
this.totalCount = data.totalCount
this.dataDetail = data.data
this.dataNull = false
}else{
this.totalCount = 0;
this.dataDetail = data.data;
} else {
this.totalCount = 0
this.dataDetail = data.data
this.dataNull = true
}
scrollTo(0, 0)
},
// 点击下一页回调
prev () {},
prev() {},
// 点击下一页回调
next () {},
next() {},
// 鼠标移入状态点回调
changeBanner () {},
bannerClick () {},
changeBanner() {},
bannerClick() {}
},
head () {
head() {
return {
title: this.headList.title,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.headList.keywords },
{ hid: 'description', name: 'description', content: this.headList.description }
],
{
hid: 'keywords',
name: 'keywords',
content: this.headList.keywords
},
{
hid: 'description',
name: 'description',
content: this.headList.description
}
]
}
},
async asyncData() {
const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=1&platform=1');
let cc = data.data;
let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/3');
let head = headData.data.data;
return { bannerList: cc , headList : head}
},
const { data } = await axios.get(
'/api/app/banner/app/unauth/findBannerlist?type=1&platform=1'
)
let cc = data.data
let headData = await axios.get(
'/api/uccn/seo/app/unauth/officialWebsite/3'
)
let head = headData.data.data
return { bannerList: cc, headList: head }
}
}
</script>
<style scoped>
.broadside {
position: fixed;
top: 120px;
}
.produc-list {
background: #fff;
width: 219px;
text-align: center;
}
.main-content {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
......@@ -216,7 +286,7 @@
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.selectDiv{
.selectDiv {
float: right;
width: 145px;
height: 35px;
......@@ -224,7 +294,7 @@
margin: 8px 0;
box-shadow: 0 0 5px #ccc;
}
.selectDiv select{
.selectDiv select {
border: none;
outline: none;
width: 100%;
......@@ -234,7 +304,6 @@
/* appearance: none;
-webkit-appearance: none;
-moz-appearance: none; */
}
.campsiteDetail {
......@@ -248,7 +317,7 @@
margin-bottom: 20px;
list-style: none;
height: 200px;
width: 1121px;
/* width: 1121px; */
background-color: #fff;
}
......@@ -261,8 +330,6 @@
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
margin-left:14px;
margin-left: 14px;
}
</style>
pages/tourDetails/_id.vue
View file @ 2ec0fb54
<template>
<div>
<menu-modal></menu-modal>
<div class="main-container" >
<div class="wrap" >
<div class="main-container">
<div class="wrap">
<div class="bread-menu" style="margin-top: 20px;">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/tour">房车旅行></nuxt-link>
<span>{{detail.name}}</span>
</div>
<div class="clearfix" style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:536px">
<div
class="clearfix"
style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:536px"
>
<div style="float:left;width:544px;margin-right:10px">
<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,idx) in detail.pictureList"
:key="idx"
>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,idx) in detail.pictureList" :key="idx">
<img :src="item.cover" style="width:100%;height:374px" />
</div>
</div>
......@@ -30,7 +29,6 @@
v-for="(item,index) in detail.pictureList"
:key="index"
@click="changeImgIndex(index,detail.pictureList.length)"
>
<img
:src="item.cover"
......@@ -48,29 +46,37 @@
<h2 style="font-size:20px;font-weight:bold;padding-left:20px;">{{detail.name}}</h2>
<div style="margin:21px 20px 91px 19px;padding:21px 0 21px 16px;background:#f6f6f6">
<div style="display: flex">
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
出发地
</h1>
<h1 style="flex:8;font-size:14px;font-weight:400;color:#666">
{{detail.addressTo.provinceName}} {{detail.addressTo.cityName}} {{detail.addressTo.address}}
</h1>
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">出发地</h1>
<h1
style="flex:8;font-size:14px;font-weight:400;color:#666"
>{{detail.addressTo.provinceName}} {{detail.addressTo.cityName}} {{detail.addressTo.address}}</h1>
</div>
<div style="display: flex;margin:13px 0 16px 0">
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
目的地
</h1>
<h1 style="flex:8;font-size:14px;font-weight:400;color:#666;">
{{detail.addressGo.provinceName}} {{detail.addressGo.cityName}} {{detail.addressGo.address}}
</h1>
</div>
<div style="font-size:14px;font-weight:400;color:#666;">最近出发日期<h5 style="font-size:14px;font-weight:400;display:inline-block;color:#666;margin-left:9px"> {{detail.time.startTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekStart}} {{detail.addressTo.departTime | formatDate('hh:mm')}} ~ {{detail.time.endTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekEnd}}</h5></div>
</div>
<div style="" class="clearfix">
<button class="buttonDetails" @click="visiblePic()" style="float:left;margin:0 30px 0 20px">预定出游</button>
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">目的地</h1>
<h1
style="flex:8;font-size:14px;font-weight:400;color:#666;"
>{{detail.addressGo.provinceName}} {{detail.addressGo.cityName}} {{detail.addressGo.address}}</h1>
</div>
<div style="font-size:14px;font-weight:400;color:#666;">
最近出发日期
<h5
style="font-size:14px;font-weight:400;display:inline-block;color:#666;margin-left:9px"
>{{detail.time.startTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekStart}} {{detail.addressTo.departTime | formatDate('hh:mm')}} ~ {{detail.time.endTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekEnd}}</h5>
</div>
</div>
<div style class="clearfix">
<button
class="buttonDetails"
@click="visiblePic()"
style="float:left;margin:0 30px 0 20px"
>预定出游</button>
<div style="float:left" class="clearfix" v-if="visible">
<div style="float:left;width:114px;margin-right:30px;text-align:center">
<div style="background:#FFF5E6;border:2px solid #FFB74B">
<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" style="width: 90px;margin:12px 10px 8px 10px;"/>
<img
src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png"
style="width: 90px;margin:12px 10px 8px 10px;"
/>
<div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">滴房车App</div>
</div>
<div style="margin-top:8px" class="scan-notice-c">
......@@ -82,7 +88,7 @@
<div style="float:left;width:114px;text-align:center">
<div style="background:#FFF5E6;border:2px solid #FFB74B">
<img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;"/>
<img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;" />
<div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">欣新助手小程序</div>
</div>
<div style="margin-top:8px;" class="scan-notice-c">
......@@ -92,39 +98,63 @@
</div>
</div>
</div>
</div>
</div>
<div class="clearfix" style="margin-top:40px">
<!-- <div style="float:left;width:190px;background-color:#fff;padding:40px 28px;margin-right:14px;">
<ul class="typeUl">
<li>行程亮点</li>
<li>行程介绍</li>
<li>报名须知</li>
<div
class="clearfix"
style="margin-top:40px;display: flex;justify-content: space-between;width: 1135px;"
>
<!-- 锚链接 -->
<ul class="sidebar-list" :class="barFixed?'isSidebar':''">
<li>
<p></p>
<p @click="goAnchor('1')">行程亮点</p>
</li>
<li :class="{isFex1:fex1}">
<p></p>
<p @click="goAnchor('2')">行车介绍</p>
</li>
<li :class="{isFex2:fex2}">
<p></p>
<p @click="goAnchor('3')">报名须知</p>
</li>
</ul>
</div> -->
<div style="float:left;width:884px;background-color:#fff;padding:31px 50px;">
<div :class="barFixed?'empty':''" style="display:none"></div>
<!-- 内容 -->
<div style="float:left;width:682px;background-color:#fff;padding:31px 50px;" ref="fex1">
<h3 style="font-size:16px;font-weight:bold;margin-bottom:20px">行程亮点</h3>
<div v-html="detail.content">
</div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">行程介绍</h3>
<div v-html="detail.introduce">
</div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">报名须知</h3>
<div v-html="notice[0].value">
</div>
<div v-html="detail.content"></div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold" ref="fex2">行程介绍</h3>
<div v-html="detail.introduce"></div>
<h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold" ref="fex3">报名须知</h3>
<div v-html="notice[0].value"></div>
</div>
<div id = "fixContainer" class="hot-r-campsite" style="float:left;width:220px;margin-left:16px;background-color:#fff;text-align:center">
<!-- 热门车型 -->
<div
id="fixContainer"
class="hot-r-campsite"
style="float:left;width:220px;background-color:#fff;text-align:center"
>
<div id="tourHotId" :class="barFixed?'isFixed':''">
<h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:14px">热门旅行</h3>
<h3
style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:14px"
>热门旅行</h3>
<!--<div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">-->
<!--<h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门旅行</h3>-->
<div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:25px 25px 0 25px">
<img :src="item.cover" alt="" style="width:161px;height:116px">
<h5 style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;">{{item.name}}</h5>
<nuxt-link :to="item.link"><button class="buttonDetail" style="font-size:14px;margin-bottom:25px" >旅游详情</button></nuxt-link>
<div
v-for="(item,index) in hotList"
:key="index"
style="width:100%;padding:25px 25px 0 25px"
>
<img :src="item.cover" alt style="width:161px;height:116px" />
<h5
style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;"
>{{item.name}}</h5>
<nuxt-link :to="item.link">
<button class="buttonDetail" style="font-size:14px;margin-bottom:25px">旅游详情</button>
</nuxt-link>
</div>
</div>
</div>
......@@ -138,15 +168,15 @@
<script>
import axios from '../../plugins/axios'
import menuModal from "../../components/menu";
import footerModal from "../../components/footer";
import menuModal from '../../components/menu'
import footerModal from '../../components/footer'
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import GoTop from "../../components/goTop";
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import GoTop from '../../components/goTop'
// import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
export default {
transition: "bounce",
transition: 'bounce',
components: {
GoTop,
menuModal,
......@@ -157,117 +187,165 @@ export default {
lengthPic: 0,
preIndex: 0, //当前轮播选中图
visible: false,
barFixed: false
};
barFixed: false,
fex1: false,
fex2: false
}
},
created() {
if (typeof window !== 'undefined') {
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('scroll', this.handleScroll)
window.addEventListener('scroll', this.slideScroll)
}
},
validate({ params }) {
console.log(params.id);
return !isNaN(+params.id);
console.log(params.id)
return !isNaN(+params.id)
},
async asyncData({ env, params, route, error}) {
const { data } = await axios.get( env.host + "/api/uccn/app/unauth/tour/detail/" + params.id);
let user = data.data;
async asyncData({ env, params, route, error }) {
const { data } = await axios.get(
env.host + '/api/uccn/app/unauth/tour/detail/' + params.id
)
let user = data.data
// data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
// data.data.modelParam = JSON.parse(data.data.modelParam );
let pic = data.data.bannerDTOS;
user.pictureList = pic;
user.pictureNum = pic.length;
let startAddress = data.data.tourDepartVo;
for(var i = 0;i<startAddress.length;i++){
if(startAddress[i].type == 0){
console.log(startAddress[i]);
user.addressTo = startAddress[i];
let pic = data.data.bannerDTOS
user.pictureList = pic
user.pictureNum = pic.length
let startAddress = data.data.tourDepartVo
for (var i = 0; i < startAddress.length; i++) {
if (startAddress[i].type == 0) {
console.log(startAddress[i])
user.addressTo = startAddress[i]
}
if(startAddress[i].type == 2){
console.log(startAddress[i]);
user.addressGo = startAddress[i];
if (startAddress[i].type == 2) {
console.log(startAddress[i])
user.addressGo = startAddress[i]
}
}
let tourTimeVo = data.data.tourDepartTimeVo
for(var i = 0;i<tourTimeVo.length;i++){
if(tourTimeVo[i].overdue == 0){
console.log(tourTimeVo[i]);
user.time = tourTimeVo[i];
for (var i = 0; i < tourTimeVo.length; i++) {
if (tourTimeVo[i].overdue == 0) {
console.log(tourTimeVo[i])
user.time = tourTimeVo[i]
break
}else{
user.time = tourTimeVo[i];
} else {
user.time = tourTimeVo[i]
}
}
var weekday=["周日","周一","周二","周三","周四","周五","周六"]
user.time.weekStart = weekday[user.time.startWeek];
user.time.weekEnd = weekday[user.time.endWeek];
var weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
user.time.weekStart = weekday[user.time.startWeek]
user.time.weekEnd = weekday[user.time.endWeek]
// console.log(startAddress);
console.log(pic);
console.log(pic)
console.log(user);
console.log(user)
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get('/api/uccn/random/list/app/unauth/get?type=2');
let hot = tempBannerData.data.data;
hot.map(function(item){
item.link = encodeURI('/tourDetails/' + item.id+'?name='+item.name);
let tempBannerData = await axios.get(
'/api/uccn/random/list/app/unauth/get?type=2'
)
let hot = tempBannerData.data.data
hot.map(function(item) {
item.link = encodeURI(
'/tourDetails/' + item.id + '?name=' + item.name
)
item.link = encodeURI(item.link)
});
console.log(hot);
})
console.log(hot)
let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=14');
let notice = noticeData.data.data;
return {detail: user, hotList: hot, notice: notice}
let noticeData = await axios.get(
'/api/app/cofig/app/unauth/types?types=14'
)
let notice = noticeData.data.data
return { detail: user, hotList: hot, notice: notice }
},
methods: {
goAnchor(val) {
this.$nextTick(function() {
let fex1 = this.$refs.fex1
let fex2 = this.$refs.fex2
let fex3 = this.$refs.fex3
if (val == 1) {
window.scrollTo(0, fex1.offsetTop-200)
} else if (val == 2) {
window.scrollTo(0, fex2.offsetTop-200)
} else if (val == 3) {
window.scrollTo(0, fex3.offsetTop-200)
}
})
},
slideScroll() {
this.$nextTick(function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
let fex2 = this.$refs.fex2 || ''
let fex3 = this.$refs.fex3 || ''
let fex1 = this.$refs.fex1 || ''
scrollTop+210 > fex2.offsetTop
? (this.fex1 = true)
: (this.fex1 = false)
scrollTop+210 > fex3.offsetTop
? (this.fex2 = true)
: (this.fex2 = false)
})
},
changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
this.lengthPic = length;
console.log(this.lengthPic);
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
this.lengthPic = length
console.log(this.lengthPic)
},
visiblePic() {
this.visible = !this.visible;
this.visible = !this.visible
},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path.indexOf('/tourDetail') != -1 ){
var menuTop = document.querySelector('#tourHotId').offsetTop;
handleScroll: function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
let path = $nuxt.$route.path
if (path.indexOf('/tourDetail') != -1) {
var menuTop = document.querySelector('#tourHotId').offsetTop
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop-120) {
this.barFixed = true;
if (scrollTop > menuTop - 120) {
this.barFixed = true
}
let fixContainer = document.querySelector('#fixContainer')
.offsetTop
if (scrollTop < fixContainer - 120) {
this.barFixed = false
// this.tabIndex = 0;
}
let fixContainer = document.querySelector('#fixContainer').offsetTop;
if(scrollTop<fixContainer-120){
this.barFixed = false;
// this.tabIndex = 0;
}
}
},
},
mounted() {
let t = this;
let galleryThumbs = new Swiper(".gallery-thumbs", {
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", {
})
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
disableOnInteraction: false
},
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1;
t.preIndex = this.activeIndex - 1
if (t.preIndex == t.detail.pictureNum) {
t.preIndex = 0;
t.preIndex = 0
}
// console.log(this.activeIndex);
}
......@@ -275,40 +353,111 @@ export default {
thumbs: {
swiper: galleryThumbs
}
});
})
},
head() {
return {
title: this.detail.name,
meta: [
{ hid: "keywords", name: "keywords", content: this.detail.keywords },
{
hid: "description",
name: "description",
hid: 'keywords',
name: 'keywords',
content: this.detail.keywords
},
{
hid: 'description',
name: 'description',
content: this.detail.description
}
]
};
}
};
}
}
</script>
<style scoped>
.isFixed{
.empty {
width: 190px;
display: block !important;
}
.sidebar-list {
width: 190px;
background: #fff;
/* margin: 20px 0; */
padding: 20px;
height: 300px;
display: inline-block;
}
.sidebar-list li {
position: relative;
margin-bottom: 56px;
}
.sidebar-list li p:nth-child(1) {
width: 15px;
height: 15px;
background: #999;
position: relative;
border-radius: 50%;
display: inline-block;
}
.sidebar-list li p:nth-child(2) {
display: inline-block;
margin-left: 15px;
}
.sidebar-list li p:nth-child(1)::after {
content: '';
position: absolute;
width: 63px;
height: 1px;
background: #999;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
left: -24px;
top: -31px;
}
.sidebar-list li:first-child p:nth-child(1)::after {
width: 0;
}
.sidebar-list li:nth-child(1) p {
color: #1bbb9f;
}
.sidebar-list li:nth-child(1) p:nth-child(1) {
background: #1bbb9f;
}
.isFex1 p,
.isFex2 p {
color: #1bbb9f;
}
.isFex1 p:nth-child(1),
.isFex2 p:nth-child(1) {
background: #1bbb9f !important;
}
.isFex1 p:nth-child(1)::after,
.isFex2 p:nth-child(1)::after {
background: #1bbb9f !important;
}
.isFixed {
position: fixed;
top: 120px;
width: 220px;
background: #fff;
}
}
.isSidebar {
position: fixed;
top: 172px;
width: 190px;
background: #fff;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.scan-notice-c{
.scan-notice-c {
color: #666;
font-size: 12px;
}
......@@ -319,7 +468,7 @@ export default {
.gallery-top img {
width: 100%;
}
.swiper-container{
.swiper-container {
width: 100%;
}
.swiper-wrapper-thu {
......@@ -331,12 +480,12 @@ export default {
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active {
border: 2px solid #1bbb9f;
padding: 5px;
border: 3px solid #1bbb9f;
padding: 0;
}
.imgWidth{
height:64px;
width:100px!important
.imgWidth {
height: 64px;
width: 100px !important;
}
.buttonDetails {
width: 180px;
......@@ -349,7 +498,7 @@ export default {
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
}
.buttonDetail{
.buttonDetail {
width: 116px;
height: 34px; /* 高度 */
border: 1px solid #1bbb9f;
......@@ -359,10 +508,10 @@ export default {
font-family: Microsoft YaHei; /* 设置字体 */
color: #1bbb9f; /* 字体颜色 */
}
.buttonDetail:hover{
.buttonDetail:hover {
color: #fff;
background: #1bbb9f;
}
}
.tabContent {
padding: 0;
margin: 0;
......@@ -375,10 +524,10 @@ export default {
width: 32%;
float: left;
}
.typeUl{
padding:0;
margin:0;
list-style:none;
.typeUl {
padding: 0;
margin: 0;
list-style: none;
}
</style>
......
pages/vehicle.vue
View file @ 2ec0fb54
......@@ -3,7 +3,7 @@
<menu-modal @goVe="goVe"></menu-modal>
<div class="main-container">
<vehicle-banner
:list = "bannerList"
:list="bannerList"
:looptime="looptime"
:width="width"
:height="height"
......@@ -14,16 +14,23 @@
@next="next"
@change="changeBanner"
@click="bannerClick"
class="mb-50">
</vehicle-banner>
class="mb-50"
></vehicle-banner>
<div class="wrap" style="background: #f1f1f1;">
<div class="bread-menu" style="margin-top: 20px;padding: 0">
<nuxt-link to="/">首页></nuxt-link>
<span>房车租赁</span>
</div>
<div class="main-content">
<div class="produc-list">
<producList productType="1" @fatherMethod="fatherMethod" ref="producFex" />
</div>
<div>
<div class="total-div">
共{{totalCount}}款车型
<el-select
<!-- <el-select
style="width:150px;height:30px;float:right;margin:-8px 10px 10px 0"
value-key="id"
v-model="typeList"
......@@ -36,37 +43,71 @@
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-select>-->
</div>
<ul class="campsiteDetail clearfix">
<h3
v-if="dataDetail == ''"
style="background-color: #fff;padding:20px;width:882px;height:100px;"
>暂无信息</h3>
<ul v-else class="campsiteDetail clearfix" style="width:882px">
<li v-for="item in dataDetail" :key="item.id" class="vehicle-item">
<nuxt-link :to="item.link" class="flex-aic">
<img class="v-img-cover" :src="item.coverPic" alt="房车租赁" />
<div style="margin-left: 20px;width: 750px;">
<div style="margin-left: 20px;">
<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
<div class="vehicle-desc">{{item.intro}}</div>
<div class="vehicle-desc">
<span>{{item.intro}}</span>
</div>
<div class="flex-aic">
<span class="flex-aic config" v-for="(iitem,iindex) in item.uccnCataList" :key="iitem.id">
<img style="margin-right: 5px;" v-if="iindex==0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg=="/>
<img style="margin-right: 5px;" v-if="iindex==1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII="/>
<img style="margin-right: 5px;" v-if="iindex==2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC"/>
<span
class="flex-aic config"
v-for="(iitem,iindex) in item.uccnCataList"
:key="iitem.id"
>
<img
style="margin-right: 5px;"
v-if="iindex==0"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg=="
/>
<img
style="margin-right: 5px;"
v-if="iindex==1"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII="
/>
<img
style="margin-right: 5px;"
v-if="iindex==2"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC"
/>
{{iitem.name}}
</span>
<span class="more-set">+更多配置</span>
</div>
</div>
<nuxt-link :to="item.link" class="flex-aic">
<button class="buttonDetails">租车详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
<button class="buttonDetails">
租车详情
<img
style="position: absolute;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/>
</button>
</nuxt-link>
</nuxt-link>
</li>
</ul>
<div class="pagination-container">
<el-pagination @current-change="handleCurrentChange"
</div>
</div>
<div class="pagination-container" style="text-align:right">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
@size-change="handleSizeChange"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
></el-pagination>
</div>
<div class="right">
<nuxt-child :key="$route.params.id" />
......@@ -79,113 +120,117 @@
</template>
<script>
import axios from '../plugins/axios'
import GoTop from "../components/goTop";
import axios from '../plugins/axios'
import GoTop from '../components/goTop'
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner"
export default {
transition: "bounce",
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import producList from '../components/productList'
export default {
transition: 'bounce',
components: {
menuModal,
footerModal,
vehicleBanner,
GoTop
GoTop,
producList
},
data() {
return {
// headList:{},
typeList:"车型",
dataType:[],
typeList: '车型',
dataType: [],
totalCount: 0,
dataDetail: [],
bannerList: [],//车型banner列表
bannerList: [], //车型banner列表
listQuery: {
type: "",
type: '',
page: 1,
limit: 10
},
store: "",
store: '',
curId: 0,
items1: {},
curId1: 0,
looptime: 4000, // 循环时间
width: 400,
height:200,
height: 200,
background: 'red',
color: '#fff',
fontSize: '70px',
};
fontSize: '70px'
}
},
created() {
this.listQuery.type = this.$route.query.types;
this.getType();
this.getAll();
this.getBanner();
this.listQuery.type = this.$route.query.types
this.getType()
this.getAll()
this.getBanner()
// this.getHead()
},
mounted() {
window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
},
methods: {
goVe(e){
this.listQuery.type = e;
for(var i = 0;i<this.dataType.length;i++){
if(e == this.dataType[i].id){
fatherMethod(val) {
this.listQuery.type = val
this.getAll()
},
goVe(e) {
this.listQuery.type = e
for (var i = 0; i < this.dataType.length; i++) {
if (e == this.dataType[i].id) {
this.typeList = this.dataType[i].name
}
}
this.getAll();
this.getAll()
// this.typeList="车型";
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getAll();
this.listQuery.page = val
this.getAll()
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.listQuery.page = 1;
this.getAll();
this.listQuery.limit = val
this.listQuery.page = 1
this.getAll()
},
// 点击下一页回调
prev () {
},
prev() {},
// 点击下一页回调
next () {
},
next() {},
// 鼠标移入状态点回调
changeBanner () {
},
bannerClick () {
},
changeBanner() {},
bannerClick() {},
/**
* 获取车型列表页banner
*/
async getBanner(){
async getBanner() {
//车型banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=3&platform=1');
let banner = tempBannerData.data.data;
this.bannerList = banner;
let tempBannerData = await axios.get(
'/api/app/banner/app/unauth/findBannerlist?type=3&platform=1'
)
let banner = tempBannerData.data.data
this.bannerList = banner
},
chooseSelect() {
console.log(this.typeList);
this.listQuery.type = this.typeList;
this.$router.push({ path: "/vehicle", query: { types: this.listQuery.type } });
this.getAll();
this.listQuery.type = this.typeList
this.$router.push({
path: '/vehicle',
query: { types: this.listQuery.type }
})
this.getAll()
},
async getType() {
const {
data: { data }
} = await axios.get("/vehicle/cata/app/unauth/types" );
data.unshift({id:"",name:'全部'})
this.dataType = data;
console.log(data);
} = await axios.get('/vehicle/cata/app/unauth/types')
data.unshift({ id: '', name: '全部' })
this.dataType = data
this.loading = false
for(var i = 0;i<this.dataType.length;i++){
if(this.$route.query.types == this.dataType[i].id){
for (var i = 0; i < this.dataType.length; i++) {
if (this.$route.query.types == this.dataType[i].id) {
this.typeList = this.dataType[i].name
}
}
......@@ -193,100 +238,144 @@
async getAll() {
let {
data: { data }
} = await axios.get(`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=${this.listQuery.page}&limit=${this.listQuery.limit}&vehicleType=${this.listQuery.type}`);
this.totalCount = data.totalCount;
data.data.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]:'';
});
this.dataDetail = data.data;
} = await axios.get(
`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=${this.listQuery.page}&limit=${this.listQuery.limit}&vehicleType=${this.listQuery.type}`
)
this.totalCount = data.totalCount
data.data.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]
: ''
})
this.dataDetail = data.data
// this.dataDetail = this.dataDetail.push(data.data);
},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
},
window.addEventListener('scroll', this.scrollHandle) // 绑定页面的滚动事件
}
},
async asyncData() {
const { data } = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/2');
let cc = data.data;
return { headList: cc}
const { data } = await axios.get(
'/api/uccn/seo/app/unauth/officialWebsite/2'
)
let cc = data.data
return { headList: cc }
},
head () {
head() {
return {
title: this.headList.title,
meta: [
{ hid: 'keywords', name: 'keywords', content: this.headList.keywords },
{ hid: 'description', name: 'description', content: this.headList.description }
],
{
hid: 'keywords',
name: 'keywords',
content: this.headList.keywords
},
{
hid: 'description',
name: 'description',
content: this.headList.description
}
]
}
}
};
}
</script>
<style scoped>
.clearfix:after {
.vehicle-desc {
width: 358px;
margin-right: 143px;
}
.vehicle-desc span {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.broadside {
position: fixed;
top: 120px;
}
.produc-list {
background: #fff;
width: 219px;
text-align: center;
}
.main-content {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.more-set:hover{
border:1px solid #1bbb9f;
}
.more-set:hover {
border: 1px solid #1bbb9f;
color: #1bbb9f;
}
.more-set{
}
.more-set {
border: 1px solid #999;
padding: 3px 10px;
color: #999;
font-size: 12px;
cursor: pointer;
}
.banner {
}
.banner {
/* background-color: #fff; */
text-align: center;
}
.v-img-cover{
}
.v-img-cover {
width: 190px;
height:122px;
}
height: 122px;
}
.banner h2 {
.banner h2 {
font-size: 20px;
font-weight: 700;
padding-top: 40px;
}
}
.banner h3 {
.banner h3 {
font-size: 16px;
padding-top: 20px;
font-weight: 400;
padding-bottom: 40px;
}
}
.campsiteDetail {
.campsiteDetail {
padding: 0;
margin: 0;
list-style: none;
}
}
.campsiteDetail li {
.campsiteDetail li {
list-style: none;
display: flex;
}
}
.toDetail {
.toDetail {
font-size: 16px;
}
}
.buttonDetails {
.buttonDetails {
width: 116px;
height: 34px;
border-width: 0px;
......@@ -297,5 +386,5 @@
color: white;
font-size: 14px;
padding-right: 15px;
}
}
</style>
pages/vehicleList/_id.vue
View file @ 2ec0fb54
......@@ -8,10 +8,14 @@
<nuxt-link to="/vehicle">房车租赁></nuxt-link>
<span>{{detail.name}}</span>
</div>
<div style="display: flex;padding: 20px;background: #fff;height: 536px;">
<div style="display: flex;padding: 20px;background: #fff;height: 450px;">
<div style="width:540px;" class="tc">
<div class="gallery-top-box" style="width:100%">
<div class="swiper-container gallery-top" style="width: 100%" ref="mySwiper">
<div
class="swiper-container gallery-top"
style="width: 100%;border:1px solid #eee"
ref="mySwiper"
>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in detail.pictureList" :key="item">
<img :src="item" />
......@@ -38,11 +42,7 @@
<h1>{{detail.name}}</h1>
<div class="r-cc">
<div class="flex-aic">
<span
class="flex-aic config"
v-for="(iitem,iindex) in detail.uccnCataList"
:key="iitem.id"
>
<span class="flex-aic config" v-for="(iitem,iindex) in detail.uccnCataList" :key="iitem.id">
<img
style="margin-right: 5px;"
v-if="iindex==0"
......@@ -82,7 +82,9 @@
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjA1MEExMTJDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjA1MEExMTFDRkIyMTFFOUI4NzBDNjVFMUJGRTVBRTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Y2UzNzQ0ZjAtNDBkYS1lMDQzLWExOWQtM2I1MWE5NjYyMWYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm/vKBcAAAMqSURBVHjatFVNa1NBFJ2XviRNSFOSlNamJCT0Q5CggRSSkHVxI4K4cuOidVFB/4Br3brQjVoV3Lhw4dq9oKVFxGBB2krB0FqalrRJ06T5quc8euNL8rLswDAfb+bcc8+9d552dnamLqrpMjk5Oen4MDAwoKrVqioUCmpkZITjs6Ojo7lQKHSjXC7/bjQaxj5Hc/N6vb3gzWaz4xA9Ou+zBwcHkUql8lDTNLW/v/+41Wo9dTqdBaw3udevaSLL3t7e/01cIPPj4+MHpVLpuc1mUwJCpuz4Xg4Ggz5d1+tmYn6/v5c5waQRjGtc3JE12CohQjAY+4OxxX0B7/bC1rai623Q09NTo7vd7o9w/1utVlMCIszB8BHuNBmrer1ufOM5y4ASmMxonSMP0+Dw8PAs5rcBbjtnrfl8vpzL5fqKWBhk2HmHBCzBxWUCYn4JmXILQdRhNG+323fIjg1zDQbcuVxuEUydMPJ3dHT0A0l1J4XesQAwAK8Ui8XPcN0v+krmcE52lIVz9sPDQ6bs9UgksgDD1po7HA4CX0PWfMclv2QIGbOLAYLjnAHMMyS0u7s7v76+/o5rS3AE5nI+n/+Cyw7JDoIGAgEDgIHjHgpIjY2NMdhG0GkQQWcq393Y2HhjCY6Pn3DQTWBxmQxZhfF43AAGQzU9Pa1isZhhmNkhUg0ODrLA5i3BARziKClHRsyCbDZrMEwmk4aRcDisVldXCcTgduR/3zyH5jdRkW1g0ZTj8vIyq1WNj4+rlZUVhUxRyJL2WTbKBal+WJY/meBxuoP+XljIZSkqNspBjZkxchdPBB+sn6lUKoMaKPaA8zLd3N7evre1tbVEScSAOf3M6SnAHo9nM5PJXIU3FRrukYWXaWBiYuI1dF1kMM1lb35XuhivAThBYErTt4h4kQbwZr+EsRZy95W8OeKBADMGZIxAJ6F1meu+ATXrzJ8E2C9NTU3dFw+kiITx0NDQWjqdjvcD7gHvNhCNRl/MzMwsyMvHb3QdwL/IGFKUue73w9At/yA4TAkIOjk5+RbG7Ki+J5DKgVcym0gk5kTj7pK3TMWLaDZ1ge2fAAMAmId5+3zZfVQAAAAASUVORK5CYII="
/>
{{ictem.name}} ￥{{ictem.price}}/天，可节省￥{{ictem.disPrice}}
<nuxt-link to="/?isLook=1">
<span>立即查看></span>
</nuxt-link>
</div>
<div class="flex-aic">
<img
......@@ -90,7 +92,9 @@
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUI0NTZDOTBDRkI2MTFFOTgwQzk4NDZFQUYxM0NBMzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUI0NTZDOEZDRkI2MTFFOTgwQzk4NDZFQUYxM0NBMzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NWYzZjhmOTMtMGM3Ni1jYjRhLTkwZTktZGE3NzUxZDI3NWU0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhHl4nQAAAQOSURBVHjatFVLbBtVFL1v/uPxOAlxggNIadK4lPJrCElIu4BNpQohBJSqSEhUbJAKLNmxgyULVqQgNkgggYQEe5aolVJVFAQhLv1EadxPQp3Escf2fN6H+56dCNeTZV7keN543jnnnvsZIoSA/VrGzgWPml0/EMME1tiCpLIKZn4Uorul+eTflROZQ8deFSBKgsZgPzwBgjOA/wnUHK8XHDTSTavpyKBpPAqmo/LiOK2unUMUiO5d/YTY2c91t2+T6OZVeQ/2iJ7s2CIVdv1guRCv3/woulP6TLMc5EEdhIBgFFjcAmJn4sz4tK8ZZiwY2z1nDR/oVS6SSCoFpQS/iWAS6zbBf0RvPyYEB4F7pZSQVfwwwTlwFqcq17q9wkOavIUglII1cvgHo6+wxFoBSHXqQxNgNALn0SMfG34eLwMET0A6wJEoNaESVHCKYkwljAcbygbrkeKTLG6eQWKNYCYFjYhdmChrTvZC49YfGJUJuuO3CR4A3/WcVu8Ba9VAc31gwdYo27r7imCJgd6vox3rLI7QcDwsAQxLp2GtyKPQNnJDa05h4nsphEct8EafTlEuxVseKq4+E5cXL/Ak9AGTKMSG1ICGCRW68h1VKgtw37yzBCwKTnrjU2cJJj7dczsLNNiYCm/9fgVD9ImVUbWONrQTRvQ2CQJS7AkVMSZasz1ord18p35t4TsiyzcNnNYrT8Wrf17EUzoxbdUcHBvFKhSxLD2gzW1Uy9S3O/I4GNkBVZKyCHS0Mry/8nbt+sI3qeDhypVfUIsNhq0SI8OnrTrYCDQwdxr3DBVeh9wTL0L/0ZNInChy9Sz+yVxFm7fPpoLzsDEiu1KFK9pZ10wHqpd/Bo4k+ZfehcGZN8Abm4TKpZ8gqpQxR277eS6UZXvWuTM2+RYLsWZpqJ5VZYWeciS6/+u3QGsVcB87ApWFH6FR/gt0r78TIepGXNrYBMPt+zu1FOVqLf92LrhxaV62vuxK6bFcDEuMJy0E0VSlYI23BxZvAyfBJlh+fik/c+q4PVCo9k7FsA7O6LPnUQsP/rn4paoWbBDZWDICQlxkYe17slPVmEDFCGx6A8tDL5yeMdxcI9UWeVB6mzkw+VW2OPcBw2uWhLu1DcpW0tl3hp0E9vOl4bkzU7qbbUhr0sF3Jp4kGHtuPlucfZ+2thUB7DSP6IxX5fEWKu5fzs+8Pmt4/VXWqHYGXxp4hwAUwbYkOJ87dOxDikNLRaCmYid5qNjIDpaGZt48ajh+Xe4fBO4F74qgBv7B6S9yh4+/J6ORbx6CLxTZREb2oWtD06/NGplcnTarqcA9s6UrAmwSiqH6489/jWRm7cblTwmNTSs3vDg4+fIJnISNBD1WL5E9FtnPF7QG+7j+E2AAXUZQb2HTr3kAAAAASUVORK5CYII="
/>
普通用户 ￥{{detail.price}}/天
<nuxt-link to="/?isLook=1">
<span>立即查看></span>
</nuxt-link>
</div>
</div>
</div>
......@@ -99,11 +103,7 @@
<span style="margin-left: 5px;">{{detail.buyPrice}}万/辆</span>
</div>
</div>
<div
class="buttonDetails"
style="margin-top: 20px;position: relative;"
@click="showScan()"
>
<div class="buttonDetails" style="margin-top: 20px;position: relative;" @click="showScan()">
<span class="ft-20">预定用车</span>
<div v-if="isShowScan" class="scan">
<img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" style="width: 90px;" />
......@@ -118,12 +118,27 @@
</div>
</div>
<div class="flex-jcb">
<div style="width: 800px;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t content-t-l" style="text-align: left;">房车详情</h3>
<ul class="sidebar-list" :class="barFixed?'isSidebar':''">
<li>
<p></p>
<p @click="goAnchor('1')">房车详情</p>
</li>
<li :class="{isFex1:fex1}">
<p></p>
<p @click="goAnchor('2')">租车须知</p>
</li>
<li :class="{isFex2:fex2}">
<p></p>
<p @click="goAnchor('3')">房车配置</p>
</li>
</ul>
<div :class="barFixed?'empty':''" style="display:none"></div>
<div style="width: 682px;background: #fff;margin: 20px 0;padding: 20px;">
<h3 class="content-t content-t-l" style="text-align: left;" ref="fex1">房车详情</h3>
<div class="models-details" v-html="detail.modelsDetails"></div>
<h3 class="content-t">租车须知</h3>
<h3 class="content-t" ref="fex2">租车须知</h3>
<div class="models-details" v-html="notice[0].value"></div>
<h3 class="content-t">房车配置</h3>
<h3 class="content-t" ref="fex3">房车配置</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>
......@@ -131,15 +146,14 @@
</div>
</div>
</div>
<div
id="fixContainer"
class="content-r-link"
style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;"
style="width: 220px;background: #fff;margin: 20px 0;padding: 20px;"
>
<div id="vehicleHotId" :class="barFixed?'isFixed':''">
<div id="vehicleHotId" :class="barFixed?'isFixed':''" style="width:220px">
<h3 class="content-t hot-t-r">热门车型</h3>
<!--<div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;">-->
<!--<h3 class="content-t hot-t-r">热门车型</h3>-->
<div class="content-detail tc" v-for="item in hotList" :key="item.id">
<img :src="item.coverPic" :alt="item.name" style="width: 161px;height: 116px;" />
<div class="tc ellipsis cc-title">{{item.name}}</div>
......@@ -158,14 +172,14 @@
</template>
<script>
import axios from "../../plugins/axios";
import menuModal from "../../components/menu";
import footerModal from "../../components/footer";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import GoTop from "../../components/goTop";
import axios from '../../plugins/axios'
import menuModal from '../../components/menu'
import footerModal from '../../components/footer'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import GoTop from '../../components/goTop'
export default {
transition: "bounce",
transition: 'bounce',
components: {
GoTop,
menuModal,
......@@ -176,99 +190,141 @@ export default {
isShowScan: false,
lengthPic: 0,
preIndex: 0, //当前轮播选中图
barFixed: false
};
barFixed: false,
fex1: false,
fex2: false
}
},
created() {
if (typeof window !== "undefined") {
window.addEventListener("scroll", this.handleScroll);
if (typeof window !== 'undefined') {
window.addEventListener('scroll', this.handleScroll)
window.addEventListener('scroll', this.slideScroll)
}
},
validate({ params }) {
console.log(params.id);
return !isNaN(+params.id);
return !isNaN(+params.id)
},
async asyncData({ env, params, route, error }) {
const { data } = await axios.get(
"/api/uccn/vehicleModel/app/unauth/detail/" + route.query.name
);
let user = data.data;
data.data.modelsDetails = data.data.modelsDetails?data.data.modelsDetails.replace(
'/api/uccn/vehicleModel/app/unauth/detail/' + route.query.name
)
let user = data.data
data.data.modelsDetails = data.data.modelsDetails
? data.data.modelsDetails.replace(
/<img/g,
"<img style='width:100%'"
):'';
data.data.modelParam = data.data.modelParam?JSON.parse(data.data.modelParam):'';
let pic = data.data.picture.split(",");
user.pictureList = pic;
user.pictureNum = pic.length;
user.buyPrice = parseFloat((user.buyPrice / 10000).toFixed(2));
)
: ''
data.data.modelParam = data.data.modelParam
? JSON.parse(data.data.modelParam)
: ''
let pic = data.data.picture.split(',')
user.pictureList = pic
user.pictureNum = pic.length
user.buyPrice = parseFloat((user.buyPrice / 10000).toFixed(2))
user.userMemberLevel.map(function(item) {
item.price = parseFloat(((item.discount / 100) * user.price).toFixed(2));
item.disPrice = parseFloat((user.price - item.price).toFixed(2));
});
item.price = parseFloat(
((item.discount / 100) * user.price).toFixed(2)
)
item.disPrice = parseFloat((user.price - item.price).toFixed(2))
})
if (!user) {
return error({ message: "User not found", statusCode: 404 });
return error({ message: 'User not found', statusCode: 404 })
}
let tempBannerData = await axios.get(
"/api/uccn/random/list/app/unauth/get?type=1"
);
let hot = tempBannerData.data.data;
'/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.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("/api/app/cofig/app/unauth/types?types=6");
let notice = noticeData.data.data;
return { detail: user, hotList: hot, notice: notice };
: ''
})
let noticeData = await axios.get(
'/api/app/cofig/app/unauth/types?types=6'
)
let notice = noticeData.data.data
return { detail: user, hotList: hot, notice: notice }
},
methods: {
goAnchor(val) {
let fex1 = this.$refs.fex1
let fex2 = this.$refs.fex2
let fex3 = this.$refs.fex3
if (val == 1) {
window.scrollTo(0, fex1.offsetTop)
} else if (val == 2) {
window.scrollTo(0, fex2.offsetTop)
} else if (val == 3) {
window.scrollTo(0, fex3.offsetTop)
}
},
changeImgIndex(index, length) {
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true);
this.lengthPic = length;
console.log(this.lengthPic);
this.$refs.mySwiper.swiper.slideTo(index + 1, 1000, true)
this.lengthPic = length
},
/**
* 立即预定
*/
showScan() {
this.isShowScan = !this.isShowScan;
this.isShowScan = !this.isShowScan
},
handleScroll: function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let path = $nuxt.$route.path;
if (path.indexOf("/vehicleList") != -1) {
var menuTop = document.querySelector("#vehicleHotId").offsetTop;
document.body.scrollTop
let path = $nuxt.$route.path
if (path.indexOf('/vehicleList') != -1) {
var menuTop = document.querySelector('#vehicleHotId').offsetTop
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop - 120) {
this.barFixed = true;
}
let fixContainer = document.querySelector("#fixContainer").offsetTop;
if (scrollTop < fixContainer - 120) {
this.barFixed = false;
// this.tabIndex = 0;
if (scrollTop > menuTop - 20) {
this.barFixed = true
}
let fixContainer = document.querySelector('#fixContainer')
.offsetTop
if (scrollTop < fixContainer - 20) {
this.barFixed = false
//this.tabIndex = 0;
}
}
},
slideScroll() {
this.$nextTick(function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
let fex2 = this.$refs.fex2 || ''
let fex3 = this.$refs.fex3 || ''
scrollTop > fex2.offsetTop - 20
? (this.fex1 = true)
: (this.fex1 = false)
scrollTop > fex3.offsetTop - 20
? (this.fex2 = true)
: (this.fex2 = false)
})
},
//查看详情跳转首页
lookInfo() {}
},
mounted() {
let t = this;
let galleryThumbs = new Swiper(".gallery-thumbs", {
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", {
})
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
autoplay: {
......@@ -277,9 +333,9 @@ export default {
},
on: {
slideChangeTransitionEnd: function() {
t.preIndex = this.activeIndex - 1;
t.preIndex = this.activeIndex - 1
if (t.preIndex == t.detail.pictureNum) {
t.preIndex = 0;
t.preIndex = 0
}
}
},
......@@ -290,29 +346,99 @@ export default {
thumbs: {
swiper: galleryThumbs
}
});
})
},
head() {
return {
title: this.detail.name,
meta: [
{ hid: "keywords", name: "keywords", content: this.detail.keywords },
{
hid: "description",
name: "description",
hid: 'keywords',
name: 'keywords',
content: this.detail.keywords
},
{
hid: 'description',
name: 'description',
content: this.detail.description
}
]
};
}
};
}
}
</script>
<style scoped>
.empty {
width: 190px;
display: block !important;
}
.sidebar-list {
width: 190px;
background: #fff;
margin: 20px 0;
padding: 20px;
height: 300px;
}
.sidebar-list li {
position: relative;
margin-bottom: 56px;
}
.sidebar-list li p:nth-child(1) {
width: 15px;
height: 15px;
background: #999;
position: relative;
border-radius: 50%;
display: inline-block;
}
.sidebar-list li p:nth-child(2) {
display: inline-block;
margin-left: 15px;
}
.sidebar-list li p:nth-child(1)::after {
content: '';
position: absolute;
width: 63px;
height: 1px;
background: #999;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
left: -24px;
top: -31px;
}
.sidebar-list li:first-child p:nth-child(1)::after {
width: 0;
}
.sidebar-list li:nth-child(1) p {
color: #1bbb9f;
}
.sidebar-list li:nth-child(1) p:nth-child(1) {
background: #1bbb9f;
}
.isFex1 p,
.isFex2 p {
color: #1bbb9f;
}
.isFex1 p:nth-child(1),
.isFex2 p:nth-child(1) {
background: #1bbb9f !important;
}
.isFex1 p:nth-child(1)::after,
.isFex2 p:nth-child(1)::after {
background: #1bbb9f !important;
}
.isFixed {
position: fixed;
top: 120px;
width: 300px;
width: 220px;
background: #fff;
}
.isSidebar {
position: fixed;
top: 153px;
width: 190px;
background: #fff;
}
.member-list {
......@@ -405,7 +531,7 @@ p img {
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
content: '';
display: block;
height: 0;
clear: both;
......
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