MeiMeiZhuan/pages/product/productCollage.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<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" class="loaded" mode="scaleToFill"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 介绍部分 -->
		<view class="introduce-section">
			<view class="introduce-price flex1">
				<view class="price">
					<view class="price-left">
						<view class="left-1">¥</view>
						<view class="left-2">{{goodsObjact.price}}</view>
					</view>
					<view class="price-right" >单买价 ¥{{goodsObjact.product_price}}</view>
				</view>
				<view class="people flex_item">
					<view class="people_number">{{goodsObjact.people}}人拼</view>
				</view>
			</view>
			<view class="title" >{{goodsObjact.title}}</view>
			<view class="bot-row flex1">
				<view>快递：¥ {{goodsObjact.postage}}</view>
				<view>剩余：{{ goodsObjact.stock}}件</view>
				<view>销量：{{ goodsObjact.sales }}</view>
			</view>
		</view>
		<!-- <view class="c-list">
			<view class="c-row b-b"><text class="tit">拼团玩法</text></view>
			<view class="c-row b-b">
				<view class="c-text">
					①开团/参团
					<text>——</text>
					②邀请好友
					<text>——</text>
					③满员发货
				</view>
			</view>
			<view class="c-row b-b" @click="toggleSpec()" v-if="goodsType == 2">
				<text class="tit">购买数量</text>
				<view class="con">
					<text class="selected-text">{{ goodsNumber }}</text>
				</view>
				<text class="iconfont iconenter"></text>
			</view>
		</view> -->
		<view class="pinklistbox" v-if="pinkTlist.length > 0">
			<view class="listbox-1 flex1">
				<view >{{pinkTlist.length}}人在拼单，可直接参与</view>
				<view class="more flex-center" @click="opens_popup" v-if="more">查看全部
					<image src="../../static/img/img01.png"></image>
				</view>
			</view>
			<view class="pinklist">
				<view v-for="(ls, ind) in showlist" :key="ind" class="flex pinklist_list">
					<view class="pink_row flex1">
						<view class="pink_img"><image :src="ls.avatar"></image></view>
						<view class="pink_name">{{ ls.nickname }}</view>
					</view>
					<view class="pink_tpl flex1">
						<view >
							<view class="pink_people">
								还差
								<text>{{ ls.count}}</text>
								人拼团
							</view>
							<!-- <view class="pink_people">
								剩余{{ls.time || '00:00:00'}}
							</view> -->
						</view>
						<view class="pint" @click="groupBooking(ls.id)">
							去拼单
							<!-- <text class="iconfont iconenter"></text> opens_popups-->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<!-- <view class="eva-section" v-if="replyCount > 0" @click="navTo('/pages/product/reply')">
			<view class="e-header">
				<text class="tit">评价</text>
				<text class="number">({{replyCount}})</text>
				<text class="tip">全部评价</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="eva-box">
				<view class="box-1 flex1">
					<view class="left flex-start">
						<image :src="commentList.avatar"></image>
						<view class="content">
							<view class="content-name">{{commentList.nickname}}</view>
							<view class="content-time">{{commentList.add_time}}</view>
						</view>
					</view>
					<view class="right flex-upDown-center">
						<view><uniRate text="1" size="14" margin="1" :value="commentList.product_score" ></uniRate></view>
						<text class="red">{{commentList.product_score}}分</text>
					</view>
				</view>
				<view class="box-2">{{commentList.comment}}</view>
				<view class="box-3">
					<view v-for="(item,index) in commentList.pics" :key="index" class="box-3-1">
						<image :src="item"></image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="eva-section" v-if="reply.length > 0" @click="navTo('/pages/product/reply?id=' + goodsid)">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{ list.replyCount }})</text>
				<text class="tip">好评率 {{ list.replyChance }}%</text>
				<text class="iconfont iconenter"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{ reply.nickname }}</text>
					<text class="con">{{ reply.comment }}</text>
					<view class="con_box">
						<view class="con_image" v-for="item in reply.pics"><image :src="item"></image></view>
					</view>
					<view class="bot">
						<text class="attr"></text>
						<text class="time">{{ reply.add_time }}</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 商品详情图 -->
		<view class="detail-desc">
			<view class="desc-title flex-center">
				<view class="one"></view>
				商品详情
				<view class="two"></view>
			</view>
			<rich-text :nodes="goodsObjact.description"></rich-text>
		</view>
		<!-- <view class="detail-desc">
			<view class="d-header"><text>图文详情</text></view>
			<rich-text :nodes="goodsObjact.description"></rich-text>
		</view> -->
		<!-- 拼团商品 -->
		<view class="page-bottom" >
			<!-- <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="iconfont iconhomefill"></text>
				<text>首页</text>
			</navigator> -->
			<!--<view class="botton-1 flex-center">
				<view class="botton-frame" @click="toFavorite(goodsObjact)">
					<view class="img-box" v-if="goodsObjact.userCollect == false"><image src="../../static/label/img02.png"></image></view>
					<view class="img-box" v-if="goodsObjact.userCollect == true"><image src="../../static/label/img08.png"></image></view>
					<view class="word" :class="{ active: goodsObjact.userCollect }">收藏</view>
				</view>
			</view> 
			<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
				<text class="iconfont iconlikefill"></text>
				<text>收藏</text>
			</view> -->
			<view class="action-btn-group">
				<!-- <button type="primary" class=" action-btn no-border btn-favorites-btn" @click="navTo('/pages/favorites/favorites')">收藏夹</button> -->
				<!-- <button type="primary" class=" action-btn no-border buy-now-btn" @click="toFavorite(goodsObjact)">{{ goodsObjact.userCollect ? '取消收藏' : '收藏' }}</button> -->
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="specOPne()">一键开团</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="actionImage"></image>
					<view class="right">
						<text class="name">{{ goodsObjact.store_name }}</text>
						<text class="price">¥{{ actionPrice * goodsNumber }}</text>
						<text class="stock">库存：{{ goodsStore }}件</text>
						<view class="selected" v-if="specList != ''">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem }}</text>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in specList" :key="index" class="attr-list">
					<text>{{ item.attr_name }}</text>
					<view class="item-list">
						<text
							v-for="(childItem, childIndex) in item.attr_value"
							:key="childIndex"
							class="tit"
							:class="{ selected: childItem.check }"
							@click="selectSpec(childItem, item, index)"
						>
							{{ childItem.attr }}
						</text>
					</view>
				</view>
				<!-- <view class="attr-list">
					<text>购买数量</text>
					<view class="item-list">
						<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
					</view>
				</view> -->
				<button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
				<button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
			</view>
		</view>
		
		<!-- 查看全部拼单 -->
		<uni-popup ref="popup" type="center" >
			<view class="popup-row">
				<view class="popup-1">
					正在拼单
				</view>
				
				<scroll-view scroll-y="true" class="popcont-box">
					<view class="popup-2">
						<view v-for="(item,index) in pinkTlist" :key="index" class="popup-2-row flex1">
							<view class="row-1 flex1">
								<view class="one">
									<image :src="item.avatar"></image>
									<view class="two">
										<view class="two-1">{{item.nickname }}</view>
										<!-- <view>剩余 {{item.time}}</view> -->
									</view>
								</view>
								
								<text class="two-1-1">还差{{item.count}}人</text>
							</view>
							<view class="row-2" @click="groupBooking(item.id)">
								去拼单
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
			<view class="delete" @click="closes_popup"><image src="../../static/img/deletes.png"></image></view>
		</uni-popup>
		
		<!-- <uni-popup ref="popups" type="center" >
			<view class="popup-rows" >
				<view class="rows-1">参与李丹的拼单</view>
				<view class="rows-2">仅剩<text class="red">1</text>个名额，23:41:55后结束</view>
				<view class="rows-3 flex1">
					<view class="rows-3-group" v-for="(item,index) in information" >
						<view class="group-1">
							<image src="../../static/delete/timg.jpg"></image>
							<view class="group-1-1" >团长</view>
						</view>
						<view class="group-2">婷930sadasa</view>
					</view>
					<view class="rows-3-group" v-for="i in (5 - information.length) " >
						<view class="group-1">
							<image src="../../static/label/blank.png"></image>
						</view>
						<view class="group-2">带邀请</view>
					</view>
				</view>
				<view class="rows-4" @click="navTo('/pages/order/createOrder')">参与拼单</view>
			</view>
			<view class="delete" @click="groupBooking()"><image src="../../static/label/deletes.png"></image></view>
		</uni-popup>
		 -->
		
		
		<!-- #ifdef H5 -->
        <!-- <view class="btn_fenxiang" @click="open">分享</view> -->
        <view class="mask" v-show="show"><image @click="onTap" src="https://mmz.liuniu946.com/statics/img/shareimg.png"></image></view>
        <!-- #endif -->  
		<!-- #ifdef MP-WEIXIN -->
		<button  open-type="share" class="shareDate">分享</button>
		<!-- #endif -->
	</view>
