<template>
<view class="pages-index" @touchstart="start" @touchend="end" @touchmove.stop="move">
	<scroll-view class="pages-scroll" scroll-y="true" :enhanced="true"
    :bounces="false" :show-scrollbar="false" @scroll="pageScroll($event)" @scrolltolower="reachBottom">
	<!-- #ifdef MP -->
	<view class="pages-hd" :style="'min-height: ' + (searchScrollTop+95) + 'px;background: url(' + event_rul + '/static/img/home/header-bg.png);background-size: 100% 100%;'">
			<view class="title_box pages-hd__title" :style="'top: ' + fixTop + 'px;height: '+ menuButtonHeight+ 'px'">
				<view class="title">
					敬衡商城
				</view>
		</view>
		<view class="input_box"
			:style="[{'top': `${searchScrollTop}px`} ,
			{'width': `${searchWidth}%`}]"
			@click="goto" data-url='/pages/shop/search'>
			 <text class="iconfont icon-sousuo"></text>
			 <input :disabled='true' type="text" placeholder-style="font-size:28rpx; color: #FFF;" placeholder="餐桌盛宴 与你相食" />
			<view class="btn">搜索</view>
		</view>
		<!-- 刷新状态view -->
		<view v-if="touch" class='pull-refresh' :style="[
			{'height': `${refreshHeight}px`},
			{'padding-top': `${searchScrollTop+38}px`},
			{'background': `url(${event_rul}/static/img/home/header-bg.png)`},
			{'background-size': '100% 360rpx'},
			{'background-position': 'bottom 0 left 0'}]">
			<view class="pull-refresh__loading">
				<view class="dot" :class="{'dot1': refreshLoading }"></view>
				<view class="dot" :class="{'dot2': refreshLoading }"></view>
				<view class="dot" :class="{'dot3': refreshLoading }"></view>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef H5 || APP-PLUS -->
	<view class="pages-hd pages-hdh5" :style="'background: url(' + event_rul + '/static/img/home/header-bg.png);background-size: 100% 100%;'">
		<view class="title_box pages-hd__title">
			<view class="title">敬衡商城</view>
		</view>
		<view class="input_box"			
			@click="goto" data-url='/pages/shop/search'>
			 <text class="iconfont icon-sousuo"></text>
			 <input :disabled='true' type="text" placeholder-style="font-size:28rpx; color: #FFF;" placeholder="" />
			<view class="btn">搜索</view>
		</view>
		<!-- 刷新状态view -->
		<view v-if="touch" class='pull-refresh' :style="[
			{'height': `${refreshHeight}px`},
			{'background': `url(${event_rul}/static/img/home/header-bg.png)`},
			{'background-size': '100% 360rpx'},
			{'background-position': 'bottom 0 left 0'},
			{'background-repeat': 'no-repeat'}]">>
			<view class="pull-refresh__loading">
				<view class="dot" :class="{'dot1': refreshLoading }"></view>
				<view class="dot" :class="{'dot2': refreshLoading }"></view>
				<view class="dot" :class="{'dot3': refreshLoading }"></view>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<scroll-view class="scroll-box" :style="touch ? 'height: ' + scrollHeight + 'px;': ''" :scroll-y="touch">
	  <view class="container">
		<swiper
			class="swiper-box"
			:indicator-dots="bannerList.length > 1"
			:autoplay="bannerList.length > 1"
			circular="true"
			indicator-active-color="#333333"
			:interval="5000"
			>
			<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
				<image class="swiper-item__img" :src="item.pic_url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<scroll-view class="nav_box" scroll-x="true">
			<!-- #ifdef MP-WEIXIN -->
			<view style="font-size: 24rpx;" class="item" @click="ChannelsUserProfile">
				<image src="https://dev.lansoft.shop/static/img/home/item-icon5.svg" mode=""></image>
				<text>视频号首页</text>
			</view>
			<!-- #endif -->
			<block v-for="(item,index) in navData" :key='index'>
				<view v-if="index != 4" style="font-size: 24rpx;" class="item" @click="goto" :data-url='item.url'>
					<image :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</block>
		</scroll-view>
	
		<view class="fashion_box">
			<!-- #ifdef MP -->
			<view class="left">
				<view class="title">
					<image class="fashion_box-icon" :src="event_rul +'/static/img/home/live-icon.svg'"></image>
					<text>直播精选</text>
					<text class="ico">限时热卖</text>
				</view>
				<view class="bot">
					
					<view class="item" @click="goto" :data-url="item.coverImg?'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+item.roomId:''" v-for="(item,index) in liveRec" :key='index'>
					   <image class="border-a-n" v-if="item.coverImg" :src="item.coverImg" mode=""></image>
					   
					   <view  v-else  style="border-radius: 120rpx;" class="iconfont icon-shipintianchong shop_note border-a-n">
					   	
					   </view>
						<view class="border" ></view>
						
						<view class="border-bx"></view>
						<view class="title_box" style="border-radius: 4rpx;">
							<view class="live-animation" v-show="item.coverImg">
								<text  class="heng1"></text>
								<text  class="heng2"></text>
								<text  class="heng3"></text>
							</view>
							<view class="shop_title" v-if="item.coverImg" style="">
								{{item.name}}
							</view>
							<view v-else class="shop_title" style="">
								{{item.name}}
							</view>
						</view>
					</view>
			
				</view>
			</view>
				<!-- #endif -->
			<view class="right">
				<view class="title">
					<image class="fashion_box-icon" :src="event_rul +'/static/img/home/recommend-icon.svg'"></image>
					<text>为你推荐</text>
					<text class="ico">甄选好货</text>
				</view>
				<view class="bot">
					<view class="item" @click="goto" :data-url="item.pic?'/pages/shop/product?id='+item.proid:''" v-for="(item,index) in shopRec" :key='index'>
						<block v-if="item.pic">
							<image style="border-radius: 10rpx;"
								:src="item.pic" mode="aspectFill"></image>
							<view class="price">
								<text class="symbol">￥</text>{{item.sell_price}}
							</view>
						</block>
						<view v-else  class="iconfont icon-shangpin shop_note">
							<view class="item-tips">{{item.sell_price}}</view>
						</view>							
					</view>
	
				</view>
			</view>
		</view>
	
		<view class="content" style="margin-top: 30rpx;">
			<home-list @dialogChange="dialogChange"  @listZanFn='listZanFn' :list='list'></home-list>
		</view>
		
		<nodata v-if="nodata" ></nodata>
		<nomore v-if="nomore"></nomore>
		<loading loadstyle="top:70%;" v-if="loading"></loading>
		<buydialog v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" :menuindex="menuindex"></buydialog>
	
		<!-- <popmsg ref="popmsg"></popmsg> -->
	  </view>
	</scroll-view>
	<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
	</scroll-view>
	<!-- 悬浮按钮 -->
	<drag-button></drag-button>
