discounts-minapp/pages/index/index.vue

<template>
	<view class="home">
		
		<zs-banner :city="city" position></zs-banner>

		<view class="login-home" >
			<!-- 登录显示的套餐列表 -->
			<view class="discount-list">
				<view class="discount-item" v-for="(item,index) in discountsList" :key="index" @click="goDetail(index)">
					<image class="icon" :src="item.icon" mode=""></image>
					<view class="title">{{item.title}}</view>
					<view class="tag" v-if="item.tag">
						{{item.tag}}
					</view>
				</view>
			</view>
			
			<view class="recommend-box">
				<view class="top-box">
					<view class="title">
						天天特惠
					</view>
					<view class="type-box">
						<image class="hot" src="../../static/hot-white.png" mode=""></image>
						<view class="type">
							今日超低价
						</view>
					</view>
				</view>
				<view class="recommend">
					<view class="recommend-item">
						
						<view class="image-box">
							<image class="image" src="https://img2.baidu.com/it/u=2852595632,3564235706&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" mode=""></image>
							<view class="btn-box">
								<view class="desc">
									满200享7折
								</view>
								<view class="btn">
									整点开抢
								</view>
							</view>
						</view>
					</view>
					
					<view class="recommend-item">
						<view class="image-box">
							<image class="image" src="https://img0.baidu.com/it/u=2490196579,2804013959&fm=253&fmt=auto&app=138&f=JPEG?w=743&h=500" mode=""></image>
							<view class="btn-box">
								<view class="desc">
									满200享7折
								</view>
								<view class="btn">
									整点开抢
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="content">
				
				<!-- 分类 -->
				<scroll-view scroll-x enable-flex class="tab-group" style="white-space: nowrap;">
					<view class="tab-item" :class="[tab == 0?'active':'']" @click="handleTab(0)">
						<view class="tab-title">
							热门推荐
						</view>
						<view class="sub-title">
							优选好物
						</view>
					</view>
					<view class="tab-item" :class="[tab == 1?'active':'']" @click="handleTab(1)">
						<view class="tab-title jiayou">
							加油充电
						</view>
						<view class="sub-title">
							折上再减
						</view>
					</view>
					<view class="tab-item" :class="[tab == 2?'active':'']" @click="handleTab(2)">
						<view class="tab-title">
							医疗健康
						</view>
						<view class="sub-title">
							折上再减
						</view>
					</view>
					<view class="tab-item" :class="[tab == 3?'active':'']" @click="handleTab(3)">
						<view class="tab-title">
							酒店住宿
						</view>
						<view class="sub-title">
							折上再减
						</view>
					</view>
					
				</scroll-view>


				<!-- 列表 -->
				<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
					<view class="left">
						<view class="left-frist">
							<view class="top-box">
								<view class="title">
									天天低价
								</view>
								<view class="type-box">
									<image class="hot" src="../../static/hot-white.png" mode=""></image>
									<view class="type">
										今日超低价
									</view>
								</view>
							</view>
							<view class="image-box">
								<image class="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F45f7efd9-3760-4fa0-8cf0-79ca4b44d017%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695803683&t=09678f8c997578d3e8101dd2b0a597e8" mode=""></image>
								<view class="btn-box">
									<view class="btn">
										折
									</view>
									<view class="desc">
										满200享7折
									</view>
								</view>
							</view>
						</view>
						<view class="store-item" v-for="(item,index) in list" :key="index" @click="goShopDetail(item)">
							<zs-img v-if="index == 0"  :src="item.src"  border="border1" width="335rpx" height="335rpx"  mode="" ></zs-img>
								<zs-img v-else :src="item.src"  :border="index<3?(index%2 == 0? 'border2':'border3'):''" width="335rpx" height="335rpx"  mode="" ></zs-img>
								<view class="info">
									<view class="title">
										{{item.title}}
									</view>
									<view class="address">
										
										<image class="position" src="../../static/position.png" mode=""></image>
										{{item.distance}}km
									</view>
									<image v-if="index==0" class="hot-icon" src="../../static/hot1.png" mode=""></image>
								</view>
						</view>
					</view>
					<view class="right">
						<view class="store-item frist" @click="goShopDetail(list1[0])">
								<zs-img  :src="list1[0].src" width="335rpx"  height="322rpx" mode="" ></zs-img>
								<view class="info">
									<view class="title">
										{{list1[0].title}}
									</view>
									<view class="tags">
										<view class="tag-item">
											<view class="label">
												折
											</view>	
											<view class="value">
												满200享8折
											</view>
										</view>
									</view>
								</view>
						</view>
						
						<view v-if="index!=0" class="store-item" v-for="(item,index) in list1" :key="index" @click="goShopDetail(item)">
								<zs-img  :src="item.src" :border="index<3?(index%2 == 0? 'border3':'border2'):''" width="335rpx"  height="335rpx" mode="" ></zs-img>
								<view class="info">
									<view class="title">
										{{item.title}}
									</view>
									<view class="address">
										<image class="position" src="../../static/position.png" mode=""></image>
										{{item.distance}}km
									</view>
								</view>
						</view>
					</view>

				</zs-list>
			</view>



		</view>

		<!-- 登录 -->
		<!-- 		<view class="login-btn" v-if="isLogin !== 1">
			<button class="btn" type="default" @click="handleLogin">注册/登录</button>
		</view> -->


		<!-- <view class="fixed-btn" @click="handleMore" v-if="!userId">
			<view class="">
				更多
			</view>
			<view class="">
				套餐
			</view>
		</view> -->

		


	</view>
