<!-- BCP系统 -->
<script setup lang="ts">
import HomeHead from '@/views/home/components/HomeHead.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import Action from './ation.vue'
import sTree from './sTree.vue'
import { useDate } from '@/views/home/hooks/useDate'
import { useMessage, NModal, NPopover } from 'naive-ui'
import { getBPCActList, BPCDownload, getCateTreeList } from '@/api/daikin/base'
import { useUserStore } from '@/stores/modules/user'
import Amtion from '@/components/amtion.vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
const modules = [Autoplay, Pagination, Navigation, A11y]
const store = useUserStore()
const userCode = ['admin', 'bcp_dandnag', 'tech_service'].includes(
	store.user.roleCode
)

// import { da } from 'element-plus/es/locale/index.js'
const { day, week } = useDate()
const { push } = useRouter()
const message = useMessage()

// let index = -1
const dataA = ref([])
const dataB = ref([])
const dataD = ref([])
const dataC = ref([])
const dataE = ref([])
onMounted(async () => {
	getData()
})

const scrollNewHandler = function (ev) {
	let target = ev.target
	document.getElementById('summaryContent').scrollTop = target.scrollTop
	console.log(ev)
}
const scrollSummaryHandler = function (ev) {
	let target = ev.target
	document.getElementById('newContent').scrollTop = target.scrollTop
	console.log(ev)
}

function getFileName(url) {
	let lastSplashIndex = url.lastIndexOf('/')
	let lastDotIndex = url.lastIndexOf('.')
	return url.slice(lastSplashIndex + 1, lastDotIndex)
}

function computedTreeNode(item: any) {
	console.log(item, '一级数据1111111')
	let oldFileList = JSON.parse(JSON.stringify(item.fileList))
	item.childList = item.childList || []
	item.childList = item.childList.map(computedTreeNode)
	item.fileList = []
	oldFileList.map((item2: any) => {
		if (item2.isSelect == item.id) {
			item.fileList.push({
				...item2,
				isShow: false,
				fileName: getFileName(item2.filePath)
			})
		}
	})
	return item
}

async function getData() {
	const {rows:datacArr} = await getBPCActList({moduleId: 2})
	const { rows: dataArr } = await getBPCActList({ moduleId: 1 })
	const { rows: dataBrr } = await getBPCActList({ moduleId: 4 })
	// const { rows: dataCrr } = await getBPCActList({ moduleId: 3 });
	const { data: dataDrr } = await getCateTreeList({ moduleId: 4 })
	const { rows: dataErr } = await getBPCActList({ moduleId: 5 })

	dataC.value = datacArr

	dataA.value = dataArr.map((item) => {
		return {
			...item,
			fileName: getFileName(item.filePath),
			breifName: getFileName(item.briefingPath)
		}
	})
	dataB.value = dataBrr
	// dataC.value = dataCrr;

	dataDrr.forEach((item) => {
		return addIsShow(item)
	})

	dataD.value = dataDrr
	console.log(dataDrr)
	// dataD.value = dataDrr.map(item => {
	//     return {
	//         ...item,
	//         childList: item.childList || []
	//     }
	// });
	dataE.value = dataErr
	dataE.value = [
		{ title: '社区在库', content: '高风险地区社数疫情的确' },
		{ title: '在送数量', content: '高风险地区社数疫情的确' },
		{ title: '风险指数', content: '高风险地区社数疫情的确' },
		{ title: '风险指数', content: '高风险地区社数疫情的确' },
		{ title: '风险指数', content: '高风险地区社数疫情的确' },
		{ title: '风险指数', content: '高风险地区社数疫情的确' },
		{ title: '社区在库', content: '高风险地区社数疫情的确' },
		{ title: '社区在库', content: '高风险地区社数疫情的确' }
	]
}

function getFile(arr:any[]):any[] {
	let file:any = []
	arr.forEach((item) => {
		item.fileList && file.push(...item.fileList)
		if (item.childList?.length) {
			file.push(...getFile(item.childList))
		}
	})
	return file
}

