discounts-minapp/detail/discountsDetail/index.vue

<template>
	<view class="discountsDetail">
		<!-- <image class="banner" :src="bgList[active]" mode=""></image> -->
		<zs-img width="100%" height="310rpx" :src="bgList[active]"></zs-img>
		<!-- 推荐两个内容 -->
		<view class="recommend">
			<view class="recommend-item">
				<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://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="btn">
							折
						</view>
						<view class="desc">
							满200享7折
						</view>
					</view>
				</view>
			</view>
			
			<view class="recommend-item color">
				<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://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="btn">
							折
						</view>
						<view class="desc">
							满200享7折
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- titleArr: 选择项数组 dropArr: 下拉项数组 二维数组 @finishDropClick: 下拉筛选完成事件-->
		<cc-dropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></cc-dropDownMenu>

		<!-- 内容 -->
			<zs-list  class="store-box" mt="0" @load="loadMore" :status="status">
			<view class="item" v-for="(item,index) in list" :key="index">
				<!-- <image :src="item.src" mode="" class="icon" @click="goDetail(item)"></image> -->
				<zs-img :src="item.src" width="200rpx" height="180rpx" radius="full" @click.native="goDetail(item)"></zs-img>
				<view class="info">
					<view class="title">
						{{item.title}}
					</view>
					<view class="address"  @click="handleAdress(item)">
						<u-icon name="tags" size="38"></u-icon>
						{{item.address}}·距你{{item.distance}}km
					</view>
					<view class="handle-box">
						<view class="tags">
							<view class="tag-item">
								<view class="label">
									折
								</view>	
								<view class="value">
									满200享8折
								</view>
							</view>
						</view>
						<view class="btn" @click="goDetail(item)">
							{{btnText}}
							<image class="addGas" v-if="active == 0" src="../../static/add_gas.png" mode=""></image>
							<image class="hand" v-else src="../../static/hand.png" mode=""></image>
						</view>
					</view>
					<view class="like" @click="handleLike(item)">
						<u-icon :name="item.isLike?'heart-fill':'heart'" color="red" size="48"></u-icon>
					</view>
				</view>
			</view>
			</zs-list>
		

		<!-- 地图 -->
		<map v-show="false" id="map"></map>
	</view>
</template>

