yiliangyiyun-app/pages/sale/information.vue

<template name="sale">
	<view class="container">
		<view :style="statusBarHeight" class="status_bar">
		</view>
		<!-- 小程序头部兼容 -->
		<!-- #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="5000" @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>
		<view class="guess-section-wrap">
			<view class='flex justify-between'>
				<view class='title Medium'>工厂价格</view>
				<view class='Regular' style='color:#B2B3BB;' @click='more("/pages/sale/plant")'>更多</view>
			</view>
			<swiper class="screen-swiper header-swiper" :autoplay="true" interval="6000" duration="500" :circular="true"
				:acceleration="true" style="min-height: 700rpx;">
				<swiper-item class="" v-for="(item1,index) in factoryPriceData.list" :key="index">
					<view class=' guess-section-wrap-item clearfix' v-for='(item,index1) in item1' :key="index1">
						<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>
				</swiper-item>
			</swiper>
		</view>
		<view class="guess-section-wrap">
			<view class='flex justify-between'>
				<view class='title Medium'>港口价格</view>
				<view class='Regular' style='color:#B2B3BB;' @click='more("/pages/sale/portprice")'>更多</view>
			</view>
			<!-- <uni-notice-bar scrollable="true" single="true" background-color="white" :portList="portList" ></uni-notice-bar> -->
			<swiper class="screen-swiper header-swiper-port" :autoplay="true" interval="0" duration="60000"
				:circular="true" :acceleration="true">
				<swiper-item class="" v-for="(item,index) in portList" :key="index">
					<view class='guess-section-wrap-item clearfix'>
						<!-- <view class='guess-section-wrap-item clearfix' v-for='(item,index1) in item1' :key="index1"> -->
						<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 class="port-number-style ">
								<image style='width:11px;height:11px;' src='../../static/img/homepage/water@3x.png'>
								</image>
								<={{item.waterContent}} </view>
									<view class="port-number-style">
										<image style='width:11px;height:11px;'
											src='../../static/img/homepage/unitweight@3x.png'></image>
										>={{item.bulkDensity}}
									</view>
							</view>
						</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="guess-section-wrap1">
			<view style='padding:15px;' class='flex justify-between'>
				<view class='title Medium'>行业新闻</view>
				<view class='Regular' 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 class="list-row-titel Regular">{{item.title}}</view>
						<view style='color:#B2B3BB;font-size:12px;' class="Regular"><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>
		<u-back-top :scroll-top="scrollTop" mode="circle" icon="arrow-upward"></u-back-top>
	</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: [],
				statusBarHeight: "height:",
				factoryPriceData: {},
				portPriceData: {}
			};
		},
		onShow() {
			
			uni.hideKeyboard()
			uni.showTabBar()
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'more'
			this.loadData()
			var userInfo = uni.getStorageSync("userInfo")
			var that = this
			
			this.$api.doRequest('get', '/notice/query/noticeNumber').then(res => {
				console.log("noticeNumber",res)
				if (res.data.data) {
					let name = 'myTip';
					let value = res.data.data.task;
					that.$store.commit('$uStore', {
						name,
						value
					});
					if(value != 0&&value){
						uni.setTabBarBadge({
							index:4,
							text:value+""
						})
					}
					name = 'taskTip';
					value = res.data.data.task;
					that.$store.commit('$uStore', {
						name,
						value
					});
					// name = 'contractTip';
					// value = res.data.data.contractTip;
					// that.$store.commit('$uStore', {
					// 	name,
					// 	value
					// });
				}
			})
		},
		onLoad(options) {
			const value = uni.getStorageSync('launchFlag');
			if (value) {
			} else {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			var that = this
			
			uni.getSystemInfo({
				success: function(res) {
					console.log("statusBarHeight", res.statusBarHeight)
					that.statusBarHeight += res.statusBarHeight + "px"; //这就是状态栏的高度
				},
			});
			
			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)
				},
			})
			uni.showTabBar()
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'more'
			this.loadData()
			var userInfo = uni.getStorageSync("userInfo")
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.pages += 1
				this.getMoreData()
			}
		},
		onPullDownRefresh() {
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			// makeportScrollData(valList) {
			// 	console.log(valList)
			// 	let _rowCount = valList.length;
			// 	let _pageSize = 2
			// 	let _newArray = []
			// 	if (_rowCount == null || _rowCount == "") {
			// 		this.portPriceData.totalPage = 0;
			// 	} else {
			// 		if (_pageSize != 0 && _rowCount % _pageSize == 0) {
			// 			this.portPriceData.totalPage = parseInt(_rowCount / _pageSize)
			// 		}
			// 		if (_pageSize != 0 && _rowCount % _pageSize != 0) {
			// 			this.portPriceData.totalPage = parseInt(_rowCount / _pageSize) + 1;
			// 		}
			// 	}
			// 	for (let i = 0; i < valList.length; i += 2) {
			// 		_newArray.push(valList.slice(i, i + 2))
			// 	}
			// 	this.portPriceData.list = _newArray
			// },
			makeScrollData(valList, size) {
				console.log(valList)
				let _rowCount = valList.length;
				let _pageSize = size
				let _newArray = []
				if (_rowCount == null || _rowCount == "") {
					if (size == 8) {

						this.factoryPriceData.totalPage = 0;
					} else {
						this.portPriceData.totalPage = 0;
					}
				} else {
					if (_pageSize != 0 && _rowCount % _pageSize == 0) {
						if (size == 8) {
							this.factoryPriceData.totalPage = parseInt(_rowCount / _pageSize)
						} else {
							this.portPriceData.totalPage = parseInt(_rowCount / _pageSize)
						}
					}
					if (_pageSize != 0 && _rowCount % _pageSize != 0) {
						if (size == 8) {

							this.factoryPriceData.totalPage = parseInt(_rowCount / _pageSize) + 1;
						} else {
							this.portPriceData.totalPage = parseInt(_rowCount / _pageSize) + 1;
						}
					}
				}
				for (let i = 0; i < valList.length; i += size) {
					_newArray.push(valList.slice(i, i + size))
				}
				if (size == 8) {
					this.factoryPriceData.list = _newArray
				} else {
					this.portPriceData.list = _newArray
				}

			},
			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()
			},
			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()
				})
				// 工厂价格
				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
					that.makeScrollData(that.plantList, 8)
					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
					that.makeScrollData(that.portList, 2)
					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
					for(var k =0;k<data.length;k++){
						if(data[k].title.length > 20){
							data[k].title = data[k].title.substring(0,20) + "..."
						}
						let _date = new Date(data[k].gmtUpdate)
						data[k].gmtUpdate = this.$u.timeFormat(_date.getTime(), 'mm-dd hh:MM');
					}
					that.newsInfo = data
					uni.hideLoading()
				})
				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
						})
					}
				})
			},
			getMoreData() {
				const that = this
				var pages=that.pages
				var limit=that.limit
							   
				// uni.showLoading({
				// 	title: '正在加载'
				// })
				that.$api.request('news', 'getNewsInfo', {
					category:2,
					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++){
							if(data[k].title.length > 20){
								data[k].title = data[k].title.substring(0,20) + "..."
							}
							let _date = new Date(data[k].gmtUpdate)
							data[k].gmtUpdate = this.$u.timeFormat(_date.getTime(), 'mm-dd hh:MM');
						}
						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;
	}
	.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: 550;
		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: 38vw;
		background: #F9F9FA;
		padding: 7px;

		margin: 20rpx;
		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;
		display: flex;
		align-items: center;
	}

	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;
			}
		}

		.status_bar {
			width: 100%;
		}
	}

	.title {
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
	}

	.list-row-titel {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display:
			-webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 16px;
		height: 45px;
		padding-right: 40rpx;
		margin-bottom: 26rpx;
	}

	.header-swiper-port {
		height: 120px;
		min-height: 120px;

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

	.port-number-style {
		display: flex;
		align-items: center;
		margin-right: 14rpx;
	}
</style>