<template>
	<view class="all-view">
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<view style="font-size: 30rpx;">采购单详情</view>
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 40}px`}"></view>
		<view class="detail-view">
			<view class="buylist-text">
				<view class="buylist-title">
					<image class="buylist-img"
						src="https://www.focusnu.com/media/directive/index/buylisticon/buypaper.png" />
					<view class="buylist-weight">
						采购单
					</view>
				</view>
				<view class="buylist-tags"
					:style="{borderColor:`${tagstype[transobject?.status].color}`,color:`${tagstype[transobject?.status].color}`}">
					{{ tagstype[transobject?.status].name }}
				</view>
			</view>
			<view class="card-middle">

			</view>
			<view class="buylist-contant">
				<view>
					<view class="buylist-number">
						<view class="gray-circle"></view>
						<view class="buylist-number-text">
							采购单号：
							<text>
								{{ transobject?.cgdNo }}
							</text>
						</view>
					</view>
					<view class="buylist-number">
						<view class="gray-circle"></view>
						<view class="buylist-number-text">
							采购日期：
							<text>
								{{ transobject?.qgDate}}
							</text>
						</view>
					</view>
				</view>
				<view class="card-top-right">
					<view class="">
						<text class="card-money">
							￥
						</text>

						<text class="card-price">
							{{ transobject?.totalPrice}}
						</text>

					</view>
					<view class="card-price-ex">
						订单金额
					</view>
				</view>
			</view>
			<view class="buylist-text">
				<view class="buylist-title">
					<image class="company-img"
						src="https://www.focusnu.com/media/directive/index/buylisticon/company.png" />
					<view class="buylist-weight">
						机构信息
					</view>
				</view>
			</view>
			<view class="card-middle">

			</view>
			<view class="message-mt">
				<view class="buylist-number">
					<view class="gray-circle"></view>
					<view class="buylist-show">
						机构名称：
						<text>
							{{ transobject?.departName}}
						</text>
					</view>
				</view>
				<view class="buylist-number">
					<view class="gray-circle"></view>
					<view class="buylist-show-two">
						收货地址：
						<view class="buylist-show-relative">

							{{ transobject?.comRegisterAddress}}
						</view>
					</view>
				</view>
				<view class="buylist-number" style="margin-top: 60rpx;">
					<view class="gray-circle"></view>
					<view class="buylist-show">
						<view class="special-text">
							联系人：
						</view>

						<text>
							{{ transobject?.qgBy}}
						</text>
					</view>
				</view>
				<view class="buylist-number">
					<view class="gray-circle"></view>
					<view class="buylist-show">
						<view class="special-text">
							电话：
						</view>

						<text>

							{{ transobject?.qgTel}}
						</text>
						<image class="company-img" style="margin-left: 20rpx;"
							src="https://www.focusnu.com/media/directive/index/buylisticon/takephone.png" />
					</view>
				</view>
				<view class="buylist-text">
					<view class="buylist-title">
						<image class="company-img"
							src="https://www.focusnu.com/media/directive/index/buylisticon/saleshop.png" />
						<view class="buylist-weight">
							供应商信息
						</view>
					</view>
				</view>
				<view class="card-middle">

				</view>
				<view class="buylist-number">
					<view class="gray-circle"></view>
					<view class="buylist-show">
						<view class="special-text">
							供应商：
						</view>

						<text>
							{{ transobject?.gysName}}
						</text>
					</view>
				</view>
				<view class="buylist-number">
					<view class="gray-circle"></view>
					<view class="buylist-show">
						<view class="special-text">
							联系人：
						</view>

						<text>
							{{ transobject?.gysLxr}}
						</text>
					</view>
				</view>
				<view class="buylist-number">
					<view class="gray-circle"></view>
					<view class="buylist-show">
						<view class="special-text">
							电话：
						</view>

						<text>
							{{ transobject?.gysLxrdh}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card-view" v-for="(item,index) in cardlist" :key="index">
			<view class="card-text">
				<view class="card-title">
					{{ item.wlName }}
				</view>

				<view class="card-number">
					<view class="card-number-text">
						采购数量
					</view>
					<view class="number">
						{{ item.purchaseQuantity }}
					</view>
				</view>
			</view>
			<view class="card-middle">

			</view>
			<view class="buylist-number" style="margin-top: 35rpx;margin-left: 50rpx;">
				<view class="buylist-show">
					规格型号：
					<text>
						{{ item.wlSpecificationModel }}
					</text>
				</view>
			</view>
			<view class="buylist-number" style="margin-left: 50rpx;">
				<view class="buylist-show">
					品牌型号：
					<text>
						{{ item.brandType }}
					</text>
				</view>
			</view>
			<view class="buylist-number" style="margin-left: 50rpx;">
				<view class="buylist-show-two">
					生产厂家：
					<view class="buylist-show-relative" style="width: 440rpx;">
						{{ item.manufacturer }}
					</view>
				</view>
			</view>
			<view class="card-middle special-middle">

			</view>
			<view class="cardruler-view">
				<view class="cardruler-father">
					<view class="cardruler-one">
						<view class="one-up">
							<text class="one-up-mark">
								￥
							</text>
							<text class="one-up-money">
								{{ item.procurementPrice }}
							</text>
						</view>
						<view class="one-down">
							采购价格
						</view>
					</view>
					<view class="cardruler-one">
						<view class="one-up">
							<view class="one-up-pian">
								{{  item.wlUnits }}
							</view>
						</view>
						<view class="one-down">
							采购单位
						</view>
					</view>
					<view class="cardruler-one" @click="djflagclick(item)">
						<view class="one-up">
							<text class="one-up-mark">
								￥
							</text>
							<text class="one-up-money">
								{{  item.arrivalPrice }}
							</text>
							<image class="phone-img"  v-if="transobject.izGysConfirmed==`N`&&transobject.cgdType==0"
								src="https://www.focusnu.com/media/directive/index/buylisticon/edit.png" />
						</view>
						<view class="one-down">
							销售价格
						</view>
					</view>
					<view class="cardruler-one" @click="dwflagclick()">
						<view class="one-up">
							<view class="one-up-pian">
								{{ item.wlUnits }}
							</view>
						<!-- 	<image class="phone-img"
								src="https://www.focusnu.com/media/directive/index/buylisticon/edit.png" /> -->
						</view>
						<view class="one-down">
							销售单位
						</view>
					</view>
				</view>
				<view class="card-middle">

				</view>
				<view class="cardruler-father">
					<view class="cardruler-one">
						<view class="one-up">
							<text class="one-up-number">
								{{ item.rksl }}
							</text>
						</view>
						<view class="one-down">
							入库数量
						</view>
					</view>
					<view class="cardruler-one">
						<view class="one-up">
							<text class="one-up-number">
								{{ item.wrksl }}
							</text>
						</view>
						<view class="one-down">
							挂账数量
						</view>
					</view>
					<view class="cardruler-one">
						<view class="one-up">
							<text class="one-up-number">
								{{ item.xzsl }}
							</text>
						</view>
						<view class="one-down">
							销账数量
						</view>
					</view>
					<view class="cardruler-one">
						<view class="one-up">
							<text class="one-up-mark">
								￥
							</text>
							<text class="one-up-money">
								{{ (item.purchaseQuantity * item.arrivalPrice).toFixed(2) }}
							</text>
						</view>
						<view class="one-down">
							销售金额
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card-view-finally">

		</view>
		<view class="bottom-button-view">
			<view class="button-back" @click="goBack">
				返回
			</view>
			<view class="button-right" @click="listisok" v-if="transobject.izGysConfirmed==`N`&&transobject.cgdType==0" >
				确认
			</view>
			<view class="button-bad" v-else >
				确认
			</view>
		</view>
		<view class="tanchuc guodu"
			:style="{height:dwflag?(Math.ceil(list.length / 2)>4?'862rpx':(Math.ceil(list.length / 2)*100 + 462)+'rpx'):'0 !important'}">
			<view class="tittop">
				<text></text>
				<view>销售单位</view>
			</view>
			<scroll-view scroll-y="true" class="scrollxhdw" :show-scrollbar="false"
				:style="Math.ceil(list.length / 2)>4?'height:400rpx':'height:'+ (Math.ceil(list.length / 2)*100)+'rpx'">
				<view class="xhdw">
					<view v-for="(v,i) in list " :key='i' :class="i==dwact?'act':''" @click="dwact = i;qita = v.text">
						{{v.text}}
					</view>
				</view>
			</scroll-view>

			<view class="qit" style="width: 518rpx;">
				<text>其它</text>
				<view style="width: 430rpx;">
					<input type="text" v-model="qita" @blur="blur">
				</view>
			</view>
			<view class="botrn" style="position: relative;">
				<view @click="dwflag = false">取消</view>
				<view class="botrn-right" @click="queding('dw')">确定</view>
			</view>
		</view>
		<view class="tanchuc guodu" :style="{height:djflag?'962rpx !important':'0 !important'}">
			<view class="tittop">
				<text></text>
				<view>销售单价</view>
			</view>
			<view class="calculator-father">
				<view v-for="(item,index) in calculatorArray" :key="index">
					<view class="calculator-kuai" style="font-size: 33rpx;" v-if="item==`AE`"
						@click="clickKuai(item,index)" hover-class="btn-active">
						<image src="https://www.focusnu.com/media/xcx/gys_wl_del.png" mode="aspectFill"></image>
					</view>
					<view class="calculator-kuai" v-else @click="clickKuai(item,index)" hover-class="btn-active">
						{{item}}
					</view>
				</view>
			</view>
			<view class="qit">
				<text>单价</text>
				<view>
					<input type="text" v-model="stringShow" disabled maxlength="6">
				</view>
			</view>
			<view class="botrn" style="position: relative;">
				<view @click="djflag = false">取消</view>
				<view @click="queding('dj')">确定</view>
			</view>
		</view>
	</view>
	<tanchuang :show="tanchuangopne" @back="tanchuangopne=false" @right="clickright">
		<template #font>
			<view class="right-font">请仔细确认随货同行单内容，一经确认将无法更改，届时平台将自动发送随货同行单至护理机构，确认生成随货同行单吗？</view>
		</template>
	</tanchuang>
</template>

<script setup lang="ts">
	import { reactive, ref, nextTick } from 'vue';
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { getDictItems, queryCgdInfoList,editArrivalPrice,cgdQueren } from './api.js'
	import tanchuang from '@/compontent/public/tanchuang.vue'

	onLoad((options : Record<string, string | undefined>) => {
		const item = JSON.parse(decodeURIComponent(options.item))
		// console.log(item)
		transobject.value = item;
		gettimearr()
		getDetailList()
	})

	const tagstype = ref([
		{
			name: `待确认`,
			color: `#0074E1`
		},
		{
			name: `采购中`,
			color: `#F03232`
		},
		{
			name: `已完成`,
			color: `#222222`
		},
		{
			name: `已作废`,
			color: `red`
		},
		])

	const transobject = ref({
		status: 0,
		cgdNo: "",
		qgDate: "",
		totalPrice: ""
	})
	const list = ref([])
	const dwflag = ref(false);
	const djflag = ref(false);
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0, "AE"];

	const gettimearr = () => {
		getDictItems({ dictCode: 'xcx_gys_wldw' }).then(res => {
			list.value = res
		})
	}
	const pageNo = ref(1);
	const cardlist = ref([])
	onPullDownRefresh(() => {
		try {
			
			getDetailList()
		} finally {
			uni.stopPullDownRefresh() // 👈 必须手动关闭
		}
	})
	const stopget = ref(false)
	onReachBottom(() => {
		if (!stopget.value) {
			pageNo.value++
			let data = {
				cgdId: transobject.value?.id,
				pageNo: pageNo.value,
			}
			queryCgdInfoList(data).then((res : any) => {
				if (res.success) {
					cardlist.value.push(...res.result.records)
					if (res.result.records.length != 10) {
						stopget.value = true
					}
					// cardlist.value = res.result.records
				} else {
					cardlist.value = [];
					uni.showToast({
						title: res.message,
						icon: 'none',   // 必须写 none 才是文字提示
						duration: 2000
					})
				}
			})
		}
		
	})
	const getDetailList = () => {
		pageNo.value = 1
		stopget.value = false;
		let data = {
			cgdId: transobject.value?.id,
			pageNo: pageNo.value,
		}
		queryCgdInfoList(data).then((res : any) => {
			if (res.success) {
				cardlist.value = res.result.records
			} else {
				cardlist.value = [];
				uni.showToast({
					title: res.message,
					icon: 'none',   // 必须写 none 才是文字提示
					duration: 2000
				})
			}
		})
	}

	const dwact = ref(-1)
	const blur = () => {
		let a = list.value.find(item => item.text == qita.value)
		if (a) {
			list.value.forEach((v, i) => {
				if (v.text == qita.value) {
					dwact.value = i
				}
			})
		} else {
			dwact.value = -1
		}
	}
	const relqita = ref("片")
	const qita = ref("片");

	const djflagnumber = ref(`0.56`)
	const queding = (e) => {
		console.log("e", e)
		if (e === `dw`) {
			relqita.value = qita.value;
			dwflag.value = false
		} else {
			
			let data = {
				id:saveid.value,
				arrivalPrice:stringShow.value
			}
			editArrivalPrice(data).then((res:any)=>{
				if(res.success){
					getDetailList()
					djflag.value = false
				}else {
					cardlist.value = [];
					uni.showToast({
						title: res.message,
						icon: 'none',   // 必须写 none 才是文字提示
						duration: 2000
					})
				}
			})
			// // djflagnumber.value = stringShow.value
			// djflag.value = false
		}
	}
	const stringShow = ref("");
	const relNumber = ref(0);
	const isZero = ref(false);
	const clickKuai = (item : any, index : number) => {
		if (item == "AE") {
			stringShow.value = stringShow.value.slice(0, -1)
			return
		}
		if (stringShow.value.length > 10) { return }
		let a = stringShow.value.indexOf('.')
		if (item == "." && stringShow.value.length == 0) {
			return
		}
		if (item == "." && a > -1) {
			return
		}
		stringShow.value += item
		stringShow.value = stringShow.value.replace(/^(\d+)\.(\d{0,2}).*/, '$1.$2')
		stringShow.value = formatStr(stringShow.value)

	}
	function formatStr(val) {
		if (!val) return ''
		if (val.length >= 2) {
			if (val[0] === '0') {
				if (val[1] === '.') {
					return val
				}
				else if (!isNaN(val[1])) {
					return val.replace(/^0+/, '')
				}
			}
		}
		return val
	}
	
	const saveid = ref("")
	
	const djflagclick = (item:any) => {
		
		if(transobject.value.izGysConfirmed==`N`&&transobject.value.cgdType==0){
			saveid.value = item.id
			stringShow.value = item.arrivalPrice.toString();
			djflag.value = true
		}
		
		
	}

	const dwflagclick = () => {
		// 暂时注释
		// qita.value = relqita.value;
		// dwact.value = -1
		// dwflag.value = true
	}
	const goBack = () => {
		uni.navigateBack()
	}
	const tanchuangopne = ref(false)
	const listisok = () => {
		tanchuangopne.value = true
	}
	
	const clickright = () => {
		let data = {
			id:transobject.value.id,
			izGysConfirmed:'Y'
		}
		cgdQueren(data).then((res:any)=>{
			if(res.success){
				// console.log("看看",res)
				uni.navigateBack()
			}else {
				cardlist.value = [];
				uni.showToast({
					title: res.message,
					icon: 'none',   // 必须写 none 才是文字提示
					duration: 2000
				})
			}
		})
	}
	
