<template>
	<view class="">
		<!-- TODO 小程序轮播可能会出现问题  但是大概率不会发布小程序 -->
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="款式详情"></u-navbar>
		<view class="content">
			<u-swiper mode="number" height="750" :autoplay="false" :list="list" :title="true" indicator-pos="bottomRight"></u-swiper>
			<view class=" bg_fff u-p-l-30 u-p-r-30">
				<view class="style_tit">
					<view class="color_AF8D66 u-font-32">卡其色长款风衣</view>
					<view class="u-font-24 u-m-t-10 color_6F6F72">
						<span class="u-m-r-10">针织</span>
						|
						<span class="u-m-l-10 u-m-r-10">180cm</span>
						|
						<span class="u-m-l-10">100%面备份面备份备份</span>
					</view>
				</view>
			</view>
			<!-- 图片 -->
			<view class="u-m-30 u-flex justify-between u-flex-wrap">
				<view class=" u-m-b-30 hs-position-relative hs-width-330 hs-height-330" v-for="item in 5">
					<image class="hs-img-330" src="@/static/images/home/yanyi1@2x.png" mode=""></image>
					<view class="img_tit">款式正面</view>
				</view>
			</view>
			<view class="bg_fff u-m-l-30 u-m-r-30 u-flex justify-center flex-direction u-p-30 ht_196">
				<view class="ds_flex u-m-t-10" style="width: 100%;">
					<span class="width_30 color_00004">上传日期</span>
					<span class="flex-sub">2021-12-12</span>
				</view>
				<view class="ds_flex u-m-t-10" style="width: 100%;">
					<span class="width_30 color_00004">设计描述</span>
					<span class="flex-sub">还可以还可以还可以吧还可以还可以还可以</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东画楼西畔桂堂东画楼西畔桂堂东画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			]
		};
	}
};
</script>
<style>
.width_30 {
	width: 30%;
}
.ht_196 {
	min-height: 196rpx;
}
.ds_flex {
	display: flex;
}
.fx_wrap {
	flex-wrap: wrap;
}
.jt_con_sp_between {
	justify-content: space-between;
}
.color_AF8D66 {
	color: #af8d66;
}
.bg_fff {
	background: #fff;
}
.color_00004 {
	color: rgba(0, 0, 0, 0.4);
}
.color_6F6F72 {
	color: #6f6f72;
}
</style>
<style scoped lang="scss">
.style_tit {
	min-height: 140rpx;
	padding: 30rpx 0;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.img_tit {
	position: absolute;
	width: 100%;
	text-align: center;
	padding: 10rpx;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
}
.bd_bottom {
}
::v-deep .u-swiper-title {
	width: 86%;
	padding-bottom: 12rpx !important;
}
</style>
