xiantuo/pages/index/index.vue

<template>
	<view class="xiantuo">
		<view class="header" style="background: transparent;">
			<view class="logo">
				<image src="@/static/logo.png"></image>
			</view>
			<view class="nav">
				<view class="li li-on" @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" @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 wow fadeInUp">
			<swiper class="swiper" circular autoplay indicator-dots indicator-active-color="#211E70">
				<swiper-item class="swiper-item" v-for="(a,i) in banner">
				<uni-link :href="a.link" v-if="a.link!=''">
					<image mode="widthFix" :src="baseUrl+a.pic"></image>
				</uni-link>
					<image v-else mode="widthFix" :src="baseUrl+a.pic"></image>
				</swiper-item>
			</swiper>
			<view class="dots"></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 li-on" @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" @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,
				banner: [],
				navList: [],
				companyInfo: [],
				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.getSlide();
		},
		methods: {
			//  previewImage(a,i) {
			// 	 var banner=[]
			// 	 banner.push(this.baseUrl+a.pic)
			// 	 console.log('this.banner',banner)
			// 	 uni.previewImage({
			// 	         urls: banner, // 需要预览的图片链接列表
			// 	 });

			// },
			async getSlide() {
				const {data} = await this.$api.getSlide();
				this.banner = data
			},
			openMenu() {
				this.isShow = !this.isShow
			},
			openPage(url){
				this.isShow = false;
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
.content{
	width: 100%;
	// padding-top: 110rpx;
	box-sizing: border-box;
	background-color: #FFFFFF;
	.swiper{
		width: 100%;
		height: 960px;
		.swiper-item{
			width: 100%;
			overflow: hidden;
			image{
				width: 100%;
				display: block;
				height: 100%;
				margin: 0 auto;
			}
		}
	}
}

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
	.content{
		height: calc(100vh - 370px);
		padding-top: 80px;
		.swiper{
			height: 302px;
			margin-top: 40rpx;
		}
	}
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	.content{
		height: calc(100vh - 370px);
		padding-top: 80px;
		.swiper{
			height: 402px;
		}
	}
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.content{
		height: calc(100vh - 370px);
		padding-top: 80px;
		.swiper{
			height: 496px;
			margin-top: 60rpx;
		}
	}
} 

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.content{
		height: calc(100vh - 370px);
		.swiper{
			height: 496px;
		}
	}
} 

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