wz/src/views/components/solution.vue

<script setup>
	import commonProduct from './commonProduct.vue'
</script>
<template>
	 <div class="box" id='solution'>
		<div class="title">
			<span>解决方案</span>
			<span>possible solutions</span>
		</div>
		<ul class='ul1'>
			<li>
				<p>自然资源</p>
			</li>
			<li>
				<p>生态环境</p>
			</li>
			<li>
	        <p>森林防火</p>
			</li>
			<li>
				<div class='item'>
					<div class='item1'>
						<div class='item11'>1</div>
						<div class='item12'>2</div>
					</div>
					<div class='item2'>3</div>
					<div class='item3'>
						<div class='item31'>4</div>
						<div class='item32'>5</div>
					</div>
				</div>
				<p>城市规划</p>
			</li>
			<li>			  
				<p>数字孪生</p>
			</li>
	    </ul>
		
		
		
		<ul class='ul2'>
			<li>				
				<p>自然资源</p>
			</li>
			<li>
				<p>生态环境</p>
			</li>
			<li>
				<p>森林防火</p>
			</li>
			<li>
				<div class='item'>
					<div class='item1'>
						<div class='item11'></div>
						<div class='item12'></div>
					</div>
					<div class='item2'></div>
					<div class='item3'>
						<div class='item31'></div>
						<div class='item32'></div>
					</div>
				</div>		
				<p>城市规划</p>
			</li>
			<li>
				<p>数字孪生</p>
			</li>
		</ul>  
	</div>
</template>

