160 lines
4.1 KiB
Vue
160 lines
4.1 KiB
Vue
<template>
|
||
<view class="home-container">
|
||
<!-- <image class="logo" src="@/static/images/superMan.png"></image>
|
||
<view class="text-area">
|
||
<text class="title">这里是主页，放几个统计图</text>
|
||
</view> -->
|
||
<!-- 轮播图 -->
|
||
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
||
:autoplay="true" interval="5000" duration="500">
|
||
<swiper-item v-for="(item,index) in swiperList" :key="index">
|
||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
|
||
v-if="item.type=='video'"></video>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- <uni-section title="系统功能" type="line"></uni-section> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
swiperList: [
|
||
// {
|
||
// id: 0,
|
||
// type: 'image',
|
||
// url: '/static/images/banner/banner01.jpg'
|
||
// }, {
|
||
// id: 1,
|
||
// type: 'image',
|
||
// url: '/static/images/banner/banner02.jpg',
|
||
// }, {
|
||
// id: 2,
|
||
// type: 'image',
|
||
// url: '/static/images/banner/banner03.jpg'
|
||
// },
|
||
{
|
||
id: 3,
|
||
type: 'image',
|
||
url: '/static/images/banner/banner04.jpg'
|
||
}, {
|
||
id: 4,
|
||
type: 'image',
|
||
url: '/static/images/banner/banner05.jpg'
|
||
}, {
|
||
id: 5,
|
||
type: 'image',
|
||
url: '/static/images/banner/banner06.jpg'
|
||
}, {
|
||
id: 6,
|
||
type: 'image',
|
||
url: '/static/images/banner/banner07.jpg'
|
||
}],
|
||
towerStart: 0,
|
||
direction: '',
|
||
dotStyle: true
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.TowerSwiper('swiperList');
|
||
this.direction = 'left';
|
||
// 初始化towerSwiper 传已有的数组名即可
|
||
},
|
||
methods: {
|
||
changeGrid(e) {
|
||
this.$modal.showToast('模块建设中~')
|
||
console.log(e)
|
||
},
|
||
navChange(e) {
|
||
console.log("navChange", e)
|
||
//todo 校验是否有权限
|
||
var path = e.path;
|
||
console.log(path)
|
||
//this.PageCur = e.currentTarget.dataset.cur
|
||
this.$tab.navigateTo(path)
|
||
},
|
||
// 初始化towerSwiper
|
||
TowerSwiper(name) {
|
||
let list = this[name];
|
||
console.log(list)
|
||
for (let i = 0; i < list.length; i++) {
|
||
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
|
||
list[i].mLeft = i - parseInt(list.length / 2)
|
||
}
|
||
this.swiperList = list
|
||
},
|
||
// towerSwiper触摸开始
|
||
TowerStart(e) {
|
||
console.log(e)
|
||
this.towerStart = e.touches[0].pageX
|
||
},
|
||
// towerSwiper计算方向
|
||
TowerMove(e) {
|
||
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
|
||
},
|
||
// towerSwiper计算滚动
|
||
TowerEnd(e) {
|
||
let direction = this.direction;
|
||
let list = this.swiperList;
|
||
if (direction == 'right') {
|
||
let mLeft = list[0].mLeft;
|
||
console.log(list[0])
|
||
let zIndex = list[0].zIndex;
|
||
for (let i = 1; i < this.swiperList.length; i++) {
|
||
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
||
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
||
}
|
||
this.swiperList[list.length - 1].mLeft = mLeft;
|
||
this.swiperList[list.length - 1].zIndex = zIndex;
|
||
} else {
|
||
let mLeft = list[list.length - 1].mLeft;
|
||
let zIndex = list[list.length - 1].zIndex;
|
||
for (let i = this.swiperList.length - 1; i > 0; i--) {
|
||
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
||
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
||
}
|
||
this.swiperList[0].mLeft = mLeft;
|
||
this.swiperList[0].zIndex = zIndex;
|
||
}
|
||
this.direction = ""
|
||
this.swiperList = this.swiperList
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.home-container {
|
||
background: linear-gradient(180.00deg, rgb(181, 202, 245) 0%, rgb(184, 204, 245) 40.449%, rgba(213, 227, 249, 0) 87.96%);
|
||
width: 100%;
|
||
height: 90vh;
|
||
overflow: hidden;
|
||
}
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.logo {
|
||
height: 200rpx;
|
||
width: 200rpx;
|
||
margin-top: 200rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
color: #8f8f94;
|
||
}
|
||
</style> |