修改港口价格样式

pages/sale/portprice.vue

@@ -1,559 +1,602 @@
 <template>
 	<view>
 		<view class="guess-section">
-					<view class="cu-card article no-card" style='width: 100%;'>
-						<view class="cu-item shadow factoryItem justify-between align-center" style="display:flex;">
-							<view style='flex:1.5;color:#B2B3BB;'>港口</view>
-							<view style='flex:1;color:#B2B3BB;'>价格</view>
-							<view style='flex:1;color:#B2B3BB;'>较昨日</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-card article no-card Regular" style='width: 100%;'>
+				<view class="top-tap Regular">
+					<view class="top-tap-item">港口</view>
+					<view class="top-tap-item">价格</view>
+					<view class="top-tap-item">较昨日</view>
+				</view>
+			</view>
+			<view class="guess-list">
+				<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 justify-between align-center" style="display:flex;">
-							<view style='flex:1.5;'><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 style='margin-right:5px;'><image style='width:11px;height:11px;' src='../../static/img/homepage/water@3x.png'></image><={{item.waterContent}}</text>
-									<text><image style='width:11px;height:11px;' src='../../static/img/homepage/unitweight@3x.png'></image>>={{item.bulkDensity}}</text>
-								</view>
+							<view class="flex-item">
+								<view class='factory Regular'>{{item.port}}</view>
+								<view class='wrap Regular'>{{item.goodsName}}</view>
+							</view>
+							<view class="flex-item">
+								<view class='price NumberBold'>{{item.price}}</view>
+								<view class='wrap Regular'>
+									<text style='margin-right:5px;'>
+										<image style='width:11px;height:11px;'
+											src='../../static/img/homepage/water@3x.png'>
+										</image>
+										<={{item.waterContent}}</text>
+											<text>
+												<image style='width:11px;height:11px;'
+													src='../../static/img/homepage/unitweight@3x.png'></image>
+												>={{item.bulkDensity}}
+											</text>
 								</view>
-							<view style='flex:1;' class='positive' v-if='item.comparePrice>0'><image class='up' src='../../static/img/homepage/shangsheng.png'>{{item.comparePrice}}</image></view>
-							<view style='flex:1;' class='negative' v-if='item.comparePrice<0'><image class='down' src='../../static/img/homepage/xiajiang.png'>{{-item.comparePrice}}</image></view>
-							<view style='flex:1;font-weight:900;' v-if='item.comparePrice==0'>-</view>
+							</view>
+							<view class='flex-item positive NumberBold' v-if='item.comparePrice>0'>
+								<image class='up' src='../../static/img/homepage/shangsheng.png'>{{item.comparePrice}}
+								</image>
+							</view>
+							<view class='flex-item negative NumberBold' v-if='item.comparePrice<0'>
+								<image class='down' src='../../static/img/homepage/xiajiang.png'>{{-item.comparePrice}}
+								</image>
+							</view>
+							<view class="flex-item Regular" v-if='item.comparePrice==0'>-</view>
 						</view>
 					</view>
-					</view>
-					<view v-show="isLoadMore">
-					    <uni-load-more :status="loadStatus" ></uni-load-more>
-					</view>
 				</view>
+			</view>
+			<view v-show="isLoadMore">
+				<uni-load-more :status="loadStatus"></uni-load-more>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
 	import {
-			mapState
-		} from 'vuex';
+		mapState
+	} from 'vuex';
 	export default {
-			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)
-							}
+		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]
 						}
-						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)
-				    },
-				})
+						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()
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+
+			DotStyle(e) {
+				this.dotStyle = e.detail.value
 			},
