Skip to content

R
risk-monitor
提交 d82da293 authored 作者: 朱政's avatar 朱政
浏览文件
操作

概览页新闻资讯以及风险信号列表组件开发以及替换相关代码

上级 d4b8b274
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 691 行增加 和 38 行删除
src/components/NewsList/NewsList.vue 0 → 100644
浏览文件 @ d82da293
<template>
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title"><span class="text-inner">{{ news[props.title] }}</span></div>
<div class="time">{{ news[props.from] }}</div>
</div>
<div class="right-footer">{{ news[props.content] }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({
// 新闻列表数据
newsList: {
type: Array,
default: () => []
},
img: {
type: String,
default: 'img'
},
title: {
type: String,
default: "title"
},
from: {
type: String,
default: "from"
},
content: {
type: String,
default: "content"
},
});
const emit = defineEmits(['item-click', 'more-click']);
const handleToMoreNews = () => {
emit('more-click')
};
const handleToNewsAnalysis = (item, index) => {
emit('item-click', item, index)
};
</script>
<style lang="scss" scoped>
.box3 {
width: 792px !important;
height: 450px !important;
border-radius: 10px !important;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1) !important;
background: rgba(255, 255, 255, 1) !important;
display: flex !important;
flex-direction: column;
gap: 0 !important;
overflow: hidden;
.box3-header {
height: 48px !important;
border-bottom: 1px solid rgba(234, 236, 238, 1) !important;
margin: 0 !important;
display: flex !important;
justify-content: space-between !important;
position: relative !important;
width: 100%;
box-sizing: border-box;
.box3-header-left {
display: flex !important;
.box3-header-icon {
margin-left: 19px !important;
margin-top: 14px !important;
width: 24px !important;
height: 24px !important;
img {
width: 100% !important;
height: 100% !important;
}
}
.box3-header-title {
margin-top: 11px !important;
margin-left: 17px !important;
height: 26px !important;
color: var(--color-main-active) !important;
font-family: 'Source Han Sans CN' !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 26px !important;
}
}
.more {
width: 45px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 401px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
.box3-item {
display: flex;
height: 78px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
.right-top .title {
color: rgb(5, 95, 194) !important;
font-weight: 700;
}
.right-top .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
.title {
margin-top: 14px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.text-inner {
border-bottom: 1px solid transparent;
}
}
.time {
width: 157px;
text-align: right;
height: 22px;
margin-top: 14px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
\ No newline at end of file
src/components/RiskSignal/RiskSignal.vue 0 → 100644
浏览文件 @ d82da293
<template>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./image1.png" alt="" />
</div>
<div class="title">
<div class="text">{{ title }}</div>
<div class="num">{{ list.length }}</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)">
<div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险',
itemLeftStatus3: item[props.riskLevel] === '较大风险',
itemLeftStatus4: item[props.riskLevel] === '一般风险' || !item[props.riskLevel],
itemLeftStatus5: item[props.riskLevel] === '低风险',
}">
{{ item[props.riskLevel] || "暂无数据" }}
</div>
<div class="item-right">
<div class="text"> <span class="text-inner">{{ item[props.name] }}</span></div>
<div class="time">{{ item[props.postDate] }}</div>
</div>
</div>
</div>
<div class="box2-footer" @click="handleMoreClick" v-if="showMore">
<div class="icon">
<img src="./image2.png" alt="" />
</div>
<div class="text">{{ moreText }}</div>
</div>
</div>
</template>
<script setup>
import { ElMessage } from "element-plus";
// 接收父组件传递的参数
const props = defineProps({
// 标题（默认“风险信号”）
title: {
type: String,
default: "风险信号"
},
// 风险信号列表数据
list: {
type: Array,
default: () => []
},
// “查看更多”文本（默认“查看更多”）
moreText: {
type: String,
default: "查看更多"
},
//控制“查看更多”是否显示，默认显示
showMore: {
type: Boolean,
default: true
},
name: {
type: String,
default: "name"
},
postDate: {
type: String,
default: "postDate"
},
riskLevel: {
type: String,
default: "riskLevel"
},
});
// 定义自定义事件，把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']);
// 点击单条风险信号
const handleItemClick = (item, index) => {
emit('item-click', item, index)
};
// 点击“查看更多”
const handleMoreClick = () => {
emit('more-click')
};
</script>
<style scoped lang="scss">
.risk-status-base {
width: 40px;
height: 40px;
border-radius: 20px;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.itemLeftStatus1 {
color: rgb(206, 79, 81) !important;
background: rgba(255, 241, 240, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus3 {
color: rgba(212, 177, 6, 1) !important;
background: rgba(254, 255, 230, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus4 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus5 {
color: rgba(22, 119, 255, 1) !important;
background: rgba(230, 244, 255, 1) !important;
@extend .risk-status-base
}
.box2 {
width: 520px;
height: 450px;
border-radius: 10px;
position: relative;
background: rgba(255, 255, 255, 1);
padding: 0;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
border: 1px solid rgba(234, 236, 238, 1);
box-sizing: border-box;
overflow: hidden;
.box2-header {
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.icon {
width: 24px;
height: 24px;
margin-left: 18px;
margin-top: 14px;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
background: rgb(206, 79, 81);
margin-left: 18px;
.text {
margin-left: 16px;
height: 48px;
color: rgba(255, 255, 255, 1);
font-family: 'Source Han Sans CN';
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 15px;
margin-top: 15px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
}
.box2-main {
box-sizing: border-box;
padding-left: 23px;
padding-right: 30px;
overflow-y: auto;
width: 520px;
height: calc(100% - 160px);
border-radius: 4px;
.box2-main-item {
width: 463px;
height: 48px;
border-radius: 2px;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
.item-right .text {
color: rgb(5, 95, 194) !important;
font-weight: 700;
}
.item-right .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
.item-left {
margin-top: 4px;
margin-left: 0px;
margin-bottom: 4px;
width: 40px;
height: 40px;
border-radius: 20px;
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 12px;
height: 46px;
display: flex;
align-items: center;
flex: 1;
background: transparent;
padding: 0;
border-bottom: 1px solid #EAECEE;
box-sizing: border-box;
overflow: hidden; // 保证右侧不会溢出
.text {
padding-top: 8px;
padding-bottom: 8px;
flex: 1 1 auto;
min-width: 0;
height: 100%;
background: transparent;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
flex-shrink: 1;
.text-inner {
border-bottom: 1px solid transparent;
}
}
.time {
flex: 0 0 auto;
margin-left: 12px;
padding-top: 11px;
padding-bottom: 11px;
height: 100%;
flex-shrink: 0;
background: transparent;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
box-sizing: border-box;
color: rgb(132, 136, 142);
white-space: nowrap;
}
}
}
}
.box2-footer {
position: absolute;
left: 26px;
right: 20px;
bottom: 20px;
width: 460px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: var(--color-main-active);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
</style>
\ No newline at end of file
src/views/coopRestriction/components/askPage/index.vue
浏览文件 @ d82da293
<template> <template>
<div class="ask-page"> <div class="ask-page">
<div class="left"> <!-- <div class="left">
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt=""> <img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div> <div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div> <div class="more" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList.slice(0, 5)" :key="item.id" class="main-item" @click="handleToNewsDetail(item)"> <div v-for="item in leftList" :key="item.id" class="main-item" @click="handleToNewsDetail(item)">
<img :src="item.image || defaultNews" alt="" @error="e => e.target.src = defaultNews"> <img :src="item.image || defaultNews" alt="" @error="e => e.target.src = defaultNews">
<div class="item-content"> <div class="item-content">
<div class="title"> <div class="title">
...@@ -24,14 +24,17 @@ ...@@ -24,14 +24,17 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<NewsList :newsList="leftList" @item-click="handleToNewsDetail" @more-click="handleToMoreNews" img="image"
title="title" content="content" from="from" />
<div class="right"> <div class="right">
<div class="right-title"> <div class="right-title">
<img src="./assets/icon02.png" alt=""> <img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div> <div class="tit">社交媒体</div>
</div> </div>
<div class="right-main"> <div class="right-main">
<div v-for="(item, index) in rightList.slice(0, 3)" :key="item.id" class="social-item" @click="handleToSocialDetail(item)"> <div v-for="(item, index) in rightList.slice(0, 3)" :key="item.id" class="social-item"
@click="handleToSocialDetail(item)">
<img :src="item.image || defaultAvatar" alt="" @error="e => e.target.src = defaultAvatar"> <img :src="item.image || defaultAvatar" alt="" @error="e => e.target.src = defaultAvatar">
<div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }"> <div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }">
<div class="cl1">{{ item.name }}</div> <div class="cl1">{{ item.name }}</div>
...@@ -97,7 +100,8 @@ const getCoopRestrictionNewsData = async () => { ...@@ -97,7 +100,8 @@ const getCoopRestrictionNewsData = async () => {
title: item.newsTitle, title: item.newsTitle,
content: item.newsContent, content: item.newsContent,
time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`, time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
image: item.newsImage image: item.newsImage,
from: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
})); }));
} }
} catch (error) { } catch (error) {
...@@ -155,11 +159,13 @@ onMounted(() => { ...@@ -155,11 +159,13 @@ onMounted(() => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.ask-page { .ask-page {
width: 1600px; width: 1600px;
height: 450px; height: 450px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 792px; width: 792px;
height: 450px; height: 450px;
...@@ -168,11 +174,13 @@ onMounted(() => { ...@@ -168,11 +174,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
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-color: #fff; background-color: #fff;
.left-title { .left-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -180,6 +188,7 @@ onMounted(() => { ...@@ -180,6 +188,7 @@ onMounted(() => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 80px;
...@@ -191,6 +200,7 @@ onMounted(() => { ...@@ -191,6 +200,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -205,29 +215,35 @@ onMounted(() => { ...@@ -205,29 +215,35 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.left-main { .left-main {
width: 792px; width: 792px;
height: 402px; height: 402px;
padding: 20px 22px 21px 21px; padding: 20px 22px 21px 21px;
.main-item { .main-item {
width: 749px; width: 749px;
height: 64px; height: 64px;
display: flex; display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px; margin-bottom: 14px;
&:hover { &:hover {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
img { img {
width: 72px; width: 72px;
height: 48px; height: 48px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
} }
.item-content { .item-content {
width: 657px; width: 657px;
height: 50px; height: 50px;
position: relative; position: relative;
.title { .title {
width: 480px; width: 480px;
font-size: 16px; font-size: 16px;
...@@ -240,6 +256,7 @@ onMounted(() => { ...@@ -240,6 +256,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.content { .content {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
...@@ -252,6 +269,7 @@ onMounted(() => { ...@@ -252,6 +269,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.time { .time {
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -267,6 +285,7 @@ onMounted(() => { ...@@ -267,6 +285,7 @@ onMounted(() => {
} }
} }
} }
.right { .right {
width: 792px; width: 792px;
height: 450px; height: 450px;
...@@ -274,11 +293,13 @@ onMounted(() => { ...@@ -274,11 +293,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
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-color: #fff; background-color: #fff;
.right-title { .right-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -286,6 +307,7 @@ onMounted(() => { ...@@ -286,6 +307,7 @@ onMounted(() => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 80px;
...@@ -297,6 +319,7 @@ onMounted(() => { ...@@ -297,6 +319,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -311,28 +334,33 @@ onMounted(() => { ...@@ -311,28 +334,33 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.right-main { .right-main {
width: 792px; width: 792px;
height: 402px; height: 402px;
padding: 23px 30px 25px 21px; padding: 23px 30px 25px 21px;
overflow: auto; overflow: auto;
.social-item { .social-item {
width: 740px; width: 740px;
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
img { img {
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-right: 8.5px; margin-right: 8.5px;
border-radius: 50%; border-radius: 50%;
} }
.social-item-main { .social-item-main {
width: 695.6px; width: 695.6px;
padding: 11px 14px 12px 22.5px; padding: 11px 14px 12px 22.5px;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
.cl1 { .cl1 {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -341,6 +369,7 @@ onMounted(() => { ...@@ -341,6 +369,7 @@ onMounted(() => {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
margin-bottom: 5px; margin-bottom: 5px;
} }
.cl2 { .cl2 {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -348,6 +377,7 @@ onMounted(() => { ...@@ -348,6 +377,7 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.cl3 { .cl3 {
position: absolute; position: absolute;
top: 11px; top: 11px;
......
src/views/coopRestriction/components/dataNew/index.vue
浏览文件 @ d82da293
...@@ -9,16 +9,8 @@ ...@@ -9,16 +9,8 @@
<div class="more" @click="handleClickToDetail">查看详情 ></div> <div class="more" @click="handleClickToDetail">查看详情 ></div>
</div> </div>
<el-carousel <el-carousel ref="carouselRef" height="412px" direction="horizontal" :autoplay="true" :interval="5000"
ref="carouselRef" arrow="never" indicator-position="none" @change="handleCarouselChange">
height="412px"
direction="horizontal"
:autoplay="true"
:interval="5000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(item, index) in coopRestrictionTrends" :key="item.ID || index"> <el-carousel-item v-for="(item, index) in coopRestrictionTrends" :key="item.ID || index">
<div class="carousel-item-content"> <div class="carousel-item-content">
<div class="left-center"> <div class="left-center">
...@@ -42,14 +34,9 @@ ...@@ -42,14 +34,9 @@
<li> <li>
<span class="ul-title">涉及领域：</span> <span class="ul-title">涉及领域：</span>
<div class="ul-tags" v-if="item.AREA"> <div class="ul-tags" v-if="item.AREA">
<span <span v-for="(field, fIndex) in typeof item.AREA === 'string'
v-for="(field, fIndex) in typeof item.AREA === 'string'
? item.AREA.split(',') ? item.AREA.split(',')
: item.AREA" : item.AREA" :key="fIndex" class="ul-pie" :class="'cl' + ((fIndex % 3) + 1)">
:key="fIndex"
class="ul-pie"
:class="'cl' + ((fIndex % 3) + 1)"
>
{{ field }} {{ field }}
</span> </span>
</div> </div>
...@@ -92,7 +79,7 @@ ...@@ -92,7 +79,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="right"> <!-- <div class="right">
<div class="right-top"> <div class="right-top">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="right-top-title"> <div class="right-top-title">
...@@ -102,10 +89,8 @@ ...@@ -102,10 +89,8 @@
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)"> <div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)">
<div <div class="main-left"
class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }">
:class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }"
>
{{ item.title }} {{ item.title }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -122,11 +107,14 @@ ...@@ -122,11 +107,14 @@
<img src="./assets/btn.png" alt="" /> <img src="./assets/btn.png" alt="" />
查看更多 查看更多
</div> </div>
</div> </div> -->
<RiskSignal :list="riskSignals" @more-click="handleToMoreRiskSignal" postDate="time" name="content"
riskLevel="title" @item-click="handleClickToDetail" />
</div> </div>
</template> </template>
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import router from "@/router"; import router from "@/router";
import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js"; import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js";
...@@ -236,11 +224,13 @@ onMounted(() => { ...@@ -236,11 +224,13 @@ onMounted(() => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.data-new { .data-new {
width: 1600px; width: 1600px;
height: 460px; height: 460px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 1064px; width: 1064px;
height: 460px; height: 460px;
...@@ -250,6 +240,7 @@ onMounted(() => { ...@@ -250,6 +240,7 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.left-btn { .left-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -260,6 +251,7 @@ onMounted(() => { ...@@ -260,6 +251,7 @@ onMounted(() => {
z-index: 100; z-index: 100;
pointer-events: auto; pointer-events: auto;
} }
.right-btn { .right-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -270,11 +262,13 @@ onMounted(() => { ...@@ -270,11 +262,13 @@ onMounted(() => {
z-index: 100; z-index: 100;
pointer-events: auto; pointer-events: auto;
} }
.left-top { .left-top {
width: 100%; width: 100%;
height: 48px; height: 48px;
position: relative; position: relative;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
...@@ -282,6 +276,7 @@ onMounted(() => { ...@@ -282,6 +276,7 @@ onMounted(() => {
top: 15px; top: 15px;
left: 23px; left: 23px;
} }
.more { .more {
position: absolute; position: absolute;
height: 48px; height: 48px;
...@@ -295,6 +290,7 @@ onMounted(() => { ...@@ -295,6 +290,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
z-index: 101; z-index: 101;
} }
.left-top-title { .left-top-title {
margin-left: 60px; margin-left: 60px;
width: 152px; width: 152px;
...@@ -309,10 +305,12 @@ onMounted(() => { ...@@ -309,10 +305,12 @@ onMounted(() => {
padding: 11px 16px; padding: 11px 16px;
} }
} }
.carousel-item-content { .carousel-item-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.left-center { .left-center {
width: 967px; width: 967px;
height: 208px; height: 208px;
...@@ -320,15 +318,19 @@ onMounted(() => { ...@@ -320,15 +318,19 @@ onMounted(() => {
margin-left: 62px; margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 148px; width: 148px;
height: 148px; height: 148px;
margin-right: 21px; margin-right: 21px;
} }
display: flex; display: flex;
.left-center-main { .left-center-main {
width: 439px; width: 439px;
height: 175px; height: 175px;
.left-center-main-title { .left-center-main-title {
margin-left: 19px; margin-left: 19px;
margin-bottom: 17px; margin-bottom: 17px;
...@@ -337,17 +339,21 @@ onMounted(() => { ...@@ -337,17 +339,21 @@ onMounted(() => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.left-center-main-ul { .left-center-main-ul {
width: 439px; width: 439px;
height: 132px; height: 132px;
ul { ul {
list-style-position: inside; list-style-position: inside;
li { li {
width: 100%; width: 100%;
min-height: 24px; min-height: 24px;
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
&::before { &::before {
content: "·"; content: "·";
font-size: 24px; font-size: 24px;
...@@ -356,6 +362,7 @@ onMounted(() => { ...@@ -356,6 +362,7 @@ onMounted(() => {
margin-right: 16px; margin-right: 16px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-title { .ul-title {
flex-shrink: 0; flex-shrink: 0;
width: 120px; width: 120px;
...@@ -365,6 +372,7 @@ onMounted(() => { ...@@ -365,6 +372,7 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-content { .ul-content {
flex: 1; flex: 1;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
...@@ -373,12 +381,14 @@ onMounted(() => { ...@@ -373,12 +381,14 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.ul-tags { .ul-tags {
flex: 1; flex: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
} }
.ul-pie { .ul-pie {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
...@@ -389,16 +399,19 @@ onMounted(() => { ...@@ -389,16 +399,19 @@ onMounted(() => {
line-height: 18px; line-height: 18px;
white-space: nowrap; white-space: nowrap;
} }
.cl1 { .cl1 {
border-color: rgba(186, 224, 255, 1); border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1); background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
} }
.cl2 { .cl2 {
border-color: rgba(255, 163, 158, 1); border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
} }
.cl3 { .cl3 {
border-color: rgba(135, 232, 222, 1); border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1); background-color: rgba(230, 255, 251, 1);
...@@ -408,6 +421,7 @@ onMounted(() => { ...@@ -408,6 +421,7 @@ onMounted(() => {
} }
} }
} }
.left-center-title { .left-center-title {
padding: 3px 8px 5px; padding: 3px 8px 5px;
height: 32px; height: 32px;
...@@ -423,10 +437,13 @@ onMounted(() => { ...@@ -423,10 +437,13 @@ onMounted(() => {
top: -1px; top: -1px;
} }
} }
.left-bottom { .left-bottom {
margin: 17px 0 0 62px; margin: 17px 0 0 62px;
ul { ul {
list-style-position: inside; list-style-position: inside;
.left-bottom-li { .left-bottom-li {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -436,6 +453,7 @@ onMounted(() => { ...@@ -436,6 +453,7 @@ onMounted(() => {
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
&::before { &::before {
content: "·"; content: "·";
font-size: 24px; font-size: 24px;
...@@ -446,6 +464,7 @@ onMounted(() => { ...@@ -446,6 +464,7 @@ onMounted(() => {
} }
} }
} }
.left-bottom-content { .left-bottom-content {
width: 943px; width: 943px;
margin-left: 22px; margin-left: 22px;
...@@ -457,6 +476,7 @@ onMounted(() => { ...@@ -457,6 +476,7 @@ onMounted(() => {
} }
} }
} }
.right { .right {
width: 520px; width: 520px;
height: 460px; height: 460px;
...@@ -465,11 +485,13 @@ onMounted(() => { ...@@ -465,11 +485,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.right-top { .right-top {
width: 520px; width: 520px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 21px; width: 21px;
height: 16.84px; height: 16.84px;
...@@ -477,6 +499,7 @@ onMounted(() => { ...@@ -477,6 +499,7 @@ onMounted(() => {
top: 15.1px; top: 15.1px;
left: 19.5px; left: 19.5px;
} }
.right-top-title { .right-top-title {
padding: 11px 16px; padding: 11px 16px;
width: 148px; width: 148px;
...@@ -489,6 +512,7 @@ onMounted(() => { ...@@ -489,6 +512,7 @@ onMounted(() => {
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-left: 60px; margin-left: 60px;
span { span {
display: inline-block; display: inline-block;
width: 24px; width: 24px;
...@@ -504,6 +528,7 @@ onMounted(() => { ...@@ -504,6 +528,7 @@ onMounted(() => {
} }
} }
} }
.right-main { .right-main {
width: 468px; width: 468px;
padding-right: 5px; padding-right: 5px;
...@@ -512,9 +537,11 @@ onMounted(() => { ...@@ -512,9 +537,11 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.main-left { .main-left {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -527,24 +554,29 @@ onMounted(() => { ...@@ -527,24 +554,29 @@ onMounted(() => {
padding: 6px 4px; padding: 6px 4px;
text-align: center; text-align: center;
} }
.cl4 { .cl4 {
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81); color: rgb(206, 79, 81);
} }
.cl5 { .cl5 {
background-color: rgba(255, 247, 230, 1); background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1); color: rgba(250, 140, 22, 1);
} }
.cl6 { .cl6 {
background-color: rgba(246, 255, 237, 1); background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1); color: rgba(82, 196, 26, 1);
} }
.item-right { .item-right {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
.main-center { .main-center {
flex: 1; flex: 1;
height: 30px; height: 30px;
...@@ -558,6 +590,7 @@ onMounted(() => { ...@@ -558,6 +590,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.main-right { .main-right {
width: 100px; width: 100px;
height: 24px; height: 24px;
...@@ -571,6 +604,7 @@ onMounted(() => { ...@@ -571,6 +604,7 @@ onMounted(() => {
} }
} }
} }
.right-mainbtn { .right-mainbtn {
width: 460px; width: 460px;
height: 42px; height: 42px;
...@@ -584,11 +618,13 @@ onMounted(() => { ...@@ -584,11 +618,13 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 8px; margin-right: 8px;
} }
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
......
src/views/decree/decreeHome/index.vue
浏览文件 @ d82da293
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="box2"> <!-- <div class="box2">
<div class="box2-header"> <div class="box2-header">
<div class="icon"> <div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" /> <img src="./assets/images/box2-header-icon.png" alt="" />
...@@ -224,11 +224,13 @@ ...@@ -224,11 +224,13 @@
</div> </div>
<div class="text">{{ "查看更多" }}</div> <div class="text">{{ "查看更多" }}</div>
</div> </div>
</div> </div> -->
<RiskSignal :list="warningList" @item-click="handleClickToDetail" @more-click="handleToMoreRiskSignal">
</RiskSignal>
</div> </div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader> <DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center"> <div class="center-center">
<div class="box3"> <!-- <div class="box3">
<div class="box3-header"> <div class="box3-header">
<div class="box3-header-left"> <div class="box3-header-left">
<div class="box3-header-icon"> <div class="box3-header-icon">
...@@ -253,11 +255,12 @@ ...@@ -253,11 +255,12 @@
<template #reference> <template #reference>
<div class="right-footer">{{ news.content }}</div> <div class="right-footer">{{ news.content }}</div>
</template> </template>
</el-popover> --> </el-popover> --
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" />
<div class="box4"> <div class="box4">
<div class="box4-header"> <div class="box4-header">
<div class="header-icon"> <div class="header-icon">
...@@ -447,8 +450,7 @@ ...@@ -447,8 +450,7 @@
<div class="title">{{ "政令库" }}</div> <div class="title">{{ "政令库" }}</div>
</div> </div>
<div class="content-box" v-show="decreeList"> <div class="content-box" v-show="decreeList">
<div class="main-item" v-for="(item, index) in decreeList" :key="index" <div class="main-item" v-for="(item, index) in decreeList" :key="index" @click="handleClickDecree(item)">
@click="handleClickDecree(item)">
<div class="main-item-left"> <div class="main-item-left">
<div class="left-left">{{ item.time.split('-')[0] }}<br>{{ item.time.split('-')[1] }}月{{ <div class="left-left">{{ item.time.split('-')[0] }}<br>{{ item.time.split('-')[1] }}月{{
...@@ -500,6 +502,7 @@ ...@@ -500,6 +502,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import { onMounted, ref, computed, watch, nextTick } from "vue"; import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router"; import router from "@/router";
import HeaderMenu from "@/components/headerMenu.vue"; import HeaderMenu from "@/components/headerMenu.vue";
...@@ -516,6 +519,7 @@ import { ...@@ -516,6 +519,7 @@ import {
getDecreehylyList, getDecreehylyList,
getDecreeTypeList getDecreeTypeList
} from "@/api/decree/home"; } from "@/api/decree/home";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { getPersonSummaryInfo } from "@/api/common/index"; import { getPersonSummaryInfo } from "@/api/common/index";
import { getNews, getSocialMedia } from "@/api/general/index"; import { getNews, getSocialMedia } from "@/api/general/index";
import MessageBubble from "@/components/dialog.vue"; import MessageBubble from "@/components/dialog.vue";
...@@ -566,6 +570,7 @@ import Message2 from "./assets/images/message-icon2.png"; ...@@ -566,6 +570,7 @@ import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png"; import Message3 from "./assets/images/message-icon3.png";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
// 跳转行政机构主页 // 跳转行政机构主页
const handleToInstitution = item => { const handleToInstitution = item => {
window.sessionStorage.setItem("curTabName", item.name); window.sessionStorage.setItem("curTabName", item.name);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论