molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-07 00:04:00 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
7dd2b434208ed22abca343652ed10d75c4dfddf8
tuniao-ui/basicPage/test/test.vue
7small7 7dd2b43420 update
2023-12-04 23:33:01 +08:00

262 lines
9.7 KiB
Vue
Raw Blame History

<template>
<view class="basic-test">
<swiper class="swiper" :circular="true" :current="currentSwiperIndex" previous-margin="260rpx" next-margin="260rpx" @change="swiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper__item" :class="[swiperItemClass(index)]">
<view class="swiper__item__content" :class="[swiperContentClass(index)]">
<image :src="item" mode="scaleToFill"></image>
</view>
</swiper-item>
</swiper>
<swiper class="phone-swiper" :circular="true"
:current="phoneCurrentSwiperIndex" previous-margin="190rpx" next-margin="190rpx" @change="phoneSwiperChange">
<swiper-item v-for="(item,index) in phoneSwiperList" :key="index" class="phone-swiper__item">
<view class="tnphone-black-min phone-swiper__item__content wow fadeInLeft2" :class="[phoneSwiperContentClass(index)]">
<view class="skin wow fadeInRight2">
<view class="screen wow fadeInUp2">
<view class="peak wow">
<view class="sound"></view>
<view class="lens"></view>
</view>
<view class="demo-image">
<image :src="item.url" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: 'TestPage',
data() {
return {
swiperList: [
'https://resource.tuniaokj.com/images/swiper/spring.jpg',
'https://resource.tuniaokj.com/images/swiper/summer.jpg',
'https://resource.tuniaokj.com/images/swiper/autumn.jpg',
'https://resource.tuniaokj.com/images/swiper/winter.jpg',
'https://resource.tuniaokj.com/images/swiper/winter.jpg'
],
phoneSwiperList: [{
id: 0,
type: 'image',
name: '总有你想不到的创意',
text: '海量分享',
url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d1.png'
}, {
id: 1,
type: 'image',
name: '寻找一起成长的小伙伴',
text: '愉快玩耍',
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d4.png'
}, {
id: 2,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://resource.tuniaokj.com/images/swiper/test.jpg',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
}, {
id: 3,
type: 'image',
name: '更多彩蛋等你探索',
text: '酷炫多彩',
url: 'https://resource.tuniaokj.com/images/swiper/banner-animate.png',
pngurl: 'https://resource.tuniaokj.com/images/swiper/c4d5.png'
}],
currentSwiperIndex: 0,
phoneCurrentSwiperIndex: 0
}
},
computed: {
// 计算当前对应轮播前后的item对应的类
swiperItemClass() {
return (index) => {
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
return 'swiper__item--prev'
}
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
return 'swiper__item--next'
}
if (this.currentSwiperIndex === index) {
return 'swiper__item--current'
}
}
},
// 计算轮播内容对应的类
swiperContentClass() {
return (index) => {
if (this.currentSwiperIndex === index) {
return 'swiper__item__content--current'
}
if ((this.currentSwiperIndex === 0 && index === this.swiperList.length - 1) || (this.currentSwiperIndex - 1 === index)) {
return 'swiper__item__content--prev'
}
if ((this.currentSwiperIndex === this.swiperList.length - 1 && index === 0) || (this.currentSwiperIndex + 1 === index)) {
return 'swiper__item__content--next'
}
}
},
// 计算轮播内容对应的类
phoneSwiperContentClass() {
return (index) => {
if (this.phoneCurrentSwiperIndex === index) {
return 'phone-swiper__item__content--current'
}
if ((this.phoneCurrentSwiperIndex === 0 && index === this.phoneSwiperList.length - 1) || (this.phoneCurrentSwiperIndex - 1 === index)) {
return 'phone-swiper__item__content--prev'
}
if ((this.phoneCurrentSwiperIndex === this.phoneSwiperList.length - 1 && index === 0) || (this.phoneCurrentSwiperIndex + 1 === index)) {
return 'phone-swiper__item__content--next'
}
}
}
},
onReady() {
},
methods: {
// 轮播图切换
swiperChange(e) {
// console.log(e.detail.current);
this.currentSwiperIndex = e.detail.current
},
phoneSwiperChange(e) {
this.phoneCurrentSwiperIndex = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
.basic-test {
min-height: 100vh;
}
.swiper {
width: 100%;
height: 400rpx;
/deep/ .uni-swiper-slides {
inset: 0 260rpx;
}
&__item {
&--prev {
left: -10rpx;
}
&--next {
left: 10rpx;
}
&--current {
left: 0px;
}
&__content {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 30rpx;
overflow: hidden;
transition: transform 0.25s ease;
transform: scale(0.8);
&--prev {
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
}
&--next {
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
}
&--current {
transform: scale(1);
}
image {
width: 100%;
height: 100%;
}
}
}
}
.phone-swiper {
margin-top: 180rpx;
height: 900rpx;
/deep/ .uni-swiper-slides {
inset: 0 190rpx;
}
&__item {
&__content {
transition: transform 0.25s ease;
transform: scale(0.8);
&--prev {
transform: scale(0.8) perspective(200rpx) rotateY(10deg);
}
&--next {
transform: scale(0.8) perspective(200rpx) rotateY(-10deg);
}
&--current {
transform: scale(1);
}
}
.demo-image {
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 730rpx;
}
}
}
}
/* tnphone-black-min 细边框 start */
.tnphone-black-min {width: 380rpx; height: 760rpx; border-radius: 40rpx; background: #C6D1D8; padding: 7rpx; display: table; color: #333;
box-sizing: border-box; box-shadow: 0rpx 0rpx 0rpx 5rpx rgba(80,80,80,.8) inset; cursor: default; position: relative}
.tnphone-black-min .skin {width: 100%; height: 100%; border-radius: 40rpx; background: #222; padding: 10rpx; box-shadow: 0rpx 0rpx 0rpx 7rpx rgba(68,68,68,.3)}
.tnphone-black-min .screen {width: 100%; height: 100%; border-radius: 30rpx; background: #fff; position: relative; overflow: hidden}
.tnphone-black-min .head {width: 100%; height: 90rpx; text-align: center; position: absolute; padding: 45rpx 15rpx 10rpx 15rpx;}
.tnphone-black-min .peak {left: 22%;width: 56%; height: 27rpx; margin: -2rpx auto 0rpx; border-radius: 0 0 20rpx 20rpx; background: #222; position: absolute}
.tnphone-black-min .sound {width: 48rpx; height: 6rpx; border-radius: 15rpx; background: #555; position: absolute; left: 50%; top: 50%; margin-left: -24rpx; margin-top: -10rpx;
box-shadow: 0rpx 4rpx 4rpx 0rpx #444 inset}
.tnphone-black-min .lens {width: 6rpx; height: 6rpx; border-radius: 50%; background: #2c5487; position: absolute; left: 50%; top: 50%; margin-left: 34rpx; margin-top: -10rpx}
.tnphone-black-min .talk {width: 50%; height: 6rpx; border-radius: 15rpx; background: rgba(0,0,0,.3); position: absolute; bottom: 8rpx; left: 50%; margin-left: -25%}
.tnphone-black-min .area-l,.tnphone-black-min .area-r {width: 70rpx; height: 16rpx; position: absolute; top: 6rpx}
.tnphone-black-min .area-l {left: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-left: 20rpx;}
.tnphone-black-min .area-r {right: 0; text-align: center; font-size: 12rpx; line-height: 22rpx; text-indent: 10rpx; font-weight: 600; padding-right: 20rpx;}
.tnphone-black-min .fa-feed {float: left; font-size: 12rpx!important; transform:rotate(-45deg); margin-top: 4rpx; margin-right: 8rpx}
.tnphone-black-min .fa-battery-full {float: left; font-size: 12rpx!important; margin-top: 6rpx}
.tnphone-black-min .fa-chevron-left {float: left; margin-top: 4rpx}
.tnphone-black-min .fa-cog {float: right; margin-top: 4rpx}
.tnphone-black-min .btn01 {width: 3rpx; height: 28rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 105rpx; left: -3rpx}
.tnphone-black-min .btn02 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 160rpx; left: -3rpx}
.tnphone-black-min .btn03 {width: 3rpx; height: 54rpx; border-radius: 3rpx 0 0 3rpx; background: #222; position: absolute; top: 230rpx; left: -3rpx}
.tnphone-black-min .btn04 {width: 3rpx; height: 86rpx; border-radius: 0 3rpx 3rpx 0; background: #222; position: absolute; top: 180rpx; right: -3rpx}
/* tnphone-black-min 细边框 end */
</style>
Reference in New Issue View Git Blame Copy Permalink