yicangzongtai_app_240321/pages/research/homepage/lidaPage.vue

<template>
	<view class="index">
		<navbar :config="config" @searchClick="searchClick">
			<view slot="right" style="
          font-size: 36rpx;
          font-weight: 500;
          color: #ffffff;
          margin-right: 30rpx;
        ">
				<text class="iconfont" style="font-size: 40rpx;" @click="goToMsg()">
					&#xe66d;
					<view class="num" v-if="msgCenter==0?false:msgCenter">{{msgCenter}}</view>
				</text>
			</view>
		</navbar>
		<view class="top"></view>
		<view class="swiper">
			<view class="uni-margin-wrap">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					circular=ture>
					<swiper-item v-for="item in shopBanner" :key="item.id">
						<view class="swiper-item" @click="
                imgLink(item.model_type, item.model_id, item.url, item.shop_id)
              " mode="aspectFill">
							<image class="bannersize" :src="item.cover"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="list">
			<view class="item" @click="goDetail('/pages/research/nearby/timeLimit')">
				<image :src="imgUrl+'/index/alarmClock.png'" mode=""></image>
				<view class="font">限时秒杀</view>
			</view>
			<view class="item" @click="goDetail('/pages/research/homepage/groupList')">
				<image :src="imgUrl+'/index/spell.png'" mode=""></image>
				<view class="font">拼团</view>
			</view>
			<view class="item" @click="goDetail('/pages/pointsMall/index')">
				<image :src="imgUrl+'/index/integral.png'" mode=""></image>
				<view class="font">积分商城</view>
			</view>
			<!-- <view class="item" @click="goDetail('/pages/user/wallet/cardBag', true)">
				<image :src="imgUrl+'/index/oneCardSolution.png'" mode=""></image>
				<view class="font">一卡通</view>
			</view> -->
			<view class="item" @click="goDetail('/pages/research/nearby/facade')">
				<image :src="imgUrl+'/index/nearby.png'" mode=""></image>
				<view class="font">附近门店</view>
			</view>
		</view>
		<!-- 广告 -->
		<view class="advertisement" v-for='item in shopBanner2' :key="item.id" @click="
                imgLink(item.model_type, item.model_id, item.url)
              ">
			<image :src="item.cover" mode="aspectFill"></image>
		</view>
		<!-- 限时秒杀 -->
		<view class="seckill" v-if="currSeckill && currSeckill.length > 0">
			<view class="seckill-item">
				<view class="seckill-top" @click="goDetail('/pages/research/nearby/timeLimit')">
					<view class="left">限时秒杀</view>
					<view class="line" v-if="currTime"></view>
					<view class="time" v-if="currTime">{{ currTime }}点场 剩余</view>
					<view class="reciprocal" v-if="currTime">
						<uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#fff'"
							:splitorColor="'#fff'" :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]"
							:minute="time2[2]" :second="time2[3]"></uni-countdown>
					</view>
				</view>
				<view class="option" v-if="currSeckill && currSeckill.length > 0">
					<swiper :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis2"
						@change="imgActiveFun2" style="height: 220rpx" circular="true">
						<swiper-item class="option-item" @click="
                goProductDetails(
                  '/pages/product/goods/seckillGoods?id=' + item.id
                )
              " v-for="item in currSeckill" :key="item.id">
							<!-- <view class="option-item" v-for="item in currSeckill" :key="item.id"> -->
							<image v-if="item && item.cover" :src="item.cover" mode=""></image>
							<view class="number">
								<rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
							</view>
							<!-- </view> -->
						</swiper-item>
					</swiper>
					<view class="slide-box">
						<view class="dotBox" :style="{ marginLeft: ml2 + 'rpx' }" v-if="currSeckill.length > 0">
							<view class="dotBox_item" v-for="(v, i) in keyList2" :key="i"
								:class="{ active_dotBox: activeBannerIndex2 == i }"></view>
						</view>
					</view>
				</view>
				<!-- <view class="scroll" v-if="currSeckill && currSeckill.length > 0"
          ><view class="scroll-red"></view
        ></view> -->
				<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
			</view>
		</view>

		<!-- 拼团购 -->
		<view class="group-work" v-if="groupList && groupList.length > 0">
			<view class="work-top" @click="goDetail('/pages/research/homepage/groupList')">
				<view class="top-left">拼团购</view>
				<view class="top-right" style="color: #999999;">
					查看更多
					<text class="iconfont u-font24 u-999"style="margin-left: 10rpx;">&#xe6c7;</text>
				</view>
			</view>
			<view v-if="groupList && groupList.length > 0">
				<view class="middle" v-for="item in groupList" :key="item.id" @click="
            goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
          ">
					<view class="middle-left">
						<image v-if="item && item.cover" :src="item.cover" mode=""></image>
					</view>
					<view class="middle-right">
						<view class="middle-title u-text2">{{ item.title }}</view>
						<view class="division">
							<view class="middle-num">
								<view class="contain">
									<view class="large">
										<rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
									</view>
									<view class="small">¥ {{ item.min_sale_price }}</view>
								</view>
								<view class="three">{{ item.group_people_num }}人团，已拼 <text style="color: #FF0000;">
										{{item.result_sale_num}}</text> 件</view>
							</view>
							<view class="button">去拼团</view>
						</view>
					</view>
				</view>
			</view>
			<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
		</view>

		<!-- 热门推荐 -->
		<view class="hot">
			<view class="hot-top">
				<view class="hot-left">热门推荐</view>
				<view class="hot-body"></view>
				<view class="hot-right">精选好物推荐</view>
			</view>
			<view class="hot-item" v-if="recommendList && recommendList.length > 0">
				<view class="item" v-for="item in recommendList" :key="item.id"
					@click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
					<image v-if="item && item.cover" :src="item.cover" mode=""></image>
					<view class="hot-introduce" v-if="item && item.title">{{
            item.title
          }}</view>
					<view class="hot-number">
						<view class="hot-large">
							<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
						</view>
						<view class="hot-small">￥{{ item.max_market_price }}</view>
					</view>
				</view>
			</view>
			<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
		</view>

		<!-- 每周上新 -->
		<view class="new-products">
			<view class="new-top">
				<view class="new-left">每周上新</view>
				<view class="new-line"></view>
				<view class="new-right">新品上市优惠热销</view>
			</view>
			<view class="new-list" v-if="newsList && newsList.length > 0">
				<view class="item" v-for="item in newsList" :key="item.id"
					@click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
					<image v-if="item && item.cover" :src="item.cover" mode=""></image>
					<view class="list-num">
						<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
					</view>
				</view>
			</view>
			<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
		</view>

		<!-- 本月热销 -->
		<view class="new-products">
			<view class="new-top">
				<view class="new-left">本月热销</view>
				<view class="new-line"></view>
				<view class="new-right">爆品热卖中</view>
			</view>
			<view v-if="hotList && hotList.length > 0">
				<swiper class="month-list" :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis"
					@change="imgActiveFun" circular="true">
					<swiper-item class="item" @click="
              goProductDetails('/pages/product/goods/goods?id=' + item.id)
            " v-for="item in hotList" :key="item.id">
						<image v-if="item && item.cover" :src="item.cover" mode=""></image>
						<view class="list-num">
							<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
						</view>
						<view class="sold">已售{{ item.result_sale_num }}件</view>
					</swiper-item>
				</swiper>
				<view class="slide-box">


					<view class="dotBox" v-if="hotList.length > 0">
						<!-- 上面给的动态样式 :style="{ marginLeft: ml + 'rpx' }" -->
						<!-- v-for="(v, i) in hotList.slice(0,hotList.length-2)" -->
						<view class="dotBox_item" v-for="(v, i) in hotList" :key="i"
							:class="{ active_dotBox: activeBannerIndex == i }"></view>
					</view>
				</view>
			</view>

			<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
		</view>
		<!-- 本月热销 -->
		<!-- 猜你喜欢 -->
		<view class="guess">
			<view class="guess-top">
				<view class="guess-left">猜你喜欢</view>
				<view class="guess-line"></view>
				<view class="guess-right">智能推荐你感兴趣的优品</view>
			</view>
			<view class="guess-item" v-if="goodsList && goodsList.length > 0">
				<view class="item" @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
					v-for="item in goodsList" :key="item.id">
					<image v-if="item && item.cover" :src="item.cover" mode=""></image>


					<view style=" padding-bottom: 40rpx;">


						<view class="name" style="flex: 1;">{{ item.title }}</view>
						<view class="number">
							<view class="number-red">
								<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
							</view>
							<view class="number-grey">￥{{ item.max_market_price }}</view>
						</view>
					</view>


				</view>
			</view>
			<nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
			<loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
		</view>
		<!-- 猜你喜欢 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ["color1", "color2", "color3"],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				config: {
					back: false, //false是tolbar页面 是则不写
					title: "商品列表",
					color: "#FFFFFF",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#0B844A"],
					
					// rightButton:[{
					// 	key:'btn1',
					// 	position:"left",
					// 	icon:'&#xe6eb;'
					// }],
					rightSlot: true,
					search: {
						disabled:true,
						value: "",
						placeholder: "请输入搜索关键字",
					},
				},
				keyWord: "",
				groupList: [], //团购
				hotList: [], //本月热销
				newsList: [], //每周上新
				recommendList: [], //推荐
				shopBanner: [], //轮播图
				currSeckill: [], //秒杀
				time2: [0, 0, 0, 0], //秒杀倒计时
				goodsList: [], //猜你喜欢
				currTime: null,
				keyList: 0,
				ml: -22,
				itemsDis: 1,
				activeBannerIndex: 0,
				keyList2: 0,
				ml2: -22,
				itemsDis2: 1,
				activeBannerIndex2: 0,
				page: 1,
				status: "more",
				isOver2: false,
				msgCenter: null,
				shopBanner2: [],
				imgUrl: this.$mConfig.staticUrl
			};
		},
		onLoad() {
			this.page = 1;
			this.getAll();
		},
		onShow() {
			this.getmessageNum()
		},
		onPullDownRefresh() {
			this.page = 1;
			// uni.showModal({
			// 	title:'onPullDownRefresh'
			// })
			this.getAll();
			// uni.stopPullDownRefresh();
		},

		onReachBottom() {
			this.status = "loading";
			this.page++;
			this.guessLike();
		},

		methods: {
			//跳转消息页面
			goToMsg() {
				let token = uni.getStorageSync("apiToken")
				if (!token) {
					uni.navigateTo({
						url: "../register/login"
					})
				} else {
					uni.navigateTo({
						url: "../setup/myMsg"
					})
				}
			},
			searchClick() {
				// console.log("dian");
				uni.navigateTo({
					url: "/pages/research/homepage/search",
				});
			},
			goProductDetails(url) {
				uni.navigateTo({
					url: url,
				});
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots;
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay;
			},
			intervalChange(e) {
				this.interval = e.detail.value;
			},
			durationChange(e) {
				this.duration = e.detail.value;
			},
			getAll() {
				this.rest();
				// this.getmessageNum();
				this.getBanner();
				this.seckillList();
				this.getgroupList();
				this.recommend();
				this.newWeek();
				this.hotSale();
				this.guessLike();
			},
			/**获得消息数量 */
			getmessageNum() {
				let token = uni.getStorageSync("apiToken")
				if (token) {
					this.$http.get("/private/message/unread-num").then(res => {
						if (res && res.code == 200) {
							this.msgCenter = res.data
						}
					})
				}
			},
			/**轮播图 */
			getBanner() {
				this.$http
					.get(`/ad/ad/getShopAdByAdL/0/pt-banner`, {}, false)
					.then((res) => {
						console.log(res)
						console.log('轮播图')
						uni.stopPullDownRefresh();
						this.loading = false;
						if (res && res.code == 200) {
							this.shopBanner = res.list;
						}
					})
					.catch(err => {
						// console.log(err)
					});
				this.$http
					.get(`/ad/ad/getShopAdByAdL/0/pt-banner2`, {}, false)
					.then((res) => {
						uni.stopPullDownRefresh();
						this.loading = false;
						if (res && res.code == 200) {
							this.shopBanner2 = res.list;
						}
					});
			},
			imgActiveFun(e) {

				this.activeBannerIndex = e.detail.current;
			},
			imgActiveFun2(e) {
				this.activeBannerIndex2 = e.detail.current;
			},
			overDown2() {
				this.isOver2 = true;
			},
			/**限时秒杀 */
			seckillList() {
				this.$http
					.get(
						`/marketing/seckillActivityGoods/flash-sale`, {
							limit: 10,
							page: 1
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							this.currTime = res.data.start_hour;
							this.currSeckill = res.data.list;

							if (this.currSeckill && res.data.list.length <= 4) {
								this.keyList2 = 1;
								this.itemsDis2 = res.data.list.length;
							}
							if (
								this.currSeckill &&
								res.data.list.length > 4 &&
								res.data.list.length <= 8
							) {
								this.keyList2 = 2;
								this.ml2 = -45;
								this.itemsDis2 = 3;
							}
							if (
								this.currSeckill &&
								res.data.list.length > 8 &&
								res.data.list.length <= 12
							) {
								this.keyList2 = 3;
								this.ml2 = -68;
								this.itemsDis2 = 3;
							}
							if (
								this.currSeckill &&
								res.data.list.length > 12 &&
								res.data.list.length <= 16
							) {
								this.keyList2 = 4;
								this.ml2 = -90;
								this.itemsDis2 = 3;
							}
							if (res.data.finish_time) {
								this.time2 = this.$mUtil
									.countDown(Math.floor(res.data.finish_time / 1000))
									.split(":")
									.map((val) => Number(val));
							}
						}
					});
			},
			/**团购 */
			getgroupList() {
				this.$http
					.get(
						`/groupbuy/activitygoods/will-you-spell`, {
							limit: 10,
							page: 1
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {
							this.groupList = res.list;
						}
					});
			},
			/**热门推荐 */
			recommend() {
				this.$http
					.get(`/goods/new`, {
						limit: 6,
						type: "hot"
					}, false)
					.then((res) => {
						if (res && res.code == 200) {
							this.recommendList = res.list;
						}
					});
			},
			/**每周上新 */
			newWeek() {
				this.$http.get(`/goods/new`, {
					limit: 16
				}, false).then((res) => {
					if (res && res.code == 200) {
						this.newsList = res.list;
					}
				});
			},
			/**本月热销 */
			hotSale() {
				this.$http
					.get(`/goods/month`, {
						limit: 12,
						mix_num: 3
					}, false)
					.then((res) => {
						if (res && res.code == 200) {
							this.hotList = res.list;
							if (res.list.length <= 3) {
								this.keyList = 1;
								this.itemsDis = res.list.length;
							}
							if (res.list.length > 3 && res.list.length <= 6) {
								this.keyList = 2;
								this.ml = -45;
								this.itemsDis = 3;
							}
							if (res.list.length > 6 && res.list.length <= 9) {
								this.keyList = 3;
								this.ml = -68;
								this.itemsDis = 3;
							}
							if (res.list.length > 9 && res.list.length <= 12) {
								this.keyList = 4;
								this.ml = -90;
								this.itemsDis = 3;
							}
						}
					});
			},
			/**猜你喜欢 */
			guessLike() {
				this.keyWord = uni.getStorageSync("history") ? uni.getStorageSync("history").join(",") : ''
				this.$http
					.get(
						`/goods/smart`, {
							page: this.page,
							limit: 6,
							keywords: this.keyWord,
						},
						false
					)
					.then((res) => {
						if (res && res.code == 200) {

							this.goodsList = this.page == 1 ? res.page.list : this.goodsList.concat(res.page.list);
							if (res.page.totalPage <= res.page.currPage) {
								this.status = "noMore";
							} else {
								this.status = "more";
							}
						}
					});
			},
			/**轮播图跳转 */
			imgLink(type, id, url, shopid) {
				if (type == "goods") {
					uni.navigateTo({
						url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
					});
				} else if (type == "service") {
					uni.navigateTo({
						url: "/pages/product/goods/serviceGood?id=" + id
					});
				} else if (type == "url") {
					if(/^http/.test(url)){
						uni.navigateTo({
							url: "/pages/index/webView?linkUrl=" + url,
						});ef
					}else{
						uni.navigateTo({
							url
						});
					}
				}
			},
			goDetail(url, isNeedLogin) {
				if ((isNeedLogin && uni.getStorageSync("apiToken") == "") || null) {
					this.$mUtil.toast("请先登录");
					return false;
				}
				uni.navigateTo({
					url: url,
				});
			},
			/**重置数据*/
			rest() {
				this.goodsList = [];
				this.currSeckill = [];
				this.shopBanner = [];
				this.recommendList = [];
				this.newsList = [];
				this.hotList = [];
				this.groupList = [];
			},
		},
	};
