s
<template>
	<div class="leftBottom">
		<!-- <div class="header">
			<div class="hLeft"><span></span></div>
		</div> -->
		<div class="content">
			<Card title="审批数据汇总">
				<div class="diy-title">（近七日）</div>
				<div class="barContent" v-if="!drawInfo.isFlag">
					<div id="bar" style="width: 100%; height: 100%" ref="bar"></div>
				</div>
				<div class="barContent" v-else>
					<div class="gobackbar" @click="goBackBar()">
						<div class="left-dap"></div>
						返回
					</div>
					<div id="bar2" style="width: 100%; height: 100%" ref="bar2"></div>
				</div>
				<!-- <div class="cbProcess" v-if="!isFlag">
				<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
					<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
					<p>暂无数据</p>
				</div>
			</div> -->
			</Card>
		</div>
		<!-- <div class="header">
			<div class="hLeft">进度概况</div>
		</div> -->
		<div class="content" style="backgound: black">
			<Card title="进度概况">
				<div class="cbLine1">
					<div style="display: flex">
						<span>项目总进度:</span>
						<div class="numberCard" v-for="(item, i) in projectTotalProgress" :key="i">
							{{ item }}
						</div>
						<span style="margin-left: 5px">%</span>
					</div>
					<div style="display: flex">
						<span style="margin-left: 15px">项目剩余天数</span>
						<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">
							{{ item }}
						</div>
						<span style="margin-left: 5px">天</span>
					</div>
				</div>
				<div class="cbProcess" v-if="processList.length >= 5">
					<!-- v-if="listData.length>0" :list="listData"  -->
					<vue3-seamless-scroll
						v-if="processList.length > 0"
						:list="processList"
						:speed="1"
						:limitScrollNum="5"
						:step="0.3"
						:hover="true"
						class="scroll"
					>
						<div class="pItem" v-for="(item, i) in processList" :key="i">
							<div class="pLeft">
								<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
									<span style="margin-left: 10px">Top{{ i + 1 }}</span>
								</span>
							</div>
							<div class="pRight">
								<div class="prTop">
									<div class="prtLeft">{{ item.enterpriseName }}</div>
									<div class="prtRight">{{ item.changeAfter }}%</div>
								</div>
								<div class="prBottom">
									<div class="processLineBg">
										<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
											<div class="processLineBtn"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</vue3-seamless-scroll>
				</div>
				<div class="cbProcess" v-else-if="processList.length == 0">
					<div class="notoDta" v-if="processList.length == 0">
						<img src="@/assets/images/noData.png" alt="" />
						<p>暂无数据</p>
					</div>
				</div>
				<div class="cbProcess" v-else>
					<!-- v-if="listData.length>0" :list="listData"  -->
					<!-- <vue3-seamless-scroll 
							v-if="processList.length>0" :list="processList" 
								:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll"> -->
					<div class="pItem" v-for="(item, i) in processList" :key="i">
						<div class="pLeft">
							<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
								<span style="margin-left: 10px">Top{{ i + 1 }}</span>
							</span>
						</div>
						<div class="pRight">
							<div class="prTop">
								<div class="prtLeft">{{ item.enterpriseName }}</div>
								<div class="prtRight">{{ item.changeAfter }}%</div>
							</div>
							<div class="prBottom">
								<div class="processLineBg">
									<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
										<div class="processLineBtn"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- </vue3-seamless-scroll> -->
				</div>
			</Card>
		</div>
		<!-- <div class="content">
			<div class="centerBottom">
				<div class="cbTop"></div>
			</div>
		</div> -->
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, nextTick } from "vue";
import Card from "@/components/card.vue";
import * as echarts from "echarts";
// import ECharts from "vue-echarts";
import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi";
import { getPersonTypeAndEduStatisticsApi, getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi";
// import type { TabsPaneContext, ElMessageBox } from "element-plus";
// import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { GlobalStore } from "@/stores";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const store = GlobalStore();
// const activeName = ref("总包出勤情况分析");
// const activeIndex = ref("0" as any);
//出勤人员数据
let totalPerson = ref("" as any);
//考勤日环比
let totalPersonRhbRatio = ref("" as any);
//获取出勤人员数据/考勤日环比
const getPersonTypeAndEduStatistics = async (showLoading: boolean) => {
	const res: any = await getPersonTypeAndEduStatisticsApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log("出勤人员数据/考勤日环比", res);
		totalPerson.value = res.result.personType.attendancePerson.totalPerson;
		// if(totalPerson.value.length < 4){
		// 	let temp = 4-totalPerson.value.length
		// 	for(let i = 0;i<temp;i++){
		// 		totalPerson.value = "0" + totalPerson.value
		// 	}
		// }
		totalPersonRhbRatio.value = res.result.personType.attendancePerson.totalPersonRhbRatio;
	}
};

