<template>
	<view class="">
		<view class="clothingmetals flex-between">
			<view class="clothingmetalsitem flex-colum" v-for="(item,index) in list" :key="index"
				@click="eeInfoseries(item)">
				<image class="clothingmetalsitemimage" :src="item.img" mode="aspectFill"></image>
				<view class="clothingmetalsitem_text flex-colum-start">
					<text>{{item.title}}</text>
					<text>{{item.english}}</text>
				</view>
				<view class="clothingmetalsitem_box flex-center">
					<text>立即前往</text>
					<u-icon name="arrow-right" color="##b1b1b1" size="8"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			data: {
				type: Number,
				default: 0
			},

		},
		methods: {
			eeInfoseries(e) {
				uni.pro.navigateTo('mall/series', {
					id: e.id,
				})
			},
		}
	}
</script>

<style lang="scss">
	.clothingmetals {
		padding: 32rpx 28rpx 0rpx 28rpx;

		.clothingmetalsitem {
			position: relative;
			width: 48%;
			height: 194rpx;

			.clothingmetalsitemimage {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 194rpx;
			}

			.clothingmetalsitem_text {
				position: absolute;
				left: 20rpx;
				top: 20rpx;
				text:nth-child(1) {
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					color: #679D96;
				}
				text:nth-child(2) {
					margin-top: 2rpx;
					font-size: 16rpx;
					font-family: Roboto, Roboto;
					font-weight: 400;
					color: #333333;
				}
			}
			.clothingmetalsitem_box{
				position: absolute;
				left: 20rpx;
				text-align: center;
				bottom: 20rpx;
				width: 128rpx;
				height: 40rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}
		}

	}
</style>