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 {
.swiper-containerActivity .swiper-wrapper .swiper-slide {
width: 100%;
padding-right: 10px;
}
.swiper-containerActivity .swiper-wrapper .swiper-slide img {
......@@ -161,7 +162,8 @@ li {
}
.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 {
......@@ -213,7 +215,8 @@ li {
.swiper-containerActivity ul li:hover {
/* 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 {
......@@ -319,7 +322,7 @@ li {
.tour-t-l-03 .tour-detail,
.tour-t-l-04 .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,
......@@ -478,7 +481,7 @@ li {
.show-detail span {
border: 1px solid rgb(255, 255, 255);
padding: 10px 40px 10px 20px;
padding: 10px 23px 10px 20px;
color: #fff;
font-size: 14px;
position: relative;
......@@ -544,10 +547,12 @@ li {
color: #fff;
transition: all .3s ease;
color: #fff;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .15);
background: rgba(27,187,159, 1);
}
.tourActive .tour-t-s,
.tour-t-s-b {
.tourActive .tour-t-s-b {
color: #fff;
}
......@@ -632,13 +637,14 @@ li {
.hot-car .min-win .left,
.hot-car .min-win .left .right {
margin-top: 40px;
width: 1180px;
width: 1120px;
}
.hot-car .min-win .left>ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
}
.hot-car .min-win .left>ul>li {
......@@ -665,7 +671,7 @@ li {
}
.pic-show {
width: 492px;
width: 481px;
display: inline-block;
position: relative;
}
......@@ -874,7 +880,7 @@ li {
height: 53px;
line-height: 53px;
width: 567px;
border-bottom: 1px solid #d9d9d9;
border-bottom: 1px solid #eee;
}
.flex-aic-jcb-warp .right li span {
......@@ -893,8 +899,11 @@ li {
.flex-aic-jcb-warp .right li:hover a {
color: #fff;
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) {
width: 430px;
}
......
assets/main.css
View file @ b13f0311
......@@ -77,7 +77,7 @@ body {
display: flex;
}
.min-win{
width: 1200px;
width: 1120px;
}
.bread-menu{
padding-bottom: 30px;
......
assets/menu.css
View file @ b13f0311
......@@ -237,7 +237,7 @@ a {
.sidebar {
position: fixed;
right: 50px;
right: 0;
top: 50%;
margin-top: -50px;
background: #333;
......
components/banner.vue
View file @ b13f0311
<template>
<div class="banner banner-b-n-n">
<div class="box">
<ul id="bannerBox">
<li
v-for="(item, index) in list"
:key="item.id"
:class="index === current ? 'active' : ''"
@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 class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in list" :key="index">
<a href>
<img :src="item.cover" :alt="item.alt" />
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
import axios from '../plugins/axios'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
name: 'banner',
data() {
return {
current: 0, // 当前索引
timerId: null, // 清除循环标记
intStyle: {},
imgHeight: '',
uiHeight: '',
screenWidth: '',//屏幕宽度
banner: [
{
alt: '异地取还',
cover:
'https://xxtest.upyuns.com/image/admin/2019-08-30/32.jpg',
id: 29,
title: '异地取还',
url: ''
},
{
alt: '欣新房车',
cover:
'https://mgmt.dfangche.com/image/admin/2019-10-22/109.jpg',
id: 29,
title: '欣新房车',
url: ''
}
]
}
},
props: [
......@@ -48,82 +51,41 @@ export default {
'color',
'fontSize'
],
methods: {
getArticle() {
this.$emit('getArticle', this.article)
},
// 鼠标移入状态圆点
changeBanner(index) {
this.$emit('change', this.current)
this.stopLoop()
this.current = index
},
// 鼠标点击banner内容
bannerClick(index, item) {
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
methods: {},
mounted() {
let t = this
let title = this.banner
t.swiper = new Swiper('.swiper-container', {
// autoplay: true,
effect: 'fade',
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function(index, className) {
return '<span class="' + className + '">' + title[index].title + '</span>'
}
},
// 鼠标移出继续循环播放
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() {
this.int(4000)
}
}
</script>
<style>
@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>
components/footer.vue
View file @ b13f0311
......@@ -14,7 +14,9 @@
</ul> -->
<vue-seamless-scroll :data="list" :class-option="optionLeft" class="seamless-warp2" style="width:864px;">
<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>
</vue-seamless-scroll>
</div>
......@@ -79,6 +81,7 @@ export default {
let {
data: { data }
} = await axios.get('/api/uccn/app/unauth/friend_link/list')
if (data.length == 0) {
this.listShow = false
} else {
......
components/menu.vue
View file @ b13f0311
......@@ -101,7 +101,7 @@
</el-select>
<el-button
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"
@click="findTo()"
>搜索</el-button>
......@@ -443,10 +443,10 @@ export default {
}
.el-input__inner {
border: 1px solid transparent;
border: 1px solid transparent !important;
}
.el-input__inner:hover {
border: 1px solid transparent;
border: 1px solid transparent !important;
}
.el-input__suffix {
right: 15px;
......
pages/index.vue
View file @ b13f0311
......@@ -158,8 +158,8 @@
v-if="hotlist[isTourActives].length>3"
>
<div class="tour-t-l-03">
<img :src="hotlist[isTourActives][3].imgUrl" style="width: 224px;height: 160px;" />
<div class="show-detail" style="width: 224px;height: 160px;">
<img :src="hotlist[isTourActives][3].imgUrl" style="width: 222px;height: 160px;" />
<div class="show-detail" style="width: 222px;height: 160px;">
<p class="tour-t-l-00-title">{{hotlist[isTourActives][3].name}}</p>
<span class="tour-detail" style="border: 1px solid #fff;">
查看详情
......@@ -208,35 +208,13 @@
</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="tc title" style="color: #fff;">
热门房车
<span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择
</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 class="line-title"></div>
</div>
......@@ -331,9 +309,9 @@
<p></p>
<div v-if="grade.common == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p>
<p>1、尊享欣新房车荟永久8折租车；</p>
<p>2、尊享欣新房车荟任意款房车5天（A型房车与奔驰房车除外），价值7500元；</p>
<p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
<button @click="PurchaseBtn">购买会员 ></button>
</div>
<div v-else class="purchase">
......@@ -362,9 +340,9 @@
<p></p>
<div v-if="grade.gold == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p>
<p>1、尊享欣新房车荟永久7折租车；</p>
<p>2、尊享欣新房车荟任意款房车12天（A型房车与奔驰房车除外），价值18000元；</p>
<p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
<button @click="PurchaseBtn1">购买会员 ></button>
</div>
<div v-else class="purchase">
......@@ -392,9 +370,9 @@
<p></p>
<div v-if="grade.diamond == true" class="membership-rules">
<p>1.尊享欣新房车永久7折租车;</p>
<p>2.尊享欣新房车任一款房车5天(A型房车与奔驰房车除外),价值1800元;</p>
<p>3.尊享欣新房车举办的各种沙龙讲座以及户外活动</p>
<p>1、尊享欣新房车荟永久6折租车；</p>
<p>2、尊享欣新房车荟任意款房车28天（A型房车与奔驰房车除外），价值42000元；</p>
<p>3、尊享欣新房车举办的各种沙龙讲座及户外活动。</p>
<button @click="PurchaseBtn2">购买会员 ></button>
</div>
<div v-else class="purchase">
......@@ -441,6 +419,7 @@
</div>
</nuxt-link>
</div>
<div style="position: relative;">
<div class="swiper-containerActivity">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in activityList" :key="index">
......@@ -470,86 +449,20 @@
</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
style="width: 20px;height: 20px;"
src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"
/>
</div>
<div class="swiper-button-next swiper-button-black" style="margin: 90px 326px 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">
<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 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 class="flex-fdc-jcc" style="background: #fff;padding-bottom: 30px;">
......@@ -574,7 +487,7 @@
<h3>{{newsList[0].title}}</h3>
<p>{{newsList[0].epitome}}</p>
<div style="overflow: hidden;">
<div style="overflow: hidden;width: 478px;height: 278px;">
<img :src="newsList[0].coverImage" alt />
</div>
</nuxt-link>
......@@ -862,6 +775,8 @@ export default {
'api/uccn/member_level/app/unauth/list'
)
let memberList = memberData.data.data
console.log(memberList)
//营地
const campsiteData = await axios.get(
'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