提交 4d2068b3 authored 作者: coderBryanFu's avatar coderBryanFu

出口管制样式优化

上级 2afd5596
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,7 @@
</div> </div>
<div class="box4-main"> <div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index"> <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left"> <div class="left" @click="handleClcikToCharacter(index)">
<img :src="item.img" alt="" /> <img :src="item.img" alt="" />
</div> </div>
<div class="right"> <div class="right">
...@@ -379,7 +379,12 @@ ...@@ -379,7 +379,12 @@
</el-select> </el-select>
</div> </div>
<div class="box8-main"> <div class="box8-main">
<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index"> <div
class="box8-main-item"
v-for="(item, index) in box8Data"
:key="index"
@click="handleClcikToCharacter(0)"
>
<div class="box8-main-item-left"> <div class="box8-main-item-left">
<img :src="item.img" alt="" /> <img :src="item.img" alt="" />
<div class="left-icon1"> <div class="left-icon1">
...@@ -558,7 +563,36 @@ ...@@ -558,7 +563,36 @@
</div> </div>
</div> </div>
<div class="right-main"> <div class="right-main">
<div class="right-main-box"></div> <div class="right-main-box" v-for="(item, index) in footerBillList" :key="index">
<div class="header">
<div class="title">{{ item.name }}</div>
<div class="en-title">{{ item.eName }}</div>
</div>
<div class="main">
<div class="item">
<div class="item-left">{{ "提案人:" }}</div>
<div class="item-right">{{ item.tcr }}</div>
</div>
<div class="item">
<div class="item-left">{{ "委员会:" }}</div>
<div class="item-right">{{ item.wyh }}</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域:" }}</div>
<div class="item-right1">
<div class="tag" v-for="(val, idx) in item.areaList" :key="idx">{{ val }}</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "最新动议:" }}</div>
<div class="item-right">{{ item.zxdy }}</div>
</div>
<div class="item">
<div class="item-left">{{ "法案进展:" }}</div>
<div class="item-right2"></div>
</div>
</div>
</div>
<div class="right-main-box"></div> <div class="right-main-box"></div>
<div class="right-main-box"></div> <div class="right-main-box"></div>
<div class="right-main-box"></div> <div class="right-main-box"></div>
...@@ -648,9 +682,29 @@ import Cyy from "@/assets/icons/cyy.png"; ...@@ -648,9 +682,29 @@ import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png"; import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png"; import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png"; import Mzd from "@/assets/icons/mzd.png";
import { iteratee } from "lodash";
const searchBillText = ref(""); const searchBillText = ref("");
// 跳转人物主页
const handleClcikToCharacter = index => {
let type;
if (index === 0) {
type = 2;
} else if (index === 1) {
type = 1;
} else {
type = 3;
}
const route = router.resolve({
path: "/characterPage",
query: {
type: type
}
});
window.open(route.href, "_blank");
};
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
...@@ -1455,6 +1509,36 @@ const footerSelectList2 = ref([ ...@@ -1455,6 +1509,36 @@ const footerSelectList2 = ref([
]); ]);
const footerSelect2 = ref("全部提出议员"); const footerSelect2 = ref("全部提出议员");
const footerBillList = ref([
{
name: "H.R.1-大而美法案",
eName: "One Big Beautiful Bill Act",
tcr: "乔迪·阿灵顿等2人",
wyh: "众议院-预算委员会",
areaList: ["集成电路", "人工智能"],
zxdy: "2025.07.04 成为公法 No: 119-21",
progress: []
},
{
name: "H.R.1-大而美法案",
eName: "One Big Beautiful Bill Act",
tcr: "乔迪·阿灵顿等2人",
wyh: "众议院-预算委员会",
areaList: ["集成电路", "人工智能"],
zxdy: "2025.07.04 成为公法 No: 119-21",
progress: []
},
{
name: "H.R.1-大而美法案",
eName: "One Big Beautiful Bill Act",
tcr: "乔迪·阿灵顿等2人",
wyh: "众议院-预算委员会",
areaList: ["集成电路", "人工智能"],
zxdy: "2025.07.04 成为公法 No: 119-21",
progress: []
}
]);
onMounted(async () => { onMounted(async () => {
handleGetHylyList(); handleGetHylyList();
...@@ -2406,6 +2490,7 @@ onUnmounted(() => {}); ...@@ -2406,6 +2490,7 @@ onUnmounted(() => {});
margin-top: 5px; margin-top: 5px;
width: 36px; width: 36px;
height: 36px; height: 36px;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -2733,12 +2818,17 @@ onUnmounted(() => {}); ...@@ -2733,12 +2818,17 @@ onUnmounted(() => {});
height: 340px; height: 340px;
.box8-main-item { .box8-main-item {
margin: 0 auto; margin: 0 auto;
width: 458px; width: 478px;
height: 51px; height: 51px;
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
padding: 0 10px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.box8-main-item-left { .box8-main-item-left {
position: relative; position: relative;
width: 42px; width: 42px;
...@@ -2801,7 +2891,7 @@ onUnmounted(() => {}); ...@@ -2801,7 +2891,7 @@ onUnmounted(() => {});
.box8-main-item-right { .box8-main-item-right {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 10px;
width: 92px; width: 92px;
height: 51px; height: 51px;
text-align: right; text-align: right;
...@@ -3001,13 +3091,90 @@ onUnmounted(() => {}); ...@@ -3001,13 +3091,90 @@ onUnmounted(() => {});
} }
.right-main { .right-main {
height: 1264px; height: 1264px;
overflow: hidden;
.right-main-box { .right-main-box {
width: 1280px; width: 1280px;
height: 300px; height: 300px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 10px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
margin-bottom: 16px; margin-bottom: 16px;
overflow: hidden;
.header {
height: 91px;
width: 1200px;
margin: 0 auto;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.title {
margin-top: 19px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.en-title {
margin-top: 8px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.main {
width: 1200px;
margin: 0 auto;
margin-top: 2px;
.item {
margin-top: 12px;
height: 24px;
display: flex;
.item-left {
width: 91px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.item-right {
margin-left: 10px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right1 {
margin-left: 10px;
display: flex;
gap: 8px;
.tag {
height: 24px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
} }
} }
.right-footer { .right-footer {
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="section-header" style=" margin-top: 24px;"> <div class="section-header" style=" margin-top: 24px;">
<div style="display: flex;"> <div style="display: flex;">
<div class="section-icon"></div> <div class="section-icon"></div>
<h3 class="section-title">年度研发投入对比</h3> <h3 class="section-title">年度研发投入对比111</h3>
</div> </div>
<div class="action-icons"> <div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon"> <img src="@/assets/icons/download.png" alt="下载" class="action-icon">
......
...@@ -117,8 +117,11 @@ onMounted(async () => { ...@@ -117,8 +117,11 @@ onMounted(async () => {
} }
.text { .text {
margin-left: 4px; margin-left: 4px;
height: 35px; height: 70px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -151,9 +154,13 @@ onMounted(async () => { ...@@ -151,9 +154,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -201,9 +208,13 @@ onMounted(async () => { ...@@ -201,9 +208,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -236,9 +247,13 @@ onMounted(async () => { ...@@ -236,9 +247,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -286,9 +301,13 @@ onMounted(async () => { ...@@ -286,9 +301,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -321,9 +340,13 @@ onMounted(async () => { ...@@ -321,9 +340,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -371,9 +394,13 @@ onMounted(async () => { ...@@ -371,9 +394,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -406,9 +433,13 @@ onMounted(async () => { ...@@ -406,9 +433,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -456,9 +487,13 @@ onMounted(async () => { ...@@ -456,9 +487,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -491,9 +526,13 @@ onMounted(async () => { ...@@ -491,9 +526,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -541,9 +580,13 @@ onMounted(async () => { ...@@ -541,9 +580,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -576,9 +619,13 @@ onMounted(async () => { ...@@ -576,9 +619,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
......
...@@ -402,6 +402,7 @@ onMounted(() => { ...@@ -402,6 +402,7 @@ onMounted(() => {
margin-right: 32px; margin-right: 32px;
margin-top: 3px; margin-top: 3px;
height: 35px; height: 35px;
border-bottom: 2px solid transparent;
cursor: pointer; cursor: pointer;
// &:hover{ // &:hover{
// .name { // .name {
...@@ -433,7 +434,7 @@ onMounted(() => { ...@@ -433,7 +434,7 @@ onMounted(() => {
} }
} }
.leftBoxBottomItemActive { .leftBoxBottomItemActive {
border-bottom: 3px solid rgba(20, 89, 187, 1); border-bottom: 2px solid rgba(20, 89, 187, 1);
} }
} }
} }
......
...@@ -91,12 +91,11 @@ function moreClick() { ...@@ -91,12 +91,11 @@ function moreClick() {
} }
.titleWrap { .titleWrap {
margin-left: 16px; margin-left: 16px;
height: 16px; height: 26px;
line-height: 16px; line-height: 26px;
color: var(--color-main-active); color: var(--color-main-active);
font-size: 16px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 16px;
} }
.rightWrap { .rightWrap {
display: flex; display: flex;
......
...@@ -399,7 +399,7 @@ ...@@ -399,7 +399,7 @@
<el-checkbox v-model="checked" label="50%规则" size="large" /> <el-checkbox v-model="checked" label="50%规则" size="large" />
</template> </template>
<template #default> <template #default>
<EChart :option="radarOption" autoresize :style="{ height: '450px' }" /> <EChart :option="radarOption" autoresize :style="{ height: '380px' }" />
</template> </template>
</custom-container> </custom-container>
</el-col> </el-col>
...@@ -474,7 +474,7 @@ ...@@ -474,7 +474,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="domains" label="涉及领域" min-width="180"> <el-table-column prop="domains" label="涉及领域" min-width="150">
<template #default="scope"> <template #default="scope">
<div class="domain-tags"> <div class="domain-tags">
<el-tag <el-tag
...@@ -514,12 +514,19 @@ ...@@ -514,12 +514,19 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right"> <el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope"> <template #default="scope">
<span <div class="num-item">
:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']" <div
class="name-item"
:class="[
'revenue-cell',
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
> >
{{ scope.row.name }}...等 {{ scope.row.name }}...等
<span style="color: #409eff">{{ scope.row.ruleOrgCount }}家> </span> </div>
</span> <div style="width: 50px; color: #409eff">{{ scope.row.ruleOrgCount }}家></div>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -841,9 +848,6 @@ const radarOption = ref({ ...@@ -841,9 +848,6 @@ const radarOption = ref({
title: { title: {
text: "" text: ""
}, },
// grid: {
// top: 100
// },
legend: { legend: {
top: 0, top: 0,
icon: "circle", icon: "circle",
...@@ -2462,6 +2466,17 @@ onMounted(async () => { ...@@ -2462,6 +2466,17 @@ onMounted(async () => {
text-align: justify; text-align: justify;
} }
.num-item {
width: 280px;
display: flex;
.name-item{
width: 215px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
...@@ -2473,4 +2488,23 @@ onMounted(async () => { ...@@ -2473,4 +2488,23 @@ onMounted(async () => {
:deep(.el-input__wrapper.is-focus) { :deep(.el-input__wrapper.is-focus) {
box-shadow: none !important; box-shadow: none !important;
} }
:deep(.el-table thead) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
:deep(.el-table tr) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
</style> </style>
...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
} }
}, },
grid: { grid: {
top: '8%', top: '5%',
right: '5%', right: '3%',
bottom: '5%', bottom: '3%',
left: '5%', left: '3%',
containLabel: true containLabel: true
}, },
legend: { legend: {
......
...@@ -1192,7 +1192,7 @@ onMounted(() => { ...@@ -1192,7 +1192,7 @@ onMounted(() => {
.btn { .btn {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 42px; line-height: 42px;
padding: 0 24px; padding: 0 24px;
...@@ -1211,6 +1211,7 @@ onMounted(() => { ...@@ -1211,6 +1211,7 @@ onMounted(() => {
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
font-weight: 700;
&:hover { &:hover {
color: #fff; color: #fff;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论