<template>
|
<div class="bigbg">
|
<div class="left"></div>
|
<div class="right"></div>
|
<div class="banner-box" ref="root">
|
<!-- <div>{{source}}</div> -->
|
<div class="wrapper">
|
<div class="bg"></div>
|
<div class="bg2"></div>
|
<div
|
v-for="(item, index) in source"
|
:key="item.id"
|
:class="item.className"
|
:style="item.sty"
|
@click="slideClick(index,item.url)"
|
>
|
<img :src="item.pic" alt="" />
|
<div class="mark"></div>
|
<!-- <p class="detail">
|
<span>{{ item.descript.name }}</span>
|
<span>身份：{{ item.descript.identity }}</span>
|
<span>梦想：{{ item.descript.dream }}</span>
|
</p> -->
|
</div>
|
</div>
|
<a href="javascript:;" class="left" @click="changeSlide('left')"></a>
|
<a href="javascript:;" class="right" @click="changeSlide('right')"></a>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import debounce from "./debounce"
|
export default {
|
name: "Swiper3D",
|
data() {
|
return {
|
source: [
|
{
|
id:1,
|
pic:require("../../assets/img/2.SDK.png"),
|
descript:{
|
name:"sdk",
|
identity:"sdk",
|
dream:"sdk"
|
},
|
url:"https://cim.smartearth.cn/cims/api.html"
|
},
|
{
|
id:2,
|
pic:require("../../assets/img/1平台指南.png")
|
},
|
{
|
id:3,
|
pic:require("../../assets/img/3.开发套件.png"),
|
url:"https://cim.smartearth.cn/cims/examples.html"
|
},
|
{
|
id:4,
|
pic:require("../../assets/img/4.常见问题.png"),
|
},
|
{
|
id:5,
|
pic:require("../../assets/img/5.接口帮助.png"),
|
url:"http://103.85.165.99:9012/swagger-ui/index.html"
|
},
|
{
|
id:6,
|
pic:require("../../assets/img/6.SDK下载.png"),
|
},
|
],
|
initial:0,
|
interval:2000
|
}
|
},
|
watch:{
|
initial:function(newV, oldV){
|
this.source = this.computeda(newV, this.source);
|
}
|
},
|
methods: {
|
// 左右切换图片设置防抖效果
|
changeSlide(dir){
|
debounce(this.change,200,dir)
|
},
|
// 点击左右按钮切换图片
|
change(dir) {
|
if (dir === "left") {
|
// clearInterval(timer)
|
this.initial++;
|
this.initial >= this.source.length ? (this.initial = 0) : false;
|
return;
|
}
|
this.initial--;
|
this.initial < 0 ? (this.initial = this.source.length-1) : false;
|
},
|
// 点击哪张图片 哪张图片就到第一个
|
slideClick(index,url) {
|
// this.initial = index;
|
window.open(url)
|
},
|
// 处理每一项的样式
|
computeda(initial, source){
|
if (initial < 0) initial = 0;
|
let len = source.length,
|
temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
|
temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
|
temp3 = initial,
|
temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
|
temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2;
|
// temp6 = initial + 3 >= len ? initial + 3 - len : initial + 3;
|
return source.map((item, index) => {
|
console.log(index)
|
let transform = `translate3D(-50%, -50%,-300px)`,
|
zIndex = 0,
|
className = "slide";
|
switch (index) {
|
case temp3:
|
transform = `translate3D(-50%, -50%,900px) scale(0.38)`;
|
className = ["slide", "activate"];
|
zIndex = 3;
|
break;
|
case temp1:
|
transform = `translate3D(-110%, -50%,700px) rotateY(70deg) scale(0.38)`;
|
zIndex = 1;
|
break;
|
case temp5:
|
transform = `translate3D(10%, -50%,700px) rotateY(-70deg) scale(0.38)`;
|
zIndex = 1;
|
break;
|
case temp2:
|
transform = `translate3D(-82%, -50%,800px) rotateY(75deg) scale(0.38)`;
|
zIndex = 2;
|
break;
|
case temp4:
|
transform = `translate3D(-18%, -50%,800px) rotateY(-75deg) scale(0.38)`;
|
zIndex = 2;
|
break;
|
}
|
item.sty = {
|
transform,
|
zIndex,
|
};
|
item.className = className;
|
return item;
|
});
|
}
|
},
|
mounted() {
|
// 获取父组件的数据
|
let source = this.source;
|
// 商品数据不足5个 补足5个
|
let diff = 5 - source.length;
|
if (diff > 0 && diff !== 4) {
|
for (let i = 0; i < diff; i++) {
|
source.push({
|
...source[i],
|
id: parseInt(source[source.length - 1].id + 1),
|
});
|
}
|
}
|
this.source = this.computeda(this.initial, this.source);
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.bigbg{
|
width: 100%;
|
height: 100%;
|
background-color: #112239;
|
// background-image: url("../../assets/img/组 5.png");
|
// background-size:100% 100% ;
|
.left{
|
width: 316px;
|
height: 99%;
|
display: inline-block;
|
background-image: url("../../assets/img/组6.png");
|
background-size:316px 99%;
|
position: absolute;
|
z-index: 1;
|
}
|
.right{
|
width: 316px;
|
height: 99%;
|
display: inline-block;
|
right: 0px;
|
position: absolute;
|
background-image: url("../../assets/img/组6 拷贝.png");
|
background-size:316px 99%;
|
z-index: 1;
|
}
|
.banner-box {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate3d(-50%, -50%,0);
|
background-color: rgba(0, 0, 0, 0.5);
|
perspective:1450px;
|
}
|
.bg{
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
transform: translate3d(0, 0, 620px) scale(0.58);
|
background-image: url("../../assets/img/组 5.png");
|
background-size:100% 100% ;
|
}
|
.bg2{
|
position:absolute;
|
width: 100%;
|
height: 100%;
|
transform: translate3d(0, 0, 619px) scale(0.58);
|
background-color:#112239;
|
}
|
.wrapper {
|
transform-style:preserve-3d;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
/* transition: 0.5s; */
|
}
|
.slide {
|
width: 407px;
|
height: 267px;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
transition: 2s;
|
box-shadow: 0px 30px 30px 2px black;
|
// background-color: azure;
|
}
|
.back{
|
display:none
|
}
|
img {
|
height: 100%;
|
width: 100%;
|
vertical-align: bottom;
|
}
|
.mark {
|
position: absolute;
|
top: 0;
|
width: 99%;
|
height: 99%;
|
background-color: rgba(0, 0, 0, 0.5);
|
filter: blur(20px);
|
}
|
.mark:hover {
|
background-color: rgba(0, 0, 0, 0);
|
cursor: pointer;
|
}
|
|
.activate .mark {
|
background-color: rgba(0, 0, 0, 0);
|
}
|
.detail {
|
display: flex;
|
flex-direction: column;
|
/* padding: 10px 0px; */
|
position: absolute;
|
bottom: 0;
|
color: #fff;
|
background-color: rgba(0, 0, 0, 0.5);
|
max-height: 0px;
|
overflow: hidden;
|
transition: 0.2s;
|
font-size: 14px;
|
width: 100%;
|
}
|
.detail span {
|
margin: 2px 10px;
|
}
|
.slide:hover .detail {
|
max-height: 100%;
|
padding: 5px 0px;
|
}
|
a.left {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
left: 320px;
|
z-index: 9;
|
/* background-color: black; */
|
width: 45px;
|
height: 45px;
|
background-image: url("../../assets/img/图层 5.png");
|
background-size: contain;
|
cursor: pointer;
|
}
|
a.right {
|
position: absolute;
|
top: 50%;
|
right: 320px;
|
transform: translateY(-50%);
|
z-index: 9;
|
width: 50px;
|
height: 50px;
|
background-image: url("../../assets/img/图层 5 拷贝.png");
|
background-size: contain;
|
cursor: pointer;
|
}
|
}
|
</style>
|
