<template>
	<view class="content">
		<view class="swiperModel">
			<u-swiper :list="list" @change="e => currentNum = e.current" :radius='0' height="300" :autoplay="false"
				indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="productPreferentialModle">
			<view class="productPreferentialLeft">
				<view>
					<span v-if="goods_tags.field11 != undefined">{{goods_tags.field11 | ''}}</span>
					<span class="productPriceIcon">¥</span> <span
						v-if="goods_detail.goods_price != undefined && goods_detail.goods_price != ''"
						style="font-size: 42rpx;">{{goods_detail.goods_price || ''}}</span>
					<span style="margin-right: 15rpx;">起</span>

					<span v-if="priceFlag && goods_tags.field12 != undefined">
						{{goods_tags.field12.substring(0, 3)}}</span>
					<span class="productPriceIcon"
						v-if="priceFlag && goods_detail.market_price != undefined && goods_detail.market_price != ''">¥</span>
					<span v-if="priceFlag"
						style="text-decoration: line-through;">{{goods_detail.market_price || ''}}</span>
					<span
						v-if="priceFlag && goods_detail.market_price != undefined && goods_detail.market_price != ''">起</span>
				</view>
				<view>
					<span v-if="goods_tags.field14 != undefined"
						style="padding:4 20rpx;background-color: #ffffff;color: #FC0339;border-radius: 4rpx;">{{goods_tags.field14}}</span>
					<span style="margin-left: 20rpx;">
						已售{{goods_detail.sale}}+
					</span>
				</view>
			</view>
			<view v-if="goods_tags.field13 != undefined" class="productPreferentialRight">
				{{goods_tags.field13.substring(0, 8)}}
			</view>
		</view>
		<view class="productBaseInfo">
			<view class="productFirsttag">
				<span v-if="goods_tags.field15">{{goods_tags.field15}}
				</span>
			</view>
			<view class="prudtctSecondTagList"
				v-if="goods_tags.field16 != undefined  || goods_tags.field17 != undefined || goods_tags.field18 != undefined">
				<span class="prudtctSecondTag" v-if="goods_tags.field16">{{goods_tags.field16}}
				</span><span class="prudtctSecondTag" v-if="goods_tags.field17">{{goods_tags.field17}}
				</span><span class="prudtctSecondTag" v-if="goods_tags.field18">{{goods_tags.field18}}
				</span>
			</view>
			<view class="productInfoName"
				v-if="goods_tags.field19 != undefined || goods_tags.field20 != undefined || goods_detail.goods_name">
				<span style="color: #D32063;" v-if="goods_tags.field19">{{goods_tags.field19}}</span><span
					class="productInfoNameTag"
					v-if="goods_tags.field20">{{goods_tags.field20}}</span>{{goods_detail.goods_name}}
			</view>
			<view class="prudtctSecondTagList"
				v-if="goods_tags.field21 != undefined  || goods_tags.field22 != undefined || goods_tags.field23 != undefined || goods_tags.field24 != undefined">
				<span class="prudtctSecondTag" style="color: #D32063 ;background-color: #FAE6ED;"
					v-if="goods_tags.field21">{{goods_tags.field21}}
				</span>
				<span class="prudtctSecondTag" style="color: #57576D ;background-color: #F5F5F5;"
					v-if="goods_tags.field22">{{goods_tags.field22}}</span>
				<span class="prudtctSecondTag" style="color: #57576D ;background-color: #F5F5F5;"
					v-if="goods_tags.field23">{{goods_tags.field23}}</span>
				<span class="prudtctSecondTag" style="color: #57576D ;background-color: #F5F5F5;"
					v-if="goods_tags.field24">{{goods_tags.field24}}</span>

			</view>
			<view class="vipModel"
				v-if="goods_tags.field25 != undefined  && goods_tags.field26 != undefined && goods_tags.field27 != undefined">
				<span class="vipModelTag" v-if="goods_tags.field25">{{goods_tags.field25}}
				</span>
				<view class="vipModelText" v-if="goods_tags.field26">{{goods_tags.field26}}
				</view>
				<span class="vipModelTag" v-if="goods_tags.field27">{{goods_tags.field27}}
				</span>
			</view>
			<view class="productTipLine" v-if="goods_tags.field28 != undefined  || goods_tags.field29 != undefined">
				<view class="productTipLineIcon">
					<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/crd.png" mode=""></image>
				</view>
				<span class="productTipLineTag" style="color: #ffffff ;background-color: #5CCE9A;"
					v-if="goods_tags.field28">{{goods_tags.field28}}
				</span>
				<span style="margin-left: 10rpx;" v-if="goods_tags.field29">{{goods_tags.field29}}</span>
			</view>
			<view class="productTipLine" v-if="goods_tags.field30 != undefined">
				<view class="productTipLineIcon">
					<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/ax.png" mode=""></image>
				</view>
				<span style="margin-left: 10rpx;">{{goods_tags.field30}}</span>
			</view>
		</view>
		<u-gap height="15" bgColor="#F8F9FA"></u-gap>
		<view class="evaluateModel">
			<view class="evaluateModelTop" @click="goCommonList">
				<span style="color: #333333;">评价</span><span
					style="color: #999999;font-size: 22rpx;">({{commentListTotal}})</span>
				<view class="goodEvaluate">
					{{goods_detail.high_opinion}}%
				</view>
				<view style="width: 28rpx;height: 28rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="evaluateInit" v-for="(item,index) in commentList" :key="index" v-if="index == 1 || index == 0">
				<view class="evaluateUserImg">
					<image class="init_image" :src="item.avatar" mode=""></image>
				</view>
				<view class="evaluateInitInfo">
					<view class="evaluateInitInfoName">
						<span>{{item.nickname}}</span><span
							style="color: #999999;font-size: 22rpx;">{{item.addtime}}</span>
					</view>
					<view class="evaluateInitInfoText">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		<u-gap height="15" bgColor="#F8F9FA"></u-gap>
		<view class="productInfoText">
			<view class="productInfoTab">
				<u-tabs :list="tabList" :scrollable="false" lineColor="#D32063" :activeStyle="{color: '#D32063'}"
					:inactiveStyle="{color: '#666666'}" @click="click"></u-tabs>
			</view>
			<view class="u-content">
				<u-parse v-show="tabInit == '商品详情'" :content="goods_detail.goods_desc"></u-parse>
				<u-parse v-show="tabInit == '购买须知'" :content="goods_detail.intro_desc"></u-parse>
			</view>

		</view>
		<u-popup :show="attrShow" :round="20" :closeOnClickOverlay="true" :closeable="true" @close="close" @open="open">
			<view class="attrTitle">
				选择规格
			</view>
			<view class="orderModel">
				<view class="orderImg">
					<image class="init_image" :src="goods_detail.skuOne.pic" mode=""></image>
				</view>
				<view class="orderProductInfo">
					<view class="orderPrice">
						<span>¥</span>{{goods_detail.skuOne.goods_price}}
					</view>
					<view class="orderNorms">
						<span>库存：{{goods_detail.skuOne.stock}}</span>
					</view>
				</view>
			</view>
			<view v-if="flag" v-for="(item,index) in goods_detail.attr" :key="index">
				<view class="title_attr_init">
					{{item.tname}}
				</view>
				<view class="chose_attr_init">
					<view @click="changeAttr(jtem,index)" v-for="(jtem,Jndex) in item.tval" :key="Jndex"
						:class="['attr_init',attrArry[index] == jtem ?'active':'']">
						{{jtem}}
					</view>
				</view>
			</view>
			<view class="title_attr_init">
				数量
			</view </view>
			<view class="chose_attr_init" style="padding-bottom: 30rpx;">
				<u-number-box v-model="goodsNum" :min="goods_detail.skuOne.stock == 0?0:1"
					:disabled="goods_detail.skuOne.stock == 0" :max="goods_detail.stock" @change="goodsNumChange"
					integer></u-number-box>
			</view>
			<view class="bottomList">
				<view class="addCarBtn" @click="add_shopping_cart">加入购物车</view>
				<view class="buyBtn" @click="goConfirmOrder">
					立即购买
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</u-popup>
		<view class="bottomBtnList">
			<view class="iconBtn" @click="call(goods_detail.kf_phone)">
				<view class="iconBtn-icon">
					<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/phone.png" mode=""></image>
				</view>
				咨询
			</view>
			<view class="iconBtn" @click="goods_collect">
				<view class="iconBtn-icon">
					<image class="init_image" v-show="isCollect != 1" src="http://amy.yyinhong.cn/uploads/wximg/psc.png"
						mode=""></image>
					<image class="init_image" v-show="isCollect == 1"
						src="http://amy.yyinhong.cn/uploads/wximg/insc.png" mode=""></image>
				</view>
				收藏
			</view>
			<view class="bottomBtn" @click="openAttrShow" style="background-color: #EB7BA1;">
				加入购物车
			</view>
			<view class="bottomBtn" @click="openAttrShow">
				立即购买
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNum: 0,
				list: [],
				tabList: [{
					name: '商品详情',
				}, {
					name: '购买须知',
				}],
				tabInit: '商品详情',
				goods_id: null,
				goods_detail: null,
				goods_tags: null,
				isCollect: null,
				commentList: [],
				goodsNum: 1,
				commentListTotal: 0,
				attrShow: false, //规格选择标志位
				attrArry: [], //规格数组
				flag: true,
				priceFlag: false,
				buycode: '',
				btnFlag: false
			}
		},
		onLoad(option) {
			this.goods_id = option.id;
		},
		onShow() {

			if (uni.getStorageSync('codeTime')) {
				console.log(uni.getStorageSync('codeTime'))
				let beforTime = uni.getStorageSync('codeTime')
				if (this.$utils.isTimeMoreThanOneDayFromNow(beforTime)) {
					console.log('时间超过一天')
					this.priceFlag = false
				} else {
					console.log('时间未超过一天')
					this.priceFlag = true
				}
			}
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
			} else {
				this.getGoodsDetail();
			}

		},
		methods: {
			//获取用户信息
			async getUserInfo() {
				let _this = this
				await _this.$request('/user-info', 'GET', {}).then(res => {
					console.log(res.data.buycode);
					if (_this.priceFlag) {
						_this.buycode = res.data.buycode
					}
					_this.getGoodsDetail();
				}).catch(err => {})
			},
			open() {
				this.attrShow = true
				// console.log('open');
			},
			close() {
				this.attrShow = false
				// console.log('close');
			},
			changeAttr(jtem, index) {
				console.log(jtem, index)
				this.attrArry[index] = jtem;
				this.getattrInfo()
				this.flag = false;
				this.flag = true;
			},
			getattrInfo() {
				let _this = this;
				for (let i in this.attrArry) {
					if (this.attrArry[i] == '') {
						// _this.$refs.uToast.show({
						// 	type: 'success',
						// 	message: "请选择完整的规格",
						// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
						// })
						return
					}
				}
				let attr_name = this.attrArry.length > 1 ? this.attrArry.join(',') : this.attrArry[0];
				let url = uni.getStorageSync('token') ? "/get-ajax-attr-auth" : '/get-ajax-attr';
				this.$request(url, 'POST', {
					goods_id: this.goods_id,
					attr_name,
					buycode: this.buycode
				}).then(res => {
					this.goods_detail.skuOne.goods_price = res.data.goods_price;
					this.goods_detail.skuOne.pic = res.data.pic;
					this.goods_detail.skuOne.stock = res.data.stock;
					if (this.goods_detail.skuOne.stock > 0) {
						this.goodsNum = 1;
					} else {
						this.goodsNum = 0;
					}
				}).catch(err => {
					uni.showToast({

						icon: 'error',

						title: '' + err.message

					})
				})
			},
			goodsNumChange() {},
			//打开规格选择
			openAttrShow() {
				this.attrShow = true;
			},
			//获取商品详情
			getGoodsDetail() {
				this.attrArry = [];
				let url = uni.getStorageSync('token') ? "/get-good-detail-auth" : '/get-good-detail';
				this.$request(url, 'GET', {
					goods_id: this.goods_id,
					buycode: this.buycode
				}).then(res => {
					console.log(res.data)
					this.goods_detail = res.data;
					this.list = res.data.goods_img;
					this.goods_tags = res.data.tags;
					this.isCollect = res.data.is_collect;
					for (let i in res.data.attr) {
						this.attrArry[i] = ('');
					}
					this.getcomment_list()
				}).catch(err => {
					uni.showToast({

						icon: 'error',

						title: '' + err.message

					})
				})
			},
			//获取评价列表
			getcomment_list() {
				this.$request('/comment-list', 'GET', {
					gid: this.goods_id
				}).then(res => {
					console.log(res.data)
					this.commentList = res.data.list;
					this.commentListTotal = res.data.total;
				}).catch(err => {
					uni.showToast({

						icon: 'error',

						title: '' + err.message

					})
				})
			},
			//添加购物车
			add_shopping_cart() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: "请先登录！"
					});
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				if (this.btnFlag) {
					return
				}
				let _this = this;
				if (this.goods_detail.skuOne.stock == 0) {
					_this.$refs.uToast.show({
						type: 'error',
						message: "暂无库存",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
					})
					return
				}
				for (let i in this.attrArry) {
					if (this.attrArry[i] == '') {
						_this.$refs.uToast.show({
							type: 'error',
							message: "请选择完整的规格",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
						})
						return
					}
				}
				_this.attr_name = this.attrArry.length > 1 ? this.attrArry.join(',') : this.attrArry[0];
				this.btnFlag = true
				setTimeout(() => {
					this.btnFlag = false
				}, 4000)
				_this.$request('/add-shopping-cart', 'POST', {
					goods_id: _this.goods_id,
					num: _this.goodsNum,
					attr_name: _this.attr_name,
				}).then(res => {
					this.btnFlag = false
					console.log("添加购物车成功")
					_this.$refs.uToast.show({
						type: 'success',
						message: "添加购物车成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
					})
				}).catch(err => {
					_this.btnFlag = false
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			//是否收藏
			getGoods_collect() {
				this.$request('/is-collect', 'GET', {
					goods_id: this.goods_id,
				}).then(res => {
					console.log(res.data)
					this.isCollect = res.data.is_collect
				}).catch(err => {
					uni.showToast({

						icon: 'error',

						title: '' + err.message

					})
				})
			},
			//加入取消收藏
			goods_collect() {
				this.$request('/goods-collect', 'GET', {
					goods_id: this.goods_id,
				}).then(res => {
					this.getGoods_collect();
				}).catch(err => {
					uni.showToast({

						icon: 'error',

						title: '' + err.message

					})
				})
			},
			click(item) {
				console.log('item', item);
				this.tabInit = item.name;
			},
			goConfirmOrder() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: "请先登录！"
					});
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				let _this = this;
				if (this.goods_detail.skuOne.stock == 0) {
					_this.$refs.uToast.show({
						type: 'error',
						message: "暂无库存",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
					})
					return
				}
				for (let i in this.attrArry) {
					if (this.attrArry[i] == '') {
						_this.$refs.uToast.show({
							type: 'error',
							message: "请选择完整的规格",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
						})
						return
					}
				}
				_this.attr_name = this.attrArry.length > 1 ? this.attrArry.join(',') : this.attrArry[0];
				let confirOrderObj = {
					goods_id: _this.goods_id,
					num: _this.goodsNum,
					attr_name: _this.attr_name,
					type: 'goods'
				}
				uni.setStorageSync('confirOrderObj', confirOrderObj)
				uni.navigateTo({
					url: '/pageSub-product/pages/confirmOrder/confirmOrder'
				})
			},
			goCommonList() {
				uni.navigateTo({
					url: '/pageSub-product/pages/commentList/commentList?id=' + this.goods_id
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {},
					fail() {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
	}

	.swiperModel {
		width: 100%;
		height: 300px;
	}

	.indicator-num {
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		width: 60rpx;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 22rpx;
		}
	}

	.productPreferentialModle {
		height: 128rpx;
		background-image: url('http://amy.yyinhong.cn/uploads/wximg/sptop.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.productPreferentialLeft {
		margin-left: 10rpx;
		flex: 1;
		line-height: 42rpx;
		font-size: 22rpx;
		color: #ffffff;
		margin-left: 30rpx;
	}

	.productPreferentialRight {
		width: calc(100% / 5);
		line-height: 42rpx;
		margin-right: 10rpx;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		color: #ffffff;
	}

	.productBaseInfo {
		width: 100%;
		padding-bottom: 20rpx;
	}

	.productFirsttag {
		width: calc(100% - 60rpx);
		padding: 16rpx 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		color: #333333;
	}

	.prudtctSecondTagList {
		width: calc(100% - 30rpx);
		padding-bottom: 16rpx;
		padding-left: 30rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 22rpx;

		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow-x: scroll;
	}


	.vipModel {
		width: calc(100% - 80rpx);
		margin: 0 30rpx;
		padding: 0 10rpx;
		margin-bottom: 16rpx;
		height: 56rpx;
		font-size: 26rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 8rpx;
		background: linear-gradient(to right, #FAD9AD, #F9BF7F);

	}

	.vipModelTag {
		color: #FCE9D2;
		background-color: #342A20;
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
	}

	.productTipLineTag {
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 22rpx;
		border-radius: 8rpx;
	}

	.vipModelText {
		flex: 1;
		line-height: 56rpx;
		text-indent: 16rpx;
		font-size: 24rpx;
		color: #342A20;
	}

	.productInfoName {
		width: calc(100% - 60rpx);
		padding: 16rpx 30rpx;
		padding-top: 0;
		font-size: 28rpx;
		color: #333333;
		line-height: 44rpx;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;

		.productInfoNameTag {
			padding: 0 16rpx;
			height: 56rpx;
			background-color: #FAE6ED;
			font-size: 20rpx;
			border-radius: 8rpx;
			color: #D32063;
			margin: 0 16rpx;
		}
	}

	.productTipLine {
		width: calc(100% - 60rpx);
		margin: 0 30rpx;
		height: 56rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26rpx;
		color: #51545C;
	}

	.productTipLineIcon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.prudtctSecondTag {
		padding: 0 16rpx;
		height: 56rpx;
		background-color: #FFEFE5;
		font-size: 26rpx;
		border-radius: 8rpx;
		color: #FF6201;
		margin-right: 16rpx;
		white-space: nowrap;
	}

	.evaluateModel {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
	}

	.evaluateModelTop {
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EBEBEB;
		font-size: 24rpx;

		.goodEvaluate {
			color: #D32063;
			text-align: right;
			flex: 1;
		}
	}

	.evaluateInit {
		padding: 30rpx 0;
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.evaluateUserImg {
		height: 60rpx;
		width: 60rpx;
		border-radius: 60rpx;
		overflow: hidden;
		// background-color: #F83D3D;
		margin-right: 16rpx;
	}

	.evaluateInitInfo {
		flex: 1;

		.evaluateInitInfoName {
			height: 32rpx;
			font-size: 26rpx;
			color: #303949;
			font-weight: 600;
			padding-bottom: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

		.evaluateInitInfoText {
			height: 60rpx;
			line-height: 30rpx;
			font-size: 23rpx;
			color: #161C2B;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.productInfoText {
		width: 100%;
		padding-bottom: 200rpx;
	}

	.productInfoTab {
		width: 100%;
		padding: 20rpx 0;
	}

	.bottomBtnList {
		position: fixed;
		bottom: 0;
		width: calc(100% - 80rpx);
		padding: 20rpx 40rpx;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding-bottom: 60rpx;
	}

	.bottomBtn {
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #ffffff;
		background-color: #D32063;
		border-radius: 70rpx;
		font-size: 26rpx;
	}

	.iconBtn {
		width: 40rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 35rpx;
		font-size: 20rpx;

		.iconBtn-icon {
			height: 36rpx;
			width: 36rpx;
		}
	}

	.u-content {
		padding: 24rpx;

		image {
			width: 100% !important;
		}
	}

	.attrTitle {
		width: 100%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.title_attr_init {
		width: calc(100% - 120rpx);
		padding: 24rpx 60rpx;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.chose_attr_init {
		width: calc(100% - 120rpx);
		margin: 10rpx 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow-x: scroll;
		font-size: 24rpx;
	}

	.attr_init {
		width: 200rpx;
		height: 64rpx;
		background-color: #F8F9FA;
		border-radius: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 24rpx;
		color: #333333;
		margin-right: 18rpx;
	}

	.attr_init.active {
		background-color: #E25A8F;
		color: #ffffff;
	}

	.bottomList {
		width: calc(100% - 120rpx);
		padding: 30rpx 60rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		font-size: 26rpx;
		border-top: 1px solid #ECECEC;

		.addCarBtn {
			width: calc((100% - 30rpx) / 2);
			background-color: #EB7BA1;
			color: #ffffff;
			border-radius: 70rpx;
			height: 70rpx;
			line-height: 70rpx;
		}

		.buyBtn {
			width: calc((100% - 30rpx) / 2);
			background-color: #D3195E;
			color: #ffffff;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 70rpx;
		}
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 0 30rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}

	.orderProductInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}
</style>