商品详情, 更新icon

common/css/common.scss

@@ -230,6 +230,11 @@ button::after{
 	}
 }
 /*富文本样式调整*/
+.product-rich-text{
+	rich-text.h4,rich-text.p,rich-text.h2{
+		padding: 0 24rpx;
+	}
+}
 .rich-text-temp {
 	rich-text.div, rich-text.h4, rich-text.p {
 		line-height: 58rpx;

common/css/iconfont.scss

@@ -4,7 +4,7 @@
 	font-family: iconfont;
 	font-weight: normal;
 	font-style: normal;
-	src: url('https://at.alicdn.com/t/font_1519039_tbr7y1bya5n.ttf') format('truetype');
+	src: url('https://at.alicdn.com/t/font_1519039_hdb13igul67.ttf') format('truetype');
 }
 .iconfont {
 	font-family: "iconfont" !important;
@@ -13,6 +13,26 @@
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
+.icon-liulanguo:before {
+  content: "\e6a8";
+}
+
+.icon-dizhi1:before {
+  content: "\e6a7";
+}
+
+.icon-shijian:before {
+  content: "\e6a6";
+}
+
+.icon-zhiding:before {
+  content: "\e6a5";
+}
+
+.icon-zixunrexian:before {
+  content: "\e6a4";
+}
+
 .icon-fenxiang1:before {
   content: "\e6a2";
 }
@@ -29,10 +49,6 @@
   content: "\e870";
 }
 
-.icon-icon-cross-squre:before {
-  content: "\e668";
-}
-
 .icon-saomafukuan-:before {
   content: "\e645";
 }
@@ -93,10 +109,6 @@
   content: "\e671";
 }
 
-.icon-dkw_jine:before {
-  content: "\e625";
-}
-
 .icon-aixin:before {
   content: "\e663";
 }
@@ -121,14 +133,6 @@
   content: "\e622";
 }
 
-.icon-yanjing_xianshi_o:before {
-  content: "\ebcc";
-}
-
-.icon-yanjing_yincang_o:before {
-  content: "\ebcd";
-}
-
 .icon-iconfonticonfontsousuo1:before {
   content: "\e62f";
 }
@@ -169,10 +173,6 @@
   content: "\e61a";
 }
 
-.icon-yunfeishuoming:before {
-  content: "\e61b";
-}
-
 .icon-shouhuodizhi:before {
   content: "\e61c";
 }
@@ -276,3 +276,4 @@
 .icon-wodebeifenx:before {
   content: "\e611";
 }
+

components/cm-module/productDetails/cm-parameter.vue

@@ -1,13 +1,37 @@
 <template name="cm-parameter">
 	<!-- 相关参数 -->
-	<view class="cm-parameter">
-		<view class="cm-parameter-main clearfix">
-			<view class="item-tabody clearfix" v-for="(item, index) in product.parametersList" :key="index" >
-				<view class="item-td">{{item.paramsName}}</view>
-				<view class="item-tr">{{item.paramsContent}}</view>
+	<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
+		<view class="tui-popup-box clearfix">
+			<view class="title">商品参数</view>
+			<view class="content">
+				<view class="content-tr">
+					<view class="content-td">品牌</view>
+					<view class="content-th">恩盛</view>
+				</view>
+				<view class="content-tr">
+					<view class="content-td">起订量</view>
+					<view class="content-th">1</view>
+				</view>
+				<view class="content-tr">
+					<view class="content-td">库存</view> 
+					<view class="content-th">9999</view>
+				</view>
+				<view class="content-tr">
+					<view class="content-td">包装规格</view>
+					<view class="content-th">台</view>
+				</view>
+				<view class="content-tr" v-for="(item, index) in product.parametersList" :key="index">
+					<view class="content-td">{{item.paramsName}}</view>
+					<view class="content-th">{{item.paramsContent}}</view>
+				</view>
 			</view>
-		</view>
-	</view>
+			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
+				<view class="tui-flex-1">
+					<view class="tui-button" @click="hidePopup()">收起</view>
+				</view>
+			</view>
+		</view>	
+	</tui-bottom-popup>		
 </template>
 
 <script>
@@ -16,6 +40,10 @@
 		props:{
 			product:{
 				type:Object,
+			},
+			popupShow:{
+				type:Boolean,
+				default:false
 			}
 		},
 		data() {
@@ -27,7 +55,9 @@
 			
 		},
 		methods:{
-			
+			hidePopup(){
+				this.$parent.popupShow = false
+			},
 		},
 		
 	}

