<template>
	<view style="font-size: 28upx;">
		<!-- <z-nav-bar backState="2000" title="首页"></z-nav-bar> -->
		<view class="home_bg">
			<view class="" style=" ">
				
					<view class="icon_hua">
						<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
					</view>	
					<view class="hehan">
						<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
					</view>	
							
				<view class="fiveIcon flexbox" style="justify-content: space-around;">
					<div class="item item1" @click="onPageJump('../acupoint/acupoint')">
						<image src="../../static/icon/five1.png" mode="aspectFit" ></image>
						<text>经穴检索</text>
					</div>
					<!-- <div class="item item1">
						<image src="../../static/icon/five2.png" mode="aspectFit"></image>
						<text>方药检索</text>
					</div> -->
					<div class="item item1" @click="onPageJump('../luck/luck')">
						<image src="../../static/icon/five4.png" mode="aspectFit"></image>
						<text>五运六气</text>
					</div>
					<div class="item item1" @click="onPageJump('../peanut/searchFor')">
						<image src="../../static/icon/five3.png" mode="aspectFit"></image>
						<text>书名检索</text>
					</div>
					
					<!-- <div class="item item1">
						<image src="../../static/icon/five5.png" mode="aspectFit"></image>
						<text>吴门医述</text>
					</div> -->
				</view>
				<!-- <view class="search_box flexbox" @click="onPageJump('../peanut/searchFor')">
					<view class="search">
						<text class="icon_search"></text>
						<text class="prompt">请输入书名</text>
					</view>				
				</view> -->
				<!-- <view class="searBtn flexbox">
					<text>搜索</text>
				</view> -->
			</view>		
			<!-- <view class="home_lunbo">
			-
				<u-swiper :list="list3" indicator indicatorMode="line" circular style="height: 180rpx;"></u-swiper>
			</view> -->
		</view>
		<!-- <view class="home_nar" v-if="showEbook"> -->
		<view class="home_nar">	
				<view class="hn_cl_tit shuguan" @click="onPageJump('../clock/index')">
					<image src="../../static/icon/home1-1.png" mode="aspectFit"></image>
					<!-- <text>打 卡</text> -->
				</view>	
						
			<view  class="hn_cl_tit dianzishu" @click="onPageJump('../listen/home')">
				<image src="../../static/icon/home2-1.png" mode="aspectFit"></image>
				<!-- <text>听 书</text> -->
			</view>			
			
			<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->			
			<view class="hn_cl_tit shuping" @click="onPageJump('../comments/commentsList')">
				<image src="../../static/icon/home3-1.png" mode="aspectFit"></image>
				<!-- <text>书 评</text> -->
			</view>
			
			<view class="hn_cl_tit chaoshi" @click="onPageJump('../talkBook/talkBook')">
				<image src="../../static/icon/home4-1.png" mode="aspectFit"></image>
				<!-- <text>讲 书</text> -->
			</view>		
		</view>

		<!-- <view class="home_lunbo">
			<u-swiper :list="list3" indicator indicatorMode="line" circular style="height: 180rpx;"></u-swiper>
		</view> -->

		<!-- <view class="home_shujia" v-if="showEbook">
			<view class="hn_sj" @click="onTabJump('./bookshelf')">
				<image src="../../static/icon/midBtn_01.png" mode="aspectFit"></image>
				我的书架
			</view> -->
			<!-- <view class="hn_sj">
				<image src="../../static/icon/midBtn_02.png" mode="aspectFit"></image>
				图书推荐
			</view> -->
			<!-- <view class="hn_sj" @click="onPageJumpData('../eBook/bookList',1)">
				<image src="../../static/icon/midBtn_03.png" mode="aspectFit"></image>
				医 学
			</view>
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',2)">
				<image src="../../static/icon/midBtn_04.png" mode="aspectFit"></image>
				国 学
			</view>
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',3)">
				<image src="../../static/icon/midBtn_05.png" mode="aspectFit"></image>
				文 学
			</view>
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',4)">
				<image src="../../static/icon/midBtn_06.png" mode="aspectFit"></image>
				古 籍
			</view>
		</view>		 -->
		<!-- <view class="head_line" v-if="seckillList!=null">
			<b></b>
			<text>商品秒杀</text>
			<i @click="onShopMore('Sale')">查看更多 ></i>
		</view>-->

		<!-- 限时秒杀 -->
		<!-- <view class="limited" v-if="seckillList!=null">			
			<view class="limitedSymbol">
				<image src="../../static/icon/shopping_xsh.png"></image>
			</view>
			<view class="limitedScrollBox">
				<u-scroll-list indicatorActiveColor="#27b386">
					<view class="limitedItem" v-for="(item,index) in seckillList" :key="index"
						@click="goDetail(item.prodInfo.productId)">
						<image :src="item.prodInfo.productImages" mode=""></image>
						<text class="biaoti">{{item.prodInfo.productName}}</text>
						<text class="xian">￥{{item.seckillPrice}}</text>
						<text class="yuan">￥{{item.prodInfo.price}}</text>
					</view>
				</u-scroll-list>
			</view>
		</view> -->

		<view class="head_line" style="background-color: #fff;">
			<b></b>
			<text>新书上市</text>
			<!-- <i @click="onBookMore('New')">查看更多 ></i> -->
		</view>
		
		<view class="newBook">			
			<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10" style="margin-top: 0 !important;">
				<view :class="['item']"  v-for="(item,index) in newBookList" :key="index">
						<view class="videoBox" @click="goDetail(item.productId)">
							<image  v-if="item.productImages != ''" :src="item.productImages" mode="scaleToFill"></image>
							<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
						</view>
						<text class="bookName">{{item.productName}}</text>
					</view>
			</scroll-view>
		</view>
		
		<!-- <view class="home_xinshu" v-if="showEbook">
			<view v-for="(item, index) in xinsList" @click="onBookJump(item)" v-if="index<3" class="hx_list">
				<image :src="item.image"></image>
				<view class="hx_title">{{item.bookName}}</view>
				<view class="hx_author">{{item.authorName}} [著]</view>
				<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
				<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
			</view>
			<br clear='both'>
			<view v-for="(item, index) in xinsList" @click="onBookJump(item)" v-if="index>2&&index<6" class="hx_list">
				<image :src="item.image"></image>
				<view class="hx_title">{{item.bookName}}</view>
				<view class="hx_author">{{item.authorName}} [著]</view>
				<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
				<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
			</view>
			<br clear='both'>
		</view>	 -->	
		<!-- end -->
		<!-- <view class="head_line" v-if="showEbook">
			<b></b>
			<text>限时特价</text>
			<i @click="onBookMore('Sale')">查看更多 ></i>
		</view>
		<view class="home_limit" v-if="showEbook">
			<u-scroll-list indicatorActiveColor="#27b386">
				<view v-for="(item, index) in limiTist" :key="index" @click="onBookJump(item)" class="lt_list">
					<image :src="item.image"></image>
					<view class="lt_title">{{item.bookName}}</view>
					<view class="lt_author">{{item.authorName}} [著]</view>
					<view class="lt_yuan">{{item.price}}天医币</view>
					<view class="lt_xian">{{item.salePrice}}天医币</view>
					<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
					<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
				</view>
			</u-scroll-list>
		</view> -->
		<!-- <view class="head_line" v-if="showEbook">
			<b></b>
			<text>精选书单</text>
			<i @click="onBookMore('Best')">查看更多 ></i>
		</view>
		<view class="home_jingxu" v-if="showEbook">
			<view class="hj_hot" v-for="(item,index) in jingList" @click="onBookJump(item)">
				<view>
					<text class="bok_name">{{item.bookName}}</text>
					<text style="margin-left: 50rpx;" v-if="item.authorName!=''">{{item.authorName}}</text>
				</view>

				<view v-if="item.publisherName!=''">
					<text>出版社：{{item.publisherName}}</text>
				</view>
				<view>
					<text>{{item.introduce | ellipsis}}</text>
				</view>
				<image :src="item.image"></image>
				 <b v-if="item.isVip==0">免费</b>
				<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
				<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
			</view>
		</view> -->


		<!-- <view class="head_line" style="margin: 30rpx 0;">
			<b></b>
			<text>精选商品</text> -->
			<!-- <i @click="onShopMore('Hot')">查看更多 ></i> -->
			<!-- <i @click="onPageJump('../bookShop/classify')">查看更多 ></i> -->
		<!-- </view> -->
		<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="0">
			<view class="ProTabs">
				<text v-for="item in tagList" :key="item.splId" :class="[tabsid == item.splId ? 'cur' :'']" @click="tabsChange(item)">{{item.labelName}}</text>			
			</view>
		</scroll-view>
		<!-- 商品展示 -->
		<view class="goods">
			<!-- 精选 -->
			<view class="" >
				<view  v-if="tjProList.length > 0" >
				<view class="flexbox" style="flex-wrap: wrap;">
				<view class="goodsItem" v-for="(item,index) in tjProList" :key="index"
					@click="goDetail(item.productId)">
					<image :src="item.productImages" mode="" class="goodsImg"></image>
					<view class="goodsContent">
						<view class="goodsName">
							{{item.productName}}
						</view>
						<view class="goodsPrice">
							<span class="price" v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</span>
							<span class="price" v-else>￥{{item.price}}</span>
							<span class="Salesnum">已售：{{item.sumSales}} 件</span>
						</view>
					</view>
				</view>
				</view>				
				<view class="">
					<view v-if="status==0" style="text-align: center;">
						<u-loading-icon style="display: inline-block;"></u-loading-icon>
						<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
					</view>
					<view v-if="status==1">
						<u-divider text="全部加载完成"></u-divider>
					</view>
				</view>				
				</view>
				<u-divider v-else text="暂无数据哦~"></u-divider>
				
			</view>	
						
		</view>


		<view>
			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
		</view>

		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-navigation></z-navigation>	
		<music-play :playList="myList"></music-play>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import repciptData from '@/static/json/repcipt.json'
	import $http from '@/config/requestConfig.js';
	import {
		mapState,mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				myList:[],
				showEbook:false,    // 显示电子书相关
				transaction: { // 成功回调
				
				},				
				tabsNumber : null,
				scrollLeft:0,
				maxTimes:1, // 轮询最大次数
				ComplateRequestInterval:null, // 轮询定时器
				checking:false,  // 正在检测
				ComplateRequestArr:[],
				iapChannel:null,
				scrollTop: 0,
				list3: [
					// '../../static/icon/home_ban_1.jpg',
					'../../static/icon/home_ban_2.jpg',
					'../../static/icon/home_ban_3.jpg',
				],
				xinsList: [],
				loadingNow: false,
				limiTist: [],
				jingList: [],
				seckillList: [],
				offSaleList:[],   // 折扣列表
				goodsList: [],
				bgiStyle: {
					background: '#fff'
				},
				newBookList:[],
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#54a966',
				},
				tagList:[] ,// 推荐标签列表
				pageSize:10,
				page:1,
				totalPage:0,
				tjProList:[],
				status : 3
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		    // this.requestIapOrder()			
		},
		onHide() {
			this.page = 1
			this.tjProList = []
			// if(this.tagList.length > 0){
			// 	this.tabsid = this.tagList[0].splId
			// }
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			this.tjProList = []
			uni.hideTabBar();
			this.getData();	
			this.getTags()
		},
		// 页面加载完毕
		onReady() {
			// this.requestIapOrder()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.tjProList = []
			this.getData()
			this.getTags()
			// this.requestIapOrder()	
			uni.stopPullDownRefresh()
					
		},
		onReachBottom() {
			this.loadingNow = true
			console.log('到底了')
			if(this.page+1 <= this.totalPage){
				this.status = 0
				this.page++
				this.getJtData()
			}else{
				this.status = 1
			}
			
		},

		filters: {
			// 控制字数
			ellipsis(value) {
				if (!value) return '';
				let reg = /[\u4e00-\u9fa5]/g;
				let names = value.match(reg);
				value = names ? names.join('') : '';
				if (value.length > 50) {
					return value.slice(0, 50) + '...'
				}
				return value
			},
		},
		computed: {
			...mapState(['userInfo']),
		},
		components:{
			musicPlay
		},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),
			// ...mapMutations(['setLoadingShow']),
			// 获取商品标签
			    getTags() {
					this.loadingNow = false		
					this.$http
					.post('book/label/getLabels')
					.then(res => {
						console.log(res,'标签列表')
						if(res.code == 0 && res.result.labels.length > 0){
							this.tagList = res.result.labels
							this.tabsid = this.tagList[0].splId
							this.getJtData()
						}						
					}).catch(e => {
						console.log(e,'e')
					});
			    },
			tabsChange(item){
				    this.tjProList = []
					this.tabsid = item.splId
					this.page = 1
					// 获取推荐数据
					this.getJtData()
			},
			getJtData(){				
				this.$http
				// .post('book/label/list',{
				.post('book/label/getProductsByLabel',{	
					'splId': this.tabsid,
					'limit': this.pageSize,
					'page': this.page
				})
				.then(res => {
					
					if(res.code == 0 && res.page.records.length > 0){
						this.tjProList = this.tjProList.concat(res.page.records)
						this.totalPage = res.page.pages
						this.status = 3	
						console.log(this.tjProList,'按标签检索结果')
					}else{
						this.tjProList = []
						this.totalPage = 0
					}										
				}).catch(e => {					
					console.log(e,'标签检索报错')
				});
			},
			// 获取折扣图书
			getOffSale(){
				this.$http
					.post('book/shopproduct/listactivityprice?limit=10&page=1')
					.then(res => {
						console.log(res,'折扣')
						if(res.code == 0 && res.page.list.length > 0){
							this.offSaleList = res.page.list
							this.tabsNumber = 0
						}					    
						
					}).catch(e => {
						console.log(e,'e')
					});
			},
			// 新书上市
			getNewBook(){
				this.$http
					.post('book/shopproduct/getNewBook',{
						'limit': 4,
						'page':1
					})
					.then(res => {
						console.log(res,'xinshu')
					    this.newBookList = res.page.list
					}).catch(e => {
						console.log(e,'新书上市报错')
					});
			},
			// 检测未完成订单
			requestIapOrder(){				
				console.log('检测支付环境...')
				plus.payment.getChannels((channels) => {
					console.log(channels, 'channels')
					//this.setUserInfo({channelList:channels}); // 将支付通道保存到本地
					for (var i in channels) {						
						// 判断是否苹果支付1
						if (channels[i].id === 'appleiap') {
							this.iapChannel = channels[i]	
							// console.log(this.userInfo.restoreFlag,'this.userInfo.restoreFlag')
							if(this.userInfo.restoreFlag){  // 如果存在异常回调订单
								this.restoreComplateRequest()
							}
						}
					}					
				})
			},
		    // 查询未关闭订单
			restoreComplateRequest(){				
				let that = this
				console.log('检测未完成订单')
				console.log(this.iapChannel,'this.iapChannel')				
				this.iapChannel.restoreComplateRequest({
					manualFinishTransaction: true
				}, function(results) { 
						if(!that.checking){
							that.checking = true
							// console.log(that.checking)
				        // results 格式为数组存放恢复的IAP商品交易信息对象 IAPTransaction，通用需将返回的支付凭证传给后端进行二次认证  
						that.ComplateRequestArr = results
						console.log(that.ComplateRequestArr,'未完成订单数组')							
						if(results && results.length>0){
							
						results.map((item,index)=>{
							// "0"为正在支付；"1"为支付成功；"2"为支付失败；"3"为支付已恢复。
							if(item.transactionState == '1'){ 
								// 已经支付，但是没有走逻辑的内购订单								
							    that.iapCheck(item,index)															
							}else{
								// 其他状态的内购订单
								that.finishTransaction(item)	
								
							}	
						})
						}
						}
					});	
					
				
			},
			// 关闭交易订单
			finishTransaction(trans,index){				
				this.iapChannel.finishTransaction(trans, (success) => {
				      console.log('关闭订单成功',index);
					  
					 if(index == this.ComplateRequestArr.length-1){  // 最后一个支付订单
						this.setUserInfo({restoreFlag:false});
						// console.log(this.userInfo.restoreFlag,'this.ComplateRequestArr.length+++')
					}
					 
				    }, (fail) => {
				      console.log('关闭订单失败');
				    });
			},
			iapCheck(result,index) {
				  const that = this
				console.log('进入后台验证')
				let data = {
					transactionId: result.transactionIdentifier, // 支付交易id
					customerOid: that.userInfo.id, 
					productId: result.payment.productid, // 产品id
					orderId: result.payment.username, // 系统订单号
					receiptData: result.transactionReceipt ,// 苹果返回收据
					loadAnimate:'none', // 请求加载动画
				}	
				console.log(data,'data')
				$http.request({
					url: "/Ipa/veri",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(JSON.stringify(res))					
					console.log(res.code)
					if(res.code == 0){
						// uni.hideLoading()
						console.log('充值订单已处理，请留意账户金额变动....')						
					// 服务器验证票据有效后在客户端关闭订单
						that.finishTransaction(result,index)									
					}else if(res.code == 200){ // 重复验证订单
						console.log('重复验证....')
						that.finishTransaction(result,index)
					}
				}).catch(e => {					
					console.log('支付验证失败，进入轮询程序...')
					that.getIapPayResult(result,index)
				  })
				console.log('--------------')
			},
			
			// 轮询验证支付结果			
			getIapPayResult(result,index){
				// let interval = null
			this.ComplateRequestInterval = setTimeout(() => {
					if(this.maxTimes <= 3){
				    this.iapCheck(result,index)
					console.log('执行1', this.maxTimes,this.ComplateRequestInterval)
					this.maxTimes += 1
					}else{
						this.maxTimes = 0
						console.log('停止轮询', this.maxTimes,this.ComplateRequestInterval, this.maxTimes)
						this.checking = false
						this.saveErrorIapOrder(result,index)
						clearTimeout(this.ComplateRequestInterval)
						
					}
				},10000)
				
			},
			// 轮询失败接口
			saveErrorIapOrder(result,index){
				console.log('提交到充值问题单里面...')
				let data = {
					transactionId : result.transactionIdentifier,
					failureflag: 1,
					orderId:result.payment.username,
					receiptData:result.transactionReceipt,
					productId:result.payment.productid,
					customerOid:this.userInfo.id					
				}				
				$http.request({
					url: "Ipa/failure",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(JSON.stringify(res))					
					if(res.code == 200){
						console.log('提交成功，关闭订单')
						this.finishTransaction(result,index)
					}
				}).catch(e => {					
					console.log(e)	
					if(e.statusCode == 0){ // 重复提交，直接关闭订单
						this.finishTransaction(result,index)
					}
				  })
			},
			// 获取列表数据
			getData() {
				// this.$http
				// 	.post('book/book/bookIndex')
				// 	.then(res => {
				// 		// this.xinsList = res.bookIndex.newBookList
				// 		// this.limiTist = res.bookIndex.saleList
				// 		// this.jingList = res.bookIndex.topBookList
				// 	});

				// 获取限时秒杀
				// this.$http
				// 	.get(`book/shopseckill/getSeckillProd`)
				// 	.then(res => {
				// 		this.seckillList = res.list
				// 		// this.seckillList = null
				// 	})

				// 获取精选商品
				// this.$http
				// 	.post('book/shopproduct/appGetList?limit=30&page=1&istop=1')
				// 	.then(res => {
				// 		console.log(res.page.list,'首页商品')
				// 		this.goodsList = res.page.list
				// 	})
				//this.getOffSale()	
				this.getNewBook()
			},

			// 跳转
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},

			onPageJumpData(url, data) {
				uni.navigateTo({
					url: url + '?id=' + data
				});
			},

			onTabJump(url) {
				uni.switchTab({
					url: url
				});
			},

			onGoing() {
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期待...'
				})
			},

			// 电子书内容跳转
			onBookJump(e) {
				uni.navigateTo({
					url: '../eBook/bookContent?Id=' + e.bookid
				});
			},
			// 商品详情页
			goDetail(id) {
				uni.navigateTo({
					url: '../bookShop/commodityDetail?id=' + id
				});
			},
			
			// 列表跳页
			onShopMore(e) {
				uni.navigateTo({
					url: '../bookShop/bookShopType?type=' + e
				});
			},

			// 三个列表跳页
			onBookMore(e) {
				uni.navigateTo({
					url: '../eBook/bookType?Type=' + e
				});
			},



		},

	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.fiveIcon{justify-content: space-between; text-align: center;
		text{
			font-size: 28rpx;  color: #11a669;
		}	
			image{width: 56rpx; height: 56rpx; margin: 0 auto; }
	}
	.hehan{width: 80%; margin: 10rpx auto;}
	.zhekou{
		.goodsName{margin-bottom: 20rpx;}
	}
	.activityPrice{font-size: 60rpx;}
	.priceAndnum{ font-size: 24rpx !important;
		.price{color: #9b9b9b !important; font-size: inherit; font-weight: normal !important; display: block;}
	}
	.ProTabs{
		// margin: 20rpx 0; 
	padding:0 20rpx;
		text{padding: 8rpx 14rpx; font-size: 32rpx; display: inline-block; border-radius: 10rpx; overflow: hidden; 
		// background-color: #eee;
		 color: #55aa7f; margin-right: 10rpx;}
		text.cur{background-color:#55aa7f ; color: #fff;}
	}
	// .newBook{margin-top: 10rpx;}
	.scroll-view_H{background-color: #fff;white-space: nowrap;
		 padding:10rpx ; margin-top: 12rpx;}
	.scroll-view_H{ 
		.item { padding: 10rpx; overflow: hidden; display: inline-block; padding-bottom: 0;
			width: 180rpx !important; margin-right: 20rpx;  border-radius: 10rpx;
			.videoBox{ 
				image{display: block; width:150rpx; 
				height: 170rpx; 
				}
			}
			.bookName{display: block; margin-top: 6rpx;   color: #666; font-size: 24rpx; white-space: nowrap;					
		overflow-x: hidden; overflow: hidden;
		text-overflow: ellipsis;}
		}
		// .item.active{margin-right: 20rpx; border: 1px solid #55aa00;  border-radius: 10rpx;}
	}
	.flexbox{display: flex;}
	.head_line {
		padding-top: 8rpx;
		margin: 12rpx 0 0 0;


		b {
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background-color: #54a966;
			vertical-align: bottom;
			margin: 0 20rpx 0 0;
		}

		text {
			font-size: 32rpx;
			font-weight: bold;
		}

		i {
			float: right;
			font-style: normal;
			color: #8b8a91;
			font-size: 24rpx;
			margin: 5rpx 35rpx 0 0;
		}
	}

	.home_bg {
		background-image: url('@/static/icon/home_bg.jpg'); 
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20rpx;
		position: relative; 
		// margin-bottom:60rpx;
	    // height: 400rpx; margin-bottom: 130rpx;
		.icon_hua_1 {
			// margin: 0 auto;
			width: 100%; text-align: center;
			 height: 80rpx;
			image{width: 150rpx; height: 80rpx;}
		}
		.icon_hua{width: 100%; text-align: center; display: block;
				image{width: 150rpx; height: 150rpx;  margin: 0 auto;}
				}
		.search_box { margin: 0 auto; margin-top: 20rpx;  align-items: center;
			width: calc(100% - 30rpx);   margin-top: 0;
    margin-bottom: 20rpx;
			
			.search{height: 56upx; 
				display: flex;
				width: 86%; margin: 0 auto;
				align-items: center;
				padding: 0upx 40upx;
				background-color: #fff;
				border-radius: 20upx;
				box-shadow: 0 0px 10px 1px #54a96633;
			}
			.prompt {
				color: #838383; font-size: 24rpx;
	
			}
	
			.icon_search {
				background-image: url('@/static/icon/map_ic_search.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				width:36upx;
				height: 36upx;
				margin-right: 20upx;
			}
		}
		.searBtn{
			width: 80rpx; align-items: center;
			font-size: 30rpx; color: #fff; 
		}
}
	.home_nar {
		background-color: #fff;
		padding: 20rpx 30rpx;
		 justify-content: space-between;
		display: flex;
		color: #333; 
		 margin-bottom: 0;
		// .dianzishu{  margin-right:10rpx;	
		// 	background-color:#f8d6f4 ;  border: 2px solid #edcce9;
		// }
		// .chaoshi{background-color:#fff2d8 ;  border: 2px solid #ede6d3;	}
		// .shuping{ background-color: #d6ffda; border: 2px solid #bae9bf;}
		// .shuguan{ background-color:#e3f9f9 ;  border: 2px solid #d7eced; }
		.hn_cl_tit { 
			// width: 23%;
			width: 31%; 
			text-align: center;			 
			 border-radius: 20rpx ;		
			// line-height: 110upx;
			//display: flex;
			align-content: center;
			justify-content: center;
			image {				
				width:120rpx;
				height:120rpx;
				display: block;
				margin: 0 auto;
				// margin: 0 20rpx;
			}
			text{ display:block; text-align: center;	 margin-top:4rpx; font-size: 36rpx; color: #000; font-weight:blod;}
		}
		

	}

	.home_lunbo {
		margin: 40rpx 30rpx 0 30rpx;
	}

	.home_shujia {
		margin: 40rpx 20rpx 0 20rpx;
		display: flex;
		color: #333;

		.hn_sj {
			width: 20%;
			text-align: center;
			font-size: 26upx;

			image {
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
			}
		}
	}

	.home_xinshu {
		margin: 35rpx 30rpx;
		padding: 36rpx 16rpx 0 16rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.hx_list {
			margin: 0 15rpx 20rpx 15rpx;
			text-align: center;
			width: 28.5%;
			float: left;
			position: relative;

			image {
				width: 100%;
				height: 290upx;
				margin: 0 0 20rpx 0;
			}

			.hx_title {
				font-size: 28rpx;
				margin: 0 0 10rpx 0;
				font-weight: bold;
			}

			.hx_author {
				font-size: 24rpx;
				margin: 0 0 20rpx 0;
				color: #9b9b9b;
			}

			b {
				display: block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
				background: #27b386;
				position: absolute;
				left: -10upx;
				top: 10upx;
				font-size: 16rpx;
			}
		}
	}

	.home_limit {
		margin: 35rpx 0;
		padding: 36rpx 0 20rpx 0;
		background-color: #fff;


		.lt_list {
			margin: 0 35rpx 0 0;
			text-align: center;
			position: relative;

			image {
				width: 200upx;
				height: 280upx;
				margin: 0 0 20rpx 0;
			}

			.lt_title {
				font-size: 28rpx;
				margin: 0 0 10rpx 0;
				font-weight: bold;
			}

			.lt_author {
				font-size: 24rpx;
				margin: 0 0 20rpx 0;
				color: #9b9b9b;
			}

			.lt_yuan {
				text-decoration: line-through;
				color: #c1c1c1;
				margin: 0 0 5rpx 0;

			}

			.lt_xian {
				color: #bf0c0c;
				font-weight: bold;
			}

			b {
				display: block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
				background: #27b386;
				position: absolute;
				left: -10upx;
				top: 10upx;
				font-size: 16rpx;
			}


		}

		.lt_list:nth-child(1) {
			margin-left: 30rpx;
		}

		.lt_list:nth-last-child(1) {
			padding-right: 30rpx;
		}
	}

	.home_jingxu {
		margin: 60rpx 30rpx 0 30rpx;


		.hj_hot {
			box-shadow: 0 0px 10px 1px #56565633;
			background-color: #fff;
			position: relative;
			padding: 20upx 220upx 10upx 25upx;
			margin: 0 0 60rpx 0;
			border-radius: 15rpx;
			min-height: 230rpx;

			view {
				margin: 0 0 10rpx 0;

				text {
					color: #9b9b9b;
					font-size: 24rpx;
					line-height: 36rpx;
				}

				.bok_name {
					font-weight: bold;
					color: #333;
					font-size: 28rpx;
				}


			}

			image {
				position: absolute;
				right: 30upx;
				top: -30upx;
				width: 160upx;
				height: 240upx;
			}

			b {
				display: block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
				background: #27b386;
				position: absolute;
				right: 150upx;
				top: -20upx;
				font-size: 16rpx;
			}
		}


	}


	.limited {
		width: 100%;
		height: auto;
		padding: 20rpx 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-top: 50rpx;

		.limitedSymbol {
			width: 22%;
			height: 300rpx;
			border-right: 1px solid #eee;
			vertical-align: middle;

			image {
				width: 120rpx;
				height: 120rpx;
				margin: 45px auto 0 auto;
			}
		}

		.limitedScrollBox {
			width: 76%;
			padding: 0 10rpx;
		}

		.limitedItem {
			width: 200rpx;
			text-align: center;

			image {
				width: 150upx;
				height: 200upx;
				margin: 15rpx auto 20rpx auto;
			}

			text {
				font-size: 20rpx;
				display: block;
			}

			.biaoti {
				font-size: 30rpx;
				margin: 10rpx 0 10rpx 0;
				font-weight: bold;
			}

			.xian {
				font-size: 32rpx;
				color: #bf0c0c;
				font-weight: bold;
			}

			.yuan {
				text-decoration: line-through;
				color: #c1c1c1;

			}
		}
	}

	.goods {
		width: 100%;
	margin:0 0 50rpx 0; background-color: #fff;

		.goodsItem {
			display: inline-block;
			width: 46%;
			border-radius: 20rpx;
			padding: 25rpx; padding-bottom: 5rpx;
			margin: 0 20rpx 20rpx 20rpx;
			background-color: #fff;
			border: 1px solid #eee;

			.goodsImg {
				width: 98%;
				height: 380rpx;
				border-radius: 10rpx;
			}

			.goodsContent {

				.goodsName {
					margin-top: 10rpx;
					font-size: 28rpx;
					// font-weight: bold;
				}

				.goodsPrice {
					font-size: 28rpx;
					margin: 5rpx 0 0 3rpx;					
					display: flex; justify-content: space-between;
					.price{
						font-weight: bold;
						color: #ff0000;
					}
					.Salesnum{color: #9b9b9b;}
				}
			}
		}

		.goodsItem:nth-child(2n) {
			margin-left: 0;
		}
	}
</style>
