yiliangyiyun-app/pages/sale/information.vue

<template name="sale">
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<!-- <view class="mp-search-box">
			<input @click="naviageToPage('/pages/product/search')" class="ser-input" type="text" value="输入关键字搜索" disabled />
		</view> -->
		<!-- #endif -->
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper class="screen-swiper header-swiper" ::class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="3000" duration="500" @change="swiperChange" indicator-color="#8799a3"
					 indicator-active-color="#0081ff">
						<swiper-item class="swiper-item" v-for="(item,index) in carouselList" :key="index" :class="cardCur==index?'text-white':''" @click="naviageToPage(item.url)">
							<image :src="item.imgUrl"></image>
						<!-- 	<view style='position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);'>11111</view> -->
						</swiper-item>
					</swiper>
			<!-- <view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view> -->
		</view> 
		<swiper-up :list="infoList" ></swiper-up>
		<scroll-view style='margin-top:12px;padding:0 20px;' scroll-x class="nav">
			<view class="flex text-center">
				<view style='position:relative;' class="cu-item flex-sub" :class="item.value==TabCur?'text-white':''" v-for="item in categoryList"@tap="tabSelect" :data-id="item.value">
					<image v-if='item.value==TabCur' style='width:100%;height:100%;position: absolute;z-index:1;left:0;' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/bg.png'></image>
					<text style='position:relative;z-index:2;'>{{item.label}}</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="guess-section" v-if='TabCur==0'>
			<view class="cu-card article no-card" style='width: 100%;'>
				<view class="cu-item shadow factoryItem factorytitle flex justify-between align-center">
					<view style='flex:1;'>工厂</view>
					<view style='flex:1;'>价格</view>
					<view style='flex:1;'>较昨日</view>
				</view>
			</view>
			<view
				v-for="(item, index) in newsInfo" :key="index"
				class="guess-item">
				<view class="cu-card article no-card"  >
					<view class="cu-item shadow factoryItem flex justify-between align-center">
						<view style='flex:1;'>
							<view class='factory'>{{item.factory}}</view>
							<view class='wrap'>{{item.city}} {{item.factoryType}}</view>
						</view>
						<view style='flex:1;' class='price'>{{item.price}}</view>
						<view style='flex:1;' class='positive' v-if='item.comparePrice>0'>{{item.comparePrice}}<image class='up' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/up.png'></image></view>
						<view style='flex:1;' class='negative' v-if='item.comparePrice<0'>{{-item.comparePrice}}<image class='down' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/decline.png'></image></view>
						<view style='flex:1;font-weight:900;' v-if='item.comparePrice==0'>-</view>
					</view>
				</view>
			</view>
			<view v-show="isLoadMore">
			    <uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
		
		<view class="guess-section" v-if='TabCur==1'>
			<view class="cu-card article no-card" style='width: 100%;'>
				<view class="cu-item shadow factoryItem flex justify-between align-center">
					<view style='flex:1;'>港口</view>
					<view style='flex:1;'>价格</view>
					<view style='flex:1;'>较昨日</view>
				</view>
			</view>
			<view
				v-for="(item, index) in newsInfo" :key="index"
				class="guess-item"
			>
			<view class="cu-card article no-card" >
				<view class="cu-item shadow factoryItem flex justify-between align-center">
					<view style='flex:1;'><view class='factory'>{{item.port}}</view><view class='wrap'>{{item.goodsName}}</view></view>
					<view style='flex:1;' >
						<view class='price'>{{item.price}}</view>
						<view class='wrap'>
							<text class="cu-tag radius line-blue text-water">{{item.waterContent}}</text>
							<text class="cu-tag radius line-blue text-bluk">{{item.bulkDensity}}</text>
						</view>
						</view>
					<view style='flex:1;' class='positive' v-if='item.comparePrice>0'>{{item.comparePrice}}<image class='up' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/up.png'></image></view>
					<view style='flex:1;' class='negative' v-if='item.comparePrice<0'>{{-item.comparePrice}}<image class='down' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/decline.png'></image></view>
					<view style='flex:1;font-weight:900;' v-if='item.comparePrice==0'>-</view>
				</view>
			</view>
			</view>
			<view v-show="isLoadMore">
			    <uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
		
		<view class="guess-section" v-if='TabCur==2'>
			<view 
				v-for="(item, index) in newsInfo" :key="index"
				class="guess-item"
				@click="navToDetailPage(item.id)"
			>
					<view class="content" style='padding:15rpx 30rpx;display: grid;grid-template-columns: 70% 30%; grid-column-gap: 10px;'>
						<!-- <view class="desc">
							<view class="title">
								<view class="text-cut" style="text-align: left;">{{item.title}}</view>
							</view>
							<view style="margin-bottom: 30upx;text-align:left;">
								<view class="cu-tag line-green light radius">{{item.gmtUpdate}}</view>
								<view class="cu-tag line-blue light radius">{{item.from}}</view>
							</view>
						</view>
						<image style='width:200rpx;height:120rpx;flex:1;' :src="item.titleImg"
						 mode="aspectFill"></image> -->
						 <view class="gird-left">
							 <view class="title">
							 	<view class="text-cut" style="text-align: left;">{{item.title}}</view>
							 </view>
							 <view style="margin-bottom: 30upx;text-align:left;margin-top: 10px;">
							 	<view style='color:#2FBA23;' class="cu-tag line-green light radius">{{item.gmtUpdate}}</view>
							 	<view style='color:#0C6EBA;' class="cu-tag line-blue light radius">{{item.from}}</view>
							 </view>
						 </view>
						 <view class="gird-right">
							 <image style='width:200rpx;height:120rpx;flex:1;border-radius: 3px;' :src="item.titleImg"
							  mode="aspectFill"></image>
						 </view>
			</view>
			</view>
			<view v-show="isLoadMore">
			    <uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import { formatDate } from '@/common/date.js';
    import dragButton from "@/components/drag-button/drag-button.vue";
	import swiperUp from "@/components/swiperup.vue";
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
		    dragButton,
			swiperUp
		},
		name: "sale",
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				windowSpuList: [],
				categoryPickList: [],
				categoryButtomList: [],
				salesTop: [],
				saleInfo: [],
				portInfo: [],
				banner: undefined,
				isVip: false,
				pages: 1, //页数
				limit: 10, //每次取条目数
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				showTran:true,
				list: [],
				scrollTop: 0,
				cardCur: 0,
		        dotStyle: false,
				newsInfo: [],
				categoryList:[],
				pages:1,//页数
				limit:10 ,//每次取条目数
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				TabCur: 0,
				category:0,
				current: 0,
				infoList1:[]
			};
		},
		onReady() {
		},
		onShow() {
			uni.showTabBar()
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'more'
			this.loadData()
		},
		onLoad(options) {
			var that = this
			var infoList = [];
			uni.request({
			    url: "https://hq.sinajs.cn/list=C0,C2109,C2111,C2201,C2203,C2205,C2207,A0,A2109,A2111,A2201,A2203,A2205,A2207",
			    // url: "https://hq.sinajs.cn/list=C2109",
			    header: {
			        'content-type': 'application/x-www-form-urlencoded'
			    },
			    success: function(result) {
			        // resolve调用后，即可传递到调用方使用then或者async+await同步方式进行处理逻辑
					var tmp = result.data.split('"')
					for(var i = 1; i<tmp.length;i=i+2){
						var list = tmp[i].split(",")
						var data = {
							goodsName:list[0],
							newPrice:list[6],
							openPrice:list[2]
						}
						if(data.goodsName){
							infoList.push(data)
						}
					}
					let name = 'infoList';
					let value = infoList;
					that.$store.commit('$uStore', {
						name,
						value
					});
					// console.log("infoList",infoList)
			    },
			    fail: function(e) {
			        console.log('error in...')
			        // reject调用后，即可传递到调用方使用catch或者async+await同步方式进行处理逻辑
			        reject(e)
			    },
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.pages += 1
				this.getIndexSaleData()
			}
		},
		onPullDownRefresh() {
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			hangqing() {
				uni.navigateTo({
					url: `/pageB/news/news`
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.category = this.TabCur
				this.pages = 1
				this.loadData()
			},
			 //回到顶部
			  goTop(e) {  // 一键回到顶部
			  console.log(e)
			    if (wx.pageScrollTo) {
			      wx.pageScrollTo({
			        scrollTop: 0
			      })
			    } else {
			      wx.showModal({
			        title: '提示',
			        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			      })
			    }
			  },
			async loadData() {
				console.log("sale loadData pages " + this.pages)
				const that = this
				// 新闻类型
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('dict', 'getDictDataList',{
					dictType: "news_type"
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					that.categoryList = data
					uni.hideLoading()
				})
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				var _gp=''
                var _mt=''
				if(this.TabCur==0){
					_gp='news'
					_mt='getFactoryPriceInfo'
				}else if(this.TabCur==1){
					_gp='news'
					_mt='getPortPriceInfo'
				}else if(this.TabCur==2){
					_gp='news'
					_mt='getNewsInfo'
				}
				// 新闻内容
				that.$api.request(_gp, _mt,{
					category:this.category,
					page: this.pages,
					limit:this.limit
				}, failres => {
					that.$api.msg(failres.errmsg)
					this.isLoadMore = false
					this.loadStatus = 'nomore'
					if(this.pages>1){this.pages=1}
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					for(var i =0;i<res.data.length;i++){
						res.data[i].gmtUpdate=formatDate(Date.parse(res.data[i].gmtUpdate))
					}
					that.newsInfo = data
					uni.hideLoading()
				})
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('integral', 'getIndexData', failres => {
					that.$api.msg(failres.errmsg)
					this.isLoadMore = false
					this.loadStatus = 'nomore'
					if (this.pages > 1) {
						this.pages = 1
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}).then(res => {
					let data = res.data
					//橱窗
					that.windowSpuList = data.windowRecommend
					//轮播
					data.advertisement.t1.forEach(item => {
						if (!item.color) {
							item.color = 'rgb(205, 215, 218)'
						}
					})
					that.carouselList = data.advertisement.t1
					that.swiperLength = data.advertisement.t1.length
					that.titleNViewBackground = data.advertisement.t1[0].color
					//分类精选
					if (data.advertisement.t2) {
						that.categoryPickList = data.advertisement.t2
					}
					//横幅
					if (data.advertisement.t3 && data.advertisement.t3.length > 0) {
						that.banner = data.advertisement.t3[0]
					}
					//热销
					if (data.salesTop) {
						that.salesTop = data.salesTop
					}
					//销售信息
					if (data.saleInfo) {
						that.saleInfo = data.saleInfo
					}
					//价格简报
					if (data.portInfo) {
						that.portInfo = data.portInfo
						console.log("portInfo",that.portInfo)
					}
					//分类5Buttom
					if (data.advertisement.t4) {
						that.categoryButtomList = data.advertisement.t4
					}
					that.showTran = data.showTran
					that.list = data.message
					uni.setStorageSync("message", data.message);
					uni.setStorageSync("task", data.task);
					uni.setStorageSync('showTran', data.showTran);
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
				
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				// this.titleNViewBackground = this.carouselList[index].color;
			},
			//详情
			navToDetailPage(item) {
				let id = item;
				uni.navigateTo({
					url: `/pageB/news/news_detail?id=${id}`
				})
			},
			naviageToPage(page) {
				uni.navigateTo({
					url: page,
					fail() {
						uni.switchTab({
							url: page
						})
					}
				})
			},
			getIndexSaleData() {
				// const that = this
				// var pages = that.pages
				// var limit = that.limit
				// uni.showLoading({
				// 	title: '正在加载'
				// })
				// that.$api.request('integral', 'getIndexSaleData', {
				// 	page: pages,
				// 	limit: limit
				// }, failres => {
				// 	that.$api.msg(failres.errmsg)
				// 	that.isLoadMore = false
				// 	that.loadStatus = 'nomore'
				// 	if (that.pages > 1) {
				// 		that.pages -= 1
				// 	}
				// 	uni.hideLoading()
				// }).then(res => {
				// 	let data = res.data
				// 	//销售信息
				// 	if (data.saleInfo.length > 0 ) {
				// 		that.saleInfo = that.saleInfo.concat(data.saleInfo)
				// 		that.isLoadMore = false
				// 	} else {
				// 		if (that.pages > 1) {
				// 			that.pages -= 1
				// 		}
				// 		that.isLoadMore = true
				// 		that.loadStatus = 'nomore'
				// 	}
				// 	if(data.saleInfo.length < that.limit){
				// 		if (that.pages > 1) {
				// 			that.pages -= 1
				// 		}
				// 		that.isLoadMore = true
				// 		that.loadStatus = 'nomore'
				// 	}
				// 	uni.hideLoading()
				// })
				const that = this
				var pages=that.pages
				var limit=that.limit
							   
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('news', 'getNewsInfo', {
					category:this.category,
					page: pages,
					limit:limit
				},failres => {
					that.$api.msg(failres.errmsg)
					that.isLoadMore=false
					that.loadStatus = 'nomore'
					if(that.pages>1){that.pages-=1}
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					if(data.length > 0){
						for(var k =0;k<data.length;k++){
							data[k].gmtUpdate=formatDate(Date.parse(data[k].gmtUpdate))
						}
						that.newsInfo = that.newsInfo.concat(data)
						that.isLoadMore=false
					}
					else{
						if(that.pages>1){that.pages-=1}						
						that.isLoadMore=true
						that.loadStatus = 'nomore'
					}
					uni.hideLoading()
				})
			}

		},

		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: '/pageA/product/search'
			})
		},
		//点击导航栏 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
	}
</script>

<style lang="scss" scoped>
	.container{
		margin: 10rpx 10rpx 10rpx 10rpx;
	}
	.cu-tag.badge {
	    right: 26rpx;
	}
	.up,.down{
		width: 8px;
		height: 5px;
		vertical-align: middle;
		margin-left: 2px;
	}
	.gird-left,.gird-right{
		
	}
	.cu-tag.radius[class*="line"]::after {
    border-radius: 66rpx;
	}
	.goTop{
	  height: 32px;
	  width: 32px;
	  position: fixed;
	  bottom: 200rpx;
	  right: 30rpx;
	  border-radius: 50%;
	}
	.goTop image{
		width:32px;
		height:32px;
	}
	.flex{
		display:flex;
	}
	.text-white{
		color:#fff;
	}
	.cu-card{
		border-bottom:1rpx solid #f8f8f8;
		text-align: center;
	}
	.factorytitle view{
		border-right: 1px solid #F8F8F8;
	}
	.factorytitle view:last-child{
		border-right: 1px solid transparent;
	}
	.factory{
		font-size:26rpx;
		font-weight:900;
	}
	.positive{
		color:#E63113;
		font-size:26rpx;
		font-weight:900;
	}
	.negative{
		color:#229453;
		font-size:26rpx;
		font-weight:900;
	}
	.wrap{
		font-size:20rpx;
		color: rgba(0,0,0,0.5);
	}
	.align-center{
		align-items: center;
	}
	.flex-direction-row{
		flex-direction:row;
	}
	.factoryItem{
		padding: 20rpx 0;
	}
	/* #ifdef MP */
	.mp-search-box {
		// position:relative;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		background: rgba(255, 170, 0, 0.6);

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 10px;
			background: rgba(255, 255, 255, .6);
		}
	}
	.desc{
	    width:73%;
		margin-right:2%;
	}
    .justify-between{
		justify-content: space-between;
	}
	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 50%;
				bottom: 5upx;
				transform: translateX(-50%);
			}
		}
	}

	/* #endif */
	.cuIcon-notification::before{
		color:#f37b1;
	}
	.cu-card.article>.cu-item .content>image {
	    height: 3.4em;
		margin-right: 0rpx;
		margin-top: 24rpx;
	}
	.screen-swiper.price-swiper{
		height:70rpx;
		min-height: 70rpx;
		background: #fff;
		margin-bottom: 10px;
	}
	.swiper-item{
		border-radius: 5%;
	}
	.guess-section {
		margin-bottom: 120rpx;
		margin-top:20rpx;
	}
	.guess-section .price{
		color:#000;
		font-size: 34rpx;
	}
	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}
	.header-swiper{
		min-height: 300rpx;
	}

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

		.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: 426upx;
			transition: .4s;
		}
	}

	.tab-scroll-view {
		width: 750rpx;
		height: 300rpx;
		flex-direction: row;
		white-space: nowrap;

		.tab-item {
			display: inline-block;
			width: 350rpx;
			height: 250rpx;
			font-size: 16px;
			-moz-box-shadow: 2px 2px 5px #ccc;
			-webkit-box-shadow: 2px 2px 5px #ccc;
			box-shadow: 2px 2px 5px #ccc;
			color: #555;
			margin: 10rpx;
		}
	}

	.carousel {
		width: 100%;
		height: 350upx;

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

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

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		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: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

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

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

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

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 68upx;
			height: 68upx;
			margin-bottom: 14upx;
			// border-radius: 50%;
			opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
		.grid_icon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
	}

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

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


	

	
	/* 销售信息 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;
		padding-bottom: 100upx;
		.guess-item {
			padding-bottom: 20upx;
			border-bottom: 1px solid #ccc;
		}
		.title {
			font-size: 28upx;
			color: $font-color-dark;
			font-weight:bold;
			height: 50upx;
			line-height: 50upx;
			flex:2.5;
		}
		.title-tip {
			flex:1;
		}
		.price-box {
			display: flex;
			align-items: baseline;
			height: 70upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}
	
		.price {
			font-size: $font-lg + 2upx;
		}
	
		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}
	
		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}
	
		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;
	
			view {
				flex: 1;
			}
		}
	}
</style>