<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center viewReport_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub viewReport_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  viewReport_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='viewReport_fd0_0_c1_c0'>财务报表</text>
				</view>
				<view class='flex flex-wrap align-center viewReport_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---日数据flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout viewReport_flex_1">
			<view class='flex flex-direction flex-wrap align-stretch flex-sub viewReport_fd1_0'>
				<view class='flex flex-wrap align-center viewReport_fd1_0_c0'>
					<text class='viewReport_fd1_0_c0_c0'>日数据</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_0_c1_c0'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_0_c1_c0_c0_c0'>今日营业额</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_0_c1_c0_c1'>
							<text class='viewReport_fd1_0_c1_c0_c1_c0'>{{details.today_order_money}}</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_0_c1_c1'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_0_c1_c1_c0_c0'>今日成交量</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_0_c1_c1_c1'>
							<text class='viewReport_fd1_0_c1_c1_c1_c0'>{{details.today_order_num}}</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_0_c1_c2'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_0_c1_c2_c0_c0'>昨日营业额</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_0_c1_c2_c1'>
							<text class='viewReport_fd1_0_c1_c2_c1_c0'>{{details.yesterday_order_money}}</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_0_c1_c3'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_0_c1_c3_c0_c0'>昨日成交量</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_0_c1_c3_c1'>
							<text class='viewReport_fd1_0_c1_c3_c1_c0'>{{details.yesterday_order_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_1'>
				<view class='flex flex-wrap align-center justify-between'>
					<view class='flex flex-wrap align-center'>
						<text class='viewReport_fd1_1_c0_c0_c0'>近七天营业额曲线</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<view class='flex flex-wrap align-center viewReport_fd1_1_c0_c1_c0'>
							<image class='viewReport_fd1_1_c0_c1_c0_c0' mode="aspectFit" :src='STATIC_URL+"48.png"'>
							</image>
							<text class='viewReport_fd1_1_c0_c1_c0_c1'>成交量</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<image class='viewReport_fd1_1_c0_c1_c1_c0' mode="aspectFit" :src='STATIC_URL+"47.png"'>
							</image>
							<text class='viewReport_fd1_1_c0_c1_c1_c1'>成交额</text>
						</view>
					</view>
				</view>
				<view class='flex flex-wrap align-center justify-center viewReport_fd1_1_c1'>
					<view class=" viewReport_fd1_1_c1_c0">
						<!-- <qiun-data-charts type='line' chart-type='4' /> -->
						<canvas @touchstart="onClick" class="chart" id="line" canvas-id="line"></canvas>
					</view>
				</view>
			</view>
			<view class='flex flex-direction flex-wrap align-stretch flex-sub viewReport_fd1_2'>
				<view class='flex flex-wrap align-center viewReport_fd1_2_c0'>
					<text class='viewReport_fd1_2_c0_c0'>月数据</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_2_c1_c0'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_2_c1_c0_c0_c0'>本月营业额</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_2_c1_c0_c1'>
							<text class='viewReport_fd1_2_c1_c0_c1_c0'>{{details.this_month_order_money}}</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_2_c1_c1'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_2_c1_c1_c0_c0'>本月成交量</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_2_c1_c1_c1'>
							<text class='viewReport_fd1_2_c1_c1_c1_c0'>{{details.this_month_order_num}}</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_2_c1_c2'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_2_c1_c2_c0_c0'>上月营业额</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_2_c1_c2_c1'>
							<text class='viewReport_fd1_2_c1_c2_c1_c0'>{{details.last_month_order_money}}</text>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch viewReport_fd1_2_c1_c3'>
						<view class='flex flex-wrap align-center'>
							<text class='viewReport_fd1_2_c1_c3_c0_c0'>上月成交量</text>
						</view>
						<view class='flex flex-wrap align-center justify-center viewReport_fd1_2_c1_c3_c1'>
							<text class='viewReport_fd1_2_c1_c3_c1_c0'>{{details.last_month_order_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!---日数据flex布局结束-->


	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				lineColorArr: [{
					color: "#4A93E8"
				}, {
					color: "#6BBBC3"
				}], //切换折线1，折线2{color:"#888"},{color:"#888"}3.0最新版本修改
				details: ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.chart').boundingClientRect(data => {
				// this.domEchart = data;
				console.log(data)
				this.lineDraw("line", data, -1);
			}).exec();
		},
		onLoad(options) {
			this.get649bdc9a8a38f()

		},
		methods: {
			get649bdc9a8a38f() {
				this.$api.post(global.apiUrls.get649bdc9a8a38f, {
					type: this.tabls
				}).then(res => {
					if (res.data.code == 1) {
						this.details = res.data.data
					}
				})
			},
			toFixedNumber(n = 2, val) { //去小数点后2位
				if (typeof val == "number") {
					return val.toFixed(n) * 1
				}
			},
			//绘制线条 line chart3.0最新版本修改
			lineDraw(ids, elem, num = -1) {
				
				
				let ctx = uni.createCanvasContext(ids),
					isHover = null;
					
					
					
				let grid = {
						top: (12 * elem.height) / 100, //canvas标签的高度的12%（相对总高的百分比）
						bottom: ((100 - 18) * elem.height) / 100, //canvas图形距离底部的百分比 18%
						left: (12 * elem.width) / 100, //距离左侧的百分比（12%总宽度）
						right: ((100 - 8) * elem.width) / 100 //距离右侧百分比（8%总宽度）
					},
					lineColor = "#999", //x,y轴线颜色
					fillColor = "#333", //x,y轴number颜色
					
					// yAxis = {
					// 	textSize: 10, //刻度数字fontSize
					// 	maxNumber: moneyNum, //分段的最大值
					// 	splitNumber: 5, //分成几段
					// 	splitLen: 5, //轴左侧的小横线 -|
					// 	marginSplit: 5 //刻度文字与 “-|”的距离  
					// },
					lineWidth = 1,
					xAxis = {
						textSize: 10, //刻度数字fontSize
						maxNumber: 12,
						splitNumber: 6,
						splitLen: 5,
						marginSplit: 5
					},
					dotStyle = [{
							color: "#fff",
							arcR: 4, //半径
							dash: 0 //是否线条虚线 0实线 1以上虚线
						},
						{
							color: "#fff",
							arcR: 4, //半径
							dash: 0 //是否线条虚线 0实线 1以上虚线
						}
					],
					lineStyle = [{
							color: "#4A93E8",
							lineDotType: "line", //两圆点的连接线 line直线，wave二次贝塞尔曲线
							width: 2, //连线的width
							dash: 3 //是否线条虚线 0实线 1以上虚线
						},
						{
							color: "#6BBBC3",
							lineDotType: "line", //两圆点的连接线 line直线，wave二次贝塞尔曲线
							width: 2, //连线的width
							dash: 0 //是否线条虚线 0实线 1以上虚线
						}
					],
					dataJSON = [ //数据data
						// {
						// 	x: [1, 3, 5, 9, 10, 12],//设置字符类型，非Number
						// 	y: [69, 28, 70, 65, 76, 65]
						// },
						// {
						// 	x: [1, 3, 5, 9, 10, 12],//非Number类型数据 复制第一条 x的数据
						// 	y: [9, 18, 70, 75, 56, 35]
						// }
						// {
						// 	x: ["1月", "3月", "5月", "9月", "10月", "12月"], //设置字符类型，非Number
						// 	y: [69, 28, 70, 65, 76, 65]
						// },
						// {
						// 	x: ["1月", "3月", "5月", "10月", "10月", "12月"], //非Number类型数据 复制第一条 x的数据
						// 	y: [9, 18, 70, 75, 56, 35]
						// }
					];
					
					
					
					
				lineStyle.forEach((ep, vp) => {
					if (num == vp) {
						this.lineColorArr[vp] = {
							color: ep.color
						};
					} else if (num == -1) {
						this.lineColorArr[vp] = {
							color: ep.color
						};
					} else {
						this.lineColorArr[vp] = {
							color: "#888"
						};
					}

				});
				ctx.beginPath();
				ctx.setLineWidth(lineWidth);
				ctx.setTextAlign("right");
				ctx.setTextBaseline("middle");
				ctx.setStrokeStyle(lineColor);
				ctx.setFillStyle(fillColor);
				ctx.moveTo(grid.left, grid.top);
				ctx.lineTo(grid.left, grid.bottom);
				let yAxis=""
				this.$api.post(global.apiUrls.get649bdc9a8a38f, {
					type: this.tabls
				}).then(res => {
					if (res.data.code == 1) {
						let moneyNum = Math.ceil(res.data.data.this_month_order_money)
						console.log(moneyNum)
						yAxis = {
							textSize: 10, //刻度数字fontSize
							maxNumber: moneyNum, //分段的最大值
							splitNumber: 5, //分成几段
							splitLen: 5, //轴左侧的小横线 -|
							marginSplit: 5 //刻度文字与 “-|”的距离  
						}
						ctx.setFontSize(yAxis.textSize);
						for (let n = 1; n <= yAxis.splitNumber; n++) {
							ctx.moveTo(grid.left, grid.bottom - (grid.bottom - grid.top) / yAxis.splitNumber * n + lineWidth);
							ctx.lineTo(grid.left - yAxis.splitLen, grid.bottom - (grid.bottom - grid.top) / yAxis.splitNumber * n +
								lineWidth);
							ctx.fillText(this.toFixedNumber(1, yAxis.maxNumber / yAxis.splitNumber * n), grid.left - yAxis
								.splitLen - lineWidth - yAxis.marginSplit, grid.bottom - (grid.bottom - grid.top) / yAxis
								.splitNumber * n + lineWidth)
						}
					}
				})
				// ctx.setFontSize(yAxis.textSize);
				// for (let n = 1; n <= yAxis.splitNumber; n++) {
				// 	ctx.moveTo(grid.left, grid.bottom - (grid.bottom - grid.top) / yAxis.splitNumber * n + lineWidth);
				// 	ctx.lineTo(grid.left - yAxis.splitLen, grid.bottom - (grid.bottom - grid.top) / yAxis.splitNumber * n +
				// 		lineWidth);
				// 	ctx.fillText(this.toFixedNumber(1, yAxis.maxNumber / yAxis.splitNumber * n), grid.left - yAxis
				// 		.splitLen - lineWidth - yAxis.marginSplit, grid.bottom - (grid.bottom - grid.top) / yAxis
				// 		.splitNumber * n + lineWidth)
				// }
				ctx.moveTo(grid.left, grid.bottom);
				ctx.lineTo(grid.right, grid.bottom);
				ctx.setTextAlign("center");
				ctx.setTextBaseline("top");
				ctx.setFontSize(xAxis.textSize);
				
				this.$api.post(global.apiUrls.get649bdc9a8a38f,{
					type:this.tabls
				}).then(res=>{
					if(res.data.code==1){
						dataJSON = res.data.data.list
						console.log(dataJSON)
						
						if (typeof dataJSON[0].x[0] != "number") { //非number类型数据
							xAxis.splitNumber = dataJSON[0].x.length;
							xAxis.maxNumber = dataJSON[0].x.length;
						}
						for (let n = 1; n <= xAxis.splitNumber; n++) {
							ctx.moveTo(grid.left + (grid.right - grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom);
							ctx.lineTo(grid.left + (grid.right - grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom +
								xAxis.splitLen);
							//this.toFixedNumber(1, xAxis.maxNumber / xAxis.splitNumber * n)
							if (typeof dataJSON[0].x[n - 1] != "number") { //数据非number类型
								ctx.fillText(dataJSON[0].x[n - 1], grid.left + (grid.right -
										grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom + xAxis.splitLen +
									lineWidth +
									xAxis.marginSplit)
							} else { //number类型
								ctx.fillText(this.toFixedNumber(1, xAxis.maxNumber / xAxis.splitNumber * n), grid.left + (grid
										.right -
										grid.left) / xAxis.splitNumber * n - lineWidth, grid.bottom + xAxis.splitLen +
									lineWidth +
									xAxis.marginSplit)
							}
						}
						ctx.stroke();
						let tapDraw = (obj, data) => {
							ctx.save();
							ctx.beginPath();
							ctx.setFillStyle("#2C405A");
							ctx.setStrokeStyle("#E6A23C");
							ctx.setLineDash([5]);
							ctx.setLineWidth(1);
							ctx.moveTo(grid.left, obj.y - obj.offsetTop);
							ctx.lineTo(grid.right, obj.y - obj.offsetTop);
							ctx.moveTo(obj.x - obj.offsetLeft, grid.top);
							ctx.lineTo(obj.x - obj.offsetLeft, grid.bottom);
							ctx.stroke();
							ctx.restore();
							// ctx.draw(true, function(res,obj){
							// 	console.log('draw success', ctx);
							// });
						}
						let drawLineData = (dataX, dataY, ix) => {
							dataX.forEach((ele, indx) => {
								let x, y;
								if (typeof ele !== "number") {
									x = grid.left + (grid.right - grid.left) * ((indx + 1) / xAxis.maxNumber) -
										lineWidth,
										y = grid.bottom - (grid.bottom - grid.top) * (dataY[indx] / yAxis.maxNumber) +
										lineWidth;
								} else {
									x = grid.left + (grid.right - grid.left) * (ele / xAxis.maxNumber) - lineWidth,
										y = grid.bottom - (grid.bottom - grid.top) * (dataY[indx] / yAxis.maxNumber) +
										lineWidth;
								}
								if (indx >= dataX.length - 1) {} else {
									let x2 = typeof ele !== "number" ? grid.left + (grid.right - grid.left) * ((indx +
												2) / xAxis
											.maxNumber) - lineWidth : grid.left + (grid.right - grid.left) * (dataX[
												indx + 1] / xAxis
											.maxNumber) - lineWidth,
										y2 = grid.bottom - (grid.bottom - grid.top) * (dataY[indx + 1] / yAxis
											.maxNumber) + lineWidth;
									let dis = {
										x: x + (x2 - x) / 3 + (x2 - x) / 2,
										y: y2 - y > 0 ? y + (y2 - y) / 3 - (y2 - y) / 5 : y + (y2 - y) / 3 + (y2 -
											y) / 5
									};
									ctx.beginPath();
									ctx.setStrokeStyle(lineStyle[ix].color);
									ctx.setLineDash([lineStyle[ix].dash]);
									ctx.moveTo(x, y);
									if (lineStyle[ix].lineDotType == "line") { //直线连接
										ctx.lineTo(x2, y2);
									} else if (lineStyle[ix].lineDotType == "wave") { //二次贝塞尔曲线连接
										ctx.quadraticCurveTo(dis.x, dis.y, x2, y2);
									}
									ctx.stroke();
								}
								//显示 x，y的值
								if (this.tapEvent != null) {
									let x2 = this.tapEvent.x - this.tapEvent.offsetLeft,
										y2 = this.tapEvent.y - this.tapEvent.offsetTop;
									if (this.distDot({
											x: x2,
											y: y2
										}, {
											x: x,
											y: y
										}, dotStyle[ix].arcR + lineWidth) < 0) {
										ctx.beginPath();
										ctx.setFillStyle("#E6A23C");
										ctx.setLineDash([dotStyle[ix].dash]);
										ctx.arc(x, y, dotStyle[ix].arcR * 1.5, 0, 2 * Math.PI);
										ctx.fill();
										ctx.stroke();
						
										ctx.beginPath();
										ctx.setFillStyle(lineStyle[ix].color);
										ctx.setFontSize(14);
										ix % 2 == 1 ?
											ctx.fillText(ele + "," + dataY[indx], x, y + 6) :
											ctx.fillText(ele + "," + dataY[indx], x, y - 20);
										isHover = {
											x: x,
											y: y
										};
										ctx.fill();
									} else {
										ctx.beginPath();
										ctx.setFillStyle(dotStyle[ix].color);
										ctx.setLineDash([dotStyle[ix].dash]);
										ctx.arc(x, y, dotStyle[ix].arcR, 0, 2 * Math.PI);
										ctx.fill();
										ctx.stroke();
									}
						
								} else {
									ctx.beginPath();
									ctx.setFillStyle(dotStyle[ix].color);
									ctx.setLineDash([dotStyle[ix].dash]);
									ctx.arc(x, y, dotStyle[ix].arcR, 0, 2 * Math.PI);
									ctx.fill();
									ctx.stroke();
									if (num != -1) {
										ctx.beginPath();
										ctx.setFillStyle(lineStyle[ix].color);
										ctx.setFontSize(12);
										ctx.fillText(ele + "," + dataY[indx], x, y + 6);
										ctx.fill();
									}
								}
							})
						}
						dataJSON.forEach((e, v) => {
							if (v == num && num != -1) {
								drawLineData(e.x, e.y, v);
							} else if (num == -1) {
								drawLineData(e.x, e.y, v);
							} else {
						
							}
						})
						if (this.tapEvent != null && isHover != null) {
							tapDraw(this.tapEvent, elem);
						}
						ctx.draw();
						
						
					}
				})
				
				
				
				
				
				
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.chart {
		width: 100%;
		height: 480rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
	}
	.viewReport_fd1_1_c1_c0 {
		width: 639rpx;
		height: 500rpx;
	}

	.viewReport_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd0_0_c2 {
		width: 32rpx;
		height: 32rpx;
	}

	.viewReport_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.viewReport_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.viewReport_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.viewReport_flex_1 {
		padding: 24rpx 24rpx 40rpx 24rpx;
	}

	.viewReport_fd1_2_c1_c3_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_2_c1_c3_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_2_c1_c3_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_2_c1_c3 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_2_c1_c2_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_2_c1_c2_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_2_c1_c2_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_2_c1_c2 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_2_c1_c1_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_2_c1_c1_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_2_c1_c1_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_2_c1_c1 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_2_c1_c0_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_2_c1_c0_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_2_c1_c0_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_2_c1_c0 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_2_c0_c0 {
		color: #111111;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 30rpx;
	}

	.viewReport_fd1_2_c0 {
		margin: 9rpx 9rpx 15rpx 9rpx;
	}

	.viewReport_fd1_2 {
		background: rgba(255, 255, 255, 1);
		margin: 0rpx 0rpx 20rpx 0rpx;
		padding: 15rpx 15rpx 15rpx 15rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	

	.viewReport_fd1_1_c1 {
		margin: 48rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_1_c0_c1_c1_c1 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 24rpx;
	}

	.viewReport_fd1_1_c0_c1_c1_c0 {
		width: 28rpx;
		height: 8rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 12rpx 0rpx 0rpx;
	}

	.viewReport_fd1_1_c0_c1_c0_c1 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 24rpx;
	}

	.viewReport_fd1_1_c0_c1_c0_c0 {
		width: 28rpx;
		height: 8rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 12rpx 0rpx 0rpx;
	}

	.viewReport_fd1_1_c0_c1_c0 {
		margin: 0rpx 48rpx 0rpx 0rpx;
	}

	.viewReport_fd1_1_c0_c0_c0 {
		color: #111111;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 30rpx;
	}

	.viewReport_fd1_1 {
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		padding: 30rpx 24rpx 0rpx 24rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.viewReport_fd1_0_c1_c3_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_0_c1_c3_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_0_c1_c3_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_0_c1_c3 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_0_c1_c2_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_0_c1_c2_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_0_c1_c2_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_0_c1_c2 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_0_c1_c1_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_0_c1_c1_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_0_c1_c1_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_0_c1_c1 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_0_c1_c0_c1_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.viewReport_fd1_0_c1_c0_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.viewReport_fd1_0_c1_c0_c0_c0 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 24rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
	}

	.viewReport_fd1_0_c1_c0 {
		background: rgba(247, 247, 247, 1);
		margin: 9rpx 9rpx 9rpx 9rpx;
		width: 318rpx;
		height: 169rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.viewReport_fd1_0_c0_c0 {
		color: #111111;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 30rpx;
	}

	.viewReport_fd1_0_c0 {
		margin: 9rpx 9rpx 15rpx 9rpx;
	}

	.viewReport_fd1_0 {
		background: rgba(255, 255, 255, 1);
		margin: 0rpx 0rpx 20rpx 0rpx;
		padding: 15rpx 15rpx 15rpx 15rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}
</style>
