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
-
77src/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
-
64src/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