<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" @click="openPage('/pages/case/index')">
					<view class="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 li-on" @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/7.png"></image>
			</view>
			<view class="banner1 wow fadeInUp">
			</view>
			<view class="list">
				<view class="item wow slideInUp" v-for="(item,index) in list" :key="index" @click="openPage('/pages/case/detail?type=2&id='+item.id)">
					<view class="date">
						<text>{{item.end}}</text>{{item.start}}
					</view>
					<view class="info">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.subtitle}}</view>
					</view>
					<view class="more">
						<view>查看<br />更多</view><image src="@/static/jiantou.png"></image>
					</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" @click="openPage('/pages/case/index')">
				<view class="title">案例</view>
			</view>
			<view class="li li-on" @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 {
				isShow: false,
				name: 'Hello',
				tel: 'Hello',
				company: 'Hello',
				navList: [],
				companyInfo: {},
				list: [],
				baseUrl: ""
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			if(uni.getStorageSync("navInfo")){
				this.navList = uni.getStorageSync("navInfo")
			}
			if(uni.getStorageSync("companyInfo")){
				this.companyInfo = uni.getStorageSync("companyInfo")
			}
			if(uni.getStorageSync("navScope") && uni.getStorageSync("navScope").type){
				uni.removeStorageSync("navScope") 
			}
		},
		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() {
				let {data} = await this.$api.getList(2);
				if(data && data.length > 0){
					data.map(a=>{
						a.dates = a.date.split(" ")[0]
						a.start = a.dates.split("-")[0]+"."+a.dates.split("-")[1]
						a.end = a.dates.split("-")[2]
					})
				}
				this.list = data
			},
			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: 100%;
		height: auto;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			transition: transform 0.1s;
			-webkit-transition: transform 0.1s;
			transform: scale(1);
			-webkit-transform: scale(1);
			&:hover{
				-webkit-transform: scale(1.01);transform: scale(1.01);
			}
		}
		
	}
	.banner1{
		width: 100%;
		overflow: hidden;
		display: none;
		height: 210px;
		background: url(/static/7.png) center center no-repeat;
		background-size: auto 100%;
	}
	.list{
		max-width: 1536px;
		margin: 0 auto;
		.item{
			width: 100%;
			padding: 30px;
			box-sizing: border-box;
			height: 150px;
			border: 2px solid #FFFFFF;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20px;
			cursor: pointer;
			.date{
				width: 100px;
				height: 97px;
				background: #FFFFFF;
				border: 2px solid #211E70;
				text-align: center;
				font-weight: 300;
				font-size: 18px;
				color: #211E70;
				text{
					display: block;
					font-weight: bold;
					font-size: 36px;
					margin-top: 10px;
				}
			}
			.info{
				flex: 1;
				margin: 0 2%;
				.title{
					font-weight: bold;
					font-size: 20px;
					color: #333333;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.desc{
					font-weight: 400;
					font-size: 16px;
					color: #999999;
					line-height: 30px;
					display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
				  -webkit-box-orient: vertical; /* 垂直排列 */
				  -webkit-line-clamp: 2; /* 限制显示两行 */
				  overflow: hidden; /* 隐藏超出范围的内容 */
				  text-overflow: ellipsis; /* 使用省略号 */
				  margin-top: 10px;
				}
			}
			.more{
				width: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 16px;
				color: #333333;
				image{
					width: 14px;
					height: 11px;
					margin-left: 12px;
				}
			}
			&:hover{
				border-color: #211E70;
				.date{
					background: #211E70;
					color: #FFFFFF;
				}
			}
		}
	}
}


/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 599px) {
	.content{
		padding-bottom: 30px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
			display: none;
		}
		.banner1{
			display: block;
		}
		.list .item {
			margin-top: 10px;
			padding: 20px;
		}
		.list .item .info{
			min-width: 250px;
		}
		
		.list .item .more{
			display: none;
		}
	}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	.content{
		padding-bottom: 30px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
			display: none;
		}
		.banner1{
			display: block;
		}
		.list .item .info{
			min-width: 250px;
		}
	}
}
/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.content{
		padding-bottom: 30px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
		}
	}
} 
/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.content{
		padding-bottom: 30px;
		.banner{
			width: 100%;
			margin-top: 0;
			height: auto;
		}
	}
} 

/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) and (max-width: 1350px) {
	.content{
		.banner{
			width: 100%;
			margin-top: 20px;
			height: auto;
		}
	}
}
</style>