</script>

<style scoped lang="less">
	.all-view {
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F7;
	}

	.title-back {
		background-color: #fff;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		.left-father {
			display: flex;
			align-items: center;
			z-index: 1;

			.back-img {
				width: 45rpx;
				height: 40rpx;
				margin-left: 40rpx;
				margin-right: 15rpx;
			}
		}
	}

	.detail-view {
		background-color: white;
		min-height: 925rpx;
		margin-left: 4%;
		width: 92%;
		margin-top: 35rpx;
		border-radius: 40rpx;

		.buylist-text {
			width: 100%;
			height: 100rpx;
			position: relative;

			.buylist-title {
				display: flex;
				padding-top: 45rpx;
				align-items: center;

				.buylist-img {
					width: 32rpx;
					height: 32rpx;
					margin-left: 40rpx;
				}

				.buylist-weight {
					font-weight: 600;
					margin-left: 20rpx;
					font-size: 31rpx;
				}
			}

			.buylist-tags {
				position: absolute;
				right: 25rpx;
				bottom: 10rpx;
				width: 120rpx;
				height: 50rpx;
				border: 2rpx red solid;
				border-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 27rpx;
				border-color: #0074E1;
				color: #0074E1;
			}
		}
	}

	.card-view {
		background-color: white;
		min-height: 680rpx;
		margin-left: 4%;
		width: 92%;
		margin-top: 20rpx;
		border-radius: 40rpx;
	}

	.card-middle {
		margin-top: 8rpx;
		background-color: #f9f9f9;
		height: 2rpx;
		width: 90%;
		margin-left: 5%;
	}

	.buylist-contant {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.gray-circle {
		background-color: #999999;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-left: 50rpx;
		margin-right: 20rpx;
	}

	.buylist-number {
		display: flex;
		align-items: center;
		margin-top: 15rpx;
	}

	.buylist-number-text {
		font-size: 32rpx;
	}

	.card-top-right {
		text-align: center;
		margin-right: 30rpx;
		margin-top: 10rpx;

		.card-money {
			font-weight: 600;
			font-size: 34rpx;
		}

		.card-price {
			font-weight: 600;
			font-size: 40rpx;
			margin-left: -10rpx;
		}

		.card-price-ex {
			font-size: 24rpx;
			color: black;
			margin-top: 5rpx;
		}
	}

	.message-mt {
		padding-top: 15rpx;
	}

	.buylist-show {
		font-size: 31rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 85%;
		display: flex;
	}

	.buylist-show-two {
		font-size: 31rpx;
		position: relative;

		.buylist-show-relative {
			position: absolute;
			left: 155rpx;
			top: 0;
			width: 420rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}

	.special-text {
		width: 157rpx;
		text-align: right;
	}

	.company-img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 40rpx;
		margin-top: 5rpx;
	}

	.card-view-finally {
		height: 180rpx;
	}

	.card-text {
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.card-title {
			font-size: 40rpx;
			font-weight: 600;
			margin-left: 40rpx;
			margin-top: 40rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 60%;
		}

		.card-number {
			display: flex;
			align-items: center;
			margin-top: 25rpx;

			.card-number-text {
				color: #888888;
				font-size: 22rpx;
				margin-right: 20rpx;
				margin-top: 10rpx;

			}

			.number {
				font-size: 40rpx;
				font-weight: 600;
				margin-right: 40rpx;
			}
		}
	}

	.bottom-button-view {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 150rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;

		.button-back {
			margin-top: -30rpx;
			height: 53%;
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			color: #5F676F;
			background-color: #E2EFFA;
		}

		.button-right {
			margin-top: -30rpx;
			margin-left: 30rpx;
			height: 53%;
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			color: #fff;
			background-color: #57A8FA;
		}
		.button-bad {
			margin-top: -30rpx;
			margin-left: 30rpx;
			height: 53%;
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			background: #f5f5f5;
			color: #999999;
			border: 1px solid #e5e5e5;
		}
	}

	.special-middle {
		margin-top: 67rpx;
	}

	.cardruler-view {
		width: 100%;
		padding: 0 35rpx;
		height: 300rpx;

		.cardruler-father {
			display: flex;
			width: 100%;
			height: 50%;

			.cardruler-one {
				width: 25%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.one-up {
					height: 53rpx;
					position: relative;
					overflow: visible;
					white-space: nowrap;

					.one-up-mark {
						font-size: 30rpx;
					}

					.one-up-money {
						font-size: 40rpx;
						font-weight: 600;
						margin-left: -9rpx;
					}

					.one-up-number {
						font-size: 40rpx;
						font-weight: 600;
					}

					.one-up-pian {
						font-weight: 600;
						font-size: 30rpx;
						margin-top: 6rpx;
						// background-color: red;
					}

					.phone-img {
						position: absolute;
						right: -40rpx;
						top: 10rpx;
						width: 35rpx;
						height: 35rpx;
					}
				}

				.one-down {
					margin-top: 5rpx;
					color: #4f4f4f;
				}
			}
		}
	}

	.tanchuc {
		width: 100%;
		height: 0;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		position: fixed;
		bottom: 0;
		z-index: 111;
		overflow: hidden;

		.calculator-father {
			width: 450rpx;
			height: 500rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 10rpx auto;

			view {
				width: 130rpx;
				height: 111rpx;
				background: #F1F4F9;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 43rpx;
				color: #727B87;
				border: 1px solid #F1F4F9;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.btn-active {
				background: linear-gradient(to bottom, #019cef, #0084fa);
				color: #fff;
				font-weight: 500;
			}
		}

		.qit {
			width: 466rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx auto;

			view {
				width: 355rpx;
				height: 81rpx;
				border-radius: 20rpx;
				border: 1px solid #A9B1C0;

				input {
					width: 100%;
					height: 100%;
					padding: 0 20rpx;
					color: #727B87;
					font-size: 40rpx;
				}
			}

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #555555;
			}
		}

		.scrollxhdw {
			width: 540rpx;
			margin: 10rpx auto;

		}

		.xhdw {
			width: 540rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;


			view {
				width: 261rpx;
				height: 82rpx;
				background: #F1F4F9;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #555555;
				margin-top: 17rpx;
				border: 1px solid #F1F4F9;
			}

			.act {
				background: #ECF5FF;
				border: 1px solid #1083F8;
			}
		}

		.tittop {
			width: 100%;
			padding: 60rpx 60rpx 40rpx;
			display: flex;
			align-items: center;

			view {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}

			text {
				width: 15rpx;
				height: 33rpx;
				background: #1083F8;
				border-radius: 7rpx;
				margin-right: 30rpx;
			}
		}
	}

	.botrn {
		width: 100%;
		height: 140rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		view {
			width: 205rpx;
			height: 78rpx;
			border-radius: 30rpx;
			margin: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;

			&:nth-child(1) {
				background: #E1F0FF;
				border: 1px solid rgba(36, 155, 251, 0.51);
				color: #222222;
			}
		}
	}
	.botrn-right{
		background: linear-gradient(-90deg, #288DFD, #21A4FA);
		color: #FFFFFF;
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.right-font {
		line-height: 40rpx;
		text-indent: 2em;
	}
</style>