Skip to content

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

首页修复

parent 5e2f097e
Expand all Hide 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
}
},
// 鼠标移出继续循环播放
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'
})
}
},
methods: {},
mounted() {
this.picHeigth()
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>'
}
}
})
},
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
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