<template>
	<view>
		<swiper class="swiper" @change="change" style="margin-top: 20rpx;">
			<swiper-item>
				<u-grid :col="5" :border="false"  hover-class="hover-class">
					<u-grid-item v-for="(item, index) in list" :index="index" :key="index" bg-color="none" :custom-style="{padding: '15rpx 0'}" @tap="onClick(item)">
						<u-image width="90rpx" height="90rpx" border-radius="50%" :src="item.image"></u-image>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {dumpUrl} from '@/common/util.js'
	export default {
		data() {
			return {
				current: 0,
				list: [{
						image:'/static/lm1.png',
						title:'淘宝',
					},{
						image:'/static/lm2.png',
						title:'天猫'
					},{
						image:'/static/lm3.png',
						title:'京东'
					},{
						image:'/static/lm4.png',
						title:'拼多多'
					},{
						image:'/static/lm5.png',
						title:'聚划算'
					},{
						image:'/static/lm6.png',
						title:'9.9包邮'
					},{
						image:'/static/lm7.png',
						title:'品牌专区'
					},{
						image:'/static/lm8.png',
						title:'热销榜'
					},{
						image:'/static/lm9.png',
						title:'大额券'
					},{
						image:'/static/lm10.png',
						title:'母婴'
					}
				]
			};
		},
		methods: {
			borderChange(index) {
				this.border = index == 0 ? true : false;
			},
			colChange(index) {
				this.col = index == 0 ? 3 : 4;
			},
			change(e) {
				this.current = e.detail.current;
			},
			onClick(item){
				let _this = this;
				console.log(1111)
				// dumpUrl('/pages/list/list')
				dumpUrl('/other/gongzhonghao/gongzhonghao')
			}
			
		}
	}
</script>

<style>
	.grid-text {
			font-size: 28rpx;
			margin-top: 8rpx;
			color: #915014;
		}
		
	.swiper {
		height: 345rpx;
	}
	
	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}
	
	.indicator-dots-active {
		background-color: $u-type-primary;
	}
</style>