</template>
<script>
import { mapState } from 'vuex';

import { uniFav } from '@/components/uni-fav/uni-fav.vue';
import { goodsDetail, cartAdd, collectAdd, collectDel, productDetail } from '@/api/product.js';
import { getCombinationPoster } from '@/api/details.js';
import { saveUrl } from '@/utils/loginUtils.js';
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import uniNumberBox from '@/components/uni-number-box.vue';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	components: {
		uniNumberBox,
		uniFav,
		uniNoticeBar,
		uniRate,
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
	// #ifdef MP
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: this.goodsObjact.image,
				title: this.goodsObjact.title
			};
			return data;
		}
	},
	// #endif
	data() {
		return {
			imgList: [], //商品轮播图
			goodsObjact: {}, //保存商品数据
			pinkTlist:{
				length:5
			}, //进行中的拼团的信息
			showlist: [],//进行中的拼团前两组的信息
			replyCount:0,//评价总数
			commentList:{},
			specList: [],
			ishow:'',
			information:[],
			popuplist:[],
			show: false,
			showModal: true, //拼单遮罩层
			more: true, //查看更多按钮
			autoplay: true,
			vertical: true,
			interval: 3000,
			duration: 500,
			buys_show: true,
			buys_shows: false,
			circular: true,
			type: 1, //默认支付方式add为
			specClass: 'none', //显示隐藏弹窗
			actionImage: '', //商品图片
			goodsid: '', //商品id
			actionPrice: '', //商品价格
			// specClass: 'none', //显示隐藏弹窗
			shareList: [], //分享列表
			goodsNumberMax: 0, //商品库存
			//图片循环
			people: '', //拼团人数
			goodsNumber: 1, //购买数量（开团数量为1，整团数量为1*参团人数）
			carnumber: '', //整团购买商品数量
			reply: {}, //商品数据
			list: '', //详情数据
			goodsType: 1, //商品类型1秒杀商品0为普通商品2为拼团商品3为新人礼包
			count: 0, //点击查看更多
			showmore: true,
			pinkTlistnum: '',
			spread: '',
			chooseGoodsNumber: 1, //选择商品的数量
			specSelected: [], //选中的分类
			goodsStore: 0, //选中库存
			uniqueId: '',
			productValue: '',
			isCollect: '', //是否被收藏
			maskshow: false, //弹窗
			posturl: '',
			option: '', //保存传值
			opt: '', //保存小程序传值
		};
	},
	onLoad(option) {
		this.option = option;
		if (option.scene) {
			if (typeof option.scene == 'string') {
				let scene = ('{' + option.scene + '}')
					.replace('qr%26', '')
					.replace(/%3D/g, ':')
					.replace(/%26/g, ',')
					.replace('pid', '"pid"')
					.replace('type', '"type"')
					.replace('id', '"id"');
				let opt = JSON.parse(scene);
				this.opt = opt;
				// 保存拼团订单id
				this.goodsid = opt.id;
				if (opt.pid) {
					// 存储邀请人
					this.spread = opt.pid;
					uni.setStorageSync('spread', opt.pid);
				}
				if (opt.type) {
					this.goodsType = opt.type;
				}
			}
		} else {
			//保存商品id
			this.goodsid = option.id;
			//判断有无人邀请
			if (option.spread) {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
			}
			//判断是否是普通商品
			if (option.type) {
				console.log(option.type);
				this.goodsType = option.type;
			}
		}
		// 保存当前页面
		saveUrl();
	},
	onShow() {
		let obj = this;
		goodsDetail({}, obj.goodsid).then(function({ data }) {
			console.log(data,112)
			let goods = data.storeInfo;
			obj.imgList = goods.images;//拼团轮播图
			obj.goodsObjact = goods;//拼团拼团产品信息
			obj.pinkTlist = data.pink;//进行中的拼团的信息
			obj.showlist = obj.pinkTlist.slice(0, 2);//截取拼团信息的前两组
			obj.replyCount = data.replyCount;//评价总数
			//obj.commentList = data.reply[0];//保存评价里的第一条
			obj.specList = data.productAttr;//保存产品属性
			//商品详情图超出屏幕问题
			if (obj.goodsObjact.description != null) {
				obj.goodsObjact.description = obj.goodsObjact.description.replace(/<img/g, '<img class="rich-img"').replace(/<p>\S*<img/g, '<p class="pHeight"><img');
			}
			
			if(obj.pinkTlist.length<=2){
				obj.more = false;
			};
			if (data.reply) {
				obj.reply = data.reply;
			}
			obj.list = data; //详情数据
			obj.productValue = data.productValue; //保存属性值
			// 保存数据修改数组
			// console.log(obj.pinkTlist,55)
			obj.people = goods.people; //拼团人数
			obj.productId = goods.product_id;
			
			// 保存默认选中的对象
			obj.specSelected = []; //初始化默认选择对象
			for (let i = 0; i < obj.specList.length; i++) {
				// 设置默认数据
				let attrValue = obj.specList[i].attr_value[0];
				attrValue.check = true;
				obj.specSelected.push(attrValue.attr);
			}
			
			//保存默认选中的对象字符串名称
			let str = obj.specSelected.join(',');
			// 设置默认值
			obj.actionPrice = obj.productValue[str].price;
			obj.goodsNumberMax = obj.productValue[str].stock;
			obj.actionImage = obj.productValue[str].image;
			obj.uniqueId = obj.productValue[str].unique;
			obj.goodsStore = obj.productValue[str].quota;
			console.log(obj.goodsStore,9000)
			// #ifdef H5
			obj.shareDate();
			// #endif
			// obj.clickMore();
		});
		// combination({}, obj.goodsid).then()
	},
	computed: {
		...mapState(['userInfo', 'baseURL'])
	},
	methods: {
		numberChange(e) {
			//购买数量
			this.chooseGoodsNumber = e.number;
			// console.log(e.number)
			// console.log(this.chooseGoodsNumber,'chooseGoodsNumber')
		},
		opens_popup(){
			this.$refs.popup.open()
		},
		closes_popup(){
			this.$refs.popup.close()
		},
		opens_popups(){
			this.$refs.popup.close()
			this.$refs.popups.open()
		},
		closes_popups(){
			this.$refs.popups.close()
		},
		// 处理数组结构
		dataUpReturn(data) {
			//保存处理完毕数据
			let arr = [];
			// 保存临时数据
			let arr1 = [];
			// 设置每个小数组可以存放的数量
			let num = 2;
			if (data.length > 1) {
				for (let i = 0; i < data.length; i++) {
					// 保存数据到临时数组
					arr1.push(data[i]);
					if ((i + 1) % num === 0) {
						console.log(arr1, 2);
						// 添加数据到返回数组，用map方法解决物理指针问题导致的数据对象改变问题
						arr.push(
							arr1.map(e => {
								return e;
							})
						);
						// 清空临时数组重新开始计算
						arr1 = [];
					}
				}
			}
			// 判断是否为奇数
			if (data.length % num === 1) {
				arr.push([data[data.length - 1]]);
			}
			return arr;
		},
		specOPne() {
			//显示弹出框
			// 是否有开团用户
			// if (this.pinkTlist.length > 0) {
			// 	this.groupBooking(this.pinkTlist[0][0].id);
			// } else {
			// }
			this.specClass = 'show';
		},
		
		//去拼团
		groupBooking(item) {
			uni.navigateTo({
				url: '/pages/product/details?pink_id=' + item
			});
		},
		//拼团列表数据分页
		setPinkList() {
			let obj = this;
			let showlist = new Array();
			for (let i = 0; i < obj.pinkTlist.length; i++) {
				if (i >= obj.count) {
					break;
				}
				showlist[i] = obj.pinkTlist[i];
			}
			obj.showlist = showlist;
		},
		//查看更多
		// clickMore() {
		// 	let obj = this;
		// 	obj.count += 2;
		// 	obj.setPinkList();
		// 	if (obj.count >= obj.pinkTlist.length) {
		// 		obj.showmore = false; //当次数大于拼团数据，查看更多隐藏
		// 	} else {
		// 		obj.showmore = true; //当次数大于拼团数据，查看更多隐藏
		// 	}
		// },
		clickMore() {
			this.showlist = this.pinkTlist;
			console.log(this.showlist, 22);
			this.more = false;
		},
		//规格弹窗开关
		toggleSpec(str) {
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.specClass = 'show';
			}
			// 判断是否为数字
			if (typeof str == 'number') {
				// 保存当前购买类型
				this.type = str;
			}
		}, 
		//选择规格
		selectSpec(item, arr, ind) {
			arr.attr_value.forEach(function(e) {
				e.check = false;
			});
			item.check = true;
			let obj = this;
			obj.specSelected[ind] = item.attr;
			let str = obj.specSelected.join(',');
			console.log(obj.productValue[str],116)
			if (obj.productValue[str]) {
				obj.buys_show = true;
				obj.buys_shows = false;
				obj.actionPrice = obj.productValue[str].price;
				obj.goodsNumberMax = obj.productValue[str].stock;
				obj.actionImage = obj.productValue[str].image;
				obj.uniqueId = obj.productValue[str].unique;
				if (obj.goodsType == 2) {
					obj.goodsStore = obj.productValue[str].quota;
				} else {
					obj.goodsStore = obj.productValue[str].product_stock;
				}
			} else {
				(obj.buys_show = false), (obj.buys_shows = true);
			}
		},
		//显示弹窗
		open() {
			this.show = true;
		},
		//随意点击隐藏弹窗
		onTap() {
			if (!this.open) return;
			this.close();
		},
		close() {
			this.show = false;
		},
		//收藏
		toFavorite(item) {
			let obj = this;

			item.userCollect = !item.userCollect;
			// 判断是否已经收藏
			if (!item.userCollect) {
				collectDel({
					id: item.id,
					category: 'pink'
				}).then(function(e) {
					obj.$api.msg('成功取消收藏!');
				});
			} else {
				collectAdd({
					id: item.id,
					category: 'pink'
				}).then(function(e) {
					obj.$api.msg('成功加入收藏!');
				});
			}
		},
		
		// #ifdef H5
		shareDate() {
			let obj = this;
			let url = window.location.href.replace(/[\?,&]{0,1}from=singlemessage/g, '') + '&spread=' + this.userInfo.uid;
			let bool = uni.getStorageSync('weichatBrowser') || '';
			// 判断是否微信浏览器
			if (bool) {
				let data;
				if (obj.goodsType == 0) {
					data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						desc: obj.goodsObjact.store_info,
						title: obj.goodsObjact.store_name,
						success: function() {}
					};
				}
				if (obj.goodsType == 2) {
					data = {
						link: url, // 分享链接
						imgUrl: obj.goodsObjact.image, // 分享图标
						title: obj.goodsObjact.title,
						desc: obj.goodsObjact.info,
						success: function() {}
					};
				}
				weixindata(data);
			}
		},
		// #endif
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 立即购买
		buy(item) {
			let obj = this;
			/* obj.toggleSpec();
			this.specClass='show',
			console.log(obj.list.productValue.默认.unique)
			console.log(obj.chooseGoodsNumber,'chooseGoodsNumber')
			return */
			// 创建传值对象
			console.log(obj.list.productValue);
			console.log(obj.list);
			let data = {
				// cartNum: obj.goodsNumber, //商品数量
				cartNum: obj.chooseGoodsNumber, //商品数量
				uniqueId: obj.uniqueId, //商品标签
				new: 1, //商品是否新增加到购物车1为不加入0为加入
				mer_id: obj.shopId,
				combinationId: obj.goodsid, //拼团编号
				productId: obj.goodsObjact.product_id, //商品编号
			};
			this.specClass = 'none';
			cartAdd(data)
				.then(function(e) {
					let da = e.data;
					console.log(e);
					if (obj.type == 1) {
						// 跳转到支付页
						uni.navigateTo({
							url: '/pages/order/createOrder?id=' + da.cartId + '&goodsType=' + obj.goodsType
						});
					}
					if (obj.type == 2) {
						obj.$api.msg('成功加入购物车');
						obj.toggleSpec();
					}
				})
				.catch(e => {
					console.log(e);
				}); 
		},
		// 阻止触发上级事件
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 160rpx;
	line-height: 1;
}

