qzw_xcx/pages/index/shop.vue

<template>
 	<view class="container">
		<scroll-view  style="height: 100vh;" class="floor-list"
		 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 refresher-enabled="true">
 		<view class="carousel">
 			<swiper indicator-dots circular=true duration="400">
 				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
 					<view class="image-wrapper">
 						<image
 							:src="item.src" 
 							class="loaded" 
 							mode="aspectFill"
 						></image>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>
 		
 		<view class="introduce-section">
			<view class="titleLayout" >
				<view class="title">恒源祥2019春季长袖白色t恤 新款春装</view>
				<view @tap="shopDetail" style="display: flex;flex-direction: row;">
					<view class="titleRight">
						<view style="font-size: 36upx;color: #D9332E;text-align: right;">0%</view>
						<view style="color: #606266;font-size: 28upx;">好评率</view>
					</view>
					<view style="display: flex;align-items: center;">
						 <uni-icon  size="18" type="arrowright"></uni-icon>
					</view>
				</view>
			</view>
 			<view  class="titleLayout price-box">
				<view>
					<text class="price-tip">¥</text>
					<text class="price">341.6</text>
					<text class="m-price">¥488</text>
				</view>
				
				<view>
					<text style="color: #909399">月销售0</text>
				</view>
 				
 			</view>
 			
 		</view>
 		
 		<!--  分享 -->
 		<!-- <view class="share-section" @click="share">
 			<view class="share-icon">
 				<text class="yticon icon-xingxing"></text>
 				 返
 			</view>
 			<text class="tit">该商品分享可领49减10红包</text>
 			<text class="yticon icon-bangzhu1"></text>
 			<view class="share-btn">
 				立即分享
 				<text class="yticon icon-you"></text>
 			</view>
 			
 		</view> -->
 		
 		<view class="c-list">
 			<view  style="display: flex;justify-content: space-between;" class="c-row b-b" @click="toggleSpec">
 				<view style="font-size: 32upx;color: #909399;">规则数量选择</view>
				<view>
				 <uni-icon  size="20" type="arrowright"></uni-icon>
				 </view>
 			</view>
 		</view>
 		
 		<!-- 评价 -->
 		<view @tap="shopDetail" style="border-bottom: 20rpx solid #F5F5F5;" class="eva-section">
 			<view  style="display: flex;justify-content: space-between;" class="c-row b-b">
 				<view style="font-size: 32upx;color: #909399;">评价</view>
 				<view>
 				 <uni-icon  size="20" type="arrowright"></uni-icon>
 				 </view>
 			</view>
			<assess />
 		</view>
 		
 		<view class="detail-desc"  :class="iScrolltop == 2?'activeColor' : ''">
			<van-tabs  v-model="active" @click="onChange">
			  <van-tab :name="0" title="详情">
			  </van-tab>
			  <van-tab :name="1" title="常见问题">
				  详情ddddddddddd 常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题d常见问题常见问题常见问题常见问题常见问题常见问题
			  </van-tab>
			</van-tabs>
 		</view>
 		 <rich-text  v-if="active === 0" :nodes="desc"></rich-text>
 		<!-- 底部操作菜单 -->
 		<view class="page-bottom">
 			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
 				<text class="yticon icon-xiatubiao--copy"></text>
 				<text>首页</text>
 			</navigator>
 			<navigator url="/pages/index/cart" open-type="navigate"   class="p-b-btn">
 				<text class="yticon icon-gouwuche"></text>
 				<text>购物车</text>
 			</navigator>
 			<view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
 				<text class="yticon icon-shoucang"></text>
 				<text>收藏</text>
 			</view>
 			
 			<view class="action-btn-group">
				<button type="primary" @click="openCar"  class=" action-btn no-border add-cart-btn">加入购物车</button>
 				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
 			</view>
 		</view>
 		
 		
 		<!-- 规格-模态层弹窗 -->
 		<view 
 			class="popup spec" 
 			:class="specClass"
 			@touchmove.stop.prevent="stopPrevent"
 			@click="toggleSpec"
 		>
 			<!-- 遮罩层 -->
 			<view class="mask"></view>
 			<view class="layer attr-content" @click.stop="stopPrevent">
 				<view class="a-t">
 					<image src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></image>
 					<view class="right">
 						<text class="price" style="font-size: 36upx;color: #303133">¥328.00</text>
 						<view class="selected">
 							已选：
 							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
 								{{sItem.name}}
 							</text>
 						</view>
 					</view>
					<view @click="closeCar" style="position: absolute;right: 10%;"> 
						<uni-icon size="20" type="close"></uni-icon>
					</view>
 				</view>
 				<view v-for="(item,index) in specList" :key="index" class="attr-list">
 					<text>{{item.name}}</text>
 					<view class="item-list">
 						<text 
 							v-for="(childItem, childIndex) in specChildList" 
 							v-if="childItem.pid === item.id"
 							:key="childIndex" class="tit"
 							:class="{selected: childItem.selected}"
 							@click="selectSpec(childIndex, childItem.pid)"
 						>
 							{{childItem.name}}
 						</text>
 					</view>
 				</view>
 			</view>
 		</view>
 		<!-- 分享 -->
 		<!-- <share 
 			ref="share" 
 			:contentHeight="580"
 			:shareList="shareList"
 		></share> -->
		</scroll-view>
 	</view>
 </template>
 
 <script>
	 
	import assess from '@/component/assess.vue'  // 评价列表
 	import uniIcon from '@/component/uni-icon/uni-icon.vue'
 	export default{
 		components: {
 			uniIcon,
			assess
 		},
 		data() {
 			return {
				windowHeight: 0, // 窗口高度
				iScrolltop: 1,
				active: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
 				specClass: 'none',
 				specSelected:[],
 				
 				favorite: true,
 				shareList: [],
 				imgList: [
 					{
 						src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
 					},
 					{
 						src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
 					},
 					{
 						src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
 					}
 				],
 				desc: `
 					<div style="width:100%">
 						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd2.alicdn.com/imgextra/i2/479184430/O1CN01gwbN931iaz4TzqzmG_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i3/479184430/O1CN018wVjQh1iaz4aupv1A_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd4.alicdn.com/imgextra/i4/479184430/O1CN01tWg4Us1iaz4auqelt_!!479184430.jpg_400x400.jpg" />
 						<img style="width:100%;display:block;" src="https://gd1.alicdn.com/imgextra/i1/479184430/O1CN01Tnm1rU1iaz4aVKcwP_!!479184430.jpg_400x400.jpg" />
 					</div>
 				`,
 				specList: [
 					{
 						id: 1,
 						name: '尺寸',
 					},
 					{	
 						id: 2,
 						name: '颜色',
 					},
 				],
 				specChildList: [
 					{
 						id: 1,
 						pid: 1,
 						name: 'XS',
 					},
 					{
 						id: 2,
 						pid: 1,
 						name: 'S',
 					},
 					{
 						id: 3,
 						pid: 1,
 						name: 'M',
 					},
 					{
 						id: 4,
 						pid: 1,
 						name: 'L',
 					},
 					{
 						id: 5,
 						pid: 1,
 						name: 'XL',
 					},
 					{
 						id: 6,
 						pid: 1,
 						name: 'XXL',
 					},
 					{
 						id: 7,
 						pid: 2,
 						name: '白色',
 					},
 					{
 						id: 8,
 						pid: 2,
 						name: '珊瑚粉',
 					},
 					{
 						id: 9,
 						pid: 2,
 						name: '草木绿',
 					},
 				]
 			};
 		},
		onLaunch: function(){
			this.active = 1;
			console.log(this.active);
			console.log("kdkkdkd");
		},
		onShow: function() {
			console.log("11")
			console.log(this.windowHeight)
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					that.windowHeight = res.screenHeight;
					// console.log("屏幕宽度："+res.screenWidth);
					// console.log("屏幕高度："+res.screenHeight);
					// console.log("可使用窗口宽度："+res.windowWidth);
					// console.log("可使用窗口高度："+res.windowHeight);
				}
			});
		},
 		async onLoad(options){
 			
 			//接收传值,id里面放的是标题，因为测试数据并没写id 
 			let id = options.id;
 			if(id){
 				this.$api.msg(`点击了${id}`);
 			}
 			
 			
 			//规格 默认选中第一条
 			this.specList.forEach(item=>{
 				for(let cItem of this.specChildList){
 					if(cItem.pid === item.id){
 						this.$set(cItem, 'selected', true);
 						this.specSelected.push(cItem);
 						break; //forEach不能使用break
 					}
 				}
 			})
 			this.shareList = await this.$api.json('shareList');
 		},
		
	    
				
 		methods:{
			shopDetail() {
				uni.navigateTo({
				                   url: './commemt',
				               }); 
			},
			onChange(event) {
				this.active = event.detail.name;
				console.log(this.active)
			},
 			//规格弹窗开关
 			toggleSpec() {
				this.specClass = 'show';
 				// if(this.specClass === 'show'){
 				// 	this.specClass = 'hide';
 				// 	setTimeout(() => {
 				// 		this.specClass = 'none';
 				// 	}, 250);
 				// }else if(this.specClass === 'none'){
 				// 	this.specClass = 'show';
 				// }
 			},
			 
			//
			openCar() {
				this.specClass = 'show';
			},
			closeCar() {
				this.specClass = 'none';
			},
 			//选择规格
 			selectSpec(index, pid){
 				let list = this.specChildList;
 				list.forEach(item=>{
 					if(item.pid === pid){
 						this.$set(item, 'selected', false);
 					}
 				})
 
 				this.$set(list[index], 'selected', true);
 				//存储已选择
 				/**
 				 * 修复选择规格存储错误
 				 * 将这几行代码替换即可
 				 * 选择的规格存放在specSelected中
 				 */
 				this.specSelected = []; 
 				list.forEach(item=>{ 
 					if(item.selected === true){ 
 						this.specSelected.push(item); 
 					} 
 				})
 				
 			},
 			// 滚动到顶部
 			upper(e) {
 				console.log(e)
 				console.log("顶部")
 			},
 			
 			// 滚到底部
 			lower(e) {
 				console.log("底部")
 			},
 			// 滚动时触发
 			scroll(e) {
 				this.old.scrollTop = e.detail.scrollTop
			    console.log(e.detail.scrollTop);
 				if(e.detail.scrollTop > this.windowHeight) {
 					this.iScrolltop = 2;
 				}else {
 					this.iScrolltop = 1;
 				}
 			},
 			
 			//收藏
 			toFavorite(){
 				this.favorite = !this.favorite;
 			},
 			buy(){
 				uni.navigateTo({
 					url: './sureBuy'
 				})
 			},
 			stopPrevent(){}
 		},
 
 	}
 </script>
 
 <style lang='scss'>
 	page{
 		/* background: $page-color-base; */
 		padding-bottom: 160upx;
 	}
 	.icon-you{
 		font-size: 28upx + 2upx;
 		color: #888;
 	}
 	.carousel {
 		height: 722upx;
 		position:relative;
 		swiper{
 			height: 100%;
 		}
 		.image-wrapper{
 			width: 100%;
 			height: 100%;
 		}
 		.swiper-item {
 			display: flex;
 			justify-content: center;
 			align-content: center;
 			height: 750upx;
 			overflow: hidden;
 			image {
 				width: 100%;
 				height: 100%;
 			}
 		}
 		
 	}
 	
	.titleLayout {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20upx;
	}
 	/* 标题简介 */
 	.introduce-section{
 		background: #fff;
 		padding: 20upx 30upx;
 		
 		.title{
 			font-size: 36upx;
 			color:  #303133;
 			height: 50upx;
 			line-height: 50upx;
			width: 70%;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			
 		}
			
		.titleRight {
			border-left: 1px solid #F5F5F5;
			padding-left: 32upx;
		}
 		.price-box{
 			display:flex;
 			align-items:baseline;
 			height: 64upx;
 			padding: 10upx 0;
 			font-size: 26upx;
 			color:#fa436a;
 		}
 		.price{
 			font-size: $font-lg + 2upx;
 		}
 		.m-price{
 			margin:0 12upx;
 			color: #909399;
 			text-decoration: line-through;
 		}
 		.coupon-tip{
 			align-items: center;
 			padding: 4upx 10upx;
 			background: #fa436a;
 			font-size: 24upx;
 			color: #fff;
 			border-radius: 6upx;
 			line-height: 1;
 			transform: translateY(-4upx); 
 		}
 		.bot-row{
 			display:flex;
 			align-items:center;
 			height: 50upx;
 			font-size: 24upx;
 			color: #909399;
 			text{
 				flex: 1;
 			}
 		}
 	}
 	/* 分享 */
 	.share-section{
 		display:flex;
 		align-items:center;
 		color:  #606266;
 		background: linear-gradient(left, #fdf5f6, #fbebf6);
 		padding: 12upx 30upx;
 		.share-icon{
 			display:flex;
 			align-items:center;
 			width: 70upx;
 			height: 30upx;
 			line-height: 1;
 			border: 1px solid #fa436a;
 			border-radius: 4upx;
 			position:relative;
 			overflow: hidden;
 			font-size: 22upx;
 			color: #fa436a;
 			&:after{
 				content: '';
 				width: 50upx;
 				height: 50upx;
 				border-radius: 50%;
 				left: -20upx;
 				top: -12upx;
 				position:absolute;
 				background: #fa436a;
 			}
 		}
 		.icon-xingxing{
 			position:relative;
 			z-index: 1;
 			font-size: 24upx;
 			margin-left: 2upx;
 			margin-right: 10upx;
 			color: #fff;
 			line-height: 1;
 		}
 		.tit{
 			font-size: 28upx;
 			margin-left:10upx;
 		}
 		.icon-bangzhu1{
 			padding: 10upx;
 			font-size: 30upx;
 			line-height: 1;
 		}
 		.share-btn{
 			flex: 1;
 			text-align:right;
 			font-size: 24upx;
 			color: #fa436a;
 		}
 		.icon-you{
 			font-size: 24upx;
 			margin-left: 4upx;
 			color: #fa436a;
 		}
 	}
 	
 	.c-list{
 		font-size: 24upx + 2upx;
 		color:  #606266;
 		background: #fff;
		border-top: 20upx solid #F5F5F5;
		border-bottom: 20upx solid #F5F5F5;
 		.c-row{
 			display:flex;
 			align-items:center;
 			padding: 20upx 30upx;
 			position:relative;
 		}
 		.tit{
 			width: 140upx;
 		}
 		.con{
 			flex: 1;
 			color:  #303133;
 			.selected-text{
 				margin-right: 10upx;
 			}
 		}
 		.bz-list{
 			height: 40upx;
 			font-size: 24upx+2upx;
 			color:  #303133;
 			text{
 				display: inline-block;
 				margin-right: 30upx;
 			}
 		}
 		.con-list{
 			flex: 1;
 			display:flex;
 			flex-direction: column;
 			color:  #303133;
 			line-height: 40upx;
 		}
 		.red{
 			color: #fa436a;
 		}
 	}
 	
 	/* 评价 */
 	.eva-section{
 		display: flex;
 		flex-direction: column;
 		padding: 20upx 30upx;
 		background: #fff;
 		margin-top: 16upx;
 		.e-header{
 			display: flex;
 			align-items: center;
 			height: 70upx;
 			font-size: 24upx + 2upx;
 			color: #909399;
 			.tit{
 				font-size: 28upx + 2upx;
 				color:  #303133;
 				margin-right: 4upx;
 			}
 			.tip{
 				flex: 1;
 				text-align: right;
 			}
 			.icon-you{
 				margin-left: 10upx;
 			}
 		}
 	}
 	.eva-box{
 		display: flex;
 		padding: 20upx 0;
 		.portrait{
 			flex-shrink: 0;
 			width: 80upx;
 			height: 80upx;
 			border-radius: 100px;
 		}
 		.right{
 			flex: 1;
 			display: flex;
 			flex-direction: column;
 			font-size: 28upx;
 			color:  #606266;
 			padding-left: 26upx;
 			.con{
 				font-size: 28upx;
 				color:  #303133;
 				padding: 20upx 0;
 			}
 			.bot{
 				display: flex;
 				justify-content: space-between;
 				font-size: 24upx;
 				color:#909399;
 			}
 		}
 	}
 	/*  详情 */
 	.detail-desc{
 		background: #fff;
 		margin-top: 16upx;
		width: 100%;
 		.d-header{
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 80upx;
 			font-size: 28upx + 2upx;
 			color:  #303133;
 			position: relative;
 				
 			text{
 				padding: 0 20upx;
 				background: #fff;
 				position: relative;
 				z-index: 1;
 			}
 			&:after{
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				transform: translateX(-50%);
 				width: 300upx;
 				height: 0;
 				content: '';
 				border-bottom: 1px solid #ccc; 
 			}
 		}
 	}
 	
 	/* 规格选择弹窗 */
 	.attr-content{
 		padding: 10upx 30upx;
 		.a-t{
 			display: flex;
 			image{
 				width: 170upx;
 				height: 170upx;
 				flex-shrink: 0;
 				margin-top: -40upx;
 				border-radius: 8upx;;
 			}
 			.right{
 				display: flex;
 				flex-direction: column;
 				padding-left: 24upx;
 				font-size: 24upx + 2upx;
 				color:  #606266;
 				line-height: 42upx;
				justify-content: space-around;
 				.price{
 					font-size: $font-lg;
 					color: #fa436a;
 					margin-bottom: 10upx;
 				}
 				.selected-text{
 					margin-right: 10upx;
 				}
 			}
 		}
 		.attr-list{
 			display: flex;
 			flex-direction: column;
 			font-size: 28upx + 2upx;
 			color:  #606266;
 			padding-top: 30upx;
 			padding-left: 10upx;
 		}
 		.item-list{
 			padding: 20upx 0 0;
 			display: flex;
 			flex-wrap: wrap;
 			text{
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				background: #eee;
 				margin-right: 20upx;
 				margin-bottom: 20upx;
 				border-radius: 100upx;
 				min-width: 60upx;
 				height: 60upx;
 				padding: 0 20upx;
 				font-size: 28upx;
 				color:  #303133;
 			}
 			.selected{
 				background: #fbebee;
 				color: #fa436a;
 			}
 		}
 	}
 	
 	/*  弹出层 */
 	.popup {
 		position: fixed;
 		left: 0;
 		top: 0;
 		right: 0;
 		bottom: 100upx;
 		z-index: 99;
 		
 		&.show {
 			display: block;
 			.mask{
 				animation: showPopup 0.2s linear both;
 			}
 			.layer {
 				animation: showLayer 0.2s linear both;
 			}
 		}
 		&.hide {
 			.mask{
 				animation: hidePopup 0.2s linear both;
 			}
 			.layer {
 				animation: hideLayer 0.2s linear both;
 			}
 		}
 		&.none {
 			display: none;
 		}
 		.mask{
 			position: fixed;
 			top: 0;
 			width: 100%;
 			height: 90%;
 			z-index: 1;
 			background-color: rgba(0, 0, 0, 0.4);
 		}
 		.layer {
 			position: fixed;
 			z-index: 99;
 			bottom: 100upx;
 			width: 100%;
 			min-height: 40vh;
 			border-radius: 10upx 10upx 0 0;
 			background-color: #fff;
 			.btn{
 				height: 66upx;
 				line-height: 66upx;
 				border-radius: 100upx;
 				background: #fa436a;
 				font-size: 28upx + 2upx;
 				color: #fff;
 				margin: 30upx auto 20upx;
 			}
 		}
 		@keyframes showPopup {
 			0% {
 				opacity: 0;
 			}
 			100% {
 				opacity: 1;
 			}
 		}
 		@keyframes hidePopup {
 			0% {
 				opacity: 1;
 			}
 			90% {
 				opacity: 0;
 			}
 		}
 		@keyframes showLayer {
 			0% {
 				transform: translateY(120%);
 			}
 			100% {
 				transform: translateY(0%);
 			}
 		}
 		@keyframes hideLayer {
 			0% {
 				transform: translateY(0);
 			}
 			100% {
 				transform: translateY(120%);
 			}
 		}
 	}
 	.van-sticky {
		/* z-index: 0!important; */
	}
	/* 详情固定 */
	.activeColor {
		/* background: #fff!important; */
		position: fixed;
		background-color: #fff;
		top: 0upx;
		z-index: 99;
		margin-top: 0;
	}
 	/* 底部操作菜单 */
 	.page-bottom{
 		position: fixed;
 		left: 0;
 		bottom: 0;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		width:  100%;
 		height: 100upx;
		z-index: 99;
 		background: rgba(255,255,255,.9);
 		.p-b-btn{
 			display:flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
 			font-size: 24upx;
 			color:  #606266;
 			width: 96upx;
 			height: 80upx;
 			.yticon{
 				font-size: 40upx;
 				line-height: 48upx;
 				color: #909399;
 			}
 			&.active, &.active .yticon{
 				color: #fa436a;
 			}
 			.icon-fenxiang2{
 				font-size: 42upx;
 				transform: translateY(-2upx);
 			}
 			.icon-shoucang{
 				font-size: 46upx;
 			}
 		}
 		.action-btn-group{
 			display: flex;
 			height: 76upx;
 			border-radius: 100px;
 			overflow: hidden;
 			box-shadow: 0 20upx 40upx -16upx #fa436a;
 			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
 			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
 			margin-left: 20upx;
 			position:relative;
 			&:after{
 				content: '';
 				position:absolute;
 				top: 50%;
 				right: 50%;
 				transform: translateY(-50%);
 				height: 28upx;
 				width: 0;
 				border-right: 1px solid rgba(255,255,255,.5);
 			}
 			.action-btn{
 				display:flex;
 				align-items: center;
 				justify-content: center;
 				width: 180upx;
 				height: 100%;
 				font-size: 28upx ;
 				padding: 0;
 				border-radius: 0;
 				background: transparent;
 			}
 		}
 	}
 	
 </style>