Commit 54b22d01 by zsh

update

parent 0f5a868e
<template> <template>
<div class="class3"> <div class="class3">
<page-back />
<img class="img1" @click="change1" src="../../static/images/class3/more.png" /> <img class="img1" @click="change1" src="../../static/images/class3/more.png" />
<img class="img2" @click="change2" src="../../static/images/class3/more.png" /> <img class="img2" @click="change2" src="../../static/images/class3/more.png" />
<img class="img3" @click="change3" src="../../static/images/class3/more.png" /> <img class="img3" @click="change3" src="../../static/images/class3/more.png" />
<img class="img4" @click="change4" src="../../static/images/class3/back.png" /> <img class="img4" @click="change4" src="../../static/images/class3/back.png" />
<!-- 搜索 --> <!-- 搜索 -->
<div class="class3-search"> <div class="class3-search">
<div class="select-item"> <div class="select-item">
...@@ -45,7 +47,7 @@ ...@@ -45,7 +47,7 @@
</div> </div>
<!-- 弹框 --> <!-- 弹框 -->
<bullet-frame <bullet-frame
:visible="visible" :visible="visible"
@beforeClose="closePopup" @beforeClose="closePopup"
> >
...@@ -259,5 +261,5 @@ export default { ...@@ -259,5 +261,5 @@ export default {
height: 870px; height: 870px;
margin:-27px 0px 0px -40px; margin:-27px 0px 0px -40px;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="growthRecord"> <div class="growthRecord">
<page-back />
<div class="content"> <div class="content">
<div class="growthRecord-top"> <div class="growthRecord-top">
......
...@@ -36,7 +36,13 @@ ...@@ -36,7 +36,13 @@
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="carousel"></div> <div class="carousel">
<swiper :options="swiperOption" v-if="activeImgs.length">
<swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" >
<img :src=item />
</swiper-slide>
</swiper>
</div>
<!-- 视频 --> <!-- 视频 -->
<div class="video-wrap"> <div class="video-wrap">
...@@ -56,6 +62,14 @@ ...@@ -56,6 +62,14 @@
import Tab from 'components/Tab' import Tab from 'components/Tab'
import SelectItem from 'components/Select' import SelectItem from 'components/Select'
import VideoPlayer from 'components/VideoPlayer' import VideoPlayer from 'components/VideoPlayer'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import img1 from '../../static/images/progress/img1.png'
import img2 from '../../static/images/progress/img2.png'
import img3 from '../../static/images/progress/img3.png'
import img4 from '../../static/images/progress/img4.png'
import img5 from '../../static/images/progress/img5.png'
export default { export default {
data () { data () {
...@@ -153,6 +167,44 @@ export default { ...@@ -153,6 +167,44 @@ export default {
type: 'video/mp4' type: 'video/mp4'
} }
] ]
},
activeImgs: [img1, img2, img3, img4, img5],
swiperOption: {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
spaceBetween: 0,
// autoplay: true,
on: {
progress: function (progress) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
var slideProgress = this.slides[i].progress
var modify = 1
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
}
var translate = slideProgress * modify * 570 + 'px'
var scale = 1 - Math.abs(slideProgress) / 3
var zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
slide.transform('translateX(' + translate + ') scale(' + scale + ')')
slide.css('zIndex', zIndex)
slide.css('opacity', 1)
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0)
}
}
},
setTransition: function (transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition)
}
}
}
} }
} }
}, },
...@@ -160,7 +212,9 @@ export default { ...@@ -160,7 +212,9 @@ export default {
components: { components: {
Tab, Tab,
SelectItem, SelectItem,
VideoPlayer VideoPlayer,
swiper,
swiperSlide
}, },
mounted () { mounted () {
...@@ -199,6 +253,35 @@ export default { ...@@ -199,6 +253,35 @@ export default {
left: 50% !important; left: 50% !important;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.carousel {
.swiper-container {
width: 100%;
height: 100%;
.swiper-slide {
width: 520px !important;
height: 337px;
background: rgba(0, 34, 36, 0.3);
border-radius: 10px;
overflow: hidden;
&.swiper-slide-prev, &.swiper-slide-next {
opacity: .5 !important;
}
&.swiper-slide-active {
z-index: 10;
opacity: 1 !important;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
}
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -310,8 +393,8 @@ export default { ...@@ -310,8 +393,8 @@ export default {
position: absolute; position: absolute;
top: 432px; top: 432px;
left: 545px; left: 545px;
width: 812px; width: 520px;
height: 210px; height: 337px;
} }
.video-wrap { .video-wrap {
......
<template> <template>
<div class="sixth-page"> <div class="sixth-page">
<page-back />
<div class="left"> <div class="left">
<!-- 身心健康 --> <!-- 身心健康 -->
<div class="left-top" @click="healthy"></div> <div class="left-top" @click="healthy"></div>
...@@ -60,7 +62,7 @@ ...@@ -60,7 +62,7 @@
</div> </div>
<div class="edit" @click="edit"></div> <div class="edit" @click="edit"></div>
</div> </div>
<bullet-frame <bullet-frame
:visible="visible" :visible="visible"
@beforeClose="closePopup" @beforeClose="closePopup"
:layout="{width: '1102px', height: '792px'}" :layout="{width: '1102px', height: '792px'}"
...@@ -210,8 +212,8 @@ export default { ...@@ -210,8 +212,8 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less">
#swiper1 { .swiper1 {
widows: 500px; width: 500px;
height: 208px; height: 208px;
.swiper-container { .swiper-container {
...@@ -236,6 +238,8 @@ export default { ...@@ -236,6 +238,8 @@ export default {
} }
img { img {
display: block; display: block;
width: 100%;
height: 100%;
} }
} }
} }
...@@ -249,7 +253,7 @@ export default { ...@@ -249,7 +253,7 @@ export default {
overflow: hidden; overflow: hidden;
background: url('@{imagePath}bg.png') no-repeat center; background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto; margin: 0 auto;
verflow: hidden; overflow: hidden;
.left{ .left{
.left-top{ .left-top{
width: 96px; width: 96px;
......
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