</script>

<style scoped lang="scss">
	.swiper {
		/deep/ .uni-swiper-dot {
			width: 40rpx !important;
			height: 8rpx;
			border-radius: 5rpx !important;
			background-color: #ffffff !important;
			opacity: 0.5;
		}

		/deep/ .uni-swiper-dot-active {
			background-color: #ffffff !important;
			opacity: 1;
		}
	}


	/deep/.hx-navbar__content__main_search_hxicon {
		span {
			font-size: 30rpx;
		}
	}

	/deep/.uni-input-placeholder {
		background-color: #4A705D;
		color: #193E2C !important;
		font-size: 22rpx;
	}

	/deep/.hx-navbar__content__main_search_input {
		background-color: #4A705E;
	}

	.bannersize {
		display: block;
		border-radius: 20rpx;
		overflow: hidden;
		width: 100%;
		height: 340rpx;
	}

	.guess {
		margin: 0 30rpx;

		.guess-item {
			display: flex;
			// justify-content: space-around;
			flex-wrap: wrap;

			.item {
				margin-bottom: 36rpx;
				border-radius: 18rpx;
				background-color: #ffffff;
				border-radius: 18rpx;
				overflow: hidden;
				display: flex;
				flex-direction:column ;
				justify-content: space-between;
				
				image {
					width: 336rpx;
					height: 336rpx;
				}

				.name {
					margin: 6rpx 20rpx;
					width: 296rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal !important;
				}

				.number {
					display: flex;
					align-items: flex-end;
					// padding-bottom: 40rpx;
					margin: 10rpx 20rpx 0 20rpx;
					
					.number-red {
						color: #ed3d07;
						font-size: 36rpx;
						font-weight: 500;

						text {
							font-size: 36rpx;
							font-weight: Bold;
						}
					}
					.number-grey {
						color: #999999;
						font-size: 22rpx;
						font-weight: 400;
						text-decoration: line-through;
						margin-left: 16rpx;
					}
				}
			}
			.item:nth-child(2n){
				margin-left: 18rpx;
			}
		}

		.guess-top {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.guess-left {
				font-size: 36rpx;
				color: #1a1a1a;
				font-weight: Bold;
				line-height: 30rpx;
			}

			.guess-line {
				width: 1rpx;
				height: 32rpx;
				background-color: #707070;
				margin: 0 16rpx;
			}

			.guess-right {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
				line-height: 24rpx;
			}
		}
	}

	.new-products {
		margin: 50rpx 30rpx;

		.new-list {
			display: flex;
			overflow: scroll;
			white-space: nowrap;

			.item {
				margin-right: 20rpx;
				margin-top: 28rpx;
				margin-bottom: 28rpx;
				text-align: center;

				image {
					border: 1rpx solid #e6e6e6;
					width: 172rpx;
					height: 172rpx;
				}

				.list-num {
					margin-top: 16rpx;
					font-size: 36rpx;
					line-height: 24rpx;
					color: #ff0000;
					font-weight: Bold;

					text {
						font-size: 32rpx;
					}
				}
			}
		}

		.montn-scroll {
			margin: 0 auto;
			border-radius: 6rpx;
			width: 124rpx;
			height: 14rpx;
			background-color: #dddddd;
			border-radius: 7rpx;
			text-align: center;

			.montn-red {
				width: 50rpx;
				border-radius: 6rpx;
				height: 14rpx;
				background-color: #ff0000;
			}
		}

		.month-list {
			// display: flex;
			// overflow: scroll;
			// white-space: nowrap;
			position: relative;
			padding-bottom: 20rpx;
			height: 350rpx;

			/deep/ uni-swiper {
				height: 350rpx;
			}

			.item {
				margin: 28rpx 20rpx 28rpx 0;
				text-align: center;
				height: 350rpx;

				image {
					width: 216rpx;
					height: 216rpx;
					border-radius: 16rpx;
				}

				.list-num {
					margin-top: 16rpx;
					font-size: 36rpx;
					line-height: 24rpx;
					color: #ff0000;
					font-weight: bold;

					text {
						font-size: 32rpx;
					}
				}

				.sold {
					font-size: 22rpx;
					font-weight: Medium;
					line-height: 24rpx;
					color: #999999;
					margin-top: 8rpx;
				}
			}
		}

		.new-top {
			display: flex;
			align-items: center;

			.new-left {
				font-size: 36rpx;
				color: #1a1a1a;
				font-weight: Bold;
				line-height: 30rpx;
			}

			.new-line {
				width: 1rpx;
				height: 33rpx;
				background-color: #707070;
				margin: 0 16rpx;
			}

			.new-right {
				font-size: 24rpx;
				color: #666666;
				font-weight: Regular;
				line-height: 24rpx;
			}
		}
	}

	.slide-box {
		display: flex;
		justify-content: center;
	}

	.dotBox {
		// position: absolute;
		// bottom: 0rpx;
		// left: 50%;
		// margin: 0 auto;
		height: 14rpx;
		overflow: hidden;
		border-radius: 14rpx;
		background-color: #ccc;
		display: flex;
		justify-content: center;

		.dotBox_item {
			width: 45rpx;
			height: 14rpx;
			border-radius: 2rpx;
			background-color: #ccc;
			transition: all 0.5s;
		}

		.active_dotBox {
			width: 45rpx;
			background: rgba(254, 70, 3, 1);
			transition: all 0.5s;
		}
	}

	.hot {
		margin: 0 30rpx;

		.hot-item {
			display: flex;
			overflow: scroll;
			white-space: nowrap;

			.hot-number {
				display: flex;
				align-items: flex-end;
				margin-top: 10rpx;
			}

			.hot-large {
				color: #ff0000;
				font-size: 36rpx;
				font-weight: Bold;
				line-height: 24rpx;

				text {
					font-size: 36rpx;
					margin-left: 10rpx;
				}
			}

			.hot-small {
				font-size: 22rpx;
				font-weight: Medium;
				line-height: 24rpx;
				color: #cccccc;
				margin-left: 16rpx;
			}

			.hot-introduce {
				overflow: hidden;
				word-break: break-all;
				margin-top: 24rpx;
				// width: 240rpx;
				font-size: 24rpx;
				font-weight: Regular;
				line-height: 34rpx;
				color: #333333;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-wrap: break-word;
				white-space: normal !important;
			}

			.item {
				padding: 20rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			display: flex;

			margin-top: 27rpx;

			image {
				width: 252rpx;
				height: 252rpx;
				border-radius: 16rpx;
			}
		}

		.hot-top {
			display: flex;
			align-items: center;

			.hot-left {
				font-size: 36rpx;
				font-weight: Bold;
				color: #1a1a1a;
				line-height: 30rpx;
			}

			.hot-body {
				width: 1rpx;
				height: 32rpx;
				background-color: #707070;
				margin: 0 16rpx 0 14rpx;
			}

			.hot-right {
				font-size: 24rpx;
				font-weight: Regular;
				line-height: 24rpx;
				color: #666666;
			}
		}
	}

	.middle:last-child {
		border: none;
	}

	.middle {
		display: flex;
		border-bottom: 1rpx solid #e6e6e6;
		padding-bottom: 40rpx;
		padding-top: 42rpx;

		.middle-left {
			margin-right: 20rpx;

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

		.middle-right {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 10rpx;

			.middle-title {
				font-size: 28rpx;
				margin-top: 10rpx;
				color: #181818;
				font-weight: 400;
				line-height: 36rpx;
			}

			.division {
				display: flex;
				// margin-top: 60rpx;
				width: 100%;
				padding-bottom: 10rpx;
				justify-content: space-between;
			}

			.middle-num {
				flex: 1;

				.contain {
					display: flex;
					align-items: flex-end;
				}

				.three {
					font-size: 24rpx;
					font-weight: Regular;
					color: #333333;
					line-height: 24rpx;
					margin-top: 8rpx;
				}

				.large {
					color: #ff0000;
					font-size: 36rpx;
					font-weight: Bold;
					line-height: 24rpx;

					text {
						font-size: 36rpx;
					}
				}

				.small {
					margin-left: 16rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #cccccc;
					line-height: 24rpx;
					text-decoration: line-through;
				}
			}

			.button {
				padding: 10rpx 25rpx 10rpx 25rpx;
				color: #d5c49b;
				font-size: 28rpx;
				font-weight: Medium;
				background-color: #0B844A;
				border-radius: 32rpx;
			}
		}
	}

	.group-work {
		margin: 50rpx 30rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 30rpx;

		.work-top {
			padding-bottom: 20rpx;
			margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e6e6e6;

			.top-left {
				font-size: 36rpx;
				font-weight: Bold;
				color: #1a1a1a;
				line-height: 30rpx;
			}

			.top-right {
				
				color: #333333;
				font-size: 24rpx;
				font-weight: Regular;

				.iconfont {
					color: #666666;
				}
			}
		}
	}

	.seckill {
		margin: 50rpx 30rpx;

		.seckill-item {
			border-radius: 16rpx;

			.scroll {
				margin: 26rpx auto 26rpx auto;

				width: 124rpx;
				height: 14rpx;
				background-color: #ededed;
				border-radius: 8rpx;

				.scroll-red {
					width: 50rpx;
					height: 14rpx;
					background-color: red;
					border-radius: 8rpx;
				}
			}

			background-color: #ffffff;
			padding: 0 28rpx 26rpx 28rpx;

			.option {
				//   display: flex;
				position: relative;
				//   padding: 12rpx 20rpx;
				margin-top: 20rpx;

				/deep/ .uni-swiper-slide-frame {
					width: 26% !important;
				}

				.option-item {
					margin-right: 22rpx;

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

					.number {
						margin-top: 4rpx;
						text-align: center;
						font-size: 36rpx;
						font-weight: Bold;
						line-height: 24rpx;
						color: #333333;

						text {
							font-size: 28rpx;
							font-weight: Medium;
						}
					}
				}
			}

			.seckill-top {
				padding: 24rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #e6e6e6;

				.left {
					font-size: 36rpx;
					font-weight: Bold;
					color: #1a1a1a;
					margin-right: 14rpx;
				}

				.line {
					width: 1rpx;
					height: 32rpx;
					background-color: #707070;
				}

				.time {
					margin-left: 16rpx;
					color: #666666;
					font-size: 24rpx;
					font-weight: Regular;
				}

				.reciprocal {
					color: #ffffff;
					padding: 0 14rpx;
					background-color: #ff0000;
					font-size: 24rpx;
					font-weight: Bold;
					border-radius: 16rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.advertisement {
		margin: 50rpx 30rpx;

		image {
			width: 690rpx;
			height: 156rpx;
			border-radius: 28rpx;
		}
	}

	.list {
		margin: 44rpx 30rpx;
		display: flex;
		justify-content: space-between;

		.item {
			text-align: center;

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

	.item-red {
		background: #f76260;
		color: #fff;
	}

	.item-green {
		background: #09bb07;
		color: #fff;
	}

	.item-blue {
		background: #007aff;
		color: #fff;
	}

	.swiper {
		margin: 30rpx;

	}

	.index {
		position: relative;
		background-color: #eeeeee;
		overflow-x: hidden;

		.top {
			position: absolute;
			top: 0;
			left: -13%;
			width: 126%;
			overflow-x: hidden;
			height: 400rpx;
			border-radius: 0 0 50% 50%;
			background-color: rgba(0, 50, 30, 1);
		}
	}

	.iconfont {
		position: relative;
	}

	.num {
		position: absolute;
		top: -20rpx;
		left: -20rpx;
		background-color: #ff0000;
		padding: 2rpx 10rpx;
		border-radius: 14rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.uni-margin-wrap {
		width: 690rpx;
	}

	.swiper {
		height: 340rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border-radius: 20rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>