const drawInfo = reactive({
	isFlag: false
});
const stateInfo = reactive({
	dataInfo: {
		passed: 0,
		rejected: 0,
		underApproval: 0
	},
	dataDetail: {
		num: 0,
		name: "待审批"
	}
});
//绘画柱状图
function drawBar() {
	console.log("---------------------bar--------");
	const echartsTest = echarts.init(document.getElementById("bar"));
	// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
	let option = {
		color: ["#26FFCB", "#24CBFF", "#2651FF"],
		tooltip: {
			trigger: "item"
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: ["35%", "60%"],
				avoidLabelOverlap: false,
				minAngle: 35,
				label: {
					padding: [0, -50],
					lineHeight: 30,
					color: "#0FD4F1",
					show: true,
					// position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
					formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
					rich: {
						b: {
							fontFamily: "ABeeZee, ABeeZee",
							fontWeight: "400",
							fontSize: 15,
							color: "#FFFFFF"
						},
						c: {
							fontFamily: "ABeeZee, ABeeZee",
							fontWeight: "400",
							fontSize: 21,
							color: "#0FD4F1"
						}
					}
				},
				labelLine: {
					lineStyle: {
						color: "#3FBEFF"
					},
					show: true, // 是否显示标签线
					length: 30, // 标签线长度
					length2: 80 // 第二段标签线长度，默认为长度
				},
				data: [
					{ value: stateInfo.dataInfo.underApproval, name: "审批中" },
					{ value: stateInfo.dataInfo.rejected, name: "已驳回" },
					{ value: stateInfo.dataInfo.passed, name: "已通过" }
				]
			}
		]
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.resize();
	});
	//图例点击事件
	echartsTest.on("click", (params: any) => {
		console.log(params, params.name);
		drawInfo.isFlag = true;
		const obj = {
			审批中: "RUNNING",
			已驳回: "REFUSE",
			已通过: "PASS"
		} as any;
		nextTick(() => {
			getStatDetailByState(false, obj[params.name]);
		});
		// echartsTest.setOption({
		// 	legend: { selected: { [params.name]: true } }
		// });
	});
}
const goBackBar = () => {
	drawInfo.isFlag = false;
	nextTick(() => {
		drawBar();
	});
};
let dataList = ref([
	{
		enumType: "",
		value: 142,
		show: true,
		name: "人员",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#59F7CA"
		}
	},
	{
		enumType: "",
		value: 246,
		show: true,
		name: "车辆",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#62F2F8"
		}
	},
	{
		enumType: "",
		value: 315,
		show: true,
		name: "材料",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#F2BA48"
		}
	},
	{
		enumType: "",
		value: 420,
		show: true,
		name: "访客",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#81C4E5"
		}
	},
	{
		enumType: "",
		value: 263,
		show: true,
		name: "特殊作业",
		greatFaultLevelNumJzrRate: "",
		rectificationNum: "",
		rectificationNumJzrRate: "",
		rectificationName: "",
		itemStyle: {
			color: "#FDFDFC"
		}
	}
]);
//绘画柱状图
function drawBar2() {
	console.log("---------------------bar--------");
	const echartsTest = echarts.init(document.getElementById("bar2"));
	// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
	let option = {
		color: ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"],
		animation: false, // 取消动画
		tooltip: {
			trigger: "item"
		},
		title: {
			text: stateInfo.dataDetail.num,
			subtext: stateInfo.dataDetail.name,
			x: "29%",
			y: "40%",
			textAlign: "center",
			textStyle: {
				color: "#fff",
				fontSize: 20,
				fontWeight: "normal",
				// align: "center",
				fontFamily: "ABeeZee, ABeeZee"
			},
			subtextStyle: {
				color: "#9BB7D4",
				fontSize: 16,
				fontWeight: "normal",
				fontFamily: "ABeeZee, ABeeZee"
				// align: "center"
			}
		},
		legend: [
			{
				title: "风险图",
				selectedMode: true, // 取消图例上的点击事件
				icon: "circle",
				// type: "plain",
				orient: "vertical",
				type: "scroll", //legend要多，进行分页处理
				right: "2%",
				top: "20%",
				// bottom: "12%",
				align: "left",
				itemGap: 12,
				itemWidth: 30, // 设置宽度
				itemHeight: 9, // 设置高度
				symbolKeepAspect: false,
				textStyle: {
					width: 150,
					color: "#000",
					rich: {
						name: {
							align: "left",
							fontSize: 14,
							color: "#9BB7D4"
							// width: 60
						},
						value: {
							align: "left",
							fontSize: 16,
							color: "#9BB7D4"
						},
						value1: {
							align: "left",
							fontSize: 16,
							color: "#FFFFFF"
						}
					}
				},
				data: dataList.value.map((item, index) => {
					if (item.show) {
						return item.name;
					}
				}),
				formatter: function (data: any) {
					if (dataList.value && dataList.value.length) {
						for (let i = 0; i < dataList.value.length; i++) {
							if (data === dataList.value[i].name) {
								if (data == "无") return;
								let value = dataList.value[i].value;
								let percentage = dataList.value[i].percentage + "%";
								return "{name| " + data + "}  {gap|  }" + `{value|${value}} {gap|  } {value1|${percentage}}`;
							}
						}
					}
				}
			}
		],
		series: [
			// 外侧光线(数据只是用于占位)
			{
				name: "",
				type: "pie",
				radius: [100, 95],
				center: ["30%", "50%"],
				hoverAnimation: false,
				tooltip: {
					trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
				},
				itemStyle: {
					show: false,
					borderRadius: 10,
					borderWidth: 10
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{
						enumType: "",
						value: 5,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 7,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#F6FCFD"
							}
						}
					},
					{
						enumType: "",
						value: 2,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 24,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#1FC1DB"
							}
						}
					},
					{
						enumType: "",
						value: 2,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 7,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#FFFFFF"
							}
						}
					},
					{
						enumType: "",
						value: 3,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "transparent"
							}
						}
					},
					{
						enumType: "",
						value: 50,
						show: true,
						greatFaultLevelNumJzrRate: "",
						rectificationNum: "",
						rectificationNumJzrRate: "",
						rectificationName: "",
						itemStyle: {
							normal: {
								color: "#1FC1DB"
							}
						}
					}
				]
			},
			{
				name: "",
				type: "pie",
				radius: [60, 80],
				center: ["30%", "50%"],
				hoverAnimation: true,
				itemStyle: {
					borderWidth: 3,
					borderColor: "#000"
				},
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: dataList.value
			},
			{
				type: "pie",
				radius: ["52", "55"],
				center: ["30%", "50%"],
				label: {
					show: false
				},
				tooltip: {
					trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
				},
				data: [
					{
						value: 100,
						itemStyle: {
							color: {
								type: "linear",
								x: 1,
								y: 0.7,
								x2: 1,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(30,216,246,1)"
									},
									{
										offset: 1,
										color: "rgba(11,37,69,0)"
									}
								],
								global: false
							}
						}
					}
				]
			}
		]
	};
	echartsTest.setOption(option, true);
	window.addEventListener("resize", () => {
		console.log(echartsTest);
		echartsTest.resize();
	});
}

