Skip to content

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

官网改版

parent 49261966
Expand all 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
This diff is collapsed.
pages/campsite.vue
View file @ 2ec0fb54
This diff is collapsed.
pages/campsiteDetails/_id.vue
View file @ 2ec0fb54
This diff is collapsed.
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
This diff is collapsed.
pages/tour.vue
View file @ 2ec0fb54
This diff is collapsed.
pages/tourDetails/_id.vue
View file @ 2ec0fb54
This diff is collapsed.
pages/vehicle.vue
View file @ 2ec0fb54
This diff is collapsed.
pages/vehicleList/_id.vue
View file @ 2ec0fb54
This diff is collapsed.
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