supermyc/pages/index/index.vue

<template>
	<view class="container">
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 背景色区域 -->
			<view class="bg">
				<image src="../../static/img/index.png" mode=""></image>
			</view>
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜素栏 -->
			<view class="search flex">
				<!-- <image src="../../static/icon/address.png" class="address"></image>
				<view class="shop-name clamp" @click.stop="canChange == 1 ? nav('/pages/shoping/list') : ''">{{ storeInfo.name }}</view> -->
				<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>
					<!-- <image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image> -->
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="navTo('/pages/product/classify?type=5')">
				<image class="Uimg" src="../../static/icon/in1.png"></image>
				<text>套餐商品</text>
			</view>
			<view class="cate-item"
				@click="navTo(canChange == 1 ? '/pages/shoping/list?type=5' : '/pages/shoping/list')">
				<image src="../../static/icon/in2.png"></image>
				<text>附近门店</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/shoping/list?type=7')">
				<image src="../../static/icon/in3.png"></image>
				<text>百业联盟</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/prefecture/integral')">
				<image src="../../static/icon/in4.png"></image>
				<text>积分商城</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/prefecture/voucher')">
				<image src="../../static/icon/in5.png"></image>
				<text>消费券商城</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/shoping/shopService','2')">
				<image src="../../static/icon/in6.png"></image>
				<text>养发馆</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/product/supermarket')">
				<image src="../../static/icon/in7.png"></image>
				<text>超市</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/product/classify?type=7')">
				<image src="../../static/icon/in8.png"></image>
				<text>百业商品</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/sign/prize')">
				<image src="../../static/icon/in9.png"></image>
				<text>签到</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/received/index?state=0')">
				<image src="../../static/icon/in10.png"></image>
				<text>收付款</text>
			</view>
		</view>
		<view class="cate-two flex">
			<view class="catet-item" @click="navTo('/pages/sign/index','2')">
				<image class="catet-icon" src="../../static/icon/in11.png" mode="heightFix"></image>
				<view class="catet-font">
					民间偏方
				</view>
			</view>
			<view class="catet-item" @click="navTo('/pages/sign/index','2')">
				<image class="catet-icon" src="../../static/icon/in12.png" mode="heightFix"></image>
				<view class="catet-font">
					成人用品
				</view>
			</view>
			<view class="catet-item" @click="navTo('/pages/shareQrCode/index')">
				<image class="catet-icon" src="../../static/icon/in13.png" mode="heightFix"></image>
				<view class="catet-font">
					推广二维码
				</view>
			</view>
		</view>

		<view class="seckill-box flex">
			<view class="seckill-left" @click="navTo('/pages/seckill/seckill')">
				<view class="seckill-title">
					限时秒杀
				</view>
				<view class="seckill-time">
					<uni-countdown color="#ffffff" background-color="#ff8712" borderColor="rgba(0, 0, 0, 0.3)"
						splitorColor="#ff8712" :show-day="false" :hour="indexList[0].stopTimeH"
						:minute="indexList[0].stopTimeM" :second="indexList[0].stopTimeS"></uni-countdown>
				</view>
				<view class="seckill-tip">
					抢购中
				</view>
				<view class="seckill-btn">
					<image class="seckillbtn-icon" src="../../static/icon/sd.png" mode=""></image>
					<view class="seckillbtn-font">
						立即抢购
					</view>
					<image class="seckill-bk" src="../../static/icon/bjt.png" mode=""></image>
				</view>
			</view>
			<view class="xian">
			</view>
			<view class="seckill-main flex">
				<view class="seckill-item" v-for="(item,index) in indexList[0].dataList" @click="navProduct(item)">
					<image class="seckill-icon" :src="item.image" mode=""></image>
					<view class="seckill-font clamp">{{item.title}}</view>
					<view class="price-box">
						<view class="price">￥{{item.price*1}}</view>
						<!-- <view class="sale">已售20</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 精选好货 -->
		<view class="bastgood-box">
			<view class="bast-bg">
				<view class="base"></view>
				<view class="bast-name">爆款推荐</view>
				<view class="base"></view>
			</view>
			<view class="guess">
				<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<image :src="item.image"></image>
					<view class="guess-box">
						<view class="title clamp">{{ item.store_name }}</view>
						<view class="guessbtm-box flex">
							<view class="price">￥{{ item.price }} <text class="yuan">￥{{ item.ot_price }}</text> </view>
							<image @click.stop="toggleSpec(item.id)" class="btn" src="../../static/icon/cart.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		openMap
	} from '@/utils/rocessor.js';
	import {
		loadIndexs,
		store_list,
		getStore
	} from '@/api/index.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		userinfo
	} from '@/api/user.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getProducts,
		cartAdd,
	} from '@/api/product.js';
	// #ifdef H5
	import {
		weixindata,
		shareLoad
	} from '@/utils/wxAuthorized';
	// #endif
	import {
		getList,
		getClass
	} from '@/api/seckill.js';
	export default {
		filters: {
			moneyNum: function(value) {
				return +value;
			}
		},
		data() {
			return {
				indexList: [{
					stopTimeH: 1,
					stopTimeM: 1,
					stopTimeS: 1
				}],
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				longitude: 121.436289, //经度
				latitude: 28.651485, //纬度
				carouselList: [], //轮播列表
				goodsList: [], //积分商品列表
				bastList: [], //消费券商品列表
				integralList: [], //积分商品列表
				bastBanner: [], //促销商品列表
				menusList: [], //头部菜单
				userServant: [{
					image: ''
				}] //用户推广服务
			};
		},
		computed: {
			...mapState(['loginInterceptor', 'storeInfo', 'canChange', 'baseURL']),
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad(option) {
			let agree = uni.getStorageSync('agree') || false;
			//#ifdef APP-PLUS
			// 判断是否已经同意协议
			if (!agree) {
				uni.redirectTo({
					url: '/pages/contract/start'
				});
			}
			//#endif
			if (option.spread) {
				// 存储邀请人
				uni.setStorage({
					key: 'spread',
					data: option.spread
				});
			}
			let canChange = uni.getStorageSync('canChange') || '';
			if (option.store_id) {
				getStore({
					id: option.store_id
				}).then(({
					data
				}) => {
					this.setStoreInfo(data);
					console.log(data);
				});
				this.setCanChange();
				uni.setStorageSync('canChange', option.store_id);
			} else {
				if (canChange == '') {
					this.getaddress();
				} else {
					console.log('进入缓存');
					getStore({
						id: canChange
					}).then(({
						data
					}) => {
						this.setStoreInfo(data);
					});
					this.setCanChange();
				}
			}
		},
		onShow() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				userinfo()
					.then(e => {
						// #ifdef H5
						this.IndexShare();
						// #endif
					})
					.catch(e => {
						console.log(e);
					});
			}
			if (this.hasLogin) {
				// #ifdef H5
				this.IndexShare();
				// #endif
			}
			this.loadData();
			this.getSeckillinfo()
		},
		// #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/notice/notice'
				});
			}
		},
		// #endif
		methods: {
			...mapMutations(['setLat', 'setLon', 'setStoreInfo', 'setCanChange']),
			// #ifdef H5
			IndexShare() {
				let obj = this;
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/pages/index/index' + '?';
				// 保存传值
				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 + path,
					title: this.userInfo.nickname + '邀请您进入满园春',
					desc: '欢迎加入满园春',
					imgUrl: this.baseURL + '/static/img/logo.png'
				};
				console.log(data, '分享数据');
				shareLoad(data);
			},
			// #endif
			//获取定位信息
			getaddress() {
				console.log('dizhi+++++++++++');
				let obj = this;
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res);
						console.log('66666666666666666666');
						obj.setLat(res.latitude);
						obj.setLon(res.longitude);
						obj.getStore(res.latitude, res.longitude);
					},
					fail: err => {
						console.log(err, 'shi+++++++++++++++');
						openMap().then(e => {
							this.getaddress();
						});
					}
				});
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			navTo(url, type = 1) {
				if (type == 2) {
					return this.$api.msg('敬请期待')
				}
				if (!this.hasLogin) {
					url = '/pages/public/login';
					// #ifdef H5
					let weichatBrowser = uni.getStorageSync('weichatBrowser');
					// 判断是否为微信浏览器
					if (weichatBrowser) {
						url = '/pages/public/wxLogin';
					}
					// #endif
					// #ifdef MP-WEIXIN
					url = '/pages/public/wxLogin';
					// #endif
				}
				uni.navigateTo({
					url
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			getStore(latitude, longitude) {
				let obj = this;
				store_list({
					latitude: latitude,
					longitude: longitude,
					page: 1,
					limit: 1
				}).then(({
					data
				}) => {
					console.log(data, 'storeInfo++++');
					obj.setStoreInfo(data.list[0]);
				});
			},
			// 加入购物车
			toggleSpec(str) {
				cartAdd({
					cartNum: 1, //商品数量
					uniqueId: '', //商品标签
					new: 0, //商品是否新增加到购物车1为不加入0为加入
					mer_id: 0,
					is_consumer: 0,
					productId: str
				}).then(e => {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 2000
					});
				})
			},
			// 请求载入数据
			async loadData() {
				const obj = this;
				loadIndexs({}).then(({
					data
				}) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.menusList = data.menus;
					this.goodsList = goods.bastList; //最新商品
					this.integralList = goods.integralList;
				});
			},
			navProduct(ls) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + ls.id + '&type=1' + '&stoptime=' + this.indexList[0].stop
				});
			},
			getSeckillinfo() {
				const obj = this;
				getClass({}).then(({
					data
				}) => {
					let list = data.seckillTime.filter(e => {
						return e.status == 1
					})
					this.indexList = list.map(e => {
						e.dataList = [];
						obj.timeComputed(e.stop * 1000, e)
						getList({
							page: 1,
							limit: 3
						}, e.id).then(ar => {
							e.dataList = ar.data;
						})
						return e;
					})
					console.log(this.indexList, '123456');
				})
			},
			timeComputed(da, ar) {
				let obj = ar;
				// 设置到期时间
				let time = new Date(da);
				// 获取当前时间
				let actTime = new Date();
				// 获取到期时间具体值
				let tH = time.getHours();
				let tM = time.getMinutes();
				let tS = time.getSeconds();
				// 获取当前时间具体值
				let aH = actTime.getHours();
				let aM = actTime.getMinutes();
				let aS = actTime.getSeconds();
				// 计算时间，保存需要多少时间到期
				obj.stopTimeH = tH - aH;
				obj.stopTimeM = tM - aM;
				obj.stopTimeS = tS - aS;
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				// this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id
				});
			},
			//积分详情页
			navToDetailPagejf(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id
				});
			},
			//消费券详情页
			navToDetailvoucher(item) {
				uni.navigateTo({
					url: '/pages/prefecture/detail?id=' + item.id
				});
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_url.indexOf('http') > 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			},
			nav(url) {
				console.log(url, '111111111');
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

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

	.m-t {
		margin-top: 16rpx;
	}


	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;
		overflow: hidden;

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

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

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

		.search {
			justify-content: center;
			padding: 10rpx 24rpx 20rpx;
			align-items: center;

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

			.shop-name {
				height: 38rpx;
				position: relative;
				z-index: 100;
				width: 206rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				padding-left: 10rpx;
			}

			.input-box {
				position: relative;
				z-index: 99;
				width: 700rpx;
				height: 60rpx;
				background: rgba(39, 170, 116, 0.4);
				box-shadow: 0px 9rpx 21rpx 0px rgba(4, 114, 69, 0.22);
				border-radius: 30px;
				margin: 0 auto;

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

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

					.input {
						margin-left: 19rpx;
						color: #ffffff;

						input {
							font-size: 26rpx;

							color: #ffffff;
						}
					}
				}

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

	.carousel {
		width: 100%;
		height: 320rpx;
		background-color: #fff;

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

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

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60rpx;
		bottom: 15rpx;
		width: 72rpx;
		height: 36rpx;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
		background-size: 100% 100%;

		.num {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50px;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 36rpx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36rpx;
			font-size: 12rpx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 16rpx 22rpx 48rpx;
		background: #fff;

		.cate-item {
			padding-top: 32rpx;
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;

			.none-font-color {
				color: $page-color-base;
			}

			.Uimg {
				border-radius: 999px;
			}
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
			opacity: 0.7;
		}
	}

	.cate-two {
		padding: 20rpx 22rpx;
		background: #ffffff;

		.catet-item {
			display: flex;
			align-items: center;
			padding: 12rpx 20rpx;
			background: #f7f8fa;

			.catet-icon {
				height: 40rpx;
			}

			.catet-font {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-left: 10rpx;
			}
		}
	}

	.seckill-box {
		justify-content: start;
		padding: 28rpx 20rpx;
		background: #ffffff;

		.seckill-left {
			padding: 0 10rpx;
			width: 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.seckill-title {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			.seckill-time {
				margin-top: 16rpx;
			}

			.seckill-tip {
				margin-top: 16rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8A9498;
			}

			.seckill-btn {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 36rpx;
				background: #52C696;
				border-radius: 18rpx;

				.seckillbtn-icon {
					width: 20rpx;
					height: 26rpx;
				}

				.seckillbtn-font {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.seckill-bk {
					width: 10rpx;
					height: 18rpx;
				}
			}
		}

		.xian {
			margin: 0 10rpx;
			width: 1rpx;
			height: 232rpx;
			background: #DCDCDC;
		}

		.seckill-main {
			width: 100%;
		}

		.seckill-item {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.seckill-icon {
				width: 146rpx;
				height: 146rpx;
				background: #F4F4F4;
				border-radius: 12rpx;
			}

			.seckill-font {
				margin-top: 16rpx;
				width: 146rpx;
				font-size: 21rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #414141;
				line-height: 34rpx;
			}

			.price-box {
				width: 100%;
				align-items: flex-end;

				.price {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6B2E;
				}

				.sale {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

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

	/*公用边框样式*/
	%icon {
		margin-right: 10rpx;
		display: inline-block;
		padding: 2rpx 10rpx;
		border: 1rpx solid $color-yellow;
		color: $color-yellow;
		line-height: 1;
		font-size: $font-base;
		border-radius: 10rpx;
	}

	.bastgood-box {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 40rpx 0;

		.bast-bg {
			display: flex;
			justify-content: center;
			align-items: center;

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

			.bast-name {
				margin: 0 70rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #393939;
				line-height: 28rpx;
			}
		}

		.guess {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 20rpx;
		}

		.guess-item {
			margin-top: 20rpx;
			width: 345rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;

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

			.guess-box {
				padding: 28rpx 20rpx;
				width: 345rpx;

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


				.price {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6B2E;

					.yuan {
						display: inline-block;
						margin-left: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #989898;
					}
				}

				.btn {
					width: 44rpx;
					height: 44rpx;
					background: #00ca95;
					border-radius: 50rpx;

				}
			}
		}
	}
</style>