<template>
	<view class="xiantuo">
		<view class="header">
			<view class="logo">
				<image src="@/static/logo.png"></image>
			</view>
			<view class="nav">
				<view class="li" @click="openPage('/pages/index/index')">
					<view class="title">首页</view>
				</view>
				<view class="li li-on" @click="openPage('/pages/case/index')">
					<view class="title">{{title?title:'案例'}}</view>
					<view class="desc">
						<view class="item" v-for="(a,i) in navList" @click="openPage('/pages/case/index?type='+a.scode+'&name='+a.name)">{{a.name}}</view>
					</view>
				</view>
				<view class="li" @click="openPage('/pages/news/index')"><view class="title">资讯</view></view>
				<view class="li" @click="openPage('/pages/about/index')"><view class="title">关于我们</view></view>
				<view class="li" @click="openPage('/pages/contact/index')"><view class="title">联系我们</view></view>
			</view>
			<view class="icon" @click="openMenu()">
				<image src="@/static/caidan.png"></image>
			</view>
		</view>
		<view class="content">
			<view class="banner wow fadeInUp">
				<image mode="widthFix" src="@/static/bg1.png"></image>
			</view>
			<view class="tab wow fadeInUp">
				<view class="item" :class="tabIndex == -1?'item-on':''" @click="tabItem(-1)">全部</view>
				<view class="item" :class="tabIndex == i?'item-on':''" v-for="(a,i) in navList" @click="tabItem(i)">{{a.name}}</view>
			</view>
			<view class="list">
				<view class="item wow slideInUp" v-for="(a,i) in list" :key="i" :data-wow-delay="(i/10+'s')" @click="openPage('/pages/case/detail?id='+a.id)">
					<view class="pic">
						<image mode="widthFix" :src="baseUrl+a.ico"></image>
					</view>
					<view class="title">{{a.title}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="t wow fadeInUp">
				<view class="a">
					<image :src="baseUrl+companyInfo.weixin"></image>
					<image :src="baseUrl+companyInfo.weixin_two" class="a1" v-if="companyInfo.weixin_two"></image>
				</view>
				<view class="b">微信</view>
				<view class="c">邮箱：{{companyInfo.email}}</view>
			</view>
			<view class="d wow fadeInUp" data-wow-delay="0.2s">
				<view class="p">联系方式：<text>{{companyInfo.contact}}{{companyInfo.mobile}}</text></view>
				<view class="p">联系地址：<text>{{companyInfo.address}}</text></view>
			</view>
		</view>
		<view class="menu" v-if="isShow">
			<view class="li" @click="openPage('/pages/index/index')">
				<view class="title">首页</view>
			</view>
			<view class="li li-on" @click="openPage('/pages/case/index')">
				<view class="title">案例</view>
			</view>
			<view class="li" @click="openPage('/pages/news/index')"><view class="title">资讯</view></view>
			<view class="li" @click="openPage('/pages/about/index')"><view class="title">关于我们</view></view>
			<view class="li" @click="openPage('/pages/contact/index')"><view class="title">联系我们</view></view>
			<view class="btn" @click="openMenu()">关闭</view>
		</view>
	</view>
</template>

<script>
	import {WOW} from 'wowjs'
	export default {
		data() {
			return {
				tabIndex: -1,
				isShow: false,
				title: '',
				navList: [],
				companyInfo: {},
				navScope: "",
				baseUrl: "",
				list: []
			}
		},
		onLoad(o) {
			this.baseUrl = this.$baseUrl
			if(o.type){
				this.navScope = o.type
				this.title = o.name
				uni.setStorageSync("navScope",o)
			}else{
				this.navScope = 8
			}
			if(uni.getStorageSync("navScope") && uni.getStorageSync("navScope").type){
				this.navScope = uni.getStorageSync("navScope").type
				this.title = uni.getStorageSync("navScope").name
			}else{
				this.navScope = 8
			}
			if(uni.getStorageSync("navInfo")){
				this.navList = uni.getStorageSync("navInfo")
				if(this.navScope == 8){
					this.tabIndex = -1
				}else{
					this.tabIndex = this.navList.findIndex(e=>e.scode==this.navScope)
				}
			}
			if(uni.getStorageSync("companyInfo")){
				this.companyInfo = uni.getStorageSync("companyInfo")
			}
		},
		mounted() {
			var wow = new WOW({
				boxClass: 'wow',    //需要执行动画元素的Class
				animateClass: 'animated',    //animation.css动画的Class
				offset: 0,    //距离可视区域多少开始执行动画
				mobile: true,    //是否在移动设备执行动画
				live: false    //异步加载的内容是否有效
			})
			wow.init();
			this.getList();
		},
		methods: {
			async getList() {
				const {data} = await this.$api.getList(this.navScope);
				this.list = data
			},
			tabItem(index){
				this.tabIndex = index;
				this.navScope = (index == -1?8:this.navList[index].scode);
				this.getList();
			},
			openMenu() {
				this.isShow = !this.isShow
			},
			openPage(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	padding-top: 80px;
	padding-bottom: 50px;
	box-sizing: border-box;
	.banner{
		width: 1536px;
		height: 800px;
		overflow: hidden;
		margin: 0 auto;
		margin-top: 30px;
		image{
			width: 100%;
			height: 100%;
			transform: scale(1);
			-webkit-transform: scale(1);
			transition: transform 0.1s;
			-webkit-transition: transform 0.1s;
			&:hover{
				-webkit-transform: scale(1.01);
				transform: scale(1.01);
			}
		}
	}
	.tab{
		overflow: hidden;
		display: none;
		.item{
			width: 120px;
			line-height: 50px;
			border: 1px solid #fff;
			float: left;
			margin-left: 20px;
			text-align: center;
			background-color: #fff;
			font-size: 15px;
			margin-top: 20px;
			&-on{
				background-color: #211E70;
				color: #fff;
			}
		}
	}
	.list{
		width: 1536px;
		margin: 0 auto;
		overflow: hidden;
		.item{
			width: 750px;
			background-color: #fff;
			float: left;
			margin-top: 30px;
			overflow: hidden;
			image{
				width: 750px;
				height: 750px;
				transform: scale(1);
				&:hover{
					transform: scale(1.05);
				}
			}
			&:nth-child(2n+1){
				margin-right: 35px;
			}
			cursor: pointer;
		}
		.title{
			line-height: 70px;
			padding: 0 20px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			font-size: 20px;
			color: #333333;
		}
		
	}
}

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
	.content{
		min-height: calc(100vh - 370px);
		padding-bottom: 20px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
		}
		.tab{
			display: block;
			.item{
				width: 100px;
				margin-top: 10px;
				line-height: 45px;
				height: 45px;
			}
		}
		.list{
			max-width: 100%;
			.item{
				width: 100%;
				margin-top: 10px;
				image{
					width: 100%;
					height: 100%;
					transition: all 0.2s;
					
				}
			}
		}
	}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	.content{
		min-height: calc(100vh - 370px);
		padding-bottom: 30px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
		}
		.tab{
			display: block;
		}
		.list{
			max-width: 100%;
			.item{
				width: 45%;
				margin-top: 15px;
				image{
					width: 100%;
					height: 100%;
					transition: all 0.2s;
					
				}
				&:nth-child(2n+1){
					margin-left: 2%;
				}
			}
		}
	}
}
/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.content{
		min-height: calc(100vh - 370px);
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
		}
		.tab{
			display: block;
		}
		.list{
			max-width: 991px;
			.item{
				width: 40%;
				margin-top: 20px;
				image{
					width: 100%;
					height: 100%;
					transition: all 0.2s;
					
				}
				&:nth-child(2n+1){
					margin-right: 20px;
				}
			}
		}
	}
} 
/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.content{
		min-height: calc(100vh - 370px);
		padding-bottom: 30px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
		}
		.tab{
			display: block;
		}
		.list{
			width: 992px;
			.item{
				width: 485px;
				margin-top: 20px;
				image{
					width: 485px;
					height: 485px;
					transition: all 0.2s;
					
				}
				&:nth-child(2n+1){
					margin-right: 20px;
				}
			}
		}
	}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) and (max-width: 1350px) {
	.content{
		min-height: calc(100vh - 370px);
		.banner{
			width: 100%;
			margin-top: 20px;
			height: auto;
		}
		.list{
			width: 1200px;
			.item{
				width: 590px;
				margin-top: 20px;
				image{
					width: 590px;
					height: 590px;
					transition: all 0.2s;
					
				}
				&:nth-child(2n+1){
					margin-right: 20px;
				}
			}
		}
	}
}
</style>
