newXLSC/pages/index/index.vue

<template>
	<view class="container">
		<view class="carousel-section">
			<!-- 背景色区域 -->
			<!-- <view class="bg"></view> -->
			<!-- 标题栏和状态栏占位符 -->
			<!-- <view class="titleNview-placing"></view> -->
			<!-- 搜素栏 -->
			<view class="search flex">
				<view class="input-box flex" @click.stop="clickSearch">
					<view class=" input-content flex">
						<view class="iconfont iconsearch"></view>
						<view class="input"><input type="text" disabled value="输入关键字搜索" /></view>
					</view>
				</view>
			</view>
			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
				:indicator-dots="true" indicator-active-color="#FFFFFF">
				<!-- <swiper class="carousel" autoplay="true" duration="400" interval="5000"> -->
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="shop-list flex" style="padding-top: 40rpx;">
			<view class="shop-item flex" v-for="(item,index) in shopList">
				<image :src="item.pic" mode="" class="shop-img"></image>
				<view class="shop-name">
					{{item.cate_name}}
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="" style="background: #fff;margin-top: 20rpx;padding-bottom: 20rpx;">
			<view class="title-wrapper flex">
				<image src="../../static/icon/shop-logo.png" mode=""></image>
				<view class="">礼包商品</view>
				<view class="title-b">超值体验</view>
			</view>
			<view class="gift-info">
				<view class="" style="padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">
					最强商家联盟
				</view>
				<view class="">
					买到就是赚到
				</view>
			</view>
			<view class="gift-good-list p-r">
				<view class="gift-list p-a flex f-j-s">
					<view class="gift-item flex f-d-c f-j-c" v-for="item in goodList"
						@click="navto('/pages/product/product?id=' + item.id)">
						<image :src="item.image" mode=""></image>
						<view class="gift-name clamp">
							{{item.store_name}}
						</view>
						<view class="gift-price">
							¥{{item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 门店列表 -->
		<view class="" style="height: 20rpx;"></view>
		<view class="djq-wrap flex f-ai-s" v-for="storeitem in storeList">
			<image :src="storeitem.image" mode="" class="djq-img"></image>
			<view class="djq-right pl20">
				<view class="djq-tit flex f-j-sb f-ai-s">
					<view class="djq-name clamp">
						{{storeitem.name}}
					</view>
					<view class="djq-dis">
						<image src="../../static/icon/dw.png" mode=""></image>
						距离{{(storeitem.range*1 > 1000 )?( storeitem.range + 'KM'):(storeitem.range*1 + 'm')}}
					</view>
				</view>
				<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
					<view class="djq-dz clamp2">
						{{storeitem.detailed_address}}
					</view>
					<view class="djq-hd flex f-j-sb">
						<view class="buy-info">
							1425人已购买
						</view>
						<view class="hd-btn">
							<image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;"
								@click="makeCall(storeitem.phone)"></image>
							<image src="../../static/icon/dh.png" mode="" @click="dh(storeitem)"></image>
						</view>
					</view>
				</view>
				<!-- <view class="" style="padding: 10rpx 0 0 0;">
					<view class="left-btm flex f-j-s" v-for="itemt in 3">
						<view class="j-logo">
							券
						</view>
						<view class="j-price">
							<text>￥</text>25
						</view>
						<view class="j-zk">
							5.8折
						</view>
						<view class="j-name">
							50元代金券
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import weixinObj from "@/plugin/jweixin-module/index.js";
	import {
		store_cate,
		getStoreList
	} from '@/api/shop.js'
	import {
		lookSubpoints,
		lookOneself
	} from '../../api/user.js';
	import seckill from '../../components/seckill/seckill.vue';
	import {
		loadIndexs,
		getVip
	} from '@/api/index.js';
	import {
		getUserInfo,
		spread
	} from '@/api/user.js';
	import {
		setCoupons
	} from '@/api/functionalUnit.js';
	import {
		getBargainList,
		getProducts
	} from '@/api/product.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		tabbar
	} from '@/utils/tabbar.js';
	// #ifdef H5
	import {
		weixindata,
		shareLoad
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		components: {
			seckill
		},
		data() {
			return {
				storeList: [],
				tabbar: tabbar,
				current: 0,
				shareShow: false, //分享海报
				pageProportion: 0, //保存页面基于750宽度的比例
				swiperHeight: 0,
				checkid: 0,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [], //轮播列表
				bastList: [], //会员礼包
				page: 1,
				limit: 5,
				firstList: [],
				goodList: [],
				shopList: []
			};
		},
		computed: {
			...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude']),
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad: function(option) {
			this.getaddress();
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
			// #ifdef H5
			this.IndexShare();
			//#endif
		},
		onShow: function() {
			this.getGoodList()
			this.loadData();
			this.getBargainList();
			this.getStoreCate()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		// #ifndef MP
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			//跳转到搜索页面
			this.clickSearch();
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/user/notice'
				});
			}
		},
		// #endif
		methods: {
			...mapMutations(['setLat', 'setLon']),
			// 计算距离
			space(lat1, lng1, lat2, lng2) {
				console.log(lat1, lng1, lat2, lng2);
				var radLat1 = (lat1 * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
					.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				// return s * 1000; // 单位米
				return s //单位km
			},
			// 拨打电话
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 导航
			dh() {

			},
			// 获取商店列表
			getStoreList() {
				let obj = this
				//getStoreList（ cate_id=1
				getStoreList({
					latitude: obj.latitude,
					longitude: obj.longitude
				}).then(res => {
					console.log(res)
					obj.storeList = res.data.list
					// obj.storeList = res.data.list.map(item => {
					// 	item.space = obj.space(obj.latitude, obj.longitude, item.latitude, item.longitude)
					// 	return item
					// })
				})
			},
			// 获取店铺分类
			getStoreCate() {
				store_cate().then(res => {
					console.log(res)
					this.shopList = res.data
				})
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						console.log(e, 'dingwei')
						c
					}
				})

			},
			getGoodList() {
				let obj = this
				getProducts({
					page: 1,
					limit: 50,
					cid: 1
				}).then(res => {
					console.log(res, 'libao')
					obj.goodList = res.data
				})
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			// #ifdef H5
			IndexShare() {
				let obj = this;
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '#/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				console.log(obj.Path);
				// 保存邀请人
				path += 'spread=' + this.userInfo.uid;
				let data = {
					link: this.baseURL + '/index/' + path,
					title: this.userInfo.nickname + '邀请您进入想亮',
					desc: '欢迎加入想亮',
					imgUrl: this.baseURL + '/index/static/img/logo.jpg'
				};
				console.log(data, '分享数据');
				shareLoad(data);
			},
			// #endif
			getaddress() {
				console.log('dizhi+++++++++++');
				let obj = this;
				// #ifdef H5
				weixindata().then(wxOjb => {
					console.log(wxOjb, '获取微信');
					wxOjb.getLocation({
						type: 'gcj02',
						success: res => {
							console.log(res, 123456);
							obj.setLat(res.latitude);
							obj.setLon(res.longitude);
							obj.getStoreList()
						},
						fail: err => {
							console.log(err, 'shi+++++++++++++++');
							openMap().then(e => {
								this.getaddress();
							});
						}
					});
				});
				// #endif

			},
			navTo(url) {
				if (url == '') {
					this.$api.msg('暂未开通，敬请期待');
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			getBargainList() {
				let that = this;

				getBargainList({
						page: that.page,
						limit: that.limit
					})
					.then(function(res) {
						// that.$set(that, 'bargainlist', res.data.slice(0, 2));
					})
					.catch(res => {
						console.log(res, 'getBargainList');
					});
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						console.log(goods, '商品信息');
						this.carouselList = data.banner;
						this.swiperLength = this.carouselList.length;
						this.bastList = data.giftInfo; //会员礼包
						data.info.firstList.forEach(e => {
							e.isVip = e.store_type ? "3" : "0"
						})
						this.firstList = data.info.firstList //首页商品
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				console.log(item.wap_url.indexOf('http'), 'banner');
				if (item.wap_url.indexOf('http') >= 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f6f9;
	}

	.carousel-section {
		position: relative;
		// padding-top: 10px;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 378rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.titleNview-placing {
			height: var(--status-bar-height);
			box-sizing: content-box;
		}

		.search {
			justify-content: flex-start;
			padding: 10rpx 32rpx 20rpx;
			align-items: center;
			background-color: #fff;

			.address {
				width: 32rpx;
				height: 38rpx;
			}

			.shop-name {
				height: 38rpx;
				position: relative;
				top: -4rpx;
				z-index: 100;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding-left: 10rpx;
			}

			.shop-jt {
				margin-left: 8rpx;
				width: 16rpx;
				height: 10rpx;
			}

			.input-box {
				margin-left: 10rpx;
				position: relative;
				z-index: 99;
				width: 710rpx;
				height: 60rpx;
				background: #EEEEEE;
				border-radius: 30rpx;

				.input-content {
					position: relative;
					z-index: 11;
					border-radius: 99rpx;
					flex-grow: 1;
					padding: 5rpx 30rpx;
					background: #EEEEEE;

					.iconsearch {
						font-size: 50rpx;
						color: #CBCBCB;
					}

					.input {
						margin-left: 19rpx;
						flex-grow: 1;
						color: #CBCBCB;

						input {
							font-size: 28rpx;

							color: #CBCBCB;
						}
					}
				}

				.input-button {
					padding-left: 20rpx;
					font-size: $font-base;
					height: 100%;
				}
			}
		}
	}

	.carousel {
		position: relative;
		z-index: 3;
		width: 100%;
		height: 360rpx;
		background-color: #fff;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28rpx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: $border-radius-sm;
		}
	}

	.navbar {
		position: relative;
		z-index: 2;
		padding: 0 50rpx;
		margin-top: -200rpx;
		width: 750rpx;
		height: 420rpx;
		background: #ffffff;
		border-radius: 40rpx;

		.navbar-box {
			padding-top: 250rpx;

			.navbar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;

				.nitem-image {
					width: 90rpx;
					height: 90rpx;
				}

				.nitem-font {
					margin-top: 22rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}


	}

	.jx {
		background: #fff;
		width: 750rpx;
	}

	.jx-box {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;

		.jx-box-title {
			margin: 50rpx 0;
			width: 610rpx;
			height: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.jx-box-img {
			width: 750rpx;
			height: 220rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.cai {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.jx-box-content {
		display: flex;

		.content-left {
			margin: 20rpx 15rpx;
			width: 236rpx;
			height: 236rpx;
			background: #E2E2E2;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


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

			.shop-name {
				width: 382rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.shop-content {
				width: 455rpx;
				display: flex;
				justify-content: space-between;

				.shop-content-left {
					display: flex;
					flex-direction: column;



					.price-box {
						display: flex;
						align-items: center;

						.yuan-price {
							font-size: 26rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: #999999;
						}

						image {
							margin: 0 10rpx;
							width: 16rpx;
							height: 18rpx;
						}

						.j-price {
							font-size: 24rpx;
							font-weight: bold;
							color: #B59467;
						}
					}

					.price-x {
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4C4C;
					}
				}

				.shop-content-right {
					margin-top: 20rpx;
					align-items: center;
					text-align: center;
					width: 137rpx;
					height: 52rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #F8DABA;
					background: #303030;
					border-radius: 26rpx;
					line-height: 52rpx;
				}
			}
		}
	}

	.product-box {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 26rpx 30rpx 20rpx;

		.product-title {
			display: flex;
			align-items: center;
			justify-content: center;


			.pt-image {
				width: 36rpx;
				height: 36rpx;
			}

			.bb {
				width: 120rpx;
				height: 1rpx;
				background: #989898;
			}

			.pt-title {
				margin: 0 28rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #363636;
			}

			.pt-tip {
				margin-left: 16rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #95a0b1;
			}
		}

		.hotgoods {
			margin-top: 38rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 30rpx;

			.hotgoods-item {
				width: 44%;
				background: #FFFFFF;
				margin: 20rpx;
				box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
				border-radius: 10px;

				.image-wrapper {
					width: 100%;
					height: 330rpx;
					border-radius: 3px;
					overflow: hidden;
					position: relative;

					.image-bg {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						opacity: 1;
						border-radius: 12rpx 12rpx 0 0;
						z-index: 2;
					}

					.image {
						width: 100%;
						height: 100%;
						opacity: 1;
						border-radius: 12rpx 12rpx 0 0;
					}
				}

				.title {
					margin-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.hotgoods-box {
					height: 100rpx;
				}

				.titlee {
					margin-left: 15rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.hot-price {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 14rpx 0 30rpx;

					.hotPrice-box {
						width: 70rpx;
						height: 28rpx;
						background: linear-gradient(90deg, #c79a4c, #f9df7f);
						border-radius: 5rpx;
						text-align: center;
						line-height: 28rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
					}

					.price {
						margin-left: 10rpx;
						font-size: 36rpx;
						color: #ff0000;
						font-weight: 500;
					}

					.yuanPrice {
						margin-left: 10rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #999999;
					}

					.cart-icon {
						image {
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
			}
		}
	}

	.shop {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 0 12rpx;

		.shop-title {
			padding: 30rpx 0 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e3e6e7;

			.shop-item {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;

				.sitem-font {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.jt-down {
					width: 10rpx;
					height: 8rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.shop-main {
		padding: 32rpx 18rpx 0 12rpx;
		align-items: flex-start;
		justify-content: flex-start;

		.main-left {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}

		.main-right {
			width: 500rpx;
			justify-content: space-between;
			align-items: flex-start;
			margin-left: 20rpx;
			padding: 13rpx 0 35rpx;
			border-bottom: 1px solid #eaeced;

			.shopm-info {
				max-width: 60%;
				line-height: 1;

				.shopm-title {
					display: flex;
					justify-content: flex-start;

					.shopmt-font {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.shopmt-good {
						margin-left: 6rpx;
						width: 30rpx;
						height: 30rpx;
						border: 1px solid #ff4c4c;
						border-radius: 5rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff4c4c;
						text-align: center;
						line-height: 30rpx;
					}
				}

				.address {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.shopmt-tip {
					position: relative;
					display: inline-block;
					flex-grow: 0;
					margin-top: 52rpx;
					padding: 8rpx;
					background: #fcf3f0;
					border-radius: 16rpx 16rpx 16rpx 0px;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ff440d;
				}
			}

			.right {
				height: 100%;
				margin-top: 5rpx;
				display: flex;
				flex-direction: column;

				.mright-top {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.mrt-image {
						width: 20rpx;
						height: 28rpx;
					}

					.mrt-font {
						margin-left: 8rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}

				.mright-bottom {
					margin-top: 80rpx;
					display: flex;
					justify-content: flex-end;

					.mrb-item {
						width: 46rpx;
						height: 46rpx;
						margin-left: 14rpx;
					}
				}
			}
		}
	}

	.good-list {
		width: 750rpx;
		background: linear-gradient(0deg, #FFFFFF, #F8F8F8);
		padding: 0 30rpx 30rpx;

		.good {
			width: 690rpx;
			height: 276rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;
			margin: auto;
			padding: 20rpx 15rpx;
			margin-bottom: 20rpx;

			&:last-of-type {
				margin-bottom: 0rpx;
			}

			.good-img {
				flex-shrink: 0;
				width: 236rpx;
				height: 236rpx;
				border-radius: 10rpx;
				margin-right: 22rpx;

				image {
					width: 236rpx;
					height: 236rpx;
					border-radius: 10rpx;
				}
			}

			.good-info {
				flex-grow: 1;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.good-name {
					font-size: 32rpx;
					font-weight: bold;
					padding-top: 10rpx;
					color: #333333;
				}

				.good-price {
					width: 100%;

					image {
						width: 14rpx;
						margin: 0 6rpx 0 10rpx;
					}

					.old-price {
						.old-left {
							font-size: 26rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: #999999;
						}

						.old-right {
							font-size: 24rpx;
							font-weight: bold;
							color: #B59467;
						}
					}

					.new-price {
						width: 100%;
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4C4C;
						justify-content: space-between;

						.good-tip {
							display: inline-block;
							padding: 0 20rpx 0 17rpx;
							min-width: 160rpx;
							text-align: center;
							line-height: 40rpx;
							background: #303030;
							font-size: 24rpx;
							font-weight: 500;
							color: #F8DABA;
							border-radius: 10rpx;
							position: relative;

							&::before {
								content: '';
								display: inline-block;
								height: 17rpx;
								width: 17rpx;
								background-color: #fff;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								left: -9rpx;
								margin: auto;
							}

							&::after {
								content: '';
								display: inline-block;
								height: 17rpx;
								width: 17rpx;
								background-color: #fff;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								right: -9rpx;
								margin: auto;
							}
						}
					}
				}
			}
		}

	}

	.title-wrapper {
		padding-left: 20rpx;
		justify-content: flex-start;
		align-items: center;
		height: 86rpx;
		line-height: 86rpx;
		width: 690rpx;
		margin: auto;

		image {
			width: 36rpx;
			height: 36rpx;
			background: linear-gradient(43deg, #ffc063, #ffa163);
			border-radius: 50%;
		}

		view {
			padding-left: 10rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #242424;
		}

		.title-b {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8b8b8b;
		}
	}

	.shop-list {
		padding-top: 20rpx;
		flex-wrap: wrap;
		background-color: #fff;

		.shop-item {
			margin-bottom: 20rpx;
			flex-direction: column;
			width: 20%;
			height: 100rpx;

			image {
				width: 60rpx;
				height: 58rpx;
			}
		}
	}

	.gift-info {
		width: 690rpx;
		height: 155rpx;
		background: linear-gradient(43deg, #FFB242, #FF944D);
		border-radius: 12rpx 12rpx 0px 0px;
		margin: auto;
		color: #fff;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;

		view {
			padding-left: 28rpx;
		}
	}

	.gift-good-list {
		width: 690rpx;
		height: 243rpx;
		background: #f4f4f4;
		border-radius: 12rpx;
		margin: auto;

		.gift-list {
			width: 670rpx;
			height: 286rpx;

			background: #fff;
			border-radius: 12px;
			// margin: -54rpx auto 0;
			top: -54rpx;
			left: 0;
			right: 0;
			margin: auto;

			.gift-item {
				background-color: #fff;
				width: 223rpx;
				height: 100%;
				border-right: 1rpx solid #D6D7DC;

				&:first-of-type {
					border-radius: 12rpx 0 0 12rpx;
				}

				&:last-of-type {
					margin-right: 0;
				}

				image {
					width: 160rpx;
					height: 160rpx;
				}

				.gift-name {
					font-size: 22rpx;
					font-weight: bold;
					color: #3F3F3F;
					line-height: 34px;
				}

				.gift-price {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF4C4C;
				}
			}
		}
	}

	.djq-wrap {
		width: 701rpx;
		// height: 255rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 23rpx 22rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.djq-img {
			flex-shrink: 0;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.djq-right {
			flex-grow: 1;

			.djq-tit {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				line-height: 52rpx;

				.djq-name {
					max-width: 300rpx;
				}

				.djq-dis {
					flex-shrink: 0;

					image {
						width: 20rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}

					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.djq-dz {
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.djq-hd {
				width: 100%;
				// border-bottom: 1rpx solid #EAECED;

				.buy-info {
					display: inline-block;
					height: 32rpx;
					border-radius: 16rpx 16rpx 16rpx 0px;
					line-height: 32rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #FF440D;
					padding: 0 15rpx;
					background-color: #fcf3f0;
				}

				.hd-btn {
					image {
						width: 46rpx;
						height: 46rpx;
					}
				}
			}
		}
	}
</style>