<template>
	<view class="content">
		<swiper class="swiper" circular>
			<swiper-item>
				<img class='img' src="../../static/swiper1.png" alt="">
			</swiper-item>
			<swiper-item>
				<img class='img' src="../../static/swiper2.png" alt="">
			</swiper-item>
			<swiper-item>
				<img class='img' src="../../static/swiper3.png" alt="">
			</swiper-item>
		</swiper>
		<view class="title">
			常用服务
		</view>
		<u-grid>
			<u-grid-item @click="navTo" v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid>
		<view class="btn">
			<u-button type="primary" @click="logout" text="退出"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '首页',
				baseList: [{
						name: 'photo',
						title: '我的'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
				]
			}
		},
		methods: {
			navTo() {
				if (!this.$store.state.token) {
					this.$logout()
				} else {
					uni.navigateTo({
						url: '/pages/user/user'
					})
				}
			},
			logout() {
				this.$logout(true,'是否退出登录？')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.btn {
			margin: 120px 35px 25px 35px;
		}

		.swiper {
			width: 100%;
			height: 150px;
		}

		.swiper-item {
			display: block;
			height: 150px;
			line-height: 150px;
			text-align: center;
		}

		.img {
			width: 375px;
			height: 150px;
		}
	}

	.title {
		width: 100%;
		font-size: 16px;
		color: #8f8f94;
		margin: 10px 0 10px 10px;
	}

	.card {
		padding: 10px;

		.card-item {
			width: 84px;
			height: 84px;
			display: flex;
			justify-content: center;
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