// 处理图片间白色间距问题
/deep/ .pHeight {
	line-height: 0;
}

/deep/ div,
/deep/ table {
	max-width: 100% !important;
}

/* #ifdef MP */
.rich-img {
	width: 100% !important;
	height: auto;
}
// 处理图片间白色间距问题
.pHeight {
	line-height: 0;
}
/* #endif */

.popup-row{
	width:580rpx;
	background:#ffffff;
	border-radius:20rpx;
	.popup-1{
		padding: 35rpx 0;
		font-size:$font-lg;
		font-weight:bold;
		color:#333333;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
	}
	.popcont-box {
		height: 600rpx;
	}
	.popup-2{
		padding: 0 25rpx;
		.popup-2-row{
			padding: 25rpx 0;
			border-bottom: 1px solid #EEEEEE;
			&:nth-last-child(1){
				border-bottom:none;
			}
			.row-1{
				width: 70%;
				.one{
					display: flex;
					align-items: center;
					image{
						width: 75rpx;
						height: 75rpx;
						border-radius: 50%;
					}
				}
				.two{
					margin-left: 20rpx;
					font-size:28rpx;
					font-weight:500;
					color:#333333;
					.two-1{
						// margin-bottom: 20rpx;
						font-size:$font-base;
						font-weight:500;
						max-width: 160rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.two-1-1{
					font-size:$font-base;
					font-weight:500;
					color:#666666;
				}
			}
			.row-2{
				padding: 20rpx 30rpx;
				background:$base-color;
				border-radius:10rpx;
				font-size:28rpx;
				font-weight:500;
				color:#FFFFFF;
			}
		}
	}
}
.popup-rows{
	width:580rpx;
	background:#ffffff;
	border-radius:20rpx;
	text-align: center;
	padding-bottom: 35rpx;
	.rows-1{
		font-size:$font-lg;
		font-weight:bold;
		color:#333333;
		padding-top: 60rpx;
	}
	.rows-2{
		margin-top: 25rpx;
		font-size:28rpx;
		font-weight:500;
		color:#333333;
	}
	.rows-3{
		margin-top: 35rpx;
		padding: 0 50rpx;
		
		.rows-3-group {
			display: flex;
			align-items: center;
			flex-direction: column;
			.group-1{
				display: flex;
				align-items: center;
				flex-direction: column;
			}
			.group-2{
				flex: 1;
				font-size:$font-sm - 4rpx;
				font-weight:500;
				color:#666666;
				margin-top: 10rpx;
				width:55rpx;
				overflow:hidden;
				white-space:nowrap;
				text-overflow:ellipsis;
			}
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.group-1-1{
				z-index: 10;
				margin-top: -25rpx;
				width:70rpx;
				height:25rpx;
				background:#e64048;
				border-radius:12rpx;
				font-size:$font-sm - 4rpx;
				font-weight:500;
				color:#ffffff;
				line-height: 25rpx;
			}
		}
	}
	.rows-4{
		margin: 40rpx 45rpx 0rpx 45rpx;
		padding: 25rpx 0;
		background:$base-color;
		border-radius:10rpx;
		
		font-size:$font-lg;
		font-weight:500;
		color:#ffffff;
	}
}

.delete{
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	right: -30rpx;
	top:-30rpx;
	image{
		width: 60rpx;
		height: 60rpx;
	}
}

/* 评价 */
.eva-section {
	padding: 20rpx 30rpx;
	background: #fff;
	margin-top: 20rpx;
	.e-header {
		display: flex;
		align-items: center;
		font-size:28rpx;
		color: #333333;
		.tit {
			margin-right: 15rpx;
		}
		.tip {
			flex: 1;
			font-size:24rpx;
			color: #999999;
			text-align: right;
		}
		.iconenter {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.eva-box {
		padding-top: 30rpx;
		.box-1{
			.left{
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.content{
					margin-left: 15rpx;
					.content-name{
						font-size:24rpx;
						font-weight:500;
						color:#333333;
					}
					.content-time{
						font-size:20rpx;
						font-weight:500;
						color:#999999;
					}
				}
			}
			.right{
				.image{
					width: 25rpx;
					height: 25rpx;
					margin-left: 10rpx;
				}
				.red{
					margin-left: 15rpx;
					font-size:24rpx;
					font-weight:500;
					color:#fd5b23;
				}
				.con_image{
					
				}
			}
		}
		.box-2{
			padding: 30rpx 0 15rpx 0;
			font-size:28rpx;
			font-weight:500;
			color:#666666;
		}
		.box-3{
			.box-3-1{
				display: inline;
				width: 150rpx;
				height: 150rpx;
				image{
					margin-right: 20rpx;
					width: 150rpx;
					height: 150rpx;
				}
			}
			
		}
	}
}

/* .list-row {
	position: fixed;
	top: 450rpx;
	left: 86rpx;

	.row {
		position: relative;
		width: 578rpx;
		height: 700rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.row-1 {
			flex: 1;
			text-align: center;
			padding: 26rpx 223rpx;
			border-bottom: 2rpx solid #eeeeee;

			.row-1-1 {
				font-size: $font-lg;
				font-weight: bold;
				color: #333333;
			}
		}

		.row-2 {
			padding: 0 23rpx;

			.pinklist_list {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #eeeeee;

				.left {
					width: 74rpx;
					height: 74rpx;
					background-color: #e3e3e3;
					border-radius: 50%;
				}

				.center {
					display: flex;
					flex-wrap: wrap;
					margin-left: 17rpx;

					.center-1 {
						display: flex;
						align-items: center;
						letter-spacing: 3rpx;

						.center-1-1 {
							font-size: $font-base;
							font-weight: 500;
							color: #333333;
						}

						.center-1-2 {
							font-size: $font-base - 2rpx;
							font-weight: 500;
							color: #333333;
						}
					}
				}

				.right {
					width: 134rpx;
					height: 59rpx;
					background: $base-color;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.right-word {
						font-size: 26rpx;
						font-weight: 500;
						color: #ffffff;
					}
				}
			}
		}

		.row-3 {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			top: -28rpx;
			right: -28rpx;
		}
	}
} */

.iconenter {
	font-size: $font-base + 2rpx;
	color: #888;
}


.carousel {
	height: 722rpx;
	position: relative;

	swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 15rpx 25rpx 30rpx 25rpx;
	.introduce-price{
		width: 100%;
		overflow: hidden;
		.price{
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			
			.price-left{
				display: flex;
				align-items: flex-end;
				color:#fc4141;
				margin-right: 20rpx;
				.left-1{
					margin-right: 5rpx;
					font-size:28rpx;
				}
				.left-2{
					font-size:$font-lg + 16rpx;
					line-height: 38rpx;
				}
			}
			.price-right{
				font-size:28rpx;
				color:#333333;
				opacity:0.61;
			}
		}
		.people{
			width: 140rpx;
			height: 45rpx;
			background: url(../../static/img/img43.png) no-repeat center;
			background-size: 100%;
			.people_number{
				margin-left: 60rpx;
				font-size:20rpx;
				font-weight:500;
				color:rgba(250,39,64,1);
				line-height: 40rpx;
			}
		}
		/* .share{
			image{
				width: 30rpx;
				height: 35rpx;
			}
		} */
	}
	.title {
		margin-top: 30rpx;
		font-size: 32rpx;
		color: #1D2023;
		line-height: 40rpx;
		font-weight: 600;
	}
	.bot-row{
		margin-top: 20rpx;
		overflow: hidden;
		font-size:24rpx;
		font-weight:500;
		color:#999999;
	}
}


/* 标题简介 */
/* .introduce-section {
	background: #fff;
	padding: 20rpx 30rpx;

	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		height: 50rpx;
		line-height: 50rpx;
	}

	.price-box {
		display: flex;
		align-items: baseline;
		// height: 64rpx;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: $uni-color-primary;
	}

	.price {
		font-size: $font-lg + 2rpx;
		color: #666666 !important;
	}

	.vip_price {
		font-size: $font-lg + 2rpx;
		color: $uni-color-primary;
		padding-left: 15rpx;
	}

	.m-price {
		margin: 0 12rpx;
		color: $font-color-light;
		text-decoration: line-through;
	}

	.coupon-tip {
		align-items: center;
		padding: 4rpx 10rpx;
		background: $uni-color-primary;
		font-size: $font-sm;
		color: #fff;
		border-radius: 6rpx;
		line-height: 1;
		transform: translateY(-4rpx);
	}

	.bot-row {
		display: flex;
		align-items: center;
		height: 50rpx;
		font-size: $font-sm;
		color: $font-color-light;

		text {
			flex: 1;
		}
	}

	.people {
		border-radius: 10rpx;
		height: 35rpx !important;
		border: 2rpx solid #db1935;
		height: 40rpx;

		.people_image {
			background-color: #db1935;
			width: 40rpx;
			height: 35rpx;
			text-align: center;
			border-top-left-radius: 20%;
			border-bottom-left-radius: 20%;

			image {
				width: 25rpx;
				height: 20rpx;
				// margin-bottom: 5rpx;
			}
		}

		.people_number {
			padding: 5rpx 10rpx;
		}
	}
} */

/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: $font-color-base;
	background: linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 12rpx 30rpx;

	.share-icon {
		display: flex;
		align-items: center;
		width: 70rpx;
		height: 30rpx;
		line-height: 1;
		border: 1px solid $uni-color-primary;
		border-radius: 4rpx;
		position: relative;
		overflow: hidden;
		font-size: 22rpx;
		color: $uni-color-primary;

		&:after {
			content: '';
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			left: -20rpx;
			top: -12rpx;
			position: absolute;
			background: $uni-color-primary;
		}
	}

	.iconfavorfill {
		position: relative;
		z-index: 1;
		font-size: 24rpx;
		margin-left: 2rpx;
		margin-right: 10rpx;
		color: #fff;
		line-height: 1;
	}

	.tit {
		font-size: $font-base;
		margin-left: 10rpx;
	}

	.iconprompt {
		padding: 10rpx;
		font-size: 30rpx;
		line-height: 1;
	}

	.share-btn {
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		color: $uni-color-primary;
	}

	.iconenter {
		font-size: $font-sm;
		margin-left: 4rpx;
		color: $uni-color-primary;
	}
}

.c-list {
	font-size: $font-sm + 2rpx;
	color: #303133;
	margin-top: 20rpx;
	background: #fff;

	.c-row {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;

		.c-text {
			text {
				padding-left: 25rpx;
				padding-right: 25rpx;
			}
		}
	}

	.tit {
		width: 140rpx;
	}

	.con {
		flex: 1;
		color: $font-color-dark;

		.selected-text {
			margin-right: 10rpx;
		}
	}

	.bz-list {
		height: 40rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;

		text {
			display: inline-block;
			margin-right: 30rpx;
		}
	}

	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40rpx;
	}

	.red {
		color: $uni-color-primary;
	}
}

/* 评价 */
/* .eva-section {
	display: flex;
	flex-direction: column;
	padding: 20rpx 30rpx;
	background: #fff;
	margin-top: 16rpx;

	.e-header {
		display: flex;
		align-items: center;
		height: 70rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-light;

		.tit {
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			margin-right: 4rpx;
		}

		.tip {
			flex: 1;
			text-align: right;
		}

		.iconenter {
			margin-left: 10rpx;
		}
	}
}
 
.eva-box {
	display: flex;
	padding: 20rpx 0;

	.portrait {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-base;
		color: $font-color-base;
		padding-left: 26rpx;

		.con {
			font-size: $font-base;
			color: $font-color-dark;
			padding: 20rpx 0;
		}

		.bot {
			display: flex;
			justify-content: space-between;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
}

.con_image {
	width: 130rpx;
	height: 130rpx;
	display: inline-block;
	padding: 15rpx;

	image {
		width: 100%;
		height: 100%;
	}
}*/

/*  详情 */
.detail-desc {
	.desc-title{
		font-size:28rpx;
		font-weight:500;
		color:#1D2023;
		padding: 25rpx 0;
		.one{
			width:77rpx;
			height:1px;
			background:linear-gradient( to right ,rgba(204,204,204,0), rgba(204,204,204,1));
			margin-right: 10rpx;
		}
		.two{
			margin-left: 10rpx;
			width:77rpx;
			height:1px;
			background:linear-gradient( to left ,rgba(204,204,204,0), rgba(204,204,204,1));
		}
	}
	
}
/* .detail-desc {
	background: #fff;
	margin-top: 16rpx;

	img {
		max-width: 100%;
	}

	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20rpx;
			background: #fff;
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300rpx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
} */

/* 规格选择弹窗 */
.attr-content {
	padding: 25rpx 30rpx;

	.a-t {
		display: flex;

		image {
			width: 170rpx;
			height: 170rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-base;
			line-height: 42rpx;
			width: 75%;

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				margin: 10rpx 0rpx;
			}

			.name {
				font-size: 32rpx;
				color: $font-color-dark;
				height: 50rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

			.selected-text {
				margin-right: 10rpx;
			}
		}
	}

	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2rpx;
		color: $font-color-base;
		padding-top: 30rpx;
		padding-left: 10rpx;
	}

	.item-list {
		padding: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;

		text {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 100rpx;
			min-width: 60rpx;
			height: 60rpx;
			padding: 0 20rpx;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.selected {
			background: #fbebee;
			color: $uni-color-primary;
		}
	}
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	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: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 35vh;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;

		.btn {
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 100rpx;
			background: $uni-color-primary;
			font-size: $font-base + 2rpx;
			color: #fff;
			margin: 30rpx auto 20rpx;
		}
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(120%);
		}
	}
}
//分享
.btn_fenxiang {
	position: fixed;
	right: 20rpx;
	bottom: 50%;
	z-index: 95;
	width: 100rpx;
	color: #ffffff;
	border-radius: 100%;
	background-color: $background-color;
	line-height: 100rpx;
	text-align: center;
	font-size: 30rpx;
}
.shareDate{
	position: fixed;
	right: 20rpx;
	bottom: 50%;
	z-index: 95;
	color: #ffffff;
	border-radius: 100rpx;
	height: 120rpx;
	line-height: 120rpx;
	background-color: $background-color;
	text-align: center;
	font-size: 30rpx;
}
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100rpx;
	background: rgba(255, 255, 255, 0.9);
	.botton-1{
		width: 100rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		.botton-frame {
			display: flex;
			align-items: center;
			flex-direction: column;
			.img-box {
				width: 45rpx;
				height: 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		.word{
			margin-top: 6rpx;
			font-size:20rpx;
			font-weight:400;
			color:#666666;
			&.active {
				color: $uni-color-primary;
			}
		}
	}
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 100rpx;
		height: 100rpx;

		.iconfont {
			font-size: 40rpx;
			line-height: 48rpx;
			color: $font-color-light;
		}

		&.active,
		&.active .iconfont {
			color: $uni-color-primary;
		}

		.icon-fenxiang2 {
			font-size: 42rpx;
			transform: translateY(-2rpx);
		}

		.iconlikefill {
			font-size: 46rpx;
		}
	}

	.gobuy {
		width: 100%;
		background: #db1935;
		height: 100%;
		color: #ffffff;
		text-align: center;
		padding-top: 25rpx;
		border-radius: 15rpx;
	}

	.action-btn-group {
		display: flex;
		flex:1;
		height: 100%;
		overflow: hidden;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28rpx;
			width: 0;
			// border-right: 1px solid rgba(255, 255, 255, 0.5);
		}

		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100%;
			font-size: $font-lg + 4rpx;
			font-weight:bold;
			background: transparent;
			border-radius:0;
			letter-spacing: 5rpx;

			&.buy-now-btn {
				background-color: #ffb238;
			}

			&.add-cart-btn {
				background:$base-color;
			}
			&.btn-favorites-btn {
				background-color: rgba(24, 179, 255, 1);
			}
		}

		/* .action-btn1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 210rpx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;

			&.buy-now-btn {
				background-color: #ffb238;
			}

			&.add-cart-btn {
				background-color: #db1935;
			}
		} */
	}
}