<script>
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				longitude: '',
				latitude: '',
				destination: '',
				_mapContext: null,
				active:0,
				status:'more',
				list: [],
				btnText:'去使用',
				titleArr: ['全部', '价格最低', '距离最远'],
				dropArr: [
					// 距离
					[{
							text: '距离最远',
							value: ""
						},
						{
							text: '距离最近',
							value: "440103"
						}
					],
					// 类型
					[{
							text: '价格最低',
							value: "10000"
						},
						{
							text: '价格最高',
							value: "11000"
						}
					],

					// 类型
					[{
							text: '距离最远',
							value: "0-40"
						},
						{
							text: '距离最近',
							value: "40-60"
						}
					],
				],
				bgList:[
					'https://alipic.lanhuapp.com/XDSlicePNGMAX67a3bc8b468b1bfd77dcd4d7438a3d3e065f935a00f08e59645804daf159c284.png',
					'https://alipic.lanhuapp.com/XDSlicePNGMAX611bc009fa733cff73887ee29c1732ae75825ed9e0954b587c74a4c189a3cffb.png',
					'https://alipic.lanhuapp.com/XDSlicePNGMAX190c797263732d957a8b1678378cdfed7d1080d44f950646dd434fff84683bdd.png',
					'https://alipic.lanhuapp.com/XDSlicePNGMAX7f66243508490c104c814e8c41c49756536d856e92e0ac723a73194fa798da00.png',
					'',
					'https://alipic.lanhuapp.com/XDSlicePNGMAX6a26b42e540e71c7fe2ec5e364d436db43d35da7b91825f4bfb6d58f156446be.png',
					'',
					'https://alipic.lanhuapp.com/XDSlicePNGMAX069386da770b57a37eaa0262300a56f9916e5041e2f11664c963c85b0e3ea8e1.png',
					'https://alipic.lanhuapp.com/XDSlicePNGMAXf71b46c3c1373105f745d79b9414347390c0c2532f936e8bcca7909f9bfaa117.png',
					'https://alipic.lanhuapp.com/XDSlicePNGMAX659ebd674f97a9685dada70afed93e969c75dadd97236d24e373c70bd5b5adbf.png'
				],
				filterResultData: []
			}
		},
		watch: {
			active(val) {
				if (val == 0) {
					this.btnText = '去加油'
					this.list = [{
							id: 1,
							src:'https://img1.baidu.com/it/u=960909382,1465538057&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
							title: '贵西能源加油站(金清大道站)',
							isLike: true,
							price: 6.5,
							type: '95#',
							desc: '加200省2.2',
							distance: 2.94,
							latitude: 26.603531486213345,
							longitude: 106.56382083892822,
							address: '贵州省贵阳市观山湖区金清路',
						},
						{
							id: 2,
							src:'https://img0.baidu.com/it/u=2726460010,52071254&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
							title: '中国石化(贵阳云岩北京路加油站)',
							isLike: false,
							price: 6.25,
							type: '92#',
							desc: '加200省3.2',
							distance: 5.23,
							latitude: 26.595808,
							longitude: 106.707066,
							address: '贵州省贵阳市云岩区北京路85号'
						},
						{
							id: 2,
							src:'https://t9.baidu.com/it/u=900121157,1816887002&fm=193',
							title: '中国石化(贵阳云岩北京路加油站)',
							isLike: false,
							price: 6.25,
							type: '92#',
							desc: '加200省3.2',
							distance: 5.23,
							latitude: 26.595808,
							longitude: 106.707066,
							address: '贵州省贵阳市云岩区北京路85号'
						},
					]
				} else if (val == 1) {
					this.btnText = '去预定'
					this.list = [{
							id: 1,
							src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
							title: '贵州实际颐和大酒店',
							isLike: true,
							price: 6.5,
							desc: '预计省20元',
							distance: 2.94,
							latitude: 26.59955,
							longitude: 106.633163,
							address: '近阳明文化园'
						},
						{
							id: 2,
							src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
							title: '泊斯曼酒店',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.62396261928078,
							longitude: 106.61702513694763,
							address: '近摩根中心'
						},
						{
							id: 3,
							src:'https://file.gzl.cn/group1/M00/32/54/wKkBH1_7uBKAaWm1AAMJ4gwToRo237.jpg',
							title: '贵阳万丽酒店',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.62396261928078,
							longitude: 106.61702513694763,
							address: '近青岩古镇'
						},
						{
							id: 4,
							src:'https://dimg04.c-ctrip.com/images/0202w120008v2aba15BD3_R_600_400_R5_D.jpg',
							title: '贵阳万国艺术酒店',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.62396261928078,
							longitude: 106.61702513694763,
							address: '近贵阳站'
						},
						{
							id: 5,
							src:'https://ak-d.tripcdn.com/images/0223x1200084a4izh65B9_R_600_400_R5_D.jpg',
							title: '漫居酒店',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.62396261928078,
							longitude: 106.61702513694763,
							address: '花果园'
						}
					]
				} else if (val == 2) {
					this.btnText = '去订票'
					this.list = [{
							id: 1,
							src:'https://img0.baidu.com/it/u=74080926,2958835583&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
							title: '黄果树瀑布',
							isLike: true,
							price: 6.5,
							desc: '预计省20元',
							distance: 2.94,
							latitude: 26.651654,
							longitude: 106.626228,
							address: '贵州省黄果树瀑布'
						},
						{
							id: 2,
							src:'https://p5.itc.cn/images01/20200927/1a24090e09b0493f82b4429f0c6a7adc.jpeg',
							title: '西江千户苗寨',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.641261,
							longitude: 106.627265,
							address: '贵州省西江千户苗寨'
						},
						{
							id: 2,
							src:'https://img0.baidu.com/it/u=699183765,3081252315&fm=253&fmt=auto&app=138&f=JPEG?w=804&h=500',
							title: '荔波小七孔景区',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.641261,
							longitude: 106.627265,
							address: '贵州省荔波小七孔景区'
						},
						{
							id: 2,
							src:'https://p4.itc.cn/images01/20230216/3abdc64f577643d290d10a120f3e1940.jpeg',
							title: '梵净山5A',
							isLike: false,
							price: 6.25,
							desc: '预计省10元',
							distance: 5.23,
							latitude: 26.641261,
							longitude: 106.627265,
							address: '贵州省梵净山'
						}
					]
				} else if (val == 3) {
					this.btnText = '去用券'
					this.list = [{
							id: 1,
							title: '刘记原味烧烤',
							src:'https://img2.baidu.com/it/u=2568144405,1916268494&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
							isLike: true,
							price: 6.5,
							desc: '购物9折起',
							distance: 2.94,
							latitude: 26.577315,
							longitude: 106.696473,
							address: '贵州省贵阳市南明区中山南路58号中山公馆2期'
						},
						{
							id: 2,
							title: '老地方翘脚牛肉王府',
							src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F961eeba1-3cb2-96fd-b030-a1ea59b60599%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695544582&t=04e1a1b16f4f1bf35da7f1496ec89a6b',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						{
							id: 2,
							title: '老贵阳牛肉粉（友怡路店）',
							src:'https://alipic.lanhuapp.com/XDSlicePNGMAXa74cfc58f9a54990e0a1e804e763563f4521e3ec1dc948005893ae57a451e506.png',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
					]
				}
				else if (val == 4) {
					this.btnText = '去用券'
					this.list = [{
							id: 1,
							title: '滴滴代驾',
							src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F961eeba1-3cb2-96fd-b030-a1ea59b60599%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695544582&t=04e1a1b16f4f1bf35da7f1496ec89a6b',
							isLike: true,
							price: 6.5,
							desc: '购物9折起',
							distance: 2.94,
							latitude: 26.577315,
							longitude: 106.696473,
							address: '近阳明文化园'
						},
						{
							id: 2,
							title: 'uber代驾',
							src:'https://img2.baidu.com/it/u=2568144405,1916268494&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '近青岩古镇'
						},
					]
				}
				else if (val == 5) {
					this.btnText = '去用券'
					this.list = [{
							id: 1,
							src:'https://alipic.lanhuapp.com/XDSlicePNGMAX74b53f67cd976c940403da718b8ae4dea572eb6ad87b4e75d9a08a4e66a3c24b.png',
							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://alipic.lanhuapp.com/XDSlicePNGMAX4c9d5896c29bd729a0bea17305b0fd52fec8450d7126e2722eebcae4652fe06c.png',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						
					]
				}
				else if (val == 6) {
					this.list = [{
							id: 1,
							title: '王师傅代驾',
							src:'https://img1.baidu.com/it/u=2215223028,3689421296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
							isLike: true,
							price: 6.5,
							desc: '购物9折起',
							distance: 2.94,
							latitude: 26.577315,
							longitude: 106.696473,
							address: '近阳明文化园'
						},
						{
							id: 2,
							title: '李师傅代驾',
							src:'https://img2.baidu.com/it/u=113455498,1780988372&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '近青岩古镇'
						},
						{
							id: 2,
							title: '王师傅代驾',
							src:'https://img1.baidu.com/it/u=981419242,2203103347&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '近摩根中心'
						},
						
					]
				}
				else if (val == 7) {
					this.list = [{
							id: 1,
							title: 'F+轻食健身赋能空间',
							src:'https://image.baidu.com/search/detail?tn=baiduimagedetail&word=%E5%81%A5%E8%BA%AB%E6%88%BF&album_tab=%E8%AE%BE%E8%AE%A1%E7%B4%A0%E6%9D%90&album_id=337&ie=utf-8&fr=albumsdetail&cs=168157791,2473115493&pi=132681&pn=19&ic=0&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D168157791%2C2473115493%26fm%3D193%26f%3DGIF&dyTabStr=MTEsMCw2LDEsMyw0LDUsMiw4LDcsOQ%3D%3D',
							isLike: true,
							price: 6.5,
							desc: '购物9折起',
							distance: 2.94,
							latitude: 26.577315,
							longitude: 106.696473,
							address: '近阳明文化园'
						},
						{
							id: 2,
							title: '星河荟健身轻食（逸天成店）',
							src:'https://image.baidu.com/search/detail?tn=baiduimagedetail&word=%E5%81%A5%E8%BA%AB%E6%88%BF&album_tab=%E8%AE%BE%E8%AE%A1%E7%B4%A0%E6%9D%90&album_id=337&ie=utf-8&fr=albumsdetail&cs=759278248,2805900043&pi=132667&pn=5&ic=0&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D759278248%2C2805900043%26fm%3D193%26f%3DGIF&dyTabStr=MTEsMCw2LDEsMyw0LDUsMiw4LDcsOQ%3D%3D',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '近青岩古镇'
						},
						{
							id: 2,
							title: '贵阳米佳健身',
							src:'https://t7.baidu.com/it/u=2278524516,128260033&fm=193&f=GIF',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '近摩根中心'
						},
						{
							id: 2,
							title: 'AU 健身',
							src:'https://t7.baidu.com/it/u=3103498870,4249354294&fm=193&f=GIF',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						}
					]
				}else if (val == 8) {
					this.list = [{
							id: 1,
							title: '叮当快药',
							src:'https://img0.baidu.com/it/u=11997160,2930303799&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
							isLike: true,
							price: 6.5,
							desc: '购物9折起',
							distance: 2.94,
							latitude: 26.577315,
							longitude: 106.696473,
							address: '贵州省贵阳市南明区中山南路58号中山公馆2期'
						},
						{
							id: 2,
							title: '泉源堂智慧药房',
							src:'https://img1.baidu.com/it/u=2524636074,1628913937&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						{
							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号'
						},
						
					]
				}else if (val == 9) {
					this.list = [{
							id: 1,
							title: '王阿姨家政',
							src:'https://alipic.lanhuapp.com/XDSlicePNGMAX7b82f25647df93025929861cf2498f3141c2207e24bbd8fb9049b4a689f90409.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/XDSlicePNGMAX4b021213a542e679edac9bbf41b2b23f0b05a372cc62708a15471c25509b4c99.png',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
						{
							id: 2,
							title: '便民家政',
							src:'https://alipic.lanhuapp.com/XDSlicePNGMAXdc6d1a49e7805cb3ab8049468af442076e95b95edbad2dfd7835739815d6d44b.png',
							isLike: false,
							price: 6.25,
							desc: '购物9折起',
							distance: 5.23,
							latitude: 26.652284,
							longitude: 106.626597,
							address: '贵州省贵阳市观山湖区诚信北路8号'
						},
					]
				}
			}
		},
		methods: {
			finishClick(resultData) {
				this.filterResultData = resultData;
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '筛选数据 = ' + JSON.stringify(resultData)
				// })
			},
			handleLike(item) {
				item.isLike = !item.isLike
			},
			// 地图中打开商家
			handleAdress(item) {
				this.longitude = item.longitude
				this.latitude = item.latitude
				this.destination = item.address
				this._mapContext.openMapApp({
					longitude: item.longitude,
					latitude: item.latitude,
					destination: item.address,
					complete(r) {
						console.log(r);
					}
				})
			},
			goDetail(item){
				uni.setStorageSync('shopInfo',JSON.stringify(item))
				uni.navigateTo({
					url:'../shopDetail/shopDetail'
				})
			},
			loadMore(){
				this.status = 'loading'
				setTimeout(()=>{
					this.status = 'more'
					this.list = this.list.concat([
						{
								id: 2,
								src:'https://img1.baidu.com/it/u=668605153,2232949273&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
								title: '星巴克(贵阳观山湖玖福城门店)',
								isLike: false,
								price: 6.25,
								desc: '预计省10元',
								distance: 5.23,
								latitude: 26.641261,
								longitude: 106.627265,
								address: '贵州省贵阳市观山湖区碧海南路贵阳国贸玖福城生活购物中心F1'
							},
							{
									id: 2,
									src:'https://img1.baidu.com/it/u=668605153,2232949273&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
									title: '星巴克(贵阳观山湖玖福城门店)',
									isLike: false,
									price: 6.25,
									desc: '预计省10元',
									distance: 5.23,
									latitude: 26.641261,
									longitude: 106.627265,
									address: '贵州省贵阳市观山湖区碧海南路贵阳国贸玖福城生活购物中心F1'
								},
								{
										id: 2,
										src:'https://img1.baidu.com/it/u=668605153,2232949273&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
										title: '星巴克(贵阳观山湖玖福城门店)',
										isLike: false,
										price: 6.25,
										desc: '预计省10元',
										distance: 5.23,
										latitude: 26.641261,
										longitude: 106.627265,
										address: '贵州省贵阳市观山湖区碧海南路贵阳国贸玖福城生活购物中心F1'
									},
									{
											id: 2,
											src:'https://img1.baidu.com/it/u=668605153,2232949273&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
											title: '星巴克(贵阳观山湖玖福城门店)',
											isLike: false,
											price: 6.25,
											desc: '预计省10元',
											distance: 5.23,
											latitude: 26.641261,
											longitude: 106.627265,
											address: '贵州省贵阳市观山湖区碧海南路贵阳国贸玖福城生活购物中心F1'
										}
					])
					
				},1000)
			},
		},
		onLoad(option) {
			this.active = option.type

		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);

		}
	}
</script>

<style lang="scss">

	.bar-item-text {
		max-width: 250rpx !important;
	}

	.screen-bar::after {
		display: none;
	}
	.discountsDetail  cc-drop-down-menu .screen-bar{
		// position: fixed;
		top: 0%;
		left: 0;
		width: 100%;
	}
	.discountsDetail {
		background: #f9f9f9;
		.banner{
			width: 100%;
			height: 310rpx;
			position: relative;
			z-index: 99;
		}
		.recommend{
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 20rpx;
			.recommend-item.color{
				background: linear-gradient(180deg, #FFD2B5 0%, #FFFFFF 100%);
				.type-box{
					background: linear-gradient(90deg, #FF4A39 0%, #FFA770 100%)!important;
				}
			}
			.recommend-item{
				padding: 15rpx;
				border-radius: 16rpx;
				width: 332rpx;
				height: 284rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, #FFDEDE 0%, #FFFFFF 100%);
				box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
				.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;
						}
					}
				}
			}
		}

		.zs-list {
			// padding-top: 20rpx;
			.item {
				display: flex;
				padding: 20rpx 30rpx;
				background: #fff;
				border-radius: 16rpx;
				margin: 20rpx 30rpx 0;
				.icon{
					width: 200rpx;
					height: 180rpx;
					border-radius: 8px;
				}	
				.info{
					flex: 1;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;
					.title{
						font-size: 28rpx;
						font-weight: bold;
						width: 340rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.address{
						color: #bebebe;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						padding: 15rpx 0;
						.u-icon{
							align-self: flex-start;
						}
					}
					.handle-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.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: #FE5B47;
									color: #fff;
									padding: 0 10rpx;
									border-radius: 8rpx 0 0 8rpx;
								}
								.value{
									color: #FE5B47;
									background: rgba(254,91,71,0.1);
									padding: 0 14rpx;
									border-radius: 0 8rpx 8rpx 0;
								}
							}
						}
						.btn{
							font-size: 22rpx;
							font-weight: 400;
							color: #9E6A34;
							width: 132rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
							background: linear-gradient(137deg, #F9E093 0%, #F7D269 100%);
							border-radius: 24rpx;
							position: relative;
							.hand{
								width: 36rpx;
								height: 32rpx;
								position: absolute;
								top: 50%;
								right: 6rpx;
								animation: click .3s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
							}
							.addGas{
								width: 42rpx;
								height: 26rpx;
								position: absolute;
								top: -10rpx;
								left: 6rpx;
								animation: click .6s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
							}
							@keyframes click {
								0%{
									transform: scale(1);
								}
								50%{
									transform: scale(1.3);
								}
								100%{
									transform: scale(1);
								}
							}
						}
					}
					.like{
						position: absolute;
						top: 0%;
						right: 10rpx;
					}
				}
			}
		}

		#map {
			position: relative;
			top: -100000px;
			left: -1000000px;
		}
	}
</style>