</template>

<script>
	import {
		getUserDetail,
		getScheme
	} from '@/api/common.js'
	// 腾讯地图
	var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
	var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
	export default {
		data() {
			return {
				show: false,
				loading: true,
				isLogin: 0,
				userId: '',
				tab: 0,
				search: '', //搜索框
				status: 'more',
				city:'成都',
				latitude : '',
				longitude:'',
				discountsList: [ //优惠列表
					{
						icon: require('../../static/type1.png'),
						title: '加油充电',
						tag:'大额券'
					},
					{
						icon: require('../../static/type2.png'),
						title: '酒店民宿',
						tag:'天天领'
					},
					{
						icon: require('../../static/type3.png'),
						title: '景区门票',
						tag:''
					},
					{
						icon: require('../../static/type4.png'),
						title: '餐饮美食',
						tag:''
					},
					
					{
						icon: require('../../static/type5.png'),
						title: '慧研学',
						tag:''
					},
					{
						icon: require('../../static/type6.png'),
						title: '超市购物',
						tag:'1元购'
					},
					{
						icon: require('../../static/type7.png'),
						title: '代驾',
						tag:''
					},
					{
						icon: require('../../static/type8.png'),
						title: '健身运动',
						tag:'特惠'
					},
					{
						icon: require('../../static/type9.png'),
						title: '医疗健康',
						tag:''
					},
					{
						icon: require('../../static/type10.png'),
						title: '家政服务',
						tag:'特惠'
					},
					
				],
				list: [{
						src: 'https://t7.baidu.com/it/u=2204874366,1447142724&fm=193&f=GIF',
						title: 'V9健身房',
						distance: 13.62

					},
					{
						src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F159660028%2Fb327e4a2a3e1473a82e2a53b5a5d2db2.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTU5NjYwMDI4L2IzMjdlNGEyYTNlMTQ3M2E4MmUyYTUzYjVhNWQyZGIyLmpwZWc%3D%2Fsign%2Fcec9ce1dfb5e0c3e627e30fb099899da.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693560973&t=7b7dfb1cbf6a6759e70f868c894888c9',
						title: '万安加油站（中石化）',
						distance: 13.62

					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '贵阳万丽酒店',
						distance: 5.23,
						
					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					
				],
				list1: [
					{
						id: 3,
						src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc7481b97-86a3-4aba-8d2c-d3c84d7ce831%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695542967&t=fe7462e4fc56e50b98013b198043278d',
						title: '黄果树瀑布',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://alipic.lanhuapp.com/XDSlicePNGMAXdb1c28750d2e8f45e7509c176f186600d2bafe09de15a8107b168c078801e1e7.png',
						title: '微笑牙科诊所',
						distance: 5.23,
						
					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '贵阳万丽酒店',
						distance: 5.23,
						
					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					
				]
			}
		},
		watch: {
			show(val) {
				if (val) {
					this.$nextTick(() => {
						// this.$refs.uForm.setRules(this.rules)
					})
				}
			},
			tab(val){
				if (val == 0) {
					this.list =[{
						src: 'https://mstatic.gzstv.com/media/images/2021/06/09/w1nrZC8_x-PQ.jpg',
						title: '万安加油站（中石化）',
						distance: 13.62

					},
					{
						src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F159660028%2Fb327e4a2a3e1473a82e2a53b5a5d2db2.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTU5NjYwMDI4L2IzMjdlNGEyYTNlMTQ3M2E4MmUyYTUzYjVhNWQyZGIyLmpwZWc%3D%2Fsign%2Fcec9ce1dfb5e0c3e627e30fb099899da.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693560973&t=7b7dfb1cbf6a6759e70f868c894888c9',
						title: '万安加油站（中石化）',
						distance: 13.62

					},
					{
						id: 2,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://file.gzl.cn/group1/M00/32/54/wKkBH1_7uBKAaWm1AAMJ4gwToRo237.jpg',
						title: '贵阳万丽酒店',
						distance: 5.23,
						
					},
				]
				} else if (val == 1) {
					this.list = [
						{
							id: 2,
							title: '老贵阳牛肉粉（友怡路店）',
							src:'https://alipic.lanhuapp.com/XDSlicePNGMAXd4e61a1529e3eb31b8c043a65c2e8a1f3cd13c0da50ac3107d471c6777b667a6.png',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						{
								id: 1,
								title: '黔诚酸汤牛肉（甲秀楼店）',
								src:'https://alipic.lanhuapp.com/XDSlicePNGMAXa74cfc58f9a54990e0a1e804e763563f4521e3ec1dc948005893ae57a451e506.png',
								isLike: true,
								price: 6.5,
								desc: '购物9折起',
								distance: 2.94,
								latitude: 26.577315,
								longitude: 106.696473,
								address: '贵州省贵阳市南明区中山南路58号中山公馆2期'
							},
							{
								id: 2,
								title: '毛辣果（护国路店）',
								src:'https://alipic.lanhuapp.com/XDSlicePNGMAXf9cdc403cc6f4e7873202d8c6dae02be4872c20630de6fedc0da7648ab28d354.png',
								isLike: false,
								price: 6.25,
								desc: '购物9折起',
								distance: 5.23,
								latitude: 26.652284,
								longitude: 106.626597,
								address: '贵州省贵阳市观山湖区诚信北路8号'
							},
						
					]
				} else if (val == 2) {
					this.list = [
						{
							id: 2,
							title: '海天星辰大药房',
							src:'https://img0.baidu.com/it/u=3833239224,203518028&fm=253&fmt=auto&app=138&f=JPEG?w=962&h=437',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						{
								id: 1,
								src:'https://img1.baidu.com/it/u=2524636074,1628913937&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500',
								title: '泉源堂智慧药房',
								isLike: true,
								price: 6.5,
								desc: '购物9折起',
								distance: 2.94,
								latitude: 26.577315,
								longitude: 106.696473,
								address: '贵州省贵阳市南明区中山南路58号中山公馆2期'
							},
						{
							id: 2,
							title: '叮当快药',
							src:'https://img0.baidu.com/it/u=11997160,2930303799&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						
						
					]
				} else if (val == 3) {
					this.list = [
						{
							id: 2,
							title: '贵阳万国艺术酒店',
							src:'https://dimg04.c-ctrip.com/images/0202w120008v2aba15BD3_R_600_400_R5_D.jpg',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						{
								id: 1,
								src:'https://ak-d.tripcdn.com/images/0223x1200084a4izh65B9_R_600_400_R5_D.jpg',
								title: '漫居酒店',
								isLike: true,
								price: 6.5,
								desc: '购物9折起',
								distance: 2.94,
								latitude: 26.577315,
								longitude: 106.696473,
								address: '贵州省贵阳市南明区中山南路58号中山公馆2期'
							},
							{
								id: 2,
								title: '泊斯曼酒店',
								src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
								isLike: false,
								price: 6.25,
								desc: '购物9折起',
								distance: 5.23,
								latitude: 26.652284,
								longitude: 106.626597,
								address: '贵州省贵阳市观山湖区诚信北路8号'
							},
						
					]
				} 
				
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.getUserDetail()
			}
			this.getCity()

		},
		onShow() {
			this.isLogin = uni.getStorageSync('token')
			if(!this.isLogin) {
				uni.navigateTo({
					url:'./visitorIndex'
				})
			}
			this.show = false
			this.city = uni.getStorageSync('city')
		},
		onHide() {
			this.show = false
		},
		methods: {
			getCity(){
				this.city = '定位中'
				let that = this
				uni.getLocation({
				        type: 'wgs84',
				        geocode: true,
				        success: (res) => {
				            console.log("获取经纬度成功");
				            this.latitude = res.latitude;
				            this.longitude = res.longitude;
				        },
				        fail: () => {
				            console.log("获取经纬度失败");
				        },
				        complete: () => {
				            // 解析地址
				            qqmapsdk.reverseGeocoder({
				                location: {
				                    latitude: this.latitude,
				                    longitude: this.longitude
				                },
				                success: function(res) {
				                    console.log("解析地址成功");
				                    // 市
				                    that.city = res.result.ad_info.city.slice(0,2);
									uni.setStorageSync('city',that.city)
				                },
				                fail: function(res) {
									this.city = '定位失败'
				                   
				                },
				                complete: function(res) {
				                    console.log(res);
				                }
				            })
				        }
				    })
			},
			handleTab(index) {
				this.tab = index
			},
			
			getScheme() {
				getScheme().then(res => {
					console.log(res);
				})
			},
			
			// 跳转优惠详情
			goDetail(type) {
				if(type == 4){
					uni.navigateTo({
						url: `../../study/index`
					})
				}else{
					uni.navigateTo({
						url: `../../detail/discountsDetail/index?type=${type}`
					})
				}
			},
			goShopDetail(item) {
				uni.setStorageSync('shopInfo', JSON.stringify(item))
				uni.navigateTo({
					url: `../../detail/shopDetail/shopDetail`
				})
			},
			handleLogin() {
				this.show = true
			},
			// 更多套餐
			handleMore() {
				uni.navigateTo({
					// url:'../../login/login/login'
					url: '../../combo/combo/combo'
				})
			},
			
			// 获取用户详情
			getUserDetail() {
				getUserDetail().then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.content))
				})
			},
			loadMore() {
				// this.status = 'loading'
				// setTimeout(() => {
				// 	this.status = 'more'
				// 	this.list = this.list.concat([{
				// 		src: 'https://img1.baidu.com/it/u=384382004,2638328762&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	}, {
				// 		src: 'https://img1.baidu.com/it/u=1281595595,1208289696&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	}])
				// }, 1000)
			},

		}
	}
</script>

<style lang="scss">
	.home {
		// padding-bottom:120rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 100%);

			

		.card-title {
			display: flex;
			justify-content: center;

			.title {
				font-size: 32rpx;
				text-align: center;
				color: #fff;
				width: 210rpx;
				line-height: 64rpx;
				background: linear-gradient(360deg, #3074F8 0%, #568FFF 100%);
				border-radius: 0rpx 0rpx 24rpx 24rpx;
			}

		}

		.login-home {
			// background: linear-gradient(178deg, #FFFFFF 0%, #F9F9F9 100%);
			background: #F9F9F9;
			.discount-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 30rpx 0;
				background: #fff;
				border-radius: 0rpx 0rpx 32rpx 32rpx;
				.discount-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 40rpx;
					position: relative;
					.icon {
						width: 80rpx;
						height: 80rpx;
					}
					.title {
						font-size: 26rpx;
						margin-top: 10rpx;
					}
					.tag{
						position: absolute;
						top: -14rpx;
						left: 66rpx;
						// background: #FC1F1B;
						color: #fff;
						font-size: 18rpx;
						line-height: -14rpx;
						height: 34rpx;
						padding: 0 10rpx;
						border-radius: 17rpx;
						width: fit-content;
						background: url('../../static/tag.png') no-repeat;
						background-size: 100% 34rpx;
					}
					
				}
			}
			.recommend-box{
				margin: 0 20rpx;
				background: linear-gradient(180deg, #FE574C 0%, #FE2A5C 100%);
				border-radius: 16rpx;
				box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
				.top-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 20rpx;
					padding-top: 20rpx;
					.title{
						color: #fff;
						font-size: 26rpx;
					}
					.type-box{
						display: flex;
						align-items: center;
						padding: 0 16rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 20rpx;
						background: rgba(255, 255, 255, 0.18);
						.hot{
							width: 16.7rpx;
							height: 21.7rpx;
						}
						.type{
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 6rpx;
						}
					}
				}
				
				.recommend{
					display: flex;
					justify-content: space-between;
					
					.recommend-item{
						width: 355rpx;
						height: 245rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.image-box{
							position: relative;
							margin-top: 20rpx;
							width: 312rpx;
							.image{
								width: 312rpx;
								height: 200rpx;
								border-radius: 16rpx;
							}
							.btn-box{
								position: absolute;
								left: 10rpx;
								bottom: 30rpx;
								display: flex;
								align-items: center;
								.desc{
									font-size: 24rpx;
									font-weight: 400;
									color: #FFFFFF;
								}
								.btn{
									height: 36rpx;
									line-height: 36rpx;
									padding: 0 14rpx;
									background: $uni-color-primary;
									border-radius: 8rpx;
									color: #FFFFFF;
									font-size: 20rpx;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
			}
			
			
			.content{
				background: #fff;
				border-radius: 16rpx 16rpx 0 0;
			}

			.tab-group {
				display: flex;
				margin: 30rpx 0;
				height: 90rpx;

				.tab-item {
					padding: 0 20rpx;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;
					.tab-title.jiayou{
						color: #3074F8;
					}
					.tab-title{
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #707070;
					}
					.sub-title{
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 10rpx;
					}
				}

				.active {
					font-weight: bold;
					.tab-title{
						color: #0F0F0F;
					}
					.sub-title{
						color: #fff;
						// background: $uni-color-primary;
						background: linear-gradient(90deg, #FF4A39 0%, #FFA770 100%);
						width: 124rpx;
						line-height: 40rpx;
						border-radius: 20rpx;
					}
				}
			}

			.zs-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 30rpx;
				.left{
					.left-frist{
						padding: 15rpx;
						border-radius: 16rpx;
						width: 332rpx;
						height: 284rpx;
						box-sizing: border-box;
						background: linear-gradient(180deg, #FFDEDE 0%, #FFFFFF 100%);
						box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
						margin-bottom: 25rpx;
						.top-box{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.title{
								color: #0F0F0F;
								font-size: 26rpx;
							}
							.type-box{
								display: flex;
								align-items: center;
								padding: 0 16rpx;
								height: 40rpx;
								line-height: 40rpx;
								border-radius: 20rpx;
								background: linear-gradient(90deg, #FE574C 0%, #FE2A5C 100%);
								.hot{
									width: 16.7rpx;
									height: 21.7rpx;
								}
								.type{
									font-size: 20rpx;
									font-weight: 400;
									color: #FFFFFF;
									margin-left: 6rpx;
								}
							}
						}
						.image-box{
							position: relative;
							margin-top: 20rpx;
							.image{
								width: 302rpx;
								height: 182rpx;
								border-radius: 16rpx;
							}
							.btn-box{
								position: absolute;
								left: 0;
								bottom: 10rpx;
								display: flex;
								align-items: center;
								.desc{
									font-size: 24rpx;
									font-weight: 400;
									color: #FFFFFF;
									margin-left: 10rpx;
								}
								.btn{
									height: 36rpx;
									line-height: 36rpx;
									padding: 0 14rpx;
									background: $uni-color-primary;
									border-radius: 8rpx;
									color: #FFFFFF;
									font-size: 20rpx;
								}
							}
						}
					}
				}
				.right{
					.frist{
						border: 1px solid #FF612E;
						.info{
							background: #FF612E;
							color: #fff;
							.address{
								color: #fff;
							}
						}
					}
				}
				.store-item {
					width: 335rpx;
					margin-bottom: 25rpx;
					box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
					border-radius: 16rpx;
					background: #fff;

					.icon {
						width: 100%;
						height: 300rpx;
						border-radius: 16rpx 16rpx 0 0;
					}

					.info {
						padding: 20rpx;
						background: #fff;
						border-radius: 0 0 16rpx 16rpx;
						position: relative;
						.hot-icon{
							position: absolute;
							bottom: 20rpx;
							right: 25rpx;
							width: 44.6rpx;
							height: 48.6rpx;
						}
						.title {
							font-weight: bold;
							width: 100%;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						.tags{
							display: flex;
							align-items: center;
							.tag-item{
								line-height: 50rpx;
								border-radius: 8rpx;
								padding: 6rpx 0;
								font-size: 24rpx;
								margin-left: 10rpx;
								display: flex;
								.label{
									background: #FFF;
									color: #FE5B47;
									padding: 0 10rpx;
									border-radius: 8rpx 0 0 8rpx;
								}
								.value{
									color: #FFF;
									background: rgba(255, 255, 255, .2);
									padding: 0 14rpx;
									border-radius: 0 8rpx 8rpx 0;
								}
							}
						}

						.address {
							display: flex;
							align-items: center;
							margin-top: 15rpx;
							color: #999;
							.position{
								width: 25rpx;
								height: 29rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}


		.login-btn {
			position: fixed;
			bottom: 0%;
			left: 0;
			width: 100%;
			background: #fff;
			padding: 25rpx 0;

			.btn {
				width: 440rpx;
				line-height: 120rpx;
				background: rgb(222, 134, 143);
				border-radius: 60rpx;
				color: #fff;
				font-size: 16px;
			}
		}

		.fixed-btn {
			position: fixed;
			right: 0;
			top: 50%;
			width: 86rpx;
			height: 150rpx;
			line-height: 60rpx;
			padding: 35rpx 10rpx 0;
			text-align: center;
			border-radius: 45px;
			background: royalblue;
			white-space: pre-wrap;
			color: #fff;
		}

	}
</style>