<template>
	<view class="index">
		<!-- 	<view class="contentclothingimage" v-if="list.theme_re.img != null">
				<image :src="list.theme_re.img" mode="aspectFill"></image>
			</view>
			<view class="contentclothingbox" v-if="list.theme_re.img != null">
				<view class="fourcontents">
					<u-scroll-list indicatorActiveColor="#6C6E8D" :indicator="false">
						<view class="scrollfourcontents" v-for="(item, index) in  list.theme_re.data" :key="index"
							@click="eeInfoseries(item)">
							<view class="scrollfourcontenttitems flex-colum" :style="index == 0 ?'margin-left: 0;':''">
								<image class="scrolltowcontentitem_images" :src="item.host_img" mode="aspectFill">
								</image>
								<view class="scrolltowcontentitem_ones">
									{{item.series}}
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view> 
			<view class="contentclothingimage" v-if="list.new.img != null">
				<image :src="list.new.img" mode="aspectFill"></image>
			</view>
			<view class="contentclothingboxoone" v-if="list.new.img != null">
				<view class="fourcontentsoneitem flex-between" v-for="(item,index) in list.new.data" :key="index"
					@click="mallInfoInfo(item)">
					<image class="fourcontentsoneitemimage" :src="item.host_img" mode="aspectFill"></image>
					<view class="fourcontentsoneitemtext flex-colum-start">
						<view class="fourcontentsoneitemtextone">
							{{item.title}}
						</view>
						<view class="fourcontentsoneitemtexttow">
							￥{{item.price}}
						</view>
					</view>
				</view>
			</view>
			<view class="contentclothingimageclassimagebuya" v-if="list.discount">
				<image :src="list.discount" mode="widthFix"></image>
			</view>
			<view class="contentclothingimageclass flex-center">
				<image class="contentclothingclassimage" src="@/static/4.png" mode="aspectFill"></image>
				<view class="contentclothingimageclassbox flex-between">
					<view class="contentclothingimageclassboxitem flex-center" v-for="(item,index) in 3" :key="index">
						<view class="contentclothingimageclassboxitemone">
							50
						</view>
						<view class="contentclothingimageclassboxitemtow flex-colum-start">
							<text>RMB</text>
							<text>满300元使用</text>
						</view>
						<view class="contentclothingimageclassboxitemabsolute">
							领
						</view>
					</view>
				</view>
			</view> -->
		<view class="contentclothingboxoone">
			<view class="fourcontentsoneitemtow flex-between">
				<view class="fourcontentsoneitemtowitem" v-for="(item,index) in list" :key="index"
					@click="mallInfoInfo(item)">
					<image class="fourcontentsoneitemtowitemimage" :src="item.host_img" mode="aspectFill"></image>
					<view class="fourcontentsoneitemtowitemone">
						{{item.title}}
					</view>
					<view class="fourcontentsoneitemtowitemtow">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			bgbutton: {
				type: String,
				default: '#fff'
			},
		},
		methods: {
			mallInfoInfo(e) { //查看订单详情
				if (e.spec_type == 1) {
					uni.pro.navigateTo('mall/mallInfo', {
						id: e.id,
					})
				} else {
					uni.pro.navigateTo('mall/mallInfos', {
						id: e.id,
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.index {
		width: 100%;

		.contentclothingimageclassimagebuya {
			width: auto;
			margin: 48rpx 0;

			image {
				width: 100%;
				height: auto;
			}
		}

		.contentclothingimageclass {
			margin-top: 50rpx;

			.contentclothingclassimage {
				width: 224.35rpx;
				height: 40rpx;
			}

			.contentclothingimageclassbox {
				position: relative;
				margin-top: 18rpx;
				width: 100%;
				background: #ABAD98;
				border-radius: 18rpx;
				border: 2rpx solid #404136;
				padding: 28rpx 18rpx;

				.contentclothingimageclassboxitem:nth-child(1) {
					border: none;
				}

				.contentclothingimageclassboxitem {
					position: relative;
					border-left: 1rpx dashed #fff;
					padding: 0 18rpx;

					.contentclothingimageclassboxitemone {
						font-size: 48rpx;
						font-family: Roboto, Roboto;
						font-weight: bold;
						color: #1A1A1A;
					}

					.contentclothingimageclassboxitemtow {
						margin-left: 10rpx;

						text:nth-child(1) {
							font-size: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							color: #1A1A1A;
						}

						text:nth-child(2) {
							font-size: 20rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							color: #1A1A1A;
						}
					}

					.contentclothingimageclassboxitemabsolute {
						position: absolute;
						top: 0;
						right: 18rpx;
						width: 28rpx;
						height: 28rpx;
						text-align: center;
						font-size: 16rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						background: #7e8a83;
						border-radius: 50%;
					}
				}
			}

			.contentclothingimageclassbox::after {
				z-index: 10;
				position: absolute;
				content: '';
				display: inline-block;
				left: -11px;
				bottom: 50%;
				transform: translateY(50%);
				width: 22px;
				height: 22px;
				border-radius: 0 11px 11px 0;
				background: #fff;
			}

			.contentclothingimageclassbox::before {
				z-index: 10;
				position: absolute;
				content: '';
				display: inline-block;
				right: -11px;
				bottom: 50%;
				transform: translateY(50%);
				width: 22px;
				height: 22px;
				border-radius: 11px 0 0 11px;
				background: #fff;
			}
		}

		.contentclothingimage {
			width: 130rpx;
			height: 52rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.contentclothingbox {
			.fourcontents {
				.scrollfourcontents {
					padding: 22rpx 0;

					.scrollfourcontenttitems {
						width: 246rpx;
						height: 296rpx;
						margin-left: 30rpx;
						position: relative;

						.scrolltowcontentitem_images {
							width: 100%;
							height: 100%;
							border-radius: 18rpx;
						}

						.scrolltowcontentitem_ones {
							position: absolute;
							padding: 8rpx 10rpx;
							bottom: 12rpx;
							left: 14rpx;
							background: rgba(0, 0, 0, 0.32);
							border-radius: 20rpx;
							font-size: 18rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.contentclothingboxoone {
			.fourcontentsoneitem {
				width: 100%;
				margin-top: 24rpx;

				.fourcontentsoneitemimage {
					width: 278rpx;
					border-radius: 18rpx;
					height: 194rpx;
				}

				.fourcontentsoneitemtext {
					flex: 1;
					height: 194rpx;
					margin-left: 10rpx;

					.fourcontentsoneitemtextone {
						font-size: 28rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}

					.fourcontentsoneitemtexttow {
						margin-top: 20rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						color: #1A1A1A;
					}
				}
			}
			.fourcontentsoneitemtow {
				width: 100%;
				.fourcontentsoneitemtowitem:nth-child(1) {
					margin-top: 24rpx;
				}
				.fourcontentsoneitemtowitem:nth-child(2) {
					margin-top: 24rpx;
				}
				.fourcontentsoneitemtowitem {
					margin-top: 32rpx;
					width: 330rpx;

					.fourcontentsoneitemtowitemimage {
						border-radius: 18rpx;
						width: 330rpx;
						height: 356rpx;
					}

					.fourcontentsoneitemtowitemone {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 16rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}

					.fourcontentsoneitemtowitemtow {
						margin-top: 10rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						color: #1A1A1A;
					}
				}
			}
		}
	}
</style>