newTianLi/pages/index/index.vue

<template>
	<view class="center">
		<view class="img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="carousel-box">
				<swiper class="carousel" autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in carouselList " class="carousel-item" :key="index"
						@click="nav(item)">
						<image :src="item.pic" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 公司介绍跳转 -->
		<view class="introduce" @click="navto('/pages/about/about')">
			公司介绍
			<view class="more">
				更多>>
			</view>
		</view>
		<view class="teachingPrinciple">
			<view class="teachingPrinciple_img">
				<image src="../../static/img/introduce.png" mode=""></image>
			</view>
			<text>台州市添利节能科技有限公司是专注于电镀行业节能减排尖端设备研发和技术服务的企业多年来为国内多家电镀企业进行技术改造，截止2021年1月累计节水量达到200多万吨，节水经济效益1.17亿元平均节水效率45%。</text>
		</view>
		<view class="introduce" @click="navto('/pages/test/test')">
			节水实时数据
			<view class="more">
				物联网登录>>
			</view>
		</view>
		<view class="introduce" @click="navto('/pages/case/case')">
			案例展示
			<view class="more">
				更多>>
			</view>
		</view>
		<view class="case" v-for="(item,index) in caseList">
			<view class="case_img">
				<image :src="item.src" mode=""></image>
			</view>
			<view class="caseBox">
				<view class="caseBox_top">
					{{item.title}}
				</view>
				<view class="caseBox_bottom">
					<view class="img">
						<image src="../../static/tabBar/1.png" mode=""></image>
					</view>
					<text>发布时间：</text>
					<view class="date">
						{{item.date}}
					</view>
				</view>
			</view>
		</view>
		<view class="introduce" @click="navto('/pages/news/news')">
			新闻动态
			<view class="more">
				更多>>
			</view>
		</view>
		<view class="case" v-for="(item,index) in caseList">
			<view class="case_img">
				<image :src="item.src" mode=""></image>
			</view>
			<view class="caseBox">
				<view class="caseBox_top">
					{{item.title}}
				</view>
				<view class="caseBox_bottom">
					<view class="img">
						<image src="../../static/tabBar/1.png" mode=""></image>
					</view>
					<text>发布时间：</text>
					<view class="date">
						{{item.date}}
					</view>
				</view>
			</view>
		</view>
		<aboutUs></aboutUs>
	</view>
</template>

<script>
	import {
		banner,
		category
	} from '@/api/index.js';
	import {changeTaber} from '@/utils/tarberChange.js'
	//调用完组件需要声明一下，在data()上声明
	import aboutUs from "@/components/introduce/introduce.vue"
	export default {
		components:{
			aboutUs
		},
		data() {
			return {
				caseList: [{
					title: '1大家谁都i啊手机都i阿迪啊就能看见你空间空间帮',
					src: "../../static/img/introduce.png",
					date: '2021-06-08 16:26',
				}, {
					title: '2大家谁都i啊手机都i阿迪啊就能看见你空间空间帮',
					src: "../../static/img/introduce.png",
					date: '2021-06-08 16:26'
				}, {
					title: '3大家谁都i啊手机都i阿迪啊就能看见你空间空间帮',
					src: "../../static/img/introduce.png",
					date: '2021-06-08 16:26'
				}],
				swiperCurrent: 0,
				carouselList: [{
						pic: '../../static/img/logo.png'
					},
					{
						pic: '../../static/img/logo.png'
					},
					{
						pic: '../../static/img/logo.png'
					},
					{
						pic: '../../static/tabBar/1.png'
					}
				],
				dataList: [],

			};
		},
		onLoad() {
			// this.loadData();
			changeTaber(0)
		},
		methods: {
			// nav(url) {
			// 	uni.navigateTo({
			// 		url: url
			// 	});
			// },
			// navto(e){
			// 	uni.navigateTo({
			// 		url:'/pages/index/message?id=' + e.id
			// 	})
			// },
			//轮播图跳转页面
			nav(item) {
				if (item.url != '/') {
					console.log("1111");
					uni.navigateTo({
						url: '/' + item.url,
						fail(error) {
							console.log(error);
						}
					})
				}
			},
			//跳转
			navto(url) {
				uni.navigateTo({
					url: url,
					fail(error) {
						uni.switchTab({
							url
						});
					}
				});
			},
			async loadData() {
				const obj = this;
				// banner({}).then(e => {
				// 	obj.carouselList = obj.carouselList.concat(e.data.banner);
				// 	console.log(obj.carouselList)
				// // });
				// category({
				// 	page: 1,
				// 	limit: 1000
				// }, 2).then(({
				// 	data
				// }) => {
				// 	console.log(data)
				// 	obj.dataList = data

				// });
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			}
		}
	};
</script>

<style lang="scss">
	.center {
		background-color: rgb(255, 255, 255);
		height: 100%;
	}

	.img {
		margin: 17rpx 0 17rpx 41rpx;
		width: 208rpx;
		height: 52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.carousel-section {
		background-color: #FFFFFF;
		width: 100%;
		height: 300rpx;

		.carousel-box {
			background-color: #FFFFFF;
			width: 100%;
			height: 300rpx;

			.carousel {
				background-color: #FFFFFF;
				width: 100%;
				height: 300rpx;

				.carousel-item {
					background-color: #FFFFFF;
					width: 100%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.introduce {
		position: relative;
		margin-top: 18rpx;
		width: 100%;
		height: 60rpx;
		background: #127FD5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;

		.more {
			position: absolute;
			right: 15rpx;
			bottom: 5rpx;
			font-size: 16rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;

		}
	}

	.teachingPrinciple {
		margin-top: 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.teachingPrinciple_img {
			width: 580rpx;
			height: 248rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		text {
			font-size: 16rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #000000;
			margin: 23rpx 40rpx 10rpx 40rpx;

		}
	}

	.case {
		display: flex;
		border-bottom: 1rpx solid #E9E9E9;
		justify-content: center;
		padding: 30rpx 0;

		.case_img {
			width: 158rpx;
			height: 124rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.caseBox {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.caseBox_top {
				padding-left: 30rpx;
				max-width: 460rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.caseBox_bottom {
				margin-left: -50rpx;
				display: flex;
				align-items: center;

				.img {
					margin-right: 10rpx;
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					color: #9F9F9F;
					font-size: 24rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
				}

				.date {
					font-size: 24rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
				}
			}
		}
	}

	
</style>