//进度数据
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let listData = ref([
	{ a: "新地能源工程技术有限公司", b: "54" },
	{ a: "中冶沈勘秦皇岛工程设计研究总院有限公司", b: "23" },
	{ a: "鞍山电力实业有限公司", b: "49" },
	{ a: "鞍钢矿业资源利用（鞍山）有限公司", b: "35" },
	{ a: "上海建工五建集团有限公司", b: "34" },
	{ a: "辽宁普凡建设有限公司", b: "67" },
	{ a: "沈阳隆基电磁科技股份有限公司", b: "56" },
	{ a: "中国科学院过程工程研究所", b: "78" },
	{ a: "宏大爆破工程集团有限责任公司", b: "45" },
	{ a: "鞍钢集团矿业设计研究院有限公司", b: "23" },
	{ a: "辽宁电力能源发展集团监理有限公司鞍山分公司", b: "69" },
	{ a: "辽宁五寰特种材料与智能装备产业技术研究院有限公司", b: "27" },
	{ a: "中铝山东工程技术有限公司", b: "59" },
	{ a: "中国华冶科工集团有限公司", b: "14" },
	{ a: "沈阳岩土工程技术测试开发有限公司", b: "38" },
	{ a: "永明项目管理有限公司", b: "41" }
] as any);