components/cm-module/productDetails/recommend.vue

@@ -3,20 +3,9 @@
 	<view class="recommend clearfix">
 		<view class="recommend-empty" v-if="isEmpty">暂无相关推荐商品</view>
 		<view class="recommend-list" v-else>
-			<swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
-				<swiper-item v-for="(item,index) in recommendList" :key="index">
-					<view class="row-list" v-for="(pros, idx) in item" :key="idx" @click.stop="navToDetailPage(pros.id)">
-						<view class="list-image"><image :src="pros.image" mode=""></image></view>
-						<view class="list-name">{{pros.name}}</view>
-					</view>
-				</swiper-item>
-			</swiper>
-			<view class="swiper__recommenddots-box" v-if="recommendList.length > 1">
-				<view v-for="(item,idx) in recommendList" 
-					  :key="idx" 
-					  :class="[idx===current?'swiper__dots-long':'none']" 
-					  :data-index="current" class="swiper__dots-item">
-				</view>	  
+			<view class="row-list" v-for="(pros, idx) in recommendList" :key="idx" @click.stop="navToDetailPage(pros.id)">
+				<view class="list-image"><image :src="pros.image" mode=""></image></view>
+				<view class="list-name">{{pros.name}}</view>
 			</view>
 		</view>
 	</view>
