#uniapp#实战#商品列表（其二）

<template>
	<view>
		<view class="cu-bar search bg-gradual-orange">
			<!-- <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
		 	<view class="search-form round">
		 		<text class="cuIcon-search"></text>
		 		<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false"
				 type="text" placeholder="搜索图片、文章、视频" confirm-type="search">
				 </input>
		 	</view> -->
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input placeholder="请输入你想要的商品" type="text" />
			</view>
			<view class="action"><text class="cuIcon-scan"></text></view>
		</view>

		<view>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in 10" :key="index" @tap="tabSelect" :data-id="index">
					{{ TabLists[index] }}
				</view>
			</scroll-view>
		</view>
		<swiper id="swiper" :circular="true" :indicator-dots="true">
			<swiper-item><image mode="scaleToFill" src="../../static/img/0.jpg"></image></swiper-item>
			<swiper-item><image mode="scaleToFill" src="../../static/img/0.jpg"></image></swiper-item>
			<swiper-item><image mode="scaleToFill" src="../../static/img/0.jpg"></image></swiper-item>
		</swiper>
		<view class="bg-white row">
			<view style="display: flex;align-items: center;">
				<image style="width:50upx;height: 50upx ;" src="../../static/tabBar/购物车.png"></image>
				<text style="font-weight: bold;font-size: 110%;">众筹</text>
			</view>
			<view class="text-gray">
				来众筹
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<!-- 导航图标 -->
		<view class="icon-father bg-white flex justify-around">
			<view class="icon-item" v-for="i in 5" :key="i">
				<image src="../../static/card/cake.png"></image>
				<view class="align-center">精美蛋糕</view>
			</view>
		</view>
		<!-- 标签示例 -->
		<view style="padding-top: 10upx;" class="disaccount  bg-white">
			<view class="flex align-center justify-between acard">
				<view class="flex align-center">
					<view><image style="width: 60upx;height: 60upx;" src="../../static/img/1.jpg"></image></view>
					<view style="font-size: 130%;" class="text-bold">精美蛋糕</view>
					<view style="margin-left: 10upx;" class="text-bold cu-tag">大牌正品 官方推荐</view>
				</view>
				<view class="text-gray">全部<text class="cuIcon-right"></text> </view>
			</view>
		</view>
		<view style="padding: 20upx 30upx 20upx 30upx;" class="flex justify-around bg-white">
			<view   v-for='i in 5' :key = 'i'>
				<view style="position: relative;" class="flex justify-center">
					<image class ="goods-image" src="../../static/img/19.jpg"></image>
					<view style="position: absolute;bottom: 10upx;" class="cu-tag bg-red sm">特价</view>
				</view>
				<view style="font-size:80%;color:red; text-align:center;" class="white" ><text class="red ">￥</text>389.9</view>
			</view>
		</view>
		<!-- 商品列表信息情况页面 -->
		<view style="margin-top: 20upx;padding: 30upx 30upx 30upx 30upx;">
			<view style="border-bottom:1upx solid #e7e7e7;padding: 10upx 0 10upx 0;" class="flex justify-around bg-white" v-for="i in 5"  :key='i'>
				<view style="width: 250upx;">
					<image style="width: 250upx;height: 250upx;" src="../../static/img/30.jpg"></image>
				</view>
				<view  style="width: 400upx;flex-direction: column;" class="flex justify-between">
					<!-- 上面 -->
					<view>
						<!-- 这里是根内容 -->
						<view class="flex align-center" style="font-weight: 600;font-size: 30upx;">
							<text  class="cu-tag bg-gradual-orange sm round">蛋糕节</text>
							本店新出精品蛋糕
						</view>
						<view class="cu-tag bg-brown radius">元味蛋糕店</view>
						
					</view>
					<!-- 下面 -->
					<view style="margin-bottom: 10upx;padding-top: 10upx;">
						<view>
							<view class="cu-tag sm bg-red radius">小店推荐</view>
							<view class="cu-tag sm bg-orange radius">精品美味</view>
						</view>
						<view style="font-size: 120%;">
							<text style="color: red;font-size: 90%;">￥20</text>
							<text style="color: grey;font-size: 90%;">可销售</text>
						</view>
						<view style="width: 100%;height: 20upx;"></view>
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			title: 'Hello',
			input: '',
			TabLists: ['热门', '新品', '水果', '千层', '生日', '儿童', '慕斯', '巧克力', '祝寿', '奶油'],
			TabCur: 0,
			iconLists: [{}]
		};
	},
	onLoad() {},
	methods: {
		InputFocus() {
			console.log('focus');
		},
		InputBlur() {
			console.log('blur');
		},
		tabSelect(event) {
			this.TabCur = event.target.dataset.id;
			// console.log(event.target)
		},
		scrollLeft() {}
	}
};
</script>

<style lang="scss" scoped>
#swiper swiper-item {
	image {
		width: 750upx;
		height: 250upx;
	}
}
.row {
	display: flex;
	justify-content: space-between;
	height: 90upx;
	align-items: center;
	padding-left: 20upx;
	padding-right: 20upx;
}

.icon-item image {
	width: 100upx;
	height: 100upx;
	text-align: center;
}
.icon-father {
	border: 0.5upx solid #e7e7e7;
}
.disaccount {
	margin-top: 12upx;
}
.acard{
	padding: 0 20upx 0 20upx;
}
/* 下面 */

.goods-image {
	width: 140upx;
	height: 140upx;
	border-right: 0.3upx solid #e7e7e7;
}

</style>