// 底部拼团、秒杀支付按钮
.goods-pay-box {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 95;
	width: 750rpx;
	height: 100rpx;
	line-height: 1;
	color: #ffffff;
	text-align: center;
	font-size: $font-lg;
	.bgLine {
		background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%);
	}
	// 拼团支付按钮
	.goods-pay {
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		justify-content: center;
		.goods-buttom,
		.goods-buttom-money {
			width: 100%;
		}
		.goods-buttom-money {
			font-size: $font-base;
		}
	}
	.goods-pay-stop,
	.goods-pay {
		padding: 15rpx 0;
		height: 100%;
		width: 100%;
	}
	.goods-pay-stop {
		background: $color-gray;
		line-height: 70rpx;
	}
}


//拼团列表
.pinklistbox {
	background: #ffffff;
	text-align: center;
	font-size: 26rpx;
	margin-top: 25rpx;
	.listbox-1{
		padding: 25rpx;
		font-size:$font-lg - 2rpx;
		font-weight:500;
		color:#333333;
		border-bottom: 1px solid #EEEEEE;
		.more{
			font-size:$font-base - 2rpx;
			font-weight:500;
			color:#999999;
			image {
				width: 25rpx;
				height: 25rpx;
			}
		}
	}
	.pinklist{
		margin: 0 25rpx;
		
		.pinklist_list{
			padding: 25rpx 0;
			border-bottom: 1px solid #EEEEEE;
			&:nth-last-child(1){
				border-bottom: none;
			}
		}
	}
}

