<!--pages/main/main.wxml-->
<view class="page">
	<view class="search">
		<input class="wx-input" placeholder="🔍 寻找称心礼物" placeholder-style="color: #bfbfbf; font-size: 30rpx; text-align:center;" />
	</view>

	<view class="banner">
		<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
		  <block wx:for="{{imgUrls}}">
		    <swiper-item bindtap="goDetail">
		      <image src="{{item}}" class="slide-image" />
		    </swiper-item>
		  </block>
		</swiper>
	</view>
	
	<view class="title-line">
		<view class="title-name">- BOUTIQUE RECOMMEND -</view>
		<view class="title-name-bottom">精选推荐</view>
	</view>
	
	<view class="content">
		<block wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}">
			<view class="content-cell">
				<image src="http://oalppxaqn.bkt.clouddn.com/%E8%BD%BB%E5%A5%A2%E7%A4%BC%E7%89%A9%E8%AF%B4.png" mode="scaleToFill" binderror="imageError"/>
				<text class="describe">照明台灯 钟表 小床</text>
				<view style="color: red; font-size: 8pt;" class="price-now">$ 120.00</view>
			</view>
		</block>
	</view>

	<view class="title-line">
		<view class="title-name">- NEW TODAY -</view>
		<view class="title-name-bottom">今日上新</view>
	</view>

	<view class="content">
		<block wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}">
			<view class="content-cell">
				<image src="http://oalppxaqn.bkt.clouddn.com/%E8%BD%BB%E5%A5%A2%E7%A4%BC%E7%89%A9%E8%AF%B4.png" mode="scaleToFill" binderror="imageError"/>
				<text class="describe">照明台灯 钟表 小床</text>
				<view style="color: red; font-size: 8pt;" class="price-now">$ 120.00</view>
			</view>
		</block>
	</view>

	<view class="title-line">
		<view class="title-name">- HOT NEW -</view>
		<view class="title-name-bottom">热卖新品</view>
	</view>

	<view class="content">
		<block wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}">
			<view class="content-cell">
				<image src="http://oalppxaqn.bkt.clouddn.com/%E8%BD%BB%E5%A5%A2%E7%A4%BC%E7%89%A9%E8%AF%B4.png" mode="scaleToFill" binderror="imageError"/>
				<text class="describe">照明台灯 钟表 小床</text>
				<view style="color: red; font-size: 8pt;" class="price-now">$ 120.00</view>
			</view>
		</block>
	</view>

	<view class="footer" bindtap="goIndexPage">北京合水商贸有限公司</view>
</view>

/* pages/main/main.wxss */

.search {
	width: 100%;
	height: 60rpx;
	/*background-color: green;	*/
	display: flex;
	/*flex-flow: column nowrap;*/
	justify-content: center;/*子项横轴上居中对齐*/
	align-items: center;/*子项纵轴上居中对齐*/
	/*align-content: center;*/
}

.search .wx-input {
	width: 90%;
	height: 40rpx;
	border: 1px solid #bfbfbf;
	border-radius: 120rpx;
	/*margin: 30rpx 0 0 38rpx;*/
}

.banner {
	width: 100%;
	height: 420rpx;
	padding-top: 20rpx;
	/*margin-left: 15rpx;*/
}

.banner image {
	width: 750rpx;
	height: 420rpx;
}

.title-line {
	font-size: 8pt;
	color: #353535;
	text-align: center;
	/*margin-top: 20rpx;*/
}

.content {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.content-cell {
	width: 320rpx;
	height: 350rpx;
	margin-top: 50rpx;
	background-color: #ffffff;
	/*border-radius: 15px;*/
}

.content-cell image {
	/*border: 1px solid red;*/
	width: 320rpx;
	height: 250rpx;
}

.describe {
	color: #888888;
	font-size: 9pt;
	padding-left: 10rpx;
}

.price-now {
	padding: 12rpx 0 2rpx 200rpx;
}

.footer {
	color: #576b95;
	font-size: 6pt;
	text-align: center;
	margin-top: 30rpx;
	margin-bottom: 16rpx;
}

// pages/main/main.js
Page({
  data:{
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  goIndexPage: function() {
    wx.navigateTo({
      url: '../index/index'
    });
  },
  imageError: function(event) {
    console.log(event.detail.errMsg);
  }
})