xmt/pages/category/funeng.vue

<template>
	<view class="container">
		<scroll-view scroll-x="true" class="class-box flex b-t" :scroll-left="scrollLeft" :scroll-with-animation="true">
			<view @click="tabClick(idx)" class="item" :style="{ width: topNavWidth }" v-for="(item, idx) in navList"
				:key="idx">
				<view class="status" :class="{ action: idx == tabCurrentIndex }">{{ item.title }}</view>
			</view>
		</scroll-view>
		<swiper :interval="3000" :duration="500" class="nav-swiper" :current="tabCurrentIndex"
			:style="{'height':height}" @change="changeTab" disable-touch>
			<swiper-item v-for="navItem in navList">
				<scroll-view scroll-y="true" :style="{'height':height}" @scrolltolower="getArtList()">
					<!-- 轮播图and搜索 start-->
					<!-- <view class="top-swiper" v-if="tabCurrentIndex == 0">
						<swiper :autoplay="true" :interval="3000" :duration="1000" class="banner-swiper">
							<swiper-item>
								<image src="../../static/error/emptyCart.png" mode="" class="swiper-img"></image>
							</swiper-item>
							<swiper-item>
								<image src="../../static/img/bargainBg.jpg" mode="" class="swiper-img"></image>
							</swiper-item>
						</swiper>
						<view class="input-box flex" @click="clickSearch">
							<view class=" input-content flex">
								<view class="iconfont iconsearch"></view>
								<view class="input"><input type="text" disabled placeholder="有什么新鲜事" /></view>
							</view>
						</view>
					</view> -->
					<!-- 轮播图and搜索 end-->
					<!-- 置顶新闻 start-->
					<!-- <view class="zd-wrap flex" v-if="zdArt.title && tabCurrentIndex == 0">
						<view class="zd-tit clamp2">
							<text class="zd-tip">|置顶|</text>{{zdArt.title}}
						</view>
						<view class="art-time">
							<image src="../../static/icon/hot.png" mode="" class="hot" v-if="zdArt.is_hot == 1"></image>{{zdArt.add_time}}
						</view>
					</view> -->
					<!-- 置顶新闻 end-->
					<!-- 文章列表 start-->
					<view class="art-list">
						<template v-for="item in navItem.list">
							<!-- 文章图片为一 -->
							<view class="art-item-one flex art-item" v-if="item.image_input.length == 1"
								@click="goToDetail(item.id)">
								<view class="art-left flex">
									<view class="art-tit clamp2">
										{{item.title}}
									</view>
									<view class="art-time">
										<image src="../../static/icon/hot.png" mode="" class="hot"
											v-if="item.is_hot == 1"></image><text
											class="store-name">{{item.name | storeName}}</text>
										<!-- <text class="pl">{{item.comment}}评论</text> -->
										<text class="creat-time">{{item.add_time | showTime}}</text>
									</view>
								</view>
								<view class="art-right">
									<image :src="item.image_input" mode=""></image>
								</view>
							</view>
							<!-- 文章图片为零 -->
							<view class="art-item-zero flex art-item" v-if="item.image_input.length == 0"
								@click="goToDetail(item.id)">
								<view class="art-tit clamp2">
									{{item.title}}
								</view>
								<view class="art-time">
									<image src="../../static/icon/hot.png" mode="" class="hot"></image><text
										class="store-name">{{item.name | storeName}}</text>
									<!-- <text class="pl">{{item.comment}}评论</text> -->
									<text class="creat-time">{{item.add_time | showTime}}</text>
								</view>
							</view>
							<!-- 文章图片大于一 -->
							<view class="art-item-three art-item flex" v-if="item.image_input.length > 1"
								@click="goToDetail(item.id)">
								<view class="art-tit clamp2">
									{{item.title}}
								</view>
								<view class="art-img-list">
									<image :src="imgitem" mode="" v-for="imgitem in item.image_input"></image>
								</view>
								<view class="art-time">
									<image src="../../static/icon/hot.png" mode="" class="hot"></image><text
										class="store-name">{{item.name | storeName}}</text>
									<!-- <text class="pl">{{item.comment}}评论</text> -->
									<text class="creat-time">{{item.add_time | showTime}}</text>
								</view>
							</view>
						</template>

					</view>
					<uni-load-more :status="navItem.loadingType"></uni-load-more>
					<!-- 文章列表 start-->
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		mapState
	} from 'vuex';
	import {
		getArtTypeList,
		getArtList,
		getQyType,
		getQyArtList
	} from '@/api/art.js'
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	export default {
		data() {
			return {
				topNavWidth: '25%', //设置导航默认宽度
				height: '',
				tabCurrentIndex: 0,
				navList: [],
				checkid: 0,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [], //轮播列表
				goodsList: [], //最新商品列表
				bastList: [], //精品推荐列表
				bastBanner: [], //促销商品列表
				menusList: [], //头部菜单
				page: 1,
				limit: 10,
				userServant: [{
					image: ''
				}], //用户推广服务
				actTime: new Date(),
				zdArt: {},
				itemWidht: ''
			};
		},
		computed: {
			...mapState(['loginInterceptor']),
			...mapState('user', ['hasLogin', 'userInfo']),
			scrollLeft() {
				if (this.tabCurrentIndex > 1) {
					return this.itemWidht * (this.tabCurrentIndex - 1.5);
				} else {
					return 0;
				}
			}
		},
		onLoad: function(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
			// 获取文章分类
			// this.getArtTypeList()
			// 获取置顶
			// this.getArtList('zhiding')
			// 获取推荐文章列表
			// this.getArtList()
		},
		onShow: function() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			}
			if (this.navList.length == 0) {
				this.getArtTypeList()
			}
		},
		// 计算页面剩余高度
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.nav-swiper').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		filters: {
			showTime(dateTime) {
				//dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
				dateTime = dateTime * 1000
				var minute = 1000 * 60 //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60
				var day = hour * 24
				var week = day * 7
				var halfamonth = day * 15
				var month = day * 30
				var now = new Date().getTime() //获取当前时间毫秒
				var dateTimeStamp = new Date(dateTime)
				var diffValue = now - dateTimeStamp //时间差

				if (diffValue < 0) {
					return
				}
				var minC = diffValue / minute //计算时间差的分，时，天，周，月
				var hourC = diffValue / hour
				var dayC = diffValue / day
				var weekC = diffValue / week
				var monthC = diffValue / month
				var result = ''
				console.log(monthC, weekC, dayC, hourC, minC)
				if (monthC >= 1 && monthC <= 3) {
					result = ' ' + parseInt(monthC) + '月前'
				} else if (weekC >= 1 && weekC <= 4) {
					result = ' ' + parseInt(weekC) + '周前'
				} else if (dayC >= 1 && dayC <= 7) {
					result = ' ' + parseInt(dayC) + '天前'
				} else if (hourC >= 1 && hourC <= 24) {
					result = ' ' + parseInt(hourC) + '小时前'
				} else if (minC >= 1 && minC <= 60) {
					result = ' ' + parseInt(minC) + '分钟前'
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = '刚刚'
				} else {
					var datetime = new Date()
					datetime.setTime(dateTimeStamp)
					var Nyear = datetime.getFullYear()
					var Nmonth =
						datetime.getMonth() + 1 < 10 ?
						'0' + (datetime.getMonth() + 1) :
						datetime.getMonth() + 1
					var Ndate =
						datetime.getDate() < 10 ?
						'0' + datetime.getDate() :
						datetime.getDate()
					var Nhour =
						datetime.getHours() < 10 ?
						'0' + datetime.getHours() :
						datetime.getHours()
					var Nminute =
						datetime.getMinutes() < 10 ?
						'0' + datetime.getMinutes() :
						datetime.getMinutes()
					var Nsecond =
						datetime.getSeconds() < 10 ?
						'0' + datetime.getSeconds() :
						datetime.getSeconds()
					result = Nyear + '-' + Nmonth + '-' + Ndate
				}
				return result
			},
			storeName(val) {
				let str = ''
				if (val) {
					if (val.length <= 6) {
						str = val
					} else {
						str = val.slice(0, 6) + '...'
					}
				}
				return str
			}
		},
		methods: {
			// 获取项目宽度
			numClassWidht() {
				uni.createSelectorQuery()
					.select('.container')
					.fields({
							size: true
						},
						data => {
							// 设置项目宽度
							this.itemWidht = Math.floor((data.width / 750) * 187.5);
						}
					)
					.exec();
			},
			//swiper 切换
			changeTab(e) {
				console.log(e, 'eeeeeeeeeeeeeeeeee')
				if (e.target.current > (this.navList.length - 1)) {
					e.target.current = 0
				}
				this.tabCurrentIndex = e.target.current;
				this.getArtList('tab')
			},
			// 头部点击切换
			tabClick(index) {
				this.tabCurrentIndex = index

			},
			openSubscribe: function(e) {
				let page = e;
				// #ifndef MP
				uni.navigateTo({
					url: page
				});
				// #endif
				// #ifdef MP
				uni.showLoading({
					title: '正在加载'
				});
				openBargainSubscribe()
					.then(res => {
						uni.hideLoading();
						uni.navigateTo({
							url: page
						});
					})
					.catch(err => {
						uni.hideLoading();
					});
				// #endif
			},
			// 监听切换事件
			listChange(e) {
				this.checkid = e.detail.current;
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			// 轮播图跳转
			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
				});
			},
			// 获取企业分类
			getArtTypeList() {
				let obj = this
				getQyType({
					is_type: 1
				}).then(res => {
					console.log(res)
					// 获取头部nav
					let arr = res.data.map(e => {
						e.loadingType = 'more'
						e.page = 1
						e.limit = 10
						e.loaded = false
						e.list = []
						return e
					})
					obj.navList = arr
					console.log(obj.navList, 'obj.navList')
					obj.$nextTick(() => {
						obj.numClassWidht();
					});
					console.log(obj.navList, '++++++++++++++++')
					this.getArtList()
				})
			},
			// 获取文章列表
			getArtList(type) {
				let obj = this
				let index = obj.tabCurrentIndex
				let navitem = obj.navList[index]
				console.log('res++++++')
				console.log(navitem.loadingType, 'navitem.loadingType')
				// nav 点击切换拦截
				if (type == 'tab') {
					if (navitem.loaded) {
						return
					}
				}
				if (navitem.loadingType == 'loading' || navitem.loadingType == 'noMore') {
					return
				}
				navitem.loadingType = 'loading'
				getQyArtList({
					page: navitem.page,
					rows: navitem.limit,
					id: navitem.id
				}).then(res => {
					console.log(res, '其他')
					navitem.list = navitem.list.concat(res.data.list)
					console.log(navitem.list, 'navitem.list')
					navitem.page++
					if (res.data.list.length == navitem.limit) {
						navitem.loadingType = 'more'
					} else {
						navitem.loadingType = 'noMore'
					}
					navitem.loaded = true
				})
			},
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/user/article?id=' + id
				})
			}
		}
	};