/* .pinklistbox {
	background: #ffffff;
	margin-top: 25rpx;
	overflow: hidden;
} */

.pink_num {
	background: -webkit-linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 15rpx 25rpx;
	font-size: 26rpx;
	color: #dd524d;
}

.pint {
	background: -webkit-linear-gradient(0deg, #fa2740,#fe5544);
	border-radius:10rpx;
	margin-left: 20rpx;
	padding: 20rpx 25rpx;
	color: #ffffff;
	font-size: $font-base - 2rpx;

	/* .iconenter {
		font-size: 15px;
		color: #ffffff;
	} */
}



.pink_row {
	.pink_img{
		width: 70rpx;
		height: 70rpx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
	}
	
}
.pink_people {
	font-size: $font-base - 2rpx;
	// margin-top: 10rpx;
	text {
		color: $font-color;
	}
}

.pink_time {
	font-size: 26rpx;
	color: #909399;
}

.pink_name {
	font-size:30rpx;
	color:#333333;
	margin-left: 20rpx;
}
.More {
	width: 100%;
	line-height: 2;
	background-color: #fc2a3f;
	font-size:$font-lg;
	margin: 0 auto;
	text-align: center;
	color: #ffffff;
	// border-radius: 50rpx;
}
.mask {
	z-index: 999;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
	image {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}
}
</style>