16 changed files with 488 additions and 114 deletions
-
BINsrc/assets/images/swiperLeft.png
-
BINsrc/assets/images/swiperRight.png
-
18src/assets/styles/base.css
-
BINsrc/assets/zlxcimgs/andriod.png
-
BINsrc/assets/zlxcimgs/home_image_banner@2x.png
-
BINsrc/assets/zlxcimgs/ios.png
-
12src/components/Foot.vue
-
79src/components/dstributiondMap.vue
-
1src/components/foot.scss
-
72src/components/swiper.vue
-
118src/components/swiperCoach.vue
-
134src/components/swiperSchool.vue
-
1src/main.js
-
2src/views/drivingMap/index.vue
-
70src/views/home/index.scss
-
95src/views/home/index.vue
|
After Width: 35 | Height: 63 | Size: 723 B |
|
After Width: 35 | Height: 63 | Size: 715 B |
@ -0,0 +1,18 @@ |
|||||
|
|
||||
|
|
||||
|
.towRowTxt { |
||||
|
-webkit-line-clamp: 2; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
word-wrap: break-word; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
.oneRowTxt { |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
|
||||
|
} |
||||
|
After Width: 21 | Height: 24 | Size: 775 B |
|
Before Width: 3840 | Height: 794 | Size: 444 KiB After Width: 1919 | Height: 571 | Size: 2.0 MiB |
|
After Width: 18 | Height: 22 | Size: 582 B |
@ -0,0 +1,118 @@ |
|||||
|
|
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<div class="swiper-container"> |
||||
|
<swiper :options="swiperOption" ref="myswiper"> |
||||
|
<swiper-slide v-for="(item, index) in swiperCoachlList" :key="index" > |
||||
|
<div class="swiper-slide_inner"> |
||||
|
<div class="cover"> |
||||
|
<img :src="item.image" alt=""> |
||||
|
<div class="text"> |
||||
|
<div class="txt oneRowTxt">{{ item.coachName }} <span style="margin-left: 10px;">{{ item.teachModel }}</span></div> |
||||
|
<div class="txt oneRowTxt">{{ item.schoolName }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
<!-- <div class="swiper-pagination" slot="pagination"></div> --> |
||||
|
</swiper> |
||||
|
<div class="swiper-button-prev "></div> |
||||
|
<div class="swiper-button-next"></div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
export default { |
||||
|
components: { swiper, swiperSlide }, |
||||
|
props: ['swiperCoachlList'], |
||||
|
data() { |
||||
|
return { |
||||
|
swiperOption: { |
||||
|
loop: false, |
||||
|
autoplay: 3000, |
||||
|
speed: 1000, |
||||
|
slidesPerView: 5, |
||||
|
spaceBetween: 10, |
||||
|
paginationClickable: true, |
||||
|
pagination: { |
||||
|
el: '.swiper-pagination', |
||||
|
clickable: true |
||||
|
}, |
||||
|
navigation: { |
||||
|
nextEl: '.swiper-button-prev', |
||||
|
prevEl: '.swiper-button-next' |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
monted() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.swiper-slide_inner { |
||||
|
width: 232px; |
||||
|
height: 314px; |
||||
|
border: 1px solid rgba(148, 148, 148, 0.4); |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
// overflow: hidden; |
||||
|
|
||||
|
|
||||
|
.cover { |
||||
|
width: 100%; |
||||
|
background: #f6f6f6; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
padding: 20px 0 0 20px; |
||||
|
box-sizing: border-box; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 96px; |
||||
|
z-index: 99; |
||||
|
background: rgba(236,157,75, 0.7); |
||||
|
.txt { |
||||
|
font-size: 18px; |
||||
|
color: #fff; |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.swiper-button-prev { |
||||
|
background: url('../assets/images/swiperLeft.png'); |
||||
|
background-size: 27px 44px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.swiper-button-next { |
||||
|
background: url('../assets/images/swiperRight.png'); |
||||
|
background-size: 27px 44px; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
|
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<div class="swiper-container"> |
||||
|
<swiper :options="swiperOption" ref="myswiper"> |
||||
|
<swiper-slide v-for="(item, index) in swiperSchoolList" :key="index" class="slide1"> |
||||
|
<div class="swiper-slide_inner"> |
||||
|
<div class="cover"> |
||||
|
<img :src="item.chargeBulletinBoard" alt=""> |
||||
|
</div> |
||||
|
<div class="text"> |
||||
|
<div class="txt oneRowTxt">{{ item.schoolName}}</div> |
||||
|
<div class="txt oneRowTxt">{{ item.commonPhone }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
<!-- <div class="swiper-pagination" slot="pagination"></div> --> |
||||
|
</swiper> |
||||
|
<div class="swiper-button-prev2"></div> |
||||
|
<div class="swiper-button-next2"></div> |
||||
|
|
||||
|
<!-- <div class="swiper-button-prev2" slot="button-prev"> </div> --> |
||||
|
<!-- <div class="swiper-button-next2" slot="button-next"> </div> --> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
export default { |
||||
|
// components: { swiper, swiperSlide }, |
||||
|
props: ['swiperSchoolList'], |
||||
|
data() { |
||||
|
return { |
||||
|
swiperOption: { |
||||
|
loop: true, |
||||
|
autoplay: 3000, |
||||
|
slidesPerView: 'auto', |
||||
|
speed: 600, |
||||
|
slidesPerView: 4, |
||||
|
spaceBetween: 16, |
||||
|
// prevButton: '.swiper-button-prev2', |
||||
|
// nextButton: '.swiper-button-next2', |
||||
|
// pagination: '.swiper-pagination', |
||||
|
paginationClickable: true, |
||||
|
navigation: { |
||||
|
prevEl: '.swiper-button-prev2', |
||||
|
nextEl: '.swiper-button-next2' |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
monted() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.slide1 { |
||||
|
transition: .2s; |
||||
|
&:hover { |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-container { |
||||
|
padding: 20px 0; |
||||
|
height: 351px; |
||||
|
} |
||||
|
.swiper-slide_inner { |
||||
|
width: 280px; |
||||
|
height: 313px; |
||||
|
// box-shadow: 0px 0px 3px 0px rgba(148, 148, 148, 0.6); |
||||
|
border: 1px solid rgba(148, 148, 148, 0.6); |
||||
|
box-sizing: border-box; |
||||
|
// overflow: hidden; |
||||
|
|
||||
|
.cover { |
||||
|
width: 100%; |
||||
|
background: #f6f6f6; |
||||
|
height: 220px; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
.text { |
||||
|
padding: 20px 0 0 20px; |
||||
|
// border: 1px solid #949494; |
||||
|
box-sizing: border-box; |
||||
|
// border-top: none; |
||||
|
.txt { |
||||
|
font-size: 18px; |
||||
|
color: #333; |
||||
|
&:first-child { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-button-prev2 { |
||||
|
background: url('../assets/images/swiperLeft.png') no-repeat; |
||||
|
background-size: 27px 44px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
width: 27px; |
||||
|
height: 44px; |
||||
|
margin-top: -22px; |
||||
|
left: 30px; |
||||
|
// margin-left: 20px; |
||||
|
z-index: 10; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.swiper-button-next2 { |
||||
|
background: url('../assets/images/swiperRight.png')no-repeat; |
||||
|
background-size: 27px 44px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
width: 27px; |
||||
|
height: 44px; |
||||
|
right: 30px; |
||||
|
// margin-right: 20px; |
||||
|
margin-top: -22px; |
||||
|
z-index: 10; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue