<template>

	<view class="page_salesman_reportForm">
		<view class="private">
			<!-- <div class="df aic jcsb">
				<div class="private-type">客户类型</div>
				<div class="private-two">{{memberDetail.member_type_name}}</div>
			</div> -->
			<!-- <div class="xdkm"></div> -->
			<div class="df aic jcsb">
				<div class="private-type">客户标签</div>
				<div class="private-two">{{ifMemberName()}}</div>
			</div>
		</view>
		<view class="ordering-cycle">
			<div class="order-goods">订货周期</div>
			<div class="xgsd"></div>
			<div class="df aic">
				<div class="order-period">历史订货周期</div>
				<div class="order-sky">{{memberDetail.order_for_time_info}}</div>
			</div>
			<div class="df aic">
				<div class="order-last">最后订货</div>
				<div class="order-specific">{{memberDetail.last_consum_time}}</div>
			</div>
			<div class="df aic">
				<div class="order-period mt">距离最后订货</div>
				<div class="order-sky mt">{{memberDetail.day_info}}</div>
			</div>
		</view>
		<view class="box">
			<div class="df aic jcsb" @click="show2=true">
				<div class="box-goods">订货统计</div>
				<div class="df box-time">

					<view class="df" style="margin-right: 10rpx;">{{msgabcdef.shijian}}</view>
					<u-icon name="arrow-down" color="#333333" size="14">
					</u-icon>

					<u-datetime-picker :show="show2" v-model="value3" mode="year-month" @cancel='show2=false'
						@confirm='confirmtwo'></u-datetime-picker>
				</div>
			</div>
			<div class="kcxs"></div>
			<div class="df">
				<div class="order-goods f1 df fdc jcsa aic">
					<div class="Order-quantity">订单量</div>
					<div class="time">{{total_order_num}}</div>
				</div>
				<div class="order-goods f1 df fdc jcsa aic">
					<div class="Order-quantity">订单金额</div>
					<div class="time">{{total_order_money}}</div>
				</div>
			</div>
			<div class="chart">
				<lineChart ref="lineChart" :Monthly="msgabcdef"></lineChart>
			</div>

		</view>
		<!-- 近期订单<span>(近30天有效订单) -->
		<view class="Recent-orders">
			<div class="order-goods">近期订单<span>(近30天有效订单)</span></div>
			<!-- <div class="kxsax"></div> -->
			<view class="" v-for="(item,index) in gngduo?order:orderStat" :key="index" @click="toPage(item)">
				<div class="kxsax"></div>
				<div class="number df">
					<div class="df">
						<div class="number-goods">订单编号</div>
						<div class="number-figure">{{item.order_no}}</div>
					</div>
				</div>
				<div class="number df">
					<div class="df">
						<div class="number-goods">下单时间</div>
						<div class="number-figure">{{item.create_time | time}}</div>
					</div>
				</div>
				<div class="number df aic jcsb">
					<div class="df">
						<div class="number-goods">合计{{item.goods_num}}件商品</div>
						<div class="number-figure">订单金额￥{{item.order_money}}</div>
					</div>
					<div class="number-accomplish" style="color: #FF7D02;">{{item.order_status_name}}</div>
				</div>

			</view>
			<view class="" v-if="order.length==0">
				<image :src="$util.img('/upload/weapp/pageSalesman/customer/kong.jpeg')"></image>
			</view>
			<view class="chakangengduo df jcsa" v-if="order.length!=0">

				<view class="df aic" @click="gengduo">
					查看更多
					<image v-if="gngduo" :src="$util.img('/upload/weapp/user/arrow-bottom.png')"></image>
					<image v-else :src="$util.img('/upload/weapp/user/arrow-top.png')"></image>
				</view>

			</view>

		</view>
		<!-- 订货偏好 -->
		<view class="preference">
			<div class="df aic jcsb">
				<div class="preference-goods">订货偏好</div>

				<div class="df preference-time" @click="dingguopianhao">
					<span v-if="end_time.length>0">{{start_time}}-{{end_time}}</span>
					<span v-else>请选择时间段</span>
					<div><u-icon name="arrow-down"></u-icon></div>
				</div>
			</div>
			<div class="kcxs"></div>
			<div class="df product">
				<!-- <div class="product-btn1 df aic jcsa">商品</div>
				<div class="product-btn2 df aic jcsa">分类</div> -->
				<u-tabs :list="list1" lineWidth=0 :activeStyle="{
					width:'142rpx',
					height:'50rpx',
					background:'#21BBF3',
					borderRadius:'30rpx',
					display:'flex',
					alignItems:'center',
					justifyContent:'space-around',
					color:'#fff',
					fontWeight:'400',
					fontSize:'20rpx',
					lineHeight:'28rpx',
				}" :inactiveStyle="{
					width:'142rpx',
					height:'50rpx',
					background:'#FFFFFF',
					borderRadius:'30rpx',
					border:'2rpx solid #EBEBEB',
					fontSize:'20rpx',
					fontWeight:'400',
					color:'#222222',
					lineHeight:'28rpx',
					display:'flex',
					alignItems:'center',
					justifyContent:'space-around',
				}" @click="click"></u-tabs>
			</div>

			<commodity v-if="index==0" :goodsStat="goodsStat" :goodsa="goodsa"></commodity>

			<classify v-if="index==1" ref="classify" :Monthly="msgabset"></classify>

		</view>
		<!-- 关注商品<span>(近30天收藏) -->
		<view class="preference">
			<div class="df aic jcsb">
				<div class="preference-goods">关注商品<span>(近30天收藏)</span></div>

			</div>
			<div class="kcxs"></div>

			<view class="" v-for="(item,index) in collectlist?collect:collectStat" :key="index">
				<div class="df Product-Introduction">
					<div class="Product-img">
						<div class="Product-collect" style="background: #FF7D02;">收藏</div>
						<image :src="$util.img(item.sku_image)"></image>
					</div>
					<div class="Product-name">
						<div class="Product-eijnaij">{{item.sku_name}}</div>
						<div class="Product-production df aic">
							<div class="Product-Shandong">产地：{{item.goods_info.address||'-'}}</div>
							<div class="Product-specifications">
								规格：{{item.goods_info.first_spec_name||item.goods_info.spec_name||'-'}}</div>
						</div>
						<!-- <div class="unit-price">
							<div>￥{{item.sku_price}}<span>/袋</span></div>
						</div> -->

					</div>
					<!-- <div class="time df aic">
						×{{item.num}}
					</div> -->
				</div>
			</view>
			<view class="" v-if="collect.length==0">
				<image :src="$util.img('/upload/weapp/pageSalesman/customer/kong.jpeg')"></image>
			</view>
			<div class="See-more df aic jcsa" v-if="collect.length!=0">
				<div class="df aic" @click="chkngenduo">查看更多
					<image v-if="collectlist" :src="$util.img('/upload/weapp/user/arrow-bottom.png')"></image>
					<image v-else :src="$util.img('/upload/weapp/user/arrow-top.png')"></image>
				</div>
			</div>

		</view>
		<!-- 关注商品<span>(近30天浏览) -->
		<view class="preference">
			<div class="df aic jcsb">
				<div class="preference-goods">关注商品<span>(近30天浏览)</span></div>
				<image style="width: 40rpx;height: 40rpx;" :src="$util.img('/upload/weapp/user/arrow-right.png')"
					mode="" @tap="goPage('/page_salesman_customer/detailed/browseLog')"></image>
			</div>
			<div class="kcxs"></div>
			<view class="" v-for="(item,index) in browseStat" :key="index">
				<div class="df Product-Introduction">
					<div class="Product-img">
						<div class="Product-collect" style="background: #00C594;">浏览</div>
						<image :src="$util.img(item.sku_image)"></image>
					</div>
					<div class="Product-name">
						<div class="Product-eijnaij df jcsb">
							<div>{{item.sku_name}}</div>
							<div class="time df aic">
								×{{item.browse_num}}
							</div>
						</div>
						<div class="Product-Shandong">浏览时间：{{item.browse_time}}</div>
						<div class="Product-Shandong">产地：{{item.address}}</div>
						<div class="Product-Shandong">规格：{{item.spec_name}}</div>
					</div>

				</div>
			</view>
			<view class="" v-if="browseStat.length==0">
				<image :src="$util.img('/upload/weapp/pageSalesman/customer/kong.jpeg')"></image>
			</view>

		</view>
		<!-- 登录统计<span>(近30天的登录) -->
		<view class="Sign-in">
			<div style="display: flex;justify-content: space-between;">
				<div class="order-goods">登录统计<span>(近30天的登录)</span></div>
				<image style="width: 40rpx;height: 40rpx;" :src="$util.img('/upload/weapp/user/arrow-right.png')"
					mode="" @tap="goPage('/page_salesman_customer/detailed/loginLog')"></image>
			</div>
			<div class="kxsax"></div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">总登录次数</div>
					<div v-if="loginLog.length>0">
						<div class="number-figure">{{total_login_num}}次</div>
					</div>
				</div>
			</div>
			<div class="number df">
				<div class="df">
					<div class="number-goods">最后登录时间</div>
					<div v-if="loginLog.length>0">
						<div class="number-figureas">{{loginLog[0].last_login_time}}</div>
					</div>
				</div>
			</div>
			<!-- <div class="number df aic jcsb">
				<div class="df">
					<div class="number-goods">距最后登录</div>
					<div class="number-figure">20天</div>
				</div>
			</div> -->

		</view>
		<!-- 欠款统计<span>(客户结算方式：后付) -->
		<view class="Sign-in">
			<div class="order-goods">可使用优惠券</div>
			<div class="kxsax"></div>
			<div class="number df aic jcsb">
				<div class="df">
					<div class="number-goods">可用优惠卷</div>
					<div class="number-figure">{{salas_man_check_num}}张</div>
				</div>
			</div>

		</view>

		<view class="Sign-in">
			<div style="display: flex;justify-content: space-between;">
				<div class="order-goods">搜索记录</div>
				<image style="width: 40rpx;height: 40rpx;" :src="$util.img('/upload/weapp/user/arrow-right.png')"
					mode="" @tap="goPage('/page_salesman_customer/detailed/searchLog')"></image>
			</div>
			<div class="kxsax"></div>
			<view class="" style="width: 702rpx;height: 630rpx;">
				<div class="searchLog  aic jcsb " v-for="(item,index) in searchLogStat" :key="index">
					<div class="df">
						<div class="number-goods">搜索时间</div>
						<div class="number-figure">{{item.create_time}}</div>
					</div>
					<div class="df">
						<div class="number-goods">搜索物品</div>
						<div class="number-figure">{{item.keywords}}</div>
					</div>
				</div>
			</view>


		</view>



		<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm"
			@cancel="show=false"></u-datetime-picker>
		<u-datetime-picker :show="show1" v-model="value2" mode="date" @confirm="confirmone"
			@cancel="show1=false"></u-datetime-picker>
	</view>
