Skip to content

R
risk-monitor
提交 c6714e18 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

gj概览与博弈概览样式调整

上级 727de69b
隐藏空白字符变更
内嵌 并排
正在显示 包含 126 行增加 和 40 行删除
src/views/gjOverView/index.vue
浏览文件 @ c6714e18
...@@ -65,9 +65,10 @@ ...@@ -65,9 +65,10 @@
<div class="item"> <div class="item">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
<div class="item-header-text" style="background-color: #ce4f51"> <div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length
风险信号 }}</div>
</div> </div>
</div> </div>
<div class="item-header-divider" /> <div class="item-header-divider" />
<div class="warning-wrap"> <div class="warning-wrap">
...@@ -88,10 +89,15 @@ ...@@ -88,10 +89,15 @@
<div class="waring-text">{{ item.title }}</div> <div class="waring-text">{{ item.title }}</div>
<div class="waring-time">{{ item.time }}</div> <div class="waring-time">{{ item.time }}</div>
</div> </div>
<div class="item-header-divider" /> <!-- <div class="item-header-divider" /> -->
</div>
</div>
<div class="item-btn" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="@/assets/images/more-signal.png" alt="" />
</div> </div>
<div class="text">{{ "查看更多" }}</div>
</div> </div>
<div class="item-btn">查看更多</div>
</div> </div>
</div> </div>
...@@ -142,6 +148,12 @@ const warningList = ref([ ...@@ -142,6 +148,12 @@ const warningList = ref([
{ title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 1 }, { title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 1 },
{ title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 0 }, { title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 0 },
]); ]);
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -227,14 +239,40 @@ const warningList = ref([ ...@@ -227,14 +239,40 @@ const warningList = ref([
} }
.item-header-text { .item-header-text {
width: 152px; /* 原有样式不变 */
display: flex;
align-items: center;
/* 垂直居中 */
justify-content: center;
/* 水平居中（可选） */
gap: 8px;
/* 文字与圆点之间的距离，按需调 */
/* 其余保持原样 */
width: 150px;
height: 48px;
/* 建议把高度写死，方便对齐 */
background: #055fc2; background: #055fc2;
color: #fff; color: #fff;
font-size: 20px; font: bold 20px/1 Microsoft YaHei;
line-height: 48px;
text-align: center; text-align: center;
.num {
display: inline-flex;
/* 或 flex */
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
font-size: 14px;
}
} }
.item-header-more { .item-header-more {
margin-left: auto; margin-left: auto;
margin-right: 20px; margin-right: 20px;
...@@ -356,7 +394,7 @@ const warningList = ref([ ...@@ -356,7 +394,7 @@ const warningList = ref([
.waring-row { .waring-row {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 47px;
.waring-status { .waring-status {
width: 40px; width: 40px;
...@@ -368,17 +406,30 @@ const warningList = ref([ ...@@ -368,17 +406,30 @@ const warningList = ref([
} }
.waring-text { .waring-text {
flex: 1; color: rgba(59, 65, 75, 1);
width: calc(100% - 120px);
padding: 0 16px; padding: 0 16px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
text-align: justify;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid #eaecee;
} }
.waring-time { .waring-time {
width: 68px; width: 68px;
text-align: right;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
letter-spacing: 0px;
text-align: right;
border-bottom: 1px solid #eaecee;
} }
} }
} }
...@@ -395,6 +446,16 @@ const warningList = ref([ ...@@ -395,6 +446,16 @@ const warningList = ref([
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/overView/index.vue
浏览文件 @ c6714e18
...@@ -37,23 +37,17 @@ ...@@ -37,23 +37,17 @@
}} }}
</div> </div>
</div> </div>
<img <img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image"
class="item-card-content-title-image" alt="" />
:src="organizationNews[organizationNewsShow].image"
alt=""
/>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div class="item-card-content-text"> <div class="item-card-content-text">
{{ organizationNews[organizationNewsShow].content }} {{ organizationNews[organizationNewsShow].content }}
</div> </div>
<div style="display: flex;margin-top: 30px;"> <div style="display: flex;margin-top: 30px;">
<div <div class="item-card-content-tag" v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
class="item-card-content-tag"
v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
:key="index" :key="index"
:style="{ color: tag.textColor, background: tag.color, border: `1px solid ${tag.textColor}` }" :style="{ color: tag.textColor, background: tag.color, border: `1px solid ${tag.textColor}` }">
>
{{ tag.text }} {{ tag.text }}
</div> </div>
</div> </div>
...@@ -86,22 +80,18 @@ ...@@ -86,22 +80,18 @@
<div class="item left"> <div class="item left">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
<div class="item-header-text" style="background-color: #ce4f51">风险信号</div> <div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length
<div class="item-header-num" style="background-color: #ce4f51"> }}</div>
<div class="num">{{ warningList.length }}</div>
</div> </div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style="padding: 30px 23px; height: 400px"> <div style="padding: 30px 23px; height: 400px">
<div class="waring-item" v-for="(item, index) in warningList" :key="index"> <div class="waring-item" v-for="(item, index) in warningList" :key="index">
<div style="display: flex; height: 40px"> <div style="display: flex; height: 47px">
<div <div class="waring-status" :style="{
class="waring-status" color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
:style="{ backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A', }">
backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
}"
>
{{ item.status === 0 ? "特别重大" : item.status === 1 ? "重大风险" : "一般风险" }} {{ item.status === 0 ? "特别重大" : item.status === 1 ? "重大风险" : "一般风险" }}
</div> </div>
<div class="waring-text"> <div class="waring-text">
...@@ -109,7 +99,7 @@ ...@@ -109,7 +99,7 @@
</div> </div>
<div class="waring-time">{{ item.time }}</div> <div class="waring-time">{{ item.time }}</div>
</div> </div>
<div class="item-header-divider"></div> <!-- <div class="item-header-divider"></div> -->
</div> </div>
</div> </div>
<div class="item-btn" @click="handleToMoreRiskSignal"> <div class="item-btn" @click="handleToMoreRiskSignal">
...@@ -398,7 +388,7 @@ function changeOrganizationNews(type) { ...@@ -398,7 +388,7 @@ function changeOrganizationNews(type) {
: (organizationNewsShow.value = organizationNewsShow.value + 1); : (organizationNewsShow.value = organizationNewsShow.value + 1);
} }
} }
onMounted(() => {}); onMounted(() => { });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -411,6 +401,7 @@ onMounted(() => {}); ...@@ -411,6 +401,7 @@ onMounted(() => {});
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; background-size: 100% auto;
background-color: #fff; background-color: #fff;
.content-title { .content-title {
height: 64px; height: 64px;
color: #fff; color: #fff;
...@@ -487,20 +478,43 @@ onMounted(() => {}); ...@@ -487,20 +478,43 @@ onMounted(() => {});
} }
.item-header-text { .item-header-text {
width: 112px; /* 原有样式不变 */
display: flex;
align-items: center;
/* 垂直居中 */
justify-content: center;
/* 水平居中（可选） */
gap: 8px;
/* 文字与圆点之间的距离，按需调 */
/* 其余保持原样 */
width: 150px;
height: 48px;
/* 建议把高度写死，方便对齐 */
background: #055fc2; background: #055fc2;
color: #ffffff; color: #fff;
font-family: Microsoft YaHei; font: bold 20px/1 Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: center; text-align: center;
font-weight: bold;
.num {
display: inline-flex;
/* 或 flex */
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
font-size: 14px;
}
} }
.item-header-num { .item-header-num {
width: 30px; width: 30px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.num { .num {
width: 24px; width: 24px;
height: 20px; height: 20px;
...@@ -583,6 +597,7 @@ onMounted(() => {}); ...@@ -583,6 +597,7 @@ onMounted(() => {});
height: 110px; height: 110px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item-card-content-title { .item-card-content-title {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -619,7 +634,7 @@ onMounted(() => {}); ...@@ -619,7 +634,7 @@ onMounted(() => {});
.item-card-content-text { .item-card-content-text {
margin-top: 16px; margin-top: 16px;
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: 16px;
...@@ -704,9 +719,11 @@ onMounted(() => {}); ...@@ -704,9 +719,11 @@ onMounted(() => {});
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
margin: 0 auto; margin: 0 auto;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.waring-status { .waring-status {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -729,6 +746,8 @@ onMounted(() => {}); ...@@ -729,6 +746,8 @@ onMounted(() => {});
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid #eaecee;
/* 底部边框 */
} }
.waring-time { .waring-time {
...@@ -740,6 +759,8 @@ onMounted(() => {}); ...@@ -740,6 +759,8 @@ onMounted(() => {});
line-height: 48px; line-height: 48px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: right; text-align: right;
border-bottom: 1px solid #eaecee;
/* 底部边框 */
} }
} }
...@@ -759,14 +780,17 @@ onMounted(() => {}); ...@@ -759,14 +780,17 @@ onMounted(() => {});
border-radius: 6px; border-radius: 6px;
background: rgba(5, 95, 194, 1); background: rgba(5, 95, 194, 1);
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论