@@ -59,9 +48,7 @@
 				this.ProductService.queryProductDetilsRelevant({productId:id,recommendType:0}).then(response =>{
 					if( response.data && response.data.length > 0){
 						this.isEmpty = false
-						for (var i = 0, j = response.data.length; i < j; i += this.pageSize) {
-							this.recommendList.push(response.data.slice(i, i + this.pageSize));
-						}
+						this.recommendList = response.data
 					}else{
 						this.isEmpty = true
 					}
@@ -83,7 +70,7 @@
 
 <style lang="scss">	
 .recommend{
-	background: #FFFFFF;
+	background: #F7F7F7;
 	width: 100%;
 	.recommend-empty{
 		width: 702rpx;
@@ -98,45 +85,37 @@
 		width: 100%;
 		height: auto;
 		position: relative;
-		padding-bottom: 20rpx;
-		.tui-banner-swiper {
-			width: 702rpx;
-			margin: 0 auto;
-			background: #F7F7F7;
-			padding: 20rpx 24rpx;
-			height: 900rpx;
-			overflow: hidden;
-			transform: translateY(0);
-			.row-list{
-				width: 340rpx;
-				height: auto;
-				float: left;
-				margin-right: 20rpx;
-				margin-bottom: 20rpx;
-				border-radius: 20rpx;
-				background: #FFFFFF;
-				&:nth-child(2n){
-					margin-right: 0;
-				}
-				.list-image{
+		box-sizing: border-box;
+		padding: 0rpx 24rpx;
+		.row-list{
+			width: 340rpx;
+			height: auto;
+			float: left;
+			margin-right: 20rpx;
+			margin-bottom: 20rpx;
+			border-radius: 2rpx;
+			background: #FFFFFF;
+			&:nth-child(2n){
+				margin-right: 0;
+			}
+			.list-image{
+				width: 100%;
+				height: 340rpx;
+				border-radius: 2rpx 2rpx 0 0;
+				image{
 					width: 100%;
 					height: 340rpx;
-					border-radius: 20rpx 20rpx 0 0;
-					image{
-						width: 100%;
-						height: 340rpx;
-						border-radius: 20rpx 20rpx 0 0;
-					}
-				}	
-				.list-name{
-					font-size: $font-size-28;
-					color: $text-color;
-					line-height:88rpx;
-					padding: 0 10rpx;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
+					border-radius: 2rpx 2rpx 0 0;
 				}
+			}	
+			.list-name{
+				font-size: $font-size-28;
+				color: $text-color;
+				line-height:88rpx;
+				padding: 0 10rpx;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
 		}
 	}

components/cm-module/scrollTop/scrollTop.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

components/uni-stars/uni-stars.vue

@@ -72,5 +72,4 @@
 		z-index: 1;
 		overflow: hidden;
 	}
-	
 </style>

pages/goods/product.vue

@@ -56,66 +56,114 @@
 				<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
 				<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
 			</view>
-			<view class="product-parameter" @click="goSupplier">
+			<view class="product-parameter" @click="showPopup">
 				<text class="title">参数：</text>
 				<text class="name">品牌  起订量  分类...</text>
 				<text class="iconfont icon-xiayibu"></text>
 			</view>
 			<view class="product-supplier" @click="goSupplier">
-				<text class="title">供应商信息</text>
-				<text class="name">{{shop.name}}</text>
-				<text class="iconfont icon-xiayibu"></text>
-			</view>
-			<view class="product-details">
-				<!-- 头部 -->
-				<view  v-if="goodsData.isNoneDisabled" class="navbar" :class="navbarFiexd" :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
-					<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
-						<text>商品详情</text>
-						<text class="line"></text>
+				<view class="logo"><img src="https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png" alt=""></view>
+				<view class="main">
+					<view class="name">{{shop.name}}</view>
+					<view class="massgs">
+						<view class="label">满意度:</view>
+						<view class="p-stars">
+							<uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
+						</view>
+						<view class="acount">
+							<text>50</text>件商品
+						</view>
 					</view>
-					<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 3 }" @click="tabClick(3)">
-						<text>相关推荐</text>
-						<text class="line"></text>
-					</view>				
 				</view>
-				<view v-else class="navbar" :class="navbarFiexd" :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
-					<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
-						<text>商品详情</text>
-						<text class="line"></text>
-					</view>
-					<view class="nav-item tui-skeleton-fillet" 
-						  :class="{ current: tabCurrentIndex === 1 }" 
-						  @click="tabClick(1)" 
-						  v-if="product.parametersList != ''">
-							<text>相关参数</text>
-							<text class="line"></text>
-					</view>	
-					<view class="nav-item tui-skeleton-fillet" 
-					      :class="{ current: tabCurrentIndex === 2 }" 
-						  @click="tabClick(2)" 
-						  v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
-							<text>服务项目</text>
-							<text class="line"></text>
-					</view>	
-					<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 3 }" @click="tabClick(3)">
-						<text>相关推荐</text>
-						<text class="line"></text>
-					</view>	
+				<view class="right"><text class="iconfont icon-xiayibu"></text></view>
+			</view>
+			<view class="product-details">
+				<!-- 商品详情 -->
+				<view class="title">
+					<view class="title-tab">商品详情</view>
 				</view>
-				<!-- 商品详情,相关参数,服务项目,相关推荐-->
-				<view class="content tui-banner tui-skeleton-rect" v-if="tabCurrentIndex === 0">
+				<view class="content tui-banner product-rich-text tui-skeleton-rect">
 					<parser :html="html" :img-mode="widthFix"></parser>
 				</view>
-				<view class="content param"  v-if="tabCurrentIndex === 1">
-					<cm-parameter :product="product" v-if="isRarameter"></cm-parameter>
+			</view>	
+			<view class="product-details service" v-show="product.productDetail.orderInfo || product.productDetail.serviceInfo">
+				<!-- 服务项目 -->
+				<view class="title">
+					<view class="title-tab">服务项目</view>
 				</view>
-				<view class="content service" v-if="tabCurrentIndex === 2">
-					<cm-service :product="product.productDetail" v-if="isService"></cm-service>
+				<view class="content service">
+					<cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
 				</view>
-				<view class="content hot" v-if="tabCurrentIndex === 3">
-					<recommend :query-productid="product.productID" v-if="isRecommend"></recommend>
+			</view>	
+			<view class="product-details recommend">
+				<!-- 相关推荐 -->
+				<view class="title">
+					<view class="title-tab">相关推荐</view>
 				</view>
-			</view>
+				<view class="content hot">
+					<recommend :query-productid="product.productID" v-if="isRequest"></recommend>
+				</view>
+			</view>	
+			<!--<view  class="navbar" :class="navbarFiexd" :style="{top:headerBtnPosi.bottom + (headerBtnPosi.bottom - headerBtnPosi.height - systeminfo.statusBarHeight) +'px'}">
+				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
+					<text>商品详情</text>
+					<text class="line"></text>
+				</view>
+				<view class="nav-item tui-skeleton-fillet" 
+					  :class="{ current: tabCurrentIndex === 1 }" 
+					  @click="tabClick(1)" 
+					  v-if="product.parametersList != ''">
+						<text>相关参数</text>
+						<text class="line"></text>
+				</view>	
+				<view class="nav-item tui-skeleton-fillet" 
+					  :class="{ current: tabCurrentIndex === 2 }" 
+					  @click="tabClick(2)" 
+					  v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
+						<text>服务项目</text>
+						<text class="line"></text>
+				</view>	
+				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 3 }" @click="tabClick(3)">
+					<text>相关推荐</text>
+					<text class="line"></text>
+				</view> -->	
+			<!-- 商品参数 -->
+			<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
+				<view class="tui-popup-box clearfix">
+					<view class="title">商品参数</view>
+					<view class="content">
+						<view class="content-tr">
+							<view class="content-td">起订量</view>
+							<view class="content-th">{{product.minBuyNumber}}</view>
+						</view>
+						<view class="content-tr">
+							<view class="content-td">品牌</view>
+							<view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
+						</view>
+						<view class="content-tr">
+							<view class="content-td">包装规格</view> 
+							<view class="content-th">{{product.unit}}</view>
+						</view>
+						<view class="content-tr">
+							<view class="content-td">商品编码</view>
+							<view class="content-th">{{product.productCode}}</view>
+						</view>
+						<view class="content-tr">
+							<view class="content-td">库存</view>
+							<view class="content-th">{{product.stock}}</view>
+						</view>
+						<view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
+							<view class="content-td">{{item.paramsName}}</view>
+							<view class="content-th">{{item.paramsContent}}</view>
+						</view>
+					</view>
+					<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
+						<view class="tui-flex-1">
+							<view class="tui-button" @click="hidePopup()">收起</view>
+						</view>
+					</view>
+				</view>	
+			</tui-bottom-popup>	
 			<!-- 底部按钮 -->
 			<view class="menu" v-if="userIdentity!=1">
 				<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
@@ -209,6 +257,7 @@
 	var isPreviewImg;
 	export default{
 		components:{
+			uniStars,
 			customP,
 			parser,
 			tuiSkeleton,
@@ -223,6 +272,8 @@
 				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
 				disabledTabNavList:[{name:'相关推荐'}],
 				mode:'round',
+				iconClass:'icon-aixin',
+				iconColor:'#ff9100',
 				specClass: '',//规格弹窗css类，控制开关动画
 				isBtnType:'',
 				isRequest:false,
@@ -268,7 +319,8 @@
 					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
 					title: ''		// 导航栏 中间的标题
 				},
-				linkPath:''
+				linkPath:'',
+				popupShow:false//参数弹窗
 			}
 		},
 		onLoad(option) {
@@ -551,6 +603,12 @@
 				  imageUrl:`${this.productImage[0]}`
 				}
 			},
+			showPopup(){
+				this.popupShow = true
+			},
+			hidePopup(){
+				this.popupShow = false
+			}
 		},
 		onPageScroll(e){//实时获取到滚动的值
 			if(e.scrollTop>50){
@@ -601,7 +659,7 @@
 
 <style lang="scss">
 	page{
-		background-color: #F7F7F7;
+		background-color: #FFFFFF;
 	}
 	.productRemarks{
 		height: 36rpx;
@@ -665,6 +723,7 @@
 			.p-title{
 				width: 100%;
 				height: auto;
+				float: left;
 				.p-title-name{
 					width:602rpx;
 					height: 96rpx;
@@ -681,7 +740,7 @@
 					overflow: hidden;
 				}
 				.p-title-share{
-					width: 100rpx;
+					width: 96rpx;
 					height: 96rpx;
 					float: right;
 					text-align: center;
@@ -902,44 +961,18 @@
 				text-align: left;
 			}
 		}
-		.wrap-seve{
-			float: left;
-			width: 702rpx;
-			padding: 0 24rpx;
-			height: 72rpx;
-			line-height: 72rpx;
-			font-size: $font-size-28;
-			color: $text-color;
-			border-bottom: 1px solid #F8F8F8;
-			&.none{
-				color: #999999;
-				.text{
-					color: #999999;
-				}
-			}
-			.iconfont{
-				color: $color-system;
-				margin-left: 20rpx;
-				font-size: $font-size-24;
-			}
-			.text{
-				font-size: $font-size-24;
-				color: $text-color;
-				margin-left: 10rpx;
-			}
-		}
 	}
 	.product-seve{
 		width: 702rpx;
-		height: 88rpx;
+		height: 90rpx;
 		padding: 0 24rpx;
 		background-color: #FFFFFF;
-		margin-bottom: 24rpx;
 		position: relative;
 		display: flex;
-		line-height: 88rpx;
+		line-height: 90rpx;
+		border-bottom: 20rpx solid #F7F7F7;
 		.title{
-			line-height: 88rpx;
+			line-height: 90rpx;
 			display: inline-block;
 			float: left;
 			font-size: $font-size-28;
@@ -948,24 +981,24 @@
 		.iconfont{
 			color: #999999;
 			margin-right: 20rpx;
-			font-size: $font-size-24;
+			font-size: $font-size-26;
 		}
 		.text{
-			font-size: $font-size-24;
+			font-size: $font-size-26;
 			color: #999999;
 			margin-left: 10rpx;
 		}
 	}
 	.product-parameter{
 		width: 702rpx;
-		height: 88rpx;
+		height: 90rpx;
 		padding: 0 24rpx;
 		background-color: #FFFFFF;
-		margin-bottom: 24rpx;
 		position: relative;
 		display: flex;
+		border-bottom: 20rpx solid #F7F7F7;
 		.title{
-			line-height: 88rpx;
+			line-height: 90rpx;
 			display: inline-block;
 			float: left;
 			font-size: $font-size-28;
@@ -973,10 +1006,10 @@
 		}
 		.name{
 			float: right;
-			line-height: 88rpx;
+			line-height: 90rpx;
 			display: inline-block;
 			float: left;
-			font-size: $font-size-24;
+			font-size: $font-size-28;
 			color: #999999;
 			float: right;
 			padding-right: 48rpx;
@@ -986,7 +1019,7 @@
 			text-align: right;
 		}
 		.icon-xiayibu{
-			line-height: 88rpx;
+			line-height: 90rpx;
 			display: inline-block;
 			position: absolute;
 			width: 48rpx;
@@ -996,39 +1029,68 @@
 		}
 	}
 	.product-supplier{
-		width: 702rpx;
-		height: 88rpx;
-		padding: 0 24rpx;
+		width: 100%;
+		height: 174rpx;
+		padding: 30rpx 24rpx;
+		box-sizing: border-box;
 		background-color: #FFFFFF;
-		margin-bottom: 24rpx;
 		position: relative;
-		display: flex;
-		.title{
-			display: flex;
-			flex: 2;
-			line-height: 88rpx;
-			display: inline-block;
+		box-sizing: border-box;
+		border-bottom: 20rpx solid #F7F7F7;
+		.logo{
+			width: 128rpx;
+			height: 92rpx;
 			float: left;
-			font-size: $font-size-28;
-			color: $text-color;
+			border: 1px solid #efefef;
+			border-radius: 6rpx;
+			image{
+				width: 100%;
+				height: 100%;
+				display: block;
+				border-radius: 6rpx;
+			}
 		}
-		.name{
-			display: flex;
-			flex: 2;
-			line-height: 88rpx;
-			display: inline-block;
+		.main{
+			width: 470rpx;
+			height: 92rpx;
 			float: left;
-			font-size: $font-size-24;
-			color: #999999;
-			float: right;
-			padding-right: 48rpx;
-			overflow: hidden;
-			text-overflow:ellipsis;
-			white-space: nowrap;
-			text-align: right;
+			margin-left: 20rpx;
+			.name{
+				width: 100%;
+				line-height: 46rpx;
+				float: left;
+				font-size: $font-size-28;
+				color: $text-color;
+				float: right;
+				overflow: hidden;
+				text-overflow:ellipsis;
+				white-space: nowrap;
+				text-align: left;
+			}
+			.massgs{
+				width: 100%;
+				line-height: 46rpx;
+				float: left;
+				font-size: $font-size-24;
+				color: #999999;
+				.label{
+					float: left;
+				}
+				.p-stars{
+					float: left;
+					margin-left: 20rpx;
+				}
+				.acount{
+					float: right;
+					text{
+						color: $color-system;
+					}
+				}
+			}
 		}
+		
 		.icon-xiayibu{
-			line-height: 88rpx;
+			line-height: 154rpx;
 			display: inline-block;
 			position: absolute;
 			width: 48rpx;
@@ -1038,8 +1100,58 @@
 		}
 	}
 	.product-details {
-		height: 100%;
+		width: 100%;
 		background: #FFFFFF;
+		border-bottom: 20rpx solid #F7F7F7;
+		&.service{
+			border-bottom: none;
+		}
+		&.recommend{
+			background-color: #F7F7F7;
+			border-bottom: none;
+			.title{
+				.title-tab{
+					background-color: #F7F7F7;
+					color: $text-color;
+					
+				}
+			}
+		}
+		.title{
+			width: 100%;
+			box-sizing: border-box;
+			padding: 0 24rpx;
+			.title-tab{
+				width: 100%;
+				height: 100rpx;
+				background: #fff;
+				z-index: 10;
+				font-size: $font-size-30;
+				text-align: left;
+				color: $text-color;
+				line-height: 100rpx;
+				font-weight: 600;
+			}
+			.title-msg{
+				width: 100%;
+				height: 236rpx;
+				padding: 18rpx;
+				background-color: rgba(225,86,22, 0.1);
+				color: $color-system;
+				box-sizing: border-box;
+				margin-bottom: 30rpx;
+				.tit{
+					line-height: 46rpx;
+					font-size: $font-size-24;
+					text-align: left;
+				}
+				.txt{
+					line-height: 38rpx;
+					font-size: $font-size-20;
+					text-align: justify;
+				}
+			}
+		}
 		.navbar {
 			width: 702rpx;
 			height: 96rpx;
@@ -1084,6 +1196,7 @@
 		.content{
 			width: 100%;
 			min-height: 750rpx;
+			background-color: #FFFFFF;
 		}
 	}
 	.isLower{
@@ -1176,22 +1289,27 @@
 			height: 100%;
 			float: right;
 			display: flex;
+			box-sizing: border-box;
+			padding: 13rpx 20rpx 13rpx 0;
 			.btn{
 				flex: 1;
 				width: 200rpx;
-				line-height: 110rpx;
+				line-height: 84rpx;
 				text-align: center;
 				font-size: $font-size-28;
 				color: #FFFFFF;
 			}
 			.btn-cart{
-				background-color: #EFAF00;
+				background-color: #ffe6dc;
+				color: $color-system;
+				border-radius: 42rpx 0 0 42rpx;
 			}
 			.btn-cart.disabled{
-				background-color: rgba(239, 175, 0, 0.5);
+				background-color: #E1E1E1;
 			}
 			.btn-bay{
-				background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
+				background:linear-gradient(to right, #f28f31 0%, #e15616 100%);
+				border-radius: 0 42rpx 42rpx 0;
 			}
 			.btn-bay.disabled{
 				background-color: linear-gradient(135deg,rgba(242,143,49,0.5) 0%,rgba(225,86,22,0.5) 100%);;
@@ -1442,6 +1560,64 @@
 			}
 		}
 	}
+	.tui-popup-box {
+		position: relative;
+		box-sizing: border-box;
+		min-height: 220rpx;
+		padding:0rpx 24rpx 0 24rpx;
+		.title{
+			font-size: $font-size-34;
+			color: $text-color;
+			line-height: 88rpx;
+			text-align: center;
+			float: left;
+			width: 100%;
+			height: 88rpx;
+		}
+		.content{
+			width: 100%;
+			height: auto;
+			float: left;
+			.content-tr{
+				width: 100%;
+				height: 58rpx;
+				line-height: 58rpx;
+				display: flex;
+				.content-td{
+					display: flex;
+					flex: 3;
+					font-size: $font-size-26;
+					color: #999999;
+					line-height: 58rpx;
+					text-align: left;
+				}
+				.content-th{
+					display: flex;
+					flex: 7;
+					font-size: $font-size-26;
+					color: #333333;
+					line-height: 58rpx;
+					text-align: left;
+				}
+			}
+		}
+	}
+	.tui-popup-btn {
+		width: 100%;
+		height: auto;
+		float: left;
+		margin-top: 24rpx;
+		.tui-button{
+			width: 100%;
+			height: 88rpx;
+			background: $btn-confirm;
+			line-height: 88rpx;
+			text-align: center;
+			color: #FFFFFF;
+			font-size: $font-size-28;
+			border-radius: 44rpx;
+		}
+	}
 	/*富文本样式*/
 	rich-text.p{
 		width: 702rpx !important;