Skip to content

R
risk-monitor
提交 a4c01eef authored 作者: 张伊明's avatar 张伊明
浏览文件
操作

fix 修改政治献金流向显示bug、修改法案首页新闻资讯间距

上级 3bce28ba
隐藏空白字符变更
内嵌 并排
正在显示 包含 223 行增加 和 159 行删除
src/views/bill/billHome/OverviewCard.vue
浏览文件 @ a4c01eef
...@@ -34,10 +34,10 @@ defineProps({ ...@@ -34,10 +34,10 @@ defineProps({
.overview-card { .overview-card {
height: 450px; height: 450px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid var(--border-black-5);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
overflow: hidden; overflow: hidden;
.overview-card-header { .overview-card-header {
......
src/views/bill/billHome/ResourceLibrarySection.vue
浏览文件 @ a4c01eef
...@@ -712,7 +712,7 @@ onMounted(() => { ...@@ -712,7 +712,7 @@ onMounted(() => {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
padding: 0 20px; padding: 0 20px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
...@@ -726,11 +726,11 @@ onMounted(() => { ...@@ -726,11 +726,11 @@ onMounted(() => {
.btnActive { .btnActive {
background: var(--color-main-active); background: var(--color-main-active);
color: #fff; color: var(--bg-white-100);
font-weight: 700; font-weight: 700;
&:hover { &:hover {
color: #fff; color: var(--bg-white-100);
background: var(--color-main-active); background: var(--color-main-active);
} }
} }
...@@ -760,7 +760,7 @@ onMounted(() => { ...@@ -760,7 +760,7 @@ onMounted(() => {
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
.select-box { .select-box {
margin-top: 20px; margin-top: 20px;
...@@ -780,7 +780,7 @@ onMounted(() => { ...@@ -780,7 +780,7 @@ onMounted(() => {
.title { .title {
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -802,8 +802,8 @@ onMounted(() => { ...@@ -802,8 +802,8 @@ onMounted(() => {
margin-bottom: 4px; margin-bottom: 4px;
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
color: rgb(95, 101, 108); color: var(--text-primary-65-color);
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
...@@ -852,9 +852,9 @@ onMounted(() => { ...@@ -852,9 +852,9 @@ onMounted(() => {
} }
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
color: #5f656c; color: var(--text-primary-65-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
padding-left: 10px; padding-left: 10px;
...@@ -885,7 +885,7 @@ onMounted(() => { ...@@ -885,7 +885,7 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: #fff; background: var(--bg-white-100);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -931,7 +931,7 @@ onMounted(() => { ...@@ -931,7 +931,7 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
object-fit: contain; object-fit: contain;
border-radius: 50%; border-radius: 50%;
background: #fff; background: var(--bg-white-100);
} }
.member-main { .member-main {
...@@ -949,7 +949,7 @@ onMounted(() => { ...@@ -949,7 +949,7 @@ onMounted(() => {
} }
.member-name { .member-name {
color: rgb(59, 65, 75); color: var(--text-primary-80-color);
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
...@@ -962,15 +962,15 @@ onMounted(() => { ...@@ -962,15 +962,15 @@ onMounted(() => {
.member-link { .member-link {
flex-shrink: 0; flex-shrink: 0;
color: #1459bb; color: #1459bb;
font-size: 16px; font-size: var(--font-size-base);
line-height: 24px; line-height: 24px;
} }
.member-meta, .member-meta,
.member-committee { .member-committee {
margin-top: 6px; margin-top: 6px;
color: #5f656c; color: var(--text-primary-65-color);
font-size: 16px; font-size: var(--font-size-base);
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
white-space: nowrap; white-space: nowrap;
...@@ -989,8 +989,8 @@ onMounted(() => { ...@@ -989,8 +989,8 @@ onMounted(() => {
height: 24px; height: 24px;
padding: 5px 8px; padding: 5px 8px;
border-radius: 4px; border-radius: 4px;
background: rgb(231, 243, 255); background: var(--color-primary-10);
color: rgb(5, 95, 194); color: var(--color-main-active);
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 14px; line-height: 14px;
...@@ -1004,8 +1004,8 @@ onMounted(() => { ...@@ -1004,8 +1004,8 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #eaeced; border-top: 1px solid #eaeced;
color: #5f656c; color: var(--text-primary-65-color);
font-size: 16px; font-size: var(--font-size-base);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
...@@ -1022,9 +1022,9 @@ onMounted(() => { ...@@ -1022,9 +1022,9 @@ onMounted(() => {
} }
.member-arrow { .member-arrow {
font-size: 16px; font-size: var(--font-size-base);
line-height: 1; line-height: 1;
color: #5f656c; color: var(--text-primary-65-color);
} }
.member-info { .member-info {
...@@ -1049,7 +1049,7 @@ onMounted(() => { ...@@ -1049,7 +1049,7 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: #fff; background: var(--bg-white-100);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
...@@ -1085,9 +1085,9 @@ onMounted(() => { ...@@ -1085,9 +1085,9 @@ onMounted(() => {
.coop-member-name { .coop-member-name {
max-width: 130px; max-width: 130px;
color: #3b414b; color: var(--text-primary-80-color);
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
white-space: nowrap; white-space: nowrap;
...@@ -1104,7 +1104,7 @@ onMounted(() => { ...@@ -1104,7 +1104,7 @@ onMounted(() => {
.coop-summary { .coop-summary {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
color: #5f656c; color: var(--text-primary-65-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1169,7 +1169,7 @@ onMounted(() => { ...@@ -1169,7 +1169,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: #3b414b; color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
...@@ -1183,7 +1183,7 @@ onMounted(() => { ...@@ -1183,7 +1183,7 @@ onMounted(() => {
.coop-proposal-subtitle { .coop-proposal-subtitle {
margin-top: 2px; margin-top: 2px;
color: #5f656c; color: var(--text-primary-65-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1199,7 +1199,7 @@ onMounted(() => { ...@@ -1199,7 +1199,7 @@ onMounted(() => {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #c0c4cc; color: #c0c4cc;
font-size: 16px; font-size: var(--font-size-base);
line-height: 1; line-height: 1;
} }
} }
...@@ -1211,7 +1211,7 @@ onMounted(() => { ...@@ -1211,7 +1211,7 @@ onMounted(() => {
padding: 20px 24px; padding: 20px 24px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: #fff; background: var(--bg-white-100);
} }
.committee-info { .committee-info {
...@@ -1231,7 +1231,7 @@ onMounted(() => { ...@@ -1231,7 +1231,7 @@ onMounted(() => {
} }
.committee-name { .committee-name {
color: #3b414b; color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1240,9 +1240,9 @@ onMounted(() => { ...@@ -1240,9 +1240,9 @@ onMounted(() => {
.committee-desc { .committee-desc {
margin-top: 8px; margin-top: 8px;
color: #5f656c; color: var(--text-primary-65-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
...@@ -1278,7 +1278,7 @@ onMounted(() => { ...@@ -1278,7 +1278,7 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
margin-bottom: 16px; margin-bottom: 16px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
...@@ -1313,18 +1313,18 @@ onMounted(() => { ...@@ -1313,18 +1313,18 @@ onMounted(() => {
} }
.risk-tag-critical { .risk-tag-critical {
background: rgba(206, 79, 81, 0.1); background: var(--color-red-10);
color: rgb(206, 79, 81); color: var(--color-red-100);
} }
.risk-tag-high { .risk-tag-high {
background: rgba(255, 149, 77, 0.1); background: var(--color-orange-10);
color: rgb(255, 149, 77); color: var(--color-orange-100);
} }
.risk-tag-medium { .risk-tag-medium {
background: rgba(232, 189, 11, 0.1); background: var(--color-yellow-10);
color: rgb(232, 189, 11); color: var(--color-yellow-100);
} }
.bill-cover { .bill-cover {
...@@ -1342,7 +1342,7 @@ onMounted(() => { ...@@ -1342,7 +1342,7 @@ onMounted(() => {
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 33.333%; height: 33.333%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 60%, rgba(255, 255, 255, 1)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 60%, var(--bg-white-100));
pointer-events: none; pointer-events: none;
} }
} }
...@@ -1365,7 +1365,7 @@ onMounted(() => { ...@@ -1365,7 +1365,7 @@ onMounted(() => {
justify-content: center; justify-content: center;
padding: 0 12px; padding: 0 12px;
box-sizing: border-box; box-sizing: border-box;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1395,7 +1395,7 @@ onMounted(() => { ...@@ -1395,7 +1395,7 @@ onMounted(() => {
.title { .title {
cursor: pointer; cursor: pointer;
height: 26px; height: 26px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1410,9 +1410,9 @@ onMounted(() => { ...@@ -1410,9 +1410,9 @@ onMounted(() => {
.en-title { .en-title {
margin-top: 8px; margin-top: 8px;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
...@@ -1434,9 +1434,9 @@ onMounted(() => { ...@@ -1434,9 +1434,9 @@ onMounted(() => {
.item-left { .item-left {
width: 88px; width: 88px;
color: rgb(59, 65, 75); color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -1446,9 +1446,9 @@ onMounted(() => { ...@@ -1446,9 +1446,9 @@ onMounted(() => {
.item-right { .item-right {
max-width: 1000px; max-width: 1000px;
margin-left: 10px; margin-left: 10px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
...@@ -1466,7 +1466,7 @@ onMounted(() => { ...@@ -1466,7 +1466,7 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
padding: 0 8px; padding: 0 8px;
border-radius: 4px; border-radius: 4px;
background: rgba(231, 243, 255, 1); background: var(--color-primary-10);
color: var(--color-main-active); color: var(--color-main-active);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 14px; font-size: 14px;
...@@ -1484,8 +1484,8 @@ onMounted(() => { ...@@ -1484,8 +1484,8 @@ onMounted(() => {
height: 24px; height: 24px;
line-height: 22px; line-height: 22px;
padding: 0 10px 0 30px; padding: 0 10px 0 30px;
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
color: rgb(95, 101, 108); color: var(--text-primary-65-color);
border-top: 1px solid rgb(234, 236, 238); border-top: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
...@@ -1518,16 +1518,16 @@ onMounted(() => { ...@@ -1518,16 +1518,16 @@ onMounted(() => {
} }
&:last-child { &:last-child {
background: rgb(59, 65, 75); background: var(--text-primary-80-color);
color: rgba(255, 255, 255, 1); color: var(--bg-white-100);
border-color: rgb(59, 65, 75); border-color: var(--text-primary-80-color);
padding-right: 10px; padding-right: 10px;
border-radius: 0; border-radius: 0;
border-right: none; border-right: none;
&::after { &::after {
display: block; display: block;
border-color: rgb(59, 65, 75); border-color: var(--text-primary-80-color);
box-shadow: none; box-shadow: none;
} }
} }
...@@ -1536,9 +1536,9 @@ onMounted(() => { ...@@ -1536,9 +1536,9 @@ onMounted(() => {
margin-left: 0; margin-left: 0;
padding: 0 10px; padding: 0 10px;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
background: rgb(59, 65, 75); background: var(--text-primary-80-color);
color: rgba(255, 255, 255, 1); color: var(--bg-white-100);
border: 1px solid rgb(59, 65, 75); border: 1px solid var(--text-primary-80-color);
border-right: none; border-right: none;
} }
} }
...@@ -1556,9 +1556,9 @@ onMounted(() => { ...@@ -1556,9 +1556,9 @@ onMounted(() => {
padding-top: 12px; padding-top: 12px;
.footer-left { .footer-left {
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
} }
......
src/views/bill/billHome/index.vue
浏览文件 @ a4c01eef
...@@ -955,7 +955,7 @@ onUnmounted(() => { ...@@ -955,7 +955,7 @@ onUnmounted(() => {
.search-header { .search-header {
width: 100%; width: 100%;
// height: 144px; // height: 144px;
background: #fff; background: var(--bg-white-100);
// overflow: hidden; // overflow: hidden;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
...@@ -974,7 +974,7 @@ onUnmounted(() => { ...@@ -974,7 +974,7 @@ onUnmounted(() => {
border-radius: 10px; border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); // box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
border: 1px solid var(--color-primary-35); border: 1px solid var(--color-primary-35);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
...@@ -1009,9 +1009,9 @@ onUnmounted(() => { ...@@ -1009,9 +1009,9 @@ onUnmounted(() => {
.search-text { .search-text {
margin-left: 8px; margin-left: 8px;
height: 22px; height: 22px;
color: #fff; color: var(--bg-white-100);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
} }
...@@ -1033,7 +1033,7 @@ onUnmounted(() => { ...@@ -1033,7 +1033,7 @@ onUnmounted(() => {
border: 1px solid #aed6ff; border: 1px solid #aed6ff;
box-sizing: border-box; box-sizing: border-box;
border-radius: 24px; border-radius: 24px;
background: #e7f3ff; background: var(--color-primary-10);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -1106,7 +1106,7 @@ onUnmounted(() => { ...@@ -1106,7 +1106,7 @@ onUnmounted(() => {
height: 48px; height: 48px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 0.65); background: var(--bg-white-65);
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
...@@ -1142,9 +1142,9 @@ onUnmounted(() => { ...@@ -1142,9 +1142,9 @@ onUnmounted(() => {
.search-text { .search-text {
margin-left: 8px; margin-left: 8px;
height: 22px; height: 22px;
color: #fff; color: var(--bg-white-100);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
} }
...@@ -1176,9 +1176,9 @@ onUnmounted(() => { ...@@ -1176,9 +1176,9 @@ onUnmounted(() => {
.item-footer { .item-footer {
margin-top: 10px; margin-top: 10px;
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
} }
...@@ -1201,7 +1201,7 @@ onUnmounted(() => { ...@@ -1201,7 +1201,7 @@ onUnmounted(() => {
border: 1px solid #aed6ff; border: 1px solid #aed6ff;
box-sizing: border-box; box-sizing: border-box;
border-radius: 24px; border-radius: 24px;
background: #e7f3ff; background: var(--color-primary-10);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -1254,7 +1254,7 @@ onUnmounted(() => { ...@@ -1254,7 +1254,7 @@ onUnmounted(() => {
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff; background: var(--bg-white-100);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
...@@ -1331,7 +1331,7 @@ onUnmounted(() => { ...@@ -1331,7 +1331,7 @@ onUnmounted(() => {
height: 48px; height: 48px;
background: var(--color-main-active); background: var(--color-main-active);
margin-left: 21px; margin-left: 21px;
color: #fff; color: var(--bg-white-100);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1390,16 +1390,16 @@ onUnmounted(() => { ...@@ -1390,16 +1390,16 @@ onUnmounted(() => {
width: 4px; width: 4px;
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
background: rgba(132, 136, 142, 1); background: var(--text-primary-50-color);
} }
.info1-box-left { .info1-box-left {
margin-left: 18px; margin-left: 18px;
width: 100px; width: 100px;
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
} }
...@@ -1407,9 +1407,9 @@ onUnmounted(() => { ...@@ -1407,9 +1407,9 @@ onUnmounted(() => {
.info1-box-right { .info1-box-right {
margin-left: 40px; margin-left: 40px;
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
} }
...@@ -1428,7 +1428,7 @@ onUnmounted(() => { ...@@ -1428,7 +1428,7 @@ onUnmounted(() => {
top: 15px; top: 15px;
left: 4px; left: 4px;
width: 2px; width: 2px;
background: #e6e7e8; background: var(--bg-black-10);
} }
.info2-item { .info2-item {
...@@ -1444,7 +1444,7 @@ onUnmounted(() => { ...@@ -1444,7 +1444,7 @@ onUnmounted(() => {
left: 4px; left: 4px;
top: 18px; top: 18px;
width: 2px; width: 2px;
background: #e6e7e8; background: var(--bg-black-10);
height: 34px; height: 34px;
} }
...@@ -1474,9 +1474,9 @@ onUnmounted(() => { ...@@ -1474,9 +1474,9 @@ onUnmounted(() => {
margin-left: 15px; margin-left: 15px;
width: 147px; width: 147px;
height: 30px; height: 30px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 30px; line-height: 30px;
} }
...@@ -1485,9 +1485,9 @@ onUnmounted(() => { ...@@ -1485,9 +1485,9 @@ onUnmounted(() => {
margin-left: 10px; margin-left: 10px;
width: 320px; width: 320px;
height: 30px; height: 30px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
overflow: hidden; overflow: hidden;
...@@ -1526,9 +1526,9 @@ onUnmounted(() => { ...@@ -1526,9 +1526,9 @@ onUnmounted(() => {
.inner-box-title { .inner-box-title {
flex: 9; flex: 9;
color: rgba(255, 255, 255, 1); color: var(--bg-white-100);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 30px; line-height: 30px;
overflow: hidden; overflow: hidden;
...@@ -1539,7 +1539,7 @@ onUnmounted(() => { ...@@ -1539,7 +1539,7 @@ onUnmounted(() => {
.inner-box-time { .inner-box-time {
flex: 2; flex: 2;
height: 30px; height: 30px;
color: rgba(255, 255, 255, 0.65); color: var(--bg-white-65);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1554,7 +1554,7 @@ onUnmounted(() => { ...@@ -1554,7 +1554,7 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
color: rgba(255, 255, 255, 0.8); color: var(--bg-white-80);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1570,7 +1570,7 @@ onUnmounted(() => { ...@@ -1570,7 +1570,7 @@ onUnmounted(() => {
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
position: relative; position: relative;
.box2-header { .box2-header {
...@@ -1596,13 +1596,13 @@ onUnmounted(() => { ...@@ -1596,13 +1596,13 @@ onUnmounted(() => {
margin-left: 18px; margin-left: 18px;
width: 148px; width: 148px;
height: 48px; height: 48px;
background: rgba(206, 79, 81, 1); background: var(--color-red-100);
display: flex; display: flex;
.text { .text {
margin-left: 16px; margin-left: 16px;
height: 22px; height: 22px;
color: #fff; color: var(--bg-white-100);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1680,9 +1680,9 @@ onUnmounted(() => { ...@@ -1680,9 +1680,9 @@ onUnmounted(() => {
.text { .text {
width: 315px; width: 315px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 47px; line-height: 47px;
overflow: hidden; overflow: hidden;
...@@ -1694,7 +1694,7 @@ onUnmounted(() => { ...@@ -1694,7 +1694,7 @@ onUnmounted(() => {
width: 88px; width: 88px;
margin-left: 5px; margin-left: 5px;
line-height: 47px; line-height: 47px;
color: rgba(132, 136, 142, 1); color: var(--text-primary-50-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1752,13 +1752,14 @@ onUnmounted(() => { ...@@ -1752,13 +1752,14 @@ onUnmounted(() => {
margin-top: 21px; margin-top: 21px;
height: 450px; height: 450px;
display: flex; display: flex;
gap:16px;
.box3 { .box3 {
width: 792px; width: 792px;
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
.box3-header { .box3-header {
height: 48px; height: 48px;
...@@ -1857,9 +1858,9 @@ onUnmounted(() => { ...@@ -1857,9 +1858,9 @@ onUnmounted(() => {
.title { .title {
width: 440px; width: 440px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
overflow: hidden; overflow: hidden;
...@@ -1871,7 +1872,7 @@ onUnmounted(() => { ...@@ -1871,7 +1872,7 @@ onUnmounted(() => {
flex: 1; flex: 1;
text-align: right; text-align: right;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1883,9 +1884,9 @@ onUnmounted(() => { ...@@ -1883,9 +1884,9 @@ onUnmounted(() => {
.right-footer { .right-footer {
width: 657px; width: 657px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden; overflow: hidden;
...@@ -1903,7 +1904,7 @@ onUnmounted(() => { ...@@ -1903,7 +1904,7 @@ onUnmounted(() => {
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
.box4-header { .box4-header {
width: 792px; width: 792px;
...@@ -2062,9 +2063,9 @@ onUnmounted(() => { ...@@ -2062,9 +2063,9 @@ onUnmounted(() => {
.box8-desc { .box8-desc {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
color: rgb(206, 79, 81); color: var(--color-red-100);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
} }
...@@ -2115,7 +2116,7 @@ onUnmounted(() => { ...@@ -2115,7 +2116,7 @@ onUnmounted(() => {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
padding: 0 20px; padding: 0 20px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
...@@ -2131,11 +2132,11 @@ onUnmounted(() => { ...@@ -2131,11 +2132,11 @@ onUnmounted(() => {
.btnActive { .btnActive {
background: var(--color-main-active); background: var(--color-main-active);
color: #fff; color: var(--bg-white-100);
font-weight: 700; font-weight: 700;
&:hover { &:hover {
color: #fff; color: var(--bg-white-100);
background: var(--color-main-active); background: var(--color-main-active);
} }
} }
...@@ -2173,7 +2174,7 @@ onUnmounted(() => { ...@@ -2173,7 +2174,7 @@ onUnmounted(() => {
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
.select-box { .select-box {
margin-top: 20px; margin-top: 20px;
...@@ -2216,8 +2217,8 @@ onUnmounted(() => { ...@@ -2216,8 +2217,8 @@ onUnmounted(() => {
margin-bottom: 4px; margin-bottom: 4px;
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
color: rgb(95, 101, 108); color: var(--text-primary-65-color);
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
...@@ -2252,7 +2253,7 @@ onUnmounted(() => { ...@@ -2252,7 +2253,7 @@ onUnmounted(() => {
padding-bottom: 24px; padding-bottom: 24px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
margin-bottom: 16px; margin-bottom: 16px;
overflow: hidden; overflow: hidden;
...@@ -2268,7 +2269,7 @@ onUnmounted(() => { ...@@ -2268,7 +2269,7 @@ onUnmounted(() => {
.title { .title {
cursor: pointer; cursor: pointer;
height: 26px; height: 26px;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -2283,9 +2284,9 @@ onUnmounted(() => { ...@@ -2283,9 +2284,9 @@ onUnmounted(() => {
.en-title { .en-title {
margin-top: 8px; margin-top: 8px;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
...@@ -2309,9 +2310,9 @@ onUnmounted(() => { ...@@ -2309,9 +2310,9 @@ onUnmounted(() => {
.item-left { .item-left {
width: 100px; width: 100px;
// height: 24px; // height: 24px;
color: rgb(59, 65, 75); color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -2321,9 +2322,9 @@ onUnmounted(() => { ...@@ -2321,9 +2322,9 @@ onUnmounted(() => {
.item-right { .item-right {
max-width: 1000px; max-width: 1000px;
margin-left: 10px; margin-left: 10px;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
...@@ -2340,7 +2341,7 @@ onUnmounted(() => { ...@@ -2340,7 +2341,7 @@ onUnmounted(() => {
line-height: 24px; line-height: 24px;
padding: 0 8px; padding: 0 8px;
border-radius: 4px; border-radius: 4px;
background: rgba(231, 243, 255, 1); background: var(--color-primary-10);
color: var(--color-main-active); color: var(--color-main-active);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 14px; font-size: 14px;
...@@ -2357,8 +2358,8 @@ onUnmounted(() => { ...@@ -2357,8 +2358,8 @@ onUnmounted(() => {
height: 24px; height: 24px;
line-height: 22px; line-height: 22px;
padding: 0 10px 0 30px; padding: 0 10px 0 30px;
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
color: rgb(95, 101, 108); color: var(--text-primary-65-color);
border-top: 1px solid rgb(234, 236, 238); border-top: 1px solid rgb(234, 236, 238);
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
...@@ -2391,16 +2392,16 @@ onUnmounted(() => { ...@@ -2391,16 +2392,16 @@ onUnmounted(() => {
} }
&:last-child { &:last-child {
background: rgb(59, 65, 75); background: var(--text-primary-80-color);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
border-color: rgb(59, 65, 75); border-color: var(--text-primary-80-color);
padding-right: 10px; padding-right: 10px;
border-radius: 0; border-radius: 0;
border-right: none; border-right: none;
&::after { &::after {
display: block; display: block;
border-color: rgb(59, 65, 75); border-color: var(--text-primary-80-color);
box-shadow: none; box-shadow: none;
} }
} }
...@@ -2409,9 +2410,9 @@ onUnmounted(() => { ...@@ -2409,9 +2410,9 @@ onUnmounted(() => {
margin-left: 0; margin-left: 0;
padding: 0 10px; padding: 0 10px;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
background: rgb(59, 65, 75); background: var(--text-primary-80-color);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
border: 1px solid rgb(59, 65, 75); border: 1px solid var(--text-primary-80-color);
border-right: none; border-right: none;
} }
} }
...@@ -2429,9 +2430,9 @@ onUnmounted(() => { ...@@ -2429,9 +2430,9 @@ onUnmounted(() => {
padding-top: 12px; padding-top: 12px;
.footer-left { .footer-left {
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
} }
...@@ -2448,9 +2449,9 @@ onUnmounted(() => { ...@@ -2448,9 +2449,9 @@ onUnmounted(() => {
justify-content: space-between; justify-content: space-between;
.footer-left { .footer-left {
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px; font-size: var(--font-size-base);
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
} }
......
src/views/bill/deepDig/poliContribution/index.vue
浏览文件 @ a4c01eef
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, watch, computed } from "vue"; import { ref, onMounted, watch, computed, nextTick } from "vue";
import { getBillPoliContribution, getBillMainPoliContribution, getBillPersonPoliContribution } from "@/api/deepdig"; import { getBillPoliContribution, getBillMainPoliContribution, getBillPersonPoliContribution } from "@/api/deepdig";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
...@@ -617,7 +617,7 @@ const getMainPoliContribution = async () => { ...@@ -617,7 +617,7 @@ const getMainPoliContribution = async () => {
const fullSourceList = ref([]); const fullSourceList = ref([]);
const showAllSankeyData = ref(false); const showAllSankeyData = ref(false);
const renderSankeyChart = () => { const renderSankeyChart = async () => {
const sourceList = showAllSankeyData.value ? fullSourceList.value : fullSourceList.value.slice(0, 5); const sourceList = showAllSankeyData.value ? fullSourceList.value : fullSourceList.value.slice(0, 5);
if (sourceList.length > 0) { if (sourceList.length > 0) {
...@@ -626,33 +626,39 @@ const renderSankeyChart = () => { ...@@ -626,33 +626,39 @@ const renderSankeyChart = () => {
const totalAmount = sourceList.reduce((sum, item) => sum + (item.amount || 0), 0); const totalAmount = sourceList.reduce((sum, item) => sum + (item.amount || 0), 0);
const orgNodes = sourceList.map((item, index) => ({
name: item.orgNameZh || item.orgName || `机构${index + 1}`,
value: item.amount,
itemStyle: {
color: sankeyColors[index % sankeyColors.length]
}
}));
const nodes = [ const nodes = [
...orgNodes,
{ {
name: personName, name: personName,
value: totalAmount, value: totalAmount,
label: { position: "left" },
itemStyle: {
color: "#FF1493"
}
},
...sourceList.map((item, index) => ({
name: item.orgNameZh,
value: item.amount,
itemStyle: { itemStyle: {
color: sankeyColors[index % sankeyColors.length] color: "#34C38F"
} }
})) }
]; ];
const links = sourceList.map(item => ({ const links = sourceList
source: item.orgNameZhZh, .map((item, index) => ({
target: personName, source: item.orgNameZh || item.orgName || `机构${index + 1}`,
value: item.amount target: personName,
})); value: item.amount
}))
.filter(item => !!item.source && !!item.target);
// `chart1` 容器由 v-if/v-else 动态渲染，必须等 DOM 挂载后再 init
await nextTick();
let chart1 = getSankeyChart(nodes, links); let chart1 = getSankeyChart(nodes, links);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
} else { } else {
await nextTick();
let chart1 = getSankeyChart([], []); let chart1 = getSankeyChart([], []);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
} }
......
src/views/bill/deepDig/poliContribution/utils/sankey.js
浏览文件 @ a4c01eef
...@@ -8,30 +8,87 @@ const getSankeyChart = (data = [], links = []) => { ...@@ -8,30 +8,87 @@ const getSankeyChart = (data = [], links = []) => {
}, },
series: { series: {
type: 'sankey', type: 'sankey',
layout: 'none', // 禁止鼠标拖拽/缩放平移，避免图表被交互改变
left: '1%', draggable: false,
right: '1%', roam: false,
top: '5%', left: 16,
bottom: '5%', right: 16,
top: 14,
bottom: 14,
nodeAlign: 'right', // 目标效果：人名贴右侧
emphasis: { emphasis: {
focus: 'adjacency' focus: 'adjacency'
}, },
nodeWidth: 50, // 所有色块宽度增加三倍
nodeGap: 2, nodeWidth: 54,
nodeGap: 10,
layoutIterations: 32, layoutIterations: 32,
lineStyle: { lineStyle: {
color: 'source', color: 'rgba(0, 0, 0, 0.08)', // 浅灰“行背景带”的基色
curveness: 0.5 opacity: 1,
curveness: 0.2
}, },
label: { label: {
show: true, show: true,
formatter: function (params) { formatter: function (params) {
return `${params.name} $${params.value.toLocaleString()}`; return `${params.name}`;
}, },
position: 'right', position: 'right',
fontSize: 16, fontSize: 16,
color: '#555' color: '#303133',
overflow: 'truncate',
width: 140
}, },
edgeLabel: {
show: true,
formatter: function (params) {
const val = params.value || 0;
return `$${Number(val).toLocaleString()}`;
},
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 140,
align: 'center'
},
itemStyle: {
borderWidth: 0
},
nodeSort: 'descending',
levels: [
// depth = 0（机构节点）
{
depth: 0,
itemStyle: {
borderWidth: 0
},
label: {
position: 'right',
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 140
}
},
// depth = 1（人物节点）
{
depth: 1,
itemStyle: {
color: '#34C38F'
},
label: {
// 人物名称移至色块左侧
position: 'left',
// 让文字最右侧紧贴绿色色块左侧
distance: 5,
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 120,
align: 'right'
}
}
],
data: data, data: data,
links: links links: links
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论