<script>
	export default {
		/* 数据 */
		data() {
			return {
				//产品列表
				productlist:[],
				
			}
		},
		
	
		/* 方法 */
		methods: {
			//接口数据请求
		    getdate(){
				this.$http.get('/getTableList', {
					tableName: 'base_app_info',
					sqlWhere: "",
					orderByField: ''
				}).then(res => {
					if (res.data.length > 0) {
						this.productlist=res.data
					} else {
						ElMessage.error('账号或密码输入错误!')
					}
				})
			},
			//图标选择跳转
			getItem(index){
				  window.location.href=this.productlist[index[0]].url
			},
		
			
		
		},
	    created(){
			this.getdate()
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes overturnpre {
		0%{
			opacity: 1;
		}
		25%{
			opacity: 1;
		}
		30%{
			opacity: 0;
		}
		100%{
			opacity: 0;
		}
	}
	@keyframes overturnaft {
		0%{
			opacity: 0;
			
		}
		25%{
			opacity: 0;
			
		}
		30%{
			opacity: 1;
		}
		100%{
			opacity: 1;
		}
	}
	
	@keyframes overturn {
		0%{
			opacity: 0;
			
		}
		50%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	
	
	@keyframes overturnpre3 {
		0%{
			opacity: 1;
			
		}
		60%{
			opacity: 1;
		}
		61%{
			opacity: 0;
		}
		
		100%{
			opacity: 0;
		}
	}
	@keyframes overturnaft3 {
		0%{
			opacity: 0;
			
		}
		60%{
			opacity: 0;
		}
		61%{
			opacity: 1;
		}
	
		100%{
			opacity: 1;
		}
	}
	
	@keyframes overturn {
		0%{
			opacity: 0;
			
		}
		50%{
			opacity: 0;
		}
	
		100%{
			opacity: 1;
		}
	}
	
	@keyframes lb {
		0%{
			left:100%;
		}
	
		100%{
			left:-100%;
		}
		
	}

.box {
	// display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	height: 23vw;
	/* 过渡为0.3秒 */
	transition: all .5s;
	&>.title{
		height: 3vw;
		font-size: 1.5vw;
		line-height: 3vw;
		width: 100%;
		padding-left: 3vw;
		&>span{
			float:left;
		}
	}
	& >ul{
			position: absolute;
			top:3vw;
			left:100%;
			margin:0rem;
			width: 100%;
			height: 20vw;
			/* 超出部分隐藏 */
			overflow: hidden;
			/* 过渡为0.3秒 */
			transition: all .5s;
			&>li{
				background-color: aqua;
				position: relative;
				float: left;
				list-style-type: none;
				border: 0.1vw solid #000000;
				width: 10vw;
				height: 100%;
				/* 过渡为0.5秒 */
				transition: all .5s;
				
				&>p{
					/* 绝对定位 */
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 1.5vw;
					line-height: 1.5vw;
					text-align: center;
					font-size:0.8vw;
					font-weight: 700;
					color: #fff;
					/* 文字遮罩层 */
					background-color: rgba(0, 0, 0, .3);
					transition: all .5s;
				}
				&>.item{
					position: absolute;
					top:0;
					left:0;
					width: 10vw;
					height: calc(100% - 0vw);
					transform-style: preserve-3d;
					perspective: 25vw;
					&>div{
						position: absolute;
						top:0;
						left:0;
						width: calc(100% - 0vw);
						height: calc(100% - 0vw);
					}
					&>.item1{
						transform-origin: 0 50%;
						width: calc(100% - 0vw);
						height: calc(100% - 0vw);
						&>.item11{
							position: absolute;
							top:0;
							left:0;
							width: calc(100% - 0vw);
							height: calc(100% - 0vw);
							z-index:14;
							opacity: 1;
							background:url("../../assets/images/solution/swcs/1.jpg") no-repeat center center;
							background-size:  cover;
						}
						&>.item12{
							z-index:14;
							opacity: 0;
							position: absolute;
							top:0;
							right:0;
							background-color: #aa55ff;
							width: calc(100% - 0vw);
							height: calc(100% - 0vw);
							background:url("../../assets/images/solution/swcs/2.jpg") no-repeat center center;
							background-size:  cover;
							transform: rotateY(180deg);
						}
					}
					&>.item2{
						z-index:3;
						background:url("../../assets/images/solution/swcs/3.jpg") no-repeat center center;
						background-size: cover;
						opacity: 0;	
						background-color: antiquewhite;
					}
					&>.item3{
						transform-origin: 100% 50%;
						&>.item31{
							z-index:12;
							opacity: 1;
							position: absolute;
							top:0;
							left:0;
							width: calc(100% - 0vw);
							height: calc(100% - 0vw);
							background:url("../../assets/images/solution/swcs/5.jpg") no-repeat center center;
							background-size:  cover;
						}
						&>.item32{
							z-index:12;
							opacity: 0;
							position: absolute;
							top:0;
							left:0;
							width: calc(100% - 0vw);
							height: calc(100% - 0vw);
							background:url("../../assets/images/solution/swcs/4.jpg") no-repeat center center;
							background-size:  cover;
							transform: rotateY(180deg);
							
						}
					}
				}
			}
		}
	}
	 
	 .ul2{
		 animation: lb 20s infinite linear;
	 }
	 .ul1{
	 		animation: lb 20s  10s infinite linear;
	 }
	.box ul li:hover p {
		font-size:1vw;
	}
	/* 鼠标移入时让所有的li宽度变为90px */
	.box:hover  {
	    height: 43vw
	}
	.box:hover ul {
	    height: 43vw;
		animation-play-state: paused;
	
	}
	.box:hover li {
	    height: 40vw;
		width: 9vw;
	}
	/* 鼠标移入时让当前的宽度变为640px */
	.box ul li:hover {
		 width:60vw;
	}
	.box ul li:hover .item{
	  width: 20vw;
	  left:20vw;
	}
	.box ul li .item:hover .item1{
		transform: rotate3d(0,1,0,-179deg);
		transition: all  5s;
	}
	.box ul li .item:hover .item11{
		animation:overturnpre 5s linear;
		opacity:0;
	}
	.box ul li .item:hover .item12{
		animation:overturnaft 5s linear;
		opacity:1;
	}
	
	.box ul li .item:hover .item3{
		transform: rotate3d(0,1,0,179deg);
		transition: all 5s 5s;
	}
	.box ul li .item:hover .item31{
		animation:overturnpre3 10s linear;
		opacity: 0;
	}
	.box ul li .item:hover .item32{
		animation:overturnaft3 10s linear;
		opacity: 1;
	}
	.box ul li .item:hover .item2{
		animation:overturn 10s ;
		opacity: 1;
	}
	.box ul li .item .item1 .item12:hover .item3{
		transform: rotate3d(0,1,0,-179deg);
	}
</style>