hldy_app/pages/Warehouse/purchaseorder.vue

<template>
	<view>
		<!-- 采购 -->
		<view class="box">
			<view class="rel-left">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="leftscrolltop" class="scroll-Y"
					@scrolltolower="plsbuytolower" :lower-threshold="400">
					<view class="margin-height"></view>
					<view class="boxitem" v-for="(v,i) in plsbuy" :key='i'
						:class="{'yujing':v?.cgdType=='9','active':leftitem==i}"
						@click="getmiddle(v,i);saveleftgo = i;">

						<view>{{ v?.cgdNo }}</view>
						<view>供应商:{{ v.gysId_dictText }}</view>
						<view>采购人: {{ v.createBy_dictText }}</view>
						<view>{{ v.qgDate }}</view>
						<view>
							<view>
								采购金额
							</view>
							<view>
								￥ <text class="dollar">{{v?.totalPrice}}</text>
							</view>
						</view>

						<view v-if="v?.cgdType=='9'" class="zuofei">
							已作废
						</view>




					</view>
				</scroll-view>
				<view class="fxj">
					<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
					<text>长春市朝阳区久泰开运养老服务有限公司</text>
				</view>
			</view>
			<view class="lefts">
				<view class="caigoudan guodu">
					<view class="title">
						<view></view>采购单
					</view>
					<view class="cgdh brtop">
						<view>采购单号：<text>{{plsbuy[leftitem]?.cgdNo}}</text></view>
						<view>采购金额：<text>{{plsbuy[leftitem]?.totalPrice}}</text></view>
					</view>
					<view class="cgdh">
						<view>采购人：{{plsbuy[leftitem]?.createBy_dictText}} </view>
						<view>采购日期：{{plsbuy[leftitem]?.qgDate}}</view>
						<view>供应商：{{plsbuy[leftitem]?.gysId_dictText}}</view>
					</view>
					<scroll-view scroll-y="true" class="cgdscroll" scroll-with-animation>
						<view class="fler">
							<view class="boxitem" v-for="(f,l) in InvoicingList" :key='l' @scrolltolower="scrolltolower"
								:lower-threshold="200">
								<view>{{f.wlName}}</view>
								<view style="white-space: nowrap;">规格型号：{{f.wlSpecificationModel}}</view>
								<view>采购金额：{{f.procurementPrice}}</view>
								<view>采购数量：{{f.purchaseQuantity}}</view>
							</view>
						</view>
						<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
							<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6"/>
						</view>
					</scroll-view>
				</view>

			</view>
			<view class="rights">
				<view class="shitem">
					<view class="shypk">
						<view>生活用品库</view>

					</view>
					<view class="jqry">
						<view class="left tp">
							<image
								:src="cellobj?.fzrHeadPath?serverUrl + cellobj?.fzrHeadPath:'/static/index/warehouse/procurement/jqr.png'"
								mode="aspectFill"></image>
						</view>
						<view class="rigname">
							<view>{{cellobj?.fzr}}</view>
							<view>
								<text>{{cellobj?.fzrTel?cellobj?.fzrTel:'-'}}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="typeitem">
					<view class="toptype">
						<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
						<!-- <view :class="scroll.act3==-1?'act':''" @click="typescroll(3,-1,{})">全部</view>
						<view :class="scroll.act2==-1?'act':''" @click="typescroll(2,-1,{})">全部</view>
						<view :class="scroll.act1==-1?'act':''" @click="typescroll(1,-1,{})">全部</view> -->
					</view>
					<view class="scroltype">
						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
							class="scroll-Y">
							<view :class="scroll.act3==i?'act':''"
								v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
								@click="typescroll(3,i,v)">
								{{v.title}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
							class="scroll-Y">
							<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
								@click="typescroll(2,i,v)">
								{{v.title}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
							class="scroll-Y scrl1">
							<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
								<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
								</image>
								<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
								<text>
									{{v.title}}
								</text>
							</view>
						</scroll-view>
					</view>

					<view class="anmikc">
						<view v-for="(v,i) in animArray" :key="i" @click="admiclick(i)" class="mar-left">
							<view>
								<donghua width="2vw" height="2vw" :links="v.url" :playing="i === anmidex"
									class="donghua" />
							</view>
							<text :style="plsbuy[leftitem]?.cgdType == '9'?{color:`#c8c8c8`}:{}">
								{{v.name}}
							</text>
						</view>
					</view>
					<view class="serchs">
						<view class="ipt">
							<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="plzinfo.cgdParamInfo" />
							<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill"
								v-if="plzinfo.cgdParamInfo" @click="search(0)"></image>
						</view>
						<view @click="search" class="scr">
							检索
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mengban" v-if="crk" @click="qingkong"></view>
		<view class="crkcard guodu" :class="crk?'':'uncrkcard'">
			<view class="crkcard-title">
				{{ savedetail.materialName }}
			</view>
			<view class="crkcard-img-father">

				<image class="crkcard-img"
					:src="savedetail.materialImg?serverUrl + savedetail.materialImg : '/static/index/warehouse/procurement/k.png'"
					mode="aspectFill"></image>
				<view class="tagname">
					<view class="tagname-one" v-if="savedetail.categoryName">
						生活用品
					</view>
					<view class="tagname-one" v-if="savedetail.typeName">
						照护用品
					</view>
					<view class="tagname-one" v-if="savedetail.medicationName">
						医疗用品
					</view>
				</view>
			</view>
			<view class="crkcard-text" style="margin-top: 80rpx;">
				物料编码: {{ savedetail.materialNo }}
			</view>
			<view class="crkcard-text">
				规格型号: {{ savedetail.specificationModel }}
			</view>
			<view class="crkcard-text">
				物料标签: {{ savedetail.tagName }}
			</view>
			<view class="crkcard-text">
				物料单位: {{ savedetail.materialUnits }}
			</view>
			<view class="crkcard-text">
				医保报销: {{ savedetail.izYbbxName }}
			</view>
			<view class="crkcard-text">
				机构优惠: {{ savedetail.izJgyhName }}
			</view>
			<view class="bottom-card-father">
				<view class="bottom-card">
					<view class="bottom-card-font">
						{{ savedetail.kcsl }}
					</view>
					<view class="bottom-card-gray">
						库存数量
					</view>
					<view class="bottom-card-bian"></view>
				</view>
				<view class="bottom-card">
					<view class="bottom-card-font">
						{{ savedetail.upperLimit }}
					</view>
					<view class="bottom-card-gray">
						物料上限
						<text style="color: #0E8AFA;">
							↑
						</text>
					</view>
					<view class="bottom-card-bian"></view>
				</view>

				<view class="bottom-card">
					<view class="bottom-card-font">
						{{ savedetail.lowerLimit }}
					</view>
					<view class="bottom-card-gray">
						物料下限
						<text style="color: #FAB6BA;">
							↓
						</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 分享的弹出层 -->
		<view v-show="shareShow" class="popup-share" @click="shareShow=false">
			<view class="popup-share-content" :style="{ opacity: deletedownisopacity ? 1 : 0 }" @click.stop>
				<view class="share-other">
					<view class="share-main">
						<view class="">
							<view class="share-weight">
								{{ plsbuy[leftitem]?.cgdNo }}
							</view>
							<view class="share-font">
								供应商：{{ plsbuy[leftitem]?.gysId_dictText }}
							</view>
							<view class="share-font">
								采购时间：{{ plsbuy[leftitem]?.qgDate }}
							</view>
						</view>
						<view class="right-flex">
							<view style="font-weight: 600;">
								<text style="vertical-align: 4rpx;">
									￥
								</text>

								<text class="dollar-text">
									{{plsbuy[leftitem]?.totalPrice}}
								</text>
							</view>
							<view class="caigou-font">
								采购金额
							</view>

						</view>

					</view>
					<view class="share-bottom">
						<view style="display: flex;align-items: center;">
							<image class="share-bottom-img" src="/static/index/youngman.png"></image>
							<view class="share-name">
								{{ plsbuy[leftitem]?.createBy_dictText }}
							</view>
							<view class="share-font">
								采购人
							</view>
						</view>
						<view class="blue-button" @click="clickshare">
							分享
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="['neuro-wrapper', donghuacs ? 'is-active' : '']" v-show="badshow">
			<view class="neuro-mask" @click="badshow=false;"></view>
			<view class="neuro-box" @click.stop>

				<view class="button-father">
					<view class="button-white" @click="badshow=false;">取消</view>
					<view class="button" @click="zuofei">确定</view>
				</view>

				<view class="title">作废</view>
				<view class="card-font">
					确定要作废这个采购单吗
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	import { queryInvoicingList, getCgdMaterialTreeData, queryNuInfoByNuId, updateKfstatus, queryCgdList, queryCgdInfoList, queryWlInfoByWlId, voidedCgdMain } from './api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import shadowview from './components/ShadowView.vue';
	import calculator from './components/calculator.vue';
	const navurl = ref('');
	const InvoicingList = ref([]);
	const TreeData = ref([]);
	const cellobj = ref({});

	const serverUrl = ref('');
	const scrolltop = ref(0)
	const leftscrolltop = ref(0)
	const shopitem = ref(-1);
	const leftitem = ref(0)
	const getblue = ref(false);
	const shyp = ref(false);
	const opacity = ref(false);
	const gysnum = ref(false);
	const gys = ref(false);
	const crk = ref(false);
	const shareShow = ref(false);
	const deletedownisopacity = ref(false);


	const scrollnum = ref(0);


	const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
	const form = reactive({
		nuId: '',
		pageNo: 1,
		pageSize: 9,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0
	})
	const mobanform = {
		nuId: '',
		pageNo: 1,
		pageSize: 9,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0
	}
	const getmiddle = (item : any, i : number) => {
		let num = Math.ceil((i + 1))
		leftscrolltop.value = (num - 2) * 185;
		leftitem.value = i;
		shopitem.value = -1

		InvoicingList.value = [];
		Object.assign(form, mobanform)

		form.cgdId = item.id
		// queryInvo();
		getMaterial();
		typescroll(1,-1,{})
		// console.log("入参", form)
	}
	const switchshyp = () => {
		let obj = {
			id: cellobj.value.id,
			status: shyp.value ? '5' : '2'
		}
		updateKfstatus(obj).then(res => {
			// console.log(res)
			if (res.success) {
				shyp.value = shyp.value ? false : true;
				cell();
			} else {
				uni.showToast({
					icon: 'error',
					title: res.message
				})
			}
		})
	}
	const detailform = reactive({
		wlId: "",
		nuId: uni.getStorageSync('nuId')
	})
	const savedetail = ref({
		categoryName: '',
		typeName: '',
		medicationName: '',
		materialNo: '',
		specificationModel: '',
		tagName: '',
		materialUnits: '',
		izYbbxName: '',
		izJgyhName: '',
		kcsl: '',
		upperLimit: '',
		lowerLimit: '',
		materialName: '',
		materialImg: ''
	})
	const getdetail = () => {
		// console.log("????", detailform)
		queryWlInfoByWlId(detailform).then((res : any) => {
			// console.log("res", res.result)
			if (res.result) {
				savedetail.value = res.result;
				crk.value = true;
				leftitem.value = -1
			}

		})

	}
	const shopclick = (i : number) => {
		let num = Math.ceil((i + 1) / 2)
		scrolltop.value = (num - 2) * 167;
		shopitem.value = i;
		// console.log(InvoicingList.value[i].wlId, uni.getStorageSync('nuId'))
		detailform.wlId = InvoicingList.value[i]?.wlId
		// getdetail()

	}



	const typescroll = (e : number, i : number, v : object) => {
		if (e == 1) {
			scroll.act2 = -1;
			scroll.act3 = -1;
			scroll.scrolltop2 = 0;
			scroll.scrolltop3 = 0;
			form.categoryId = v?.categoryId;
			form.typeId = '';
			form.medicationId = '';
			if (scroll.act1 == i) {
				scroll.act1 = -1;
				form.categoryId = '';
				form.pageNo = 1;
				InvoicingList.value = [];
				queryInvo();
				return
			}
		}
		if (e == 2) {
			scroll.act3 = -1;
			scroll.scrolltop3 = 0;
			form.categoryId = v?.categoryId;
			form.typeId = v?.typeId;
			form.medicationId = '';
		}
		if (e == 3) {
			form.categoryId = v?.categoryId;
			form.typeId = v?.typeId;
			form.medicationId = v?.key;
		}
		scroll['act' + e] = i;
		scroll['scrolltop' + e] = (i - 2) * 50;
		form.pageNo = 1;
		InvoicingList.value = [];
		shopitem.value = 0;
		queryInvo();
	}
	const search = (x : number) => {

		if (x === 0) { plzinfo.cgdParamInfo = '' }
		plzinfo.pageNo = 1;
		plsbuy.value = [];
		leftitem.value = saveleftgo.value;
		shopitem.value = -1;
		// form.cgdId = plsbuy.value[leftitem.value].id
		firstgetqueryCgdList();
	}
	onLoad(() => {
		form.nuId = uni.getStorageSync('nuId');
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		firstgetqueryCgdList();
		cell()
	})

	const init = () => {
		InvoicingList.value = [];
		plsbuy.value = []
		Object.assign(form, mobanform)
		Object.assign(plzinfo, mobanplzinfo)

		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		firstgetqueryCgdList();
	}

	const plzinfo = reactive({
		pageNo: 1,
		pageSize: 10,
		canpull: true,
		cgdParamInfo:'',
	})

	const mobanplzinfo = {
		pageNo: 1,
		pageSize: 10,
		canpull: true
	}
	const plsbuy = ref([])
	const firstgetqueryCgdList = () => {
		queryCgdList(plzinfo).then((res : any) => {
			// console.log("请购单", res.result.records)
			plsbuy.value.push(...res.result.records)

			form.cgdId = plsbuy.value[0].id
			queryInvo();
			getMaterial();
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	//获得采购单列表
	const getqueryCgdList = () => {
		if (!plzinfo.canpull) return
		queryCgdList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const plsbuytolower = () => {
		if (!setout) { return }
		// status.value = 'loading'
		// setout.value = false;
		plzinfo.pageNo++;
		getqueryCgdList()
		times = setTimeout(() => {
			setout.value = true
		}, 1000)
	}
	const qingkong = () => {
		gys.value = false;
		anmidex.value = -1;
		crk.value = false;
	}
	const colse = () => {
		gysnum.value = !gysnum.value
	}
	const cell = () => {
		queryNuInfoByNuId(form).then(res => {
			cellobj.value = res.result;
			shyp.value = res.result.status == 5 ? false : true
		})
	}
	const getMaterial = () => {
		getCgdMaterialTreeData(form).then(res => {
			TreeData.value = res.result;
		})
	}
	const setout = ref(true)
	let times = null;
	const status = ref('loadmore')
	onPageScroll((e) => {
		console.log(e)
	})
	const scrolltolower = () => {
		if (!setout) { return }
		status.value = 'loading'
		setout.value = false;
		form.pageNo++;
		queryInvo()
		times = setTimeout(() => {
			setout.value = true
		}, 1000)
	}

	const scrollview = (e : number) => {
		if (e.detail.scrollTop > scrollnum.value) {
			opacity.value = true;
			setTimeout(() => {
				opacity.value = false;
			}, 900)
		} else {
			opacity.value = false;
		}
		scrollnum.value = e.detail.scrollTop;
	}
	const queryInvo = () => {
		// console.log("form", form)
		queryCgdInfoList(form).then(res => {
			InvoicingList.value.push(...res.result.records);
			detailform.wlId = InvoicingList.value[0].wlId


			status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore';

		})
	}
	const saveleftgo = ref(0);

	const movecard = (type : number) => {


		if (leftitem.value != -1) {
			switch (type) {
				case 0:
					// 上
					if (leftitem.value) {
						leftitem.value--
						getmiddle(plsbuy.value[leftitem.value], leftitem.value);
					}
					break;
				case 1:
					// →
					saveleftgo.value = leftitem.value;
					leftitem.value = -1;
					shopitem.value = 0;

					break;
				case 2:
					// 下
					if (leftitem.value < plsbuy.value.length - 1) {
						leftitem.value++
						getmiddle(plsbuy.value[leftitem.value], leftitem.value)

					}

					break;
				case 3:

					// ←
					break;
				case 4:
					// 扫描
					// saveleftgo.value = leftitem.value;
					// leftitem.value = -1;
					// shopitem.value = 0;
					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

				default:
					break;
			}
		}
		else if (shopitem.value != -1) {
			switch (type) {
				case 0:
					// 上
					shopitem.value = shopitem.value < 1 ? shopitem.value = 0 : shopitem.value - 2
					break;
				case 1:
					// →
					shopitem.value = shopitem.value >= InvoicingList.value.length - 1 ? InvoicingList.value.length - 1 : shopitem.value + 1
					break;
				case 2:
					// 下
					shopitem.value = shopitem.value >= InvoicingList.value.length - 2 ? shopitem.value = 0 : shopitem.value + 2
					break;
				case 3:
					shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length - 1 : shopitem.value - 1
					// ←
					break;
				case 4:
					// 扫描
					getdetail()
					break;
				case 5:
					// 返回
					leftitem.value = saveleftgo.value;
					getmiddle(plsbuy.value[leftitem.value], leftitem.value)
					shopitem.value = -1;
					break;

				default:
					break;
			}
			shopclick(shopitem.value)
		}

		// shopclick(shopitem.value)


	}
	// 通用的生成函数
	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
		return Array.from({ length: count }, (_, i) => {
			const idx = pad
				? String(i + startIndex).padStart(2, '0')
				: i + startIndex
			return `${base}/${prefix}${idx}.${ext}`
		})
	}
	const anmidex = ref(-1)
	const admiclick = (i : number) => {
		anmidex.value = i;
		if (plsbuy.value[leftitem.value]?.cgdType == '9') {
			uni.showToast({
				title: '该表单已经作废',
				icon: 'none', // 'none' 表示不带图标
				duration: 2000
			})
			return
		}
		switch (i) {
			case 0:
				bebad();
				break;
			case 1:
				// gys.value = true
				shareToWeixin()
				break;
			case 2:
				break;
			case 3:
				break;
			case 4:
				// crk.value = true
				break;
			case 5:
				break;

			default:
				break;
		}

	}
	const badshow = ref(false);
	const donghuacs = ref(false);
	const bebad = () => {
		if (leftitem.value == -1) {
			uni.showToast({
				title: '请选择想要作废的采购单',
				icon: 'none', // 'none' 表示不带图标
				duration: 2000
			})
			return
		} else {
			badshow.value = true;
			donghuacs.value = false;
			setTimeout(() => donghuacs.value = true, 50)
		}
	}
	const zuofei = () => {
		voidedCgdMain({ id: plsbuy.value[leftitem.value].id }).then((res : any) => {
			console.log("res", res)
			if (res.success) {
				uni.showToast({
					title: res.message,
					icon: 'success', // 'none' 表示不带图标
					duration: 2000
				})
				badshow.value = false;
				init()
			}
		})
	}
	const shareToWeixin = () => {
		if (leftitem.value == -1) {
			uni.showToast({
				title: '请选择想要分享的采购单',
				icon: 'none', // 'none' 表示不带图标
				duration: 2000
			})
			return
		} else {
			shareShow.value = true;
			deletedownisopacity.value = false;
			setTimeout(() => {
				deletedownisopacity.value = true
			}, 100)
		}


	}
	const clickshare = () => {
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 0,
			href: "https://www.baidu.com/",
			title: "护理日程分享",
			summary: "九泰护理日程测试",
			imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
			success: function (res) {
				console.log("success:");
			},
			fail: function (err) {
				console.log("fail:");
			}
		});
	}
	const animArray = ref([
		{
			url: genPaths(
				'/static/index/warehouse/procurement/cancel',
				'cancel',
				9,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '作废',
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/share',
				'share',
				6,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '分享',
		},


	])
</script>

<style lang="less">
	// 出入库
	.uncrkcard {
		bottom: -100vw !important;
	}

	.crkcard {
		width: 27vw;
		height: 50vw;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		right: 1.2vw;
		bottom: 11.5vw;
		z-index: 102;
		padding: 0 50rpx;
		padding-top: 100rpx;

		.crkscroll {
			width: 100%;
			height: 29vw;

			.cgrk {
				width: 35vw;
				height: 8.5vw;
				background: rgba(236, 237, 239, 0.4);
				border-radius: 1.6vw;
				margin: 0.8vw auto 0;
				padding: 1.8vw 2vw;
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&:nth-child(1) {
						text {

							&:nth-child(2),
							&:nth-child(3) {
								font-weight: 400;
								font-size: 1.1vw;
								color: #888888;
							}

							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.2vw;
								color: #333333;
							}
						}
					}

					&:nth-child(2) {
						.c {
							color: #FF6600 !important;
						}

						.l {
							color: #0076D6 !important;
						}

						text {
							font-weight: 400;
							font-size: 1.1vw;
							color: #888888;
							text-align: right;

							&:nth-child(2) {
								font-weight: bold;
								font-size: 1.4vw;
								color: #333333;
							}
						}
					}
				}
			}
		}

		.select {
			width: 100%;
			height: 7vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1vw 1.5vw;

			>view {
				display: flex;

				&:nth-child(2) {
					justify-content: space-between;

					text {
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
					}
				}

				&:nth-child(1) {
					justify-content: flex-end;

					view {
						min-width: 5vw;
						height: 2.6vw;
						border-radius: 1.3vw;
						border: 1px solid #DCDCDC;
						padding: 0 1.4vw;
						align-items: center;
						display: flex;
						align-items: center;
						margin: 0 0.5vw;

						image {
							width: 0.7vw;
							height: 0.5vw;
							margin-left: 0.4vw;
						}

					}
				}
			}
		}

		.shopcont {
			width: 100%;
			height: 10vw;
			background: rgba(236, 237, 239, 0.3);
			border-bottom: 1px solid #DCDCDC;
			display: flex;
			align-items: center;

			.cont {
				width: 26vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: relative;
				padding: 2vw 0;

				view {
					&:nth-child(4) {
						width: 5vw;
						height: 5vw;
						background: rgba(236, 237, 239, 1);
						border-radius: 1.4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						font-weight: 400;
						font-size: 1vw;
						position: absolute;
						color: #888888;
						top: 2.5vw;
						right: 1.8vw;
						padding: 0.5vw 0;

						text {
							font-weight: bold;
							font-size: 1.8vw;
							color: #555555;
						}
					}

					&:nth-child(2),
					&:nth-child(3) {
						font-weight: 400;
						font-size: 1.1vw;
						color: #888888;
					}

					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #212327;
					}
				}
			}

			.img {
				width: 10vw;
				height: 9vw;
			}
		}
	}

	// 
	.shuru {
		width: 20.6vw;
		height: 34.5vw;
		position: fixed;
		bottom: 1.5vw;
		right: 1.6vw;
		z-index: 103;
	}

	// 采购
	.unrigbot {
		right: -25vw !important;
	}

	.rigbot {
		width: 24.5vw;
		height: 13vw;
		background: #FFFFFF;
		border-radius: 1.6vw;
		position: fixed;
		bottom: 1.5vw;
		right: 1.6vw;
		z-index: 102;
		padding: 1.1vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		view {
			display: flex;
			align-items: center;

			&:nth-child(3) {
				align-items: center;
				white-space: nowrap;

				text {
					font-weight: 400;
					font-size: 1.1vw;
					color: #555555;
					white-space: nowrap;
					margin-right: 1.2vw;
				}

				.jj {
					width: 3.5vw;
					height: 3.5vw;
					background: rgba(85, 85, 85, .1);
					border-radius: 1.0vw;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 0 0 1vw;
					position: relative;
					padding: 0 !important;

					&:active {
						content: '';
						width: 3.5vw;
						height: 3.5vw;
						background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
					}
				}

				.num {
					width: 6.5vw;
					height: 3.5vw;
					border-radius: 1.0vw;
					background: rgba(85, 85, 85, .1);
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 0 0 1vw;
				}

			}

			&:nth-child(2) {
				width: 21.6vw;
				height: 3.0vw;
				background: rgba(85, 85, 85, 0.1);
				border-radius: 1.0vw;
				padding-left: 1.5vw;
			}

			&:nth-child(1) {
				justify-content: space-between;
				font-weight: 400;
				font-size: 1.1vw;
				color: #555555;

				text {
					width: 5.2vw;
					height: 2.2vw;
					display: inline-block;
					text-align: center;
					line-height: 2.2vw;
					font-weight: 400;
					font-size: 1vw;
					color: #5C7992;
					background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
					border-radius: 1.1vw;
				}
			}
		}
	}

	.uncg {
		left: -47vw !important;
	}

	.cgou {
		width: 47vw;
		height: 26vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx .5vw 0rpx #E8E9ED;
		border-radius: 1.6vw;
		position: fixed;
		left: 2vw;
		top: 16vw;
		z-index: 101;
		padding: 2vw 0 0;

		.tj {
			width: 100%;
			height: 3.5vw;
			display: flex;
			justify-content: flex-end;
			font-weight: 400;
			font-size: 1.1vw;
			color: #555555;
			align-items: center;
			padding-right: 2vw;
		}

		.gyscont {
			width: 100%;
			height: 5.7vw;
			background: #EFF0F4;
			padding: 2vw;
			display: flex;
			border-top: 1px solid #E8E9ED;
			border-bottom: 1px solid #E8E9ED;

			view {
				width: 50%;

				&:nth-child(2) {
					display: flex;
					align-items: center;
					white-space: nowrap;

					text {
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
						white-space: nowrap;
					}

					.jj {
						width: 3.5vw;
						height: 3.5vw;
						background: rgba(85, 85, 85, .1);
						border-radius: 1.0vw;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0 1vw;
						position: relative;

						&:active {
							content: '';
							width: 3.5vw;
							height: 3.5vw;
							background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
						}
					}

					.num {
						width: 6.5vw;
						height: 3.5vw;
						border-radius: 1.0vw;
						background: rgba(85, 85, 85, .1);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				&:nth-child(1) {
					display: flex;
					flex-direction: column;

					text {
						font-weight: 400;
						font-size: 1vw;
						margin-left: 1vw;

						&:nth-child(1) {
							color: rgba(85, 85, 85, 1);
							margin-top: -0.4vw;
						}

						&:nth-child(2) {
							margin-top: 0.4vw;
							color: #555555;
						}
					}
				}
			}
		}

		.topcont {
			width: 100%;
			height: 14.6vw;
			padding: 0 2vw;

			.life {
				width: 100%;
				height: 4.4vw;
				display: flex;
				justify-content: space-around;

				>view {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: space-between;

					&:nth-child(2) {
						display: flex;
						justify-content: flex-end;

						view {
							min-width: 4vw;
							height: 80%;
							font-weight: 400;
							font-size: .9vw;
							color: #8F92A1;
							display: flex;
							flex-direction: column;
							margin-left: 2.1vw;
							margin-top: -0.2vw;
							padding-right: 2.1vw;

							.l {
								color: rgba(3, 133, 250, 1);
							}

							.f {
								color: rgba(250, 178, 182, 1);
							}

							&:nth-child(1) {
								border-right: 1px solid rgba(239, 240, 244, 1);
							}

							>text {
								&:nth-child(1) {
									font-weight: bold;
									font-size: 1.4vw;
									color: #555555;
								}

								&:nth-child(2) {
									font-weight: 400;
									font-size: .9vw;
									color: #8F92A1;
								}
							}
						}
					}

					&:nth-child(1) {
						display: flex;
						justify-content: flex-start;

						view {

							&:nth-child(1),
							&:nth-child(2) {
								width: 5.3vw;
								height: 1.8vw;
								border-radius: .9vw;
								border: 1px solid #D2D2D2;
								display: flex;
								justify-content: center;
								align-items: center;
								font-weight: 400;
								font-size: .9vw;
								color: #555555;
								margin-left: .6vw;
							}

							&:nth-child(3) {
								width: 4vw;
								height: 80%;
								font-weight: 400;
								font-size: .9vw;
								color: #8F92A1;
								display: flex;
								flex-direction: column;
								margin-left: 2.1vw;
								margin-top: -0.2vw;

								>text {
									&:nth-child(1) {
										font-weight: bold;
										font-size: 1.4vw;
										color: #555555;
									}

									&:nth-child(2) {
										font-weight: 400;
										font-size: .9vw;
										color: #8F92A1;
									}
								}
							}
						}
					}
				}
			}

			.top {
				width: 100%;
				height: 10.2vw;
				display: flex;
				justify-content: space-between;

				.leftimg {
					width: 7vw;
					height: 6vw;
				}

				.rightcont {
					width: 29vw;
					height: 100%;
					display: flex;
					flex-direction: column;

					>view {
						width: 100%;

						&:nth-child(1) {
							display: flex;
							justify-content: space-between;
							margin-bottom: .5vw;

							text {
								width: 25vw;
								font-weight: bold;
								font-size: 1.4vw;
								color: #212327;
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						&:nth-child(2),
						&:nth-child(3),
						&:nth-child(4) {
							display: flex;
							font-weight: 400;
							font-size: 1vw;
							color: #777777;
							align-items: center;
							white-space: nowrap;

							>view {
								width: 16vw;
								margin-top: .8vw;
							}

							text {
								display: inline-block;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: RGBA(239, 240, 244, 0.55);
	}

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

	.box {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: space-between;
		padding: 0vw 1vw 0;
		overflow: hidden;

		.rights {
			width: 24.5vw;
			height: calc(100% - 4vw);
			margin-top: 4vw;

			.serchs {
				width: 24.5vw;
				height: 3.2vw;
				background: rgba(255, 255, 255, .5);
				border-radius: 1.6vw;
				display: flex;
				justify-content: space-between;
				padding: 0.5vw;
				align-items: center;
				margin-top: 1.1vw;

				.ipt {
					display: flex;
					align-items: center;
					width: 19vw;
					image {
						width: 2.2vw;
						height: 2.2vw;
						margin-left: 0.5vw;
					}

					input {
						width: 16.5vw;
						height: 2.4vw;
						font-size: 1.1vw;
						padding-left: 1.6vw;
					}
				}

				.scr {
					width: 4.2vw;
					height: 2.4vw;
					background: url('/static/index/warehouse/procurement/sh.png')no-repeat;
					background-size: 100% 100%;
					border-radius: 1.2vw;
					border: 1px solid rgba(0, 155, 252, 1);
					font-weight: 400;
					font-size: 1vw;
					color: #1083F8;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.anmikc {
				width: 100%;
				height: 5vw;
				display: flex;
				justify-content: space-between;
				// flex-wrap: wrap;

				>view {
					width: 49%;
					height: 3.7vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 1.3vw;
					color: #212327;
					background: #FFFFFF;
					margin: 0.25vw 0;
					// margin-right: 1vw;
					border-radius: 1.6vw;

					view {
						margin-right: .4vw;

						image {
							width: 2vw;
							height: 2vw;
						}

						.donghua {
							margin: 0;
						}
					}

					text {
						white-space: nowrap;
					}

				}
			}

			.typeitem {
				width: 100%;
				height: 56vh;

				.scroltype {
					width: 100%;
					height: calc(56vh);
					display: flex;
					justify-content: space-around;

					.scroll-Y {
						width: 8.5vw;
						height: calc(55vh - 2vh);
						margin-top: 0.5vw;
						view {
							width: 100%;
							height: 3.8vw;
							background: rgba(255, 255, 255, .5);
							border-radius: 1.9vw;
							font-weight: 400;
							font-size: 1.3vw;
							color: #212327;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0 0.4vw;
							margin-bottom: .8vw;
							text-align: center;

							text {
								white-space: nowrap;
							}

							>image {
								width: 2vw;
								height: 2vw;
							}
						}

						.act {
							background: rgba(255, 255, 255, 1) !important;
							font-weight: 600;
							color: #0385FA !important;
						}
					}
				}

				>.toptype {
					width: 100%;
					height: 2vw;
					display: flex;
					justify-content: space-around;
					margin: .4vw 0 .4vw 0;

					.act {
						background: rgba(255, 255, 255, 1) !important;
						font-weight: 600;
						color: #0385FA !important;
					}

					>view {
						width: 7vw;
						height: 1.9vw;
						border-radius: 1vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 1.2vw;
						color: #333333;
						padding: 0;
					}
				}
			}

			.shitem {
				width: 24.5vw;
				height: 10.3vw;
				background: #E8E9ED;
				border-radius: 1.6vw;
				padding: 1.2vw 1.8vw;

				.jqry {
					width: 100%;
					display: flex;
					align-items: center;

					.left {
						width: 5vw;
						height: 5vw;
						margin-right: .8vw;
						border-radius: .3vw;
						overflow: hidden;
					}

					.rigname {
						height: 4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						view {
							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.4vw;
								color: #212327;
							}

							&:nth-child(2) {
								width: 11vw;
								font-weight: 400;
								font-size: 1vw;
								color: #212327;
								display: flex;
								justify-content: space-between;
							}
						}

					}
				}

				.shypk {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;

					view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 30rpx;
							color: #333333;
						}

						&:nth-child(2) {
							display: flex;
							flex-direction: column;
							align-items: center;

							text {
								font-weight: 400;
								font-size: 1vw;
								color: #666666;
							}


						}
					}
				}
			}
		}

		.lefts {
			width: 46vw;
			height: calc(100vh - 8vh);
			position: relative;
			background: #FFFFFF;
			box-shadow: 0rpx 2px 3px 0rpx rgba(182, 186, 196, 0.24);
			border-radius: 1.6vw;
			margin-top: 6vh;

			.caigoudan {
				width: 46vw;
				height: 92vh;
				background: #FFFFFF;
				border-radius: 1.6vw;
				padding: 0.5vw 1.5vw 0;

				.cgdscroll {
					width: 100%;
					height: calc(92vh - 10vw);
				}

				.fler {
					display: grid;
					grid-template-columns: 1fr 1fr;
				}

				.boxitem {
					width: 22vw;
					height: 10vw;
					background: rgba(192, 192, 192, 0.14);
					border-radius: 1.6vw;
					margin: 0 1vw 1.2vw 0;
					border: 2px dashed #fff;
					display: inline-block;
					padding: 1vw 1.6vw 0;
					position: relative;

					>view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.4vw;
							color: #333;
							white-space: nowrap;
							overflow: hidden;
							width: 100%;
							text-overflow: ellipsis;
							max-width: 15vw;

						}

						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #555555;
							margin-top: .6vw;
						}

						&:nth-child(3),
						&:nth-child(4) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #666666;
							margin-top: .2vw;
						}

					}
				}

				.cgdh {
					width: 100%;
					height: 2.5vw;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333333;

					view {
						font-size: 1.1vw;
					}

					text {
						font-size: 1.2vw;
						font-weight: bold;
					}
				}


				.title {
					height: 4vw;
					font-weight: 400;
					font-size: 1.4vw;
					color: #333333;
					border-bottom: 1px solid #DCDCDC;
					display: flex;
					align-items: center;

					view {
						width: 0.5vw;
						height: 1.4vw;
						background: linear-gradient(-69deg, #006DC9, #0385FA);
						border-radius: 0.25vw;
						margin-right: 0.7vw;
					}
				}


			}

		}

	}


	.active {
		border: 2px dashed #017DE9 !important;
	}

	.act {
		background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
		border: 1px solid rgba(0, 130, 251, 0.34) !important;
		padding-left: 1.3vw;

		view {
			background: #0385FA;
			position: absolute;
		}
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}


	.rel-left {
		width: 26vw;
		height: 100%;
		position: relative;
		margin-top: 6vh;
		margin-right: -1.2vw;

		.zuofei {
			background-color: #FFE2E2;
			color: #FF5757;
			border: 1rpx solid #FF5757;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 120rpx;
			height: 50rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		// margin-left: 1vw;
		.fxj {
			width: 23vw;
			height: 22vw;
			position: absolute;
			left: 0;
			bottom: 2vw;
			z-index: 11;
			border-radius: 1.6vw;

			text {
				width: 100%;
				font-weight: 400;
				font-size: .9vw;
				color: #999999;
				display: flex;
				justify-content: center;
				position: absolute;
				left: 0;
				bottom: 0vw;
			}
		}

		.mblbg {
			width: 24.5vw;
			height: 25vh;
			position: absolute;
			left: -1vw;
			bottom: 0.5vw;
			border-radius: 1.6vw;
			filter: blur(15rpx);
			background: RGBA(239, 240, 244, 1);
			z-index: 10;
		}

		.scroll-Y {
			width: 100%;
			height: 75vh;
			display: flex;
			flex-wrap: wrap;
		}

		.yujing {
			color: black;
			box-shadow: 0 0 8px rgba(255, 102, 107, 0.51);
		}

		.boxitem {
			width: 24vw;
			height: 14.7vw;
			background: rgba(255, 255, 255, .7);
			border-radius: 1.6vw;
			margin: 0 0vw 1.2vw 0.6vw;
			border: 2px dashed #fff;
			display: inline-block;
			padding: 1.5vw;
			position: relative;

			>view {
				&:nth-child(1) {
					font-weight: bold;
					font-size: 1.5vw;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;
					text-overflow: ellipsis;
				}

				&:nth-child(2) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #555555;
					margin-top: .6vw;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;
					height: 1.5vw;
				}

				&:nth-child(3) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #666666;
					margin-top: .6vw;
				}

				&:nth-child(4) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #666666;
					margin-top: .6vw;
				}

				&:nth-child(5) {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 1.5vw;

					view {
						color: #888888;
					}

					text {
						font-weight: bold;
						font-size: 1.8vw;
						color: #555;
					}
				}

			}
		}
	}

	.mar-left {
		margin-left: 100vw;
	}

	.crkcard-title {
		font-weight: bold;
		font-size: 35rpx;
		width: 100%;
		text-align: center;
	}

	.crkcard-img-father {
		width: 100%;
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 20rpx;

		.crkcard-img {
			width: 300rpx;
			height: 300rpx;
		}

		.tagname {
			display: flex;

			.tagname-one {
				width: 150rpx;
				height: 50rpx;
				margin: 0 20rpx;
				border: 1rpx solid #D2D2D2;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #555555;
			}
		}

	}

	.crkcard-text {
		color: #777777;
		margin-top: 20rpx;
	}

	.bottom-card-father {
		position: absolute;
		width: 100%;
		height: 200rpx;
		bottom: 0;
		left: 0;
		display: flex;

		.bottom-card {
			width: 33.3%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.bottom-card-bian {
				position: absolute;
				height: 100rpx;
				width: 1rpx;
				background-color: #EFF0F4;
				bottom: 50rpx;
				right: 0;
			}

			.bottom-card-font {
				font-weight: bold;
				font-size: 35rpx;
			}

			.bottom-card-gray {
				margin-top: 5rpx;
				color: #8F92A1;
			}
		}
	}

	.blue-tags {
		display: flex;
		height: 3%;
		margin-top: 12%;
		margin-bottom: 5%;
		align-items: center;
		// padding: 0 0 20rpx 15rpx;

		.blue-shu {
			background: linear-gradient(to top, #007BFD, #019AF0);
			width: 15rpx;
			height: 40rpx;
			border-radius: 15rpx;
			margin: 0 15rpx 0 20rpx;
		}
	}

	.blue-tags-middle {
		display: flex;
		height: 3%;
		margin-top: 6%;
		margin-bottom: 2.5%;
		align-items: center;
		// padding: 0 0 20rpx 15rpx;

		.blue-shu {
			background: linear-gradient(to top, #007BFD, #019AF0);
			width: 15rpx;
			height: 40rpx;
			border-radius: 15rpx;
			margin: 0 15rpx 0 20rpx;
		}
	}

	.special-view {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.popup-share {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(1rpx);
		background-color: rgba(236, 237, 241, 0.4);
		/* 添加毛玻璃效果 */
		z-index: 999;


		.share-other {
			z-index: 1;
			width: 100%;
			height: 100%;
			padding: 50rpx;
			position: relative;

			.share-main {
				display: flex;
				justify-content: space-between;

				.share-weight {
					font-weight: 600;
					font-size: 30rpx;
				}

				.share-font {
					color: #666666;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.popup-share-content {
			position: absolute;
			display: flex;
			flex-direction: column;
			width: 1000rpx;
			height: 500rpx;
			background-color: #fff;
			border-radius: 30rpx;
			transition: opacity 0.4s ease;

			.popup-share-title {
				margin: 30rpx 30rpx;
				font-size: 40rpx;
				position: relative;

				.popup-share-img {
					position: absolute;
					top: 0;
					right: 0;
					width: 200rpx;
					height: 200rpx;
				}
			}

			.popup-share-upcontent {
				margin: 0 30rpx;
				display: flex;
				justify-content: space-between;

				.popup-share-font {
					font-size: 35rpx;
					color: gray;
				}

			}

			.popup-share-gray {
				background-color: #D3D3D3;
				width: calc(100% - 60rpx);
				height: 2rpx;
				margin: 110rpx 30rpx 0 30rpx;
			}

			.popup-share-downcontent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100%;
				margin: 0 30rpx;

				.popup-downcontent-img {
					width: 70rpx;
					height: 70rpx;
				}

				.popup-downcontent-font {
					font-size: 27rpx;
					margin-left: 20rpx;
				}

				.popup-share-downcontent-left {
					display: flex;
					align-items: center;
				}

				.popup-share-downcontent-button {
					background: linear-gradient(to right bottom, #00c9ff, #0076ff);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 15rpx 30rpx;
					border-radius: 20rpx;
					font-size: 32rpx;
				}
			}

		}

	}

	.blue-button {
		margin-top: 60rpx;
		width: 150rpx;
		height: 70rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #007CFF;
		font-size: 30rpx;
		background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
		border: 2rpx solid #9AD1FF;
	}

	/* 容器默认隐藏，透明度为 0，不接受点击 */
	.neuro-wrapper {
		position: fixed;
		inset: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	/* 显示时透明度过渡到 1，可接受点击 */
	.neuro-wrapper.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* 遮罩层，半透明黑色 */
	.neuro-mask {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */
	.neuro-box {
		position: relative;
		width: 600rpx;
		height: 450rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
		padding: 0 10%;
	}

	.button {
		width: 47%;
		background-color: #ddf0ff;
		display: flex;
		justify-content: center;
		align-items: center;
		// color: #fff;
		color: #007CFF;
		border: 1rpx solid #007CFF;
		font-size: 25rpx;
		border-radius: 30rpx;
	}


	.card-font {
		margin-top: 70rpx;
		width: 600rpx;
		justify-content: center;
		display: flex;
	}

	.button-white {
		width: 47%;
		border: 2rpx solid #c3cacd;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		border-radius: 30rpx;
	}

	.button-father {
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.margin-height {
		height: 10rpx;
	}


	.right-flex {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		.dollar-text {
			font-size: 2.2vw;
		}

		.caigou-font {
			color: #999999;
			margin-top: -5rpx;
			font-size: 24rpx;
		}

	}

	.share-bottom {
		position: absolute;
		width: 100%;
		padding: 0 50rpx;
		height: 120rpx;
		bottom: 70rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.share-bottom-img {
			width: 150rpx;
			height: 140rpx;
		}

		.share-name {
			margin: 0 20rpx;
			font-size: 35rpx;
			color: #555555;
			font-weight: 600;
		}

		.share-font {
			color: #555555;
			margin-top: 10rpx;
			font-size: 24rpx;
		}
	}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
	}
</style>