<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<img :src="titlebg" alt="" class="title-bg" />
		<img :src="background" alt="" class="background" />
		<!-- 搜索框 -->
		<div class="search-wrapper">
			<input type="text" v-model="searchText" placeholder="搜索新闻" class="search-input" />
			<button class="search-btn">
				<img :src="search" alt="" />
				搜索
			</button>
		</div>
		<!-- 模块选择 -->
		<div class="module-wrapper">
			<div
				v-for="(item, index) in moduleList"
				:key="index"
				class="module-item"
				:class="{ active: activeModule === item.name }"
				@click="activeModule = item.name"
			>
				<span>{{ item.name }}</span>
				<img :src="activeModule === item.name ? rightActive : right" alt="" />
			</div>
			<div class="adjustment-btn">
				<img :src="adjustment" alt="" />
			</div>
		</div>
		<!-- 主要内容 -->
		<div class="main-content">
			<div class="left">
				<div class="title">
					<div class="title-left">
						<img :src="icon1" alt="" class="icon1" />
						<span>今日要闻</span>
						<img :src="right" alt="" class="right-icon" />
					</div>
					<div class="title-right">
            <img :src="refresh" alt="" class="refresh-icon" />
            <span>换一批</span>
          </div>
				</div>
			</div>
			<div class="right"></div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import search from "./assets/Search.png";
import right from "./assets/right.png";
import rightActive from "./assets/right_active.png";
import adjustment from "./assets/adjustment.png";
import titlebg from "./assets/titlebg.png";
import icon1 from "./assets/icon1.png";
import icon2 from "./assets/icon2.png";
import refresh from "./assets/refresh.png";
import background from "../../../../assets/images/background.png";

const searchText = ref("");

// 模块选择数据
const activeModule = ref("新闻纵览");
const moduleList = ref([
	{ name: "新闻纵览" },
	{ name: "科技法案" },
	{ name: "科技政令" },
	{ name: "科技智库" },
	{ name: "出口管制" },
	{ name: "投融资限制" },
	{ name: "市场准入限制" },
	{ name: "合作限制" },
	{ name: "规则限制" },
	{ name: "创新主体" },
	{ name: "科技人物" },
	{ name: "资助体系" }
]);
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1600px;
	height: 908px;
	margin-bottom: 50px;
	border-radius: 10px;
	border: 1px solid #fff;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	padding-top: 48px;
	position: relative;
	background: linear-gradient(180deg, #e7f3ff 0%, #ffffff 20%);
	.title-bg {
		width: 100%;
		height: 56px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.background {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		pointer-events: none;
	}
	// 搜索框
	.search-wrapper {
		position: relative;
		z-index: 2;
		width: 800px;
		height: 48px;
		margin: 0 auto;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.65);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 3px;
		margin-bottom: 38px;
		.search-input {
			width: 650px;
			height: 48px;
			border: none;
			outline: none;
			background-color: transparent;
			padding-left: 16px;
			font-size: 16px;
			color: rgb(0, 0, 0);
			::placeholder {
				color: rgb(132, 136, 142);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				font-family: Microsoft YaHei;
			}
		}
		.search-btn {
			width: 120px;
			height: 42px;
			border: none;
			outline: none;
			background-color: rgb(5, 95, 194);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				width: 22px;
				height: 22px;
				margin-right: 8px;
			}
			font-size: 18px;
			color: rgb(255, 255, 255);
			font-family: Microsoft YaHei;
			font-weight: 400;
			line-height: 24px;
			cursor: pointer;
		}
	}
	// 模块选择
	.module-wrapper {
		position: relative;
		z-index: 2;
		width: 1262px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		padding: 0 19px;
		justify-content: center;
		margin-bottom: 26px;
		.module-item {
			height: 40px;
			padding: 0 20px;
			background: rgba(255, 255, 255, 1);
			border-radius: 32px;
			border: 1px solid #e5e6eb;
			display: flex;
			align-items: center;
			cursor: pointer;
			span {
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgb(95, 101, 108);
				margin-right: 10px;
				white-space: nowrap;
			}
			img {
				width: 6px;
				height: 12px;
			}
			&.active {
				background: rgba(231, 243, 255, 1);
				border: 1px solid rgba(174, 214, 255, 1);
				span {
					color: rgb(5, 95, 194);
				}
			}
		}
		.adjustment-btn {
			width: 40px;
			height: 40px;
			background: #ffffff;
			border-radius: 50%;
			border: 1px solid #e5e6eb;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);
			img {
				width: 16px;
				height: 16px;
			}
		}
	}
	// 主要内容
	.main-content {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 656px;
		margin: 0 auto;
		padding: 0 22px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		gap: 21px;
		.left {
			width: 50%;
			height: 100%;
      padding: 0 24px;
		}
		.right {
			width: 50%;
			height: 100%;
      padding: 0 24px;
		}
	}
  // 通用标题
  .title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgb(234, 236, 238);
    .title-left {
      display: flex;
      align-items: center;
      justify-content: center;
      .icon1 {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      span {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: rgb(5, 95, 194);
        line-height: 24px;
        margin-right: 10px;
      }
      .right-icon {
        width: 6px;
        height: 12px;
      }
    }
    .title-right {
      padding: 2px 12px;
      border-radius: 20px;
      background-color: rgba(246, 250, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: 12px;
        height: 12px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgb(5, 95, 194);
        line-height: 24px;
      }
    }
  }
}
</style>
