Skip to content

R
risk-monitor
提交 0c925076 authored 作者: 张烨's avatar 张烨
浏览文件
操作

style:科技政令-政令概况布局样式优化

上级 f7d69ec4
隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 378 行删除
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 0c925076
...@@ -188,156 +188,50 @@ onMounted(() => { ...@@ -188,156 +188,50 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-collapse {
padding-left: 32px;
:deep(.el-collapse),
:deep(.el-collapse-item__wrap) {
border: none !important;
}
:deep(.el-collapse-item__header) {
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.custom-collapse-title {
position: relative;
.custom-collapse-index {
font-size: 15px;
position: absolute;
top: 12px;
left: -32px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 50%;
background: #e7f3ff;
color: #0a57a6;
}
.custom-collapse-name {
font-weight: 600;
font-size: 18px;
color: var(--el-collapse-header-text-color);
}
}
.custom-collapse-content {
margin-top: 8px;
font-family: Microsoft YaHei;
font-size: var(--font-size-base);
color: rgb(59, 65, 75);
}
}
.introduction-wrap { .introduction-wrap {
display: flex; display: flex;
position: relative; width: 1600px;
height: 100%;
.header-btn-box { padding: 16px 0;
display: flex; gap: 16px;
justify-content: flex-end;
gap: 8px;
.btn {
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
}
.btnActive { .left {
border: 1px solid var(--color-main-active); width: 20px;
color: var(--color-main-active); flex: auto;
background: rgba(231, 243, 255, 1);
}
}
.box-header {
height: 56px;
display: flex; display: flex;
position: relative; flex-direction: column;
gap: 16px;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title { .box1 {
margin-left: 14px; height: 50%;
margin-top: 14px; flex: auto;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.header-btn-box { .header-btn-box {
position: absolute; display: flex;
top: 14px; justify-content: flex-end;
right: 84px; gap: 8px;
display: flex;
justify-content: flex-end;
gap: 8px;
.btn {
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
}
.btnActive { .btn {
border: 1px solid var(--color-main-active); height: 28px;
color: var(--color-main-active); padding: 0 8px;
background: rgba(231, 243, 255, 1); box-sizing: border-box;
} border: 1px solid rgba(230, 231, 232, 1);
} border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
}
.header-right { .btnActive {
position: absolute; border: 1px solid var(--color-main-active);
top: 14px; color: var(--color-main-active);
right: 12px; background: rgba(231, 243, 255, 1);
height: 28px;
display: flex;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
} }
} }
}
}
.left {
width: 1064px;
.box1 {
margin-top: 16px;
width: 1064px;
height: 414px;
.box1-main { .box1-main {
margin-top: 16px; margin-top: 16px;
...@@ -374,9 +268,6 @@ onMounted(() => { ...@@ -374,9 +268,6 @@ onMounted(() => {
width: 914px; width: 914px;
line-height: 24px; line-height: 24px;
margin-left: 13px; margin-left: 13px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
} }
.open { .open {
...@@ -413,9 +304,8 @@ onMounted(() => { ...@@ -413,9 +304,8 @@ onMounted(() => {
} }
.box2 { .box2 {
margin-top: 16px; height: 50%;
width: 1064px; flex: auto;
height: 415px;
.box2-main { .box2-main {
margin-top: 3px; margin-top: 3px;
...@@ -424,61 +314,41 @@ onMounted(() => { ...@@ -424,61 +314,41 @@ onMounted(() => {
width: 1004px; width: 1004px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
.custom-collapse {
.box2-item { padding-left: 32px;
display: flex; :deep(.el-collapse),
height: 60px; :deep(.el-collapse-item__wrap) {
margin-bottom: 2px; border: none !important;
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 100%;
height: 100%;
}
} }
:deep(.el-collapse-item__header) {
.item-center { border-bottom: 1px solid rgba(234, 236, 238, 1);
width: 806px; }
margin-left: 14px; .custom-collapse-title {
position: relative;
.title { .custom-collapse-index {
height: 30px; font-size: 15px;
color: rgba(59, 65, 75, 1); position: absolute;
font-family: Microsoft YaHei; top: 12px;
font-size: 16px; left: -32px;
font-weight: 700; width: 24px;
line-height: 30px; height: 24px;
margin-top: -5px; text-align: center;
line-height: 24px;
border-radius: 50%;
background: #e7f3ff;
color: #0a57a6;
} }
.custom-collapse-name {
.content { font-weight: 600;
width: 806px; font-size: 18px;
height: 30px; color: var(--el-collapse-header-text-color);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
} }
} }
.custom-collapse-content {
.item-right { margin-top: 8px;
margin-top: 19px;
margin-left: 30px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: var(--font-size-base);
font-weight: 400; color: rgb(59, 65, 75);
line-height: 22px;
} }
} }
} }
...@@ -486,12 +356,9 @@ onMounted(() => { ...@@ -486,12 +356,9 @@ onMounted(() => {
} }
.right { .right {
margin-left: 16px; width: 520px;
.box3 { .box3 {
margin-top: 16px; height: 100%;
width: 520px;
height: 845px;
.box3-bottom-main { .box3-bottom-main {
width: 100%; width: 100%;
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 0c925076
<template> <template>
<div class="page-box">
<div class="risk-notice" v-if="riskInfo?.riskLevel"> <div class="risk-notice" v-if="riskInfo?.riskLevel">
<div class="risk-notice-header"> <div class="risk-notice-header">
<div class="risk-notice-icon"> <div class="risk-notice-icon">
...@@ -154,6 +155,7 @@ ...@@ -154,6 +155,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
...@@ -311,10 +313,18 @@ onMounted(() => { ...@@ -311,10 +313,18 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-box {
height: 100%;
width: 1600px;
display: flex;
flex-direction: column;
padding: 16px 0;
gap: 16px;
}
.risk-notice { .risk-notice {
cursor: pointer; cursor: pointer;
margin-top: 16px; width: 100%;
width: 1600px;
border: 1px solid rgba(255, 163, 158, 1); border: 1px solid rgba(255, 163, 158, 1);
border-radius: 10px; border-radius: 10px;
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
...@@ -355,17 +365,20 @@ onMounted(() => { ...@@ -355,17 +365,20 @@ onMounted(() => {
} }
.introduction-wrap { .introduction-wrap {
width: 1600px; width: 100%;
height: 100%; height: 20px;
flex: auto;
display: flex; display: flex;
gap: 16px; gap: 16px;
.left { .left {
height: 100%;
width: 20px; width: 20px;
flex: auto; flex: auto;
display: flex;
flex-direction: column;
.box1 { .box1 {
margin-top: 16px;
height: 414px; height: 414px;
.box1-main { .box1-main {
...@@ -466,7 +479,8 @@ onMounted(() => { ...@@ -466,7 +479,8 @@ onMounted(() => {
.box2 { .box2 {
margin-top: 16px; margin-top: 16px;
height: 330px; height: 20px;
flex: auto;
.box2-main { .box2-main {
margin-top: 3px; margin-top: 3px;
...@@ -567,15 +581,13 @@ onMounted(() => { ...@@ -567,15 +581,13 @@ onMounted(() => {
.right { .right {
width: 520px; width: 520px;
height: 100%;
.box3 { .box3 {
margin-top: 16px;
width: 520px; width: 520px;
height: 760px; height: 100%;
.box3-top { .box3-top {
margin-top: 2px;
// height: 241px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.box3-top-top { .box3-top-top {
...@@ -833,81 +845,5 @@ onMounted(() => { ...@@ -833,81 +845,5 @@ onMounted(() => {
} }
} }
} }
.report {
padding: 10px 150px;
position: absolute;
left: 0;
top: 0;
z-index: 999999;
width: 100%;
height: 100%;
background: #f7f8f9;
.report-close {
position: absolute;
top: 20px;
right: 230px;
width: 20px;
height: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.report-header {
width: 100%;
height: 50px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 50px;
letter-spacing: 0px;
text-align: left;
padding-left: 30px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.report-main {
display: flex;
height: calc(100% - 100px);
justify-content: space-between;
.left {
width: 800px;
.noContent {
height: 100px;
line-height: 100px;
text-align: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
}
}
.right {
width: 800px;
.noContent {
height: 100px;
line-height: 100px;
text-align: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 20px;
font-weight: 400;
}
}
}
}
} }
</style> </style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/measures/index.vue
浏览文件 @ 0c925076
...@@ -147,68 +147,68 @@ const handleGetAreaList = async () => { ...@@ -147,68 +147,68 @@ const handleGetAreaList = async () => {
const isHighlight = ref(false); const isHighlight = ref(false);
const commandWord = ref(""); const commandWord = ref("");
const contentList = ref([ const contentList = ref([
{ // {
content: "建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划", // content: "建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划",
children: [ // children: [
{ // {
content: '在本命令发布之日起 90 天内，商务部长应与国务卿及科学技术政策办公室（OSTP）主任协商，建立并实施美国人工智能出口计划（计划），以支持美国全栈人工智能出口软件包的开发和部署。' // content: '在本命令发布之日起 90 天内，商务部长应与国务卿及科学技术政策办公室（OSTP）主任协商，建立并实施美国人工智能出口计划（计划），以支持美国全栈人工智能出口软件包的开发和部署。'
}, // },
{ // {
content: '商务部长应公开征集由行业主导的联盟提案，以纳入该计划。公开征集要求每项提案必须：', // content: '商务部长应公开征集由行业主导的联盟提案，以纳入该计划。公开征集要求每项提案必须：',
children: [ // children: [
{ // {
content: '包含一套全栈人工智能技术包，涵盖：', // content: '包含一套全栈人工智能技术包，涵盖：',
children: [ // children: [
{ // {
content: 'AI 优化的计算机硬件（如芯片、服务器和加速器）、数据中心存储、云服务和网络，以及这些设备是否以及在多大程度上在美国制造的描述；' // content: 'AI 优化的计算机硬件（如芯片、服务器和加速器）、数据中心存储、云服务和网络，以及这些设备是否以及在多大程度上在美国制造的描述；'
}, // },
{ // {
content: '数据管道和标签系统；' // content: '数据管道和标签系统；'
}, // },
{ // {
content: '人工智能模型与系统；' // content: '人工智能模型与系统；'
}, // },
{ // {
content: '采取措施保障人工智能模型和系统的安全性和网络安全；' // content: '采取措施保障人工智能模型和系统的安全性和网络安全；'
}, // },
{ // {
content: '针对特定用例的人工智能应用（如软件工程、教育、医疗保健、农业或交通运输）；' // content: '针对特定用例的人工智能应用（如软件工程、教育、医疗保健、农业或交通运输）；'
} // }
] // ]
}, // },
{ // {
content: '确定出口参与者的具体目标国家或区域集团；' // content: '确定出口参与者的具体目标国家或区域集团；'
}, // },
{ // {
content: '描述一个业务和运营模型，以在高层次上说明哪些实体将建设、拥有和运营数据中心及相关基础设施；' // content: '描述一个业务和运营模型，以在高层次上说明哪些实体将建设、拥有和运营数据中心及相关基础设施；'
}, // },
{ // {
content: '联邦激励和支持机制请求的细节；' // content: '联邦激励和支持机制请求的细节；'
}, // },
{ // {
content: '遵守所有相关的美国出口管制制度、出境投资法规和终端用户政策，包括美国法典第 50 编第 58 章及商务部工业与安全局的相关指导。' // content: '遵守所有相关的美国出口管制制度、出境投资法规和终端用户政策，包括美国法典第 50 编第 58 章及商务部工业与安全局的相关指导。'
} // }
] // ]
}, // },
{ // {
content: '商务部要求提案须在公开征集后不超过 90 天内提交，并应滚动考虑提案纳入项目。' // content: '商务部要求提案须在公开征集后不超过 90 天内提交，并应滚动考虑提案纳入项目。'
}, // },
{ // {
content: '商务部长应与国务卿、国防部长、能源部长及 OSTP 主任协商，评估提交的纳入计划提案。商务部长与国务卿、国防部长、能源部长及 OSTP 主任协商后选定的提案，将被指定为优先 AI 出口包，并通过优先访问本命令第 4 节指定的工具予以支持，符合适用法律。' // content: '商务部长应与国务卿、国防部长、能源部长及 OSTP 主任协商，评估提交的纳入计划提案。商务部长与国务卿、国防部长、能源部长及 OSTP 主任协商后选定的提案，将被指定为优先 AI 出口包，并通过优先访问本命令第 4 节指定的工具予以支持，符合适用法律。'
} // }
] // ]
}, // },
{ // {
content: "动员联邦融资工具", // content: "动员联邦融资工具",
children: [ // children: [
{ // {
content: '经济外交行动小组（EDAG），于 2024 年 6 月 21 日总统备忘录中成立，由国务卿主持，并与商务部长和美国贸易代表协商，并根据 2019 年《通过外交倡导美国企业法案》（公共法 116-94 J 部分第七章）第 708 条（CABDA）所述，应协调联邦融资工具的动员，以支持优先的人工智能出口方案。' // content: '经济外交行动小组（EDAG），于 2024 年 6 月 21 日总统备忘录中成立，由国务卿主持，并与商务部长和美国贸易代表协商，并根据 2019 年《通过外交倡导美国企业法案》（公共法 116-94 J 部分第七章）第 708 条（CABDA）所述，应协调联邦融资工具的动员，以支持优先的人工智能出口方案。'
}, // },
{ // {
content: '我将根据 CABDA α 第 708 (c) (3) 条授权小企业管理局局长和 OSTP 主任任命各自执行部门和机构的高级官员担任 EDAG 。' // content: '我将根据 CABDA α 第 708 (c) (3) 条授权小企业管理局局长和 OSTP 主任任命各自执行部门和机构的高级官员担任 EDAG 。'
} // }
] // ]
} // }
]); ]);
const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
const onMainContentData = async () => { const onMainContentData = async () => {
...@@ -253,9 +253,7 @@ const simpleNumToChinese = (num) => { ...@@ -253,9 +253,7 @@ const simpleNumToChinese = (num) => {
} }
// 相关实体 // 相关实体
const entityList = ref( const entityList = ref([]);
Array.from({ length: 8 }, () => ({ imgUrl: "", name: "ENTITYNAME", entityType: "白宫" }))
);
const onRelatedEntityData = async () => { const onRelatedEntityData = async () => {
try { try {
const res = await getDecreeRelatedEntity({id: route.query.id}); const res = await getDecreeRelatedEntity({id: route.query.id});
...@@ -316,37 +314,44 @@ onMounted(() => { ...@@ -316,37 +314,44 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.introduction-wrap { .introduction-wrap {
display: flex; display: flex;
width: 1600px;
height: 100%;
padding: 16px 0;
gap: 16px;
.left { .left {
width: 1064px; width: 20px;
margin-top: 16px; flex: auto;
.box1 { .box1 {
height: 100%; height: 100%;
.analysis-box { .analysis-box {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.analysis-top { .analysis-top {
font-family: var(--font-family-base); font-family: var(--font-family-base);
padding: 0 20px; padding: 0 20px;
color: var(--text-primary-65-color); color: var(--text-primary-65-color);
height: 60px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
.select-input { .select-input {
background-color: var(--el-fill-color-blank); background-color: var(--el-fill-color-blank);
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
box-shadow: 0 0 0 1px var(--el-border-color) inset; box-shadow: 0 0 0 1px var(--el-border-color) inset;
box-sizing: border-box; box-sizing: border-box;
margin-left: 20px; margin-left: 20px;
width: 200px; width: 200px;
height: 32px; height: 32px;
}
} }
} }
.analysis-content { .analysis-content {
height: 20px; height: 20px;
flex: auto; flex: auto;
...@@ -449,15 +454,13 @@ onMounted(() => { ...@@ -449,15 +454,13 @@ onMounted(() => {
.right { .right {
width: 520px; width: 520px;
margin-left: 16px; display: flex;
flex-direction: column;
gap: 16px;
.box3 { .box3 {
margin-top: 16px;
width: 520px;
.box3-top { .box3-top {
margin-top: 2px; margin-top: 2px;
// height: 241px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
.box3-top-top { .box3-top-top {
...@@ -716,8 +719,8 @@ onMounted(() => { ...@@ -716,8 +719,8 @@ onMounted(() => {
} }
.box4 { .box4 {
margin-top: 16px; height: 20px;
height: 528px; flex: auto;
.left-bottom-main { .left-bottom-main {
padding: 20px 20px 0; padding: 20px 20px 0;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论