Skip to content

R
risk-monitor
提交 0ad9f2da authored 作者: 付康's avatar 付康
浏览文件
操作

合并分支 'zz-dev' 到 'master'

feat:概览页新闻资讯以及风险信号列表组件开发以及替换相关代码 查看合并请求 !122
上级 a1df7e9b 9086c34e
显示空白字符变更
内嵌 并排
正在显示 包含 3136 行增加 和 1590 行删除
src/components/NewsList/NewsList.vue 0 → 100644
浏览文件 @ 0ad9f2da
<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
浏览文件 @ 0ad9f2da
<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/components/dialog.vue deleted 100644 → 0
浏览文件 @ a1df7e9b
<template>
<div class="message-bubble">
<div class="avatar-container" @click="handleClick">
<img :src="avatar || avatarUser" :alt="name" class="avatar" />
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ name }}</span>
<span class="meta">{{ formattedTime }} · {{ source }}</span>
</div>
<div class="bubble-content" @click="handleInfoClick">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
avatar: {
type: String,
default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
},
name: {
type: String,
default: "唐纳德·特朗普"
},
time: {
type: String,
default: "15:23"
},
source: {
type: String,
default: "发布于真实社交"
},
content: {
type: String,
default:
"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
}
});
const formattedTime = computed(() => {
const date = new Date(props.time);
if (isNaN(date.getTime())) {
return props.time; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClick = () => {
emit("click");
};
const handleInfoClick = () => {
emit("info-click");
};
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 750px;
margin-top: 5px;
margin-bottom: 12px;
}
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
margin-right: 12px;
cursor: pointer;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
font-family: "微软雅黑";
}
.name {
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;
}
.meta {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
.bubble-content {
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;
font-family: "微软雅黑";
}
.triangle {
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/components/dialog/dialog.vue 0 → 100644
浏览文件 @ 0ad9f2da
<template>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
<div class="box4-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty"><img src="./image2.png" alt=""
class="avatar-imageOne" /></div>
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate"><img src="./image3.png" alt=""
class="avatar-imageTwo" /></div>
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ item[props.name] }}</span>
<span class="meta">{{ item[props.time] }} · {{ item[props.source] }}</span>
</div>
<div class="bubble-content">
{{ item[props.content] }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
isRepublicanParty: {
type: Boolean,
default: false
},
isUnitedStatesSenate: {
type: Boolean,
default: false
},
messageList: {
type: Array,
default: () => []
},
imageUrl: {
type: String,
default: "imageUrl"
},
name: {
type: String,
default: "name"
},
time: {
type: String,
default: "time"
},
source: {
type: String,
default: "source"
},
content: {
type: String,
default:
"content"
}
});
const formattedTime = computed((index) => {
const date = new Date(index);
if (isNaN(date.getTime())) {
return index; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClickPerson = (item) => {
emit("person-click", item);
};
const handleInfoClick = (item) => {
emit("info-click", item);
};
const handleToMoreNews = (item) => {
emit("more-click", item);
};
</script>
<style scoped>
.box4 {
margin-left: 20px;
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
border: 1px solid rgb(234, 236, 238);
.box4-header {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-left: 18px;
margin-top: 14px;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
width: 80px;
margin-top: 11px;
margin-left: 18px;
height: 26px;
color: rgb(5, 95, 194);
font-family: "Source Han Sans CN";
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.more {
width: 45px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
text-align: right;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 8px;
padding-left: 21px;
padding-top: 23px;
.message-bubble {
display: flex;
max-width: 740px;
margin-bottom: 15px;
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
width: 42px;
height: 42px;
margin-right: 14.5px;
cursor: pointer;
position: relative;
.avatar-containerOne,
.avatar-containerTwo {
display: inline-block;
position: absolute;
}
.avatar-containerOne {
left: 2px;
top: 29px;
.avatar-imageOne {
width: 20px;
height: 20px;
}
}
.avatar-containerTwo {
right: 2px;
top: 29px;
.avatar-imageTwo {
width: 20px;
height: 20px;
}
}
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
}
}
.bubble-container {
flex: 1;
position: relative;
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.name {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.meta {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
}
.bubble-content {
color: rgba(59, 65, 75, 1);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.triangle {
position: absolute;
left: -9px;
/* 向左偏移1px，给描边留出空间 */
top: 15px;
width: 0;
height: 0;
/* 外层：描边颜色的三角形（比内层大1px） */
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid rgb(231, 243, 255);
}
/* 内层：原有颜色的三角形，覆盖在外层上面，模拟描边效果 */
.triangle::after {
content: '';
position: absolute;
top: -8px;
/* 向上偏移1px，对齐中心 */
left: 1px;
/* 向右偏移1px，露出外层的描边 */
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
}
}
}
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/views/bill/billHome/index.vue
浏览文件 @ 0ad9f2da
......@@ -3,12 +3,8 @@
<div class="search-header" v-show="false">
<div class="search-header-container">
<div class="home-main-header-center">
<el-input
v-model="searchBillText"
@keyup.enter="handleSearch"
style="width: 680px; height: 100%"
placeholder="搜索科技法案"
/>
<el-input v-model="searchBillText" @keyup.enter="handleSearch" style="width: 680px; height: 100%"
placeholder="搜索科技法案" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
......@@ -56,20 +52,10 @@
</div>
</div> -->
<div class="home-main">
<SearchContainer
v-if="containerRef"
placeholder="搜索科技法案"
:containerRef="containerRef"
areaName="法案"
/>
<div class="home-main-header" v-if="false">
<div class="home-main-header">
<div class="home-main-header-center" v-show="!isShow">
<el-input
v-model="searchBillText"
@keyup.enter="handleSearch"
style="width: 800px; height: 100%"
placeholder="搜索科技法案"
/>
<el-input v-model="searchBillText" @keyup.enter="handleSearch" style="width: 800px; height: 100%"
placeholder="搜索科技法案" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
......@@ -152,15 +138,8 @@
</div>
</div>
<div class="box1-main" style="display: block">
<el-carousel
ref="carouselRef"
height="354px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel ref="carouselRef" height="354px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none" @change="handleCarouselChange">
<el-carousel-item v-for="(bill, billIndex) in hotBillList" :key="billIndex">
<div class="carousel-content" style="display: flex; height: 100%">
<div class="box1-main-left">
......@@ -169,9 +148,17 @@
{{ bill.billName }}
</div>
<div class="box1-main-left-info">
<AreaTag v-for="(item, index) in bill.hylyList"
:key="index" :tagName="item.industryName"></AreaTag>
<AreaTag v-for="(item, index) in bill.hylyList" :key="index" :tagName="item.industryName">
</AreaTag>
<div class="info-box" :class="{
info1: index === 0,
info2: index === 1,
info3: index === 2,
info4: index === 3
}" v-for="(item, index) in bill.hylyList" :key="index">
{{ item.industryName }}
</div>
</div>
<div class="box1-main-left-info1">
<div class="info1-box">
......@@ -223,7 +210,7 @@
</el-carousel>
</div>
</div>
<div class="box2">
<!-- <div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
......@@ -234,19 +221,12 @@
</div>
</div>
<div class="box2-main">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetailO(item)"
>
<div
class="item-left"
:class="{
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetailO(item)">
<div class="item-left" :class="{
itemLeftStatus1: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险'
}"
>
}">
{{ item.signalLevel ? item.signalLevel : "一般风险" }}
</div>
<div class="item-right">
......@@ -263,12 +243,56 @@
</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div> -->
<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" @item-click='handleClickToDetailO'
riskLevel="signalLevel" postDate="signalTime" name="signalTitle" />
</div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<NewsList :list="newsList.slice(0, 5)"/>
<div class="box4">
<!-- <div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.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.slice(0, 5)"
:key="index"
@click="handleClickToNewsDetail(news)"
>
<div class="left">
<img
:src="getProxyUrl(news.newsImage) || defaultNew"
alt=""
referrerpolicy="no-referrer"
@error="e => (e.target.src = News1)"
/>
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">
{{ news.newsDate ? news.newsDate.slice(5) : "" }} - {{ news.newsOrg }}
</div>
</div>
<div class="right-footer">{{ news.newsContent }}</div>
<!-- <CommonPrompt :content="news.newsContent">
<div class="right-footer">{{ news.newsContent }}</div>
</CommonPrompt> --
</div>
</div>
</div>
</div> -->
<NewsList :list="newsList.slice(0, 5)" />
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleClcikToCharacter" name="personName" content="remarks" source="orgName" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
......@@ -276,17 +300,10 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClcikToCharacter(item.personId, item.personName)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.personImage ? item.personImage : defaultIcon01"
:name="item.personName"
:time="item.time"
:source="item.orgName"
:content="item.remarks"
/>
<MessageBubble v-for="(item, index) in messageList"
@click="handleClcikToCharacter(item.personId, item.personName)" @info-click="handleMediaClick(item)"
:key="index" :avatar="item.personImage ? item.personImage : defaultIcon01" :name="item.personName"
:time="item.time" :source="item.orgName" :content="item.remarks" />
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClcikToCharacter(item.personId, item.personName)">
......@@ -304,9 +321,9 @@
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> -->
</div>
</div> --
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -324,32 +341,19 @@
</div>
<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<div class="box5-select">
<el-select
v-model="box5Select"
placeholder="选择领域"
@change="handleBox5Change"
style="width: 150px"
>
<el-select v-model="box5Select" placeholder="选择领域" @change="handleBox5Change" style="width: 150px">
<el-option label="全部领域" value="全部领域" />
<el-option
v-for="item in categoryList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</div>
</div>
<div
class="box5-main"
:style="{
<div class="box5-main" :style="{
display: !box5HasData ? 'flex' : 'block',
justifyContent: 'center',
alignItems: 'center'
}"
>
}">
<el-empty v-if="!box5HasData" description="暂无数据" :image-size="100" />
<div v-else id="box5Chart" style="width: 100%; height: 100%"></div>
</div>
......@@ -385,12 +389,7 @@
</div> -->
<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box7YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -404,14 +403,11 @@
/>
</el-select>
</div> -->
<div
class="box7-main"
:style="{
<div class="box7-main" :style="{
display: !box7HasData ? 'flex' : 'block',
justifyContent: 'center',
alignItems: 'center'
}"
>
}">
<el-empty v-if="!box7HasData" description="暂无数据" :image-size="100" />
<div v-else id="box7Chart" style="width: 100%; height: 100%"></div>
</div>
......@@ -430,12 +426,7 @@
</div> -->
<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -449,22 +440,14 @@
/>
</el-select>
</div> -->
<div
class="box8-main"
:style="{
<div class="box8-main" :style="{
display: box8Data.length === 0 ? 'flex' : 'block',
justifyContent: 'center',
alignItems: 'center'
}"
>
}">
<el-empty v-if="box8Data.length === 0" description="暂无数据" :image-size="100" />
<div
v-else
class="box8-main-item"
v-for="(item, index) in box8Data"
:key="index"
@click="handleClcikToCharacter(item.memberId, item.name)"
>
<div v-else class="box8-main-item" v-for="(item, index) in box8Data" :key="index"
@click="handleClcikToCharacter(item.memberId, item.name)">
<div class="box8-main-item-left">
<img :src="getProxyUrl(item.img)" alt="" referrerpolicy="no-referrer" class="left-img" />
<div class="left-icon1">
......@@ -498,12 +481,7 @@
</div> -->
<!-- <div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div> -->
<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box9YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box9YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -517,14 +495,11 @@
/>
</el-select>
</div> -->
<div
class="box9-main"
:style="{
<div class="box9-main" :style="{
display: !box9HasData ? 'flex' : 'block',
justifyContent: 'center',
alignItems: 'center'
}"
>
}">
<el-empty v-if="!box9HasData" description="暂无数据" :image-size="100" />
<div v-else id="box9Chart" style="width: 100%; height: 100%"></div>
</div>
......@@ -536,13 +511,8 @@
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeTabName === cate.name, disabled: index !== 0 }"
v-for="(cate, index) in tabList"
:key="index"
@click="index === 0 && handleClickTab(cate)"
>
<div class="btn" :class="{ btnActive: activeTabName === cate.name, disabled: index !== 0 }"
v-for="(cate, index) in tabList" :key="index" @click="index === 0 && handleClickTab(cate)">
{{ cate.name }}
</div>
</div>
......@@ -557,12 +527,8 @@
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activeAreaList" @change="handleAreaChange">
<el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
<el-checkbox
v-for="(area, index) in cateKuList"
:key="index"
:label="area.id"
class="filter-checkbox"
>
<el-checkbox v-for="(area, index) in cateKuList" :key="index" :label="area.id"
class="filter-checkbox">
{{ area.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -575,12 +541,7 @@
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activeDpList" @change="handleDpChange">
<el-checkbox
v-for="(dp, index) in dpList"
:key="index"
:label="dp.id"
class="filter-checkbox"
>
<el-checkbox v-for="(dp, index) in dpList" :key="index" :label="dp.id" class="filter-checkbox">
{{ dp.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -593,12 +554,7 @@
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activeYyList" @change="handleYyChange">
<el-checkbox
v-for="(yy, index) in yyList"
:key="index"
:label="yy.id"
class="filter-checkbox"
>
<el-checkbox v-for="(yy, index) in yyList" :key="index" :label="yy.id" class="filter-checkbox">
{{ yy.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -612,12 +568,7 @@
</div>
<div class="select-main">
<el-checkbox-group class="checkbox-group" v-model="activePubTime" @change="handlePubTimeChange">
<el-checkbox
v-for="(time, index) in pubTime"
:key="index"
:label="time.id"
class="filter-checkbox"
>
<el-checkbox v-for="(time, index) in pubTime" :key="index" :label="time.id" class="filter-checkbox">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -627,53 +578,28 @@
<div class="right">
<div class="right-header">
<div class="right-header-box">
<el-select
v-model="footerSelect1"
placeholder="选择委员会"
style="width: 240px"
@change="handleFooterSelect1Change"
>
<el-option
v-for="item in postOrgList"
:key="item.departmentId"
:label="item.departmentName"
:value="item.departmentId"
/>
<el-select v-model="footerSelect1" placeholder="选择委员会" style="width: 240px"
@change="handleFooterSelect1Change">
<el-option v-for="item in postOrgList" :key="item.departmentId" :label="item.departmentName"
:value="item.departmentId" />
</el-select>
</div>
<div class="right-header-box">
<el-select
v-model="footerSelect2"
placeholder="选择提出议员"
style="width: 240px"
@change="handleFooterSelect2Change"
>
<el-option
v-for="item in postMemberList"
:key="item.memberId"
:label="item.memberName"
:value="item.memberId"
/>
<el-select v-model="footerSelect2" placeholder="选择提出议员" style="width: 240px"
@change="handleFooterSelect2Change">
<el-option v-for="item in postMemberList" :key="item.memberId" :label="item.memberName"
:value="item.memberId" />
</el-select>
</div>
<div class="right-header-box" style="margin-left: auto">
<el-select
v-model="releaseTime"
placeholder="选择排序方式"
style="width: 120px"
@change="handlePxChange"
>
<el-select v-model="releaseTime" placeholder="选择排序方式" style="width: 120px" @change="handlePxChange">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
<img :src="desc" style="width: 14px; height: 14px" />
</div>
</template>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
......@@ -709,12 +635,8 @@
<div class="item">
<div class="item-left">{{ "法案进展：" }}</div>
<div class="item-right2">
<div
class="tag"
v-for="(val, idx) in [...item.progress].reverse()"
:key="idx"
:style="{ zIndex: item.progress.length - idx }"
>
<div class="tag" v-for="(val, idx) in [...item.progress].reverse()" :key="idx"
:style="{ zIndex: item.progress.length - idx }">
{{ val }}
</div>
</div>
......@@ -726,14 +648,8 @@
{{ `共 ${total} 项` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:page-size="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="total"
/>
<el-pagination @current-change="handleCurrentChange" :page-size="pageSize" :current-page="currentPage"
background layout="prev, pager, next" :total="total" />
</div>
</div>
</div>
......@@ -745,6 +661,7 @@
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref, computed, onUnmounted, nextTick, watch } from "vue";
import router from "@/router/index";
import setChart from "@/utils/setChart";
......@@ -769,7 +686,7 @@ import {
import { getPersonSummaryInfo } from "@/api/common/index";
import DivideHeader from "@/components/DivideHeader.vue";
import CommonPrompt from "../commonPrompt/index.vue";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -878,7 +795,7 @@ const handleClcikToCharacter = async (id, name) => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) {}
} catch (error) { }
};
const currentPage = ref(1);
......@@ -1034,7 +951,7 @@ const handleGetHylyList = async () => {
console.log("行业领域列表", res);
categoryList.value = res.data;
cateKuList.value = res.data;
} catch (error) {}
} catch (error) { }
};
// 新闻资讯
const newsList = ref([]);
......@@ -1064,7 +981,7 @@ const handleGetBillRiskSignal = async () => {
if (res.code === 200) {
warningList.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
// 获取新闻资讯
......@@ -1076,9 +993,15 @@ const handleGetNews = async () => {
const res = await getNews(params);
console.log("新闻资讯", res);
if (res.code === 200) {
newsList.value = res.data||[];
newsList.value = res.data || [].map(item => {
return {
...item,
from: `${item.newsOrg} · ${item.newsDate ? item.newsDate.slice(5) : ""}`,
};
});
}
} catch (error) {}
} catch (error) { }
};
// 获取社交媒体
......@@ -1090,9 +1013,15 @@ const handleGetRemarks = async () => {
const res = await getRemarks(params);
console.log("社交媒体", res);
if (res.code === 200) {
messageList.value = res.data;
messageList.value = res.data.map(item => {
return {
...item,
time: item.time.replace("T", " ")
};
});
}
} catch (error) {}
} catch (error) { }
};
// 获取提出部门列表
......@@ -1105,7 +1034,7 @@ const handleGetPostOrgList = async () => {
const list = res.data.filter(item => item.departmentId);
postOrgList.value = [{ departmentName: "全部委员会", departmentId: "全部委员会" }, ...list];
}
} catch (error) {}
} catch (error) { }
};
// 获取提出议员列表
......@@ -1118,7 +1047,7 @@ const handleGetPostMemberList = async () => {
const list = res.data.filter(item => item.memberId);
postMemberList.value = [{ memberName: "全部提出议员", memberId: "全部提出议员" }, ...list];
}
} catch (error) {}
} catch (error) { }
};
// 获取资源库
......@@ -1386,7 +1315,16 @@ const handleBox7Data = async () => {
watch(box7selectetedTime, () => {
handleBox7Data();
});
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
// 关键条款
const wordCloudData = ref([]);
const handleGetKeyTK = async () => {
......@@ -1722,11 +1660,13 @@ onUnmounted(() => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
width: 100%;
height: 100%;
position: relative;
overflow-y: hidden;
.search-header {
width: 100%;
// height: 144px;
......@@ -1734,11 +1674,13 @@ onUnmounted(() => {
// overflow: hidden;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
.search-header-container {
width: 1600px;
margin: 0 auto;
padding: 16px 0px 16px 0px;
}
.home-main-header-center {
// margin-top: 20px;
// margin-left: 200px;
......@@ -1751,9 +1693,11 @@ onUnmounted(() => {
box-sizing: border-box;
padding: 1px;
position: relative;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -1766,14 +1710,17 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -1785,11 +1732,13 @@ onUnmounted(() => {
}
}
}
.home-main-header-btn-box {
margin-top: 16px;
// margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex;
align-items: center;
......@@ -1802,9 +1751,11 @@ onUnmounted(() => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -1815,12 +1766,14 @@ onUnmounted(() => {
margin-left: 24px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 10px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1829,9 +1782,11 @@ onUnmounted(() => {
}
}
}
.scrollHomeBox {
height: calc(100% - 144px);
}
.home-top-bg {
background:
url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
......@@ -1842,6 +1797,7 @@ onUnmounted(() => {
z-index: -100;
top: -64px;
}
.home-box {
position: relative;
width: 100%;
......@@ -1849,6 +1805,7 @@ onUnmounted(() => {
// background: url("./assets/images/background.png"),linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%,rgba(246, 251, 255, 0) 100%);
// background-size: 100% 100%;
overflow-y: auto;
.home-header {
height: 64px;
background: url("./assets/images/header-bg.png");
......@@ -1857,14 +1814,17 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
}
.home-main {
width: 1600px;
margin: 0 auto;
margin-top: 48px;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-center {
width: 960px;
height: 48px;
......@@ -1875,9 +1835,11 @@ onUnmounted(() => {
padding: 1px;
position: relative;
border: 1px solid rgba(255, 255, 255, 1);
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -1890,14 +1852,17 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -1909,6 +1874,7 @@ onUnmounted(() => {
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 960px;
......@@ -1917,9 +1883,11 @@ onUnmounted(() => {
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -1928,6 +1896,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -1939,12 +1908,14 @@ onUnmounted(() => {
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
......@@ -1957,9 +1928,11 @@ onUnmounted(() => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -1970,12 +1943,14 @@ onUnmounted(() => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1984,16 +1959,20 @@ onUnmounted(() => {
}
}
}
.divide1 {
margin-top: 64px;
margin-bottom: 36px;
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
......@@ -2002,6 +1981,7 @@ onUnmounted(() => {
background: #fff;
box-sizing: border-box;
position: relative;
.box1-left {
position: absolute;
left: 0;
......@@ -2013,15 +1993,18 @@ onUnmounted(() => {
align-items: center;
cursor: pointer;
z-index: 10;
.icon {
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-right {
position: absolute;
right: 0;
......@@ -2033,15 +2016,18 @@ onUnmounted(() => {
align-items: center;
cursor: pointer;
z-index: 10;
.icon {
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2049,17 +2035,21 @@ onUnmounted(() => {
justify-content: space-between;
box-sizing: border-box;
padding: 0 40px 0 21px;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 112px;
height: 48px;
......@@ -2073,6 +2063,7 @@ onUnmounted(() => {
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
......@@ -2084,15 +2075,18 @@ onUnmounted(() => {
cursor: pointer;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
box-sizing: border-box;
padding-left: 31px;
.box1-main-left {
margin-left: 39px;
width: 484px;
.box1-main-left-title {
color: rgba(20, 89, 187, 1);
font-family: "Microsoft YaHei";
......@@ -2101,16 +2095,20 @@ onUnmounted(() => {
line-height: 22px;
margin-bottom: 14px;
}
.box1-main-left-info {
margin-top: 17px;
display: flex;
gap: 8px;
}
.box1-main-left-info1 {
margin-top: 25px;
margin-left: 4px;
.info1-box {
display: flex;
.icon {
margin-top: 15px;
width: 4px;
......@@ -2118,6 +2116,7 @@ onUnmounted(() => {
border-radius: 2px;
background: rgba(132, 136, 142, 1);
}
.info1-box-left {
margin-left: 18px;
width: 100px;
......@@ -2128,6 +2127,7 @@ onUnmounted(() => {
font-weight: 400;
line-height: 30px;
}
.info1-box-right {
margin-left: 40px;
height: 30px;
......@@ -2139,11 +2139,13 @@ onUnmounted(() => {
}
}
}
.box1-main-left-info2 {
margin-top: 21px;
height: 200px;
width: 440px;
position: relative;
.time-line {
position: absolute;
z-index: 0;
......@@ -2152,6 +2154,7 @@ onUnmounted(() => {
width: 2px;
background: #e6e7e8;
}
.info2-item {
margin-left: 1px;
margin-bottom: 8px;
......@@ -2159,6 +2162,7 @@ onUnmounted(() => {
display: flex;
// background: orange;
position: relative;
.time-line {
position: absolute;
left: 4px;
......@@ -2167,24 +2171,29 @@ onUnmounted(() => {
background: #e6e7e8;
height: 34px;
}
.item-icon {
margin-top: 8px;
width: 10px;
height: 10px;
position: relative;
z-index: 1;
img {
width: 10px;
height: 10px;
}
}
.itemTimeActive {
color: rgba(20, 89, 187, 1) !important;
}
.itemTitleActive {
font-weight: 700 !important;
color: rgba(20, 89, 187, 1) !important;
}
.item-time {
margin-left: 15px;
width: 147px;
......@@ -2195,6 +2204,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 30px;
}
.item-title {
margin-left: 10px;
width: 320px;
......@@ -2211,16 +2221,19 @@ onUnmounted(() => {
}
}
}
.box1-main-right {
height: 354px;
width: 458px;
border-radius: 4px;
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
}
.inner-box {
width: 100%;
height: 93px;
......@@ -2230,9 +2243,11 @@ onUnmounted(() => {
bottom: 0;
box-sizing: border-box;
padding: 9px 10px 12px 10px;
.inner-box-header {
height: 30px;
display: flex;
.inner-box-title {
flex: 9;
color: rgba(255, 255, 255, 1);
......@@ -2244,6 +2259,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.inner-box-time {
flex: 2;
height: 30px;
......@@ -2257,6 +2273,7 @@ onUnmounted(() => {
white-space: nowrap;
}
}
.inner-box-content {
width: 100%;
height: 40px;
......@@ -2271,6 +2288,7 @@ onUnmounted(() => {
}
}
}
.box2 {
width: 520px;
height: 450px;
......@@ -2278,28 +2296,33 @@ onUnmounted(() => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 48px;
display: flex;
box-sizing: border-box;
padding-right: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-left: 18px;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
display: flex;
.text {
margin-left: 16px;
height: 22px;
......@@ -2309,6 +2332,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 48px;
}
.num {
width: 24px;
height: 20px;
......@@ -2325,29 +2349,35 @@ onUnmounted(() => {
}
}
}
.box2-main {
height: 330px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
padding-right: 20px;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important;
background: rgba(255, 241, 240) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
......@@ -2364,12 +2394,14 @@ onUnmounted(() => {
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 315px;
color: rgba(59, 65, 75, 1);
......@@ -2381,6 +2413,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 88px;
margin-left: 5px;
......@@ -2397,6 +2430,7 @@ onUnmounted(() => {
}
}
}
.box2-footer {
position: absolute;
left: 30px;
......@@ -2410,14 +2444,17 @@ onUnmounted(() => {
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);
......@@ -2429,20 +2466,24 @@ onUnmounted(() => {
}
}
}
.divide2 {
margin-top: 68px;
margin-bottom: 36px;
}
.center-center {
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2451,17 +2492,21 @@ onUnmounted(() => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -2472,6 +2517,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 26px;
}
.more {
width: 49px;
height: 24px;
......@@ -2487,11 +2533,13 @@ onUnmounted(() => {
}
}
}
.box3-main {
height: 402px;
overflow-y: hidden;
overflow-x: hidden;
padding-top: 6px;
.box3-item {
display: flex;
height: 77px;
......@@ -2499,30 +2547,37 @@ onUnmounted(() => {
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:last-child {
border-bottom: 0px;
}
&:hover {
background: var(--color-bg-hover);
}
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
margin-top: 16px;
width: 657px;
height: 24px;
display: flex;
justify-content: space-between;
.title {
width: 440px;
height: 24px;
......@@ -2535,6 +2590,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
......@@ -2547,6 +2603,7 @@ onUnmounted(() => {
overflow: hidden;
}
}
.right-footer {
width: 657px;
height: 24px;
......@@ -2563,6 +2620,7 @@ onUnmounted(() => {
}
}
}
.box4 {
margin-left: 20px;
width: 792px;
......@@ -2570,6 +2628,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
......@@ -2578,15 +2637,18 @@ onUnmounted(() => {
box-sizing: border-box;
padding-left: 22px;
position: relative;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 11px;
margin-left: 18px;
......@@ -2597,6 +2659,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 26px;
}
.more {
width: 49px;
height: 24px;
......@@ -2611,6 +2674,7 @@ onUnmounted(() => {
cursor: pointer;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
......@@ -2672,14 +2736,17 @@ onUnmounted(() => {
}
}
}
.divide3 {
margin-top: 64px;
margin-bottom: 36px;
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
.box5 {
width: 1059px;
height: 450px;
......@@ -2687,6 +2754,7 @@ onUnmounted(() => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2694,17 +2762,21 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -2716,21 +2788,25 @@ onUnmounted(() => {
line-height: 26px;
}
}
.box5-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -2740,11 +2816,13 @@ onUnmounted(() => {
}
}
}
.box5-main {
height: 397px;
padding: 8px 16px 8px 16px;
}
}
.box6 {
margin-left: 20px;
width: 521px;
......@@ -2752,6 +2830,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 53px;
......@@ -2759,15 +2838,18 @@ onUnmounted(() => {
display: flex;
box-sizing: border-box;
padding-left: 22px;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 11px;
margin-left: 18px;
......@@ -2778,6 +2860,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 26px;
}
.box6-header-right {
margin-left: 130px;
display: flex;
......@@ -2785,15 +2868,18 @@ onUnmounted(() => {
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -2803,16 +2889,19 @@ onUnmounted(() => {
}
}
}
.box6-main {
width: 100%;
height: calc(100% - 53px);
}
}
}
.center-footer1 {
display: flex;
gap: 16px;
margin-top: 16px;
.box7 {
width: 520px;
height: 450px;
......@@ -2821,6 +2910,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2828,17 +2918,21 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -2850,21 +2944,25 @@ onUnmounted(() => {
line-height: 26px;
}
}
.box7-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -2874,6 +2972,7 @@ onUnmounted(() => {
}
}
}
.box-center {
height: 45px;
padding-right: 20px;
......@@ -2881,10 +2980,12 @@ onUnmounted(() => {
align-items: center;
justify-content: flex-end;
}
.box7-main {
height: 390px;
}
}
.box8 {
width: 527px;
height: 450px;
......@@ -2893,6 +2994,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2900,17 +3002,21 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -2922,21 +3028,25 @@ onUnmounted(() => {
line-height: 26px;
}
}
.box8-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -2946,10 +3056,12 @@ onUnmounted(() => {
}
}
}
.box8-main {
height: 380px;
overflow: hidden;
padding: 20px;
.box8-main-item {
// margin: 0 auto;
width: 478px;
......@@ -2960,18 +3072,22 @@ onUnmounted(() => {
position: relative;
// padding: 0 10px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.box8-main-item-left {
position: relative;
width: 42px;
height: 42px;
.left-img {
width: 42px;
height: 42px;
border-radius: 50%;
}
.left-icon1 {
position: absolute;
left: 2px;
......@@ -2982,11 +3098,13 @@ onUnmounted(() => {
background: (255, 255, 255, 0.8);
box-sizing: border-box;
padding: 2px;
img {
width: 100%;
height: 100%;
}
}
.left-icon2 {
position: absolute;
right: 2px;
......@@ -2997,15 +3115,18 @@ onUnmounted(() => {
background: (255, 255, 255, 0.8);
box-sizing: border-box;
padding: 2px;
img {
width: 100%;
height: 100%;
}
}
}
.box8-main-item-center {
height: 48px;
margin-left: 12px;
.box8-main-item-center-top {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -3014,6 +3135,7 @@ onUnmounted(() => {
font-weight: 700;
line-height: 24px;
}
.box8-main-item-center-footer {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -3023,6 +3145,7 @@ onUnmounted(() => {
line-height: 24px;
}
}
.box8-main-item-right {
position: absolute;
top: 0;
......@@ -3038,6 +3161,7 @@ onUnmounted(() => {
}
}
}
.box9 {
width: 521px;
height: 450px;
......@@ -3046,6 +3170,7 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box9-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -3053,17 +3178,21 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
padding: 0 27px 0 22px;
.box9-header-left {
display: flex;
.box9-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box9-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -3075,21 +3204,25 @@ onUnmounted(() => {
line-height: 26px;
}
}
.box9-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -3099,6 +3232,7 @@ onUnmounted(() => {
}
}
}
.box-center {
height: 45px;
padding-right: 20px;
......@@ -3106,6 +3240,7 @@ onUnmounted(() => {
align-items: center;
justify-content: flex-end;
}
.box9-main {
height: 380px;
padding: 10px 20px;
......@@ -3114,6 +3249,7 @@ onUnmounted(() => {
}
}
}
.home-main-footer {
width: 100%;
height: 1740px;
......@@ -3121,11 +3257,13 @@ onUnmounted(() => {
margin-bottom: 20px;
overflow: hidden;
margin-top: 36px;
.divide4 {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
.home-main-footer-header {
width: 1600px;
margin: 0 auto;
......@@ -3136,10 +3274,12 @@ onUnmounted(() => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
display: flex;
gap: 24px;
width: 1000px;
.btn {
height: 42px;
line-height: 42px;
......@@ -3152,33 +3292,40 @@ onUnmounted(() => {
// background: rgba(20, 89, 187, 0);
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
background: var(--color-main-active);
color: #fff;
font-weight: 700;
&:hover {
color: #fff;
background: var(--color-main-active);
}
}
.disabled {
cursor: not-allowed;
opacity: 0.5;
&:hover {
background: transparent;
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 1600px;
height: 1401px;
......@@ -3186,6 +3333,7 @@ onUnmounted(() => {
display: flex;
justify-content: space-between;
align-items: flex-start;
.left {
width: 300px;
// min-height: 784px;
......@@ -3195,11 +3343,14 @@ onUnmounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.select-box {
margin-top: 20px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
......@@ -3207,6 +3358,7 @@ onUnmounted(() => {
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
// height: 24px;
color: var(--color-main-active);
......@@ -3218,16 +3370,20 @@ onUnmounted(() => {
text-align: left;
}
}
.select-main {
margin-left: 25px;
margin-top: 16px;
.checkbox-group {
display: flex;
flex-wrap: wrap;
.filter-checkbox {
width: 50%;
margin-right: 0;
margin-bottom: 4px;
:deep(.el-checkbox__label) {
color: rgb(95, 101, 108);
font-size: 16px;
......@@ -3238,21 +3394,26 @@ onUnmounted(() => {
}
}
}
.select-main1 {
width: 100px;
}
}
}
.right {
margin-left: 20px;
width: 1280px;
.right-header {
height: 48px;
display: flex;
gap: 18px;
}
.right-main {
height: 1264px;
// overflow: hidden;
.right-main-box {
width: 1280px;
......@@ -3263,6 +3424,7 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 1);
margin-bottom: 16px;
overflow: hidden;
// overflow-y: auto;
// cursor: pointer;
.header {
......@@ -3271,6 +3433,7 @@ onUnmounted(() => {
margin: 0 auto;
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding-top: 19px;
.title {
cursor: pointer;
height: 26px;
......@@ -3285,6 +3448,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.en-title {
margin-top: 8px;
height: 24px;
......@@ -3300,14 +3464,17 @@ onUnmounted(() => {
white-space: nowrap;
}
}
.main {
width: 1200px;
margin: 0 auto;
margin-top: 2px;
.item {
margin-top: 12px;
// height: 24px;
display: flex;
.item-left {
width: 100px;
// height: 24px;
......@@ -3319,6 +3486,7 @@ onUnmounted(() => {
letter-spacing: 1px;
text-align: left;
}
.item-right {
max-width: 1000px;
margin-left: 10px;
......@@ -3330,10 +3498,12 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: left;
}
.item-right1 {
margin-left: 10px;
display: flex;
gap: 8px;
.tag {
height: 24px;
line-height: 24px;
......@@ -3346,10 +3516,12 @@ onUnmounted(() => {
font-weight: 400;
}
}
.item-right2 {
margin-left: 10px;
display: flex;
align-items: center;
.tag {
height: 24px;
line-height: 22px;
......@@ -3417,12 +3589,14 @@ onUnmounted(() => {
}
}
}
.right-footer {
height: 85px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-top: 12px;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: "Microsoft YaHei";
......@@ -3433,6 +3607,7 @@ onUnmounted(() => {
}
}
}
.home-main-footer-footer {
width: 1600px;
margin: 0 auto;
......@@ -3440,6 +3615,7 @@ onUnmounted(() => {
margin-top: 30px;
display: flex;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: "Microsoft YaHei";
......@@ -3456,6 +3632,7 @@ onUnmounted(() => {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......
src/views/coopRestriction/components/askPage/index.vue
浏览文件 @ 0ad9f2da
<template>
<div class="ask-page">
<div class="left">
<NewsList :list="leftList" :errImg="defaultNews"/>
<!-- <div class="left-title">
<!-- <div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div>
</div>
<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">
<div class="item-content">
<div class="title">
......@@ -26,15 +23,20 @@
<div class="time">{{ item.time }}</div>
</div>
</div>
</div> -->
</div>
<div class="right">
</div> -->
<NewsList :newsList="leftList" @item-click="handleToNewsDetail" @more-click="handleToMoreNews" img="image"
title="title" content="content" from="from" />
<MessageBubble :messageList="rightList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleToSocialDetail" name="name" content="content" source="orgName" image-url="image" />
<!-- <div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
</div>
<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">
<div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }">
<div class="cl1">{{ item.name }}</div>
......@@ -43,11 +45,13 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script setup>
import MessageBubble from "@/components/dialog/dialog.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import { ref, onMounted } from "vue";
import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
......@@ -74,12 +78,13 @@ const getCoopRestrictionSocialData = async () => {
const d = date.getDate().toString().padStart(2, '0');
const hh = date.getHours().toString().padStart(2, '0');
const mm = date.getMinutes().toString().padStart(2, '0');
const formattedTime = `${y}-${m}-${d} ${hh}:${mm} · 发布于${item.orgName}`;
const formattedTime = `${y}-${m}-${d} ${hh}:${mm} `;
return {
id: item.personId,
name: item.personName,
content: item.remarks,
time: formattedTime,
orgName: item.orgName,
image: item.personImage
}
});
......@@ -95,14 +100,14 @@ const getCoopRestrictionNewsData = async () => {
try {
const res = await getCoopRestrictionNews({ moduleId: "0106" });
if (res && res.code === 200) {
leftList.value = res.data || []
// leftList.value = (res.data || []).map(item => ({
// id: item.newsId,
// title: item.newsTitle,
// content: item.newsContent,
// time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
// image: item.newsImage
// }));
leftList.value = (res.data || []).map(item => ({
id: item.newsId,
title: item.newsTitle,
content: item.newsContent,
time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
image: item.newsImage,
from: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
}));
}
} catch (error) {
console.error("获取合作限制新闻资讯数据失败:", error);
......@@ -159,11 +164,13 @@ onMounted(() => {
margin: 0;
padding: 0;
}
.ask-page {
width: 1600px;
height: 450px;
display: flex;
justify-content: space-between;
.left {
width: 792px;
height: 450px;
......@@ -172,11 +179,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -184,6 +193,7 @@ onMounted(() => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
......@@ -195,6 +205,7 @@ onMounted(() => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
......@@ -209,29 +220,35 @@ onMounted(() => {
cursor: pointer;
}
}
.left-main {
width: 792px;
height: 402px;
padding: 20px 22px 21px 21px;
.main-item {
width: 749px;
height: 64px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
&:hover {
background-color: #f9f9f9;
}
img {
width: 72px;
height: 48px;
margin-right: 20px;
cursor: pointer;
}
.item-content {
width: 657px;
height: 50px;
position: relative;
.title {
width: 480px;
font-size: 16px;
......@@ -244,6 +261,7 @@ onMounted(() => {
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
width: 100%;
font-size: 16px;
......@@ -256,6 +274,7 @@ onMounted(() => {
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
position: absolute;
top: 0px;
......@@ -271,6 +290,7 @@ onMounted(() => {
}
}
}
.right {
width: 792px;
height: 450px;
......@@ -278,11 +298,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -290,6 +312,7 @@ onMounted(() => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
......@@ -301,6 +324,7 @@ onMounted(() => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
......@@ -315,28 +339,33 @@ onMounted(() => {
cursor: pointer;
}
}
.right-main {
width: 792px;
height: 402px;
padding: 23px 30px 25px 21px;
overflow: auto;
.social-item {
width: 740px;
margin-bottom: 16px;
display: flex;
cursor: pointer;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
border-radius: 50%;
}
.social-item-main {
width: 695.6px;
padding: 11px 14px 12px 22.5px;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
......@@ -345,6 +374,7 @@ onMounted(() => {
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
......@@ -352,6 +382,7 @@ onMounted(() => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
......
src/views/coopRestriction/components/dataNew/index.vue
浏览文件 @ 0ad9f2da
......@@ -9,16 +9,8 @@
<div class="more" @click="handleClickToDetail">查看详情 ></div>
</div>
<el-carousel
ref="carouselRef"
height="412px"
direction="horizontal"
:autoplay="true"
:interval="5000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel ref="carouselRef" 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">
<div class="carousel-item-content">
<div class="left-center">
......@@ -42,14 +34,9 @@
<li>
<span class="ul-title">涉及领域：</span>
<div class="ul-tags" v-if="item.AREA">
<span
v-for="(field, fIndex) in typeof item.AREA === 'string'
<span v-for="(field, fIndex) in typeof item.AREA === 'string'
? item.AREA.split(',')
: item.AREA"
:key="fIndex"
class="ul-pie"
:class="'cl' + ((fIndex % 3) + 1)"
>
: item.AREA" :key="fIndex" class="ul-pie" :class="'cl' + ((fIndex % 3) + 1)">
{{ field }}
</span>
</div>
......@@ -92,7 +79,7 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="right">
<!-- <div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt="" />
<div class="right-top-title">
......@@ -102,10 +89,8 @@
</div>
<div style="margin: 6px 34px 0 23px">
<div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)">
<div
class="main-left"
:class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }"
>
<div class="main-left"
:class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }">
{{ item.title }}
</div>
<div class="item-right">
......@@ -122,11 +107,14 @@
<img src="./assets/btn.png" alt="" />
查看更多
</div>
</div>
</div> -->
<RiskSignal :list="riskSignals" @more-click="handleToMoreRiskSignal" postDate="time" name="content"
riskLevel="title" @item-click="handleClickToDetail" />
</div>
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { ref, onMounted, computed } from "vue";
import router from "@/router";
import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js";
......@@ -236,11 +224,13 @@ onMounted(() => {
margin: 0;
padding: 0;
}
.data-new {
width: 1600px;
height: 460px;
display: flex;
justify-content: space-between;
.left {
width: 1064px;
height: 460px;
......@@ -250,6 +240,7 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn {
width: 24px;
height: 48px;
......@@ -260,6 +251,7 @@ onMounted(() => {
z-index: 100;
pointer-events: auto;
}
.right-btn {
width: 24px;
height: 48px;
......@@ -270,11 +262,13 @@ onMounted(() => {
z-index: 100;
pointer-events: auto;
}
.left-top {
width: 100%;
height: 48px;
position: relative;
border-bottom: 1px solid rgb(234, 236, 238);
img {
width: 18px;
height: 18px;
......@@ -282,6 +276,7 @@ onMounted(() => {
top: 15px;
left: 23px;
}
.more {
position: absolute;
height: 48px;
......@@ -295,6 +290,7 @@ onMounted(() => {
cursor: pointer;
z-index: 101;
}
.left-top-title {
margin-left: 60px;
width: 152px;
......@@ -309,10 +305,12 @@ onMounted(() => {
padding: 11px 16px;
}
}
.carousel-item-content {
width: 100%;
height: 100%;
}
.left-center {
width: 967px;
height: 208px;
......@@ -320,15 +318,19 @@ onMounted(() => {
margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 148px;
height: 148px;
margin-right: 21px;
}
display: flex;
.left-center-main {
width: 439px;
height: 175px;
.left-center-main-title {
margin-left: 19px;
margin-bottom: 17px;
......@@ -337,17 +339,21 @@ onMounted(() => {
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
}
.left-center-main-ul {
width: 439px;
height: 132px;
ul {
list-style-position: inside;
li {
width: 100%;
min-height: 24px;
margin-bottom: 12px;
display: flex;
align-items: flex-start;
&::before {
content: "·";
font-size: 24px;
......@@ -356,6 +362,7 @@ onMounted(() => {
margin-right: 16px;
color: rgb(59, 65, 75);
}
.ul-title {
flex-shrink: 0;
width: 120px;
......@@ -365,6 +372,7 @@ onMounted(() => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.ul-content {
flex: 1;
color: rgb(59, 65, 75);
......@@ -373,12 +381,14 @@ onMounted(() => {
font-weight: 400;
line-height: 24px;
}
.ul-tags {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ul-pie {
display: inline-block;
box-sizing: border-box;
......@@ -389,16 +399,19 @@ onMounted(() => {
line-height: 18px;
white-space: nowrap;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.cl3 {
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
......@@ -408,6 +421,7 @@ onMounted(() => {
}
}
}
.left-center-title {
padding: 3px 8px 5px;
height: 32px;
......@@ -423,10 +437,13 @@ onMounted(() => {
top: -1px;
}
}
.left-bottom {
margin: 17px 0 0 62px;
ul {
list-style-position: inside;
.left-bottom-li {
font-size: 16px;
font-weight: 700;
......@@ -436,6 +453,7 @@ onMounted(() => {
margin-bottom: 10px;
display: flex;
align-items: center;
&::before {
content: "·";
font-size: 24px;
......@@ -446,6 +464,7 @@ onMounted(() => {
}
}
}
.left-bottom-content {
width: 943px;
margin-left: 22px;
......@@ -457,6 +476,7 @@ onMounted(() => {
}
}
}
.right {
width: 520px;
height: 460px;
......@@ -465,11 +485,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.right-top {
width: 520px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 21px;
height: 16.84px;
......@@ -477,6 +499,7 @@ onMounted(() => {
top: 15.1px;
left: 19.5px;
}
.right-top-title {
padding: 11px 16px;
width: 148px;
......@@ -489,6 +512,7 @@ onMounted(() => {
text-align: center;
color: #fff;
margin-left: 60px;
span {
display: inline-block;
width: 24px;
......@@ -504,6 +528,7 @@ onMounted(() => {
}
}
}
.right-main {
width: 468px;
padding-right: 5px;
......@@ -512,9 +537,11 @@ onMounted(() => {
display: flex;
align-items: center;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-left {
width: 40px;
height: 40px;
......@@ -527,24 +554,29 @@ onMounted(() => {
padding: 6px 4px;
text-align: center;
}
.cl4 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
}
.cl5 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.cl6 {
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.item-right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
.main-center {
flex: 1;
height: 30px;
......@@ -558,6 +590,7 @@ onMounted(() => {
white-space: nowrap;
text-overflow: ellipsis;
}
.main-right {
width: 100px;
height: 24px;
......@@ -571,6 +604,7 @@ onMounted(() => {
}
}
}
.right-mainbtn {
width: 460px;
height: 42px;
......@@ -584,11 +618,13 @@ onMounted(() => {
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 0ad9f2da
......@@ -13,13 +13,8 @@
</div> -->
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; margin-top: 48px; height: fit-content"
v-if="containerRef"
placeholder="搜索政令"
:containerRef="containerRef"
areaName="政令"
/>
<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="containerRef"
placeholder="搜索政令" :containerRef="containerRef" areaName="政令" />
<!-- <el-input v-model="searchDecreeText" @keyup.enter="handleSearch" style="width: 838px; height: 100%"
placeholder="搜索政令" />
<div class="search">
......@@ -111,14 +106,8 @@
{{ "查看详情 >" }}
</div>
</div>
<el-carousel
ref="carouselRef"
height="395px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
<div class="box1-main">
<div class="box1-main-left">
......@@ -135,16 +124,11 @@
{{ item.name }}
</div>
<div class="box1-main-right-info">
<div
class="tag"
:class="{
<div class="tag" :class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3
}"
v-for="(tag, index) in item.industryList"
:key="index"
>
}" v-for="(tag, index) in item.industryList" :key="index">
{{ tag.industryName }}
</div>
</div>
......@@ -167,7 +151,7 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="box2">
<!-- <div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
......@@ -207,13 +191,44 @@
</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div> -->
<RiskSignal :list="warningList" @item-click="handleClickToDetail" @more-click="handleToMoreRiskSignal">
</RiskSignal>
</div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<NewsList :list="newsList.slice(0, 5)"/>
<div class="box4">
<!-- <div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="@/assets/images/box-header-icon/news-icon.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.img ? news.img : DefaultIconNews" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.title }}</div>
<div class="time">{{ news.from }}</div>
</div>
<div class="right-footer">{{ news.content }}</div>
<!-- <el-popover effect="dark" :width="1000" :content="news.content" placement="top-start">
<template #reference>
<div class="right-footer">{{ news.content }}</div>
</template>
</el-popover> --
</div>
</div>
</div>
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="@/assets/images/box-header-icon/message-icon.png" alt="" />
......@@ -221,17 +236,7 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.img ? item.img : DefaultIcon1"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
......@@ -243,9 +248,11 @@
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div>
</div> --
</div>
</div> -->
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @info-click="handleGetMessage"
imageUrl="img" @more-click="handleToSocialDetail" />
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -258,18 +265,9 @@
<div class="box5-header-title">{{ "行政令发布频度" }}</div>
</div>
<div class="box5-selectbox">
<el-select
@change="handleBox5YearChange"
v-model="box5SelectedYear"
placeholder="选择时间"
style="width: 120px"
>
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select @change="handleBox5YearChange" v-model="box5SelectedYear" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -285,18 +283,9 @@
</div>
<div class="header-title">{{ "政令涉及领域" }}</div>
<div class="box6-selectbox">
<el-select
@change="handleBox6YearChange"
v-model="box6SelectedYear"
placeholder="选择时间"
style="width: 120px"
>
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select @change="handleBox6YearChange" v-model="box6SelectedYear" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -312,12 +301,7 @@
<div class="header-title">{{ "关键行政令" }}</div>
</div>
<div class="box7-main">
<div
class="box7-item"
v-for="(item, index) in keyDecreeList"
:key="index"
@click="handleKeyDecree(item)"
>
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)">
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
......@@ -373,15 +357,9 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="type in decreeTypeList"
:key="type.id"
v-model="checkedDecreeType"
:label="type.typeId"
style="width: 180px"
class="filter-checkbox"
@change="handleChangeCheckedDecreeType"
>
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType"
:label="type.typeId" style="width: 180px" class="filter-checkbox"
@change="handleChangeCheckedDecreeType">
{{ type.typeName }}
</el-checkbox>
</div>
......@@ -394,15 +372,8 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="cate in govInsList"
:key="cate.id"
v-model="checkedGovIns"
:label="cate.id"
style="width: 180px"
class="filter-checkbox"
@change="handleChangeCheckedGovIns"
>
<el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns" :label="cate.id"
style="width: 180px" class="filter-checkbox" @change="handleChangeCheckedGovIns">
{{ cate.name }}
</el-checkbox>
</div>
......@@ -415,15 +386,9 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="time in pubTime"
:key="time.id"
v-model="activePubTime"
:label="time.id"
style="width: 100px"
class="filter-checkbox"
@change="checked => handlePubTimeChange(time.id, checked)"
>
<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime" :label="time.id"
style="width: 100px" class="filter-checkbox"
@change="checked => handlePubTimeChange(time.id, checked)">
{{ time.name }}
</el-checkbox>
</div>
......@@ -436,14 +401,8 @@
</div>
<div class="select-main select-main1">
<div class="checkbox-group">
<el-checkbox
v-for="area in areaList"
:key="area.id"
v-model="activeAreaList"
:label="area.id"
style="width: 100px"
@change="checked => handleAreaChange(area.id, checked)"
>
<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList" :label="area.id"
style="width: 100px" @change="checked => handleAreaChange(area.id, checked)">
{{ area.name }}
</el-checkbox>
</div>
......@@ -458,12 +417,7 @@
<div class="title">{{ "政令库" }}</div>
</div>
<div class="content-box" v-show="decreeList">
<div
class="main-item"
v-for="(item, index) in decreeList"
:key="index"
@click="handleClickDecree(item)"
>
<div class="main-item" v-for="(item, index) in decreeList" :key="index" @click="handleClickDecree(item)">
<div class="main-item-left">
<div class="left-left">
{{ item.time.split("-")[0] }}<br />{{ item.time.split("-")[1] }}月{{
......@@ -505,14 +459,8 @@
{{ `共 ${totalDecreesNum} 项` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="10"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="totalDecreesNum"
/>
<el-pagination @current-change="handleCurrentChange" :pageSize="10" :current-page="currentPage"
background layout="prev, pager, next" :total="totalDecreesNum" />
</div>
</div>
</div>
......@@ -523,6 +471,7 @@
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router";
import HeaderMenu from "@/components/headerMenu.vue";
......@@ -539,9 +488,10 @@ import {
getDecreehylyList,
getDecreeTypeList
} from "@/api/decree/home";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { getPersonSummaryInfo } from "@/api/common/index";
import { getNews, getSocialMedia } from "@/api/general/index";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -589,6 +539,7 @@ import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
import { ElMessage } from "element-plus";
// 跳转行政机构主页
const handleToInstitution = item => {
window.sessionStorage.setItem("curTabName", item.name);
......@@ -624,7 +575,7 @@ const govInsList = ref([
]);
const checkedGovIns = ref([]);
const handleChangeCheckedGovIns = val => {};
const handleChangeCheckedGovIns = val => { };
const handleGetDepartmentList = async () => {
try {
......@@ -785,16 +736,16 @@ const handleGetNews = async () => {
const res = await getNews(params);
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data||[]
// newsList.value = res.data.map(item => {
// return {
// newsId: item.newsId,
// img: item.newsImage,
// title: item.newsTitle,
// content: item.newsContent,
// from: item.newsDate + " · " + item.newsOrg
// };
// });
// newsList.value = res.data || []
newsList.value = (res.data ?? []).map(item => {
return {
newsId: item.newsId,
img: item.newsImage,
title: item.newsTitle,
content: item.newsContent,
from: item.newsDate + " · " + item.newsOrg
};
});
}
} catch (error) {
console.error("新闻资讯error", error);
......@@ -846,7 +797,7 @@ const handleGetMessage = async () => {
remarksId: item.remarksId
};
});
} catch (error) {}
} catch (error) { }
};
handleGetMessage();
......@@ -904,7 +855,7 @@ const handleClickPerson = async item => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) {}
} catch (error) { }
};
// 行政令发布频度
......@@ -1058,7 +1009,7 @@ const handleGetKeyDecree = async () => {
};
});
}
} catch (error) {}
} catch (error) { }
};
handleGetKeyDecree();
......@@ -1159,9 +1110,18 @@ const handleGetDecreeTypeList = async () => {
if (res.code === 200 && res.data) {
decreeTypeList.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
const handleChangeCheckedDecreeType = () => {
handleGetDecreeOrderList();
};
......@@ -1236,7 +1196,7 @@ const handleGetAreaList = async () => {
// 获取列表后重新查询
handleGetDecreeOrderList();
}
} catch (error) {}
} catch (error) { }
};
const totalDecreesNum = ref(0);
......@@ -1851,11 +1811,16 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
-webkit-line-clamp: 2; /* 限制文本显示的行数 */
-webkit-box-orient: vertical; /* 设置弹性盒子的子元素垂直排列 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
display: -webkit-box;
/* 将元素设置为弹性盒模型 */
-webkit-line-clamp: 2;
/* 限制文本显示的行数 */
-webkit-box-orient: vertical;
/* 设置弹性盒子的子元素垂直排列 */
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 文本溢出时显示省略号 */
}
.box1-main-right-info {
......@@ -1908,9 +1873,12 @@ onMounted(async () => {
font-size: 16px;
font-weight: 400;
line-height: 30px;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
display: -webkit-box;
/* 将元素设置为弹性盒模型 */
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 文本溢出时显示省略号 */
}
.box1-main-right-footer {
......
src/views/exportControl/index.vue
浏览文件 @ 0ad9f2da
<template>
<div class="home-wrapper">
=======
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="searchExportControlText" @keyup.enter="handleSearch" style="width: 800px; height: 100%"
placeholder="搜索出口管制" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<!-- <div class="home-header" v-show="!isShow">
<div class="header-left">
<HeaderMenu></HeaderMenu>
......@@ -9,27 +50,14 @@
<headerInfo curTitleName="出口管制"></headerInfo>
</div>
</div> -->
<div class="home-main" ref="homeMainRef" >
<div class="home-main" ref="homeMainRef">
<div class="home-main-header">
<SearchContainer
style="margin-bottom: 0; margin-top: 48px; height: fit-content"
v-if="homeMainRef"
placeholder="搜索出口管制"
:containerRef="homeMainRef"
areaName="实体清单"
/>
<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="homeMainRef"
placeholder="搜索出口管制" :containerRef="homeMainRef" areaName="实体清单" />
<div class="home-main-header-footer-info">
<InfoCard
v-for="(item, index) in infoList"
:key="item.id"
:title="item.nameZh"
:subtitle="item.nameAbbr"
:description="item.description"
:quantity="item.postCount"
unit="次"
:color="infoListColor[index]"
@click="handleToEntityListNoId(item)"
/>
<InfoCard v-for="(item, index) in infoList" :key="item.id" :title="item.nameZh" :subtitle="item.nameAbbr"
:description="item.description" :quantity="item.postCount" unit="次" :color="infoListColor[index]"
@click="handleToEntityListNoId(item)" />
</div>
</div>
......@@ -55,15 +83,8 @@
<img src="./assets/images/box1-right.png" alt="" />
</div>
</div>
<el-carousel
ref="carouselRef"
height="370px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel ref="carouselRef" height="370px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none" @change="handleCarouselChange">
<el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index">
<div>
<div class="box1-top">
......@@ -81,11 +102,8 @@
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 涉及领域：</span>
<div
class="box1-top-content-item-tags"
v-for="(domainItem, index) in item.domains"
:key="index"
>
<div class="box1-top-content-item-tags" v-for="(domainItem, index) in item.domains"
:key="index">
<el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag>
</div>
</div>
......@@ -94,18 +112,10 @@
<div class="box1-bottom">
<div class="box1-bottom-title">· 涉及主要实体：</div>
<div class="box1-bottom-content">
<div
class="box1-bottom-content-item"
v-for="(ett, index) in item.sanEntities"
:key="index"
@click="handleEntityClick(ett)"
>
<el-image
v-if="ett.img"
class="box1-bottom-content-item-img"
:src="ett.img"
alt=""
></el-image>
<div class="box1-bottom-content-item" v-for="(ett, index) in item.sanEntities" :key="index"
@click="handleEntityClick(ett)">
<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img"
alt=""></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined">
{{
(ett.entityNameZh || ett.enName)?.match(
......@@ -136,7 +146,7 @@
</custom-container>
</el-col>
<el-col :span="8">
<custom-container
<!-- <custom-container
titleType="danger"
title="风险信号"
:headerNum="warningList.length"
......@@ -177,15 +187,19 @@
</div>
</div>
</template>
</custom-container>
</custom-container> -->
<RiskSignal :list="warningList" @item-click="handleToRiskSignalDetail" @more-click="handleToMoreRiskSignal"
riskLevel="signalLevel" postDate="signalTime" name="signalTitle" />
</el-col>
</el-row>
<el-row :gutter="15" style="width: 1600px; margin: 0 auto; height: 528px; margin-top: 64px">
<el-row :gutter="15" style="width: 1600px; margin: 0 auto; height: 50px; margin-top: 64px">
<CustomTitle id="position2" title="资讯要闻" />
<el-col :span="12">
<NewsList :list="newsList" :defaultImg="newsImg" />
<!-- <custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
</el-row>
<!-- <el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleToMoreNews">
{{ "更多 +" }}
......@@ -197,28 +211,29 @@
<NewsList :list-data="newsList" @item-click="item => handleNewsInfoClick(item)" />
</div>
</template>
</custom-container> -->
</el-col>
<el-col :span="12">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
</custom-container>
</el-col> -->
<div class="center-center">
<NewsList :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
content="newsContent" />
<MessageBubble :messageList="socialMediaList" @person-click="handlePerClick" imageUrl="avatar"
@more-click="handleToSocialDetail" />
<!-- <custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default>
<div class="dialog-list">
<MessageBubble
v-for="(item, index) in socialMediaList"
@click="handlePerClick(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.avatar"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<MessageBubble v-for="(item, index) in socialMediaList" @click="handlePerClick(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.avatar" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" />
</div>
</template>
</custom-container>
</el-col>
</el-row>
</custom-container> -->
</div>
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; height: 528px; margin-top: 64px">
<CustomTitle id="position3" title="数据总览" />
......@@ -234,19 +249,14 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="280" align="center">
<template #default="scope">
<div
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
......@@ -263,19 +273,14 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="280" align="center">
<template #default="scope">
<div
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag
}}</el-tag>
......@@ -292,11 +297,8 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
......@@ -348,13 +350,9 @@
<el-row :gutter="20" style="width: 1600px; margin: 0 auto; margin-top: 39px">
<CustomTitle id="position4" title="资源库" style="margin-top: 0px" />
<div class="resource-tabs">
<div
v-for="tab in resourceTabs"
:key="tab.value"
class="resource-tab-item"
<div v-for="tab in resourceTabs" :key="tab.value" class="resource-tab-item"
:class="{ active: activeResourceTab === tab.value, disabled: tab.disabled }"
@click="handleResourceTabClick(tab)"
>
@click="handleResourceTabClick(tab)">
{{ tab.label }}
</div>
</div>
......@@ -367,25 +365,15 @@
<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
<div class="box4-item-left">
<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
<div
class="box4-item-left-line"
v-if="idx + 1 != sanctionProcessList.length"
></div>
<div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
</div>
<div class="box4-item-right">
<div class="box4-item-right-header" @click="handleSanc(item)">
<span class="box4-item-right-header-title"
>{{ item.postDate }}—{{ item.title }}</span
>
<span class="box4-item-right-header-title">{{ item.postDate }}—{{ item.title }}</span>
<span class="box4-item-right-header-desc">{{ item.desc }}</span>
</div>
<el-tooltip
effect="dark"
:content="item.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper"
placement="top" :show-after="500">
<div class="box4-item-right-content">
{{ item.content }}
</div>
......@@ -393,12 +381,8 @@
</div>
</div>
</div>
<div
class="box4-footer"
:style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }"
>
<el-button type="primary" link @click="handleGetMore"
>查看更多
<div class="box4-footer" :style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }">
<el-button type="primary" link @click="handleGetMore">查看更多
<el-icon>
<DArrowRight />
</el-icon>
......@@ -415,15 +399,8 @@
</template>
<template #default>
<div class="box5">
<el-table
:data="entitiesList"
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table :data="entitiesList" class="sanction-table" stripe empty-text="暂无数据" height="700px"
header-row-class-name="table-header" row-class-name="table-row">
<!-- <el-table-column prop="index" label="序号" width="80" align="center">
<template #default="scope">
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
......@@ -433,12 +410,8 @@
<el-table-column prop="name" label="实体名称" min-width="200">
<template #default="scope">
<div class="tableName" @click="handleCompClick(scope.row)">
<el-image
v-if="scope.row.img"
class="box1-bottom-content-item-img"
:src="scope.row.img"
alt=""
></el-image>
<el-image v-if="scope.row.img" class="box1-bottom-content-item-img" :src="scope.row.img"
alt=""></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined">
{{
(scope.row.name || scope.row.enName)?.match(
......@@ -489,19 +462,13 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope">
<div class="num-item" v-if="scope.row.ruleOrgCount > 0">
<div
class="name-item"
:class="[
<div class="name-item" :class="[
'revenue-cell',
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
>
]">
{{ scope.row.ruleOrgList[0].orgName }}...等
</div>
<div
style="width: 50px; color: #409eff; cursor: pointer"
@click="handleOrgClick(scope.row)"
>
<div style="width: 50px; color: #409eff; cursor: pointer" @click="handleOrgClick(scope.row)">
{{ scope.row.ruleOrgCount }}家>
</div>
</div>
......@@ -513,15 +480,8 @@
<!-- <div class="pagination-info">
第{{ currentPage }}页，共{{ totalPages }}页
</div> -->
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
:pager-count="5"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
:pager-count="5" layout="prev, pager, next" background @current-change="handlePageChange" />
</div>
</div>
</template>
......@@ -587,14 +547,8 @@
</div>
<div class="right-footer">
<div class="total-count">共 {{ totalAll }} 项</div>
<el-pagination
v-model:current-page="currentPageAll"
:page-size="pageSizeAll"
:total="totalAll"
layout="prev, pager, next"
background
@current-change="handlePageChangeAll"
/>
<el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll"
layout="prev, pager, next" background @current-change="handlePageChangeAll" />
</div>
</div>
</div>
......@@ -629,12 +583,8 @@
</div>
</template>
</el-dialog> -->
<RuleSubsidiaryDialog
v-model="dialogVisible"
:company-name="currentRuleCompany"
:total-count="currentRuleCount"
:data-list="currentOrgList"
/>
<RuleSubsidiaryDialog v-model="dialogVisible" :company-name="currentRuleCompany" :total-count="currentRuleCount"
:data-list="currentOrgList" />
</div>
<el-dialog v-model="mediaVisible" title="社交媒体信息" width="500" :before-close="handleMediaClose">
<div class="dialog-content">
......@@ -650,6 +600,8 @@
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import HeaderMenu from "@/components/headerMenu.vue";
......@@ -672,10 +624,8 @@ import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
// import NewsList from "./components/news.vue";
import newsImg from "@/assets/images/news-img.png";
import MessageBubble from "./components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import CommonPrompt from "./commonPrompt/index.vue";
import RuleSubsidiaryDialog from "./components/RuleSubsidiaryDialog.vue";
import trumpAvatar from "@/assets/images/icon-trump.png";
......@@ -934,7 +884,16 @@ onMounted(async () => {
console.log(err);
}
});
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
// 获取趋势图数据
const fetchTrendData = async () => {
try {
......@@ -1301,7 +1260,7 @@ const fetchSanctionList = async () => {
});
totalAll.value = res.totalElements;
}
} catch (error) {}
} catch (error) { }
};
const handlePageChangeAll = val => {
......@@ -1503,11 +1462,10 @@ const fetchNewsInfo = async () => {
if (data && Array.isArray(data)) {
newsList.value = data.map(item => ({
...item,
avatar: item.newsImage,
time: formatTime(item.newsDate),
source: item.newsOrg,
description: item.newsContent,
title: item.newsTitle
img: item.newsImage,
title: item.newsTitle,
content: item.newsContent,
from: item.newsDate + (item.newsOrg ? " · " + item.newsOrg : "")
}));
}
} catch (err) {
......@@ -1543,11 +1501,11 @@ const handlePerClick = item => {
// };
// 添加格式化时间的方法
const formatTime = dateString => {
const date = new Date(dateString);
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${month}-${day}`;
const formatTime = timeStr => {
// 空值兜底，避免报错
if (!timeStr) return '暂无时间';
// 核心：替换T为空格
return timeStr.replace('T', ' ');
};
const warningList = ref([]);
......@@ -1574,7 +1532,7 @@ const handleGetHylyList = async () => {
hylymc: "全部分类"
};
categoryList.value = [obj, ...categoryList.value];
} catch (error) {}
} catch (error) { }
};
const chart1Data = ref({
......@@ -1835,12 +1793,14 @@ const handleMediaClick = item => {
height: 172px;
padding-top: 16px;
box-sizing: border-box;
&-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
margin-bottom: 15px;
}
&-content {
display: flex;
gap: 15px;
......@@ -2063,6 +2023,7 @@ const handleMediaClick = item => {
}
.box3-content {
// flex: 1;
.el-progress--line {
width: 82px;
......@@ -2070,94 +2031,94 @@ const handleMediaClick = item => {
}
}
.box4 {
height: 786px;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 16px;
// padding-bottom: 50px;
position: relative;
.box4-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding-bottom: 35px;
position: relative;
.box4-item-left {
display: flex;
flex-direction: column;
align-items: center;
.box4-item-left-icon {
width: 10px;
height: 10px;
}
.box4-item-left-line {
width: 1px;
height: 100%;
position: absolute;
border-left: 1px solid rgba(10, 87, 166, 0.3);
}
}
.box4-item-right {
display: flex;
flex-direction: column;
// .box4 {
// height: 786px;
// overflow: auto;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// padding-top: 16px;
// // padding-bottom: 50px;
// position: relative;
// .box4-item {
// display: flex;
// gap: 10px;
// align-items: flex-start;
// padding-bottom: 35px;
// position: relative;
// .box4-item-left {
// display: flex;
// flex-direction: column;
// align-items: center;
// .box4-item-left-icon {
// width: 10px;
// height: 10px;
// }
.box4-item-right-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
position: relative;
top: -7.5px;
padding-bottom: 8px;
cursor: pointer;
// .box4-item-left-line {
// width: 1px;
// height: 100%;
// position: absolute;
// border-left: 1px solid rgba(10, 87, 166, 0.3);
// }
// }
&-title {
font-size: 18px;
color: $base-color;
font-weight: 700;
}
// .box4-item-right {
// display: flex;
// flex-direction: column;
// .box4-item-right-header {
// display: flex;
// justify-content: space-between;
// align-items: center;
// border-bottom: 1px solid rgba(234, 236, 238, 1);
// position: relative;
// top: -7.5px;
// padding-bottom: 8px;
// cursor: pointer;
// &-title {
// font-size: 18px;
// color: $base-color;
// font-weight: 700;
// }
&-desc {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
}
// &-desc {
// font-size: 16px;
// font-weight: 700;
// color: rgba(59, 65, 75, 1);
// }
// }
.box4-item-right-content {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
line-height: 25px;
}
}
}
// .box4-item-right-content {
// font-size: 16px;
// font-weight: 400;
// color: rgba(95, 101, 108, 1);
// overflow: hidden;
// display: -webkit-box;
// -webkit-line-clamp: 3;
// -webkit-box-orient: vertical;
// text-overflow: ellipsis;
// line-height: 25px;
// }
// }
// }
.box4-footer {
position: absolute;
// margin-top: auto;
display: flex;
justify-content: center;
align-items: center;
bottom: 30px;
left: 50%;
margin-left: -30px;
// margin-bottom: 30px;
}
}
// .box4-footer {
// position: absolute;
// // margin-top: auto;
// display: flex;
// justify-content: center;
// align-items: center;
// bottom: 30px;
// left: 50%;
// margin-left: -30px;
// // margin-bottom: 30px;
// }
// }
.box5 {
height: 115%;
......@@ -2211,6 +2172,7 @@ const handleMediaClick = item => {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-center {
margin-top: 51px;
width: 960px;
......@@ -2809,6 +2771,7 @@ const handleMediaClick = item => {
// width: 100%;
// height: 911px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
margin-top: 37px;
margin-bottom: 36px;
......@@ -3323,12 +3286,14 @@ const handleMediaClick = item => {
}
}
}
.search-header {
width: 100%;
height: 144px;
background: #fff;
overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.3);
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
......@@ -3341,9 +3306,11 @@ const handleMediaClick = item => {
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -3356,14 +3323,17 @@ const handleMediaClick = item => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -3375,11 +3345,13 @@ const handleMediaClick = item => {
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex;
align-items: center;
......@@ -3392,9 +3364,11 @@ const handleMediaClick = item => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -3405,12 +3379,14 @@ const handleMediaClick = item => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -3419,7 +3395,30 @@ const handleMediaClick = item => {
}
}
}
.scroll-main {
height: calc(100% - 144px) !important;
}
.center-center {
width: 1600px;
margin: 0 auto;
margin-top: 21px;
height: 450px;
display: flex;
.center-center-news {
flex-shrink: 0;
}
.boxs4 {
margin-left: 20px;
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
}
}
</style>
src/views/finance/index.vue
浏览文件 @ 0ad9f2da
......@@ -11,13 +11,8 @@
<div class="home-main" ref="containerRef">
<div class="home-main-header">
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; height: fit-content"
v-if="containerRef"
placeholder="搜索投融资限制政策"
:containerRef="containerRef"
areaName=""
/>
<SearchContainer style="margin-bottom: 0; height: fit-content" v-if="containerRef" placeholder="搜索投融资限制政策"
:containerRef="containerRef" areaName="" />
<!-- <el-input
v-model="searchKey"
style="width: 100%; height: 48px"
......@@ -114,17 +109,9 @@
</div>
<div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 涉及领域：</span>
<div
class="box1-top-content-item-tags"
v-for="item in ['航空航天', '人工智能', '集成电路']"
:key="item"
>
<el-tag
:type="
item === '航空航天' ? 'primary' : item === '人工智能' ? 'danger' : 'info'
"
>{{ item }}</el-tag
>
<div class="box1-top-content-item-tags" v-for="item in ['航空航天', '人工智能', '集成电路']" :key="item">
<el-tag :type="item === '航空航天' ? 'primary' : item === '人工智能' ? 'danger' : 'info'
">{{ item }}</el-tag>
</div>
</div>
</div>
......@@ -140,7 +127,9 @@
</div>
<div class="box1-absolute">
<div class="box1-absolute-des">
<el-icon><Warning color="rgba(206, 79, 81, 1)" /></el-icon>
<el-icon>
<Warning color="rgba(206, 79, 81, 1)" />
</el-icon>
<span>新增中国实体</span>
</div>
<div class="box1-absolute-num">23家</div>
......@@ -150,7 +139,7 @@
</custom-container>
</el-col>
<el-col :span="8">
<custom-container titleType="danger" title="风险信号" :titleIcon="dangerIcon" height="450px">
<!-- <custom-container titleType="danger" title="风险信号" :titleIcon="dangerIcon" height="450px">
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
......@@ -178,15 +167,17 @@
</div>
</div>
</template>
</custom-container>
</custom-container> -->
<RiskSignal :list="warningList" @item-click="handleToRiskSignalDetail" @more-click="handleToMoreRiskSignal"
riskLevel="status" postDate="time" name="title" />
</el-col>
</el-row>
<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle id="position2" title="资讯要闻" style="margin-top: 64px" />
<el-col :span="12">
<NewsList :list="customNewsData" />
<!-- <custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
</el-row>
<!-- <el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleToMoreNews">
{{ "更多 +" }}
......@@ -198,9 +189,17 @@
<NewsList :list-data="customNewsData" />
</div>
</template>
</custom-container> -->
</el-col>
<el-col :span="12">
</custom-container>
</el-col> -->
<div class="center-center">
<div class="center-center-news">
<NewsList :newsList="customNewsData" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
from='from' content="description" title="title" img="image" />
</div>
<MessageBubble :messageList="messageList" @person-click="handlePerClick" imageUrl="avatar"
@more-click="handleToSocialDetail" />
<!-- <div class="boxs4">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default>
<div class="dialog-list">
......@@ -210,35 +209,21 @@
:time="customMessage.time"
:source="customMessage.source"
:content="customMessage.content"
/> -->
<MessageBubble
:avatar="trumpAvatar"
name="唐纳德·特朗普"
time="16:02"
source="发布于真实社交"
content="埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
/>
<MessageBubble
:avatar="elongAvatar"
name="埃隆·马斯克"
time="16:02"
source="发布于真实社交"
content="如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。"
/>
<MessageBubble
:avatar="elongAvatar"
name="埃隆·马斯克"
time="16:02"
source="发布于真实社交"
content="提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
/>
/> --
<MessageBubble :avatar="trumpAvatar" name="唐纳德·特朗普" time="16:02" source="发布于真实社交"
content="埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。" />
<MessageBubble :avatar="elongAvatar" name="埃隆·马斯克" time="16:02" source="发布于真实社交"
content="如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。" />
<MessageBubble :avatar="elongAvatar" name="埃隆·马斯克" time="16:02" source="发布于真实社交"
content="提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。" />
</div>
</template>
</custom-container>
</el-col>
</el-row>
</div> -->
</div>
<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle id="position3" title="数据总览" style="margin-top: 64px" />
......@@ -254,27 +239,18 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
:type="
tag === '通信网络'
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="tag === '通信网络'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
"
>{{ tag }}</el-tag
>
">{{ tag }}</el-tag>
</div>
</template>
</el-table-column>
......@@ -288,27 +264,18 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
:type="
tag === '通信网络'
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="tag === '通信网络'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
"
>{{ tag }}</el-tag
>
">{{ tag }}</el-tag>
</div>
</template>
</el-table-column>
......@@ -322,27 +289,18 @@
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress
:percentage="scope.row.percent * 100"
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
<el-progress :percentage="scope.row.percent * 100" :show-text="false"
:status="getStatus(scope.row.percent)" />
</div>
</template>
</el-table-column>
<el-table-column label="重点领域" width="180">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 5px">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
:type="
tag === '通信网络'
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="tag === '通信网络'
? 'primary'
: TAGTYPE[Math.floor(Math.random() * 5)]
"
>{{ tag }}</el-tag
>
">{{ tag }}</el-tag>
</div>
</template>
</el-table-column>
......@@ -399,9 +357,10 @@
</div>
</div>
<div class="box4-footer">
<el-button type="primary" link :icon="DownRight"
>查看更多
<el-icon><DArrowRight /></el-icon>
<el-button type="primary" link :icon="DownRight">查看更多
<el-icon>
<DArrowRight />
</el-icon>
</el-button>
</div>
</div>
......@@ -415,15 +374,8 @@
</template>
<template #default>
<div class="box5">
<el-table
:data="paginatedData"
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table :data="paginatedData" class="sanction-table" stripe empty-text="暂无数据" height="700px"
header-row-class-name="table-header" row-class-name="table-row">
<!-- <el-table-column prop="index" label="序号" width="80" align="center">
<template #default="scope">
{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
......@@ -432,14 +384,12 @@
<el-table-column prop="name" label="实体名称" min-width="200">
<template #default="scope">
<div
style="
<div style="
font-weight: 700;
font-size: 16px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
"
>
">
{{ scope.row.name }}
</div>
</template>
......@@ -448,12 +398,8 @@
<el-table-column prop="domains" label="涉及领域" min-width="180">
<template #default="scope">
<div class="domain-tags">
<el-tag
v-for="tag in scope.row.domains"
:key="tag"
:type="tag === '通信网络' ? 'primary' : 'danger'"
>{{ tag }}</el-tag
>
<el-tag v-for="tag in scope.row.domains" :key="tag"
:type="tag === '通信网络' ? 'primary' : 'danger'">{{ tag }}</el-tag>
</div>
</template>
</el-table-column>
......@@ -489,9 +435,7 @@
<el-table-column prop="revenue" label="50%规则子企业" width="140" align="right">
<template #default="scope">
<span
:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
>
<span :class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']">
{{ scope.row.revenue }}
</span>
</template>
......@@ -502,14 +446,8 @@
<!-- <div class="pagination-info">
第{{ currentPage }}页，共{{ totalPages }}页
</div> -->
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
:pager-count="5"
layout="prev, pager, next"
background
/>
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
:pager-count="5" layout="prev, pager, next" background />
</div>
</div>
</template>
......@@ -521,6 +459,7 @@
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref, computed } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import HeaderMenu from "@/components/headerMenu.vue";
......@@ -539,8 +478,8 @@ import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
// import NewsList from "./components/news.vue";
import MessageBubble from "./components/dialog.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png";
......@@ -587,7 +526,30 @@ import shenggongIcon from "./assets/images/shenggong.png";
import shoushiIcon from "./assets/images/shoushi.png";
import tianyiIcon from "./assets/images/tianyi.png";
import aircasIcon from "./assets/images/aircas.png";
// 父组件中定义 messageList 数据（avatar 对应子组件 imageUrl 字段，需用 import 的图片才能正确显示）
const messageList = ref([
{
avatar: trumpAvatar,
name: "唐纳德·特朗普",
time: "2025-05-12 16:02:37",
source: "真实社交",
content: "埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
},
{
avatar: elongAvatar,
name: "埃隆·马斯克",
time: "2025-05-12 16:02:37",
source: "真实社交",
content: "如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。"
},
{
avatar: elongAvatar,
name: "埃隆·马斯克",
time: "2025-05-12 16:02:37",
source: "真实社交",
content: "提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
}
]);
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
......@@ -659,36 +621,41 @@ const customNewsData = ref([
{
newsImage: newsImg,
title: "美国智库激辩人工智能监管路径",
newsDate: "11-4",
newsOrg: "华盛顿邮报",
time: "11-4",
source: "华盛顿邮报",
from: "11-4 · 华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
newsImage: newsImg,
title: "美国智库激辩人工智能监管路径",
newsDate: "11-4",
newsOrg: "华盛顿邮报",
time: "11-4",
source: "华盛顿邮报",
from: "11-4 · 华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
newsImage: newsImg,
title: "美国智库激辩人工智能监管路径",
newsDate: "11-4",
newsOrg: "华盛顿邮报",
time: "11-4",
source: "华盛顿邮报",
from: "11-4 · 华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
newsImage: newsImg,
title: "美国智库激辩人工智能监管路径",
newsDate: "11-4",
newsOrg: "华盛顿邮报",
time: "11-4",
source: "华盛顿邮报",
from: "11-4 · 华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
newsImage: newsImg,
title: "美国智库激辩人工智能监管路径",
newsDate: "11-4",
newsOrg: "华盛顿邮报",
time: "11-4",
source: "华盛顿邮报",
from: "11-4 · 华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
}
]);
......@@ -1253,7 +1220,7 @@ const handleGetHylyList = async () => {
hylymc: "全部分类"
};
categoryList.value = [obj, ...categoryList.value];
} catch (error) {}
} catch (error) { }
};
const chart1Data = ref({
......@@ -1299,9 +1266,18 @@ const handleGetBillsByType = async () => {
img: bill1
};
});
} catch (error) {}
} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(async () => {
handleGetHylyList();
curBill.value = billList.value[0];
......@@ -1331,6 +1307,7 @@ onMounted(async () => {
flex-direction: column;
gap: 20px;
position: relative;
.box1-absolute {
position: absolute;
width: 240px;
......@@ -1344,6 +1321,7 @@ onMounted(async () => {
padding-right: 50px;
box-sizing: border-box;
background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
&-des {
display: flex;
gap: 5px;
......@@ -1352,18 +1330,21 @@ onMounted(async () => {
font-weight: 700;
color: rgba(206, 79, 81, 1);
}
&-num {
font-size: 32px;
font-weight: 700;
color: rgba(206, 79, 81, 1);
}
}
.box1-top {
// display: flex;
// flex-direction: column;
// gap: 10px;
padding-left: 30px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title {
font-size: 20px;
font-weight: 700;
......@@ -1371,14 +1352,17 @@ onMounted(async () => {
margin-top: 10px;
margin-bottom: 15px;
}
&-content {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
&-item {
display: flex;
gap: 5px;
&-title {
font-size: 16px;
font-weight: 700;
......@@ -1387,6 +1371,7 @@ onMounted(async () => {
}
}
}
.box1-bottom {
padding-left: 30px;
......@@ -1396,24 +1381,29 @@ onMounted(async () => {
color: rgba(59, 65, 75, 1);
margin-bottom: 15px;
}
&-content {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 10px;
&-item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 48%; /* 留出2%的间距 */
width: 48%;
/* 留出2%的间距 */
// margin-bottom: 6px;
box-sizing: border-box;
gap: 10px;
&-img {
width: 24px;
height: 24px;
}
&-txt {
font-size: 16px;
font-weight: 400;
......@@ -1422,30 +1412,36 @@ onMounted(async () => {
}
}
}
.box1-right {
display: flex;
flex-direction: column;
gap: 10px;
.box1-right-title {
font-size: 20px;
font-weight: 700;
color: $base-color;
}
.box1-right-tags {
display: flex;
gap: 10px;
}
.box1-right-content {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.box1-right-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
.box1-right-footer-time {
color: rgba(95, 101, 108, 1);
font-size: 14px;
......@@ -1458,6 +1454,7 @@ onMounted(async () => {
.box2-main {
height: 320px;
overflow-y: auto;
.box2-main-item {
display: flex;
justify-content: space-between;
......@@ -1466,17 +1463,21 @@ onMounted(async () => {
box-sizing: border-box;
padding-right: 3px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
display: flex;
align-items: center;
......@@ -1494,6 +1495,7 @@ onMounted(async () => {
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 13px;
width: 100%;
......@@ -1503,6 +1505,7 @@ onMounted(async () => {
gap: 8px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
......@@ -1514,6 +1517,7 @@ onMounted(async () => {
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -1525,6 +1529,7 @@ onMounted(async () => {
}
}
}
.box2-footer {
position: absolute;
left: 0;
......@@ -1540,14 +1545,17 @@ onMounted(async () => {
background: var(--color-main-active);
margin: 0 auto;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
......@@ -1562,6 +1570,7 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
align-items: flex-start;
.box3-content-title {
font-size: 18px;
font-weight: 700;
......@@ -1575,6 +1584,7 @@ onMounted(async () => {
color: $base-color;
margin-bottom: 15px;
}
.box3-content {
.el-progress--line {
width: 82px;
......@@ -1588,16 +1598,19 @@ onMounted(async () => {
gap: 10px;
align-items: flex-start;
padding-bottom: 30px;
.box4-item-left {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 8px;
position: relative;
.box4-item-left-icon {
width: 10px;
height: 10px;
}
.box4-item-left-line {
width: 1px;
height: 145px;
......@@ -1606,27 +1619,32 @@ onMounted(async () => {
border-left: 1px solid rgba(10, 87, 166, 0.3);
}
}
.box4-item-right {
display: flex;
flex-direction: column;
gap: 5px;
.box4-item-right-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title {
font-size: 18px;
color: $base-color;
font-weight: 700;
}
&-desc {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
}
.box4-item-right-content {
margin-top: 10px;
font-size: 16px;
......@@ -1642,6 +1660,7 @@ onMounted(async () => {
}
}
}
.box4-footer {
margin-top: 50px;
display: flex;
......@@ -1661,15 +1680,18 @@ onMounted(async () => {
justify-content: space-between;
align-items: center;
}
:deep(.table-header) {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
:deep(.table-row) {
height: 64px;
}
.domain-tags {
display: flex;
gap: 8px;
......@@ -1690,18 +1712,21 @@ onMounted(async () => {
height: 100%;
position: relative;
overflow-y: hidden;
.home-main {
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
margin-top: 43px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.home-main-header-top {
height: 30px;
color: rgba(95, 101, 108, 1);
......@@ -1720,9 +1745,11 @@ onMounted(async () => {
padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -1731,6 +1758,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -1742,17 +1770,20 @@ onMounted(async () => {
}
}
}
.home-main-header-footer-link {
display: flex;
justify-content: center;
padding: 30px 0;
gap: 16px;
}
.home-main-header-footer-info {
width: 1600px;
display: flex;
justify-content: space-between;
padding: 30px 0;
.card {
box-sizing: border-box;
width: 792px;
......@@ -1765,10 +1796,12 @@ onMounted(async () => {
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.icon {
position: absolute;
width: 4px;
......@@ -1776,6 +1809,7 @@ onMounted(async () => {
top: 15px;
left: 0;
}
.title {
margin-top: 23px;
height: 31px;
......@@ -1788,6 +1822,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.content {
margin-top: 17px;
margin-left: 30px;
......@@ -1801,6 +1836,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.num {
height: 42px;
text-align: right;
......@@ -1815,12 +1851,14 @@ onMounted(async () => {
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
......@@ -1833,9 +1871,11 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -1846,12 +1886,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1860,17 +1902,21 @@ onMounted(async () => {
}
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
gap: 20px;
.box1 {
display: flex;
gap: 10px;
position: relative;
// .box1-left {
// position: absolute;
// left: 0;
......@@ -1897,31 +1943,38 @@ onMounted(async () => {
flex-direction: column;
align-items: center;
cursor: pointer;
.icon {
width: 11px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
margin-left: 18px;
......@@ -1933,6 +1986,7 @@ onMounted(async () => {
line-height: 22px;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
......@@ -1944,14 +1998,17 @@ onMounted(async () => {
cursor: pointer;
}
}
.box1-main {
display: flex;
height: 354px;
margin-top: 22px;
.box1-main-top {
height: 68px;
display: flex;
justify-content: space-between;
.box1-main-top-left {
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
......@@ -1961,9 +2018,11 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.box1-main-top-right {
margin-left: 20px;
display: flex;
.num {
padding: 1px 8px;
height: 24px;
......@@ -1972,6 +2031,7 @@ onMounted(async () => {
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.tag {
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
......@@ -1982,6 +2042,7 @@ onMounted(async () => {
}
}
}
.box2 {
flex: 1;
padding-right: 20px;
......@@ -1989,19 +2050,23 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 54px;
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 22px;
margin-top: 16px;
......@@ -2012,6 +2077,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 16px;
......@@ -2025,6 +2091,7 @@ onMounted(async () => {
border-radius: 100px;
background: rgba(255, 77, 79, 1);
}
.more {
margin-top: 19px;
margin-left: 256px;
......@@ -2035,22 +2102,27 @@ onMounted(async () => {
line-height: 16px;
}
}
.box2-main {
height: 282px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
......@@ -2067,6 +2139,7 @@ onMounted(async () => {
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
......@@ -2074,6 +2147,7 @@ onMounted(async () => {
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
......@@ -2082,6 +2156,7 @@ onMounted(async () => {
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -2093,6 +2168,7 @@ onMounted(async () => {
}
}
}
.box2-footer {
position: absolute;
left: 26px;
......@@ -2106,14 +2182,17 @@ onMounted(async () => {
border-radius: 6px;
background: rgba(22, 119, 255, 1);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
......@@ -2125,15 +2204,18 @@ onMounted(async () => {
}
}
}
.center-footer {
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 900px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2141,17 +2223,21 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 15px;
width: 13px;
height: 13px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 22px;
......@@ -2163,17 +2249,20 @@ onMounted(async () => {
line-height: 22px;
}
}
.box3-header-right {
display: flex;
justify-content: flex-end;
width: 178px;
height: 22px;
.right-box {
display: flex;
margin-top: 16px;
width: 89px;
height: 22px;
justify-content: flex-end;
.icon1 {
margin-top: 5px;
width: 12px;
......@@ -2181,6 +2270,7 @@ onMounted(async () => {
border-radius: 6px;
background: rgba(20, 89, 187, 1);
}
.icon2 {
margin-top: 5px;
width: 12px;
......@@ -2188,6 +2278,7 @@ onMounted(async () => {
border-radius: 6px;
background: rgba(250, 140, 22, 1);
}
.text {
margin-left: 5px;
color: rgba(95, 101, 108, 1);
......@@ -2199,31 +2290,37 @@ onMounted(async () => {
}
}
}
.box3-main {
height: 397px;
}
}
.box4 {
margin-left: 20px;
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 452px;
margin: 0 auto;
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.header-icon {
margin-top: 18px;
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 26px;
......@@ -2235,22 +2332,27 @@ onMounted(async () => {
line-height: 22px;
}
}
.box4-main {
width: 452px;
margin: 0 auto;
margin-top: 8px;
height: 360px;
overflow-y: auto;
.box4-main-item {
margin-top: 6px;
height: 30px;
display: flex;
.leftStatus3 {
color: rgba(255, 197, 61, 1) !important;
}
.leftStatus2 {
color: rgba(255, 169, 64, 1) !important;
}
.left {
width: 44px;
text-align: left;
......@@ -2260,6 +2362,7 @@ onMounted(async () => {
line-height: 30px;
color: rgba(206, 79, 81, 1);
}
.center {
width: 300px;
color: rgba(95, 101, 108, 1);
......@@ -2268,6 +2371,7 @@ onMounted(async () => {
font-weight: 400;
line-height: 30px;
}
.right {
width: 108px;
color: rgba(132, 136, 142, 1);
......@@ -2282,10 +2386,12 @@ onMounted(async () => {
}
}
}
.home-main-footer {
// width: 100%;
height: 911px;
background: rgba(248, 249, 250, 1);
.home-main-footer-header {
margin-top: 37px;
margin-bottom: 36px;
......@@ -2294,10 +2400,12 @@ onMounted(async () => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1300px;
display: flex;
justify-content: space-between;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2308,32 +2416,38 @@ onMounted(async () => {
border-radius: 21px;
background: rgba(20, 89, 187, 0);
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 100%;
// background: orange;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
// justify-content: center;
.main-item {
......@@ -2343,6 +2457,7 @@ onMounted(async () => {
background: #fff;
margin-bottom: 24px;
margin-right: 25px;
.main-item-box1 {
margin-top: 20px;
margin-left: 45px;
......@@ -2356,6 +2471,7 @@ onMounted(async () => {
height: 100%;
}
}
.main-item-box2 {
margin-top: 26px;
text-align: center;
......@@ -2366,6 +2482,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 30px;
}
.main-item-box3 {
text-align: center;
height: 30px;
......@@ -2380,13 +2497,16 @@ onMounted(async () => {
}
}
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper) {
box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......@@ -2404,6 +2524,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
:deep(.el-table tr) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -2413,4 +2534,31 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: justify;
}
.center-center {
width: 1604px;
margin: 0 auto;
margin-top: 21px;
height: 450px;
display: flex;
.center-center-news {
flex-shrink: 0;
/* 保证内部 NewsList 的滚动条与外层 box3 右侧对齐 */
:deep(.box3-main) {
width: 100%;
box-sizing: border-box;
}
}
.boxs4 {
margin-left: 20px;
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
}
}
</style>
src/views/innovationSubject/index.vue
浏览文件 @ 0ad9f2da
......@@ -13,13 +13,8 @@
</div>
</div> -->
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0;margin-top: 48px; "
v-if="containerRef"
placeholder="搜索创新主体"
:containerRef="containerRef"
areaName=""
/>
<SearchContainer style="margin-bottom: 0;margin-top: 48px; " v-if="containerRef" placeholder="搜索创新主体"
:containerRef="containerRef" areaName="" />
<!-- <el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索创新主体" />
<div class="search">
<div class="search-icon">
......@@ -95,25 +90,16 @@
<div class="box1-main">
<div class="box1-main-left">
<div class="box1-main-left-top">
<div
class="box1-main-left-top-item"
v-for="item in distributionList"
:key="item.name"
:style="{ backgroundColor: item.color, color: item.textcolor }"
>
<div class="box1-main-left-top-item" v-for="item in distributionList" :key="item.name"
:style="{ backgroundColor: item.color, color: item.textcolor }">
<div class="box1-main-left-top-item-text1">{{ item.name }}</div>
<div class="box1-main-left-top-item-text2">{{ item.num }}</div>
</div>
</div>
<div class="box1-main-left-down">
<div
class="box1-main-left-down-item"
v-for="(item, index) in zhouList"
:key="index"
:style="{
<div class="box1-main-left-down-item" v-for="(item, index) in zhouList" :key="index" :style="{
backgroundColor: index % 2 !== 0 ? 'rgba(248, 249, 250, 1)' : 'rgba(255, 255, 255, 1)'
}"
>
}">
<div class="box1-main-left-down-item-index">{{ index + 1 }}</div>
<div class="box1-main-left-down-item-text">{{ item.countName }}</div>
<div class="box1-main-left-down-item-num">{{ item.countNum }}</div>
......@@ -125,7 +111,7 @@
</div>
</div>
</div>
<div class="box2">
<!-- <div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
......@@ -137,13 +123,10 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
<div class="item-left" :class="{
itemLeftStatus1: item.signalLevel === '一般风险',
itemLeftStatus2: item.signalLevel === '重大风险'
}"
>
}">
{{ item.signalLevel }}
</div>
<div class="item-right">
......@@ -160,14 +143,42 @@
</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div> -->
<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" riskLevel="signalLevel"
postDate="signalTime" name="signalTitle" />
</div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<NewsList :list="newsList"/>
<div class="box4">
<!-- <div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.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">
<div class="left">
<img :src="news.newsImage" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">{{ news.newsDate + "." + news.newsOrg }}</div>
</div>
<div class="right-footer">{{ news.newsContent }}</div>
</div>
</div>
</div>
</div> -->
<NewsList :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" />
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
name="personName" content="remarks" source="orgName" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
......@@ -188,37 +199,23 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div v-if="activeCate === '创新主体排名'">
<div class="center-footer">
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate }}
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
pl
aceholder="2022"
style="width: 120px"
@change="handleGetOverallRanking"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="releaseTime" pl aceholder="2022" style="width: 120px"
@change="handleGetOverallRanking">
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
......@@ -231,19 +228,10 @@
</div>
<div class="title">{{ "创新主体综合排名" }}</div>
</div>
<el-table
:data="innoItemList.datalist"
class="sanction-table"
stripe
empty-text="暂无数据"
header-row-class-name="table-header"
row-class-name="table-row"
>
<el-table-column
:prop="item.columnName"
:label="item.columnLabel"
v-for="item in innoItemList.headerlist"
><template #default="scope">
<el-table :data="innoItemList.datalist" class="sanction-table" stripe empty-text="暂无数据"
header-row-class-name="table-header" row-class-name="table-row">
<el-table-column :prop="item.columnName" :label="item.columnLabel"
v-for="item in innoItemList.headerlist"><template #default="scope">
{{ scope.row.columnValues[item.columnName] }}
</template>
</el-table-column>
......@@ -286,29 +274,16 @@
<div class="center-footer">
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate }}
</div>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="2022"
style="width: 120px"
@change="handleGetResearchField(), handleGetResearchFieldSubjectType()"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
@change="handleGetResearchField(), handleGetResearchFieldSubjectType()">
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
......@@ -322,11 +297,7 @@
</div>
<div class="center-footer-layout-content">
<div class="center-footer-layout-content-item">
<EChart
:option="pieOption(barOptionData)"
autoresize
:style="{ height: '370px', width: '750px' }"
/>
<EChart :option="pieOption(barOptionData)" autoresize :style="{ height: '370px', width: '750px' }" />
<div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">
......@@ -337,11 +308,8 @@
</div>
<div style="width: 1px; height: 432px; background: rgba(234, 236, 238, 1)"></div>
<div class="center-footer-layout-content-item">
<EChart
:option="raderOption(raderOptionData)"
autoresize
:style="{ height: '370px', width: '750px' }"
/>
<EChart :option="raderOption(raderOptionData)" autoresize
:style="{ height: '370px', width: '750px' }" />
<div class="center-footer-elx-footer">
<img src="./assets/images/ai.png" alt="" />
<div class="center-footer-elx-footer-text">
......@@ -358,51 +326,33 @@
<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate1 === cate.id }"
v-for="(cate, index) in categoryList1"
:key="index"
@click="handleClickCate1(cate.id)"
>
<div class="btn" :class="{ btnActive: activeCate1 === cate.id }" v-for="(cate, index) in categoryList1"
:key="index" @click="handleClickCate1(cate.id)">
{{ cate.typeName }}
</div>
</div>
<div class="select-box">
<el-select
v-model="areaSelect"
placeholder="全部领域"
style="width: 120px"
@change="handleFindListBySubjectTypeId"
>
<el-select v-model="areaSelect" placeholder="全部领域" style="width: 120px"
@change="handleFindListBySubjectTypeId">
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</div>
<div class="home-main-footer-main">
<div style="width: 1600px">
<div
class="footer-main-item"
v-for="item in universityList"
:key="item.name"
@click="handleClickToDetail(item.orgId)"
>
<div class="footer-main-item" v-for="item in universityList" :key="item.name"
@click="handleClickToDetail(item.orgId)">
<img :src="item.logoUrl" style="height: 32px; width: 32px" />
<div class="item-text">{{ item.orgName }}</div>
<div class="item-text2">{{ item.address }}</div>
<div class="item-text2">{{ item.businessScope }}</div>
<div class="taglist">
<div
class="tag1"
v-for="(val, idx) in item.taglist"
:key="idx"
:class="{
<div class="tag1" v-for="(val, idx) in item.taglist" :key="idx" :class="{
tag2: val === '人工智能',
tag3: val === '新一代通信技术',
tag4: val === '生物科技',
tag5: val === '量子科技'
}"
>
}">
{{ val }}
</div>
</div>
......@@ -411,14 +361,8 @@
<div class="footer-box">
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="12"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="total"
/>
<el-pagination @current-change="handleCurrentChange" :pageSize="12" :current-page="currentPage" background
layout="prev, pager, next" :total="total" />
</div>
</div>
</div>
......@@ -428,6 +372,9 @@
</template>
<script setup>
import MessageBubble from "@/components/dialog/dialog.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import router from "@/router";
......@@ -691,7 +638,10 @@ const handleGetNews = async () => {
const res = await getNews();
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data;
newsList.value = res.data.map(item => ({
...item,
from: `${item.newsDate} · ${item.newsOrg || ""}`
}));
}
} catch (error) {
console.error("获取新闻资讯error", error);
......@@ -724,7 +674,10 @@ const handleGetSocialMediaInfo = async () => {
const res = await getSocialMediaInfo();
console.log("社交媒体", res);
if (res.code === 200 && res.data) {
messageList.value = res.data;
messageList.value = res.data.map(item => ({
...item,
time: item.time.replace(/T/, " "),
}));
}
} catch (error) {
console.error("获取社交媒体error", error);
......@@ -1068,6 +1021,16 @@ const handleToPosi = id => {
containerRef.value.scrollTop = 0;
}
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(async () => {
handleGetAreaType();
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 0ad9f2da
......@@ -11,13 +11,8 @@
</div>
</div> -->
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0;margin-top: 48px; height: fit-content"
v-if="containerRef"
placeholder="搜索市场准入限制调查"
:containerRef="containerRef"
areaName=""
/>
<SearchContainer style="margin-bottom: 0;margin-top: 48px; height: fit-content" v-if="containerRef"
placeholder="搜索市场准入限制调查" :containerRef="containerRef" areaName="" />
</div>
<!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item">
......@@ -68,10 +63,8 @@
</div>
</div> -->
<div class="home-main-header-card-box">
<div
class="home-main-header-card-box-box1 card"
@click="handleClickCardToDetail(sortInfo[1]?.sortCode, sortInfo[1]?.sortName)"
>
<div class="home-main-header-card-box-box1 card"
@click="handleClickCardToDetail(sortInfo[1]?.sortCode, sortInfo[1]?.sortName)">
<div class="header">
<div class="header-left">{{ sortInfo[1]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[1]?.sortCount}项` }}</div>
......@@ -83,10 +76,8 @@
</div>
</div>
</div>
<div
class="home-main-header-card-box-box2 card"
@click="handleClickCardToDetail(sortInfo[2]?.sortCode, sortInfo[2]?.sortName)"
>
<div class="home-main-header-card-box-box2 card"
@click="handleClickCardToDetail(sortInfo[2]?.sortCode, sortInfo[2]?.sortName)">
<div class="header">
<div class="header-left">{{ sortInfo[2]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[2]?.sortCount}项` }}</div>
......@@ -98,10 +89,8 @@
</div>
</div>
</div>
<div
class="home-main-header-card-box-box3 card"
@click="handleClickCardToDetail(sortInfo[0]?.sortCode, sortInfo[0]?.sortName)"
>
<div class="home-main-header-card-box-box3 card"
@click="handleClickCardToDetail(sortInfo[0]?.sortCode, sortInfo[0]?.sortName)">
<div class="header">
<div class="header-left">{{ sortInfo[0]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[0]?.sortCount}项` }}</div>
......@@ -136,14 +125,8 @@
{{ "查看详情 >" }}
</div>
</div>
<el-carousel
ref="carouselRef"
height="395px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
<div class="box1-main">
<div class="box1-main-header">
......@@ -204,7 +187,7 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="box2">
<!-- <div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
......@@ -216,13 +199,10 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in box2Data" :key="index">
<div
class="item-left"
:class="{
<div class="item-left" :class="{
itemLeftStatus3: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险'
}"
>
}">
{{ item.signalLevel }}
</div>
<div class="item-right">
......@@ -238,30 +218,65 @@
{{ item.signalTitle }}
</div>
</template>
</el-popover>
<div v-else class="text">
</el-popover>
<div v-else class="text">
{{ item.signalTitle }}
</div> -->
<div class="text">
</div> --
<div class="text">
{{ item.signalTitle }}
</div>
<div class="time">{{ item.signalTime }}</div>
</div>
</div>
</div>
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="time">{{ item.signalTime }}</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div> -->
<RiskSignal :list="box2Data" @more-click="handleToMoreRiskSignal" postDate="signalTime" name="signalTitle"
riskLevel="signalLevel" />
</div>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<!-- <div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/header-news.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "查看更多" }}</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.newsImage ? news.newsImage : DefaultNewsIcon" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">{{ news.newsDate + " · " + news.newsOrg }}</div>
</div>
<!-- <el-popover effect="dark" :width="1000" :content="news.newsContent" placement="top-start">
<template #reference>
<div class="right-footer">{{ news.newsContent }}</div>
</template>
</el-popover> --
<div class="right-footer">{{ news.newsContent }}</div>
</div>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<NewsList :list="newsList" :errImg="defaultNews"/>
<div class="box4">
</div>
</div>
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" from="from" />
<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail"
source="orgName" content="remarks" name="personName" imageUrl="personImage">
</MessageBubble>
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
......@@ -269,17 +284,10 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.personImage ? item.personImage : DefaultUserIcon"
:name="item.personName"
:time="item.time"
:source="item.orgName"
:content="item.remarks"
/>
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
@info-click="handleMediaClick(item)" :key="index"
:avatar="item.personImage ? item.personImage : DefaultUserIcon" :name="item.personName"
:time="item.time" :source="item.orgName" :content="item.remarks" />
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.personImage ? item.personImage : DefaultUserIcon" alt="" />
......@@ -291,9 +299,9 @@
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> -->
</div>
</div> --
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -315,13 +323,8 @@
<div class="box5-main">
<div class="box5-main-chart" id="chart1"></div>
<div class="box5-main-btn-box">
<div
class="right-box"
:class="{ rightBoxActive: box5BtnActive === item.value }"
v-for="(item, index) in box5BtnList"
:key="index"
@click="handleChangeBox5Btn(item.value)"
>
<div class="right-box" :class="{ rightBoxActive: box5BtnActive === item.value }"
v-for="(item, index) in box5BtnList" :key="index" @click="handleChangeBox5Btn(item.value)">
{{ item.name }}
</div>
</div>
......@@ -342,18 +345,9 @@
</div>
<div class="box6-main">
<div class="box6-main-select-box">
<el-select
v-model="box6SelectedYear"
@change="handleChangeBox6Year"
placeholder="选择时间"
style="width: 120px"
>
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="box6-mian-chart" id="chart2"></div>
......@@ -378,31 +372,13 @@
</div>
<div class="box7-main">
<div class="box7-main-top">
<el-select
v-model="box7SelectedSurvey"
@change="handleChangeBox7Survey"
placeholder="选择调查"
style="width: 120px"
>
<el-option
v-for="item in box7SurveyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="box7SelectedSurvey" @change="handleChangeBox7Survey" placeholder="选择调查"
style="width: 120px">
<el-option v-for="item in box7SurveyList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select
v-model="box7SelectedYear"
@change="handleChangeBox7Year"
placeholder="选择时间"
style="width: 120px"
>
<el-option
v-for="item in box7YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="box7SelectedYear" @change="handleChangeBox7Year" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box7YearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
......@@ -419,18 +395,9 @@
<div class="box8-header-title">{{ "调查结果分布" }}</div>
</div>
<div class="box-header-right">
<el-select
v-model="box8SelectedSurvey"
@change="handleChangeBox8Survey"
placeholder="选择调查"
style="width: 120px"
>
<el-option
v-for="item in box8SurveyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="box8SelectedSurvey" @change="handleChangeBox8Survey" placeholder="选择调查"
style="width: 120px">
<el-option v-for="item in box8SurveyList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -444,13 +411,8 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCateId === cate.id }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCateId === cate.id }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate.name }}
</div>
</div>
......@@ -485,14 +447,8 @@
</div>
<div class="left-box1-main">
<div class="checkbox-group">
<el-checkbox
v-for="year in surveyYearList"
:key="year.id"
v-model="checkedSurveyYears"
:label="year.id"
class="filter-checkbox"
@change="handleChangeCheckedSurveyYears"
>
<el-checkbox v-for="year in surveyYearList" :key="year.id" v-model="checkedSurveyYears"
:label="year.id" class="filter-checkbox" @change="handleChangeCheckedSurveyYears">
{{ year.name }}
</el-checkbox>
</div>
......@@ -505,14 +461,8 @@
</div>
<div class="left-box2-main">
<div class="checkbox-group">
<el-checkbox
v-for="area in areaList"
:key="area.id"
v-model="checkedAreaList"
:label="area.id"
class="filter-checkbox"
@change="handleChangeCheckedAreas"
>
<el-checkbox v-for="area in areaList" :key="area.id" v-model="checkedAreaList" :label="area.id"
class="filter-checkbox" @change="handleChangeCheckedAreas">
{{ area.name }}
</el-checkbox>
</div>
......@@ -525,14 +475,8 @@
</div>
<div class="left-box2-main">
<div class="checkbox-group">
<el-checkbox
v-for="area in insList"
:key="area.id"
v-model="checkedInsList"
:label="area.id"
class="filter-checkbox"
@change="handleChangeCheckedIns"
>
<el-checkbox v-for="area in insList" :key="area.id" v-model="checkedInsList" :label="area.id"
class="filter-checkbox" @change="handleChangeCheckedIns">
{{ area.name }}
</el-checkbox>
</div>
......@@ -545,14 +489,8 @@
</div>
<div class="left-box2-main">
<div class="checkbox-group">
<el-checkbox
v-for="area in countryList"
:key="area.id"
v-model="checkedCountryList"
:label="area.id"
class="filter-checkbox"
@change="handleChangeCheckedCountry"
>
<el-checkbox v-for="area in countryList" :key="area.id" v-model="checkedCountryList" :label="area.id"
class="filter-checkbox" @change="handleChangeCheckedCountry">
{{ area.name }}
</el-checkbox>
</div>
......@@ -569,13 +507,8 @@
<div class="right-main">
<el-empty v-if="surveyInfoList.length === 0" description="当前条件下暂无数据" :image-size="200" />
<div
v-else
class="item"
v-for="(item, index) in surveyInfoList"
:key="index"
@click="handleClickToSurveyDetail()"
>
<div v-else class="item" v-for="(item, index) in surveyInfoList" :key="index"
@click="handleClickToSurveyDetail()">
<div class="item-left">{{ item.SEARCHDATE }}</div>
<div class="item-center">
<div class="icon">
......@@ -585,7 +518,9 @@
</div>
<div class="item-right">
<div class="item-right-header">
<div class="tag" :class="{tag1: item.SORTCODE === '337', tag2: item.SORTCODE === '301', tag3: item.SORTCODE === '232' }">{{ item.SORTCODE }}</div>
<div class="tag"
:class="{ tag1: item.SORTCODE === '337', tag2: item.SORTCODE === '301', tag3: item.SORTCODE === '232' }">
{{ item.SORTCODE }}</div>
<div class="title">{{ item.SEARCHNAME }}</div>
<div class="status" v-if="item.CASESTATUS">
<div class="status-icon"></div>
......@@ -613,14 +548,8 @@
{{ `共 ${totalDiscussNum} 项` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="totalDiscussNum"
/>
<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
background layout="prev, pager, next" :total="totalDiscussNum" />
</div>
</div>
</div>
......@@ -631,6 +560,8 @@
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref } from "vue";
import setChart from "@/utils/setChart";
import scrollToTop from "@/utils/scrollToTop";
......@@ -644,7 +575,7 @@ import getPieChart from "./utils/piechart";
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart";
// import getBarChart from "./utils/barChart";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
......@@ -699,7 +630,7 @@ const handleGetStatSort = async () => {
const res = await getStatSort();
console.log("首页分类", res);
sortInfo.value = res.data;
} catch (error) {}
} catch (error) { }
};
// 调查进展
......@@ -711,7 +642,7 @@ const handleGetBox1Data = async () => {
if (res.code === 200 && res.data) {
box1DataList.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
const carouselRef = ref(null);
......@@ -779,10 +710,10 @@ const handleGetBox2Data = async () => {
if (res.code === 200 && res.data) {
box2Data.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
// 点击风险信号条目，进入调查详情
const handleClickBox2Item = () => {};
const handleClickBox2Item = () => { };
// 新闻资讯
const newsList = ref([
......@@ -802,9 +733,14 @@ const handleGetBox3Data = async () => {
const res = await getNews(params);
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data;
newsList.value = res.data.map(item => {
return {
...item,
from: item.newsDate + " · " + item.newsOrg
};
});
}
} catch (error) {}
} catch (error) { }
};
// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = news => {
......@@ -833,7 +769,17 @@ const handleGetBox4Data = async () => {
item.time = item.time.replace('T', ' ')
})
}
} catch (error) {}
} catch (error) { }
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
// 点击人物头像，跳转到人物主页
const handleClickPerson = async item => {
......@@ -887,7 +833,7 @@ const handleClickPerson = async item => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) {}
} catch (error) { }
};
// 调查数量
......@@ -1029,7 +975,7 @@ const hadleGetStatNum = async () => {
}
console.log("box5ChartData", box5ChartData.value);
}
} catch (error) {}
} catch (error) { }
};
const handleBox5 = async () => {
......@@ -1151,7 +1097,7 @@ const handleGetStatArea = async () => {
box6Data.value.maxNum = Math.max(...numArr);
}
} catch (error) {}
} catch (error) { }
};
const handleBox6 = async () => {
await handleGetStatArea();
......@@ -1320,7 +1266,7 @@ const handleGetBox8Data = async () => {
try {
const res = await getSearchResult(params);
console.log("调查结果分布", res);
if(res.code === 200 && res.data) {
if (res.code === 200 && res.data) {
box8Data.value = res.data.map(item => {
return {
name: item.RESULTNAME,
......@@ -1430,7 +1376,7 @@ const handleGetAreaList = async () => {
});
console.log("areaList", areaList.value);
}
} catch (error) {}
} catch (error) { }
};
const handleChangeCheckedAreas = () => {
......@@ -1454,14 +1400,14 @@ const insList = ref([
}
]);
const checkedInsList = ref([]);
const handleGetInsList = async() => {
const handleGetInsList = async () => {
// const params = {
// sortCode: activeCateId.value
// }
try {
const res = await getSearchAllOrg()
console.log('发布机构', res);
if(res.code === 200 && res.data) {
if (res.code === 200 && res.data) {
insList.value = res.data.map(item => {
return {
name: item.ORGNAME,
......@@ -1507,7 +1453,7 @@ const handleGetAllSearchCountry = async () => {
try {
const res = await getSearchAllCountry()
console.log('受调查国家/地区', res);
if(res.code && res.data) {
if (res.code && res.data) {
countryList.value = res.data.map(item => {
return {
name: item.COUNTRYNAME,
......@@ -1570,7 +1516,7 @@ const handleGetSurveyList = async () => {
} else {
surveyInfoList.value = [];
}
} catch (error) {}
} catch (error) { }
};
const handleClickToSurveyDetail = id => {
......@@ -1615,21 +1561,25 @@ onMounted(async () => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
width: 100%;
height: 100%;
position: relative;
overflow-y: hidden;
.home-main {
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
......@@ -1647,9 +1597,11 @@ onMounted(async () => {
box-sizing: border-box;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -1658,6 +1610,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -1669,12 +1622,14 @@ onMounted(async () => {
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
......@@ -1687,9 +1642,11 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -1700,12 +1657,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1713,6 +1672,7 @@ onMounted(async () => {
}
}
}
.home-main-header-card-box {
width: 1600px;
margin: 0 auto;
......@@ -1720,13 +1680,16 @@ onMounted(async () => {
margin-top: 64px;
display: flex;
justify-content: space-between;
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
}
.home-main-header-card-box-box1 {
width: 520px;
height: 142px;
......@@ -1746,10 +1709,12 @@ onMounted(async () => {
height: 111px;
background: rgba(250, 140, 22, 1);
}
.header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
......@@ -1759,6 +1724,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-top: 28px;
margin-right: 35px;
......@@ -1770,8 +1736,10 @@ onMounted(async () => {
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
width: 485px;
height: 24px;
......@@ -1787,6 +1755,7 @@ onMounted(async () => {
}
}
}
.home-main-header-card-box-box2 {
width: 520px;
height: 142px;
......@@ -1795,6 +1764,7 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
cursor: pointer;
// &:hover {
// margin-top: -2px;
// }
......@@ -1808,10 +1778,12 @@ onMounted(async () => {
height: 111px;
background: rgba(114, 46, 209, 1);
}
.header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
......@@ -1821,6 +1793,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-top: 28px;
margin-right: 35px;
......@@ -1832,8 +1805,10 @@ onMounted(async () => {
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
width: 485px;
height: 24px;
......@@ -1849,6 +1824,7 @@ onMounted(async () => {
}
}
}
.home-main-header-card-box-box3 {
width: 520px;
height: 142px;
......@@ -1857,6 +1833,7 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative;
cursor: pointer;
// &:hover {
// margin-top: -3px;
// box-shadow: 0 0 5px 5px rgba(10, 87, 166, 0.1);
......@@ -1871,10 +1848,12 @@ onMounted(async () => {
height: 111px;
background: var(--color-main-active);
}
.header {
height: 56px;
display: flex;
justify-content: space-between;
.header-left {
margin-left: 30px;
margin-top: 26px;
......@@ -1884,6 +1863,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-top: 28px;
margin-right: 35px;
......@@ -1895,8 +1875,10 @@ onMounted(async () => {
line-height: 24px;
}
}
.content-box {
margin-left: 30px;
.item {
width: 485px;
height: 24px;
......@@ -1917,11 +1899,13 @@ onMounted(async () => {
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
......@@ -1930,6 +1914,7 @@ onMounted(async () => {
background: #fff;
box-sizing: border-box;
position: relative;
.box1-left {
position: absolute;
left: 0;
......@@ -1938,11 +1923,13 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-right {
position: absolute;
right: 0;
......@@ -1951,28 +1938,34 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 19px;
height: 18px;
margin-top: 15px;
margin-left: 22px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 112px;
height: 48px;
......@@ -1986,6 +1979,7 @@ onMounted(async () => {
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
margin-right: 40px;
......@@ -1998,16 +1992,19 @@ onMounted(async () => {
cursor: pointer;
}
}
.box1-main {
width: 1064px;
height: 354px;
margin-top: 22px;
margin-left: 31px;
.box1-main-header {
width: 990px;
height: 54px;
display: flex;
justify-content: space-between;
.header-left {
padding-left: 22px;
color: var(--color-main-active);
......@@ -2016,11 +2013,13 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.header-right {
display: flex;
width: 300px;
justify-content: flex-end;
flex-wrap: wrap;
.tag1 {
height: 24px;
line-height: 24px;
......@@ -2031,6 +2030,7 @@ onMounted(async () => {
border-radius: 4px;
background: rgba(230, 244, 255, 1);
}
.tag2 {
margin-left: 8px;
height: 24px;
......@@ -2044,6 +2044,7 @@ onMounted(async () => {
}
}
}
.info-box {
margin-left: 6px;
width: 989px;
......@@ -2052,9 +2053,11 @@ onMounted(async () => {
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.info-header {
height: 38px;
display: flex;
.icon {
width: 4px;
height: 4px;
......@@ -2063,6 +2066,7 @@ onMounted(async () => {
margin-left: 24px;
margin-top: 20px;
}
.time {
width: 98px;
height: 24px;
......@@ -2074,6 +2078,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 24px;
}
.title {
width: 200px;
margin-left: 11px;
......@@ -2086,6 +2091,7 @@ onMounted(async () => {
line-height: 24px;
}
}
.info-content {
width: 909px;
height: 60px;
......@@ -2100,6 +2106,7 @@ onMounted(async () => {
margin-top: 4px;
}
}
.list-box {
margin-top: 18px;
margin-left: 28px;
......@@ -2107,9 +2114,11 @@ onMounted(async () => {
height: 185px;
overflow: hidden;
overflow-y: auto;
.list-item {
min-height: 37px;
display: flex;
.icon {
width: 4px;
height: 4px;
......@@ -2117,6 +2126,7 @@ onMounted(async () => {
background: rgba(59, 65, 75, 1);
margin-top: 16px;
}
.list-left {
margin-left: 18px;
line-height: 37px;
......@@ -2126,6 +2136,7 @@ onMounted(async () => {
font-size: 16px;
font-weight: 700;
}
.list-right {
line-height: 37px;
margin-left: 17px;
......@@ -2138,6 +2149,7 @@ onMounted(async () => {
}
}
}
.box2 {
width: 521px;
height: 450px;
......@@ -2145,26 +2157,31 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
margin-left: 25px;
.text {
margin-left: 16px;
margin-top: 11px;
......@@ -2175,6 +2192,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.num {
width: 24px;
height: 20px;
......@@ -2189,6 +2207,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 16px;
margin-left: 200px;
......@@ -2200,27 +2219,33 @@ onMounted(async () => {
cursor: pointer;
}
}
.box2-main {
margin-top: 2px;
height: 330px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus3 {
background: rgba(255, 241, 240) !important;
color: rgba(245, 34, 45, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
......@@ -2237,12 +2262,14 @@ onMounted(async () => {
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 328px;
color: rgba(59, 65, 75, 1);
......@@ -2254,6 +2281,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 2px;
line-height: 47px;
......@@ -2265,6 +2293,7 @@ onMounted(async () => {
}
}
}
.box2-footer {
position: absolute;
left: 30px;
......@@ -2279,14 +2308,17 @@ onMounted(async () => {
background: var(--color-main-active);
gap: 8px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
......@@ -2297,17 +2329,20 @@ onMounted(async () => {
}
}
}
.center-center {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box3 {
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2315,18 +2350,22 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
margin-left: 21px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 11px;
margin-left: 20px;
......@@ -2337,6 +2376,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.more {
width: 49px;
height: 24px;
......@@ -2352,11 +2392,13 @@ onMounted(async () => {
}
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding-top: 6px;
.box3-item {
display: flex;
height: 77px;
......@@ -2364,25 +2406,31 @@ onMounted(async () => {
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.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: 13px;
width: 470px;
......@@ -2396,6 +2444,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 187px;
text-align: right;
......@@ -2411,6 +2460,7 @@ onMounted(async () => {
white-space: nowrap;
}
}
.right-footer {
width: 657px;
height: 24px;
......@@ -2427,6 +2477,7 @@ onMounted(async () => {
}
}
}
.box4 {
margin-left: 20px;
width: 792px;
......@@ -2434,6 +2485,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
......@@ -2441,16 +2493,19 @@ onMounted(async () => {
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-top: 17px;
margin-left: 21px;
width: 19px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 11px;
margin-left: 20px;
......@@ -2461,6 +2516,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.more {
width: 49px;
height: 24px;
......@@ -2475,6 +2531,7 @@ onMounted(async () => {
cursor: pointer;
}
}
.box4-main {
height: 402px;
overflow: hidden;
......@@ -2537,12 +2594,14 @@ onMounted(async () => {
}
}
}
.center-footer {
margin-top: 21px;
height: 460px;
display: flex;
justify-content: center;
gap: 15px;
.box5 {
width: 1064px;
height: 460px;
......@@ -2551,6 +2610,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box5-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2558,18 +2618,22 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
position: relative;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 16px;
margin-left: 22px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -2581,6 +2645,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -2590,14 +2655,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -2610,13 +2678,16 @@ onMounted(async () => {
}
}
}
.box5-main {
height: 397px;
position: relative;
z-index: 0;
.box5-main-chart {
height: 397px;
}
.box5-main-btn-box {
z-index: 99;
position: absolute;
......@@ -2627,6 +2698,7 @@ onMounted(async () => {
gap: 8px;
width: 178px;
height: 28px;
.right-box {
height: 28px;
padding: 0 8px;
......@@ -2642,6 +2714,7 @@ onMounted(async () => {
line-height: 28px;
cursor: pointer;
}
.rightBoxActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
......@@ -2651,6 +2724,7 @@ onMounted(async () => {
}
}
}
.box6 {
width: 521px;
height: 460px;
......@@ -2659,6 +2733,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 48px;
......@@ -2666,16 +2741,19 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
position: relative;
.header-icon {
margin-left: 20px;
margin-top: 15px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 11px;
margin-left: 15px;
......@@ -2686,6 +2764,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -2695,14 +2774,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -2715,15 +2797,18 @@ onMounted(async () => {
}
}
}
.box6-main {
height: 360px;
position: relative;
.box6-main-select-box {
position: absolute;
z-index: 100;
top: 10px;
right: 20px;
}
.box6-mian-chart {
height: 360px;
position: relative;
......@@ -2732,11 +2817,13 @@ onMounted(async () => {
}
}
}
.center-footer1 {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 15px;
.box7 {
width: 1064px;
height: 460px;
......@@ -2745,6 +2832,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2752,18 +2840,22 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
position: relative;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 16px;
margin-left: 22px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 11px;
margin-left: 19px;
......@@ -2775,6 +2867,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -2784,14 +2877,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -2804,8 +2900,10 @@ onMounted(async () => {
}
}
}
.box7-main {
height: 412px;
.box7-main-top {
height: 40px;
display: flex;
......@@ -2815,11 +2913,13 @@ onMounted(async () => {
padding-top: 12px;
gap: 12px;
}
.box7-main-main {
height: 372px;
}
}
}
.box8 {
width: 521px;
height: 460px;
......@@ -2828,6 +2928,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2835,18 +2936,22 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
position: relative;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 15px;
margin-left: 20px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 11px;
margin-left: 20px;
......@@ -2858,6 +2963,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -2867,14 +2973,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -2887,18 +2996,21 @@ onMounted(async () => {
}
}
}
.box8-main {
height: 360px;
}
}
}
}
.home-main-footer {
// width: 100%;
// height: 1149px;
padding-bottom: 20px;
background: rgba(248, 249, 250, 1);
overflow: hidden;
.home-main-footer-header {
width: 1600px;
height: 42px;
......@@ -2906,9 +3018,11 @@ onMounted(async () => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2920,25 +3034,30 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
.paixu-btn {
display: flex;
width: 120px;
......@@ -2947,20 +3066,25 @@ onMounted(async () => {
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
......@@ -2973,11 +3097,13 @@ onMounted(async () => {
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
......@@ -2986,6 +3112,7 @@ onMounted(async () => {
}
}
}
.home-main-footer-main {
width: 1600px;
margin-bottom: 20px;
......@@ -2994,6 +3121,7 @@ onMounted(async () => {
box-sizing: border-box;
// padding: 20px;
display: flex;
.left {
width: 360px;
// height: 700px;
......@@ -3001,11 +3129,14 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
// height: 220px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
......@@ -3013,6 +3144,7 @@ onMounted(async () => {
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
......@@ -3023,16 +3155,20 @@ onMounted(async () => {
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
padding-left: 20px;
}
}
.left-box2 {
margin-top: 17px;
// height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
......@@ -3040,6 +3176,7 @@ onMounted(async () => {
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
......@@ -3050,12 +3187,14 @@ onMounted(async () => {
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
padding-left: 20px;
}
}
}
.right {
margin-left: 16px;
width: 1224px;
......@@ -3064,20 +3203,24 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
overflow: hidden;
.right-header {
height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 22px;
height: 18px;
margin-left: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 26px;
margin-left: 19px;
......@@ -3091,21 +3234,25 @@ onMounted(async () => {
text-align: left;
}
}
.right-main {
padding-top: 6px;
// min-height: 586px;
height: calc(100% - 108px);
max-height: 1540px;
border-bottom: 1px solid rgba(230, 231, 232, 1);
// height: 780px;
.item {
// height: 154px;
min-height: 94px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover) !important;
}
.item-left {
width: 100px;
color: var(--color-main-active);
......@@ -3118,18 +3265,22 @@ onMounted(async () => {
text-align: right;
padding-right: 20px;
}
.item-center {
width: 30px;
// height: 154px;
.icon {
width: 30px;
height: 30px;
border-radius: 15px;
img{
img {
width: 100%;
height: 100%;
}
}
.line {
margin-left: 14px;
width: 2px;
......@@ -3139,12 +3290,15 @@ onMounted(async () => {
background: rgba(234, 236, 238, 1);
}
}
.item-right {
padding-left: 20px;
.item-right-header {
height: 26px;
display: flex;
align-items: center;
.tag {
width: 48px;
height: 24px;
......@@ -3159,21 +3313,25 @@ onMounted(async () => {
text-align: left;
border-radius: 4px;
}
.tag1 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(5, 95, 194, 1);
}
.tag2 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag3 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.title {
margin-left: 9px;
width: 880px;
......@@ -3190,6 +3348,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.status {
margin-left: 9px;
display: flex;
......@@ -3198,12 +3357,14 @@ onMounted(async () => {
justify-content: flex-end;
gap: 5px;
align-items: center;
.status-icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--color-main-active);
}
.status-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
......@@ -3216,6 +3377,7 @@ onMounted(async () => {
}
}
}
.item-right-content {
margin-top: 9px;
width: 1022px;
......@@ -3229,12 +3391,15 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: justify;
}
.item-right-footer {
margin-top: 9px;
display: flex;
gap: 8px;
.area-box {
display: flex;
.area {
height: 24px;
padding: 0 8px;
......@@ -3250,9 +3415,11 @@ onMounted(async () => {
text-align: left;
}
}
.flag-box {
display: flex;
position: relative;
.flag {
width: 24px;
height: 24px;
......@@ -3260,11 +3427,13 @@ onMounted(async () => {
border: 2px solid #fff;
overflow: hidden;
position: absolute;
img{
img {
width: 100%;
height: 100%;
}
}
:nth-child(1) {
left: 18px;
z-index: 99;
......@@ -3274,12 +3443,14 @@ onMounted(async () => {
}
}
}
.right-footer {
box-sizing: border-box;
padding-top: 15px;
height: 60px;
display: flex;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -3289,6 +3460,7 @@ onMounted(async () => {
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
......@@ -3298,15 +3470,18 @@ onMounted(async () => {
}
}
}
.divide-header {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......
src/views/ruleRestriction/components/askPage/index.vue
浏览文件 @ 0ad9f2da
<template>
<div class="ask-page">
<div class="left">
<NewsList :list="leftList"/>
<!-- <div class="left-title">
<!-- <div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt />
<div class="tit">新闻资讯</div>
<div class="more" @click="handleToNewsDetail">更多 +</div>
......@@ -12,22 +10,19 @@
<div v-for="item in leftList" :key="item.newsId" class="main-item">
<img :src="item.newsImage" alt />
<div class="item-content">
<div class="title">{{item.newsTitle}}</div>
<el-tooltip
effect="dark"
:content="item.newsContent"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="content">{{item.newsContent}}</div>
<div class="title">{{ item.newsTitle }}</div>
<el-tooltip effect="dark" :content="item.newsContent" popper-class="common-prompt-popper" placement="top"
:show-after="500">
<div class="content">{{ item.newsContent }}</div>
</el-tooltip>
<div class="time">{{item.newsDate}}</div>
<div class="time">{{ item.newsDate }}</div>
</div>
</div>
</div> -->
</div>
<div class="right">
</div> -->
<NewsList :newsList="leftList" @item-click="handleToNewsDetail" @more-click="handleToMoreNews" img="newsImage"
title="newsTitle" content="newsContent" />
<!-- <div class="right">
<div class="right-title">
<img src="./assets/icon02.png" alt />
<div class="tit">社交媒体</div>
......@@ -57,13 +52,17 @@
<div class="cl2">{{ rightList[2].content }}</div>
<div class="cl3">{{ rightList[2].time }}</div>
</div>
</div> -->
</div>
</div> --
</div>
</div> -->
<MessageBubble :messageList="rightList" imageUrl="personImage" @more-click="handleToSocialDetail" content="remarks"
name="personName" source="orgName" />
</div>
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import { ref, onBeforeMount } from "vue";
import router from "@/router"
import image01 from './assets/image01.png'
......@@ -99,7 +98,14 @@ const getRemarksList = async () => {
// console.log('----res', res)
if (res && res.code === 200) {
// console.log('----getRemarksList', res.data)
rightList.value = res.data
rightList.value = res.data.map(item => {
return {
...item,
time: item.time.replace('T', ' ')
}
})
}
} catch (error) {
console.error("获取社交媒体接口失败:", error);
......@@ -107,6 +113,10 @@ const getRemarksList = async () => {
}
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
// 查看新闻资讯详情
const handleToNewsDetail = item => {
const route = router.resolve({
......@@ -142,11 +152,13 @@ onBeforeMount(async () => {
margin: 0;
padding: 0;
}
.ask-page {
width: 1600px;
height: 450px;
display: flex;
justify-content: space-between;
.left {
width: 792px;
height: 450px;
......@@ -155,11 +167,13 @@ onBeforeMount(async () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -167,6 +181,7 @@ onBeforeMount(async () => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
......@@ -178,6 +193,7 @@ onBeforeMount(async () => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
......@@ -192,31 +208,37 @@ onBeforeMount(async () => {
cursor: pointer;
}
}
.left-main {
width: 792px;
height: 402px;
padding: 20px 22px 21px 21px;
overflow-y: auto;
overflow-x: hidden;
.main-item {
width: 749px;
height: 64px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
&:hover {
background-color: #f9f9f9;
}
img {
width: 72px;
height: 48px;
margin-right: 20px;
cursor: pointer;
}
.item-content {
width: 657px;
height: 50px;
position: relative;
.title {
font-size: 16px;
font-weight: 700;
......@@ -225,6 +247,7 @@ onBeforeMount(async () => {
color: rgb(59, 65, 75);
cursor: pointer;
}
.content {
font-size: 16px;
font-weight: 400;
......@@ -232,10 +255,14 @@ onBeforeMount(async () => {
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
white-space: nowrap;
/* 防止文本换行 */
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 显示省略符号来代表被修剪的文本 */
}
.time {
position: absolute;
top: 0px;
......@@ -251,6 +278,7 @@ onBeforeMount(async () => {
}
}
}
.right {
width: 792px;
height: 450px;
......@@ -258,11 +286,13 @@ onBeforeMount(async () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -270,6 +300,7 @@ onBeforeMount(async () => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
......@@ -281,6 +312,7 @@ onBeforeMount(async () => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
......@@ -295,22 +327,26 @@ onBeforeMount(async () => {
cursor: pointer;
}
}
.right-main {
width: 792px;
height: 402px;
padding: 23px 30px 25px 21px;
overflow-y: auto;
overflow-x: hidden;
.trump {
width: 740px;
height: 148px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.trump-main {
width: 695.6px;
height: 148px;
......@@ -318,6 +354,7 @@ onBeforeMount(async () => {
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
......@@ -326,6 +363,7 @@ onBeforeMount(async () => {
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
......@@ -333,6 +371,7 @@ onBeforeMount(async () => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
......@@ -345,16 +384,19 @@ onBeforeMount(async () => {
}
}
}
.mask {
width: 740px;
height: 76px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.mask-main {
width: 695.6px;
height: 76px;
......@@ -362,6 +404,7 @@ onBeforeMount(async () => {
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
......@@ -370,6 +413,7 @@ onBeforeMount(async () => {
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
......@@ -377,6 +421,7 @@ onBeforeMount(async () => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
......@@ -389,16 +434,19 @@ onBeforeMount(async () => {
}
}
}
.malaby {
width: 740px;
height: 98px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.malaby-main {
width: 695.6px;
height: 98px;
......@@ -406,6 +454,7 @@ onBeforeMount(async () => {
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
......@@ -414,6 +463,7 @@ onBeforeMount(async () => {
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
......@@ -421,6 +471,7 @@ onBeforeMount(async () => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
......
src/views/ruleRestriction/components/dataNew/index.vue
浏览文件 @ 0ad9f2da
......@@ -24,20 +24,15 @@
</li>
<li>
<span class="ul-title">涉及领域：</span>
<span
class="ul-pie cl1"
v-for="item in latestUpdateList[latestUpdateIndex].ruleAreas"
>{{ item }}</span>
<span class="ul-pie cl1" v-for="item in latestUpdateList[latestUpdateIndex].ruleAreas">{{ item }}</span>
<!-- <span class="ul-pie cl2">集成电路</span>
<span class="ul-pie cl3">新材料</span>
<span class="ul-pie cl4">生物科技</span>-->
</li>
<li>
<span class="ul-title">限制实体：</span>
<span
class="ul-content"
v-for="item in latestUpdateList[latestUpdateIndex].ruleEntities"
>{{ item.ORGNAME }} &nbsp;</span>
<span class="ul-content" v-for="item in latestUpdateList[latestUpdateIndex].ruleEntities">{{
item.ORGNAME }} &nbsp;</span>
</li>
</ul>
</div>
......@@ -51,7 +46,7 @@
<div class="left-bottom-content">{{ latestUpdateList[latestUpdateIndex].RULEINTRODUCTION }}</div>
</div>
</div>
<div class="right">
<!-- <div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt />
<div class="right-top-title">
......@@ -73,11 +68,14 @@
<img src="./assets/btn.png" alt />
查看更多
</div>
</div>
</div> -->
<RiskSignal :list="list" @more-click="handleToMoreRiskSignal" riskLevel="signalLevel" postDate="signalTime"
name="signalTitle" />
</div>
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { ref, onBeforeMount, computed } from "vue";
import router from "@/router";
import { getLatestUpdates, getRiskSignal } from '@/api/ruleRestriction/index.js'
......@@ -213,11 +211,13 @@ onBeforeMount(async () => {
margin: 0;
padding: 0;
}
.data-new {
width: 1600px;
height: 460px;
display: flex;
justify-content: space-between;
.left {
width: 1064px;
height: 460px;
......@@ -227,6 +227,7 @@ onBeforeMount(async () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn {
width: 24px;
height: 48px;
......@@ -237,6 +238,7 @@ onBeforeMount(async () => {
z-index: 100;
pointer-events: auto;
}
.right-btn {
width: 24px;
height: 48px;
......@@ -247,11 +249,13 @@ onBeforeMount(async () => {
z-index: 100;
pointer-events: auto;
}
.left-top {
width: 100%;
height: 48px;
position: relative;
border-bottom: 1px solid rgb(234, 236, 238);
img {
width: 18px;
height: 18px;
......@@ -259,6 +263,7 @@ onBeforeMount(async () => {
top: 15px;
left: 23px;
}
.more {
height: 48px;
line-height: 48px;
......@@ -272,6 +277,7 @@ onBeforeMount(async () => {
cursor: pointer;
z-index: 101;
}
.left-top-title {
margin-left: 60px;
width: 152px;
......@@ -286,10 +292,12 @@ onBeforeMount(async () => {
padding: 11px 16px;
}
}
.carousel-item-content {
width: 100%;
height: 100%;
}
.left-center {
width: 967px;
height: 208px;
......@@ -297,15 +305,19 @@ onBeforeMount(async () => {
margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 148px;
height: 148px;
margin-right: 21px;
}
display: flex;
.left-center-main {
width: 758px;
height: 175px;
.left-center-main-title {
margin-left: 19px;
margin-bottom: 17px;
......@@ -314,17 +326,21 @@ onBeforeMount(async () => {
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
}
.left-center-main-ul {
// width: 439px;
height: 132px;
ul {
list-style: none;
li {
width: 100%;
min-height: 24px;
margin-bottom: 12px;
display: flex;
align-items: flex-start;
&::before {
content: "·";
font-size: 24px;
......@@ -333,6 +349,7 @@ onBeforeMount(async () => {
margin-right: 16px;
color: rgb(59, 65, 75);
}
.ul-title {
flex-shrink: 0;
width: 120px;
......@@ -342,6 +359,7 @@ onBeforeMount(async () => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.ul-content {
flex: 1;
color: rgb(59, 65, 75);
......@@ -350,12 +368,14 @@ onBeforeMount(async () => {
font-weight: 400;
line-height: 24px;
}
.ul-tags {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ul-pie {
display: inline-block;
box-sizing: border-box;
......@@ -366,21 +386,25 @@ onBeforeMount(async () => {
line-height: 18px;
white-space: nowrap;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.cl3 {
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.cl4 {
border-color: rgba(211, 173, 247, 1);
background-color: rgba(249, 240, 255, 1);
......@@ -390,6 +414,7 @@ onBeforeMount(async () => {
}
}
}
.left-center-title {
padding: 3px 8px 5px;
height: 32px;
......@@ -405,10 +430,13 @@ onBeforeMount(async () => {
top: -1px;
}
}
.left-bottom {
margin: 17px 0 0 62px;
ul {
list-style: none;
.left-bottom-li {
font-size: 16px;
font-weight: 700;
......@@ -418,6 +446,7 @@ onBeforeMount(async () => {
margin-bottom: 10px;
display: flex;
align-items: center;
&::before {
content: "·";
font-size: 24px;
......@@ -428,6 +457,7 @@ onBeforeMount(async () => {
}
}
}
.left-bottom-content {
width: 943px;
margin-left: 22px;
......@@ -439,6 +469,7 @@ onBeforeMount(async () => {
}
}
}
.right {
width: 520px;
height: 460px;
......@@ -447,11 +478,13 @@ onBeforeMount(async () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.right-top {
width: 520px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 21px;
height: 16.84px;
......@@ -459,6 +492,7 @@ onBeforeMount(async () => {
top: 15.1px;
left: 19.5px;
}
.right-top-title {
padding: 11px 16px;
width: 148px;
......@@ -471,6 +505,7 @@ onBeforeMount(async () => {
text-align: center;
color: #fff;
margin-left: 60px;
span {
display: inline-block;
width: 24px;
......@@ -486,6 +521,7 @@ onBeforeMount(async () => {
}
}
}
.right-main {
width: 468px;
padding-right: 5px;
......@@ -494,9 +530,11 @@ onBeforeMount(async () => {
display: flex;
align-items: center;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-left {
width: 40px;
// height: 40px;
......@@ -509,18 +547,22 @@ onBeforeMount(async () => {
padding: 6px 4px;
text-align: center;
}
.cl4 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
}
.cl5 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.cl6 {
background-color: rgba(255, 247, 230, 1);
color: rgb(22, 223, 250);
}
.main-center {
width: 347px;
// height: 30px;
......@@ -531,6 +573,7 @@ onBeforeMount(async () => {
color: rgb(59, 65, 75);
margin-right: 2px;
}
.main-right {
width: 60px;
// height: 24px;
......@@ -542,6 +585,7 @@ onBeforeMount(async () => {
text-align: right;
}
}
.right-mainbtn {
width: 460px;
height: 42px;
......@@ -555,11 +599,13 @@ onBeforeMount(async () => {
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
......
src/views/scientificFunding/components/askPage/index.vue
浏览文件 @ 0ad9f2da
<template>
<div class="ask-page">
<div class="left">
<NewsList :list="leftList"/>
<!-- <div class="left-title">
<!-- <div class="left">
<div class="left-title">
<img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div>
......@@ -23,9 +20,14 @@
</div>
</div>
</div> -->
</div>
<div class="right-box">
</div> -->
<NewsList :newsList="leftList" @more-click="handleToMoreNews" img="newsImage" title="newsTitle"
content="newsContent" from="from" />
<MessageBubble :messageList="rightList" @more-click="handleToSocialDetail" source="orgName" content="remarks"
name="personName" imageUrl="personImage">
</MessageBubble>
<!-- <div class="right-box">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
......@@ -46,11 +48,13 @@
</div>
</div>
</div>
</div> -->
</div>
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import { ref, onMounted } from "vue";
import {
getSocialMediaInfo, getNews
......@@ -111,7 +115,10 @@ const handleNews = async () => {
const res = await getNews();
console.log("获取新闻资讯", res);
if (res.code === 200 && res.data) {
leftList.value = res.data
leftList.value = res.data.map(item => ({
...item,
from: `${item.newsDate} · ${item.newsOrg || ""}`
}));
}
} catch (error) {
console.error("获取新闻资讯error", error);
......@@ -148,7 +155,10 @@ const handleSocialMediaInfo = async () => {
const res = await getSocialMediaInfo();
console.log("获取社交媒体", res);
if (res.code === 200 && res.data) {
rightList.value = res.data
rightList.value = res.data.map(item => ({
...item,
time: item.time.replace(/T/, ' ')
}));
}
} catch (error) {
console.error("获取社交媒体error", error);
......@@ -159,6 +169,17 @@ const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
onMounted(async () => {
handleNews()
handleSocialMediaInfo()
......
src/views/scientificFunding/components/dataNew/index.vue
浏览文件 @ 0ad9f2da
......@@ -57,7 +57,7 @@
</el-carousel>
</div>
<div class="right">
<!-- <div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt="" />
<div class="right-top-title">
......@@ -82,11 +82,14 @@
<img src="./assets/btn.png" alt="" />
查看更多
</div>
</div>
</div> -->
<RiskSignal :list="list" @more-click="handleToMoreRiskSignal" postDate="signalTime" name="signalTitle"
riskLevel="signalLevel" />
</div>
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { ref, onMounted } from "vue";
import {
getNewProject, getRiskSignal
......
src/views/technologyFigures/index.vue
浏览文件 @ 0ad9f2da
......@@ -101,15 +101,8 @@
</div>
</div>
<div class="box1-main" style="display: block">
<el-carousel
ref="carouselRef"
height="354px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel ref="carouselRef" height="354px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none" @change="handleCarouselChange">
<el-carousel-item v-for="person in newsDynamics">
<div class="carousel-content" style="display: flex; height: 100%">
<!-- 左侧：头像 -->
......@@ -130,7 +123,7 @@
</div>
<div style="display: flex; gap: 10px;">
<div class="source-tag" v-for="item in person.personTypeList"
:class="{tag2: item.typeId === '002'}">{{ item.typeName }}</div>
:class="{ tag2: item.typeId === '002' }">{{ item.typeName }}</div>
</div>
</div>
</div>
......@@ -138,8 +131,8 @@
<div style="height: 289px; width: 688px;">
<el-timeline style="margin-top: 14px">
<el-timeline-item placement="top" v-for="(activity, index) in person.newsList" :key="index" type="primary"
:hollow="true">
<el-timeline-item placement="top" v-for="(activity, index) in person.newsList" :key="index"
type="primary" :hollow="true">
<template #dot>
<div style="
display: flex;
......@@ -181,7 +174,7 @@
</div>
</div>
<div class="box2">
<!-- <div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
......@@ -193,13 +186,10 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
<div class="item-left" :class="{
itemLeftStatus1: item.signalLevel === '一般风险',
itemLeftStatus2: item.signalLevel === '重大风险'
}"
>
}">
{{ item.signalLevel ? item.signalLevel : "一般风险" }}
</div>
<div class="item-right">
......@@ -216,7 +206,9 @@
</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div> -->
<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" postDate="signalTime"
name="signalTitle" riskLevel="signalLevel" />
</div>
<DivideHeader id="position2" class="divide-header" :titleText="'言论动态'"></DivideHeader>
<div class="center-center">
......@@ -227,19 +219,15 @@
<img src="./assets/images/TechnologyFigures-icon3.png" alt="" />
</div>
<!-- <div class="box3-header-title">{{ "人物动向" }}</div> -->
<div
class="header-title"
style="width: 1560px; display: flex; justify-content: space-between; margin-top: 10px"
>
<div class="header-title"
style="width: 1560px; display: flex; justify-content: space-between; margin-top: 10px">
<div class="box3-header-title">
{{ "人物动向" }}
</div>
<div style="display: flex; gap: 8px; margin-right: 12px">
<div
v-for="value in peoDateList"
<div v-for="value in peoDateList"
:class="peoDate !== value ? 'btn-box-samll' : 'btn-box-select-samll'"
@click="ChooseTime(value)"
>
@click="ChooseTime(value)">
{{ value }}
</div>
</div>
......@@ -247,7 +235,7 @@
</div>
</div>
<div class="box3-main">
<TimelineMap :peoDate="peoDate"/>
<TimelineMap :peoDate="peoDate" />
</div>
</div>
<div class="box4">
......@@ -255,26 +243,22 @@
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
</div>
<div
class="header-title"
style="width: 1595px; display: flex; justify-content: space-between; margin-top: 10px"
>
<div class="header-title"
style="width: 1595px; display: flex; justify-content: space-between; margin-top: 10px">
<div>
{{ "重要人物言论及立场" }}
</div>
<div style="display: flex; gap: 8px; margin-right: 12px">
<div
v-for="value in areaTypeList"
<div v-for="value in areaTypeList"
:class="fieldSelected !== value.name ? 'btn-box-samll' : 'btn-box-select-samll'"
@click="ChooseArea(value)"
>
@click="ChooseArea(value)">
{{ value.name }}
</div>
</div>
</div>
</div>
<div class="box4-main">
<SpeechStance :fieldSelected="fieldSelected" :areaId="areaId"/>
<SpeechStance :fieldSelected="fieldSelected" :areaId="areaId" />
</div>
</div>
</div>
......@@ -284,34 +268,19 @@
<div class="box5-header">
<div class="box5-header-left">
<div class="box5-header-icon">
<img
src="./assets/images/TechnologyFigures-icon1.png"
alt=""
style="margin: 13px 21px 13px 21px; height: 22px"
/>
<img src="./assets/images/TechnologyFigures-icon1.png" alt=""
style="margin: 13px 21px 13px 21px; height: 22px" />
<div class="box5-header-title">{{ "科技人物观点词云" }}</div>
</div>
<div>
<div style="height: 45px; display: flex; align-items: center">
<el-select v-model="wordCloudvalue" style="width: 120px; height: 28px" @change="handleBox5Change">
<el-option
v-for="item in yearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select
v-model="wordCloudfield"
style="width: 120px; height: 28px; margin: 10px 24px 10px 5px"
@change="handleBox5areaChange"
>
<el-option
v-for="item in fieldSelectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="wordCloudfield" style="width: 120px; height: 28px; margin: 10px 24px 10px 5px"
@change="handleBox5areaChange">
<el-option v-for="item in fieldSelectList" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
......@@ -324,21 +293,14 @@
<div class="header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div
class="header-title"
style="display: flex; width: 740px; justify-content: space-between; align-items: center"
>
<div class="header-title"
style="display: flex; width: 740px; justify-content: space-between; align-items: center">
<div>
{{ "科技人物观点涉及领域变化趋势" }}
</div>
<el-select v-model="areaSelect" style="width: 120px; height: 28px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
......@@ -366,27 +328,20 @@
<div style="display: flex; width: 730px; justify-content: space-between; align-items: center">
<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
<div style="gap: 2px; display: flex;width:510px;">
<div
v-for="value in PersonType"
<div v-for="value in PersonType"
:class="viewSelect !== value.typeName ? 'btn-box-samll' : 'btn-box-select-samll'"
@click="selectpersontype(value)"
>
@click="selectpersontype(value)">
{{ value.typeName }}
</div>
<el-select v-model="yearSelect" style="width: 100px; height: 28px; margin-top: -5px" >
<el-option
v-for="item in yearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="yearSelect" style="width: 100px; height: 28px; margin-top: -5px">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
</div>
</div>
<div class="box8-main">
<PersonTable :persontypeid="persontypeid" :yearSelect="yearSelect"/>
<PersonTable :persontypeid="persontypeid" :yearSelect="yearSelect" />
</div>
</div>
</div>
......@@ -396,19 +351,14 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate.typeName }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate.typeName}}
<div class="btn" :class="{ btnActive: activeCate === cate.typeName }"
v-for="(cate, index) in categoryList" :key="index" @click="handleClickCate(cate)">
{{ cate.typeName }}
</div>
</div>
</div>
<div class="home-main-footer-main">
<SourceLibrary :typeId="typeId"/>
<SourceLibrary :typeId="typeId" />
</div>
</div>
</div>
......@@ -417,17 +367,20 @@
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import scrollToTop from "@/utils/scrollToTop";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";
import {getnewsDynamics,
import {
getnewsDynamics,
getBillRiskSignal,
getCharacterOpinionWordCloud,
getOptionAreaChange,
getPersonTypeCount,
getPersonSummaryInfo,getareaType,getPersonType} from "@/api/technologyFigures/technologyFigures"
getPersonSummaryInfo, getareaType, getPersonType
} from "@/api/technologyFigures/technologyFigures"
// 图表工具函数（仅保留用到的）
import getWordCloudChart from "./utils/worldCloudChart";
......@@ -490,7 +443,7 @@ const handlgetPersonTypeFn = async () => {
console.log("人物类别", res);
PersonType.value = res.data;
categoryList.value = res.data;
categoryList.value.unshift({typeId: '000', typeName:'全部人物'});
categoryList.value.unshift({ typeId: '000', typeName: '全部人物' });
} catch (error) {
console.error(error);
}
......@@ -507,7 +460,7 @@ const handleGetBillRiskSignalFn = async () => {
if (res.code === 200) {
warningList.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
// 获取行业领域
......@@ -518,21 +471,21 @@ const handlegetareaTypeFn = async () => {
const res = await getareaType();
console.log("行业领域", res);
if (res.code === 200) {
areaTypeList.value = res.data.map(item=>{
return{
id:item.id,
areaTypeList.value = res.data.map(item => {
return {
id: item.id,
name: item.name
}
});
areaTypeList.value.unshift({id:"0",name:"全部领域"});
fieldSelectList.value = areaTypeList.value.map(item=>{
areaTypeList.value.unshift({ id: "0", name: "全部领域" });
fieldSelectList.value = areaTypeList.value.map(item => {
return {
label: item.name,
value: item.id
}
})
}
} catch (error) {}
} catch (error) { }
};
......@@ -544,7 +497,7 @@ const handlegetCharacterOpinionWordCloudFn = async () => {
const params = {
year: wordCloudvalue.value,
};
if(wordCloudfield.value !== "0"){
if (wordCloudfield.value !== "0") {
params.areaId = wordCloudfield.value;
}
try {
......@@ -552,14 +505,14 @@ const handlegetCharacterOpinionWordCloudFn = async () => {
console.log("科技人物观点词云", res);
CharacterOpinionWordCloud.value = [];
if (res.code === 200) {
CharacterOpinionWordCloud.value = res.data.map(item=>{
return{
CharacterOpinionWordCloud.value = res.data.map(item => {
return {
name: item.option,
value: item.count
}
});
}
} catch (error) {}
} catch (error) { }
};
// 科技人物观点涉及领域变化趋势
......@@ -619,7 +572,7 @@ const handlegetOptionAreaChangeFn = async () => {
};
}
} catch (error) {}
} catch (error) { }
};
// 科技人物类型
......@@ -632,8 +585,8 @@ const handlegetPersonTypeCountFn = async () => {
const res = await getPersonTypeCount();
console.log("科技人物类型", res);
chart7Data.value = {
name:res.data.map(item => item.typeName),
value:res.data.map(item => item.countPerson)
name: res.data.map(item => item.typeName),
value: res.data.map(item => item.countPerson)
};
console.log("chart7Data", chart7Data);
} catch (error) {
......@@ -703,7 +656,7 @@ const handleBox5Change = async () => {
setChart(wordCloudChart, "box5Chart");
}
const handleBox5areaChange = async () =>{
const handleBox5areaChange = async () => {
await handlegetCharacterOpinionWordCloudFn();
const wordCloudChart = getWordCloudChart(CharacterOpinionWordCloud.value);
setChart(wordCloudChart, "box5Chart");
......@@ -711,7 +664,7 @@ const handleBox5areaChange = async () =>{
}
const persontypeid = ref();
const selectpersontype = value =>{
const selectpersontype = value => {
viewSelect.value = value.typeName;
persontypeid.value = value.typeId;
}
......@@ -767,7 +720,7 @@ const handleClcikToCharacter = async (id, name) => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) {}
} catch (error) { }
};
// 风险信号
......@@ -976,12 +929,14 @@ onMounted(async () => {
width: 100%;
height: 100%;
position: relative;
// overflow-y: hidden;
.search-header {
width: 100%;
height: 144px;
background: #fff;
overflow: hidden;
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
......@@ -994,9 +949,11 @@ onMounted(async () => {
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -1009,14 +966,17 @@ onMounted(async () => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -1028,11 +988,13 @@ onMounted(async () => {
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex;
align-items: center;
......@@ -1045,9 +1007,11 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -1058,12 +1022,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1072,17 +1038,20 @@ onMounted(async () => {
}
}
}
.scrollHomeBox {
width: 100%;
height: calc(100% - 64px);
overflow-y: auto;
}
.home-box {
width: 100%;
height: 100%;
background: url("./assets/images/background.png");
background-size: 100% 100%;
overflow-y: auto;
// .home-header {
// height: 64px;
// color: #fff;
......@@ -1340,6 +1309,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 1);
position: relative;
border-radius: 10px;
.box2-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2031,31 +2001,37 @@ onMounted(async () => {
line-height: 20px;
letter-spacing: 0px;
text-align: left;
.tag1 {
border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag4 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.tag5 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tag6 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
......@@ -2142,5 +2118,4 @@ onMounted(async () => {
text-align: justify;
}
</style>
src/views/thinkTank copy/index copy.vue
浏览文件 @ 0ad9f2da
......@@ -14,7 +14,7 @@
<template #append>
<el-button type="primary" style="background: #1677ff; color: #fff" :icon="Search">搜索</el-button>
</template>
</el-input> -->
</el-input> -->
<el-input v-model="searchText" style="width: 800px; height: 100%" placeholder="搜索智库、报告或政策建议" />
<div class="search">
<div class="search-icon">
......@@ -52,7 +52,8 @@
<!-- 智库展示区域 -->
<div class="think-tanks-section">
<ThinkTankCard v-for="(tank, index) in thinkTanks" :key="tank.id" :tank="tank" :index="index" @click="handleClick" />
<ThinkTankCard v-for="(tank, index) in thinkTanks" :key="tank.id" :tank="tank" :index="index"
@click="handleClick" />
<div class="view-all">
<span class="view-all-link">查看全部智库 ></span>
......@@ -65,7 +66,9 @@
<!-- 左侧数据分布 -->
<div class="left-section">
<div class="section-header">
<el-icon class="location-icon"><Location /></el-icon>
<el-icon class="location-icon">
<Location />
</el-icon>
<span class="section-title">数据分布</span>
<div class="time-filters">
<span :class="{ active: activeTime === '今天' }" @click="activeTime = '今天'">今天</span>
......@@ -97,15 +100,11 @@
<div v-for="signal in signals" :key="signal.id" class="signal-item">
<div class="signal-content">
<div class="signal-left">
<div
size="small"
class="signal-tag"
:class="{
<div size="small" class="signal-tag" :class="{
tag1: signal.type === 'success',
tag2: signal.type === 'warning',
tag3: signal.type === 'danger'
}"
>
}">
{{ signal.tag }}
</div>
<div class="signal-text">{{ signal.content }}</div>
......@@ -548,11 +547,14 @@ onMounted(() => {
box-sizing: border-box;
padding-left: 160px;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
......@@ -569,21 +571,25 @@ onMounted(() => {
background-position: center -100px;
background-size: 100% 100%;
min-height: 100vh;
.home-main-header-footer-link {
display: flex;
gap: 30px;
padding: 30px 0;
justify-content: center;
}
.center-center {
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 792px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -592,17 +598,21 @@ onMounted(() => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-left: 19px;
height: 48px;
......@@ -612,6 +622,7 @@ onMounted(() => {
font-weight: 700;
line-height: 48px;
}
.more {
width: 49px;
height: 24px;
......@@ -627,33 +638,40 @@ onMounted(() => {
}
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding-top: 6px;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.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: 13px;
width: 520px;
......@@ -667,6 +685,7 @@ onMounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
......@@ -679,6 +698,7 @@ onMounted(() => {
line-height: 22px;
}
}
.right-footer {
width: 657px;
height: 24px;
......@@ -695,12 +715,14 @@ onMounted(() => {
}
}
}
.box4 {
margin-left: 20px;
width: 792px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
......@@ -709,15 +731,18 @@ onMounted(() => {
box-sizing: border-box;
padding-left: 22px;
position: relative;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
height: 48px;
margin-left: 18px;
......@@ -727,6 +752,7 @@ onMounted(() => {
font-weight: 700;
line-height: 48px;
}
.more {
width: 49px;
height: 24px;
......@@ -741,24 +767,29 @@ onMounted(() => {
cursor: pointer;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-top: 8px;
.box4-main-item {
margin-top: 16px;
display: flex;
margin-left: 21px;
.left {
margin-top: 5px;
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
}
}
.right {
margin-left: 10px;
width: 690px;
......@@ -766,9 +797,11 @@ onMounted(() => {
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
padding: 10px 15px;
.right-top {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -777,6 +810,7 @@ onMounted(() => {
font-weight: 700;
line-height: 24px;
}
.time {
height: 30px;
color: rgba(95, 101, 108, 1);
......@@ -786,6 +820,7 @@ onMounted(() => {
line-height: 30px;
}
}
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -811,6 +846,7 @@ onMounted(() => {
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
......@@ -823,14 +859,17 @@ onMounted(() => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -977,11 +1016,13 @@ onMounted(() => {
box-sizing: border-box;
padding-right: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 4px;
img {
width: 100%;
height: 100%;
......@@ -996,6 +1037,7 @@ onMounted(() => {
color: #fff;
margin-left: 20px;
}
.signal-title {
font-weight: 500;
margin-right: 8px;
......@@ -1009,6 +1051,7 @@ onMounted(() => {
height: 370px;
overflow-y: auto;
}
.box2-footer {
margin: 10px auto;
width: 460px;
......@@ -1020,14 +1063,17 @@ onMounted(() => {
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);
......@@ -1084,10 +1130,12 @@ onMounted(() => {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.tag2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.tag3 {
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
......@@ -1151,6 +1199,7 @@ onMounted(() => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......
src/views/thinkTank copy/index.vue
浏览文件 @ 0ad9f2da
......@@ -90,13 +90,10 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
}">
{{ item.status }}
</div>
<div class="item-right">
......@@ -191,13 +188,8 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate }}
</div>
</div>
......@@ -405,16 +397,19 @@ onMounted(async () => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
width: 1920px;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
......@@ -431,16 +426,20 @@ onMounted(async () => {
color: #fff;
padding-left: 160px;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
}
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
......@@ -452,9 +451,11 @@ onMounted(async () => {
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -467,14 +468,17 @@ onMounted(async () => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -486,6 +490,7 @@ onMounted(async () => {
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 688px;
......@@ -493,9 +498,11 @@ onMounted(async () => {
box-sizing: border-box;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -504,6 +511,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -515,12 +523,14 @@ onMounted(async () => {
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
width: 140px;
......@@ -532,9 +542,11 @@ onMounted(async () => {
background: #e7f3ff;
position: relative;
cursor: pointer;
&:hover {
background: #cae3fc;
}
.btn-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
......@@ -543,6 +555,7 @@ onMounted(async () => {
line-height: 34px;
margin-left: 5px;
}
.btn-icon {
height: 20px;
line-height: 20px;
......@@ -560,11 +573,13 @@ onMounted(async () => {
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
......@@ -572,6 +587,7 @@ onMounted(async () => {
background: #fff;
box-sizing: border-box;
position: relative;
.box1-left {
position: absolute;
left: 0;
......@@ -579,11 +595,13 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-right {
position: absolute;
right: 0;
......@@ -591,11 +609,13 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -603,17 +623,21 @@ onMounted(async () => {
justify-content: space-between;
padding-left: 31px;
padding-right: 41px;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 152px;
height: 53px;
......@@ -627,6 +651,7 @@ onMounted(async () => {
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
......@@ -638,6 +663,7 @@ onMounted(async () => {
cursor: pointer;
}
}
.box1-main {
width: 1064px;
height: 354px;
......@@ -645,32 +671,38 @@ onMounted(async () => {
margin-left: 31px;
}
}
.box2 {
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
margin-left: 25px;
.text {
margin-left: 15px;
margin-top: 13px;
......@@ -681,6 +713,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 20px;
......@@ -695,6 +728,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 16px;
margin-left: 200px;
......@@ -706,27 +740,33 @@ onMounted(async () => {
cursor: pointer;
}
}
.box2-main {
margin-top: 2px;
height: 330px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
......@@ -743,12 +783,14 @@ onMounted(async () => {
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
......@@ -757,6 +799,7 @@ onMounted(async () => {
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -768,6 +811,7 @@ onMounted(async () => {
}
}
}
.box2-footer {
position: absolute;
left: 30px;
......@@ -782,14 +826,17 @@ onMounted(async () => {
background: var(--color-main-active);
gap: 8px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
......@@ -800,16 +847,19 @@ onMounted(async () => {
}
}
}
.center-center {
width: 1600px;
margin: 0 auto;
margin-top: 21px;
.box3 {
width: 1600px;
height: 640px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -818,17 +868,21 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 19px;
......@@ -839,6 +893,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
......@@ -854,6 +909,7 @@ onMounted(async () => {
}
}
}
.box3-main {
height: 402px;
overflow-y: auto;
......@@ -861,6 +917,7 @@ onMounted(async () => {
padding-top: 6px;
}
}
.box4 {
margin-top: 16px;
width: 1600px;
......@@ -868,6 +925,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
......@@ -876,15 +934,18 @@ onMounted(async () => {
box-sizing: border-box;
padding-left: 22px;
position: relative;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 18px;
......@@ -895,6 +956,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
......@@ -909,6 +971,7 @@ onMounted(async () => {
cursor: pointer;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
......@@ -917,12 +980,14 @@ onMounted(async () => {
}
}
}
.center-footer {
margin-top: 21px;
height: 460px;
display: flex;
justify-content: center;
gap: 15px;
.box5 {
width: 1064px;
height: 460px;
......@@ -931,6 +996,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -939,18 +1005,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -962,6 +1032,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -971,14 +1042,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -991,10 +1065,12 @@ onMounted(async () => {
}
}
}
.box5-main {
height: 397px;
}
}
.box6 {
width: 521px;
height: 460px;
......@@ -1003,6 +1079,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 53px;
......@@ -1011,15 +1088,18 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
position: relative;
.header-icon {
margin-top: 18px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 15px;
......@@ -1030,6 +1110,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -1039,14 +1120,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -1059,16 +1143,19 @@ onMounted(async () => {
}
}
}
.box6-main {
height: 360px;
}
}
}
.center-footer1 {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 15px;
.box7 {
width: 1064px;
height: 460px;
......@@ -1077,6 +1164,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -1085,18 +1173,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -1108,6 +1200,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -1117,14 +1210,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -1137,10 +1233,12 @@ onMounted(async () => {
}
}
}
.box7-main {
height: 412px;
}
}
.box8 {
width: 521px;
height: 460px;
......@@ -1149,6 +1247,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -1157,18 +1256,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -1180,6 +1283,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -1189,14 +1293,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -1209,6 +1316,7 @@ onMounted(async () => {
}
}
}
.box8-main {
width: 469px;
height: 360px;
......@@ -1216,9 +1324,11 @@ onMounted(async () => {
}
}
}
.home-main-footer {
height: 1149px;
overflow: hidden;
.home-main-footer-header {
width: 1600px;
height: 42px;
......@@ -1226,9 +1336,11 @@ onMounted(async () => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -1240,27 +1352,32 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 1600px;
margin-bottom: 20px;
......@@ -1271,17 +1388,21 @@ onMounted(async () => {
box-sizing: border-box;
// padding: 20px;
display: flex;
.left {
width: 300px;
height: 560px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
......@@ -1289,6 +1410,7 @@ onMounted(async () => {
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
......@@ -1299,19 +1421,24 @@ onMounted(async () => {
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
.time-label {
height: 35px;
margin-left: 25px;
}
}
}
.left-box2 {
margin-top: 17px;
height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
......@@ -1319,6 +1446,7 @@ onMounted(async () => {
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
......@@ -1329,8 +1457,10 @@ onMounted(async () => {
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
.area-label {
height: 35px;
margin-left: 25px;
......@@ -1338,6 +1468,7 @@ onMounted(async () => {
}
}
}
.right {
margin-left: 16px;
width: 1284px;
......@@ -1345,10 +1476,12 @@ onMounted(async () => {
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
......@@ -1359,6 +1492,7 @@ onMounted(async () => {
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
......@@ -1369,6 +1503,7 @@ onMounted(async () => {
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
......@@ -1379,6 +1514,7 @@ onMounted(async () => {
padding-left: 20px;
box-sizing: border-box;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
......@@ -1389,6 +1525,7 @@ onMounted(async () => {
padding-left: 20px;
box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
......@@ -1400,19 +1537,24 @@ onMounted(async () => {
box-sizing: border-box;
}
}
.right-main {
height: 780px;
// background: orange;
.item {
display: flex;
padding: 16px 0;
// height: 56px;
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
}
.item-box1 {
width: 500px;
display: flex;
.name {
height: 22px;
padding: 0 8px;
......@@ -1423,21 +1565,25 @@ onMounted(async () => {
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: var(--color-main-active);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
}
.title {
margin-left: 12px;
color: rgba(59, 65, 75, 1);
......@@ -1449,6 +1595,7 @@ onMounted(async () => {
align-items: center;
}
}
.item-box2 {
width: 196px;
padding-left: 20px;
......@@ -1461,6 +1608,7 @@ onMounted(async () => {
display: flex;
align-items: center;
}
.item-box3 {
width: 196px;
padding-left: 20px;
......@@ -1473,6 +1621,7 @@ onMounted(async () => {
display: flex;
align-items: center;
}
.item-box4 {
width: 196px;
padding-left: 20px;
......@@ -1485,6 +1634,7 @@ onMounted(async () => {
display: flex;
align-items: center;
}
.item-box5 {
width: 196px;
padding-left: 20px;
......@@ -1499,11 +1649,13 @@ onMounted(async () => {
}
}
}
.right-footer {
display: flex;
// height: 60px;
// background: orange;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -1513,6 +1665,7 @@ onMounted(async () => {
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
......@@ -1522,15 +1675,18 @@ onMounted(async () => {
}
}
}
.divide-header {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......
src/views/thinkTank/index.vue
浏览文件 @ 0ad9f2da
......@@ -13,13 +13,8 @@
</div> -->
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; margin-top: 48px; height: fit-content"
v-if="containerRef"
placeholder="搜索智库报告"
:containerRef="containerRef"
areaName="智库"
/>
<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="containerRef"
placeholder="搜索智库报告" :containerRef="containerRef" areaName="智库" />
<!-- <el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
style="width: 838px; height: 100%" placeholder="搜索智库报告" />
<div class="search">
......@@ -71,17 +66,12 @@
</el-popover> -->
<div class="content">{{ item.desc }}</div>
<div class="tag-box">
<div
class="tag"
:class="{
<div class="tag" :class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}"
v-for="(val, idx) in item.tagList"
:key="idx"
>
}" v-for="(val, idx) in item.tagList" :key="idx">
{{ val.industryName }}
</div>
</div>
......@@ -116,14 +106,8 @@
</div>
<div class="box1-header-right" @click="handleClickToDetail">查看详情 ></div>
</div>
<el-carousel
ref="carouselRef"
height="395px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel-item v-for="(itemData, index) in box1Data" :key="index">
<div class="box1-main">
<div class="box1-main-left">
......@@ -152,7 +136,7 @@
</el-carousel-item>
</el-carousel>
</div>
<div class="box2">
<!-- <div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
......@@ -186,7 +170,7 @@
{{ item.title }}
</div>
</template>
</el-popover> -->
</el-popover> --
<div class="text">
{{ item.title }}
</div>
......@@ -200,13 +184,53 @@
</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div> -->
<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" postDate="time" name="title"
@item-click="handleClickToDetail" />
</div>
<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<NewsList :list="newsList.slice(0, 5)"/>
<!-- <div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/header-news.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.newsImage !== null ? news.newsImage : defaultNewsIcon" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">{{ news.newsOrg }}</div>
</div>
<div class="box4">
<!-- <el-popover effect="dark" :width="700" :content="news.newsContent" placement="top-start">
<template #reference>
<div class="right-footer">{{ news.newsContent }}</div>
</template>
</el-popover> --
<div class="right-footer">{{ news.newsContent }}</div>
</div>
</div>
</div>
</div> -->
<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
img="newsImage" title="newsTitle" content="newsContent" from="from" />
<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleClickPerson" name="personName" content="remarks" source="orgName" />
<!-- <div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
......@@ -224,18 +248,11 @@
}" v-for="(tag, index) in box4TagList" :key="index" @click="handleClickBox4Tag(tag.name)">
{{ tag.name }}
</div>
</div> -->
</div> --
<div class="box4-main">
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
:key="index"
:avatar="item.personImage ? item.personImage : defaultHeaderIcin"
:name="item.personName"
:time="item.time"
:source="item.orgName"
:content="item.remarks"
/>
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)" :key="index"
:avatar="item.personImage ? item.personImage : defaultHeaderIcin" :name="item.personName"
:time="item.time" :source="item.orgName" :content="item.remarks" />
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.personImage ? item.personImage : defaultHeaderIcin" alt="" />
......@@ -247,9 +264,9 @@
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div> -->
</div>
</div> --
</div>
</div> -->
</div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
......@@ -263,13 +280,8 @@
</div>
<div class="box5-select-box">
<el-select v-model="box5selectetedMonths" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box5MonthsList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox5Data(item.value)"
/>
<el-option v-for="item in box5MonthsList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox5Data(item.value)" />
</el-select>
</div>
</div>
......@@ -283,13 +295,8 @@
<div class="header-title">{{ "政策建议领域分布" }}</div>
<div class="box6-select-box">
<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleBox6()"
/>
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleBox6()" />
</el-select>
</div>
</div>
......@@ -318,30 +325,21 @@
</div>
<div class="box8-select-box">
<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox8Data(item.value)"
/>
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox8Data(item.value)" />
</el-select>
</div>
</div>
<div class="box8-main">
<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
<div
class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
<div class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ index + 1 }}
</div>
<!-- <el-popover effect="dark" :content="item.clause" placement="top-start">
<template #reference> -->
<div
class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
<div class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ item.clause }}
</div>
<!-- </template>
......@@ -359,13 +357,8 @@
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate }}
</div>
</div>
......@@ -396,22 +389,12 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
class="all-checkbox"
@change="handleCheckAllChange"
>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="all-checkbox"
@change="handleCheckAllChange">
全部领域
</el-checkbox>
<el-checkbox
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
@change="handleCheckedAreaChange()"
class="filter-checkbox"
>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleCheckedAreaChange()" class="filter-checkbox">
{{ research.name }}
</el-checkbox>
</div>
......@@ -425,22 +408,13 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAllTime"
class="all-checkbox"
:indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime"
>
<el-checkbox v-model="checkAllTime" class="all-checkbox" :indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime">
全部时间
</el-checkbox>
<el-checkbox-group v-model="selectedPubTimeList">
<el-checkbox
v-for="time in pubTimeList"
:key="time.id"
:label="time.id"
class="filter-checkbox"
@change="handleCheckedAreaChangeTime()"
>
<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
@change="handleCheckedAreaChangeTime()">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -450,12 +424,8 @@
</div>
<div class="right">
<div class="card-box">
<div
class="footer-card"
v-for="(item, index) in curFooterList"
:key="index"
@click="handleToReportDetail(item)"
>
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
@click="handleToReportDetail(item)">
<div class="footer-card-top">
<img :src="item.imageUrl" alt="" />
</div>
......@@ -478,14 +448,8 @@
<div class="right-footer">
<div class="info">共 {{ total }} 项</div>
<div class="page-box">
<el-pagination
:page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
......@@ -496,12 +460,14 @@
</template>
<script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import { onMounted, ref, computed, reactive, nextTick } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";
import MessageBubble from "@/components/dialog.vue";
import MessageBubble from "@/components/dialog/dialog.vue";
import {
getThinkTankList,
getThinkTankRiskSignal,
......@@ -771,7 +737,12 @@ const handleGetThinkTankReportNews = async () => {
const res = await getThinkTankReportNews();
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data;
newsList.value = res.data.map(item => {
return {
...item,
from: `${item.newsDate} · ${item.newsOrg}`
};
});
}
} catch (error) {
console.error("获取新闻资讯error", error);
......@@ -1289,7 +1260,16 @@ const handleGetHylyList = async () => {
console.error("获取行业领域字典error", error);
}
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
const route = router.resolve({
path: "/characterPage",
query: {
personId: item.id
}
});
window.open(route.href, "_blank");
};
const checkAll = ref(false);
const isIndeterminate = ref(true);
const selectedAreaList = ref([]);
......@@ -1565,7 +1545,7 @@ const handleClickPerson = async item => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) {}
} catch (error) { }
};
// 点击新闻条目，跳转到新闻分析页
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论