</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				anShow:false,
				cartCount:0,
				keyword:'',
				list: [],
				navData: [{
						name: '敬衡日记',
						url: '/diary/evernote/evernote',
						icon: app.globalData.event_url +'/static/img/home/item-icon1.svg'
					},
					{
						name: '话题广场',
						url: '/diary/topic/plaza',
						icon: app.globalData.event_url +'/static/img/home/item-icon2.svg'
					},
					{
						name: '全部商品',
						url: '/pages/shop/classify?homeType=true',
						icon: app.globalData.event_url +'/static/img/home/item-icon3.svg'
					},
					{
						name: '积分商城',
						url: '/activity/scoreshop/prolist',
						icon: app.globalData.event_url +'/static/img/home/item-icon4.svg'
					},
					{
						name: '直播',
						url: '/diary/live/live',
						icon: app.globalData.event_url +'/static/img/home/item-icon5.svg'
					},
				],
				liveRec:[{'name':'暂无直播'},{'name':'暂无直播'}],
				shopRec:[{'sell_price':'暂无商品'},{'sell_price':'暂无商品'}],
				opt: {},
				pagenum: 1,
				loading: false,
				isload: false,
				nomore: false,
				nodata: false,
				datalist: [],
				proid: 0,
				menuindex: -1,
				buydialogShow: false,
				bannerList: [],
				isFixed: false,  // 是否固定搜索框
				fixTop: 0, // 搜索框固定后到顶部的距离
				scrollTop: 0,  // 内容区域距离顶部的距离
				scrollHeight: 0, // 下拉刷新内容区域高度
				windowHeight: 0, // 屏幕可视区域高度
				clientY: '', // 手指滑动的Y坐标
				touch: '',  // 用户上拉还是下滑 (上划: false,下拉: true)
				refreshHeight: 0, // 刷新状态view的高度
				timeout1: null,
				timeout2: null,
				timeout3: null,
				refreshLoading: false,  // 刷新loading
				searchWidth: 92, 
				searchTop: 0, // 初始搜索框到顶部的距离
				searchScrollTop: 0, // 搜索框滚动的距离 = 从(fixTop+胶囊按钮高度+8)px开始 到  fixTop px结束
				menuButtonHeight: 0, // 胶囊按钮高度
				pagesScrollTop: 0,  // 页面滚动高度
				
				event_rul: app.globalData.event_url,

			}
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			
			this.getLists()
			this.getRec()
			// #ifdef MP

			// 获取右上角胶囊坐标信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			let menuButtonTop = menuButtonInfo.top;  // 胶囊到顶部的距离
			this.menuButtonHeight = menuButtonInfo.height;  // 胶囊的高度

			this.fixTop = menuButtonTop - (38 - this.menuButtonHeight) / 2;
			// console.log("胶囊距离顶部的距离:",menuButtonTop,"胶囊的高度:",this.menuButtonHeight,"input距离顶部的距离:",this.fixTop);

			this.searchTop = this.fixTop + this.menuButtonHeight + 8;
			this.searchScrollTop = this.searchTop;

			// #endif

			this.timeout3 = setTimeout(()=> {				
				// 获取内容区域距离顶部的距离
				uni.createSelectorQuery().in(this).select('.scroll-box').boundingClientRect(data => {
					this.scrollTop = data.top;
					// 获取scrollHeight = 屏幕可视区域高度 - 内容区域scroll-view距离顶部距离 - tabbar高度
					this.scrollHeight = this.windowHeight - this.scrollTop - 89;
				}).exec();
			},500)
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					// 获取屏幕可视区域高度
					this.windowHeight = res.windowHeight;
				}
			})
		},
		onUnload() {
			this.anShow = false;
			clearTimeout(this.timeout1);
			clearTimeout(this.timeout2);
			clearTimeout(this.timeout3);
		},
		onReachBottom: function () {
		  if (!this.nodata && !this.nomore) {
		    this.pagenum = this.pagenum + 1;
			this.getList()
		  }
		},
		methods: {
			//  #ifdef MP-WEIXIN
			// 视频号首页
			ChannelsUserProfile() {
				wx.openChannelsUserProfile({
					finderUserName: "sphWdNInL60a6XV",
					success: (res) => {
						console.log("视频号视频获取成功的回调",res);
					},
					fail: (res) => {
						console.log("视频号视频获取失败的回调",res);
					}
				})
			},
			// #endif
			// 页面滚动
			pageScroll(e) {
				let height = this.searchTop;
				// 是否固定搜索框
				if(e.detail.scrollTop >= height - this.fixTop) {
					this.isFixed = true;
					this.searchScrollTop = this.fixTop;
					this.searchWidth = 68;
				} else{
					if(Math.ceil(e.detail.scrollTop) < 5) {
						this.searchWidth = 92;			
					}
					this.searchScrollTop = this.searchTop - e.detail.scrollTop;
					this.isFixed = false;
				}
				// 改变搜索框宽度
				if(this.pagesScrollTop < e.detail.scrollTop) {
					if(this.searchWidth > 68) {
						this.searchWidth -= Math.ceil((92-68)/(this.searchTop - this.fixTop));
					}
				} else {
					if(this.searchWidth < 92) {
						this.searchWidth += Math.ceil((92-68)/(this.searchTop - this.fixTop));
					}
				}
				this.pagesScrollTop = e.detail.scrollTop;
			},
			// 页面触底
			reachBottom() {
				if (!this.nodata && !this.nomore) {
					this.pagenum = this.pagenum + 1;
					this.getList()
				}
			},
			//@touchstart 触摸开始
			start(e){        
				// console.log("打印触摸开始",e)
				this.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标
				this.refreshLoading = false;
				this.refreshHeight = 0;
			},
			//@touchend触摸结束
			end(e){  
				if(this.refreshHeight > 150) {
					this.list = [];
					this.pagenum = 1;
					this.timeout1 = setTimeout(() => {
						this.refreshHeight = 150;
						this.refreshLoading = true;
						this.getLists();
						this.getRec();
					},500);
					this.timeout2 = setTimeout(() => {
						this.touch = false;
					},2000);
				} else {
					this.touch = false;
				}
			},
			//@touchmove触摸移动
			move(e) {
				// 如果手指开始触摸的Y坐标 < 手指触摸移动的Y坐标,表示下拉
				if(this.clientY < e.changedTouches[0].clientY) {
					// console.log("this.clientY",this.clientY,e.changedTouches[0].clientY)

					// 下拉: 手指开始触摸的Y坐标 > 内容区域scroll-view到顶部的距离  (就开启下拉刷新)
					if(this.clientY > this.scrollTop) {
						this.touch = true;
						// 限制下拉刷新的高度最高为260px
						if(this.refreshHeight < 260) {
							let refresh = e.changedTouches[0].clientY - this.clientY;
							this.refreshHeight = refresh;
						}
					} else {
						this.touch = false;
					}
				}
			},
			listZanFn(e){
							this.list[e.index].iszan = e.show;
							if(this.list[e.index].binfo){
			this.list[e.index].zan_num = e.num;
			}else{
			this.list[e.index].zan = e.num;
			}
						
						},
			searchFn(){
				uni.navigateTo({
					url:'/pages/shop/search?keyword='+this.keyword,
					
				})
			},
			getRec(){
				//shop
				app.post('ApiHome/recommendGoodsList', {}, res => {
					 this.shopRec = res.list;
					//  if(res.list[0]){
					// 	this.shopRec[0] = res.list[0]; 
					//  }
					//  if(res.list[1]){
					//  	this.shopRec[1] = res.list[1]; 
					//  }
				})
				//live
				app.post('ApiHome/getLiveList', {}, res => {
					// this.liveRec = res.list;
					if(res.list[0]){
											this.liveRec[0] = res.list[0]; 
					}
					if(res.list[1]){
						this.liveRec[1] = res.list[1]; 
					}
					this.cartCount = res.cartCount;
				})
			},
			getLists() {
				this.loading = true;
				app.post('ApiHome/getBanner', {}, res => {
					this.bannerList = res.list;
				})
				//直播 笔记 视频 商品
				let promise1 = new Promise((resolve, rej) => {
					app.post('ApiHome/homeLiveList', {}, res => {
						res.list.forEach((item, index) => {
							item.listType = 'live'
							item.goods = JSON.parse(item.goods)
						})
						resolve(res.list)
					})
				})
				let promise2 = new Promise((resolve, rej) => {
					app.post('ApiHome/homeLuntan', {}, res => {
						res.list.forEach((item, index) => {
							item.listType = 'note'
						})
						resolve(res.list)
					})
				})
				let promise3 = new Promise((resolve, rej) => {
					app.post('ApiHome/homeVideo', {}, res => {
						res.list.forEach((item, index) => {
							item.listType = 'video'
						})
						resolve(res.list)
					})
				})
				Promise.all([promise1, promise2, promise3]).then((values) => {
					this.list.push(...values[0], ...values[2], ...values[1])
					this.getList()


				})
			},

			getList() {
				let that = this;
				var page = that.pagenum;
				that.loading = true;
				that.nomore = false;
				that.nodata = false;
				app.post('ApiHome/homeGoodsList', {
					pagenum: page,
				}, function(res) {
					that.loading = false;
					var data = res.list;
					res.list.forEach((item) => {
						item.listType = 'shop'
					})
					if (page == 1) {
						that.list.push(...data)
						if (data.length == 0) {
							that.nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							that.list.push(...data)
						}
					}
					that.loaded();
				});

				return
				app.post('ApiZhiwei/topicDetail', {
					topic_id: this.id
				}, (res) => {
					this.info = res.data
				})
			},
			dialogChange(id) {
				this.proid = id;
				this.buydialogChange();
			},
			buydialogChange: function() {
				this.buydialogShow = !this.buydialogShow;
			},

			closegg: function() {
				this.hideguanggao = 1;
			},
			showsubqrcode: function() {
				this.$refs.qrcodeDialog.open();
			},
			closesubqrcode: function() {
				this.$refs.qrcodeDialog.close();
			},
		}
	}
