<!-- 商家商品详情 -->
<template>
	<view class="content">
		<view class="top-title">
			<view class="">机动车小助手</view>
		</view>


		<view class="m-top">

			<view class="cont-box">
				<view class="dis">
					<view class="ju">￥{{obj.realPrice /100 }}</view>
					<view class="hui" v-if="obj.realPrice != obj.originalPrice ">原价{{obj.originalPrice / 100}}</view>
				</view>
				<view class="t-title">
					{{titles}}
				</view>
				<view class="san">
					<view class="dis" @click="gocoun()">
						<view class="o-icon">
							<image src="http://www.nuoyunr.com/lananRsc/detection/sst.png" mode=""></image>
						</view>
						<view class="sb">优惠券</view>
					</view>
					<view class="dis">
						<view class="o-icon">
							<image src="http://www.nuoyunr.com/lananRsc/j1.png" mode=""></image>
						</view>
						<view class="sb">上门取车</view>
					</view>
					<view class="dis">
						<view class="o-icon">
							<image src="http://www.nuoyunr.com/lananRsc/detection/xyy.png" mode=""></image>
						</view>
						<view class="sb">随时预约</view>
					</view>
				</view>
				<view class="zui-di">
					<!-- <view class="">该商品包含:</view> -->
					<view class="popup-box">
						<view :class="{'lan':skuid == item.id}" class="p-box" v-for="(item,index) in skulist"
							:key="index" @click="getsku(item.id,item.skuName,item.price)">
							<text>{{item.skuName}}</text>
						</view>
					</view>


				</view>
				<view class="quan" @click="gocoun()">
					<view class="dis">
						<view class="q-zuo">
							<image src="http://www.nuoyunr.com/lananRsc/detection/hongbao.png" mode=""></image>
						</view>
						<view class="zhong" @click="gocoun()">
							<view class="q-hei" v-if="!discount">点击查看您的可用优惠券</view>

							<view class="dis" v-else>
								<view class="xh">
									<text>￥{{discount || 0}}</text>
								</view>

							</view>
						</view>
					</view>
					<view class="q-you" @click="gocoun()">
						<uni-icons type="right" size="20" color="#AFAFAF"></uni-icons>
					</view>
				</view>

			</view>
		</view>
		<!-- <view style="width: 100%; height: 110px;"></view> -->
		<view class="bai-box" v-if="false">
			<view class="quan" @click="gocoun()">
				<view class="dis">
					<view class="q-zuo">
						<image src="http://www.nuoyunr.com/lananRsc/detection/hongbao.png" mode=""></image>
					</view>
					<view class="zhong" @click="gocoun()">
						<view class="q-hei" v-if="!discount">当前有可用优惠券</view>
						<view class="q-hei" v-else>当前无可用优惠券</view>
						<view class="dis">
							<view class="xh">
								<text>￥{{item.discount || 0}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="q-you" @click="gocoun()">
					<uni-icons type="right" size="20" color="#AFAFAF"></uni-icons>
				</view>
			</view>

		</view>

		<view class="ail-box">
			<view class="h-title">预约日期</view>
			<scroll-view scroll-x="true" class="box-bottom">
				<view class="santu" :class="{'lanbox' : tapindex == index}" v-for="(items,index) in itmelist"
					:key="index" @click="gettap(index,items)">
					<view class="" style="font-size: 18px;">{{items.dateStr.substring(5,10).replace('-','月')}}
					</view>
					<view class="">{{items.weekStr}}</view>
				</view>
			</scroll-view>
			<view class="h-title">预约时段</view>
			<view class="dis">
				<view class="wushi" :class="{'lanbox' : sx == 0}" @click=" sw(0)">
					<view class="">上午</view>
					<view class="">当前预约：{{renshu.morningCount}}人</view>
				</view>
				<view class="wushi" :class="{'lanbox' : sx == 1}" @click=" sw(1) ">
					<view class="">下午</view>
					<view class="">当前预约：{{renshu.afterCount}}人</view>
				</view>

			</view>
		</view>
		<!-- 	<reservationCom :pid="pid" type="sku" @shang="shang" @xia="xia"></reservationCom> -->
		<!-- <paymentComp :pid="pid" :zjData="zjData" type="sku"></paymentComp> -->
		<view class="ail-box" style="margin-bottom: 1px;">

			<view class="h-dx">

				<view class="">上传证件</view>
				<view class="ds">
					<view class="d-button" :class="{'lx' : zjShow == 1  }" @click="ifzjShow(1)">
						<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" zjShow == 1"></u-icon>
					</view>
					<view style="margin-right: 10px;">是</view>
					<view class="d-button" :class="{'lx' : zjShow == 0  }" @click="ifzjShow(0)">
						<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" zjShow == 0"></u-icon>
					</view>
					<view style="margin-right: 10px;">否</view>
				</view>
			</view>
			<view class="h-dx">
				<view class="">使用本机号码</view>
				<view class="ds">
					<view class="d-button" :class="{'lx' : telShow == 1  }" @click="iftelShow(1)">
						<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" telShow == 1"></u-icon>
					</view>
					<view style="margin-right: 10px;">是</view>
					<view class="d-button" :class="{'lx' : telShow == 0  }" @click="iftelShow(0)">
						<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" telShow == 0"></u-icon>
					</view>
					<view style="margin-right: 10px;">否</view>
				</view>
			</view>
			<view class="h-dx" v-if="telShow == 0 ">
				<view class="">请输入联系方式</view>
				<view class="ds" style="text-align: right;">
					<input type="text" placeholder="请输入联系方式" v-model="dataObj.otherPhone">
				</view>
			</view>
			<view class="h-dx">
				<view class="">线上支付</view>
				<view class="ds">
					<view class="d-button" :class="{'lx' : dataObj.isPayOnline == 1  }" @click="iftimeShow(1)">
						<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPayOnline == 1"></u-icon>
					</view>
					<view style="margin-right: 10px;">是</view>
					<view class="d-button" :class="{'lx' : dataObj.isPayOnline == 0  }" @click="iftimeShow(0)">
						<u-icon name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPayOnline == 0"></u-icon>
					</view>
					<view style="margin-right: 10px;">否</view>
				</view>
			</view>
			<view class="h-dx">
				<view class="">上门取车</view>
				<view class="ds">
					<view class="d-button" :class="{'lx' : dataObj.isPickCar == 1  }" @click="ifcarShow(1)"> <u-icon
							name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPickCar == 1"></u-icon>
					</view>
					<view style="margin-right: 10px;">是</view>
					<view class="d-button" :class="{'lx' : dataObj.isPickCar == 0  }" @click="ifcarShow(0)"> <u-icon
							name="checkbox-mark" color="#fff" size="16" v-if=" dataObj.isPickCar == 0"></u-icon>
					</view>
					<view style="margin-right: 10px;">否</view>
				</view>
			</view>
			<view class="h-dx">
				<view class="">备注</view>
				<input type="text" style="z-index: 1;text-align: right;" placeholder="请输入备注" v-model="dataObj.remark">
			</view>
			<view class="h-dx" v-if="zjData">
				<view class="">车牌号：</view>
				<view class="">{{zjData.PlateNo}}</view>
			</view>
			<view class="h-dx" v-if="zjData">
				<view class="">品牌型号：</view>
				<view class="">{{zjData.Model}}</view>
			</view>
			<view class="h-dx" v-if="zjData">
				<view class="">性质：</view>
				<view class="">{{zjData.UseCharacter}}</view>
			</view>
			<view class="h-dx" v-if="zjData">
				<view class="">车架号：</view>
				<view class="">{{zjData.Vin}}</view>
			</view>
		</view>


		<view class="xia-box">
			<view class="biaoti">
				<view class="xian"></view>
				<view class="zxi">详细信息</view>
				<view class="xian"></view>
			</view>
			<!-- <view  v-html="obj.goodsDesc"></view> -->
			<u-parse :content="obj.goodsDesc" :tagStyle="style"></u-parse>
		</view>
		<view style="width: 100%; height: 60px;"></view>
		<view class="bott">
			<!-- 	<view class="dju">￥{{parseFloat(((hj+pickPrice)/100)).toFixed(2)}}</view> -->
			<view style="z-index: 999;" @click="createOrder()">
				<view class="b-left">
					<text v-if="dataObj.isPayOnline == 1 || dataObj.isPayOnline == null ">立即下单</text>
					<text v-if="dataObj.isPayOnline == 0">立即下单</text>
				</view>
				<view class="b-right">
					<image src="http://www.nuoyunr.com/lananRsc/detection/zhifu.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="bott" v-if="false">
			<view class="dju">￥{{obj.realPrice /100}}</view>
			<view class="b-left" @click="getpayment()">立即预约</view>
			<view class="b-right" @click="getpayment()">
				<image src="http://www.nuoyunr.com/lananRsc/detection/zhifu.png" mode=""></image>
			</view>
		</view>

		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="skupopup">
				<view class="dju">￥{{obj.realPrice /100}}</view>
				<view class="gg-font">已选：{{skuName}}</view>
				<view class="popup-box">
					<view :class="{'lan':skuid == item.id}" class="p-box" v-for="(item,index) in skulist" :key="index"
						@click="getsku(item.id,item.skuName,item.price)">
						<text>{{item.skuName}}</text>
					</view>
				</view>
				<view class="p-anniu" @click="twopayment()">
					<text>完成</text>
				</view>
			</view>
		</u-popup>
		<view class="fanhuixx" @click="dafan()">
			<uni-icons type="left" size="24"></uni-icons>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import paymentComp from '@/pages/detection/paymentComponemts.vue'

	export default {
		data() {
			return {
				type: 'sku',
				titles: '蓝安商品',
				pageNum: 1, //第几页
				pageSize: 20, //一页多少张
				totalPages: 0, //总数
				realPrices: 0,
				plist: [],
				bannerlist: [],
				couponList: [],
				skulist: [],
				obj: {
					originalPrice: "0",
					realPrice: "0",
				},
				style: {
					image: 'width: 100%;'
				},
				skuName: '',
				show: false,
				id: '',
				payobj: '',
				skuid: '',
				indexid: 0,
				imgs: '',
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				xprice: 0,
				duration: 500,
				pid: '',
				couponId: null,
				coupontitle: null,
				discount: null,
				couponType: null,
				idCardImage: null,
				zjData: '',
				partnerName: '',
				address: '',
				partnerId: '',
				itmelist: '',
				appointmentday: '',
				tapindex: null,
				sx: null,
				renshu: {
					morningCount: 0,
					afterCount: 0
				},
				dataObj: {
					couponId: null,
					driverLicenesImg: null, //证件
					isPayOnline: null, //线上支付
					isPickCar: null, //是否上门
					otherPhone: null, //电话号码
					remark: null, //备注
				},
				pickCarId: null,
				zjShow: null,
				telShow: null,
				zjData: '',
				carShow: null,
				dateStr: ''

			}
		},
		onLoad(option) {
			this.id = option.id
			this.sange()
			uni.$on('pickCar', (data) => {

				this.pickCarId = data

			})
			uni.$on('imgUrl', (data) => {
				console.log(data, '1111');
				this.dataObj.driverLicenesImg = data

				this.getimg(data)

			})
			uni.$on('userCouponDiscount', (data) => {
				console.log('jianting', data);
				//优惠券页面返回的东西
				this.couponId = data.couponId
				this.coupontitle = data.title
				this.discount = data.discount
				this.couponType = data.couponType
			})


		},
		onShow() {

		},
		mounted() {
			this.imgs = this.$baseUrl
			this.getindex()
		},
		components: {
			paymentComp,

		},
		methods: {
			async createOrder() {

				if (this.zjShow == null) {
					uni.showToast({
						title: '选择证件为空',
						icon: 'error'
					})
					return
				}
				if (this.telShow == null) {
					uni.showToast({
						title: '选择本机号码为空',
						icon: 'error'
					})
					return
				}


				if (!this.appointmentday) {
					uni.showToast({
						title: '预约日期未填',
						icon: 'error'
					})
					return
				}

				if (this.sx == null) {
					uni.showToast({
						title: '上午下午未填',
						icon: 'error'
					})
					return
				}

				if (this.telShow == 0 && this.dataObj.otherPhone == null) {
					uni.showToast({
						title: '联系方式未填',
						icon: 'error'
					})
					return
				}
				if (this.zjShow == 1 && this.dataObj.driverLicenesImg == null) {
					uni.showToast({
						title: '证据照片未填',
						icon: 'error'
					})
					return
				}
				if (this.dataObj.isPickCar == null) {
					uni.showToast({
						title: '上门取车信息未填',
						icon: 'error'
					})
					return
				}
				if (this.dataObj.isPickCar == 1 && this.pickCarId == null) {
					uni.showToast({
						title: '上门取车信息未填',
						icon: 'error'
					})
					return
				}
				if (this.dataObj.isPayOnline == null) {
					uni.showToast({
						title: '没选支付方式',
						icon: 'error'
					})
					return
				}

				let data = {
					skuId: this.skuid,
					appointmentDay: this.appointmentday,
					appointmentPeriod: this.sx,
					otherPhone: this.dataObj.otherPhone,
					driverLicenesImg: this.dataObj.driverLicenesImg,
					isPayOnline: this.dataObj.isPayOnline,
					isPickCar: this.dataObj.isPickCar,
					remark: this.dataObj.remark,
					carModel: this.zjData.Model,
					carNature: this.zjData.UseCharacter,
					carIdNo: this.zjData.Vin,
					carNo: this.zjData.PlateNo,
					pickCarId: this.pickCarId

				}
				let restime = await request({
					url: '/appInspection/goods/appointmentInspection',
					method: 'post',
					data: data

				})
				if (this.dataObj.isPayOnline == 0) {
					uni.navigateTo({
						url: '/pages/detection/success?type=xd'
					})
					return
				}

				let datas = {
					goodsType: 'jc',
					mdAmount: this.obj.realPrice / 100,
					skuId: this.skuid,
					otherPhone: this.dataObj.otherPhone,
					driverLicenesImg: this.dataObj.driverLicenesImg,
					isPayOnline: this.dataObj.isPayOnline,
					isPickCar: this.dataObj.isPickCar,
					remark: this.dataObj.dataObj,
					carModel: this.zjData.Model,
					carNature: this.zjData.UseCharacter,
					carIdNo: this.zjData.Vin,
					carNo: this.zjData.PlateNo,
					couponId: this.couponId,
					pickCarId: this.pickCarId

				}
				let res = await request({
					url: '/orderApi/createOrder',
					method: 'post',
					data: datas
				})

				if (res.data) {
					console.log('执行');
					const ress = await request({
						url: '/payApi/jcPrepayment?type=jsapi' + '&orderId=' + res.data,
					})
					console.log(ress);
					wx.requestPayment({
						timeStamp: ress.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
						nonceStr: ress.nonceStr, // 随机字符串，长度为32个字符以下。
						package: ress.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
						signType: ress.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
						paySign: ress.paySign, // 签名，详见签名生成算法
						success: function(res) {
							console.log('成功', res);
							if (res.errMsg = 'requestPayment:ok') {
								uni.showToast({
									title: '支付成功'
								})
								uni.navigateTo({
									url: '/pages/detection/success?type=zf'
								})
							}
							// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
						},
						fail: function(res) {
							console.log('执行失败1', res);
							that.cancelpay()
						}
					})
				}
			},
			ifzjShow(id) {
				if (id == 1) {
					this.gohomemy()
				}
				this.zjShow = id
			},
			iftelShow(id) {
				this.telShow = id
				if (id == 1) {
					// let user = uni.getStorageSync('userinfo')
					// // console.log(user.nickName);
					// this.dataObj.otherPhone = user.nickName
				}
			},
			iftimeShow(id) {
				this.dataObj.isPayOnline = id
			},
			ifcarShow(id) {
				this.dataObj.isPickCar = id
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/detection/godoor?goodsName=' + this.payobj.goodsName + '&goodsId=' + this
							.payobj.goodsId + "&type=" + this.type
					})
				}
			},
			gohomemy() {
				uni.navigateTo({
					url: '/pages/detection/my-user'
				})
			},
			async paymentComponemts() {
				if (this.type == 'goods') {
					let res = await request({
						url: '/appInspection/goods/orderGoodsInfo?goodsId=' + this.pid,
						method: 'get',
					})
					console.log('skuId', res);
					this.payobj = res.data
				}

				if (this.type == 'sku') {
					let res = await request({
						url: '/appInspection/goods/orderSkuInfo?goodsId=' + this.pid,
						method: 'get',
					})
					console.log('skuId', res);
					this.payobj = res.data

				}
			},
			async reservationCom() {
				let data = {
					goodsId: this.skuid,
					type: 'sku'
				}
				let res = await request({
					url: '/appInspection/goods/appointmentDateList',
					method: 'get',
					params: data
				})
				this.partnerName = res.data.partnerName
				this.address = res.data.address
				this.partnerId = res.data.partnerId
				this.itmelist = res.data.dataList
				this.appointmentday = res.data.dataList[0].dateStr
				// console.log(this.appointmentday.substring(5, 10).replace('-', '月'));

			},
			sw(id) {
				this.sx = id

			},
			gettap(index, items) {


				this.tapindex = index
				this.renshu = items
				this.appointmentday = items.dateStr
			},
			async getimg(url) {

				let data = {
					// licenseImage :this.licenseImage,
					imagePath: url,
				}

				const res = await request({
					url: '/system/userCar/appVehicleLicenseOCR2',
					method: 'post',
					params: data
				})
				if (res.code == 200) {
					console.log('识别成功');
					this.zjData = res.data

				} else {
					uni.showToast({
						title: '识别失败 请从新上传',
						icon: 'none'
					})
				}

			},
			shang(val) {
				console.log('父级', val);
			},
			xia(val) {
				console.log('父级', val);
			},
			gocoun() {
				uni.navigateTo({
					url: '/pages/detection/coupon?id=' + this.pid + "&type=" + this.type
				})

			},
			// 
			open() {
				console.log('open');
			},
			close() {
				this.getindex()
				this.show = false
				console.log('close');
			},
			async getindex() {
				let res = await request({
					url: '/appInspection/goods/goodsDetail?goodsId=' + this.id,
					method: 'get',
				})
				this.obj = res.data
				if (!res.data.couponList) {
					res.data.couponList = []
				}
				console.log(res);
				this.couponList = res.data.couponList.slice(0, 3);
				this.bannerlist = res.data.imageList
				console.log(this.bannerlist)

				this.titles = this.obj.title

				console.log(res);

			},
			async sange() {
				let res = await request({
					url: '/appInspection/goods/goodsSkuList?goodsId=' + this.id,
					method: 'get',
				})
				if (res.data.length == 0) {
					uni.navigateTo({
						url: '/pages/detection/payment?id=' + this.id + '&type=goods'
					})
				} else {
					this.skulist = res.data
					this.skuid = res.data[0].id
					this.pid = res.data[0].id
					this.skuName = res.data[0].skuName
					this.obj.realPrice = res.data[0].price

					this.reservationCom()
					this.paymentComponemts()


				}

			},
			async getpayment() {

				let res = await request({
					url: '/appInspection/goods/goodsSkuList?goodsId=' + this.id,
					method: 'get',
				})
				if (res.data.length == 0) {
					uni.navigateTo({
						url: '/pages/detection/payment?id=' + this.id + '&type=goods'
					})
				} else {
					this.skulist = res.data
					this.skuid = this.skulist[0].id
					this.show = true
				}

			},
			dafan() {
				uni.navigateBack()
			},
			getsku(Id, name, price) {
				this.skuid = Id
				this.pid = Id
				this.skuName = name
				this.obj.realPrice = price
				console.log(this.pid);
			},
			twopayment() {
				uni.navigateTo({
					url: '/pages/detection/payment?id=' + this.skuid + '&type=sku'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-bottom: 90px;

	}

	.fanhuixx {
		z-index: 9999;
		position: fixed;
		top: 45px;
		left: 20px;
	}

	.skupopup {
		background-color: white;
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 10px 10px 0px 0px;
		font-weight: bold;
	}

	.lan {
		color: #fff !important;
		background-color: #0D2E8D !important;
		border: 1px solid #0D2E8D !important;
		font-weight: bold;
	}

	.p-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;
		padding: 10px;
		font-size: 18px;
		font-weight: 500;
		color: #000;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.p-boxlan {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;
		padding: 10px;
		font-size: 15px;
		font-weight: 400;
		color: #0D2E8D !important;
		margin-bottom: 10px;
		background-color: #E1E7FB !important;
		border: 1px solid #0D2E8D !important;
		margin-right: 10px;
	}

	.p-boxlan2 {
		display: flex;
		padding: 10px;
		font-size: 15px;
		font-weight: 400;
		color: #0D2E8D !important;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.p-anniu {
		width: 95%;
		height: 40px;
		margin: 20px auto;
		border-radius: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 16px;
		font-weight: bold;
		background: #0D2E8D;

	}

	.popup-box {
		// border-top: 1px solid #EEEEEE;
		width: 100%;
		box-sizing: border-box;
		padding-top: 5px;
		// margin-top: 20px;
		display: flex;
		flex-wrap: wrap;

	}

	.ys1 {
		text-align: center;
		font-size: 30px;
		font-weight: 500;
		color: #63330B;
	}

	.ys2 {
		font-size: 15px;
		font-weight: 400;
		color: #333333;
	}

	.ys3 {

		font-size: 15px;
		font-weight: 400;
		color: #63330B;
	}

	.q-hei {
		font-size: 15px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10px;
	}

	.quan {
		width: 100%;
		height: 68px;
		background: #FDF7F7;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.xh {
		width: 48px;
		height: 20px;
		background: #FF571A;
		border-radius: 2px;
		color: white;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 5px;
	}

	.q-zuo {
		width: 70px;
		height: 70px;

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

	.bott {
		width: 100%;
		height: 50px;
		background-color: #EEEEEE;
		position: fixed;
		background: white;
		bottom: 0px;
		box-sizing: border-box;
		padding: 10px;
		z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;

	}

	.dju {
		font-size: 25px;
		font-weight: bold;
		color: #FF571A;
	}

	.b-left {
		position: fixed;
		bottom: 20px;
		right: 10%;
		z-index: 99999;
		font-size: 18px;
		font-weight: 400;
		color: #FFFFFF;
		;

	}

	.b-right {
		width: 40%;
		height: 60px;
		position: fixed;
		bottom: 0px;
		right: 0px;

		image {
			z-index: 99999;
			width: 100%;
			height: 100%;
		}
	}

	.bgang {
		width: 100%;
		height: 50px;
		background-color: white;
	}

	.m-top {
		width: 100%;
		height: 375px;
		// overflow: hidden;
		position: relative;
		box-sizing: border-box;
		padding: 1px;

	}

	.uni-margin-wrap {
		height: 375px;
	}

	.swiper {
		height: 375px;

	}

	.swiper-item {
		display: block;
		height: 375px;
		width: 100%;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		height: 375px;
		padding: 0 100rpx;
	}

	.top-img {
		width: 100%;
		height: 375px;

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

	.cont-box {
		width: 85%;
		// position: absolute;
		// z-index: 9999;
		// left: 50%;
		// transform: translate(-50%, -75%);
		border-radius: 8px;
		padding: 15px;
		background: white;
		margin: 15px auto;
		margin-top: 100px;

	}

	.bai-box {
		width: 93%;
		margin: 0 auto;
		border-radius: 6px;
		margin-bottom: 10px;
		background-color: white;
		box-sizing: border-box;
		padding: 15px;
		margin-top: 15px;
	}

	.xia-box {
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 6px;
		margin-bottom: 10px;
		background-color: white
	}

	.pinglun {
		width: 100%;
		display: flex;
	}

	.ptouxiang {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		overflow: hidden;

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

	.pp-box {
		width: 80%;
	}

	.p-bse {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-nr {}

	.xiab-box {

		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 6px;
		margin-bottom: 10px;
		background-color: white
	}

	.dis {
		z-index: 9;
		display: flex;
		align-items: center;
	}

	.san {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10px auto;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.o-icon {
		width: 20px;
		height: 20px;

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

	.sb {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		margin-left: 5px;
	}

	.zui-di {
		width: 100%;
		display: flex;
		align-items: center;
		// justify-content: space-between;
	}

	.hui {
		font-size: 14px;
		font-weight: 400;
		text-decoration: line-through;
		color: #AAAAAA;
	}

	.ju {
		font-size: 30px;
		font-weight: bold;
		color: #FF571A;
		margin-right: 10px;
	}

	.t-title {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		margin: 10px 0px;
	}

	// .bai-box{
	// 	width: 100px;
	// 	box-sizing: border-box;
	// 	padding: 15px;

	// }
	.biaoti {
		width: 70%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.zxi {
		font-size: 17px;
		font-weight: 500;
		color: #333333;
	}

	.xian {
		width: 65px;
		height: 0px;
		opacity: 1;
		border: 1px solid #999999;
	}

	.yhz {
		position: absolute;
		color: #63330B;
		top: 3px;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.yhzc {
		width: 144px;
		height: 26px;
		position: absolute;
		color: #63330B;
		top: 3px;
		left: 50%;
		transform: translate(-50%, -50%);

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

	.xsa {
		width: 100%;
		position: relative;
		background: linear-gradient(180deg, #FFF4DB 0%, #FFFFFF 100%);
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.zui-bottom {
		z-index: 999;
		width: 100%;
		height: 60px;


		background-color: #AAAAAA;
	}

	.anniu {

		z-index: 999;
		width: 30%;
		height: 100%;

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

	.baigang {
		width: 100%;
		height: 50px;
		background: #FFFFFF;
		padding: 16px;
	}

	.h-dang {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.top-title {
		width: 100%;
		height: 88px;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
		box-sizing: border-box;
		padding-top: 50px;
		z-index: 999;
	}

	.twob {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	// 
	.ail-box {
		width: 100%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		background: #FFFFFF;
		margin-bottom: 10px;
		margin-top: 30px;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 16%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.on-input {
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;

		padding: 10px 0px;
		display: flex;
		align-items: center;
	}

	.baoti {
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
		margin-right: 10px;
	}

	.box-bottom {
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.santu {
		width: 32%;
		display: inline-block;
		box-sizing: border-box;
		padding: 10px;
		background: #F8FAFB;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		// color: #999999;
		margin-top: 15px;
		margin-right: 10px;
	}

	.lanbox {
		background: #0D2E8D !important;
		color: #fff !important;
	}



	.wushi {
		width: 49%;

		box-sizing: border-box;
		padding: 10px;
		background: #F8FAFB;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		// color: #999999;
	}

	.h-title {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		margin: 10px auto;
	}

	.bottom-d {
		width: 100%;
		height: 80px;
		background-color: white;
		position: fixed;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.annniu {
		height: 40px;
		background: #0D2E8D;
		width: 90%;
		border-radius: 50px;
		display: flex;
		align-items: center;
		color: white;
		justify-content: center;
	}

	.x-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.x-left {
		display: flex;
		align-items: center;
	}

	.chebiao {
		width: 70px;
		height: 70px;
		margin-right: 10px;

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

	.dh-title {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		margin-bottom: 15px;
	}

	.xh-title {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
	}

	.x-right {
		display: flex;
		align-items: center;
	}

	.x-xia {
		margin-top: 15px;
	}

	.x-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;

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

	.x-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;

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

	.dix {
		display: flex;
		align-items: center;
	}

	.dixx {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.h-dx {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 15px;
	}

	.ds {
		display: flex;
		align-items: center;

	}

	.d-button {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid #999999;
		background: #eeeeee;
		width: 18px;
		height: 18px;
		font-size: 14px;
		margin-right: 10px;
		// margin: 0px 10px;

	}

	.lx {
		border: 1px solid #1c3d9c !important;
		background-color: #1c3d9c;
		color: #fff;
	}
</style>