smart-tourism/smart-ui-app/pages/index/index.vue

<template>
	<view class="page">
		<view class="qj" @click="call()">
			<view class="icon">&#xe6d1;</view>
			SOS
		</view>
		<view class="top">
			<view class="wz">
				<text class="icon">&#xe64a;</text>
				<text>谢通门县欢迎您！</text>
			</view>
			<view class="wd">
				<view class="qw">28°</view>
				<view class="xs">
					<view>中雨 东风2级</view>
					<view>空气优23</view>
				</view>
			</view>
			<view class="ms">城市后花园·温泉养生地·胜境谢通门</view>
			<image src="../../static/bg.jpg" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="flex menu">
				<view class="f" @click="tab('/pages/travel/index')">
					<view class="icon" style="background-color: #0f0b51;">&#xe605;</view>
					<view class="title">景区介绍</view>
				</view>
				<view class="f" @click="tab('/pages/government/index')">
					<view class="icon" style="background-color: #e23e33;">&#xe695;</view>
					<view class="title">党政服务</view>
				</view>
				<view class="f">
					<view class="icon" style="background-color: #2cc937;">&#xe647;</view>
					<view class="title">旅游攻略</view>
				</view>
				<view class="f">
					<view class="icon" style="background-color: #e23e33;">&#xe645;</view>
					<view class="title">热门活动</view>
				</view>
			</view>
			<view class="flex mt10">
				<view class="item">
					<view class="tag">热门活动</view>
					<image src="../../static/img1.jpg" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
				<view class="item">
					<view class="tag">党政服务信息</view>
					<image src="../../static/img1.jpg" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
			</view>
			<view class="flex">
				<view class="item">
					<view class="tag">旅游攻略</view>
					<image src="../../static/img2.jpg" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
				<view class="item">
					<view class="tag">热门活动</view>
					<image src="../../static/img4.jpg" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			goods_list: [],
			scrollTop: 0
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(e) {
		//this.init();
	},
	methods: {
		call() {
			uni.showModal({
				title: '提示',
				content: '是否拨打0892-88888888求援电话?',
				success: res => {
					if (res.confirm) {
					}
				}
			});
		},
		init() {
			this.$http.request({
				url: this.$http.urls.home,
				success: res => {
					this.goods_list = res.data.data.goods_list;
				}
			});
		},
		tab(url) {
			uni.switchTab({
				url: url
			});
		},
		detail(item) {
			uni.navigateTo({ url: '/pages/goods/detail?id=' + item.id });
		}
	}
};
</script>

<style lang="scss">
.top {
	position: relative;
	height: 300px;
	color: white;
	.wz {
		position: absolute;
		top: 10px;
		left: 20px;
		z-index: 111111;
		.icon {
			padding-right: 5px;
		}
	}
	.wd {
		position: absolute;
		top: 70px;
		left: 20px;
		z-index: 111111;
		.qw {
			font-size: 40px;
			float: left;
			font-weight: bold;
		}
		.xs {
			margin-left: 75px;
			width: 100%;
			font-weight: bold;
			margin-top: 6px;
		}
	}
	.ms {
		position: absolute;
		top: 155px;
		left: 20px;
		z-index: 111111;
		font-size: 17px;
		font-weight: bold;
	}
	image {
		width: 100%;
		height: 300px;
		position: absolute;
	}
}
.main {
	padding: 15px 15px 50px 15px;
	width: 100%;
	margin-top: -50px;
	overflow: hidden;
	position: absolute;
	.menu {
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		width: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.icon {
			font-size: 30px;
			background-color: red;
			width: 38px;
			height: 38px;
			border-radius: 5px;
			margin: 0 auto;
			color: white;
			padding: 3px;
		}
		.title {
			padding-top: 4px;
			font-size: 13px;
		}
	}
	.item {
		flex: 1;
		overflow: hidden;
		padding: 5px;
		position: relative;
		image {
			border-radius: 5px;
			width: 100%;
			height: 180px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.tag {
			position: absolute;
			left: 10px;
			top: 10px;
			z-index: 11111;
			font-weight: bold;
			color: white;
			font-size: 16px;
		}
		.more {
			position: absolute;
			width: 70%;
			background: #e23e33;
			opacity: 0.78;
			color: white;
			bottom: 20px;
			border-radius: 5px;
			left: 16%;
			padding: 5px 7px;
			font-size: 13px;
		}
	}
}
.gray {
	-webkit-filter: grayscale(30%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(30%);
	filter: black;
}
.qj {
	position: fixed;
	top: 53%;
	right: 0px;
	width: 50px;
	background: red;
	z-index: 111;
	padding: 10px 10px 5px 10px;
	color: white;
	font-size: 15px;
	text-align: center;
	border-radius: 10px 0px 0px 10px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
	.icon {
		font-size: 25px;
		padding-bottom: 3px;
	}
}
</style>