<template>
	<view>
		<view class="toplist">
			<view class="toplist-i" v-for="(item, key) in topList" :key="key" @click="navgateTo(item.jump_link)">
				<!-- <navigator class="a" :url="'/pagesHeadline/headlinedetail/index?i='+item.id" hover-class="none"> -->
				<view class="toplist-i-t">
					<image class="image" :src="item.display_img" mode="aspectFill"></image>
				</view>
				<view class="toplist-i-c dis-flex">
					
					<view class="flex-box">
						{{ item.title }}
					</view>
					<view class="flex-box t-r f-20 col-9" style="letter-spacing: 0px;">
						{{ item.browse }}人参与
					</view>
				</view>
				<!-- </navigator> -->
				<view class="toplist-i-b" v-if="false">
					<view class="h1">
						<view class="span">免费</view>
						<view class="a">立即领取</view>
						<!-- 	<navigator class="a" url="/pages/index/index" hover-class="none">立即领取</navigator> -->
					</view>
					<view class="p"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {

			}
		},
		props: ['topList'],

		methods: {
			navgateTo(url) {
				App.navigationTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped>
	.toplist-i {
		margin-top: 50upx;
	}

	.toplist-i:first-child {
		margin-top: 0;
	}

	.toplist-i-t {
		width: calc(100vw - 60upx);
		height: calc((100vw - 60upx) / 1.8);
		position: relative;
	}

	.toplist-i-t .image {
		width: 100%;
		height: 100%;
		border-radius: 8upx 8upx 0 0;
	}

	.toplist-i-c {
		line-height: 50upx;
		font-size: 36upx;
		letter-spacing: 4upx;
		margin-top: 30upx;
	}

	.toplist-i-b {
		margin-top: 20upx;
	}

	.toplist-i-b .h1 {
		height: 60upx;
		line-height: 60upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.toplist-i-b .h1 .span {
		color: #FF5050;
		font-size: 44upx;
		display: block;
	}

	.toplist-i-b .h1 .a {
		height: 60upx;
		line-height: 60upx;
		color: #fff;
		padding: 0 30upx;
		background-color: #FF5050;
		border-radius: 100upx;
		display: block;
	}

	.toplist-i-b .p {
		height: 42upx;
		line-height: 42upx;
		color: #999;
		font-size: 24upx;
	}
</style>
