Skip to content

R
risk-monitor
提交 ca74db31 authored 作者: 付康's avatar 付康
浏览文件
操作

合并分支 'lzl-dev' 到 'master'

法案出口管制合作限制优化 查看合并请求 !82
上级 3c102401 468ff00e
显示空白字符变更
内嵌 并排
正在显示 包含 762 行增加 和 330 行删除
src/api/coopRestriction/coopRestriction.js
浏览文件 @ ca74db31
...@@ -77,3 +77,22 @@ export function getCoopRestrictionDomain(params) { ...@@ -77,3 +77,22 @@ export function getCoopRestrictionDomain(params) {
params params
}) })
} }
// 合作限制-获取合作限制列表接口
/**
* @param {area} 涉及领域
* @param {currentPage} 当前页码
* @param {pageSize} 每页数量
* @param {sortOrder} 排序顺序
* @param {source} 合作来源
* @param {sortField} 排序字段
* @param {type} 合作限制类型
* @header token
*/
export function getCoopRestrictionList(params) {
return request({
method: 'GET',
url: `/api/cooperationlimitinfo/statList`,
params
})
}
\ No newline at end of file
src/views/bill/billHome/index.vue
浏览文件 @ ca74db31
...@@ -1513,24 +1513,26 @@ watch(box8selectetedTime, () => { ...@@ -1513,24 +1513,26 @@ watch(box8selectetedTime, () => {
}); });
const handleToPosi = id => { const handleToPosi = id => {
let top = 0; const element = document.getElementById(id);
switch (id) { if (element && containerRef.value) {
case "position2": // 1. 如果是从完整搜索框跳转，先强制切换状态稳定布局
top = isShow.value ? 634 : 980; if (!isShow.value) {
break; isShow.value = true;
case "position3":
top = isShow.value ? 1204 : 1550;
break;
case "position4":
top = isShow.value ? 2334 : 2680;
break;
default:
top = 0;
} }
// 2. 使用 nextTick 等待 DOM 布局（如高度切换）完成后再进行坐标计算
nextTick(() => {
const containerRect = containerRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离
const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({ containerRef.value.scrollTo({
top: top, top: top,
behavior: "smooth" behavior: "smooth"
}); });
});
}
}; };
const tabList = ref([ const tabList = ref([
...@@ -1827,6 +1829,7 @@ onUnmounted(() => {}); ...@@ -1827,6 +1829,7 @@ onUnmounted(() => {});
overflow-y: auto; overflow-y: auto;
} }
.home-box { .home-box {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
......
src/views/bill/index.vue
浏览文件 @ ca74db31
...@@ -116,62 +116,6 @@ const handleClickLeftSiderBtn = (item) => { ...@@ -116,62 +116,6 @@ const handleClickLeftSiderBtn = (item) => {
} }
}) })
} }
const progressList = ref([
{
tip: true,
date: "7月5日",
title:
"特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
degree: "特别重大风险",
rank: 4,
},
{
tip: true,
date: "7月4日",
title:
"众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
degree: "重大风险",
rank: 3,
},
{
tip: true,
date: "7月3日",
title:
"民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
degree: "较大风险",
rank: 2,
},
{
tip: true,
date: "7月2日",
title:
"众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
degree: "低风险",
rank: 1,
},
{
tip: false,
date: "7月1日",
title:
"参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
degree: "",
},
]);
const wordCloudData = [
{ name: "财政保守主义", value: 100 },
{ name: "移民与边境安全", value: 5 },
{ name: "削减市民福利", value: 77 },
{ name: "债务驱动型经济", value: 35 },
{ name: "传统能源", value: 96 },
{ name: "与马斯克公开冲突", value: 57 },
{ name: "共和党财政鹰派", value: 72 },
{ name: "财政问责法案", value: 18 },
{ name: "强硬边境政策", value: 34 },
{ name: "扩大军费", value: 16 },
{ name: "债务与赤字警告", value: 72 },
{ name: "批评美国债务膨胀", value: 58 },
];
onMounted(() => {}); onMounted(() => {});
</script> </script>
......
src/views/coopRestriction/components/dataNew/index.vue
浏览文件 @ ca74db31
...@@ -335,6 +335,14 @@ onMounted(() => { ...@@ -335,6 +335,14 @@ onMounted(() => {
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
&::before {
content: "·";
font-size: 24px;
line-height: 20px;
font-weight: bold;
margin-right: 16px;
color: rgb(59, 65, 75);
}
.ul-title { .ul-title {
flex-shrink: 0; flex-shrink: 0;
width: 120px; width: 120px;
...@@ -413,6 +421,16 @@ onMounted(() => { ...@@ -413,6 +421,16 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
margin-bottom: 10px; margin-bottom: 10px;
display: flex;
align-items: center;
&::before {
content: "·";
font-size: 24px;
line-height: 20px;
font-weight: bold;
margin-right: 12px;
color: rgb(59, 65, 75);
}
} }
} }
.left-bottom-content { .left-bottom-content {
......
src/views/coopRestriction/components/resLib/index.vue
浏览文件 @ ca74db31
<template> <template>
<div class="reslib-page"> <div class="reslib-page" ref="reslibContainer">
<div class="nav"> <div class="nav">
<div <div
v-for="item in navList" v-for="item in navList"
:key="item" :key="item.id"
class="nav-item" class="nav-item"
:class="{ active: item === activeItem }" :class="{ active: item.id === activeItem }"
@click="activeItem = item" @click="activeItem = item.id"
> >
{{ item }} {{ item.name }}
</div> </div>
</div> </div>
<el-select v-model="value" placeholder="Select" class="select"> <el-select v-model="value" placeholder="排序方式" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<div class="main"> <div class="main">
...@@ -21,13 +21,21 @@ ...@@ -21,13 +21,21 @@
<div class="left-title">数据来源</div> <div class="left-title">数据来源</div>
<div class="left-content"> <div class="left-content">
<div v-for="item in dataList" :key="item.id" class="left-item"> <div v-for="item in dataList" :key="item.id" class="left-item">
<input type="checkbox" checked />{{ item.name }} <input
type="checkbox"
:value="String(item.id)"
v-model="selectedSources"
/>{{ item.name }}
</div> </div>
</div> </div>
<div class="left-title cl1">涉及领域</div> <div class="left-title cl1">涉及领域</div>
<div class="left-content"> <div class="left-content">
<div v-for="(item, i) in dataList2" :key="item.id" class="left-item"> <div v-for="item in dataList2" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }} <input
type="checkbox"
:value="String(item.id)"
v-model="selectedDomains"
/>{{ item.name }}
</div> </div>
</div> </div>
</div> </div>
...@@ -47,15 +55,14 @@ ...@@ -47,15 +55,14 @@
<div class="domain"> <div class="domain">
<div v-for="(domain, i) in item.domain" :key="i" class="domain-item">{{ domain }}</div> <div v-for="(domain, i) in item.domain" :key="i" class="domain-item">{{ domain }}</div>
</div> </div>
<div class="type" :class="{ type1: item.type === '行政令', type2: item.type === '法案' }"> <div class="type" :class="getTypeClass(item.type)">
{{ item.type }} {{ item.type }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="line"></div>
<div class="page"> <div class="page">
<div class="count">共1205项调查</div> <div class="count">共{{ total }}项调查</div>
<el-pagination <el-pagination
v-model:current-page="currentPage" v-model:current-page="currentPage"
:page-size="pageSize" :page-size="pageSize"
...@@ -72,202 +79,245 @@ ...@@ -72,202 +79,245 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { getCoopRestrictionList } from "@/api/coopRestriction/coopRestriction";
import defaultImg from "../../assets/images/default-icon2.png";
// 合作限制-获取合作限制列表接口
const getMainDataList = async () => {
const params = {
currentPage: currentPage.value - 1, // 后端通常从0开始计页
pageSize: pageSize.value,
sortField: "date"
};
if (!selectedDomains.value.includes("0")) {
params.area = selectedDomains.value.join(",");
}
if (!selectedSources.value.includes("0")) {
params.source = selectedSources.value.join(",");
}
if (activeItem.value !== "0") {
params.type = activeItem.value;
}
if (value.value) {
params.sortOrder = value.value;
}
try {
const res = await getCoopRestrictionList(params);
if (res && res.code === 200) {
mainDataList.value = (res.data.content || []).map(item => ({
id: item.limitId,
title: item.limitName,
content: item.limitIntroduction,
date: item.limitDate,
domain: item.limitArea || [],
type: item.limitMeans,
// 使用默认图片
img: defaultImg
}));
total.value = res.data.totalElements || 0;
} else {
mainDataList.value = [];
total.value = 0;
}
} catch (error) {
console.error("获取合作限制列表失败:", error);
mainDataList.value = [];
total.value = 0;
}
};
import whitehouse from "./assets/白宫.png";
import guohui from "./assets/国会.png";
import guotuanquanbu from "./assets/国土安全部.png";
import guowuyuan from "./assets/国务院.png";
import weishengyanjiuyuan from "./assets/卫生研究院.png";
import zhongyiyuan from "./assets/众议院.png";
import fda from "./assets/FDA.png";
const router = useRouter(); const router = useRouter();
const handleClick = item => { const handleClick = item => {
router.push({ const routeData = router.resolve({
path: "/cooperationRestrictions/detail", path: "/cooperationRestrictions/detail",
query: { query: {
id: item.id id: item.id
} }
}); });
window.open(routeData.href, "_blank");
}; };
const navList = ref(["全部限制", "学术交流限制", "科研合作限制", "人才流动限制", "数据共享限制"]); const navList = ref([
const activeItem = ref("全部限制"); { id: "0", name: "全部限制" },
{ id: "01", name: "学术交流限制" },
{ id: "02", name: "科研合作限制" },
{ id: "03", name: "人才流动限制" },
{ id: "04", name: "数据共享限制" }
]);
const activeItem = ref("0");
const value = ref("发布时间"); const value = ref("");
const options = [ const options = [
{ {
value: "发布时间", value: "asc",
label: "发布时间" label: "正序"
}, },
{ {
value: "发布日期", value: "desc",
label: "发布日期" label: "倒序"
} }
]; ];
const dataList = ref([ const dataList = ref([
{ {
id: 1, id: "0",
name: "全部来源" name: "全部来源"
}, },
{ {
id: 2, id: "02",
name: "法案" name: "法案"
}, },
{ {
id: 3, id: "01",
name: "政令" name: "行政令"
}, },
{ {
id: 4, id: "03",
name: "政府公告" name: "政府公告"
} }
]); ]);
const selectedSources = ref(["0"]);
const dataList2 = ref([ const dataList2 = ref([
{ {
id: 1, id: 0,
name: "全部领域" name: "全部领域"
}, },
{ {
id: 2, id: 1,
name: "人工智能" name: "人工智能"
}, },
{
id: 2,
name: "生物科技"
},
{ {
id: 3, id: 3,
name: "集成电路" name: "新一代信息技术"
}, },
{ {
id: 4, id: 4,
name: "通信网络" name: "量子科技"
}, },
{ {
id: 5, id: 5,
name: "量子科技" name: "新能源"
}, },
{ {
id: 6, id: 6,
name: "能源" name: "集成电路"
}, },
{ {
id: 7, id: 7,
name: "生物科技" name: "海洋"
}, },
{ {
id: 8, id: 8,
name: "航空航天" name: "先进制造"
}, },
{ {
id: 9, id: 9,
name: "海洋" name: "新材料"
}
]);
const mainDataList = ref([
{
id: 1,
title: "美国国土安全部：取消哈佛大学SEVP认证，禁止其招收国际新生",
content:
"国土安全部长诺姆以安全审查为由，正式终止哈佛大学“学生与交流访问学者项目”（SEVP）认证，导致该校丧失2025~2026学年招收国际新生的资格。",
date: "2025年10月15日",
domain: ["人才流动限制"],
type: "行政令",
img: guotuanquanbu
},
{
id: 2,
title: "美国白宫：通过应对哈佛大学的风险来增强国家安全",
content:
"学生交换签证计划（SEVP）根本依赖于学术机构的诚信、透明度以及对相关监管框架的完全遵守。 这是出于关键的国家安全原因。 联邦调查局（FBI）长期警告称，外国对手和竞争对手利用美国高等教育的便捷通道，窃取技术信息和产品，利用昂贵的研发项目来实现自身野心，并出于政治或其他原因传...",
date: "2025年9月30日",
domain: ["人才流动限制"],
type: "行政令",
img: whitehouse
},
{
id: 3,
title: "美国白宫：限制外国公民入境，以保护美国免受外国恐怖分子及其他国家安全和公共安全威胁",
content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
date: "2025年9月15日",
domain: ["人才流动限制"],
type: "行政令",
img: whitehouse
},
{
id: 4,
title: "美国白宫：提升生物研究的安全性与保障",
content: "停止联邦资助外国实体在关注国家（如中国）进行的危险功能增益研究。",
date: "2025年9月15日",
domain: ["人才流动限制", "生物科技"],
type: "行政令",
img: whitehouse
}, },
{ {
id: 5, id: 10,
title: "美国国会：《2026财年拨款法案》审议通过重启“中国行动计划”", name: "航空航天"
content: "美国众议院拨款委员会在审议《2026财年拨款法案》时，加入条款要求司法部重启已被拜登政府叫停的“中国行动计划”。",
date: "2025年9月1日",
domain: ["人才流动限制"],
type: "法案",
img: guohui
}, },
{ {
id: 6, id: 11,
title: "美国FDA：紧急叫停涉及将美国公民活体细胞送往中国等“敌对国家”实验室的临床试验", name: "深海"
content: "涉及将人类生物样本（如活体细胞）转移至中国进行基因工程等研究的临床试验项目，相关研究被叫停。",
date: "2025年8月26日",
domain: ["数据共享限制", "生物科技"],
type: "行政令",
img: fda
}, },
{ {
id: 7, id: 12,
title: "美国众议院“美中战略竞争特设委员会”：要求杜克大学终止昆山杜克大学合作项目", name: "极地"
content: "指控其“通过先进摄像系统研究协助中国导弹制导技术发展”，并质疑美国学生被用于中国宣传。",
date: "2025年8月22日",
domain: ["科研合作限制"],
type: "行政令",
img: zhongyiyuan
}, },
{ {
id: 8, id: 13,
title: "美国国务院：大规模撤销部分中国学生签证，重点审查STEM领域", name: "太空"
content:
"美国国务卿鲁比奥宣布将开始大规模撤销部分中国学生的签证，重点针对STEM（科学、技术、工程和数学）领域的学习者以及所谓“与中国政府有联系”的人员，并全面提升对中国大陆和香港地区申请者的签证审查标准",
date: "2025年8月15日",
domain: ["人才流动限制"],
type: "行政令",
img: guowuyuan
}, },
{ {
id: 9, id: 14,
title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动", name: "核"
content:
"FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
date: "2025年10月15日",
domain: ["数据共享限制", "生物科技"],
type: "行政令",
img: fda
},
{
id: 10,
title: "美国国家卫生研究院：限制中国等国的研究人员访问其受控访问数据存储库",
content: "美国商务部宣称将“至少每年”更新一次管制规则，以堵塞已发现的政策“漏洞”。",
date: "2025年9月15日",
domain: ["数据共享限制", "生物科技"],
type: "行政令",
img: weishengyanjiuyuan
} }
]); ]);
const selectedDomains = ref(["0"]);
const mainDataList = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const reslibContainer = ref(null);
const getTypeClass = (type) => {
const map = {
'行政令': 'type1',
'法案': 'type2',
'政府公告': 'type3',
'政令': 'type4'
};
return map[type] || 'type-default';
};
const total = ref(1205);
const pageSize = ref(121);
const currentPage = ref(5);
const handlePageChange = p => { const handlePageChange = p => {
currentPage.value = p; currentPage.value = p;
// 翻页后平滑滚动到资源库顶部
if (reslibContainer.value) {
reslibContainer.value.scrollIntoView({ behavior: "smooth" });
}
}; };
onMounted(() => {
getMainDataList();
});
watch(
[activeItem, selectedSources, selectedDomains, value],
(newVal, oldVal) => {
const [newActive, newSources, newDomains] = newVal;
const [, oldSources, oldDomains] = oldVal;
if (newSources.includes("0") && newSources.length > 1) {
if (oldSources.includes("0")) {
selectedSources.value = newSources.filter(i => i !== "0");
return;
} else {
selectedSources.value = ["0"];
return;
}
} else if (newSources.length === 0) {
selectedSources.value = ["0"];
return;
}
if (newDomains.includes("0") && newDomains.length > 1) {
if (oldDomains.includes("0")) {
selectedDomains.value = newDomains.filter(i => i !== "0");
return;
} else {
selectedDomains.value = ["0"];
return;
}
} else if (newDomains.length === 0) {
selectedDomains.value = ["0"];
return;
}
if (currentPage.value === 1) {
getMainDataList();
} else {
currentPage.value = 1;
}
},
{ deep: true }
);
watch(currentPage, () => {
getMainDataList();
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -277,8 +327,10 @@ const handlePageChange = p => { ...@@ -277,8 +327,10 @@ const handlePageChange = p => {
} }
.reslib-page { .reslib-page {
width: 1600px; width: 1600px;
height: 1565px; min-height: 1565px;
height: auto;
position: relative; position: relative;
padding-bottom: 50px;
.nav { .nav {
width: 808px; width: 808px;
height: 42px; height: 42px;
...@@ -310,11 +362,12 @@ const handlePageChange = p => { ...@@ -310,11 +362,12 @@ const handlePageChange = p => {
} }
.main { .main {
width: 1600px; width: 1600px;
height: 1489px; height: auto;
min-height: 1489px;
display: flex; display: flex;
.left { .left {
width: 300px; width: 300px;
height: 584px; height: 760px;
margin-right: 16px; margin-right: 16px;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
...@@ -350,12 +403,12 @@ const handlePageChange = p => { ...@@ -350,12 +403,12 @@ const handlePageChange = p => {
margin-top: 13px; margin-top: 13px;
} }
.left-content { .left-content {
width: 109px; // width: 109px;
height: 132px; // height: 132px;
margin-left: 25px; margin-left: 25px;
margin-top: 13px; margin-top: 13px;
.left-item { .left-item {
width: 89px; // width: 89px;
height: 30px; height: 30px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 16px; font-size: 16px;
...@@ -397,7 +450,8 @@ const handlePageChange = p => { ...@@ -397,7 +450,8 @@ const handlePageChange = p => {
} }
.right { .right {
width: 1284px; width: 1284px;
height: 1489px; height: auto;
min-height: 1489px;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
...@@ -427,46 +481,58 @@ const handlePageChange = p => { ...@@ -427,46 +481,58 @@ const handlePageChange = p => {
} }
.right-main { .right-main {
width: 1284px; width: 1284px;
height: 1441px; height: auto;
padding: 22px 43px 15px 20px; min-height: 1441px;
padding: 22px 43px 80px 20px;
position: relative; position: relative;
.main-content { .main-content {
width: 1221px; width: 1221px;
height: 1345px; height: auto;
min-height: 1345px;
.main-item { .main-item {
width: 1221px; width: 1221px;
height: auto;
min-height: 116px; min-height: 116px;
max-height: 140px; margin-bottom: 24px;
margin-bottom: 16px;
position: relative; position: relative;
.date { display: flex;
&::after {
content: "";
position: absolute; position: absolute;
top: 4px; top: 37px;
left: 10px; bottom: -37px;
left: 91px;
width: 2px;
background-color: rgb(230, 231, 232);
z-index: 1;
}
&:last-child::after {
display: none;
}
.date {
flex-shrink: 0;
width: 62px; width: 62px;
height: 68px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
text-align: right; text-align: right;
margin-top: 13px;
} }
.img { .img {
flex-shrink: 0;
width: 24px; width: 24px;
height: 24px; height: 24px;
position: absolute; margin: 13px 21px 0 18px;
top: 13px; position: relative;
left: 90px;
z-index: 100; z-index: 100;
} }
.box { .box {
width: 1086px; flex: 1;
min-height: 91px; min-height: 91px;
max-height: 114px; position: relative;
position: absolute; padding-top: 10px;
top: 10px;
left: 135px;
.title { .title {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -493,7 +559,7 @@ const handlePageChange = p => { ...@@ -493,7 +559,7 @@ const handlePageChange = p => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
position: absolute; position: absolute;
top: 0px; top: 10px;
right: 0px; right: 0px;
} }
.type1 { .type1 {
...@@ -504,6 +570,18 @@ const handlePageChange = p => { ...@@ -504,6 +570,18 @@ const handlePageChange = p => {
background-color: rgba(206, 79, 81, 0.1); background-color: rgba(206, 79, 81, 0.1);
color: rgb(206, 79, 81); color: rgb(206, 79, 81);
} }
.type3 {
background-color: rgba(5, 95, 194, 0.1);
color: rgb(5, 95, 194);
}
.type4 {
background-color: rgba(103, 194, 58, 0.1);
color: rgb(103, 194, 58);
}
.type-default {
background-color: rgba(144, 147, 153, 0.1);
color: rgb(144, 147, 153);
}
.domain { .domain {
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
...@@ -522,14 +600,6 @@ const handlePageChange = p => { ...@@ -522,14 +600,6 @@ const handlePageChange = p => {
} }
} }
} }
.line {
height: 1150px;
border: 2px solid rgb(235, 238, 242);
position: absolute;
top: 75px;
left: 120px;
z-index: 1;
}
.page { .page {
width: 1221px; width: 1221px;
height: 40px; height: 40px;
......
src/views/coopRestriction/index.vue
浏览文件 @ ca74db31
<template> <template>
<div class="coop-page"> <div class="coop-page">
<!-- 吸顶简易搜索框 -->
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<input v-model="input" class="search-input" placeholder="搜索合作限制" />
<div class="search-btn-small" @click="handleSearch">
<div class="search-icon">
<img src="./assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('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="handleToPosi('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="handleToPosi('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="handleToPosi('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="breadcrumb"> <div class="breadcrumb" v-show="!isShow">
<div class="breadcrumb-box"> <div class="breadcrumb-box">
<div class="breadcrumb-item">国家科技安全</div> <div class="breadcrumb-item">国家科技安全</div>
<div class="breadcrumb-item">&nbsp;>&nbsp;</div> <div class="breadcrumb-item">&nbsp;>&nbsp;</div>
...@@ -11,9 +50,9 @@ ...@@ -11,9 +50,9 @@
</div> </div>
</div> </div>
<!-- 主页面 --> <!-- 主页面 -->
<div class="main-content"> <div class="main-content" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<!-- 搜索栏部分 --> <!-- 搜索栏部分 -->
<div class="search"> <div class="search" v-show="!isShow">
<div class="search-main"> <div class="search-main">
<input v-model="input" placeholder="搜索合作限制" class="search-input" /> <input v-model="input" placeholder="搜索合作限制" class="search-input" />
<div class="search-btn"> <div class="search-btn">
...@@ -36,25 +75,25 @@ ...@@ -36,25 +75,25 @@
</div> </div>
</div> --> </div> -->
<div class="search-bottom"> <div class="search-bottom">
<div class="btn" @click="scrollToTop('position1')"> <div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">最新动态</div> <div class="btn-text">最新动态</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position2')"> <div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">咨询要闻</div> <div class="btn-text">咨询要闻</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position3')"> <div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">数据总览</div> <div class="btn-text">数据总览</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position4')"> <div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">资源库</div> <div class="btn-text">资源库</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
...@@ -95,21 +134,52 @@ ...@@ -95,21 +134,52 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue"; import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue"; import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue"; import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue"; import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue"; import resLib from "./components/resLib/index.vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
// 搜索框 // 搜索框
const input = ref(""); const input = ref("");
const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef);
const router = useRouter(); const router = useRouter();
// 搜索功能
const handleSearch = () => {
console.log("搜索内容：", input.value);
};
// 锚点跳转
const handleToPosi = id => {
const element = document.getElementById(id);
if (element && homeMainRef.value) {
// 如果当前还未显示吸顶搜索栏，先强制切换状态以稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 使用 nextTick 确保 DOM 状态更新（高度变化生效）后再计算
nextTick(() => {
const containerRect = homeMainRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;
homeMainRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
...@@ -152,6 +222,7 @@ const handleBackHome = () => { ...@@ -152,6 +222,7 @@ const handleBackHome = () => {
} }
} }
.main-content { .main-content {
position: relative;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: calc(100% - 64px); height: calc(100% - 64px);
...@@ -188,7 +259,11 @@ const handleBackHome = () => { ...@@ -188,7 +259,11 @@ const handleBackHome = () => {
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
color: rgb(132, 136, 142); color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
} }
.search-btn { .search-btn {
margin-right: -3px; margin-right: -3px;
...@@ -335,5 +410,132 @@ const handleBackHome = () => { ...@@ -335,5 +410,132 @@ const handleBackHome = () => {
} }
} }
} }
.search-header {
width: 100%;
height: 144px;
background: #fff;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
overflow: hidden;
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
width: 800px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
display: flex;
align-items: center;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 800px;
height: 46px;
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-small {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
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%;
}
}
}
}
}
.scroll-main {
height: calc(100% - 144px) !important;
}
} }
</style> </style>
src/views/exportControl/index.vue
浏览文件 @ ca74db31
...@@ -627,8 +627,7 @@ ...@@ -627,8 +627,7 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed, reactive, shallowRef, watch } from "vue"; import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
const homeMainRef = ref(null); const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef); const { isShow } = useContainerScroll(homeMainRef);
...@@ -686,13 +685,23 @@ import { ...@@ -686,13 +685,23 @@ import {
const handleToPosi = id => { const handleToPosi = id => {
const element = document.getElementById(id); const element = document.getElementById(id);
if (element && homeMainRef.value) { if (element && homeMainRef.value) {
// 1. 如果是从完整搜索框跳转，先强制切换状态稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 2. 使用 nextTick 等待 DOM 布局（如高度切换）完成后再进行坐标计算
nextTick(() => {
const containerRect = homeMainRef.value.getBoundingClientRect(); const containerRect = homeMainRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect(); const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop; const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;
homeMainRef.value.scrollTo({ homeMainRef.value.scrollTo({
top: top, top: top,
behavior: "smooth" behavior: "smooth"
}); });
});
} }
}; };
...@@ -2159,6 +2168,7 @@ const handleMediaClick = item => { ...@@ -2159,6 +2168,7 @@ const handleMediaClick = item => {
overflow-y: hidden; overflow-y: hidden;
.home-main { .home-main {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
......
src/views/exportControl/v2.0SingleSanction/components/sanctionsOverview/index.vue
浏览文件 @ ca74db31
...@@ -103,36 +103,37 @@ ...@@ -103,36 +103,37 @@
</div> </div>
</div> </div>
<div class="right-title"> <div class="right-title">
<div class="filter-row">
<!-- <div class="filter-left">
<el-select v-model="filterEntity" placeholder="受制裁实体" style="width: 184px">
<el-option label="受制裁实体" value="1" />
</el-select>
</div> -->
<div class="filter-right">
<el-checkbox v-model="onlyChina" label="只看中国实体" />
<el-select v-model="filterField" placeholder="全部领域" style="width: 150px; margin: 0 12px 0 16px">
<el-option label="全部领域" value="" />
<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="searchKeyword" placeholder="搜索实体" style="width: 150px" :suffix-icon="Search" />
</div>
</div>
<div class="stats-row"> <div class="stats-row">
<!-- <div class="tabs"> <div class="tabs">
<div class="tab-btn" :class="{ active: activeTab === 'add' }" @click="activeTab = 'add'">新增实体</div> <div class="tab-btn" :class="{ active: activeTab === 'add' }" @click="activeTab = 'add'">新增实体</div>
<div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">移除实体</div> <div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">移除实体</div>
</div> --> </div>
<div class="stats-info"> <div class="stats-info">
<div class="stat-item"> <div class="stat-item">
<span class="dot red"></span> <span class="dot red"></span>
<span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{ <span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{
addRuleCount }}</span>家)</span> addRuleCount }}</span>家)</span>
</div> </div>
<!-- <div class="stat-item"> <div class="stat-item">
<span class="dot green"></span> <span class="dot green"></span>
<span class="text">移除 <span class="num green">{{ removeCount }}</span> 家 (50%规则涉及<span class="num green">{{ removeRuleCount }}</span>家)</span> <span class="text">移除 <span class="num green">{{ removeCount }}</span> 家 (50%规则涉及<span class="num green">{{ removeRuleCount }}</span>家)</span>
</div> --> </div>
</div>
</div>
<div class="filter-row">
<div class="filter-left">
<!-- <el-select v-model="filterEntity" placeholder="受制裁实体" style="width: 184px">
<el-option label="受制裁实体" value="1" />
</el-select> -->
</div>
<div class="filter-right">
<el-checkbox v-model="onlyChina" label="只看中国实体" />
<el-select v-model="filterField" placeholder="全部领域" style="width: 150px; margin: 0 12px 0 16px">
<el-option label="全部领域" value="" />
<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="searchKeyword" placeholder="搜索实体" style="width: 150px" :suffix-icon="Search" />
</div> </div>
</div> </div>
</div> </div>
...@@ -185,6 +186,7 @@ ...@@ -185,6 +186,7 @@
<script setup> <script setup>
import { ref, defineProps, computed, onMounted, watch } from "vue"; import { ref, defineProps, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { DArrowRight, Search } from "@element-plus/icons-vue"; import { DArrowRight, Search } from "@element-plus/icons-vue";
import { debounce } from "lodash"; import { debounce } from "lodash";
import title from "../../assets/title.png" import title from "../../assets/title.png"
...@@ -195,14 +197,10 @@ import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOv ...@@ -195,14 +197,10 @@ import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOv
// 跳转公司详情页 // 跳转公司详情页
const handleCompClick = item => { const handleCompClick = item => {
// console.log("item", item); if (!item.entityId) {
// const route = router.resolve({ ElMessage.warning("暂无数据");
// path: "/companyPages", return;
// query: { }
// id: item.entityId
// }
// });
// window.open(route.href, "_blank");
const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } }); const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
}; };
...@@ -817,10 +815,9 @@ onMounted(() => { ...@@ -817,10 +815,9 @@ onMounted(() => {
.filter-row { .filter-row {
display: flex; display: flex;
// 隐藏使用right，解除使用space-between
justify-content: right; justify-content: right;
align-items: center; align-items: center;
margin-bottom: 20px; // margin-bottom: 20px;
:deep(.el-input__inner) { :deep(.el-input__inner) {
font-size: 16px; font-size: 16px;
...@@ -850,8 +847,8 @@ onMounted(() => { ...@@ -850,8 +847,8 @@ onMounted(() => {
.stats-row { .stats-row {
display: flex; display: flex;
// 隐藏使用right，解除使用space-between margin-bottom: 20px;
justify-content: right; justify-content: space-between;
align-items: center; align-items: center;
.tabs { .tabs {
......
src/views/ruleRestriction/index.vue
浏览文件 @ ca74db31
<template> <template>
<div class="coop-page"> <div class="coop-page">
<!-- 吸顶简易搜索框 -->
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<input v-model="input" class="search-input" placeholder="搜索规则限制" />
<div class="search-btn-small" @click="handleSearch">
<div class="search-icon">
<img src="./assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('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="handleToPosi('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="handleToPosi('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="handleToPosi('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="breadcrumb"> <div class="breadcrumb" v-show="!isShow">
<div class="breadcrumb-box"> <div class="breadcrumb-box">
<div class="breadcrumb-item">国家科技安全</div> <div class="breadcrumb-item">国家科技安全</div>
<div class="breadcrumb-item">&nbsp;>&nbsp;</div> <div class="breadcrumb-item">&nbsp;>&nbsp;</div>
...@@ -11,9 +50,9 @@ ...@@ -11,9 +50,9 @@
</div> </div>
</div> </div>
<!-- 主页面 --> <!-- 主页面 -->
<div class="main-content"> <div class="main-content" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<!-- 搜索栏部分 --> <!-- 搜索栏部分 -->
<div class="search"> <div class="search" v-show="!isShow">
<div class="search-main"> <div class="search-main">
<input v-model="input" placeholder="搜索规则限制" class="search-input" /> <input v-model="input" placeholder="搜索规则限制" class="search-input" />
<div class="search-btn"> <div class="search-btn">
...@@ -40,25 +79,25 @@ ...@@ -40,25 +79,25 @@
</div> </div>
</div> --> </div> -->
<div class="search-bottom"> <div class="search-bottom">
<div class="btn" @click="scrollToTop('position1')"> <div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">最新动态</div> <div class="btn-text">最新动态</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position2')"> <div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">咨询要闻</div> <div class="btn-text">咨询要闻</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position3')"> <div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">数据总览</div> <div class="btn-text">数据总览</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position4')"> <div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">资源库</div> <div class="btn-text">资源库</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
...@@ -99,7 +138,7 @@ ...@@ -99,7 +138,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, nextTick } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue"; import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue"; import newData from "./components/dataNew/index.vue";
...@@ -107,14 +146,44 @@ import askPage from "./components/askPage/index.vue"; ...@@ -107,14 +146,44 @@ import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue"; import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue"; import resLib from "./components/resLib/index.vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
// 搜索框 // 搜索框
const input = ref(""); const input = ref("");
const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef);
const router = useRouter(); const router = useRouter();
// 搜索功能
const handleSearch = () => {
console.log("搜索内容：", input.value);
};
// 锚点跳转
const handleToPosi = id => {
const element = document.getElementById(id);
if (element && homeMainRef.value) {
// 如果当前还未显示吸顶搜索栏，先强制切换状态以稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 使用 nextTick 确保 DOM 状态更新（高度变化生效）后再计算
nextTick(() => {
const containerRect = homeMainRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;
homeMainRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
...@@ -157,12 +226,18 @@ const handleBackHome = () => { ...@@ -157,12 +226,18 @@ const handleBackHome = () => {
} }
} }
.main-content { .main-content {
position: relative;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: calc(100% - 64px); height: calc(100% - 64px);
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
background-size: 100% 100%; background-size: 100% 100%;
padding: 44px 160px 30px 160px; padding: 44px 160px 30px 160px;
&.scroll-main {
height: calc(100% - 144px);
}
.search { .search {
width: 960px; width: 960px;
height: 168px; height: 168px;
...@@ -184,15 +259,19 @@ const handleBackHome = () => { ...@@ -184,15 +259,19 @@ const handleBackHome = () => {
.search-input { .search-input {
border: none; border: none;
outline: none; outline: none;
width: 800px; width: 838px;
height: 48px; height: 48px;
background-color: transparent; background-color: transparent;
font-size: 16px; font-size: 14px;
padding: 12px 16px; padding: 12px 16px;
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 22px;
color: rgb(132, 136, 142); color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
} }
.search-btn { .search-btn {
cursor: pointer; cursor: pointer;
...@@ -204,53 +283,18 @@ const handleBackHome = () => { ...@@ -204,53 +283,18 @@ const handleBackHome = () => {
margin-right: -3px; margin-right: -3px;
border-radius: 8px; border-radius: 8px;
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 22px;
color: #fff; color: #fff;
img { img {
width: 22px; width: 18px;
height: 22px; height: 18px;
margin-right: 8px; margin-right: 8px;
} }
} }
} }
.search-center {
width: 600px;
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 { .search-bottom {
width: 688px; width: 688px;
height: 48px; height: 48px;
...@@ -339,5 +383,129 @@ const handleBackHome = () => { ...@@ -339,5 +383,129 @@ const handleBackHome = () => {
} }
} }
} }
.search-header {
width: 100%;
height: 144px;
background: #fff;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
overflow: hidden;
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
width: 800px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
display: flex;
align-items: center;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 800px;
height: 46px;
background-color: transparent;
font-size: 14px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
}
.search-btn-small {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
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%;
}
}
}
}
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论