// 进度情况分析
// 项目总进度
let projectTotalProgress = ref("" as any);
// 项目剩余天数
let projectSurplusDayNum = ref({} as any);
// 获取项目总进度/项目剩余天数
const getCountTaskProgress = async (showLoading: boolean) => {
	const res: any = await getCountTaskProgressApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log("项目总进度/项目剩余天数", res);
		projectTotalProgress.value = res.result.projectTotalProgress + "";
		projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
	}
};
// 总包进度列表
let processList = ref([] as any);
// 获取总包进度列表
const queryCountEnterprise = async (showLoading: boolean) => {
	const res: any = await queryCountEnterpriseApi(
		{
			projectSn: store.sn,
			isCountMainEnterprise: 1
		},
		showLoading
	);
	if (res.result) {
		console.log("总包进度列表", res);
		processList.value = res.result;
		// processList.value = [
		// 	{
		// 		enterpriseName: "广东省某某科技有限公司(东北厂区)",
		// 		changeAfter: 70
		// 	},
		// 	{
		// 		enterpriseName: "广州市某公司名称(东北厂区)",
		// 		changeAfter: 65
		// 	},
		// 	{
		// 		enterpriseName: "企业名称(东北厂区)",
		// 		changeAfter: 60
		// 	},
		// 	{
		// 		enterpriseName: "这里是第四名企业名称(东北厂区)",
		// 		changeAfter: 55
		// 	}
		// ];
	}
};

// 获取审批数据汇总
const getStatByState = async (showLoading: boolean) => {
	const res: any = await getStatByStateApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log("审批数据汇总", res);
		stateInfo.dataInfo = res.result;
	}
	drawBar();
};
// 获取审批数据汇总详情
const getStatDetailByState = async (showLoading: boolean, state: string) => {
	const res: any = await getStatDetailByStateApi(
		{
			projectSn: store.sn,
			state: state
		},
		showLoading
	);
	if (res.result) {
		console.log("审批数据汇总详情", res);
		stateInfo.dataDetail = res.result[0];
		const colorList = ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"];
		dataList.value = res.result
			.map((item: any, index: number) => {
				if (index == 0) return;
				return {
					enumType: "",
					percentage: item.ratio,
					value: item.num,
					show: true,
					name: item.name,
					greatFaultLevelNumJzrRate: "",
					rectificationNum: "",
					rectificationNumJzrRate: "",
					rectificationName: "",
					itemStyle: {
						color: colorList[index]
					}
				};
			})
			.filter((item: any) => item);
	}
	drawBar2();
};
const setIntervalFn = (showLoading: boolean) => {
	getStatByState(showLoading);
	getPersonTypeAndEduStatistics(showLoading);
	getCountTaskProgress(showLoading);
	queryCountEnterprise(showLoading);
};
onMounted(async () => {
	setIntervalFn(false);
	// 定时三十秒刷新
	setInterval(() => {
		setIntervalFn(true);
	}, 30000);
});
</script>

<style lang="scss" scoped>
:deep(.h-card .content) {
	height: 79%;
	padding: 10px 10px;
	margin-top: 1%;
	overflow: hidden;
}
.diy-title {
		position: absolute;
		top: 3.5%;
		left: 34%;
		font-family: OPPOSansH;
		font-size: 14px;
		color: #6b7b99;
		letter-spacing: 2px; /* 设置文字间距为2像素 */
	}
