<template>
	<view class="">
		<!-- 	<view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
			<view class="head-wrapper"></view>
			<view class="town-title">{{town}}里海云仓</view>
			<view class="body-wrapper">
				<block v-for="(item,index) in cloudList" :key="index">
					<navigator class="item"
						:url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.category_name}`"
						:style="{'background-image': `url(${item.background})`}">
						<text class="item-title">{{item.category_name}}云仓服务</text>
						<text>{{item.description}}</text>
						<view class="chakan-btn">查看</view>
					</navigator>
				</block>
			</view>
		</view> -->

		<view class="" v-if="cloudList.length>0">

			<view class="">
				<!-- <view :style="`height: ${appInfo.top}px;background-color: red;z-index: 99999;`"></view> -->
				<transition name="fade">
					<view class="head" style="padding-top:  var(--status-bar-height);" v-if="showtit">
						<view style="display: flex;align-items: center;">
							<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
								height="50.82rpx" @click='goBack'></u--image>
							<view class="head_tit">
								<!-- {{town}}里海云仓 -->
								{{a}}
							</view>
						</view>
						<view class="head_r" @click="showPop=true">
							<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
								height="50.82rpx"></u--image>
							<text>全部</text>
						</view>
					</view>
				</transition>
				<transition name="fade">
					<!-- 滚动 -->
					<view class="heads" style="padding-top: var(--status-bar-height);" v-if="!showtit">
						<view style="align-items: center;display: flex;justify-content: space-between;">
							<view class="" style="display: flex;align-items: center;">
								<view class="back" style="margin-right: 17rpx;">
									<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
										height="50.82rpx" @click='goBack'></u--image>
								</view>
								<view class="" style="font-size: 40rpx;transform: skewX(-10deg);">
									供销综合云市场
								</view>
							</view>

							<view style="position: relative;width: 289.14rpx;">
								<u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="请输入..."
									v-model="keyword" class="serch_cls"></u-search>
								<u--image class="img_cls" :showLoading="true" src="/static/images/GXSC/SS.png"
									width="115.65rpx" height="56.82rpx" @click="serch"></u--image>
							</view>
							<view class='head_r' @click="showPop=true">
								<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
									height="50.82rpx"></u--image>
								<text class="">全部</text>
								<view class="flags">

								</view>
							</view>
						</view>
					</view>
				</transition>
				<view class="box">
					<view :class="act_swiper">
						<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swipers"
							:circular="true" previous-margin='0rpx' next-margin='0rpx' :current="current"
							:disable-touch="true">
							<swiper-item v-for="(item,index) in cloudList">
								<u--image :showLoading="true" :src="item.cover" :class="act_img" width="750rpx"
									height="998.83rpx"></u--image>
							</swiper-item>
						</swiper>
					</view>
					<view class="" style="height:998.83rpx;" v-if="act_swiper">

					</view>

					<!-- 	<u--image :showLoading="true" src="/static/images/LHYC/BG.png" width="750rpx"
					height="998.83rpx"></u--image> -->
					<view class="menu" style="z-index: 999;" v-if="showtit">
						<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swiper"
							:circular="true" previous-margin='280rpx' next-margin='280rpx' :current="current"
							@change="test">
							<swiper-item v-for="(item,index) in cloudList" :class="{active_swiper:index==current}">
								<u--image :showLoading="true" :src="item.background" width="175.23rpx"
									height="175.23rpx"></u--image>
							</swiper-item>
						</swiper>
					</view>

					<transition name="fade">
						<view class="content">
							<view class="content_sift" :style="{position:pocls,top:(headtop+16)+'px'}" v-if="!showtit">
								<view :class="{act:item.act}" v-for="item,index in actList" :key="index"
									@click="screenGoods(item.screen,index)">
									{{item.tit}}
								</view>
							</view>
							<view class="goods_list" v-if="goodsList.length>0">
								<view class="empty" v-if='showLoading'>
									<u-loading-icon v-if='showLoading' text="加载中" textSize="18"></u-loading-icon>
								</view>
								<view class="goods" @click="godDetail(item)" v-else v-for="item,index in goodsList">
									<view class="left">
										<u--image :showLoading="true" :src="item.image" width="192.76rpx"
											height="192.76rpx"></u--image>
									</view>
									<view class="right">
										<view class="tit">
											<!-- 亿福馒头粉纯天然无添加小麦粉加工 1000g/袋 -->
											{{item.store_info}}
										</view>
										<view class="">
											<view class="good_score">
												<text style="margin-right: 10rpx;color: #F84221;">{{item.rate}}</text>
												<text>{{item.reply_count}}评论</text>
											</view>
											<view class="good_price">
												<view class="good_price_l">
													<view class=""
														style="color: #F84221;font-size: 22.78rpx;font-weight: bold;">
														￥<text style="font-size: 30rpx;">{{item.price}}</text>
													</view>
													<view class="old_price">
														￥30.00
													</view>
												</view>
												<view class="good_price_r" ref="container">
													<view :class="{x_tra:trnList[index].bottom }"
														:style="`transform:translateY(${trnList[index].bottom}px);transition:${trnList[index].bottom?1:0}s  cubic-bezier(0.4, -0.9, 0.75, 1);`"
														@click.stop="addcart(index)">
														<u--image :class="'act_class'+index"
															:style="`transform:translateX(${trnList[index].left}px);transition:${trnList[index].bottom?1:0}s `"
															src="/static/images/LHYC/J.png" width="49.07rpx"
															height="49.07rpx"></u--image>
													</view>

												</view>

											</view>
										</view>
									</view>
								</view>
								<view style="height: 100rpx;">
									<!-- <u-loadmore :status="status" /> -->
								</view>
							</view>

							<view v-else>
								<view class="empty">
									<view class="info">
										<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
											height="400.09rpx"></u--image>
									</view>
								</view>
							</view>

							<view class="card" :style="`bottom:${appInfo.bottom}px`"
								@click="navgo('/pages/order_addcart/order_addcart')">
								<view class="left">
									<view class="cart" :class="{act_cart:act_cart}"
										style="position: relative;z-index: 9999999;">
										<u--image :showLoading="true" src="/static/images/LHYC/GWC.png" width="63.09rpx"
											height="63.09rpx"></u--image>

										<view class="badge" v-show="goodsNum">
											{{goodsNum}}
										</view>
									</view>
									<view class="tot_price">
										<view class="">
											￥{{totalMoney}}
										</view>
										<!-- <view class="">
											支持配送 售后无忧
										</view> -->
									</view>
								</view>
								<view class="right">
									去结算
								</view>
							</view>
						</view>
					</transition>

				</view>
				<!-- http://192.168.1.5:8080/ -->
			</view>
			<!-- 组件 -->
			<view<u-popup mode="right" :show="showPop" @close="showPop=false" @open="showPop=true">
				<view class="pop">
					<!-- <text>出淤泥而不染，濯清涟而不妖</text> -->
					<view style="height: var(--status-bar-height);"></view>
					<view class="pop_head" style="display: flex;">
						<u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
							height="50.82rpx" @click='showPop=false'></u--image>
						<view class="head_tit">
							里海云仓
						</view>
					</view>
					<view class="pop_content">
						<view class="pop_li" @click="all(index)" v-for="item,index in cloudList" :key="index">
							<u--image :showLoading="true" :src="item.background" width="84.11rpx"
								height="84.11rpx"></u--image>
							<view class="" style="margin-left: 20rpx;">
								<view style="font-size: 33.29rpx;color: black;">
									{{item.category_name}}云仓服务
								</view>
								<view class="" style="font-size: 22.78rpx;">
									{{item.description}}
								</view>
							</view>
						</view>
					</view>
				</view>
				</u-popup>
		</view>
		<view class="empty" style="" v-else>
			<view style="height: var(--status-bar-height);"></view>
			<view class="info">
				<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
					height="400.09rpx"></u--image>
			</view>

		</view>

		<view class="" :style="`height:${appInfo.bottom}px;background-color:white`">

		</view>

	</view>


	</view>

</template>

<script>
	import {
		cloudWarehouse,
		getCityCloundShop
	} from '@/api/api.js'
	import {
		Toast
	} from '@/libs/uniApi';
	import {
		initiateAssistApi
	} from '@/api/activity.js';
	import {
		getCartCounts,
		getCartList,

	} from '@/api/order.js';
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		postCartAdd,
	} from '@/api/store.js';
	import {
		times
	} from '../../../uni_modules/uview-ui/libs/function/digit';
	export default {
		data() {
			let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
			return {
				a: "",
				trnList: [],
				act_cart: false,
				appInfo: {},
				pocls: "",
				type: "",
				act_swiper: "",
				current: 3,
				goodsNum: 0,
				goodsList: [],
				winHeight: 0,
				cloudList: [],
				street_code: '',
				totalMoney: 0,
				town: '',
				list: [1, 1, 1, 1, 1],
				showPop: false,
				keyword: "",
				showLoading: false,
				tot_price: 1,
				showtit: true,
				cartList: [],
				activeClass: 'activeClass',
				headtop: 0,
				page_num: 1,
				act_img: "",
				cartTagInfo: {},
				actList: [{
					tit: '综合',
					act: "",
					screen: ""
				}, {
					tit: '销量',
					act: "",
					screen: "sales"
				}, {
					tit: '价格',
					act: "",
					screen: "price_asc"
				}],
				status: "loadmore",
				flag: false,

			}
		},
		onLoad(e) {
			this.cartFn()
			uni.getSystemInfo({
				success: (res) => {
					this.winHeight = res.windowHeight
					this.appInfo = res.safeAreaInsets
				},
			});
			this.street_code = e.street
			this.town = e.town
			this.getCloundShop()
		},
		// 分页
		// onReachBottom() {
		// 	if (this.flag) return
		// 	this.status = "loading"
		// 	this.page_num += 1
		// 	this.flag = true
		// 	this.getList().then(res => {
		// 		return
		// 		this.goodsList = this.goodsList.concat(res.data.data)
		// 		this.flag = false
		// 		if (!res.data.data.length) {
		// 			this.status = "nomore"
		// 			this.flag = true
		// 		}
		// 	})
		// },


		onPageScroll(e) {
			let that = this
			this.showtit = !Boolean(e.scrollTop)
			uni.createSelectorQuery()
				.in(this)
				.select('.content')
				.boundingClientRect(rect => {
					if (rect.top <= (this.headtop + 16)) {
						this.pocls = 'fixed'
						this.act_swiper = 'act_swiper'
						this.act_img = 'act_img'

					} else {
						this.pocls = ''
						this.act_swiper = ''
						this.act_img = ''

					}
				})
				.exec();
			if (this.headtop) return
			uni.createSelectorQuery()
				.in(this)
				.select('.flags')
				.boundingClientRect(rect => {
					this.headtop = rect.top
				})
				.exec();
			uni.createSelectorQuery()
				.in(this)
				.select('.cart')
				.boundingClientRect(rect => {
					this.cartTagInfo = rect
				})
				.exec();

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.getCloundShop()
			this.getList()
		},
		// onReachBottom() {
		// 	console.log("daidi")

		// },
		methods: {
			cartFn() {
				getCartList().then(res => {
					this.cartList = res.data.list
					this.cartList[0].list.forEach(e => {
						this.totalMoney = this.totalMoney + Number(e.productAttr.price) * e.cart_num
					})
				})
				getCartCounts().then(res => {
					this.goodsNum = res.data[0].count
				})
			},
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						this.isAuto = true;
						this.isShowAuth = true
					}

				})
			},
			serch() {
				// console.log(this.keyword)
				this.getList()
			},
			goBack() {
				uni.navigateBack()
			},
			screenGoods(type, i) {
				this.actList.forEach(item => {
					item.act = ""
				})
				this.actList[i].act = true
				this.type = type
				this.getList()

				// console.log(this.type)

			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				this.showLoading = true
				cloudWarehouse({
					street_code: this.street_code,
					category_id: this.cloudList[this.current].category_id,
					order: this.type,
					keyword: this.keyword,
					// page: this.page_num

				}).then(res => {
					this.goodsList = res.data.list
					this.showLoading = false
				})

			},
			addcart(i) {
				let that = this
				// return
				console.log(i)
				uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
					that.trnList[i].left = this.cartTagInfo.left - data1.left;
					that.trnList[i].bottom = this.cartTagInfo.top - data1.top;
					console.log(that.trnList[i])
					timer = setTimeout(() => {
						that.trnList[i].left = 0
						that.trnList[i].bottom = 0
					}, 1000)
				}).exec();
				// console.log(this.$refs.jia1[i])
				// return
				// this.$refs.jia[i].style.transition = "0.5s"
				// this.$refs.jia[i].style.transform = `translateX(${this.trnList[i].left})`
				// this.$refs.jia1[i].style.transform = `translateY(${this.trnList[i].bottom})`
				// this.$refs.jia[i].style.transform = `translateY(${this.trnList[i].bottom})`

				// this.trnList[i].left
				// this.$refs.jia[i].style.translateY = this.trnList[i].bottom
				// this.$refs.jia[i].style.translateY = this.trnList[i].bottom
				// transform: ;
				// return
				// let data = {
				// 	cart_num: 1,
				// 	is_new: 0,
				// 	product_attr_unique: i.sku[''].unique,
				// 	product_id: i.product_id,
				// 	product_type: i.product_type,
				// 	spread_id: "",
				// }
				// let that = this
				// let res = postCartAdd({
				// 	...data
				// }).then((res, err) => {
				// 	this.act_cart = true
				// 	this.cartFn()
				// 	uni.showToast({
				// 		title: "加入成功",
				// 		duration: 1000,

				// 	})
				// }).catch(err => {
				// 	// this.act_cart = false
				// 	uni.showToast({
				// 		title: err,
				// 		icon: "none",
				// 		duration: 1000,
				// 	})
				// })
				// setTimeout(() => {
				// 	that.act_cart = false
				// }, 500)
				// uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
				// 	that.trnList[i].left = this.cartTagInfo.left - data1.left + 'px';
				// 	that.trnList[i].bottom = this.cartTagInfo.top - data1.top + 'px';
				// 	console.log(that.trnList[i])
				// }).exec();
				// this.tot_price += Number(price)
			},
			all(index) {
				this.showPop = false
				this.current = index
				this.getList()
			},
			test(e) {
				// console.log(e.target.current)
				this.current = e.target.current
				// console.log(e)
				this.getList()
			},

			async getCloundShop() {
				const {
					data
				} = await getCityCloundShop({
					street_code: this.street_code
				})
				this.cloudList = data
				cloudWarehouse({
					street_code: this.street_code,
					category_id: this.cloudList[this.current].category_id
				}).then(res => {
					this.goodsList = res.data.list
					this.goodsList.forEach(item => {
						this.trnList.push({
							left: 0,
							bottom: 0
						})
					})
				})
				console.log("sad", this.trnList)
				data.length < 1 ? Toast("暂无云仓") : '';
			}
		}
	}
</script>





<style lang="scss" scoped>
	@keyframes addcatr {
		0% {
			opacity: 1;
		}

		95% {
			opacity: 1;
		}

		100% {
			opacity: 0;

			// top: ;
		}
	}

	.flags {
		background-color: red;
		z-index: 99999999;
	}

	.act_cart {
		transition: 0.5s;
		transform: scale(1.1);
		// transform: translateY() translateY();
		// transition: trans;
		// transform: translate();
	}

	.box {
		position: relative;

		.content {
			width: 100vw;
			// position: absolute;
			// top: 965rpx;
			// border-top: 5px solid red;
			z-index: 99;
			background-color: #F4F4F4;
			// padding: 0 10rpx;

		}



		.active_swiper {
			transform: scale(1.3);
			// transform: translateX() translateY();

		}

		.pictrue {
			position: relative;
			width: 100%;
			height: 345rpx;

		}

		.act {
			color: #FF6D20;
		}

		.act_content {
			width: 100vw;
			// position: absolute;
			// top: 965rpx;
			z-index: 99;
			background-color: #F4F4F4;
			padding: 0 10rpx;

			// transition: opt\ linear;
			padding-top: 200rpx;
		}



		// .act_class:active {
		// 	transform: scale(2);
		// }



		.content_act {
			width: 100vw;
			position: absolute;
			top: 165rpx;
			z-index: 99;
			background-color: #F4F4F4;
			padding: 0 10rpx;
		}
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s;

	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.head_tits {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 20rpx;
		color: white;
	}

	.img_cls {
		position: absolute;
		top: 50%;
		right: 7rpx;
		transform: translateY(-50%);

	}

	.pop {
		width: 615.07rpx;
		padding: 30rpx 28rpx;

		.pop_content {
			width: 559rpx;
			height: 80vh;
			background-color: #F4F4F4;
			padding: 28rpx;
			border-radius: 21.03rpx 21.03rpx 0rpx 0rpx;
			margin-top: 47rpx;

			.pop_head {
				// display: flex;
			}

			.pop_li {
				display: flex;
				margin-bottom: 52rpx;
			}
		}


	}

	.head_tit {
		margin-left: 20rpx;
		font-size: 40rpx;
		// font-weight: 700;
		transform: skewX(-10deg);
	}


	.act {
		color: red;
	}

	.head {
		position: absolute;
		z-index: 100;
		color: white;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 20rpx;
		align-items: center;



	}

	.heads {
		position: fixed;
		z-index: 100;
		color: white;
		width: 100%;
		padding: 0 20rpx;
		// background-color: white;





	}

	.menu {
		position: absolute;
		top: 748rpx;
		width: 750rpx;
		background-color: rgba(255, 255, 255, 0.5);
		// height: 175.23rpx;
		// box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.5);
		box-shadow: 0 0 100rpx 30rpx rgba(255, 255, 255, 0.9);

	}

	.goods_list {
		min-height: 95vh;
		padding: 0 10rpx;
		// background-color: red;

		.goods {
			display: flex;
			padding: 21rpx;
			background-color: white;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			margin-bottom: 20rpx;

			.left {
				width: 192.76rpx;
				height: 192.76rpx;
				border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
				margin-right: 21rpx;
			}

			.right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.tit {
					font-size: 29.79rpx;
					color: black;
					font-weight: bold;

				}

				.good_score {
					font-size: 26rpx;
					color: #B3B3B3;
					margin-bottom: 15rpx;
				}

				.good_price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 60vw;

					.good_price_r {
						z-index: 9;
						// transition: 1s linear;
					}

					.good_price_l {
						display: flex;

						.old_price {
							color: #B3B3B3;
							text-decoration: line-through;
							font-size: 26.29rpx;
							margin-left: 15rpx;
						}
					}
				}

			}

			// color: greenyellow;
		}
	}

	.activeClass {
		width: 400rpx;
		height: 400rpx;
	}

	.act_swiper {
		height: 150rpx;
		position: fixed;
		z-index: 99;
		overflow: hidden;
	}

	.act_img {
		// transition:t;
		transform: translateY(-848rpx);

	}

	// .act_swiper2 {
	// 	height: 998rpx;
	// }

	.content_sift {
		width: 750rpx;
		padding: 22rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		// background-color: green;
		z-index: 99;
		box-sizing: border-box;
		margin-bottom: 20rpx;


	}

	.swipers {
		width: 750rpx;
		height: 998.83rpx;
	}

	.card {
		width: 720rpx;
		z-index: 999999;
		// margin:auto;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		// bottom: 0;
		background-color: #333333;
		height: 101.64rpx;
		border-radius: 50.82rpx;
		overflow: hidden;
		color: white;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.left {
			display: flex;
			align-items: center;
			padding: 10rpx 35rpx;

			.tot_price {
				display: flex;
				margin-left: 42rpx;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.right {
			font-size: 33.29rpx;
			line-height: 50px;
			background: linear-gradient(to right, #F84221, #FF6D20);
			width: 175.23rpx;
			text-align: center;
		}
	}

	.x_tra {
		// position: relative;
		z-index: 999999;
		animation-name: addcatr;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
		animation-fill-mode: forwards; // animation-iteration-count: 1;
		/* 设置为1 */
		// transition: 1s cubic-bezier(0.5, -0.5, 1, 1);
	}

	.badge {
		position: absolute;
		top: 0;
		right: 0;
		background-color: red;
		transform: translate(50%, -50%);
		padding: 0 10rpx;
		border-radius: 30rpx;
	}

	.cloud_entrepot {
		background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/ycbg.png") no-repeat;
		background-size: cover;
		padding-bottom: 92.98rpx;
	}

	.head-wrapper {
		height: 485.96rpx;
		width: 100%;
		background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/top.png") no-repeat;
		background-size: cover;
		margin-bottom: 49.12rpx;
	}

	.town-title {
		margin: 0 auto;
		width: 100%;
		text-align: center;
		font-size: 50.88rpx;
		color: #fff;
		margin-bottom: 28.07rpx;

		&::after {
			content: '';
			display: inline-block;
			width: 66.67rpx;
			height: 31.58rpx;
			background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
			background-size: cover;
			margin-left: 24.56rpx;
		}

		&::before {
			content: '';
			display: inline-block;
			width: 66.67rpx;
			height: 31.58rpx;
			background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
			background-size: cover;
			margin-right: 24.56rpx;
		}
	}


	.body-wrapper {
		width: 694.74rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;

		.item {
			width: 336.84rpx;
			height: 100%;
			padding: 24.56rpx 28.07rpx;
			margin-bottom: 21.05rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;

			text {
				display: block;
				font-size: 24.56rpx;
				color: #999;
				margin-bottom: 14.04rpx;
			}

			.item-title {
				font-size: 31.58rpx;
				color: #333;
			}

			.chakan-btn {
				width: 114.04rpx;
				height: 49.12rpx;
				font-size: 28.07rpx;
				text-align: center;
				line-height: 49.12rpx;
				color: #fff;
				margin-top: auto;
				background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
				border-radius: 50px;
			}
		}
	}

	.empty {
		// display: flex;
		// justify-content: space-between;
		// flex-direction: column;
		// align-items: center;
		// padding: 20vh 0;
		position: relative;
		height: 100vh;

		.info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		// padding-top: 100px;
	}

	.head_r {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cart {
		z-index: 999;
	}
</style>