<template>
	<div class="coop-page">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<div class="breadcrumb-box">
				<div class="breadcrumb-item">国家科技安全</div>
				<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
				<div class="breadcrumb-item back-item" @click="handleBackHome">中美博弈概览</div>
				<div class="breadcrumb-item">&nbsp;>&nbsp;</div>
				<div class="breadcrumb-item">合作限制</div>
			</div>
		</div>
		<!-- 主页面 -->
		<div class="main-content">
			<!-- 搜索栏部分 -->
			<div class="search">
				<div class="search-main">
					<input v-model="input" placeholder="搜索合作限制" class="search-input" />
					<div class="search-btn">
						<img src="./assets/icons/search-icon.png" alt="" />
						搜索
					</div>
				</div>
				<!-- <div class="search-center">
					<div class="search-item">
						<div class="search-item-num">32</div>
						<div class="search-item-name">相关法案</div>
					</div>
					<div class="search-item">
						<div class="search-item-num">9</div>
						<div class="search-item-name">相关政令</div>
					</div>
					<div class="search-item">
						<div class="search-item-num">41</div>
						<div class="search-item-name">相关政府公告</div>
					</div>
				</div> -->
				<div class="search-bottom">
					<div class="btn" @click="scrollToTop('position1')">
						<div class="btn-text">最新动态</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">咨询要闻</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">数据总览</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">资源库</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<!-- 最新动态 -->
			<div class="newdata" id="position1">
				<com-title title="最新动态" />
				<div class="newdata-main">
					<newData />
				</div>
			</div>
			<!-- 资讯要问 -->
			<div class="ask" id="position2">
				<com-title title="咨询要闻" />
				<div class="ask-main">
					<askPage />
				</div>
			</div>
			<!-- 数据总览 -->
			<div class="datasub" id="position3">
				<com-title title="数据总览" />
				<div class="datasub-main">
					<dataSub />
				</div>
			</div>
			<!-- 资源库 -->
			<div class="reslib" id="position4">
				<com-title title="资源库" />
				<div class="reslib-main">
					<resLib />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue";
import scrollToTop from "@/utils/scrollToTop";

import { useContainerScroll } from "@/hooks/useScrollShow";

// 搜索框
const input = ref("");

const router = useRouter();
// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.coop-page {
	width: 100%;
	height: 100%;
	.breadcrumb {
		width: 100%;
		height: 64px;
		background-image: url("./assets/images/bread-bg.png");
		background-size: cover;
		padding: 17px 0px 21px 0px;
		.breadcrumb-box {
			margin-left: 160px;
			display: flex;
			// align-items: center;
			.breadcrumb-item {
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: #fff;
			}
			.back-item {
				cursor: pointer;
				&:hover {
					color: #999;
				}
			}
		}
	}
	.main-content {
		overflow: auto;
		width: 100%;
		height: calc(100% - 64px);
		background: url("./assets/images/background.png");
		background-size: 100% 100%;
		padding: 44px 160px 30px 160px;
		.search {
			width: 960px;
			height: 168px;
			margin: 0 auto 68px auto;

			.search-main {
				display: flex;
				padding-right: 3px;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				width: 960px;
				height: 48px;
				background-color: rgba(255, 255, 255, 0.65);
				border-radius: 10px;
				border: 1px solid transparent;
				&:hover {
					border: 1px solid var(--color-main-active);
				}
				.search-input {
					border: none;
					outline: none;
					width: 838px;
					height: 48px;
					background-color: transparent;
					font-size: 16px;
					padding: 12px 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(132, 136, 142);
				}
				.search-btn {
					margin-right: -3px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120px;
					height: 46px;
					border-radius: 8px;
					background-color: rgb(5, 95, 194);
					font-size: 18px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: #fff;
					img {
						width: 22px;
						height: 22px;
						margin-right: 8px;
					}
				}
			}
			.search-center {
				width: 440px;
				height: 57px;
				margin: 36px auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.search-item {
					box-sizing: border-box;
					width: 120px;
					height: 57px;
					.search-item-num {
						width: 120px;
						height: 22px;
						font-size: 36px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 22px;
						color: rgb(5, 95, 194);
						text-align: center;
						cursor: pointer;
					}
					.search-item-name {
						width: 120px;
						height: 24px;
						margin-top: 11px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
						text-align: center;
					}
				}
			}
			.search-bottom {
				width: 688px;
				height: 48px;
				margin: 0 auto;
				margin-top: 36px;
				display: flex;
				justify-content: space-between;
				// gap: 16px;
				.btn {
					display: flex;
					align-items: center;
					gap: 9px;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					background: #e7f3ff;
					cursor: pointer;
					position: relative;
					&:hover {
						background: #cae3fc;
					}
					.btn-text {
						width: 80px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 48px;
						margin-left: 36px;
						text-align: center;
					}
					.btn-icon {
						position: absolute;
						top: 16px;
						right: 19px;
						width: 6px;
						height: 12px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.newdata {
			width: 1600px;
			height: 538px;
			margin: 36px auto 64px auto;
			.newdata-main {
				width: 1600px;
				height: 460px;
				margin-top: 36px;
			}
		}
		.ask {
			width: 1600px;
			height: 528px;
			margin: 0 auto 64px auto;
			.ask-main {
				width: 1600px;
				height: 450px;
				margin-top: 36px;
			}
		}
		.datasub {
			width: 1600px;
			height: 538px;
			margin: 0 auto 88px auto;
			.datasub-main {
				width: 1600px;
				height: 460px;
				margin-top: 36px;
			}
		}
		.reslib {
			width: 1600px;
			height: 1633px;
			margin: 0 auto 0px auto;
			.reslib-main {
				width: 1600px;
				height: 1565px;
				margin-top: 26px;
			}
		}
	}
}
</style>
