Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit b628b848 by zsh
Options

update

parent 54b22d01
Showing with 626 additions and 71 deletions
package-lock.json
...@@ -6694,16 +6694,16 @@ ...@@ -6694,16 +6694,16 @@
}, },
"dom7": { "dom7": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz?cache=0&sync_timestamp=1604921054322&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom7%2Fdownload%2Fdom7-2.1.5.tgz", "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=", "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": { "requires": {
"ssr-window": "^2.0.0" "ssr-window": "^2.0.0"
}, },
"dependencies": { "dependencies": {
"ssr-window": { "ssr-window": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q=" "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
} }
} }
}, },
...@@ -13347,8 +13347,8 @@ ...@@ -13347,8 +13347,8 @@
}, },
"ssr-window": { "ssr-window": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-1.0.1.tgz", "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k=" "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
}, },
"ssri": { "ssri": {
"version": "5.3.0", "version": "5.3.0",
...@@ -13585,8 +13585,8 @@ ...@@ -13585,8 +13585,8 @@
}, },
"swiper": { "swiper": {
"version": "4.5.1", "version": "4.5.1",
"resolved": "https://registry.nlark.com/swiper/download/swiper-4.5.1.tgz?cache=0&sync_timestamp=1619793302865&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fswiper%2Fdownload%2Fswiper-4.5.1.tgz", "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha1-7UOZjngM60eGEAecjSP9Ql7KY28=", "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"requires": { "requires": {
"dom7": "^2.1.3", "dom7": "^2.1.3",
"ssr-window": "^1.0.1" "ssr-window": "^1.0.1"
...@@ -14681,6 +14681,37 @@ ...@@ -14681,6 +14681,37 @@
"requires": { "requires": {
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
"swiper": "^4.0.7" "swiper": "^4.0.7"
},
"dependencies": {
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
},
"dependencies": {
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
}
}
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"swiper": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
}
} }
}, },
"vue-count-to": { "vue-count-to": {
......
package.json
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
"echarts": "^5.1.2", "echarts": "^5.1.2",
"element-ui": "^2.15.5", "element-ui": "^2.15.5",
"qs": "^6.10.1", "qs": "^6.10.1",
"swiper": "^4.5.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
"vue-count-to": "^1.0.13", "vue-count-to": "^1.0.13",
......
src/components/BulletFrame/index.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<i class="close" @click="close"></i> <i class="close" @click="close"></i>
<div class="content"> <div class="content">
<slot> <slot>
</slot> </slot>
</div> </div>
</div> </div>
...@@ -20,6 +20,13 @@ export default { ...@@ -20,6 +20,13 @@ export default {
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
},
layoutProps: {
type: Object,
default () {
return {}
}
} }
}, },
data () { data () {
......
src/components/Carsourl/index.vue 0 → 100644
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/components/Select/index.vue
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
}, },
beforeDestroy () { beforeDestroy () {
this.clearTimeout(timerId) clearTimeout(timerId)
timerId = null timerId = null
} }
} }
......
src/components/Tab/index.vue
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
&.active { &.active {
width: 160px; width: 160px;
height: 71px; height: 71px;
// background: url('./images/progressactive.png') no-repeat left top; background: url('./images/progressactive.png') no-repeat left top;
} }
} }
......
src/components/swiper3d/index.vue 0 → 100644
<template>
<div class="swiper-container-custom">
<ul class="swiper-wrap">
<li>
<img src="./images/img1.png">
</li>
<li>
<img src="./images/img2.png">
</li>
<li>
<img src="./images/img3.png">
</li>
<li>
<img src="./images/img4.png">
</li>
<li>
<img src="./images/img5.png">
</li>
</ul>
<ul class="swiper-dots" style="display: none;"></ul>
<ul class="swiper-navigator" style="display: none;">
<li class="swiper-btn-prev">&lt;</li>
<li class="swiper-btn-next">&gt;</li>
</ul>
</div>
</template>
<script>
import CustomSwiper from './swiper3d'
export default {
name: '',
mounted () {
new CustomSwiper('.swiper-container-custom', {
pagination: '.swiper-dots',
navigator: {
prev: '.swiper-btn-prev',
next: '.swiper-btn-next'
},
delay: 2000,
autoPlay: false
})
}
}
</script>
<style lang="less" scoped>
.swiper-container-custom {
width: 820px;
padding-bottom: 10px;
position: relative;
}
.swiper-navigator {
width: 90%;
height: 30px;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.swiper-btn-next,
.swiper-btn-prev {
color: #fff;
background: rgba(0, 0, 0, 0.5);
position: absolute;
width: 30px;
height: 30px;
-ms-display: flex;
display: -webkit-flex;
display: flex;
padding-top: 3px;
-ms-justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.swiper-btn-next {
right: -40px;
}
.swiper-btn-prev {
left: -40px;
}
.swiper-wrap {
width: 820px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-ms-perspective: 500px;
-webkit-perspective: 500px;
perspective: 500px;
display: -webkit-flex;
display: flex;
-ms-display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-align-items: center;
z-index: 4;
position: relative;
}
.swiper-wrap li {
position: absolute;
left: 0;
height: auto;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.5);
border-radius: 6%;
width: auto;
top: 0;
}
.swiper-wrap li:first-child {
position: relative;
}
.swiper-wrap.transition li {
transition: 0.5s;
}
.swiper-wrap img {
width: 100%;
display: block;
}
.p1 {
z-index: 3;
-webkit-transform: translateZ(100px) scale(0.5);
transform: translateZ(100px) scale(0.5);
-ms-transform: translateZ(100px) scale(0.5);
}
.p2 {
z-index: 2;
-webkit-transform: translate3d(15%, 0, 90px) scale(0.4);
transform: translate3d(15%, 0, 90px) scale(0.4);
-ms-transform: translate3d(15%, 0, 90px) scale(0.4);
}
.swiper-3 .p3,
.swiper-6 .p6 {
z-index: 2;
-webkit-transform: translate3d(-15%, 0, 90px) scale(0.4);
transform: translate3d(-15%, 0, 90px) scale(0.4);
-ms-transform: translate3d(-15%, 0, 90px) scale(0.4);
}
.swiper-5 .p3,
.swiper-6 .p3 {
z-index: 1;
-webkit-transform: translate3d(26%, 0, 80px) scale(0.3);
transform: translate3d(26%, 0, 80px) scale(0.3);
-ms-transform: translate3d(26%, 0, 80px) scale(0.3);
}
.swiper-4 .p3,
.swiper-6 .p4 {
-webkit-transform: translateZ(80px) scale(0.3);
transform: translateZ(80px) scale(0.3);
-ms-transform: translateZ(80px) scale(0.3);
}
.swiper-5 .p4,
.swiper-6 .p5 {
z-index: 1;
-webkit-transform: translate3d(-26%, 0, 80px) scale(0.3);
transform: translate3d(-26%, 0, 80px) scale(0.3);
-ms-transform: translate3d(-26%, 0, 80px) scale(0.3);
}
.swiper-4 .p4,
.swiper-5 .p5,
.swiper-6 .p6 {
z-index: 2;
-webkit-transform: translate3d(-15%, 0, 90px) scale(0.4);
transform: translate3d(-15%, 0, 90px) scale(0.4);
-ms-transform: translate3d(-15%, 0, 90px) scale(0.4);
}
.swiper-dots {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-ms-transform: translateX(-50%);
bottom: 11%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.swiper-dots li {
width: 20px;
height: 2px;
background: #b5b5b5;
margin-right: 10px;
float: left;
transition: 0.3s;
}
.swiper-dots li:last-child {
margin: 0;
}
.swiper-dots .active {
background: #ff4949;
}
</style>
src/components/swiper3d/swiper3d.js 0 → 100755
/* eslint-disable */
export default class CustomSwiper {
constructor (ele, config = {}) {
var container = document.querySelector(ele),
bannerWrap = container.querySelector('.swiper-wrap'),
btnPrev = container.querySelector('.swiper-btn-prev'),
btnNext = container.querySelector('.swiper-btn-next'),
lis = container.querySelectorAll('.swiper-wrap li'),
delay = config.delay || 2000,
autoPlay = config.autoPlay === undefined ? true : config.autoPlay,
p1 = lis[0],
p2 = lis[1],
p3 = lis[2],
p4 = lis[3],
p5 = lis[4],
p6 = lis[5],
prev = null,
next = null,
maxNum = lis.length - 1,
dots = {},
timer = 0,
dotIndex = 0,
isAddDot = false,
startP, disX, disY, index
if (lis.length < 3) {
throw ('image number need 3+')
}
if (config.navigator) {
if (config.navigator.prev) {
prev = document.querySelector(config.navigator.prev)
}
if (config.navigator.next) {
next = document.querySelector(config.navigator.next)
}
}
if (lis.length > 6) {
p5 = lis[lis.length - 2]
p6 = lis[lis.length - 1]
for (let i = 0; i < lis.length; i++) {
lis[i].classList.add('p4')
}
p1.className = 'p1'
p2.className = 'p2'
p3.className = 'p3'
p5.className = 'p5'
p6.className = 'p6'
bannerWrap.classList.add('swiper-6')
} else {
for (let i = 0; i < lis.length; i++) {
lis[i].classList.add(`p${i + 1}`)
}
bannerWrap.classList.add(`swiper-${lis.length}`)
}
// 设置点
if (config.pagination) {
let p = container.querySelector(config.pagination)
for (let i = 0, len = lis.length; i < len; i++) {
let li = document.createElement('li')
p.appendChild(li)
}
dots = p.querySelectorAll('li')
dots[0].className = 'active'
}
bannerWrap.classList.add('transition')
// 图片移动,dire判断是否滑动过
function move (dire) {
var arrCls = [] // 保存类名,用来赋值
dire = dire || false
dotIndex++
// 得到所有类名
for (var i = 0; i < lis.length; i++) {
arrCls.push(lis[i].className)
}
// 循环赋值类名
for (var i = 0; i < lis.length; i++) {
if (dire) {
// 判断左滑
if (dire < 0) {
index = i - 1 // 得到最前面元素的上一个, 自己脑补过程
if (index < 0) {
index = maxNum
}
} else if (dire > 0) { // 判断右滑
index = i + 1 // 下一个
if (index > maxNum) {
index = 0
}
if (!isAddDot) { // 点导航下一个
dotIndex -= 2
isAddDot = true
}
}
}
// 如果没有参数,正常循环
if (!dire) {
index = i - 1
if (index < 0) {
index = maxNum
}
}
lis[i].className = arrCls[index]
}
if (dotIndex > maxNum) {
dotIndex = 0
} else if (dotIndex < 0) {
dotIndex = maxNum
}
isAddDot = false // 判断是否加过
setDotActive(dotIndex)
}
function setDotActive (index) {
if (config.pagination) {
for (var i = 0; i < dots.length; i++) {
dots[i].className = ''
}
dots[index].className = 'active'
}
}
function setTimer () {
if (autoPlay) {
timer = setInterval(move, delay)
}
}
function addTransition () {
bannerWrap.classList.add('transition')
}
function removeTransition () {
bannerWrap.classList.remove('transition')
}
function picTransform (x) {
var p1 = container.querySelector('.p1'),
p2 = container.querySelector('.p2'),
p3 = container.querySelector('.p3'),
p4 = container.querySelector('.p4'),
p5 = container.querySelector('.p5'),
p6 = container.querySelector('.p6')
var percentV2 = Math.floor(p2.offsetWidth * 0.15), // p2 的百分比转px
percentV3 = Math.floor(p3.offsetWidth * 0.26) // p3
var number = lis.length > 6 ? 6 : lis.length
if (x < -7) {
x = -7
} else if (x > 12) {
x = 12
}
p1.style.transform = 'translate3d(' + x + 'px,0,100px) scale(.5)'
p2.style.transform = 'translate3d(' + (percentV2 - x) + 'px,0,90px) scale(.4)'
switch (number) {
case 3:
p3.style.transform = 'translate3d(' + (-percentV2 - x) + 'px,0,90px) scale(.4)'
break
case 4:
p4.style.transform = 'translate3d(' + (-percentV2 - x) + 'px,0,90px) scale(.4)'
break
case 5:
p3.style.transform = 'translate3d(' + (percentV3 - (x * 2)) + 'px,0,80px) scale(.3)'
p4.style.transform = 'translate3d(' + (-percentV3 - (x * 4)) + 'px,0,80px) scale(.3)'
p5.style.transform = 'translate3d(' + (-percentV2 - (x * 2)) + 'px,0,90px) scale(.4)'
break
case 6:
p3.style.transform = 'translate3d(' + (percentV3 - (x * 2)) + 'px,0,80px) scale(.3)'
p4.style.transform = 'translate3d(' + x + 'px,0,80px) scale(.3)'
p5.style.transform = 'translate3d(' + (-percentV3 - (x * 4)) + 'px,0,80px) scale(.3)'
p6.style.transform = 'translate3d(' + (-percentV2 - (x * 2)) + 'px,0,90px) scale(.4)'
break
}
}
function disabledPrev (e) {
e.preventDefault()
}
setTimer()
bannerWrap.addEventListener('touchstart', function (e) {
document.addEventListener('touchmove', disabledPrev(e), {passive: false}) // 禁止滑动后退
removeTransition()
startP = e.changedTouches[0].clientX
clearInterval(timer)
}, false)
bannerWrap.addEventListener('touchmove', function (e) {
var movex = e.changedTouches[0].clientX
disX = movex - startP // 得到滑动的距离
picTransform(disX / 20) // 让图片缓慢滑动
}, false)
bannerWrap.addEventListener('touchend', function (e) {
document.removeEventListener('touchmove', disabledPrev(e), {passive: false}) // 禁止滑动后退
addTransition()
var p1 = container.querySelector('.p1'),
p2 = container.querySelector('.p2'),
p3 = container.querySelector('.p3'),
p4 = container.querySelector('.p4'),
p5 = container.querySelector('.p5'),
p6 = container.querySelector('.p6')
// 清除行内样式，否则类名的样式不生效
if (p1) { p1.style.cssText = '' }
if (p2) { p2.style.cssText = '' }
if (p3) { p3.style.cssText = '' }
if (p4) { p4.style.cssText = '' }
if (p5) { p5.style.cssText = '' }
if (p6) { p6.style.cssText = '' }
// 防止点击时也会触发
if (disX) {
move(disX)
disX = false
}
setTimer()
}, false)
bannerWrap.addEventListener('mouseenter', function () {
clearInterval(timer)
})
btnPrev.addEventListener('mouseenter', function () {
clearInterval(timer)
})
btnNext.addEventListener('mouseenter', function () {
clearInterval(timer)
})
btnPrev.addEventListener('click', function () {
clearInterval(timer)
})
btnNext.addEventListener('click', function () {
clearInterval(timer)
})
bannerWrap.addEventListener('mouseleave', function () {
setTimer()
})
btnPrev.addEventListener('mouseleave', function () {
setTimer()
})
btnNext.addEventListener('mouseleave', function () {
setTimer()
})
if (prev) {
prev.onclick = function () {
move(1)
}
prev.onmousedown = function () {
clearInterval(timer)
}
prev.onmouseup = function () {
setTimer()
}
}
if (next) {
next.onmousedown = function () {
clearInterval(timer)
}
next.onmouseup = function () {
setTimer()
}
next.onclick = function () {
move(-1)
}
}
}
}
src/pages/progress.vue
...@@ -37,11 +37,25 @@ ...@@ -37,11 +37,25 @@
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="carousel"> <div class="carousel">
<swiper :options="swiperOption" v-if="activeImgs.length"> <!-- <div class="swiper-container swiper-container-horizontal">
<swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" > <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3300px, 0px, 0px);">
<img :src=item /> <div class="swiper-slide">
</swiper-slide> <img src="../../static/images/progress/img1.png">
</swiper> </div>
<div class="swiper-slide">
<img src="../../static/images/progress/img2.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img3.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img4.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img5.png">
</div>
</div>
</div> -->
</div> </div>
<!-- 视频 --> <!-- 视频 -->
...@@ -51,9 +65,12 @@ ...@@ -51,9 +65,12 @@
<bullet-frame <bullet-frame
:visible="visible" :visible="visible"
:layout="{width: '1347px', height: '786px'}" :layoutProps="{width: 'auto', height: 'auto'}"
@beforeClose="visible = false"
> >
<img src="../../static/images/progress/teacher-details.png" /> <div class="teacher-details">
<img src="../../static/images/progress/teacher-details.png" />
</div>
</bullet-frame> </bullet-frame>
</div> </div>
</template> </template>
...@@ -62,14 +79,9 @@ ...@@ -62,14 +79,9 @@
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 from 'swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'
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 () {
...@@ -167,44 +179,6 @@ export default { ...@@ -167,44 +179,6 @@ 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)
}
}
}
} }
} }
}, },
...@@ -212,13 +186,56 @@ export default { ...@@ -212,13 +186,56 @@ export default {
components: { components: {
Tab, Tab,
SelectItem, SelectItem,
VideoPlayer, VideoPlayer
swiper,
swiperSlide
}, },
mounted () { mounted () {
this.chooseSchool() this.chooseSchool()
new Swiper('.swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 3,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination'
// clickable :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 * 260 + 'px'
var scale = 1 - Math.abs(slideProgress) / 5
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)
}
}
}
})
}, },
methods: { methods: {
...@@ -260,8 +277,8 @@ export default { ...@@ -260,8 +277,8 @@ export default {
height: 100%; height: 100%;
.swiper-slide { .swiper-slide {
width: 520px !important; width: 394px !important;
height: 337px; height: 210px;
background: rgba(0, 34, 36, 0.3); background: rgba(0, 34, 36, 0.3);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
...@@ -393,8 +410,16 @@ export default { ...@@ -393,8 +410,16 @@ export default {
position: absolute; position: absolute;
top: 432px; top: 432px;
left: 545px; left: 545px;
width: 520px; width: 1200px;
height: 337px;
.swiper-container {
padding-bottom: 60px;
}
.swiper-slide {
width: 520px;
height: 210px;
}
} }
.video-wrap { .video-wrap {
...@@ -406,4 +431,17 @@ export default { ...@@ -406,4 +431,17 @@ export default {
border: 1px solid rgba(255, 255, 255, .39); border: 1px solid rgba(255, 255, 255, .39);
overflow: hidden; overflow: hidden;
} }
.teacher-details {
position: absolute;
top: -27px;
right: -38px;
bottom: -55px;
left: -38px;
> img {
width: 100%;
height: 100%;
}
}
</style> </style>
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