-			onPageScroll(e) {
-				this.scrollTop = e.scrollTop;
+			cardSwiper(e) {
+				this.cardCur = e.detail.current
 			},
-			onReachBottom() { //上拉触底函数
-				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
-					this.isLoadMore = true
-					this.pages += 1
-					this.getIndexSaleData()
-				}
+			hangqing() {
+				uni.navigateTo({
+					url: `/pageB/news/news`
+				})
 			},
-			onPullDownRefresh() {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.category = this.TabCur
 				this.pages = 1
-				this.isLoadMore = false
-				this.loadStatus = 'loading'
 				this.loadData()
-				setTimeout(function () {
-					uni.stopPullDownRefresh();
-				}, 1000);
-			},
-			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() {
-					var that=this
-					// 新闻内容
-					that.$api.request('news', 'getPortPriceInfo',{
-						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
-						that.newsInfo = data
-						uni.hideLoading()
-					})
-					
-				},
-				//轮播图切换修改背景色
-				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}`
+			//回到顶部
+			goTop(e) { // 一键回到顶部
+				console.log(e)
+				if (wx.pageScrollTo) {
+					wx.pageScrollTo({
+						scrollTop: 0
 					})
-				},
-				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()
+				} else {
+					wx.showModal({
+						title: '提示',
+						content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
 					})
 				}
-	
 			},
-	
-			// #ifndef MP
-			// 标题栏input搜索框点击
-			onNavigationBarSearchInputClicked: async function(e) {
+			async loadData() {
+				var that = this
+				// 新闻内容
+				that.$api.request('news', 'getPortPriceInfo', {
+					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
+					that.newsInfo = data
+					uni.hideLoading()
+				})
+
+			},
+			//轮播图切换修改背景色
+			swiperChange(e) {
+				const index = e.detail.current;
+				this.swiperCurrent = index;
+				// this.titleNViewBackground = this.carouselList[index].color;
+			},
+			//详情
+			navToDetailPage(item) {
+				let id = item;
 				uni.navigateTo({
-					url: '/pageA/product/search'
+					url: `/pageB/news/news_detail?id=${id}`
 				})
 			},
-			//点击导航栏 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
-		}
+			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>
-	.price{
-		color:#FD714F;
+<style scoped lang="scss">
+	.price {
+		color: #FD714F;
 	}
-	.container{
-			margin: 10rpx 10rpx 10rpx 10rpx;
-		}
-		.cu-tag.badge {
-		    right: 26rpx;
-		}
-		.up,.down{
-			width: 7.5px;
-			height: 9px;
-			position:relative;
-			top:-2px;
-			vertical-align: middle;
-			margin-right: 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;
+
+	.container {
+		margin: 10rpx 10rpx 10rpx 10rpx;
+	}
+
+	.cu-tag.badge {
+		right: 26rpx;
+	}
+
+	.up,
+	.down {
+		width: 7.5px;
+		height: 9px;
+		position: relative;
+		top: -2px;
+		vertical-align: middle;
+		margin-right: 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;
+	}
+
+	.factory {
+		font-size: 28rpx;
+	}
+
+	.positive {
+		color: #FD714F;
+		font-size: 28rpx;
+	}
+
+	.negative {
+		color: #22C572;
+		font-size: 28rpx;
+	}
+
+	.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);
 		}
-		.factory{
-			font-size:26rpx;
-			font-weight:900;
-		}
-		.positive{
-			color:#FD714F;
-			font-size:26rpx;
-			font-weight:900;
-		}
-		.negative{
-			color:#22C572;
-			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;
+	}
+
+	.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;
 		}
-		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-section {
-				padding: 0;
-	
-				.titleNview-placing {
-					padding-top: 0;
-					height: 0;
-				}
-	
-				.carousel {
-					.carousel-item {
-						padding: 0;
-					}
-				}
-	
-				.swiper-dots {
-					left: 50%;
-					bottom: 5upx;
-					transform: translateX(-50%);
+
+			.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;
+	}
+
+	/* #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;
+		padding: 0;
+
+		.guess-item {
+			border-bottom: 1px solid #EEEEEE;
+			width: 100%;
 		}
-		.guess-section .price{
-			color:#FD714F;
-			font-size: 34rpx;
-			font-weight:600;
+	}
+
+	.guess-section .price {
+		color: #FD714F;
+		font-size: 34rpx;
+		font-weight: 600;
+	}
+
+	page {
+		background: #f5f5f5;
+	}
+
+	.m-t {
+		margin-top: 16upx;
+	}
+
+
+	.top-tap {
+		display: flex;
+		font-size: 27rpx;
+		padding: 20rpx 48rpx;
+		justify-content: space-between;
+
+		.top-tap-item {
+			color: #B2B3BB;
 		}
-		page {
-			background: #f5f5f5;
+
+		.top-tap-item:nth-of-type(1) {
+			width: 40%;
+			display: flex;
+			justify-content: flex-start;
 		}
-	
-		.m-t {
-			margin-top: 16upx;
+
+		;
+
+		.top-tap-item:nth-of-type(2) {
+			width: 40%;
+			display: flex;
+			justify-content: center;
 		}
-		
-		/* 销售信息 */
-		.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;
-				}
-			}
+
+		;
+
+		.top-tap-item:nth-of-type(3) {
+			width: 20%;
+			display: flex;
+			justify-content: flex-end;
 		}
+	}
+
+	.flex-item:nth-of-type(1) {
+		width: 40%;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.flex-item:nth-of-type(2) {
+		width: 40%;
+	}
+
+	.flex-item:nth-of-type(3) {
+		width: 20%;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.guess-list {
+		width: 100%;
+		padding: 0 48rpx;
+	}
 </style>