</script>

<style lang="scss">
	.Mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.7);
		top: 0;

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

	// 热销商品
	.hot-goods {
		margin: 0 25rpx;
		padding: 5rpx 25rpx 30rpx 25rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.hot-headers {
			margin: 25rpx 0;
			width: 100%;
			display: flex;

			.img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			.hot-title {
				font-size: 30rpx;
				margin-right: 15rpx;
			}

			.more {
				line-height: 1;
				padding: 5rpx 10rpx 5rpx 15rpx;
				text-align: center;
				font-size: 20rpx;
				border-radius: 15rpx;
				color: #ffffff;
				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);

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

		.hot-lists {
			line-height: 1;
			display: flex;

			.hot-produce {
				width: 100%;
				height: 260rpx;
				border-top: 1px solid #f0f0f0;
				display: flex;
				padding-top: 28rpx;

				.produce-image {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border: 1px solid #f0f0f0;
					}
				}

				.produce-content {
					// flex-direction: column;
					margin-left: 30rpx;
					height: 200rpx;
					position: relative;
					width: calc(100% - 200rpx - 30rpx);

					.produce-name {
						font-size: 28rpx;
						font-weight: bold;
						line-height: 35rpx;
						color: #343434;
					}

					.produce-info {
						font-size: 20rpx;
						margin-top: 25rpx;
					}

					.produce-price {
						display: flex;
						align-items: flex-end;
						color: #ff383e;
						font-size: 24rpx;
						margin-top: 70rpx;
						font-weight: bold;

						text {
							font-size: 36rpx;
						}

						.produce-price-1 {
							font-size: 22rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: rgba(170, 170, 170, 1);
							margin-left: 20rpx;
						}
					}

					.produce-price1 {
						height: 100%;
						letter-spacing: 3rpx;
						color: #ff383e;
						font-size: 24rpx;
						font-weight: bold;

						.produce-center {
							width: 100%;
							position: absolute;
							bottom: 0;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.kanjia_word {
								.word-1 {
									font-size: 22rpx;
									color: #666666;
								}

								.word-2 {
									font-size: 28rpx;
									color: #ff383e;
									margin-top: 10rpx;
								}
							}

							.kanjia_button {
								height: 50rpx;
								width: 150rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #ff383e;
								border: 1px solid rgba(255, 56, 62, 1);
							}
						}
					}
				}
			}
		}
	}

	// .mp-height {
	// 	height: 44px;
	// }

	// page {
	// 	.cate-section {
	// 		position: relative;
	// 		z-index: 5;
	// 		border-radius: 16rpx 16rpx 0 0;
	// 		margin-top: -20rpx;
	// 	}
	// 	.carousel-section {
	// 		padding: 0;
	// 		.titleNview-placing {
	// 			padding-top: 0;
	// 			height: 0;
	// 		}
	// 		.carousel {
	// 			.carousel-item {
	// 				padding: 0;
	// 			}
	// 		}
	// 		.swiper-dots {
	// 			left: 45rpx;
	// 			bottom: 40rpx;
	// 		}
	// 	}
	// }

	page {
		background: #f7f8f7;
	}

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

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

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

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426rpx;
			transition: 0.4s;
		}

		.carousel {
			width: 100%;
			height: 240rpx;

			.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: 30rpx 22rpx;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
		}

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

	// 中间广告图片
	.ad-1 {
		width: 100%;
		height: 210rpx;
		padding: 10rpx 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;
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 92rpx;
		padding: 6rpx 30rpx 8rpx;

		image {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.tit-box {
			@extend %font-title-box;
		}

		.tit {
			@extend %font-title;
		}

		.iconenter {
			font-size: $font-lg + 2rpx;
			color: $font-color-light;
		}

		.f-left-icon {
			@extend %f-left-icon;
		}

		.iconfont {
			font-size: $font-sm - 2rpx;
		}
	}

	// 会员升级礼包
	.uservip {
		border-radius: $border-radius-sm;
		background-color: white;
		box-shadow: $box-shadow;
		height: 300rpx;
		margin: 0 30rpx;

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

		.detail {
			position: relative;
			padding: 20rpx;
			height: 100%;

			.icon {
				@extend %icon;
			}

			.price-box {
				position: absolute;
				bottom: 20rpx;
				width: calc(100% - 40rpx);

				.price {
					font-size: $font-lg + 2rpx;
					font-weight: bold;
					color: $font-color-base;
				}

				.text {
					color: $color-gray;
					font-size: $font-sm;
				}
			}

			.title {
				font-size: $font-lg;
				font-weight: bold;
			}
		}
	}

	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;

		.guess-item {
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 48%;
			margin-bottom: 4%;
			border-radius: $border-radius-sm;
			background-color: white;
			box-shadow: $box-shadow;

			&:nth-child(2n + 1) {
				margin-right: 4%;
			}
		}

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

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

		.title {
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: bold;
			line-height: 80rpx;
		}

		.price {
			font-size: $font-lg;
			color: $font-color-base;
			font-weight: bold;
			line-height: 1;
			line-height: 80rpx;
		}

		.icon {
			@extend %icon;
		}

		.detail {
			line-height: 1;
		}

		.tip {
			color: white;
			background-color: $color-yellow;
			line-height: 1.5;
			font-size: $font-sm;
			padding-left: 20rpx;
		}
	}

	// 推荐
	.recommend {
		width: 95%;
		height: 155rpx;
		margin: 0rpx auto;
		padding-top: 30rpx;
		font-size: 26rpx;
		text-align: center;
		color: #333333;
		align-items: flex-start;

		.recommend_list {
			width: 33%;
		}

		.re_title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.re_name {
			color: #999999;
			padding-top: 10rpx;
		}

		.selected_icon {
			width: 25rpx;
			height: 10rpx;
			margin: 0px auto;
			display: none;

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

		.active {
			display: block;
		}

		.active_color {
			color: #dc4d46 !important;
		}
	}

	// 列表
	.list-box-h {
		height: 1550rpx;
	}

	// 优惠券
	.coupon-list {
		display: inline-block;
	}

	.row {
		border-radius: 15rpx;
		margin: 25rpx;
		height: 155rpx;
		// width: 552rpx;
		overflow: hidden;
		background-color: #ffffff;
		padding-right: 25rpx;

		.list-interval {
			border: 1px dashed $border-color-light;
			height: 100%;

			.top,
			.bottom {
				border-radius: 100rpx;
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				background-color: $page-color-base;
				right: -15rpx;
			}

			.top {
				top: -18rpx;
			}

			.bottom {
				bottom: -18rpx;
			}
		}

		.list-money {
			height: 100%;
			min-width: 155rpx;
			text-align: center;

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

			.list-money-text {
				flex-grow: 1;
				padding: 0 25rpx;

				.tit {
					text-align: center;
					padding: 15rpx 0rpx;
					font-size: 55rpx;
					color: $color-red;
					font-weight: bold;

					&.noAction {
						color: $font-color-light;
					}
				}

				.price {
					padding-bottom: 25rpx;
					color: $font-color-light;
				}
			}
		}

		.row_list_right {
			// flex-grow: 1;
			min-width: 200rpx;
			padding-left: 25rpx;
			line-height: 1;

			.right_time {
				padding: 10rpx 0rpx;
				color: $font-color-light;
				font-size: $font-sm;
			}

			.right_top {
				margin: 15rpx 0;

				.right_name {
					font-size: $font-base;
					color: #bc253a;
					font-weight: bold;
				}

				.right_title {
					font-size: $font-base;
					color: $font-base;
					font-weight: bold;

					&.noAction {
						color: $font-color-light;
					}
				}
			}
		}

		.right_use {
			margin: 15rpx 0;
			padding: 10rpx;
			width: 160rpx;
			text-align: center;
			color: #fff;
			background-color: #bc253a;
			border-radius: 50rpx;
			font-size: $font-sm;

			&.noAction {
				background-color: $font-color-light;
			}
		}

		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #000;
				font-weight: bold;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #E60012;
				}
			}
		}
	}

	.nav-swiper {
		// background-color: #bfa;
	}

	.top-swiper {
		position: relative;

		.banner-swiper {
			width: 750rpx;
			height: 390rpx;

			.swiper-img {
				display: block;
				width: 750rpx;
				height: 390rpx;
			}

			swiper-item {
				width: 750rpx;
				height: 390rpx;

			}

		}

		.input-box {
			// position: fixed;
			// top: 0;
			// left: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 25rpx;
			// background-color: #ffffff;
			z-index: 999;
			height: 44px;

			.iconsearch {
				font-size: 50rpx;
			}

			.input-content {
				border-radius: 99rpx;
				flex-grow: 1;
				padding: 10rpx 30rpx;
				background-color: rgba(255, 255, 255, 0.7);

				.input {
					flex-grow: 1;

					input {
						font-size: $font-lg;
					}
				}
			}

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

	.zd-wrap {
		width: 750rpx;
		height: 203rpx;
		background: #FFFFFF;
		margin: 20rpx auto;
		padding: 30rpx 28rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;

		.zd-tip {
			color: #FF0018;
		}
	}

	.hot {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.art-time {
		display: inline-block;
		font-size: 24rpx;
		font-weight: 500;
		color: #7F8699;

		text {
			margin-right: 10rpx;
		}
	}

	.art-list {
		background-color: #fff;
		width: 750rpx;
		font-size: 31rpx;
		font-weight: 500;
		color: #323232;
		// font-weight: bold;
	}

	.art-item {
		width: 691rpx;
		border-bottom: #E1E1E1 1px solid;
		margin: auto;
	}

	.art-item-zero {
		height: 153rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20rpx 0;
		border-bottom: #E1E1E1 1px solid;
	}

	.art-item-one {
		height: 195rpx;
		margin: auto;
		padding: 30rpx 0 20rpx;

		.art-left {
			height: 100%;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			padding-right: 40rpx;
		}

		.art-right {
			width: 227rpx;
			height: 145rpx;
			border-radius: 10rpx;
			flex-shrink: 0;

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

	.art-item-three {
		height: 345rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx 0;

		.art-img-list {
			width: 100%;
			height: 145rpx;

			// background-color: #bfa;
			// border-radius: 10px;
			image {
				width: 220rpx;
				height: 145rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;

				&:last-child {
					margin-right: 0;
				}
			}

		}
	}

	// 头部时间段样式
	.class-box {
		white-space: nowrap;
		height: 40px;
		position: relative;
		background-color: #fff;

		.item {
			text-align: center;
			display: inline-block;
			color: $font-color-base;
			height: 100%;
			background-color: #ffffff;
			line-height: 1;

			.status {
				font-size: 30rpx;
				margin: 0 auto;
				width: 60px;
				height: 100%;
				line-height: 40px;

				&.action {
					color: #000;
					font-weight: bold;
					position: relative;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 5px;
						transform: translateX(-50%);
						width: 33px;
						height: 0;
						border-bottom: 2px solid #E60012;
					}
				}
			}
		}
	}
</style>