</template>

<script>
	import lineChart from "./lineChart.vue"
	import commodity from "./commodity.vue"
	import classify from "./classify.vue"
	const timesfm = require('@/common/js/map/message.js')
	const times = require('@/common/js/timesfm.js')
	export default {
		components: {

			lineChart,
			commodity,
			classify
		},
		props: {
			msgabc: Array,
		},
		data() {
			return {
				portrait: 0,
				msgabcdef: {
					msgabc: this.msgabc,
					shijian: ''
				},
				msgabset: {
					msgabc: this.msgabc,
					end_time: '',
					start_time: ''
				},

				time: '',
				index: 0,
				msg: this.msgabc,
				gngduo: true,
				collectlist: true,
				brows: true,
				show: false,
				value1: Number(new Date()),
				show1: false,
				show2: false,
				value2: Number(new Date()),
				value3: Number(new Date()),
				start_time: '', //开始时间
				end_time: '', //结束时间
				collectStat: [], //收藏商品
				browseStat: [], //浏览商品
				memberDetail: [], //客户类型
				orderStat: [], //近30天有效订单
				goodsStat: [], //订单偏好-商品
				salas_man_check_num: "", //可使用优惠券
				total_login_num: "",
				order: [],
				collect: [],
				goodsa: [],
				total_order_money: '',
				total_order_num: '',
				browse: [],
				loginLog: [], //近30天登录记录统计
				searchLogStat: [],
				list1: [
					{ name: '商品' },
					{ name: '分类' }
				],
				statisticsList: [{
						label: '订单笔数',
						value: 5829
					},
					{
						label: '订单金额',
						value: 5829
					},
					{
						label: '退货单数',
						value: 5829
					},
					{
						label: '退货金额',
						value: 5829
					},
				]
			};
		},
		created() {
			console.log('客户id', this.msg.msg);
			let timestamp = Date.parse(new Date());
			// this.day_time = this.times(timestamp)
			this.msgabcdef.shijian = this.timesfmtwo(timestamp)
			this.$api.sendRequest({
				url: `/api/salasmanstat/memberStat`,
				data: {
					member_id: this.msg.msg,
					month_time: this.timesfmtwo(timestamp)
				},
				success: res => {
					console.log(res.data, '订货统计');
					this.total_order_money = res.data.total_order_money
					this.total_order_num = res.data.total_order_num
					// setTimeout(()=>{
					// 	uni.$emit('preferences',res.data.list)
					// },500)
				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/memberDetail',
				data: {
					member_id: this.msg.msg
				},
				success: res => {
					console.log(res.data, '客户画像基本信息');
					this.memberDetail = res.data
				}
			})
			this.$api.sendRequest({
				url: '/coupon/api/coupon/salas_man_check_num',
				data: {
					member_id: this.msg.msg
				},
				success: res => {
					console.log(res.data, '可使用优惠券');
					this.salas_man_check_num = res.data
				}
			})
			this.$api.sendRequest({
				url: '/api/salasmanorder/orderStat',
				data: {
					member_id: this.msg.msg,
					page: 1,
					page_size: 10
				},
				success: res => {
					console.log(res.data.list, '近30天有效订单');
					this.orderStat = res.data.list
					this.order = [...res.data.list].slice(0, 2)
				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/loginLog',
				data: {
					member_id: this.msg.msg,
				},
				success: res => {
					console.log(res.data.list, '近30天登录记录统计');
					this.loginLog = res.data.list;
					this.total_login_num = res.data.total_login_num;
				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/collectStat',
				data: {
					member_id: this.msg.msg,
					page: 1,
					page_size: 10,
				},
				success: res => {
					console.log(res.data.list, '收藏商品');
					this.collectStat = res.data.list
					this.collect = [...res.data.list].slice(0, 2)
				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/browseStat',
				data: {
					member_id: this.msg.msg,
					page: 1,
					page_size: 2,
				},
				success: res => {
					console.log(res.data.list, '浏览商品');
					this.browseStat = res.data.list

				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/goodsStat',
				data: {
					member_id: this.msg.msg,
					page: 1,
					page_size: 10,
				},
				success: res => {
					console.log(res.data.list, '订货偏好-商品');
				}
			})

			this.$api.sendRequest({
				url: '/api/salasman/searchLogStat',
				data: {
					member_id: this.msg.msg,
					page: 1,
					page_size: 5,
				},
				success: res => {
					this.searchLogStat = res.data.list;
					console.log(res.data.list, '搜索记录');
				}
			})

		},
		methods: {

			goPage(url) {
				console.log(url);
				this.$util.redirectTo(url, { member_id: this.msg.msg });
			},
			confirmtwo(e) {
				console.log(e.value);
				console.log(this.timesfmtwo(e.value));
				this.msgabcdef.shijian = this.timesfmtwo(e.value)
				this.show2 = false
				this.$refs.lineChart.btn(this.timesfmtwo(e.value))
				this.$api.sendRequest({
					url: `/api/salasmanstat/memberStat`,
					data: {
						member_id: this.msg.msg,
						month_time: this.timesfmtwo(e.value)
					},
					success: res => {
						console.log(res.data, '订货统计');
						this.total_order_money = res.data.total_order_money
						this.total_order_num = res.data.total_order_num
						// setTimeout(()=>{
						// 	uni.$emit('preferences',res.data.list)
						// },500)
					}
				})
			},
			confirmone(e) {
				this.end_time = times(e.value)
				this.msgabset.end_time = times(e.value)
				this.show1 = false
				//分类
				console.log(this.index);
				if (this.index == 1) {
					this.$refs.classify.btn(this.start_time, times(e.value))
				}
				if (this.index == 0) {
					this.$api.sendRequest({
						url: `/api/salasman/goodsStat`,
						data: {
							member_id: this.msg.msg,
							page: 1,
							page_size: 10,
							start_time: this.start_time,
							end_time: times(e.value)
						},
						success: res => {
							console.log(res.data.list, '订货偏好');
							this.goodsStat = res.data.list
							this.goodsa = [...res.data.list].slice(0, 2)
							// setTimeout(()=>{
							// 	uni.$emit('preferences',res.data.list)
							// },500)
						}
					})
				}

			},
			confirm(e) {
				// console.log(times(e.value));
				this.start_time = times(e.value)
				this.msgabset.start_time = times(e.value)
				this.show1 = true
				this.show = false
			},
			dingguopianhao() {
				console.log(11);
				// console.log(this.show);
				this.show = true
			},

			chkngenduo() {
				let _this = this
				this.collectlist = !this.collectlist
				if (!this.collectlist) {
					this.collect = [..._this.collectStat].slice(0, 2)
				} else {

				}
			},
			gengduo() {
				let _this = this
				this.gngduo = !this.gngduo
				if (!this.gngduo) {
					this.order = [..._this.orderStat].slice(0, 2)
				} else {

				}

			},
			click(item) {
				console.log('item', item.index);
				this.index = item.index

			},
			btn() {
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url: '../Order-preference/Order-preference'
				})
			},
			timesfmtwo(num) {
				let now = new Date(num)
				let n = now.getFullYear()
				let y = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : 0 + '' + (now.getMonth() + 1)
				return n + '-' + y
			},
			ifMemberName() {
				if (this.memberDetail.member_label_name) {
					let str = this.memberDetail.member_label_name.split(',')
					let s = str.join(" ");
					console.log(s);
					return s
				}
			},
			toPage(item) {
				uni.navigateTo({
					url: `/page_salesman_order/Order_details/Order_details?or=${item.order_id}&me=${item.member_id}`
				})
			},
		},
		filters: {
			time(num) {
				return timesfm(num * 1000)
			}


		}
	}
</script>

<style lang="scss">
	::v-deep {
		.u-tabs__wrapper__nav {
			width: 100% !important;

		}

		.u-tabs__wrapper__nav__item {
			padding: 0 94rpx !important;
		}
	}

	.chakangengduo {
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 10rpx;
		}
	}

	.page_salesman_reportForm {
		padding: 32rpx;

		.box {
			margin-top: 24rpx;
			border-radius: 16rpx;
			padding: 32rpx;
			width: 702rpx;

			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;

			.box-goods {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
			}

			.bto-time {
				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 34rpx;
					margin-right: 12rpx;
				}
			}

			.kcxs {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 32rpx 0;
			}

			.order-goods {
				.Order-quantity {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 42rpx;
				}

				.time {
					font-size: 30rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					line-height: 34rpx;
					margin: 20rpx 0;
				}

				.percentage {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE8B25;
					line-height: 34rpx;
				}
			}

			.order {
				margin: 40rpx 0 8rpx 0;

				.order-btn1 {
					width: 142rpx;
					height: 50rpx;
					background: #21BBF3;
					border-radius: 30px;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					margin: 0 60rpx 0 148rpx;
				}

				.order-btn2 {
					width: 142rpx;
					height: 50rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 28rpx;
				}
			}
		}

		.private {
			width: 702rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.private-type {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}

			.private-two {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #585858;
				line-height: 40rpx;
			}

			.xdkm {
				margin: 30rpx 0;
				width: 641rpx;
				height: 1rpx;
				background: #E8E8E8;
				border-radius: 2rpx;
			}
		}

		.ordering-cycle {
			width: 702rpx;
			height: 332rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.order-goods {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
			}

			.xgsd {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0;
			}

			.mt {
				margin-top: 20rpx;
			}

			.order-period {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}

			.order-sky {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 72rpx;

				span {
					color: #999;
					margin-left: 12rpx;
				}
			}

			.order-last {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 24rpx;
			}

			.order-specific {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 128rpx;
				margin-top: 24rpx;
			}
		}

		.preference {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			margin-top: 24rpx;
			box-sizing: border-box;

			.preference-goods {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;

				span {
					color: #999999;
				}
			}

			.preference-time {
				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					line-height: 34rpx;
					margin-right: 12rpx;
				}
			}

			.kcxs {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 30rpx 0;
			}

			.product {
				.product-btn1 {
					width: 142rpx;
					height: 50rpx;
					background: #21BBF3;
					border-radius: 30rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					margin: 0 60rpx 0 148rpx;
				}

				.product-btn2 {
					width: 142rpx;
					height: 50rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					border: 2rpx solid #EBEBEB;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 28rpx;
				}
			}

			.Product-Introduction {
				margin-top: 32rpx;

				.time {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-left: 20rpx;
				}

				.Product-img {
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
					position: relative;

					image {
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;

					}

					.Product-collect {
						position: absolute;
						width: 66rpx;
						height: 36rpx;

						border-radius: 0rpx 21rpx 21rpx 0rpx;
						opacity: 0.83;
						font-size: 20rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 28rpx;
						left: 0;
						top: 12rpx;
						z-index: 10;
					}

				}

				.Product-name {
					margin-left: 24rpx;

					.Product-eijnaij {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						margin-top: 20rpx;
					}

					.unit-price {
						font-size: 24rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #F33B50;
						line-height: 40rpx;
						margin-top: 46rpx;

						span {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							line-height: 34rpx;
						}
					}

					.Product-Shandong {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}

					.Product-specifications {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-left: 16rpx;
					}

					.Product-production {
						margin-top: 16rpx;

						.Product-Shandong {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}

						.Product-specifications {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-left: 16rpx;
						}
					}

					.Product-time {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #585858;
						line-height: 40rpx;
						margin-top: 52rpx;
					}
				}
			}

			.See-more {
				margin-top: 32rpx;

				div {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
				}
			}
		}

		.Recent-orders {
			width: 702rpx;
			// height: 558rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.order-goods {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;

				span {
					color: #999999;
					margin-left: 10rpx;
				}
			}

			.kxsax {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 0 0;
			}

			.number {
				margin-top: 28rpx;

				.number-goods {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}

				.number-figure {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 44rpx;
				}

				.number-accomplish {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
				}
			}
		}

		.Sign-in {
			width: 702rpx;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.order-goods {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;

				span {
					color: #999999;
					margin-left: 10rpx;
				}
			}

			.kxsax {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 28rpx 0 0 0;
			}

			.searchLog {
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f2f2f2;
			}

			.searchLog,
			.number {
				margin-top: 28rpx;

				.number-goods {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}

				.number-figure {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 100rpx;
				}

				.number-figureas {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 72rpx;
				}

				.number-accomplish {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
				}
			}
		}
	}
</style>