</script>
<style lang="scss">
	.pages-index {
		position:fixed;
		top:0;
		left:0;
		height: 100vh;
		width: 100vw;
	}
	.pages-scroll {
		height: 100vh;
		& ::-webkit-scrollbar {
			display: none;
		}
	}
 	.pages-hd {
		padding: 0 24rpx;
		border-radius: 0 0 30rpx 30rpx;
		&::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 176rpx;
			z-index: 3;
			background: #0A5D3B;
		}
		&.pages-hdh5 {
			min-height: 300rpx;
			padding-top: 36rpx;
			box-sizing: border-box;
			&::before {
				height: 195rpx;
			}
			.input_box {
				left: 30rpx;
				right: 30rpx;
				top: 92rpx;
				// #ifdef H5
				margin-top: 15rpx;
				// #endif
			}
		}
		.title_box {
			position: fixed;
			color: #EBE3AA;
			font-size: 26rpx;
			line-height: 40rpx;
			padding: 0;
			z-index: 4;
			.title {
				color: #EBE3AA;
				font-weight: 400;
				font-size: 36rpx;
			}
		}
	}
	.scroll-box {
		margin-top: -90rpx;
	}
	.container {
		padding: 0 24rpx;
	}
	.pull-refresh {
		position: relative;
		left: -24rpx;
		right: -24rpx;
		width: calc(100% + 48rpx);
		box-sizing: content-box;
		// #ifdef H5
		padding-top: 120rpx;
		// #endif
		&__loading {
			padding-top: 80rpx;
			display: flex;
			justify-content: center;
			.dot {
				width: 12rpx;
				height: 12rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				margin: 0 10rpx;
			}
			.dot1 {
				animation: loadings 0.6s linear infinite;
			}
			.dot2 {
				animation: loadings 0.6s linear 0.2s infinite;
			}
			.dot3 {
				animation: loadings 0.6s linear 0.4s infinite;
			}
		}
	}
	.swiper-box {
		width: 100%;
		height: 220rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.shop_note{
		font-size: 60rpx; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; width: 120rpx; height: 120rpx; background-color: #faebd4; color: #fff;
	}
	.fashion_box {
		width: 100%;
		height: 260rpx;
		display: flex;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 24rpx;
		border-radius: 12rpx;
		&-icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 10rpx;
		}

		.left,
		.right {
			padding: 18rpx 0 0 16rpx;
			flex: 1;

			.bot {
				display: flex;
				justify-content: space-around;
			}

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #0A5D3B;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.ico {
					// background-color: ;
					background: linear-gradient(to right, #FF5E07, #FF9F28);
					font-size: 22rpx;
					line-height: 32rpx;
					color: #fff;
					padding: 0 16rpx;
					border-radius: 32rpx 0 32rpx 32rpx;
					margin-left: 14rpx;
				}
			}

			.item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				&-tips {
					position: absolute;
					bottom: -48rpx;
					color: #ED5925;
					font-size: 24rpx;
				}

				.price {
					color: #ED5925;
					display: flex;
					align-items: center;
					position: absolute;
					bottom: -64rpx;
					font-weight: 500;
					color: #ED5925;
					font-size: 36rpx;
					line-height: 50rpx;
				}
				.symbol {
					font-size: 22rpx; 
					margin-top: 6rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 120rpx;
				}
			}
			.border-a-n {
				transform: scale(1.1);
				border: 2px solid #0A5D3B;
				animation: border-x 1.5s linear infinite ;
			}
			.border-bx {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 136rpx;
				height: 136rpx;
				border-radius: 240rpx;
				border: 2px solid #0A5D3B;
				opacity: 1;
				animation: border-bx 1.5s linear .2s infinite ;
			}

			.title_box {
				background-color: #0A5D3B;
				width: 120rpx;
				display: flex;
				color: #fff;
				padding: 3rpx 7rpx;
				position: absolute;
				top: 110rpx;

				.live-animation {
					height: 24rpx;
					display: flex;
					align-items: flex-end;
					margin-right: 3rpx;
					
					.heng1,
					.heng2,
					.heng3 {
						display: block;
						width: 4rpx;
						border-radius: 4rpx;
						margin-right: 3rpx;
						background-color: #fff;
					}
					
					
					.heng1 {
						height: 24rpx;
						animation: hengos .8s linear infinite;
					}
					
					.heng2 {
						height: 10rpx;
						animation: hengts .8s linear  infinite;
					}
					.heng3 {
						height: 24rpx;
						animation: henghs .8s linear .2s infinite;
						
					}
				}

			}
		}
		.right {
			padding-left: 16rpx;
			border-left: 1rpx solid #fafafa;
			.title {
				.ico {
					// background-color: ;
					background: linear-gradient(to right, #22B000, #53D71A);
					font-size: 22rpx;
					line-height: 32rpx;
					color: #fff;
					padding: 0 16rpx;
					border-radius: 32rpx 0 32rpx 32rpx;
					margin-left: 14rpx;
				} 
			}
			.bot {
				margin-top: -18rpx;
			}
		}
	}

	.nav_box {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		background: #FFF;
		border-radius: 12rpx;
		margin-top: 24rpx;
		height: 168rpx;
		white-space: nowrap;
		& ::-webkit-scrollbar {
			display: none;
		}

		.item {
			width: calc(100% / 4);
			flex-shrink: 0;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #333333;
			line-height: 32rpx;

			image {
				width: 74rpx;
				height: 74rpx;
				margin-bottom: 14rpx;
			}
		}
	}

	.input_box {
		position: fixed;
		display: flex;
		height: 76rpx;
		align-items: center;
		border-radius: 38rpx;
		background: #538d76;
		padding: 0 32rpx;
		border: 1rpx solid rgba(255,255,255,.6);
		z-index: 5;
		.icon-sousuo {
			font-size: 36rpx;
			color: #FFF;
			flex-shrink: 0;
		}
		input {
			flex: 1;
			margin-left: 16rpx;
		}
		.btn {
			width: 100rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: right;
			flex-shrink: 0;
			position: relative;
			&::before {
				position: absolute;
				content: "";
				left: 20rpx;
				top: 50%;
				height: 22rpx;
				border-left: 1rpx solid #FFF;
				transform: translateY(-50%);
			}
		}
	}

	.title_box {
		padding: 45rpx 0;
		display: flex;
		color: #333;
		font-size: 24rpx;
		align-items: center;
		letter-spacing: 2px;

		.title {
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.shop_title {
			letter-spacing: 0px;
			font-size: 22rpx; overflow: hidden;text-overflow: ellipsis;white-space:nowrap;
		}
	}
	
	page {
		background-color: #f2f2f4;
	}
	
	@keyframes hengos {
		0%   {height: 24rpx;}
		50%  {height: 10rpx;}
		100% {height: 24rpx;}
	}
	@keyframes hengts {
		0%   {height: 10rpx;}
		50%  {height: 24rpx;}
		100% {height: 10rpx;}
	}
	@keyframes henghs {
		0%   {height: 24rpx;}
		50%  {height: 10rpx;}
		100% {height: 24rpx;}
	}
	
	@keyframes border-x {
		  // 35%   {transform: scale(1.1);}
		  50%  {transform: scale(1);}
		  // 60%  {transform: scale(1);}
		  // 80%  {transform: scale(1.1);}
		  100% {transform: scale(1.1);}
	}

	@keyframes border-bx {
		  0%   {width: 136rpx;height: 136rpx; opacity: 1;border-width: 2rpx;}
		  50%  {border-width: 1rpx;}
		  100% {width: 158rpx;height: 158rpx; opacity: 0; border-width: 0;}
	}
	
	@keyframes loadings {
		0%   {background: rgba(0, 0, 0, 0.6);}
		100% {background: rgba(255, 255, 255, 0.6)}
	}
</style>