.leftBottom {
	// background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
	// background-size: 100% 100%;
	height: 100%;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		margin-top: 6px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #0059ff;
		// height: 43px;
		background: url("@/assets/images/overviewScreen/card-header.png") no-repeat;
		background-size: 100% 100%;

		.hLeft {
			width: 50%;
			font-size: 20px;
			font-weight: bold;
			// background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
			-webkit-background-clip: text;
			background-clip: text;
			// color: transparent;
			font-style: oblique;
			color: white;
		}
	}

	.content {
		// background-color: darkred;
		height: 50%;
		// background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
		// background-size: 100% 100%;
		margin-top: 11px;
		// margin: 10px 20px;
		position: relative;

		.barContent {
			width: 100%;
			height: 100%;
			position: relative;
			.gobackbar {
				color: #fff;
				font-size: 12px;
				display: flex;
				align-items: center;
				cursor: pointer;
				position: absolute;
				right: 4px;
				top: 4px;
				z-index: 999;
				.left-dap {
					width: 18px;
					height: 18px;
					background-image: url(@/assets/images/overviewScreen/left-dap.png);
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.cbLine1 {
			color: #fff;
			padding-top: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 30px;
			height: 30px;
			font-size: 15px;

			.numberCard {
				font-size: 15px;
				padding: 0 8px;
				margin-left: 3px;
				font-weight: bold;
				color: #47bcec;
				background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
				background-size: 100% 100%;
			}
		}

		.cbProcess {
			// padding-top: 5px;
			// height: calc(100% - 55px);
			overflow: hidden;

			// background-color: #fff;
			.pItem {
				width: 100%;
				height: 55px;
				display: flex;
				// background-color: #fff;
				font-size: 13px;
				color: #fff;

				.pLeft {
					width: 20%;
					height: 55px;
					display: flex;
					justify-content: center;
					align-items: center;

					.plInner {
						width: 80px;
						// text-align: center;
						line-height: 30px;
						// background-color: darkred;
						border-radius: 100px;
					}
				}

				.pRight {
					width: 80%;
					height: 55px;

					.prTop {
						// background-color: darkblue;
						display: flex;
						justify-content: space-between;
						height: 30px;

						.prtLeft {
							display: flex;
							justify-content: center;
							align-items: flex-end;
						}

						.prtRight {
							display: flex;
							justify-content: center;
							align-items: flex-end;
						}
					}

					.prBottom {
						// background-color: purple;
						height: 15px;

						.processLineBg {
							background-color: rgba(50, 50, 50, 0.5);

							// transform: scaleX(-1);
							.processLine {
								margin-top: 10px;
								// padding-top: 10px;
								height: 5px;
								display: flex;
								justify-content: flex-end;

								.processLineBtn {
									width: 3px;
									height: 9px;
									background: #fff;
									transform: translateY(-2px);
								}
							}

							// .plBgc1{
							// 	background: rgb(150,0,0);
							// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
							// }
						}
					}
				}
			}
		}
	}
}

.scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.notoDta {
	top: 35%;
	width: 50%;
	// left: 40%;
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 30%;
	}
}

.plBgc1 {
	background: rgb(139, 0, 0);
	background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc1 {
	background: rgb(139, 0, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
}

.plBgc2 {
	background: rgb(155, 155, 0);
	background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc2 {
	background: rgb(155, 155, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
}

.plBgc3 {
	background: rgb(0, 0, 139);
	background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc3 {
	background: rgb(0, 0, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
}

.plBgc4 {
	background: rgb(139, 0, 139);
	background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc4 {
	background: rgb(139, 0, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
}

.plBgc5 {
	background: rgb(72, 61, 139);
	background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc5 {
	background: rgb(72, 61, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
}

.plBgc6 {
	background: rgb(0, 206, 209);
	background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc6 {
	background: rgb(0, 206, 209);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
}

.plBgc7 {
	background: rgb(47, 79, 79);
	background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc7 {
	background: rgb(47, 79, 79);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
}

.plBgc8 {
	background: rgb(0, 100, 0);
	background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc8 {
	background: rgb(0, 100, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
}

.plBgc9 {
	background: rgb(189, 183, 107);
	background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc9 {
	background: rgb(189, 183, 107);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
}

.plBgc10 {
	background: rgb(255, 140, 0);
	background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc10 {
	background: rgb(255, 140, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
}

.plBgc11 {
	background: rgb(233, 150, 122);
	background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc11 {
	background: rgb(233, 150, 122);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
}

.plBgc0 {
	background: rgb(0, 139, 139);
	background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}

.plBtnBgc0 {
	background: rgb(0, 139, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
}
</style>