Skip to content

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

优化首页

上级 5e0a7819
隐藏空白字符变更
内嵌 并排
正在显示 包含 237 行增加 和 128 行删除
src/views/bill/billHome/index.vue
浏览文件 @ b6341181
...@@ -1346,7 +1346,7 @@ onUnmounted(() => {}); ...@@ -1346,7 +1346,7 @@ onUnmounted(() => {});
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 36px; line-height: 32px;
margin-left: 5px; margin-left: 5px;
} }
.btn-icon { .btn-icon {
...@@ -1492,6 +1492,7 @@ onUnmounted(() => {}); ...@@ -1492,6 +1492,7 @@ onUnmounted(() => {});
margin: 0 16px; margin: 0 16px;
background: #e7f3ff; background: #e7f3ff;
cursor: pointer; cursor: pointer;
position: relative;
&:hover { &:hover {
background: #cae3fc; background: #cae3fc;
} }
...@@ -1500,11 +1501,13 @@ onUnmounted(() => {}); ...@@ -1500,11 +1501,13 @@ onUnmounted(() => {});
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 44px; line-height: 42px;
margin-left: 5px; margin-left: 5px;
} }
.btn-icon { .btn-icon {
margin-left: 20px; position: absolute;
top: 0;
right: 10px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
......
src/views/newsAnalysis/relation.vue
浏览文件 @ b6341181
...@@ -8,17 +8,28 @@ import { ref, onMounted } from "vue"; ...@@ -8,17 +8,28 @@ import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
// import { graphData } from "./mockData"; // import { graphData } from "./mockData";
import Img from "./assets/images/img.png";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";
const graphData = { const graphData = {
nodes: [ nodes: [
{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 80 }, { id: "huawei", name: "美国众议院", category: 0, symbolSize: 60, symbol: `image://${Img}` },
{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 0, symbolSize: 50 }, { id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 42, symbol: `image://${Img1}` },
{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 0, symbolSize: 50 }, { id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 2, symbolSize: 42, symbol: `image://${Img2}` },
{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 0, symbolSize: 50 }, { id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 2, symbolSize: 42, symbol: `image://${Img3}` },
{ id: "qualcomm", name: "道格·伯格姆", category: 1, symbolSize: 50 }, { id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 2, symbolSize: 42, symbol: `image://${Img4}` },
{ id: "intel", name: "斯科特·贝森特", category: 1, symbolSize: 50 }, { id: "qualcomm", name: "道格·伯格姆", category: 2, symbolSize: 42, symbol: `image://${Img5}` },
{ id: "mediatek", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 }, { id: "intel", name: "斯科特·贝森特", category: 2, symbolSize: 42, symbol: `image://${Img6}` },
{ id: "shenghongda", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 }, { id: "mediatek", name: "杰弗里·凯斯勒", category: 2, symbolSize: 42, symbol: `image://${Img7}` },
{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 50 } { id: "shenghongda", name: "杰弗里·凯德勒", category: 2, symbolSize: 42, symbol: `image://${Img8}` }
// { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 }, // { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 },
// { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 }, // { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 },
// { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 }, // { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 },
...@@ -86,10 +97,10 @@ onMounted(() => { ...@@ -86,10 +97,10 @@ onMounted(() => {
const option = { const option = {
title: { text: "", left: "center" }, title: { text: "", left: "center" },
tooltip: {}, tooltip: {},
legend: { // legend: {
data: graphData.categories.map(item => item.name), // data: graphData.categories.map(item => item.name),
left: "left" // left: "left"
}, // },
series: [ series: [
{ {
type: "graph", type: "graph",
...@@ -104,7 +115,33 @@ onMounted(() => { ...@@ -104,7 +115,33 @@ onMounted(() => {
roam: true, // 支持缩放、平移 roam: true, // 支持缩放、平移
label: { label: {
show: true, show: true,
fontSize: 12 fontSize: 14,
position: "bottom",
formatter: function (params) {
// 根据条件返回不同样式的文本
if (params.data.category === 0) {
return `{a|${params.name}}`; // 使用富文本样式
} else if (params.data.category === 1) {
return `{b|${params.name}}`;
} else {
return params.name; // 默认样式
}
},
rich: {
a: {
// 重要节点的样式
color: "#000",
fontSize: 18,
fontWeight: "bold",
padding: [2, 4],
borderRadius: 2
},
b: {
// 普通节点的样式
color: "rgba(5, 95, 194, 1)",
fontSize: 14,
}
}
}, },
edgeSymbol: ["arrow", "none"], // 边的箭头 edgeSymbol: ["arrow", "none"], // 边的箭头
edgeSymbolSize: [8, 50], edgeSymbolSize: [8, 50],
...@@ -136,7 +173,8 @@ onMounted(() => { ...@@ -136,7 +173,8 @@ onMounted(() => {
<style scoped> <style scoped>
.chart-container { .chart-container {
width: 100%; width: 100%;
height: 600px; height: 430px;
background-color: #fff; /* 深色背景，模拟原图风格 */ margin: 0 auto;
background-color: #f7f8f9; /* 深色背景，模拟原图风格 */
} }
</style> </style>
src/views/overView/component/ResourceSupport.vue
浏览文件 @ b6341181
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div class="resource-content" style="width: 49.25%;margin-left: 1.5%;"> <div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/resource-icon-2.png"></img> <img class="item-header-icon" src="@/assets/images/icon/resource-icon-2.png"></img>
<div class="item-header-text" style="width: 130px;">创新主体排名</div> <div class="item-header-text" style="width: 200px; margin-right: 130px;">创新主体排名</div>
<el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn"> <el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">
<el-radio-button value="enterprise" border>科技企业 <el-radio-button value="enterprise" border>科技企业
</el-radio-button> </el-radio-button>
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
</div> </div>
美国 美国
</div> </div>
<el-select v-model="areaSelect" placeholder="" style="width: 150px;float: right;margin-right: 20px;" <el-select v-model="areaSelect" placeholder="" style="width: 150px;margin-left: 160px;margin-right: 20px;"
size="small"> size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -117,11 +117,11 @@ ...@@ -117,11 +117,11 @@
<div style="display: flex;height: 400px;"> <div style="display: flex;height: 400px;">
<div style=" width:60%;height: 100%;" id="char4"> <div style=" width:60%;height: 100%;" id="char4">
</div> </div>
<div style="display: grid;width: 35%;margin: 10px;"> <div style="width: 35%;margin: 20px 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 150px;float: right ;" size="small"> <el-select v-model="areaSelect" placeholder="" style="width: 120px;margin-left: 150px;" size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<div> <div style="margin-top: 100px;">
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;"> <div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
<div class="legend-icon" style="background-color:#CE4F51 ;"> <div class="legend-icon" style="background-color:#CE4F51 ;">
</div> </div>
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
</div> </div>
<!-- 右侧选择器 --> <!-- 右侧选择器 -->
<el-select v-model="paperSelect" placeholder="" style="width: 150px;float: right;margin-right: 20px;" <el-select v-model="paperSelect" placeholder="" style="width: 150px;float: right;margin-right: 10px;"
size="small"> size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -422,7 +422,7 @@ onMounted(() => { ...@@ -422,7 +422,7 @@ onMounted(() => {
height: 450px; height: 450px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px); border-radius: 10px;
/* 业务系统/模块阴影 */ /* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
...@@ -496,7 +496,7 @@ onMounted(() => { ...@@ -496,7 +496,7 @@ onMounted(() => {
font-size: 16px; font-size: 16px;
line-height: 48px; line-height: 48px;
text-align: right; text-align: right;
margin-left: 30px;
width: calc(100% - 350px); width: calc(100% - 350px);
.item-header-right-icon { .item-header-right-icon {
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ b6341181
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
数据来源：美国某某局</div> 数据来源：美国某某局</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style="display: flex;margin: 10px;"> <div style="display: flex;margin: 10px 20px; justify-content: space-between;">
<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn"> <el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域 <el-radio-button value="all" border>全部领域
</el-radio-button> </el-radio-button>
...@@ -91,11 +91,11 @@ ...@@ -91,11 +91,11 @@
<div style=" width:60%;height: 100%;" id="char2"> <div style=" width:60%;height: 100%;" id="char2">
</div> </div>
<div style="display: grid;width: 35%;margin: 10px;"> <div style="width: 35%;margin: 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;margin: 10px;" size="small"> <el-select v-model="areaSelect" placeholder="" style="width: 120px;margin: 10px; margin-left: 140px;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<div> <div style="width: 80%; margin: 60px auto 0;">
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;"> <div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
<div class="legend-icon" style="background-color:#CE4F51 ;"> <div class="legend-icon" style="background-color:#CE4F51 ;">
</div> </div>
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import router from '@/router/index' import router from "@/router/index";
import * as echarts from "echarts"; import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue"; import Timeline from "../component/Timeline.vue";
...@@ -240,8 +240,8 @@ const distribution = ref([ ...@@ -240,8 +240,8 @@ const distribution = ref([
text: "1626", text: "1626",
unit: "个", unit: "个",
change: "较上月+3", change: "较上月+3",
path: '/billHome', path: "/billHome",
color: ['#9AC8FF', '#BCDCFF', '#E7F4FF', '#0F5EDB'] color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
}, },
{ {
titlle: "行政令", titlle: "行政令",
...@@ -249,8 +249,8 @@ const distribution = ref([ ...@@ -249,8 +249,8 @@ const distribution = ref([
text: "1626", text: "1626",
unit: "个", unit: "个",
change: "较上月+1", change: "较上月+1",
path: '/decree', path: "/decree",
color: ['#FDE19A', '#FEECBD', '#FFFBE6', '#D68E16'] color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
}, },
{ {
titlle: "科技智库", titlle: "科技智库",
...@@ -258,8 +258,8 @@ const distribution = ref([ ...@@ -258,8 +258,8 @@ const distribution = ref([
text: "66", text: "66",
unit: "次", unit: "次",
change: "较上月+2", change: "较上月+2",
path: '/thinkTank', path: "/thinkTank",
color: ['#C9AAF0', '#DFCAF6', '#FAF1FF', '#531DAC'] color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"]
}, },
{ {
titlle: "出口管制", titlle: "出口管制",
...@@ -267,8 +267,8 @@ const distribution = ref([ ...@@ -267,8 +267,8 @@ const distribution = ref([
text: "66", text: "66",
unit: "次", unit: "次",
change: "较上月+1", change: "较上月+1",
path: '/exportControl', path: "/exportControl",
color: ['#96DFDD', '#BCEFEC', '#E7FFFB', '#006E75'] color: ["#96DFDD", "#BCEFEC", "#E7FFFB", "#006E75"]
}, },
{ {
titlle: "投融资限制", titlle: "投融资限制",
...@@ -276,8 +276,8 @@ const distribution = ref([ ...@@ -276,8 +276,8 @@ const distribution = ref([
text: "119", text: "119",
unit: "次", unit: "次",
change: "较上月+1", change: "较上月+1",
path: '/finance', path: "/finance",
color: ['#F5BEBC', '#F7D3D0', '#FEF1F0', '#C64C4E'] color: ["#F5BEBC", "#F7D3D0", "#FEF1F0", "#C64C4E"]
}, },
{ {
titlle: "市场准入", titlle: "市场准入",
...@@ -285,8 +285,8 @@ const distribution = ref([ ...@@ -285,8 +285,8 @@ const distribution = ref([
text: "223", text: "223",
unit: "次", unit: "次",
change: "较上个月+1", change: "较上个月+1",
path: '/marketAccessRestrictions', path: "/marketAccessRestrictions",
color: ['#FFE3B9', '#FFEDCE', '#FFF7E6', '#D46B08'] color: ["#FFE3B9", "#FFEDCE", "#FFF7E6", "#D46B08"]
} }
]); ]);
...@@ -321,7 +321,7 @@ const chart1Data = ref({ ...@@ -321,7 +321,7 @@ const chart1Data = ref({
}); });
const strengthBtn = ref("all"); const strengthBtn = ref("all");
function handleStrengthBtn() { } function handleStrengthBtn() {}
//打压遏制强度变化时间选择器 //打压遏制强度变化时间选择器
const strengthSelect = ref("近一年"); const strengthSelect = ref("近一年");
const strengthTimeList = ref([ const strengthTimeList = ref([
...@@ -374,11 +374,11 @@ const setChart = (option, chartId) => { ...@@ -374,11 +374,11 @@ const setChart = (option, chartId) => {
}; };
// 点击打压遏制手段分布 跳转到各个页面 // 点击打压遏制手段分布 跳转到各个页面
const handleClickItem = (item) => { const handleClickItem = item => {
router.push({ router.push({
path: item.path path: item.path
}) });
} };
onMounted(() => { onMounted(() => {
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true); let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
...@@ -467,7 +467,7 @@ onMounted(() => { ...@@ -467,7 +467,7 @@ onMounted(() => {
height: 450px; height: 450px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px); border-radius: 10px;
/* 业务系统/模块阴影 */ /* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
......
src/views/overView/component/strengthComparison.vue
浏览文件 @ b6341181
...@@ -107,7 +107,7 @@ import DivideHeader from "@/components/DivideHeader.vue"; ...@@ -107,7 +107,7 @@ import DivideHeader from "@/components/DivideHeader.vue";
import radarChart3 from '../js/radarChart3.js' import radarChart3 from '../js/radarChart3.js'
//科技实力按钮 //科技实力按钮
const strengthBtn = ref('enterprise') const strengthBtn = ref('potential')
function handlestrengthBtn() { function handlestrengthBtn() {
} }
...@@ -297,6 +297,7 @@ onMounted(() => { ...@@ -297,6 +297,7 @@ onMounted(() => {
.resource-box { .resource-box {
height: 800px; height: 800px;
// width: 1600px;
} }
.title-text { .title-text {
...@@ -326,7 +327,7 @@ onMounted(() => { ...@@ -326,7 +327,7 @@ onMounted(() => {
height: 550px; height: 550px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px); border-radius: 10px;
/* 业务系统/模块阴影 */ /* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
......
src/views/overView/index.vue
浏览文件 @ b6341181
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="content-title"><span>国家科技安全</span>> <span>中美博弈概览 </span></div> <div class="content-title"><span>国家科技安全</span>> <span>中美博弈概览 </span></div>
<!-- 中美博弈最新动态内容--> <!-- 中美博弈最新动态内容-->
<div class="content-box"> <div class="content-box">
<div class="title-text">中美博弈最新动态 </div> <div class="title-text">中美博弈最新动态</div>
<div class="title-text-small"> <div class="title-text-small">
提供半导体、AI、量子等关键领域的竞争动态、政策追踪与产业链分析，实时把握中美博弈全局 提供半导体、AI、量子等关键领域的竞争动态、政策追踪与产业链分析，实时把握中美博弈全局
</div> </div>
...@@ -21,29 +21,39 @@ ...@@ -21,29 +21,39 @@
<div class="item-card" style=""> <div class="item-card" style="">
<div class="item-card-btn-left" @click="changeOrganizationNews('left')"> <div class="item-card-btn-left" @click="changeOrganizationNews('left')">
<img class="item-btn-icon" src="@/assets/images/icon/card-btn-left.png" /> <img class="item-btn-icon" src="@/assets/images/icon/card-btn-left.png" />
</div> </div>
<!-- 机构动态内容--> <!-- 机构动态内容-->
<div class="item-card-content"> <div class="item-card-content">
<div class="item-card-content-header"> <div class="item-card-content-header">
<div style="width: calc(100% - 80px);"> <div style="width: calc(100% - 80px)">
<div class="item-card-content-title"> <div class="item-card-content-title">
{{ organizationNews[organizationNewsShow].title }} {{ organizationNews[organizationNewsShow].title }}
</div> </div>
<div class="item-card-content-title-small"> <div class="item-card-content-title-small">
{{ organizationNews[organizationNewsShow].time + ' ' + {{
organizationNews[organizationNewsShow].adress }} organizationNews[organizationNewsShow].time +
" · " +
organizationNews[organizationNewsShow].adress
}}
</div> </div>
</div> </div>
<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image" alt=""> <img
class="item-card-content-title-image"
:src="organizationNews[organizationNewsShow].image"
alt=""
/>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div class="item-card-content-text "> <div class="item-card-content-text">
{{ organizationNews[organizationNewsShow].content }} {{ organizationNews[organizationNewsShow].content }}
</div> </div>
<div style="display: flex"> <div style="display: flex;margin-top: 30px;">
<div class="item-card-content-tag" v-for="tag, index in organizationNews[organizationNewsShow].tag" <div
:key="index" :style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }"> class="item-card-content-tag"
v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
:key="index"
:style="{ color: tag.textColor, background: tag.color, border: `1px solid ${tag.textColor}` }"
>
{{ tag.text }} {{ tag.text }}
</div> </div>
</div> </div>
...@@ -51,12 +61,11 @@ ...@@ -51,12 +61,11 @@
<div class="item-card-btn-right" @click="changeOrganizationNews('right')"> <div class="item-card-btn-right" @click="changeOrganizationNews('right')">
<img class="item-btn-icon" src="@/assets/images/icon/card-btn-right.png" /> <img class="item-btn-icon" src="@/assets/images/icon/card-btn-right.png" />
</div> </div>
</div> </div>
<div class="item-card-right "> <div class="item-card-right">
<div class="item-list"> <div class="item-list">
<div v-for="organizationItem, index in organizationList" :key="index" style="height: 40px"> <div v-for="(organizationItem, index) in organizationList" :key="index" style="height: 40px">
<div style="display: flex;margin: 10px"> <div style="display: flex; margin: 10px">
<div class="item-list-punblier"> <div class="item-list-punblier">
{{ organizationItem.punblier }} {{ organizationItem.punblier }}
</div> </div>
...@@ -69,7 +78,6 @@ ...@@ -69,7 +78,6 @@
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -78,18 +86,23 @@ ...@@ -78,18 +86,23 @@
<div class="item left"> <div class="item left">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
<div class="item-header-text" style="background-color: #CE4F51;">风险信号</div> <div class="item-header-text" style="background-color: #ce4f51">风险信号</div>
<div class="item-header-num" style="background-color: #ce4f51">
<div class="num">{{ warningList.length }}</div>
</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div style="padding: 30px 23px;height: 350px;"> <div style="padding: 30px 23px; height: 400px">
<div class="waring-item" v-for="(item, index) in warningList" :key="index"> <div class="waring-item" v-for="(item, index) in warningList" :key="index">
<div style="display: flex;height: 40px;"> <div style="display: flex; height: 40px">
<div class="waring-status" :style="{ <div
color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A', class="waring-status"
backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED' :style="{
}"> color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
{{ item.status === 0 ? '特别重大' : item.status === 1 ? '重大风险' : '一般风险' backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
}} }"
>
{{ item.status === 0 ? "特别重大" : item.status === 1 ? "重大风险" : "一般风险" }}
</div> </div>
<div class="waring-text"> <div class="waring-text">
{{ item.title }} {{ item.title }}
...@@ -97,26 +110,28 @@ ...@@ -97,26 +110,28 @@
<div class="waring-time">{{ item.time }}</div> <div class="waring-time">{{ item.time }}</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
</div> </div>
</div> </div>
<div class="item-btn"> <div class="item-btn" @click="handleToMoreRiskSignal">
查看更多 <div class="icon">
<img src="@/assets/images/more-signal.png" alt="" />
</div>
<div class="text">{{ "查看更多" }}</div>
</div> </div>
</div> </div>
<!--新闻资讯--> <!--新闻资讯-->
<div class="item right"> <div class="item right">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png" />
<div class="item-header-text" style="background: rgba(255, 255, 255, 0.65) ;color:#055FC2">新闻资讯</div> <div class="item-header-text" style="background: rgba(255, 255, 255, 0.65); color: #055fc2">新闻资讯</div>
<div class="item-header-more" style=" color:#055FC2">更多 +</div> <div class="item-header-more" style="color: #055fc2; cursor: pointer;" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div class="news-box"> <div class="news-box">
<div v-for="item, index in newsList" :key="index" class="news-box-item"> <div v-for="(item, index) in newsList" :key="index" class="news-box-item">
<div style=" display: flex;"> <div style="display: flex">
<img :src="item.image" /> <img :src="item.image" />
<div style="padding: 0 10px ;"> <div style="padding: 0 10px">
<div class="news-box-title"> <div class="news-box-title">
{{ item.title }} {{ item.title }}
</div> </div>
...@@ -132,20 +147,20 @@ ...@@ -132,20 +147,20 @@
<div class="item right"> <div class="item right">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png" />
<div class="item-header-text" style="background: rgba(255, 255, 255, 0.65) ;color:#055FC2">人物动态</div> <div class="item-header-text" style="background: rgba(255, 255, 255, 0.65); color: #055fc2">人物动态</div>
<div class="item-header-more" style=" color:#055FC2">更多 +</div> <div class="item-header-more" style="color: #055fc2">更多 +</div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<div class="character-box"> <div class="character-box">
<div class="character-item" v-for="item, index in characterDynamics" :key="index"> <div class="character-item" v-for="(item, index) in characterDynamics" :key="index">
<img :src="item.image" class="character-image" /> <img :src="item.image" class="character-image" />
<div class="talk-box"> <div class="talk-box">
<div style="display: flex;"> <div style="display: flex">
<div class="talk-title"> <div class="talk-title">
{{ item.name }} {{ item.name }}
</div> </div>
<div style="width: 60%;text-align: right;"> <div style="width: 60%; text-align: right">
{{ item.position + '.' + item.time }} {{ item.position + "." + item.time }}
</div> </div>
</div> </div>
{{ item.talk }} {{ item.talk }}
...@@ -159,9 +174,7 @@ ...@@ -159,9 +174,7 @@
<ResourceSupport /> <ResourceSupport />
<strengthComparison /> <strengthComparison />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -172,9 +185,23 @@ import ResourceSupport from "./component/ResourceSupport.vue"; ...@@ -172,9 +185,23 @@ import ResourceSupport from "./component/ResourceSupport.vue";
import strengthComparison from "./component/strengthComparison.vue"; import strengthComparison from "./component/strengthComparison.vue";
import router from "@/router"; import router from "@/router";
import { color } from "echarts"; import { color } from "echarts";
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
const organizationNews = ref([ const organizationNews = ref([
{ {
title: "1美国白宫发布关于进一步延长TikTok执法宽限期的行政令", title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日", time: "2025年9月16日",
adress: "美国白宫", adress: "美国白宫",
image: "/testData/organizationNews-image1.png", image: "/testData/organizationNews-image1.png",
...@@ -203,12 +230,14 @@ const organizationNews = ref([ ...@@ -203,12 +230,14 @@ const organizationNews = ref([
tag: [ tag: [
{ {
color: "#F5222D", color: "#F5222D",
textColor: " #FFF1F0", textColor: "#FFF1F0",
borderColor: 'rgba(255, 163, 158, 1)',
text: "人工智能" text: "人工智能"
}, },
{ {
color: "#E6F4FF", color: "#E6F4FF",
textColor: " #1677FF", textColor: "#1677FF",
borderColor: 'rgba(145, 202, 255, 1)',
text: "通信网络" text: "通信网络"
} }
] ]
...@@ -369,7 +398,7 @@ function changeOrganizationNews(type) { ...@@ -369,7 +398,7 @@ function changeOrganizationNews(type) {
: (organizationNewsShow.value = organizationNewsShow.value + 1); : (organizationNewsShow.value = organizationNewsShow.value + 1);
} }
} }
onMounted(() => { }); onMounted(() => {});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -378,8 +407,10 @@ onMounted(() => { }); ...@@ -378,8 +407,10 @@ onMounted(() => { });
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
background-color: #ffffff; background-image: url("./assets/images/bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #fff;
.content-title { .content-title {
height: 64px; height: 64px;
color: #fff; color: #fff;
...@@ -438,8 +469,8 @@ onMounted(() => { }); ...@@ -438,8 +469,8 @@ onMounted(() => { });
height: 500px; height: 500px;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1)); border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---, 10px); border-radius: 10px;
/* 业务系统/模块阴影 */ /* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.65);
...@@ -452,7 +483,7 @@ onMounted(() => { }); ...@@ -452,7 +483,7 @@ onMounted(() => { });
.item-header-icon { .item-header-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 15px; margin: 15px 20px;
} }
.item-header-text { .item-header-text {
...@@ -463,6 +494,25 @@ onMounted(() => { }); ...@@ -463,6 +494,25 @@ onMounted(() => { });
font-size: 20px; font-size: 20px;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
font-weight: bold;
}
.item-header-num {
width: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
.num {
width: 24px;
height: 20px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: center;
}
} }
.item-header-more { .item-header-more {
...@@ -498,6 +548,7 @@ onMounted(() => { }); ...@@ -498,6 +548,7 @@ onMounted(() => { });
box-sizing: border-box; box-sizing: border-box;
border: 1px; border: 1px;
border-radius: 4px; border-radius: 4px;
border: 1px solid transparent;
} }
.item-content { .item-content {
...@@ -511,7 +562,7 @@ onMounted(() => { }); ...@@ -511,7 +562,7 @@ onMounted(() => { });
height: 100%; height: 100%;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1)); border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px; border-radius: 10px;
/* 业务系统/模块阴影 */ /* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
...@@ -529,11 +580,11 @@ onMounted(() => { }); ...@@ -529,11 +580,11 @@ onMounted(() => { });
padding: 20px; padding: 20px;
.item-card-content-header { .item-card-content-header {
height: 110px;
display: flex; display: flex;
justify-content: space-between;
.item-card-content-title { .item-card-content-title {
color: var(rgba(59, 65, 75, 1)); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -549,7 +600,8 @@ onMounted(() => { }); ...@@ -549,7 +600,8 @@ onMounted(() => { });
} }
.item-card-content-title-small { .item-card-content-title-small {
color: var(rgba(95, 101, 108, 1)); margin-top: 15px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -561,12 +613,13 @@ onMounted(() => { }); ...@@ -561,12 +613,13 @@ onMounted(() => { });
} }
.item-card-content-title-image { .item-card-content-title-image {
height: 50px; height: 80px;
width: 50px; width: 80px;
} }
.item-card-content-text { .item-card-content-text {
color: var(rgba(95, 101, 108, 1)); margin-top: 16px;
color:rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -648,41 +701,43 @@ onMounted(() => { }); ...@@ -648,41 +701,43 @@ onMounted(() => { });
} }
.waring-item { .waring-item {
height: 48px;
cursor: pointer;
margin: 0 auto;
&:hover {
background: var(--color-bg-hover);
}
.waring-status { .waring-status {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
padding: 2px; padding: 4px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
box-sizing: border-box;
} }
.waring-text { .waring-text {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
width: calc(100% - 80px); width: calc(100% - 120px);
padding: 0 16px; padding: 0 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 48px;
letter-spacing: 0px;
text-align: justify; text-align: justify;
overflow: hidden; overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-all; white-space: nowrap;
} }
.waring-time { .waring-time {
width: 68px; width: 68px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 48px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: right; text-align: right;
} }
...@@ -698,19 +753,30 @@ onMounted(() => { }); ...@@ -698,19 +753,30 @@ onMounted(() => { });
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8; gap: 8px;
padding: 5px 16px 5px 16px; padding: 5px 16px 5px 16px;
border-radius: 6px; border-radius: 6px;
background: rgba(5, 95, 194, 1); background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1); cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
}
} }
/* 新闻资讯 */ /* 新闻资讯 */
......
src/views/writtingAsstaint/index.vue
浏览文件 @ b6341181
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
:class="{ tempActive: tempActiveIndex === index }" :class="{ tempActive: tempActiveIndex === index }"
v-for="(temp, index) in tempList" v-for="(temp, index) in tempList"
:key="index" :key="index"
@click="handleClickTemp(item, index)" @click="handleClickTemp(temp, index)"
> >
<div class="header"> <div class="header">
<div class="title">{{ temp.title }}</div> <div class="title">{{ temp.title }}</div>
...@@ -359,7 +359,7 @@ const tabList = ref([ ...@@ -359,7 +359,7 @@ const tabList = ref([
]); ]);
const tempList = ref([ const tempList = ref([
{ {
title: "法案", title: "法案1",
desc: "基于法案内容生成各维度的综合分析报告" desc: "基于法案内容生成各维度的综合分析报告"
}, },
{ {
...@@ -381,6 +381,7 @@ const tempActiveIndex = ref(0); ...@@ -381,6 +381,7 @@ const tempActiveIndex = ref(0);
const handleClickTemp = (item, index) => { const handleClickTemp = (item, index) => {
tempActiveIndex.value = index; tempActiveIndex.value = index;
curTempTitle.value = item.title; curTempTitle.value = item.title;
}; };
// 导出 // 导出
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论