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-wrap">
			<view class='flex justify-between'>
				<view class='title'>工厂价格</view>
				<view style='color:#B2B3BB;' @click='more("/pages/sale/plant")'>更多</view>
			</view>
			<scroll-view :scroll-x="true">
				<view class='guess-section-wrap-content'>
					<view class='guess-section-wrap-item clearfix' v-for='item in plantList'>
						<view class='factory'>{{item.factory}}</view>
						<view class='wrap'>{{item.city}} {{item.factoryType}}</view>
						<view class='price'>
							<text class='currectprice'>{{item.price}}</text>
							较昨日
							<image v-if='item.comparePrice>0' style="width:7.5px;height:9px;" src='../../static/img/homepage/shangsheng.png'></image>
							<image v-if='item.comparePrice<0'  style="width:7.5px;height:9px;" src='../../static/img/homepage/xiajiang.png'></image>
							<text v-if='item.comparePrice>0' class='yesterday up'>{{item.comparePrice}}</text>
							<text v-if='item.comparePrice<0' class='yesterday down'>{{-item.comparePrice}}</text>
							<text v-if='item.comparePrice==0' class='yesterday'>-</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="guess-section-wrap">
			<view class='flex justify-between'>
				<view class='title'>港口价格</view>
				<view style='color:#B2B3BB;'  @click='more("/pages/sale/portprice")'>更多</view>
			</view>
			
			<scroll-view :scroll-x="true">
				<view class='guess-section-wrap-content port'>
					<view class='guess-section-wrap-item clearfix' v-for='item in portList'>
						<view class='factory'>{{item.port}}</view>
						<view class='wrap'>{{item.goodsName}}</view>
						<view class='price'>
							<text class='currectprice'>{{item.price}}</text>
							较昨日
							<image v-if='item.comparePrice>0' style="width:7.5px;height:9px;" src='../../static/img/homepage/shangsheng.png'></image>
							<image v-if='item.comparePrice<0'  style="width:7.5px;height:9px;" src='../../static/img/homepage/xiajiang.png'></image>
							<text v-if='item.comparePrice>0' class='yesterday up'>{{item.comparePrice}}</text>
							<text v-if='item.comparePrice<0' class='yesterday down'>{{-item.comparePrice}}</text>
							<text v-if='item.comparePrice==0' class='yesterday'>-</text>
						</view>
						<view style='color:#B2B3BB;' class='flex'>
							<view style='margin-right:10px;'>
								<image style='width:11px;height:11px;' src='../../static/img/homepage/water@3x.png'></image>
								<={{item.waterContent}}
							</view>
							<view>
								<image  style='width:11px;height:11px;' src='../../static/img/homepage/unitweight@3x.png'></image>
							>={{item.bulkDensity}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="guess-section-wrap1">
			<view style='padding:15px;' class='flex justify-between'>
				<view class='title'>行业新闻</view>
				<view style='color:#B2B3BB;' @click="more('/pages/sale/newsinfo')">更多</view>
			</view>
			<view style='border-bottom:1px solid #EEEEEE;' class='guess-section-wrap-content1'>
				<view style='border-bottom:1px solid #eee;padding:15px;' class='flex justify-between'  v-for='(item, index) in newsInfo' :key="index" @click="navToDetailPage(item.id)">
					<view>
						<view style='font-size:16px;height:54px;'>{{item.title}}</view>
						<view style='color:#B2B3BB;font-size:12px;'><text style='margin-right:5px;'>{{item.from}}</text>{{item.gmtUpdate}}</view>
					</view>
					<view><image style='width:100px;height:72px;border-radius:5px;' :src='item.titleImg'></image></view>
				</view>
				
			</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: [],
				plantList:[],
				portList:[],
				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: {
			more(url){
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			
			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: '正在加载',
				})
				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: '正在加载',
				})
				// 工厂价格
				that.$api.request('news', 'getFactoryPriceInfo',{
					category:this.category,
					page: 1,
					limit:2
				}, 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
					that.plantList = data
					uni.hideLoading()
				})
				// 港口价格
				that.$api.request('news', 'getPortPriceInfo',{
					category:this.category,
					page: 1,
					limit:2
				}, 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
					that.portList = data
					uni.hideLoading()
				})
				// 新闻内容
				that.$api.request('news', 'getNewsInfo',{
					category:2,
					page: 1,
					limit:10
				}, 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
					that.newsInfo = data
					uni.hideLoading()
				})
				uni.showLoading({
					title: '正在加载',
				})
				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: '正在加载',
				})
				that.$api.request('news', 'getNewsInfo', {
					category:2,
					page: 1,
					limit:10
				},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
					that.newsInfo = data
					that.isLoadMore=false
					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;
	}
	.currectprice{
		color:rgba(253, 113, 79, 1);
		font-size:18px;
		font-weight:600;
		vertical-align: middle;
		margin-right:10px;
	}
	.yesterday{
		font-size:14px;
		font-weight:600;
		vertical-align: middle;
	}
	.yesterday.up{
		color:rgba(253, 113, 79, 1);
	}
	.yesterday.down{
		color:#22C572;
	}
	.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-wrap {
		padding:15px;
		margin:10px 5px;
		border-radius:5px;
		background:#fff;
		overflow:hidden;
	}
	.guess-section-wrap1 {
		margin:10px 5px;
		border-radius:5px;
		background:#fff;
		overflow:hidden;
		height:366px;
	}
	.guess-section-wrap-content{
		width:1500px;
		// display:flex;
	}
	.guess-section-wrap-content.port{
		width:3000px;
	}
	.guess-section-wrap-item{
		float:left;
		width:40vw;
		background:#F9F9FA;
		padding:10px;
		margin:10px;
		border-radius:3px;
		// width:50%;
	}
	.guess-section-wrap-item:first-child{
		// margin-left:2px;
	}
	.clearfix:after{
		content:"";
		display:block;
		clear:both;
	}
	.guess-section-wrap .price{
		color:#B2B3BB;
	}
	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>