Skip to content

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

首页修复

parent 5e2f097e
Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 249 deletions
assets/index.css
View file @ b13f0311
...@@ -144,6 +144,7 @@ li { ...@@ -144,6 +144,7 @@ li {
.swiper-containerActivity .swiper-wrapper .swiper-slide { .swiper-containerActivity .swiper-wrapper .swiper-slide {
width: 100%; width: 100%;
padding-right: 10px;
} }
.swiper-containerActivity .swiper-wrapper .swiper-slide img { .swiper-containerActivity .swiper-wrapper .swiper-slide img {
...@@ -161,7 +162,8 @@ li { ...@@ -161,7 +162,8 @@ li {
} }
.swiper-containerActivity .left:hover { .swiper-containerActivity .left:hover {
box-shadow: 0px 20px 40px 0px rgba(102, 102, 102, 0.3); background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .15);
} }
.swiper-containerActivity .left img { .swiper-containerActivity .left img {
...@@ -213,7 +215,8 @@ li { ...@@ -213,7 +215,8 @@ li {
.swiper-containerActivity ul li:hover { .swiper-containerActivity ul li:hover {
/* box-shadow: -1px 4px 12px rgba(0, 0, 0, .1); */ /* box-shadow: -1px 4px 12px rgba(0, 0, 0, .1); */
box-shadow: 0px 20px 40px 0px rgba(102, 102, 102, 0.3); background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .15);
} }
.vehicle-container { .vehicle-container {
...@@ -319,7 +322,7 @@ li { ...@@ -319,7 +322,7 @@ li {
.tour-t-l-03 .tour-detail, .tour-t-l-03 .tour-detail,
.tour-t-l-04 .tour-detail, .tour-t-l-04 .tour-detail,
.tour-t-r-02 .tour-detail { .tour-t-r-02 .tour-detail {
padding: 5px 50px 5px 37px; padding: 5px 21px 5px 19px;
} }
.tour-t-r-01 .tour-detail img, .tour-t-r-01 .tour-detail img,
...@@ -478,7 +481,7 @@ li { ...@@ -478,7 +481,7 @@ li {
.show-detail span { .show-detail span {
border: 1px solid rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255);
padding: 10px 40px 10px 20px; padding: 10px 23px 10px 20px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
...@@ -544,10 +547,12 @@ li { ...@@ -544,10 +547,12 @@ li {
color: #fff; color: #fff;
transition: all .3s ease; transition: all .3s ease;
color: #fff; color: #fff;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .15);
background: rgba(27,187,159, 1);
} }
.tourActive .tour-t-s, .tourActive .tour-t-s,
.tour-t-s-b { .tourActive .tour-t-s-b {
color: #fff; color: #fff;
} }
...@@ -632,13 +637,14 @@ li { ...@@ -632,13 +637,14 @@ li {
.hot-car .min-win .left, .hot-car .min-win .left,
.hot-car .min-win .left .right { .hot-car .min-win .left .right {
margin-top: 40px; margin-top: 40px;
width: 1180px; width: 1120px;
} }
.hot-car .min-win .left>ul { .hot-car .min-win .left>ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: 0;
} }
.hot-car .min-win .left>ul>li { .hot-car .min-win .left>ul>li {
...@@ -665,7 +671,7 @@ li { ...@@ -665,7 +671,7 @@ li {
} }
.pic-show { .pic-show {
width: 492px; width: 481px;
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
...@@ -874,7 +880,7 @@ li { ...@@ -874,7 +880,7 @@ li {
height: 53px; height: 53px;
line-height: 53px; line-height: 53px;
width: 567px; width: 567px;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #eee;
} }
.flex-aic-jcb-warp .right li span { .flex-aic-jcb-warp .right li span {
...@@ -893,8 +899,11 @@ li { ...@@ -893,8 +899,11 @@ li {
.flex-aic-jcb-warp .right li:hover a { .flex-aic-jcb-warp .right li:hover a {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
text-indent: 4px;
}
.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) { .flex-aic-jcb-warp .right li:hover span:nth-child(1) {
width: 430px; width: 430px;
} }
......
assets/main.css
View file @ b13f0311
...@@ -77,7 +77,7 @@ body { ...@@ -77,7 +77,7 @@ body {
display: flex; display: flex;
} }
.min-win{ .min-win{
width: 1200px; width: 1120px;
} }
.bread-menu{ .bread-menu{
padding-bottom: 30px; padding-bottom: 30px;
......
assets/menu.css
View file @ b13f0311
...@@ -237,7 +237,7 @@ a { ...@@ -237,7 +237,7 @@ a {
.sidebar { .sidebar {
position: fixed; position: fixed;
right: 50px; right: 0;
top: 50%; top: 50%;
margin-top: -50px; margin-top: -50px;
background: #333; background: #333;
......
components/banner.vue
View file @ b13f0311
<template> <template>
<div class="banner banner-b-n-n"> <div>
<div class="box"> <div class="swiper-container">
<ul id="bannerBox"> <div class="swiper-wrapper">
<li <div class="swiper-slide" v-for="(item,index) in list" :key="index">
v-for="(item, index) in list" <a href>
:key="item.id" <img :src="item.cover" :alt="item.alt" />
:class="index === current ? 'active' : ''" </a>
@click="bannerClick(index, item)"
>
<!-- <img :src= "item.cover" style="width:100%;height:560px;min-height: 350px;" :alt="item.alt"/> -->
<img :src="item.cover" style="width:100%;" class="indexBanner" :alt="item.alt" />
</li>
</ul>
<div class="status" id="status">
<span
class="name-t ellipsis"
v-for="(item, index) in list"
:key="item.id"
:class="index === current ? 'active' : ''"
@mouseenter="changeBanner(index)"
@mouseleave="startLoop"
>{{item.title}}</span>
</div> </div>
</div> </div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
import axios from '../plugins/axios'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default { export default {
name: 'banner', name: 'banner',
data() { data() {
return { return {
current: 0, // 当前索引 banner: [
timerId: null, // 清除循环标记 {
intStyle: {}, alt: '异地取还',
imgHeight: '', cover:
uiHeight: '', 'https://xxtest.upyuns.com/image/admin/2019-08-30/32.jpg',
screenWidth: '',//屏幕宽度 id: 29,
title: '异地取还',
url: ''
},
{
alt: '欣新房车',
cover:
'https://mgmt.dfangche.com/image/admin/2019-10-22/109.jpg',
id: 29,
title: '欣新房车',
url: ''
}
]
} }
}, },
props: [ props: [
...@@ -48,82 +51,41 @@ export default { ...@@ -48,82 +51,41 @@ export default {
'color', 'color',
'fontSize' 'fontSize'
], ],
methods: { methods: {},
getArticle() { mounted() {
this.$emit('getArticle', this.article) let t = this
}, let title = this.banner
// 鼠标移入状态圆点 t.swiper = new Swiper('.swiper-container', {
changeBanner(index) { // autoplay: true,
this.$emit('change', this.current) effect: 'fade',
this.stopLoop() pagination: {
this.current = index el: '.swiper-pagination',
}, clickable: true,
// 鼠标点击banner内容 renderBullet: function(index, className) {
bannerClick(index, item) { return '<span class="' + className + '">' + title[index].title + '</span>'
this.$emit('click', index, item)
},
// 点击上一张按钮
prev() {
if (this.current > 0) {
// 将对象列表对应的索引和整个对象传出去
this.$emit('prev', this.current, this.list)
this.current--
} else {
this.$emit('prev', this.current, this.list)
this.current = this.list.length - 1
}
},
// 点击下一张按钮
next() {
if (this.current < this.list.length - 1) {
this.$emit('prev', this.current, this.list)
this.current++
} else {
this.$emit('prev', this.current, this.list)
this.current = 0
} }
},
// 鼠标移出继续循环播放
startLoop() {
this.int(4000)
},
// 鼠标移入停止循环播放
stopLoop() {
clearTimeout(this.timerId) // 清除循环
},
// 初始化加载
int(time) {
this.timerId = setInterval(() => {
this.next()
}, time)
// 初始化样式
this.intStyle = {
width: this.width + 'px',
height: this.height + 'px',
background: this.background,
color: this.color
} }
},
//图片高度
picHeigth() {
this.$nextTick(function() {
// console.log(document.getElementsByClassName('indexBanner')[0].height);
this.imgHeight = document.getElementsByClassName(
'indexBanner'
)[0].height
this.uiHeight = document.getElementById('bannerBox')
this.uiHeight.style.height = this.imgHeight + 'px'
}) })
}
},
mounted() {
this.picHeigth()
}, },
created() { created() {
this.int(4000)
} }
} }
</script> </script>
<style> <style>
@import '../assets/banner.css'; @import '../assets/banner.css';
.swiper-pagination-bullet{
display: inline-block;
width: auto;
height: auto;
background: #fff;
opacity: 1;
padding: 8px 19px;
border-radius: 0;
font-size: 14px;
margin: 10px 4px !important;
}
.swiper-pagination-bullet-active{
background: #1bbb9f;
color: #fff;
}
</style> </style>
components/footer.vue
View file @ b13f0311
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
</ul> --> </ul> -->
<vue-seamless-scroll :data="list" :class-option="optionLeft" class="seamless-warp2" style="width:864px;"> <vue-seamless-scroll :data="list" :class-option="optionLeft" class="seamless-warp2" style="width:864px;">
<ul class="item" style="overflow: hidden;"> <ul class="item" style="overflow: hidden;">
<li v-for="(item,index) in list" :key="index" v-text="item.name"></li> <li v-for="(item,index) in list" :key="index">
<a target="_blank" style="color:#fff" :href="item.linkUrl" v-text="item.name"></a>
</li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
...@@ -79,6 +81,7 @@ export default { ...@@ -79,6 +81,7 @@ export default {
let { let {
data: { data } data: { data }
} = await axios.get('/api/uccn/app/unauth/friend_link/list') } = await axios.get('/api/uccn/app/unauth/friend_link/list')
if (data.length == 0) { if (data.length == 0) {
this.listShow = false this.listShow = false
} else { } else {
......
components/menu.vue
View file @ b13f0311
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</el-select> </el-select>
<el-button <el-button
slot="append" slot="append"
style="width:88px;height:43px;background:#1bbb9f;color:#fff;border-radius: 0;" style="width:88px;height:42px;background:#1bbb9f;color:#fff;border-radius: 0;"
class="search" class="search"
@click="findTo()" @click="findTo()"
>搜索</el-button> >搜索</el-button>
...@@ -443,10 +443,10 @@ export default { ...@@ -443,10 +443,10 @@ export default {
} }
.el-input__inner { .el-input__inner {
border: 1px solid transparent; border: 1px solid transparent !important;
} }
.el-input__inner:hover { .el-input__inner:hover {
border: 1px solid transparent; border: 1px solid transparent !important;
} }
.el-input__suffix { .el-input__suffix {
right: 15px; right: 15px;
......
pages/index.vue
View file @ b13f0311
...@@ -158,8 +158,8 @@ ...@@ -158,8 +158,8 @@
v-if="hotlist[isTourActives].length>3" v-if="hotlist[isTourActives].length>3"
> >
<div class="tour-t-l-03"> <div class="tour-t-l-03">
<img :src="hotlist[isTourActives][3].imgUrl" style="width: 224px;height: 160px;" /> <img :src="hotlist[isTourActives][3].imgUrl" style="width: 222px;height: 160px;" />
<div class="show-detail" style="width: 224px;height: 160px;"> <div class="show-detail" style="width: 222px;height: 160px;">
<p class="tour-t-l-00-title">{{hotlist[isTourActives][3].name}}</p> <p class="tour-t-l-00-title">{{hotlist[isTourActives][3].name}}</p>
<span class="tour-detail" style="border: 1px solid #fff;"> <span class="tour-detail" style="border: 1px solid #fff;">
查看详情 查看详情
...@@ -208,35 +208,13 @@ ...@@ -208,35 +208,13 @@
</div> </div>
</div> </div>
<!-- 三分钟了解欣新房车 -->
<!-- <div class="flex-fdc-jcc video-container">
<div class="tc title">3分钟了解欣新房车</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1100px;text-align: center">
<div class="line-title"></div>
</div>
</div>
<img src="https://mgmt.dfangche.com/xxfccn/image/home/television.png" style="width: 1200px;" />
<video
class="video-play"
width="320"
height="240"
preload="auto"
controls
muted
poster="https://mgmt.dfangche.com/xxfccn/image/home/video.jpg"
>
<source src="https://mgmt.dfangche.com/xxfccn/xxfccn.mp4" type="video/mp4" />您的浏览器不支持 HTML5 video 标签。
</video>
</!-->
<!-- 热门房车,多款房车任你选择 --> <!-- 热门房车,多款房车任你选择 -->
<div class="flex-fdc-jcc hot-car" style="margin-top:80px;padding-bottom:80px"> <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" style="color: #fff;">
热门房车 热门房车
<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择 <span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
</div> </div>
<div class="flex-aic-jcb more-container" style="width:1180px"> <div class="flex-aic-jcb more-container" style="width:1120px">
<div style="width: 1120px;text-align: center"> <div style="width: 1120px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
...@@ -331,9 +309,9 @@ ...@@ -331,9 +309,9 @@
<p></p> <p></p>
<div v-if="grade.common == true" class="membership-rules"> <div v-if="grade.common == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p> <p>1、尊享欣新房车荟永久8折租车；</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p> <p>2、尊享欣新房车荟任意款房车5天（A型房车与奔驰房车除外），价值7500元；</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p> <p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
<button @click="PurchaseBtn">购买会员 ></button> <button @click="PurchaseBtn">购买会员 ></button>
</div> </div>
<div v-else class="purchase"> <div v-else class="purchase">
...@@ -362,9 +340,9 @@ ...@@ -362,9 +340,9 @@
<p></p> <p></p>
<div v-if="grade.gold == true" class="membership-rules"> <div v-if="grade.gold == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p> <p>1、尊享欣新房车荟永久7折租车；</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p> <p>2、尊享欣新房车荟任意款房车12天（A型房车与奔驰房车除外），价值18000元；</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p> <p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
<button @click="PurchaseBtn1">购买会员 ></button> <button @click="PurchaseBtn1">购买会员 ></button>
</div> </div>
<div v-else class="purchase"> <div v-else class="purchase">
...@@ -392,9 +370,9 @@ ...@@ -392,9 +370,9 @@
<p></p> <p></p>
<div v-if="grade.diamond == true" class="membership-rules"> <div v-if="grade.diamond == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p> <p>1、尊享欣新房车荟永久6折租车；</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p> <p>2、尊享欣新房车荟任意款房车28天（A型房车与奔驰房车除外），价值42000元；</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p> <p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
<button @click="PurchaseBtn2">购买会员 ></button> <button @click="PurchaseBtn2">购买会员 ></button>
</div> </div>
<div v-else class="purchase"> <div v-else class="purchase">
...@@ -441,6 +419,7 @@ ...@@ -441,6 +419,7 @@
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
<div style="position: relative;">
<div class="swiper-containerActivity"> <div class="swiper-containerActivity">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in activityList" :key="index"> <div class="swiper-slide" v-for="(item,index) in activityList" :key="index">
...@@ -470,86 +449,20 @@ ...@@ -470,86 +449,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-button-prev swiper-button-black" style="margin: 90px 0 0 326px;"> <div class="swiper-button-prev swiper-button-black" style="margin: 0 0 0 -60px;">
<img <img
style="width: 20px;height: 20px;" style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png" src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"
/> />
</div> </div>
<div class="swiper-button-next swiper-button-black" style="margin: 90px 326px 0 0;"> <div class="swiper-button-next swiper-button-black" style="margin: 0 -60px 0 0;">
<img
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/>
</div>
</div>
<!-- 热门房车 -->
<!-- <div
class="flex-fdc-jcc vehicle-container vehicle-bg"
style="padding: 30px 0 155px 0;background-position: bottom;"
>
<div class="tc title">
热门房车
<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1160px;text-align: center">
<div class="line-title"></div>
</div>
<nuxt-link to="/vehicle">
<div>
MORE
<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png" />
</div>
</nuxt-link>
</div>
<div class="min-win">
<ul class="v-type-ul">
<li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li>
<li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li>
<li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li>
<li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li>
</ul>
<div class="banner-vehicle">
<div class="gallery-top-box">
<div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList0" :key="item.id">
<img :src="item.url" />
</div>
</div>
<div class="swiper-button-next swiper-button-black">
<img <img
style="width: 20px;height: 20px;" style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/next.png" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"
/> />
</div> </div>
<div class="swiper-button-prev swiper-button-black">
<img
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"
/>
</div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb">
<div
class="swiper-slide"
v-for="(item,index) in vehicleList0"
:key="item.id"
@click="changeImgIndex(index)"
>
<img :src="item.url" :class="preIndex==index?'active':''" alt />
</div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>-->
<!-- 新闻动态 --> <!-- 新闻动态 -->
<div class="flex-fdc-jcc" style="background: #fff;padding-bottom: 30px;"> <div class="flex-fdc-jcc" style="background: #fff;padding-bottom: 30px;">
...@@ -574,7 +487,7 @@ ...@@ -574,7 +487,7 @@
<h3>{{newsList[0].title}}</h3> <h3>{{newsList[0].title}}</h3>
<p>{{newsList[0].epitome}}</p> <p>{{newsList[0].epitome}}</p>
<div style="overflow: hidden;"> <div style="overflow: hidden;width: 478px;height: 278px;">
<img :src="newsList[0].coverImage" alt /> <img :src="newsList[0].coverImage" alt />
</div> </div>
</nuxt-link> </nuxt-link>
...@@ -862,6 +775,8 @@ export default { ...@@ -862,6 +775,8 @@ export default {
'api/uccn/member_level/app/unauth/list' 'api/uccn/member_level/app/unauth/list'
) )
let memberList = memberData.data.data let memberList = memberData.data.data
console.log(memberList)
//营地 //营地
const campsiteData = await axios.get( const campsiteData = await axios.get(
'api/uccn/app/unauth/campsite/shops?pageNo=1&pageSize=6' 'api/uccn/app/unauth/campsite/shops?pageNo=1&pageSize=6'
......
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