function addIsShow(obj) {
	if (obj) {
		obj.isShow = true // 在当前对象上添加 isShow 属性
		obj.fileList ? obj.fileLists = [...obj.fileList ] : obj.fileLists = []
		if (obj.childList && obj.childList.length > 0) {
			obj.fileLists.push(...getFile(obj.childList))
			// 如果有子对象，则递归调用 addIsShow 函数
			// obj.childList.forEach((child) => {
			// 	addIsShow(child)
			// })
		}
	}
}

const src = ref('')
const srcType = ref()
const showModalRef2 = ref(false)
const clickFileHandler = async (row) => {
	console.log(row, 'xiaolu9999')
	download(row)
}
const clickMoreHandler = async (row) => {
	push({ name: 'bpcTreeDetail', query: { id: row.id } })
	console.log(row, '111111')
}
const changeIsShowFn = async (index: number) => {
	dataD.value[index].isShow = !dataD.value[index].isShow
	console.log(dataD.value, 'xiaolu11')
}
const jumpListHandler = (title, type) => {
	push({ name: 'bpclist', query: { title, type } })
}
const jumpContentHandler = (title, type) => {
	push({ name: 'contentList', query: { title, type } })
}
const download = async (row) => {
	if (!row) return
	if (row.isSelect === 2) {
		message.error('没有访问权限')
		return
	}
	let { briefingPath ,filePath } = row
	console.log("🚀 ~ file: BCP.vue:169 ~ briefingPath ,filePath:", briefingPath ,filePath)

	if (!briefingPath && !filePath) {
		message.info('没有可预览文件！')
		return
	}
	srcType.value = getLastSubstring(briefingPath || filePath)
	if (
		['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(srcType.value)
	) {
		// src.value = filePath
		// pdfShow.value = true
		briefingPath = briefingPath || filePath
		const screenWidth = window.screen.width
		const screenHeight = window.screen.height
		window.open(
			briefingPath,
			'',
			'width=' +
				screenWidth +
				',height=' +
				screenHeight +
				',top=' +
				0 +
				',left=' +
				0
		)
	} else {
		message.error(
			"文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！"
		)
	}
}

const toggleHandler = function (ev) {
	ev.target.parentNode.parentNode.classList.toggle('expand')
}

function unescapeHTML(html: string) {
	if (!html) return ''
	const doc = new DOMParser().parseFromString(html, 'text/html')
	return doc.documentElement.textContent
}

const showDetail = function (row, id) {
	// console.log(row, id);
	sessionStorage.setItem('title', row.title)
	console.log(row.content)
	sessionStorage.setItem('content', row.content)
	push({ name: 'bcpDetail' })
}

function getLastSubstring(str: string): string {
	const lastIndex = str.lastIndexOf('.')
	if (lastIndex !== -1) {
		return str.substring(lastIndex + 1)
	} else {
		return ''
	}
}

// async function download(row, moduleId) {
//     const { code, data } = await BPCDownload({ id: row.id })
//     if (code != 200) return;

//     try {
//         const response = await BPCDownload({ id: row.id })
//          var blob = new Blob([response.data]);

//         const downloadUrl = URL.createObjectURL(blob);

//         const link = document.createElement('a');
//         link.href = downloadUrl;
//         link.download = row.fileName; // 替换为你要保存的文件名
//         link.click();
//         URL.revokeObjectURL(downloadUrl);
//     } catch (error) {
//         message.error(error)
//         // message.error('下载文件出错：', error);
//     }
// }

const isChart = (content) => {
	return unescapeHTML(content).replace(/[^\u0000-\u00ff]/g, 'aa').length >= 27
}
</script>

<template>
	<HomeHead class="top">
		<template #content>
			<!-- <HomeHeadSearch /> -->
		</template>
	</HomeHead>
	<div class="h-full relative flex flex-col">
		<el-button
			type="primary"
			v-if="userCode"
			class="button !top-40px"
			@click="push({ name: 'modifyBPC' })"
			>内容管理</el-button
		>
		<div class="font-600 flex text-36px mt39px bcp-title">
			BCP：SCM系统(智能供应链)数据联动+BI化呈现
		</div>
		<div class="b-wrapper flex-1 flex flex-col items-center">
			<!-- <div class="scroll w1372px h66px">
                滚动条:BCP实时情报.:BCP实时情报.:BCP实时情报.:BCP实时情报.:BCP实时情报.
            </div> -->
			<!-- <el-button type="primary" class="button" @click="push({ name: 'modifyBPC' })">情报管理</el-button> -->
			<div class="b-content w-full flex-1 relative">
				<div class="new absolute">
					<div
						class="text-22px font-500 font-bold new-title text-center"
						@click="jumpContentHandler('BCP News', 1)"
					>
						BCP News
					</div>
					<div
						class="absolute right-40px top-35px justify-center flex"
						@click="jumpContentHandler('BCP News', 1)"
					>
						更多<el-icon>
							<DArrowRight class="" />
						</el-icon>
					</div>

					<div
						class="new-content overflow-hidden"
						id="newContent"
						v-if="dataA.length > 0"
					>
						<!-- <div v-for="it in dataA" class="new-item h20px mb-10px overflow-hidden" :key="it">
              <div class="news1 w340px h38px text-16px lh-22px" @click="showDetail(it, 1)">
                <span v-if="it.status === 'New'" class="tit bg-#2CBA06" style="color: white">{{ it.status }}:</span>
                <span class="cur_p" style="color: white">{{ it.title }}: </span>
                <span class="cur_file" @click.stop="download(it, 1)">{{
                  it.fileName
                }}</span>
              </div>
            </div> -->
						<el-table
							v-if="false"
							:data="[]"
							style="width: 100%"
							row-key="markId"
							:header-cell-style="{
								color: '#fff',
								height: '40px',
								'font-size': '18px',
								background: 'linear-gradient(to top, #006BE5, #002C99)'
							}"
							:cell-style="{}"
						>
							<el-table-column prop="" label="时间" width="70px">
							</el-table-column>
							<el-table-column prop="" label="情报内容"> </el-table-column>
							<el-table-column prop="" label="风险评估"> </el-table-column>
						</el-table>
						<div
							class="flex font-bold items-center h-40px w-full text-white text-18px border-b-black border-2px mt-4px"
							style="background: linear-gradient(to top, #006be5, #002c99)"
						>
							<div class="w-[20%] pl-6px">时间</div>
							<div class="w-[50%]">情报内容</div>
							<div class="w-[30%]">风险评估</div>
						</div>
						<div class="overflow-hidden pt-4px">
							<swiper
								:autoplay="{ delay: 1000, disableOnInteraction: false }"
								id="swiperList2"
								:slides-per-view="3"
								:speed="500"
								:space-between="0"
								:direction="'vertical'"
								:scrollbar="{ draggable: false }"
								:loop="true"
								:modules="modules"
								style="padding-top: 12px; height: 150px"
							>
								<swiper-slide v-for="i in dataA" :key="i.id">
									<div
										class="!h-40px mb-10px text-16px leading-5 flex items-center w-full text-white"
									>
										<div class="w-[20%] pl-6px">
											{{ i.createTime.substring(5, 10) }}
										</div>
										<div class="truncate w-[50%] pr-6px">
											{{ unescapeHTML(i.content) }}
										</div>
										<div class="truncate w-[30%]">
											{{ unescapeHTML(i.riskEstimation) }}
										</div>
									</div>
								</swiper-slide>
							</swiper>
						</div>
						<el-table
							v-if="false"
							:data="dataA"
							style="width: 100%; margin-bottom: 20px"
							row-key="markId"
							:header-cell-style="{
								color: '#fff',
								height: '40px',
								'font-size': '18px',
								background: 'linear-gradient(to top, #006BE5, #002C99)'
							}"
							:cell-style="{
								'overflow-y': 'auto',
								height: '40px',
								border: '1px solid rgba(0,0,0,0.2)',
								color: '#fff'
							}"
							height="850"
						>
							<el-table-column prop="createTime" label="时间" width="70px">
								<template #default="scope">
									{{ scope.row.createTime.substring(5, 10) }}
								</template>
							</el-table-column>
							<el-table-column prop="content" label="情报内容">
								<template #default="scope">
									<div
										class="h-45px p0 m0 text-ellipsis whitespace-nowrap overflow-hidden"
										:class="isChart(scope.row.content) ? 'text-ellipsis' : ''"
										:title="unescapeHTML(scope.row.content)"
									>
										{{ unescapeHTML(scope.row.content) }}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="riskEstimation" label="风险评估">
								<template #default="scope">
									<div
										class="h-45px p0 m0"
										:class="
											isChart(scope.row.riskEstimation)
												? 'two-line-header '
												: ''
										"
										:title="scope.row.riskEstimation"
									>
										{{ scope.row.riskEstimation }}
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div v-if="dataA.length == 0" class="empty-content"></div>
				</div>
				<img
					src="./images/yojjt@2x.png"
					class="w-18px h18px absolute left-49.5% top-20% ml--8px"
				/>
				<div class="summary absolute">
					<!-- <div class="arrow"></div> -->
					<div
						class="text-22px font-500 font-bold summary-title text-center"
						@click="jumpContentHandler('BCP简报', 2)"
					>
						BCP简报
					</div>
					<div
						class="absolute right-40px top-35px flex items-center"
						@click="jumpContentHandler('BCP简报', 2)"
					>
						更多<el-icon>
							<DArrowRight class="" />
						</el-icon>
					</div>
					<div
						class="rounded-2xl summary-content overflow-hidden"
						id="summaryContent"
						v-if="dataC.length > 0"
					>
						<swiper
							:autoplay="{ delay: 1000, disableOnInteraction: false }"
							id="swiperList2"
							:slides-per-view="4"
							:speed="500"
							:space-between="0"
							:direction="'vertical'"
							:scrollbar="{ draggable: false }"
							:loop="true"
							:modules="modules"
							style="padding-top: 10px; height: 190px"
						>
							<!-- <div
							v-for="(it, index) in dataA"
							class="py22px h20px overflow-hidden item-row"
							:key="it"
							:style="
								index == 0
									? ' border-radius:25px 25px 0px 0px ;'
									: index == 3
									? ' border-radius: 0 0  25px 25px;'
									: ''
							"
						>
							<div
								v-if="index < 4"
								class="inline-flex cur_p file-icon text-16px"
								@click="download(it, 1)"
								style="line-height: 13px"
							>
								{{ it.breifName }}
							</div>
						</div> -->
							<swiper-slide v-for="i in dataC" :key="i.id">
								<div class="py22px item-row items-center flex">
									<div
										class="inline-flex cur_p file-icon text-16px"
										@click="download(i)"
									>
										{{ i.title }}
									</div>
								</div>
							</swiper-slide>
						</swiper>
					</div>
					<div v-else class="empty-content"></div>
				</div>

				<div class="operate w344px h180px absolute">
					<div class="ring-operate"></div>
					<div
						class="text-23px operate-title text-#00E4FF font-500"
						@click="jumpListHandler('运营守则', 4)"
					>
						运营守则
					</div>
					<div class="operate-content overflow-y-auto" v-if="dataB.length > 0">
						<div
							v-if="dataB"
							v-for="it in dataB"
							class="py12px h34px overflow-hidden"
							:key="it"
						>
							<n-popover trigger="hover" placement="top-start">
								<template #trigger>
									<div
										class="inline-flex cur_p file-icon text-16px"
										@click="download(it, 4)"
										style="line-height: 25px"
									>
										{{ it.title }}
									</div>
								</template>
								<div class="text-20px truncate leading-40px">
									{{ it.title }}
								</div>
							</n-popover>
						</div>
					</div>
					<div v-else class="empty-content"></div>
				</div>

				<div class="gen w293px h92px absolute">
					<div class="ring-gen"></div>
					<div class="text-23px text-#00E4FF font-500 gen-title">供方SCM</div>
					<div class="gen-content overflow-y-auto" v-if="true">
						<!-- <div v-if="dataC" v-for="it in dataC" class="py8px h28px overflow-hidden" :key="it">
              <n-popover trigger="hover" placement="top-start">
                <template #trigger>
                  <div class="inline-flex cur_p file-icon" @click="download(it, 4)">
                    {{ it.title }}
                  </div>
                </template>
                <div class="text-20px truncate leading-40px">
                  {{ it.title }}
                </div>
              </n-popover>
            </div> -->
						<img src="./images/ss.png" class="w-388px" />
					</div>
					<div v-else class="empty-content">
						<div class="content"></div>
					</div>
				</div>

				<div class="supplier absolute">
					<div class="ring-supplier"></div>
					<div
						class="text-23px text-#00E4FF font-500 supplier-title"
						@click="push({ name: 'bpcTreeDetail' })"
						style="cursor: pointer"
					>
						BCP情报
					</div>
					<div
						class="supplier-content overflow-y-auto text-16px"
						v-if="dataD.length > 0"
					>
						<s-tree
							:data="dataD"
							@changeIsShow="changeIsShowFn"
							@clickFile="clickFileHandler"
							@clickMore="clickMoreHandler"
						></s-tree>
						<!-- <div v-if="dataD"  v-for="it in dataD" class="supplier-item expand">
                            <div class="suppier-sub-title">
                                {{it.name}}
                                <span class="icon-arrow" @click="toggleHandler($event)"></span>
                            </div>
                            <div v-for="(item, index) in it.childList" :key="index" class="supplier-item-container">
                                <div class="sub-title">
                                    <span>{{index + 1}})</span>
                                    {{item.name}}
                                </div>
                                <div class="file-icon">{{item.name}}</div>
                            </div>
                        </div> -->
					</div>
					<div v-else class="empty-content"></div>
				</div>

				<div class="dunpai w113px h69px absolute"></div>
				<div class="cxpai absolute"></div>

				<div class="earth w400px h400px absolute">
					<Action :dataE="dataE" @downloadHandle="download"></Action>
				</div>
			</div>
		</div>
	</div>
	<n-modal :mask-closable="true" v-model:show="showModalRef2">
		<div class="w90% h90%">
			<Amtion :data="src" :datas="srcType" />
		</div>
	</n-modal>
</template>

<style scoped lang="less">
.item-row {
	background: linear-gradient(to right, #006be5, #002c99);
	border-bottom: 2px solid rgba(0, 0, 0, 0.5);
	height: 38px;
	padding-left: 10px;
}
.two-line-header {
	position: relative;
}
.two-line-header::before {
	float: right;
	margin-top: 23px;
	width: 10px;
	height: 5px;
	content: '...';
	color: rgb(255, 255, 255);
}
.new-content /deep/ .el-table,
.new-content /deep/ .el-table__expanded-cell {
	background-color: transparent;
	color: #606266;
}
/* 表格内背景颜色 */
.new-content /deep/ .el-table th,
.new-content /deep/ .el-table tr,
.new-content /deep/ .el-table td {
	background-color: transparent !important;
	//表格字体颜色
	color: #606266;
}
.new-content /deep/ .el-table .el-table__cell {
	padding: 5px 0 !important;
}
.new-content /deep/ .el-table .cell {
	padding: 0 5px !important;
}
.new-item {
	display: flex;

	.news1 {
		flex: 0 0 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #00e4ff;
	}

	.cur_file {
		flex: 0 0 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 20px;
		color: #00e4ff;
		cursor: pointer;
	}
}

.ring-operate {
	position: absolute;
	right: -120px;
	top: -10px;
	width: 117px;
	height: 109px;
	background: url('./images/tbjj.png'), url('./images/bcppp.png');
	background-repeat: no-repeat;
	background-position: center;
}

.ring-gen {
	position: absolute;
	right: -140px;
	top: -50px;
	width: 117px;
	height: 109px;
	background: url('./images/tbjj.png'), url('./images/gfs.png');
	background-repeat: no-repeat;
	background-position: center;
}

.ring-supplier {
	position: absolute;
	left: -120px;
	top: -50px;
	width: 117px;
	height: 109px;
	background: url('./images/tbjj.png'), url('./images/bcppT.png');
	background-repeat: no-repeat;
	background-position: center;
}

.max-w120px {
	max-width: 148px;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.empty-content {
	position: absolute;
	left: 0;
	top: 40px;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('./images/tishi2.png');
	background-repeat: no-repeat;
	background-position: center;
}

.operate,
.gen,
.supplier {
	.empty-content {
		top: 40px;
	}
}

.cxpai {
	width: 231px;
	height: 37px;
	right: 0;
	left: 0;
	margin: auto;
	top: 520px;
	z-index: 99;
	background: url('./images/tishi3.png');
	background-repeat: no-repeat;
}

.gen .empty-content {
	top: 25px;
	left: -10px;

	.content {
		position: absolute;
		top: 140px;
	}
}

.cur_p {
	cursor: pointer;
}

.tit {
	padding: 3px;
	font-size: 12px;
	border-radius: 3px;
	line-height: 1;
	margin-right: 10px;
}

.button {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 500;
}

.bcp-title {
	margin-bottom: 30px;
}

::-webkit-scrollbar {
	width: 1px;
}

.top {
	position: absolute;
	right: 30px;
	top: -92px;
}

.b-wrapper {
	border-radius: 18px;
	border: 1px solid #e7ebf5;
	box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
	background-image: url('./images/bcpbj.png');
	background-size: 100% 100%;
	overflow: hidden;

	.scroll {
		font-size: 26px;
		text-align: center;
		line-height: 66px;
		background-image: url('./images/tout.png');
		background-size: cover;
	}

	.specific {
		top: 35px;
		left: 965px;
		background-image: url('./images/kneur.png');
		background-size: cover;
	}

	.file-icon {
		display: flex;
		align-items: center;
		height: 21px;
		background-image: url('./images/biq2.png');
		background-size: 24px 20px;
		background-repeat: no-repeat;
		background-size: left center;
		padding-left: 28px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		line-height: 20px;
		cursor: pointer;
	}

	.file-icon:hover {
		color: #00e4ff;
	}

	.font-bold {
		font-weight: bold;
		height: 41px;
		background-image: url('./images/bitbj@2x.png');
		background-size: 230px 35px;
		background-position: center top;
		background-repeat: no-repeat;
	}
	// bcp简报
	.summary {
		top: 15px;
		left: 50%;
		// width: 427px;
		// height: 265px;
		width: 543px;
		height: 327px;
		padding-left: 48px;
		padding-top: 64px;
		padding-right: 48px;
		background-image: url('./images/jianbk2.png');
		background-size: cover;
		background-repeat: no-repeat;

		.arrow {
			width: 20px;
			height: 28px;
			background: url('./images/lans.png');
			position: absolute;
			left: -2px;
			top: 64px;
		}

		.summary-title {
			left: 0;
			position: absolute;
			top: 20px;
			line-height: 38px;
			right: 0;
			text-align: center;
		}

		.summary-content {
			box-sizing: border-box;
			height: 190px;

			// height: 150px;
		}
	}

	// bcp-news
	.new {
		top: 15px;
		right: 51%;
		width: 543px;
		height: 327px;
		padding-left: 48px;
		padding-top: 64px;
		padding-right: 48px;
		background-image: url('./images/jianbk.png');
		background-size: cover;
		background-repeat: no-repeat;

		.new-title {
			left: 0;
			position: absolute;
			top: 20px;
			line-height: 40px;
			right: 0;
			text-align: center;
		}

		.new-content {
			// box-sizing: border-box;
			height: 180px;
		}
	}

	// .operate {
	//   top: 290px;
	//   left: 180px;
	//   width: 353px;
	//   height: 136px;
	//   padding-left: 16px;
	//   padding-top: 40px;
	//   padding-right: 30px;
	//   background-image: url("./images/k2.png"), url("./images/k1.png");
	//   background-size: 353px 92.5px, 353px 45.5px;
	//   background-position: left top, left bottom;
	//   background-repeat: no-repeat;

	//   .operate-title {
	//     left: 45px;
	//     position: absolute;
	//     top: 2px;
	//   }

	//   .operate-content {
	//     box-sizing: border-box;
	//     height: 90px;
	//   }
	// }
	// 运营守则
	.operate {
		top: 330px;
		// left: 90px;
		// width: 298px;
		left: 60px;
		width: 340px;
		height: 166px;
		padding-left: 16px;
		padding-top: 40px;
		padding-right: 30px;
		background-image: url('./images/k2.png'), url('./images/k1.png');
		// background-size: 298px 92.5px, 298px 75.5px;
		background-size: 340px 92.5px, 340px 75.5px;
		background-position: left top, left bottom;
		background-repeat: no-repeat;

		.operate-title {
			left: 45px;
			position: absolute;
			top: 2px;
		}

		.operate-content {
			box-sizing: border-box;
			height: 100px;
			width: 280px;
			text-align: right;
		}
	}
	//  bcp
	.supplier {
		top: 390px;
		// left: 1100px;
		left: 1050px;
		width: 350px;
		height: 405px;
		padding-left: 40px;
		padding-top: 50px;
		padding-right: 16px;
		background-image: url('./images/k3.png'), url('./images/k4.png');
		background-size: 350px 92px, 350px 315px;
		background-position: left top, left bottom;
		background-repeat: no-repeat;

		.supplier-title {
			right: 45px;
			position: absolute;
			top: 2px;
		}

		.supplier-content {
			box-sizing: border-box;
			height: 363px;
		}

		.supplier-item {
			margin-bottom: 4px;
		}

		.suppier-sub-title {
			display: flex;
			line-height: 42px;
			font-size: 1.1em;
			align-items: center;

			&::before {
				content: '';
				display: block;
				width: 6px;
				height: 6px;
				background: white;
				border-radius: 50%;
				margin-right: 6px;
			}

			.icon-arrow {
				display: block;
				background-image: url('./images/san22.png');
				width: 12px;
				height: 9px;
				padding: 4px;
				margin-left: auto;
				box-sizing: content-box;
				background-origin: content-box;
				background-repeat: no-repeat;
				cursor: pointer;
			}
		}

		.supplier-item.expand {
			.icon-arrow {
				background-image: url('./images/san11.png');
			}

			.supplier-item-container {
				display: block;
			}
		}

		.supplier-item-container {
			padding-left: 24px;
			line-height: 24px;
			display: none;

			.sub-title {
				display: flex;
				align-items: center;

				span {
					display: block;
					width: 24px;
					margin-right: 4px;
					text-align: center;
				}
			}

			> div:not(:last-child) {
				margin-bottom: 2px;
			}
		}
	}
	// 供方scm
	.gen {
		top: 510px;
		left: 60px;
		background-image: url('./images/k2.png'), url('./images/k1.png');
		background-size: 400px 92px, 370px 0px;

		background-position: left top, left bottom;
		background-repeat: no-repeat;
		width: 400px;
		// height: 300px;
		padding-top: 40px;

		.gen-title {
			left: 75px;
			position: absolute;
			top: 7px;
		}

		.gen-content {
			box-sizing: border-box;
			// height: 150px;
		}
	}

	.dunpai {
		top: 310px;
		left: 689px;
		background-image: url('./images/dunpai.png');
		background-size: cover;
	}

	.earth {
		top: 360px;
		left: 551px;
	}
}
</style>
