提交 d0ae5131 authored 作者: 朱政's avatar 朱政

Merge branch 'master' into zz-dev

<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.000000" height="52.000000" fill="none" customFrame="#000000">
<defs>
<g id="pixso_custom_effect_0">
<effect x="0.000000" y="0.000000" visibility="visible" fill="rgb(0,0,0)" fill-opacity="0.100000001" effectType="dropShadow" stdDeviation="8" radius="0" />
</g>
<filter id="filter_0" width="52.000000" height="52.000000" x="0.000000" y="0.000000" filterUnits="userSpaceOnUse" customEffect="url(#pixso_custom_effect_0)" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feOffset dx="0.000000" dy="0.000000" in="SourceAlpha" />
<feGaussianBlur stdDeviation="2.66666675" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 " />
<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
</filter>
<clipPath id="clipPath_0">
<rect width="16.000000" height="16.000000" x="18.000000" y="18.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="普通企业节点" width="36.000000" height="36.000000" x="8.000000" y="8.000000" />
<g filter="url(#filter_0)">
<circle id="椭圆 25" cx="26" cy="26" r="18" fill="rgb(246,250,255)" />
<circle id="椭圆 25" cx="26" cy="26" r="17.5" stroke="rgb(231,243,255)" stroke-width="1.000000" />
</g>
<g id="企业 " clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
<rect id="企业 " width="16.000000" height="16.000000" x="18.000000" y="18.000000" />
<path id="矢量 370" d="M33.4667 31.9231L32.9333 31.9231L32.9333 24.3846C32.9333 23.2 31.9733 22.2308 30.8 22.2308L27.6 22.2308L27.6 21.1538C27.6 19.9692 26.64 19 25.4667 19L21.2 19C20.0267 19 19.0667 19.9692 19.0667 21.1538L19.0667 31.9231L18.5333 31.9231C18.2347 31.9231 18 32.16 18 32.4615C18 32.7631 18.2347 33 18.5333 33L33.4667 33C33.7653 33 34 32.7631 34 32.4615C34 32.16 33.7653 31.9231 33.4667 31.9231ZM26.5333 22.2308L26.5333 23.3077L26.5333 31.9231L20.1333 31.9231L20.1333 21.1538C20.1333 20.5615 20.6133 20.0769 21.2 20.0769L25.4667 20.0769C26.0533 20.0769 26.5333 20.5615 26.5333 21.1538L26.5333 22.2308ZM31.8667 31.9231L27.6 31.9231L27.6 23.3077L30.8 23.3077C31.3867 23.3077 31.8667 23.7923 31.8667 24.3846L31.8667 31.9231ZM24.9333 22.2308L21.7333 22.2308C21.4347 22.2308 21.2 22.4677 21.2 22.7692C21.2 23.0708 21.4347 23.3077 21.7333 23.3077L24.9333 23.3077C25.232 23.3077 25.4667 23.0708 25.4667 22.7692C25.4667 22.4677 25.232 22.2308 24.9333 22.2308ZM24.9333 25.4615L21.7333 25.4615C21.4347 25.4615 21.2 25.6985 21.2 26C21.2 26.3015 21.4347 26.5385 21.7333 26.5385L24.9333 26.5385C25.232 26.5385 25.4667 26.3015 25.4667 26C25.4667 25.6985 25.232 25.4615 24.9333 25.4615ZM24.9333 28.6923L21.7333 28.6923C21.4347 28.6923 21.2 28.9292 21.2 29.2308C21.2 29.5323 21.4347 29.7692 21.7333 29.7692L24.9333 29.7692C25.232 29.7692 25.4667 29.5323 25.4667 29.2308C25.4667 28.9292 25.232 28.6923 24.9333 28.6923ZM30.2667 25.4615L29.2 25.4615C28.9013 25.4615 28.6667 25.6985 28.6667 26C28.6667 26.3015 28.9013 26.5385 29.2 26.5385L30.2667 26.5385C30.5653 26.5385 30.8 26.3015 30.8 26C30.8 25.6985 30.5653 25.4615 30.2667 25.4615ZM30.2667 28.6923L29.2 28.6923C28.9013 28.6923 28.6667 28.9292 28.6667 29.2308C28.6667 29.5323 28.9013 29.7692 29.2 29.7692L30.2667 29.7692C30.5653 29.7692 30.8 29.5323 30.8 29.2308C30.8 28.9292 30.5653 28.6923 30.2667 28.6923Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</g>
</svg>
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.000000" height="52.000000" fill="none" customFrame="#000000">
<defs>
<g id="pixso_custom_effect_1">
<effect x="0.000000" y="0.000000" visibility="visible" fill="rgb(0,0,0)" fill-opacity="0.100000001" effectType="dropShadow" stdDeviation="8" radius="0" />
</g>
<filter id="filter_1" width="52.000000" height="52.000000" x="0.000000" y="0.000000" filterUnits="userSpaceOnUse" customEffect="url(#pixso_custom_effect_1)" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feOffset dx="0.000000" dy="0.000000" in="SourceAlpha" />
<feGaussianBlur stdDeviation="2.66666675" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 " />
<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
</filter>
<clipPath id="clipPath_1">
<rect width="16.000000" height="16.000000" x="18.000000" y="18.000000" fill="rgb(255,255,255)" />
</clipPath>
</defs>
<rect id="普通企业节点" width="36.000000" height="36.000000" x="8.000000" y="8.000000" />
<g filter="url(#filter_1)">
<circle id="椭圆 25" cx="26" cy="26" r="18" fill="rgb(255,255,255)" />
<circle id="椭圆 25" cx="26" cy="26" r="17.5" stroke="rgb(230,231,232)" stroke-width="1.000000" />
</g>
<g id="企业 " clip-path="url(#clipPath_1)" customFrame="url(#clipPath_1)">
<rect id="企业 " width="16.000000" height="16.000000" x="18.000000" y="18.000000" />
<path id="矢量 370" d="M33.4667 31.9231L32.9333 31.9231L32.9333 24.3846C32.9333 23.2 31.9733 22.2308 30.8 22.2308L27.6 22.2308L27.6 21.1538C27.6 19.9692 26.64 19 25.4667 19L21.2 19C20.0267 19 19.0667 19.9692 19.0667 21.1538L19.0667 31.9231L18.5333 31.9231C18.2347 31.9231 18 32.16 18 32.4615C18 32.7631 18.2347 33 18.5333 33L33.4667 33C33.7653 33 34 32.7631 34 32.4615C34 32.16 33.7653 31.9231 33.4667 31.9231ZM26.5333 22.2308L26.5333 23.3077L26.5333 31.9231L20.1333 31.9231L20.1333 21.1538C20.1333 20.5615 20.6133 20.0769 21.2 20.0769L25.4667 20.0769C26.0533 20.0769 26.5333 20.5615 26.5333 21.1538L26.5333 22.2308ZM31.8667 31.9231L27.6 31.9231L27.6 23.3077L30.8 23.3077C31.3867 23.3077 31.8667 23.7923 31.8667 24.3846L31.8667 31.9231ZM24.9333 22.2308L21.7333 22.2308C21.4347 22.2308 21.2 22.4677 21.2 22.7692C21.2 23.0708 21.4347 23.3077 21.7333 23.3077L24.9333 23.3077C25.232 23.3077 25.4667 23.0708 25.4667 22.7692C25.4667 22.4677 25.232 22.2308 24.9333 22.2308ZM24.9333 25.4615L21.7333 25.4615C21.4347 25.4615 21.2 25.6985 21.2 26C21.2 26.3015 21.4347 26.5385 21.7333 26.5385L24.9333 26.5385C25.232 26.5385 25.4667 26.3015 25.4667 26C25.4667 25.6985 25.232 25.4615 24.9333 25.4615ZM24.9333 28.6923L21.7333 28.6923C21.4347 28.6923 21.2 28.9292 21.2 29.2308C21.2 29.5323 21.4347 29.7692 21.7333 29.7692L24.9333 29.7692C25.232 29.7692 25.4667 29.5323 25.4667 29.2308C25.4667 28.9292 25.232 28.6923 24.9333 28.6923ZM30.2667 25.4615L29.2 25.4615C28.9013 25.4615 28.6667 25.6985 28.6667 26C28.6667 26.3015 28.9013 26.5385 29.2 26.5385L30.2667 26.5385C30.5653 26.5385 30.8 26.3015 30.8 26C30.8 25.6985 30.5653 25.4615 30.2667 25.4615ZM30.2667 28.6923L29.2 28.6923C28.9013 28.6923 28.6667 28.9292 28.6667 29.2308C28.6667 29.5323 28.9013 29.7692 29.2 29.7692L30.2667 29.7692C30.5653 29.7692 30.8 29.5323 30.8 29.2308C30.8 28.9292 30.5653 28.6923 30.2667 28.6923Z" fill="rgb(59,65,75)" fill-rule="nonzero" />
</g>
</svg>
...@@ -165,3 +165,10 @@ export function getRelevantMeasures(params) { ...@@ -165,3 +165,10 @@ export function getRelevantMeasures(params) {
// data, // data,
// }) // })
// } // }
export function getRuleOrg(params) {
return request({
method: 'POST',
url: `/api/organization/relate/ruleOrg`, data: params
})
}
\ No newline at end of file
<template>
<div class="news-box">
<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 normalizedList" :key="index"
@click="handleClickToNewsDetail(news)">
<div class="left">
<img :src="getProxyUrl(news.newsImage) || defaultImg" alt="" referrerpolicy="no-referrer"
@error="e => (e.target.src = errImg || News1)" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle || news.title }}</div>
<div class="time">
{{ news.newsDate ? news.newsDate.slice(5) : "" }} {{ news.newsOrg ? "-" + news.newsOrg : "" }}
</div>
</div>
<div class="right-footer">{{ news.newsContent || news.description }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import router from "@/router/index";
import News1 from "@/assets/images/news1.png"; // 错误图片
import defaultNew from "@/assets/images/default-icon-news.png"; // 默认图片
let { list, newsList, errImg, defaultImg } = defineProps({
list: {
type: Array,
default: () => []
},
// 兼容历史用法:部分页面使用 newsList 作为入参
newsList: {
type: Array,
default: undefined
},
defaultImg: {
type: String,
default: defaultNew
},
errImg: {
type: String,
default: ''
}
});
// 统一对外渲染数据源:优先使用 list,其次兼容 newsList
const normalizedList = computed(() => {
return (Array.isArray(list) && list.length ? list : newsList) || [];
});
// 处理图片代理
const getProxyUrl = url => {
if (!url) return "";
const urlStr = String(url);
// 排除非 http 开头(相对路径)、已经是代理链接、或者是本地链接
if (
!urlStr.startsWith("http") ||
urlStr.includes("images.weserv.nl") ||
urlStr.includes("localhost") ||
urlStr.includes("127.0.0.1")
) {
return url;
}
// 移除协议头 http:// 或 https://
const cleanUrl = urlStr.replace(/^https?:\/\//i, "");
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
const handleClickToNewsDetail = news => {
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: news.newsId ?? news.id
}
});
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script>
<style lang="scss" scoped>
.news-box {
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);
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-left: 21px;
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 11px;
margin-left: 20px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
.box3-item {
display: flex;
height: 77px;
width: 749px;
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%;
border-radius: 4px;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
&:hover {
text-decoration: underline;
color: var(--color-main-active);
.title {
color: var(--color-main-active);
}
}
.title {
margin-top: 13px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 157px;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
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: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
<template>
<div class="search-wrapper">
<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
<input v-model="inputValue" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
<div class="search-btn" @click="handleSearch">
<img src="@/assets/icons/search-icon.png" alt />
搜索
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
searchText: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
})
const emit = defineEmits(['search', 'update:searchText'])
const inputValue = computed({
get: () => props.searchText,
set: (value) => emit('update:searchText', value)
})
const handleSearch = () => {
emit('search')
}
</script>
<style lang="scss" scoped>
.search-wrapper {
width: 960px;
height: 48px;
.search-main {
display: flex;
padding-right: 3px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
width: 960px;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 838px;
height: 48px;
background-color: transparent;
font-size: 14px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
}
.search-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 46px;
margin-right: -3px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: #fff;
img {
width: 18px;
height: 18px;
margin-right: 8px;
}
}
}
}
</style>
\ No newline at end of file
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.000000" height="8.000000" fill="none" customFrame="#000000">
<path id="多边形 2" d="M7.4641 6L0.535898 6L4 0L7.4641 6Z" fill="rgb(255,255,255)" fill-rule="evenodd" transform="matrix(0,1,-1,0,8,0)" />
</svg>
<template>
<div class="sider-tabs-wrapper">
<div class="sider-item"
:class="{'sider-item-active': sider.active}"
v-for="sider, index in siderList" :key="index"
@click="handleClickSiderItem(sider)"
>
<div
class="sider-item-text text-primary-65-clor text-tip-1"
:class="{'sider-item-text-active': sider.active}">{{ sider.name }}</div>
<div class="sider-item-icon" v-show="sider.active">
<img src="./active-icon.svg" alt="">
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
siderList: {
type: Array,
default: [
{
name: '分析内容1',
active: true
},
{
name: '分析内容2',
active: false
},
{
name: '分析内容3',
active: false
},
]
},
})
const emits = defineEmits(['clickSiderItem'])
const handleClickSiderItem = (sider) => {
emits('clickSiderItem', sider)
}
</script>
<style lang="scss" scoped>
.sider-tabs-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
.sider-item {
padding: 4px 28px;
border-radius: 16px;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
.sider-item-icon{
position: absolute;
top: 6px;
right: 16px;
width: 8px;
height: 8px;
img{
width: 100%;
height: 100%;
}
}
}
}
.sider-item-active{
background: var(--color-main-active);
}
.sider-item-text-active {
color: rgb(255,255,255)
}
</style>
\ No newline at end of file
<template>
<div class="tip-wrapper">
<div class="icon">
<img src="./tip-icon.svg" alt="">
</div>
<div class="text text-tip-2 text-primary-50-clor">{{ `数据来源:${dataSource},数据时间:${dataTime}` }}</div>
</div>
</template>
<script setup>
const props = defineProps({
dataSource: {
type: String,
default: '美国国会官网'
},
dataTime: {
type: String,
default: '2023.1至2025.12'
},
})
</script>
<style lang="scss" scoped>
.tip-wrapper{
width: 100%;
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
height: 22px;
.icon{
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="容器 704" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<circle id="椭圆 96" cx="8" cy="8" r="7" fill="rgb(230,231,232)" />
<circle id="椭圆 97" cx="8" cy="4" r="1" fill="rgb(132,136,142)" />
<path id="矩形 241" d="M6.49996 6L8.00028 6.0004C8.55256 6.0004 9.00028 6.44811 9.00028 7.00039L9.00028 10.4992C9.00028 10.7754 9.22408 10.9989 9.50033 10.9992L9.50033 10.9997C9.77657 10.9998 10.0005 11.2236 10.0005 11.4998L10.0003 11.5001C10.0002 11.7765 9.77622 12.0006 9.49978 12.0006L8.00028 12.0004L6.50033 12.0004C6.22423 12.0004 6.00064 11.7767 6.00049 11.5006L6.00021 11.5005C6.00021 11.2243 6.22418 11.0003 6.50037 11.0003L6.50037 11.0006C6.77649 11.0007 7.00042 10.7766 7.00042 10.5005L7.00017 7.50005C7.00017 7.22376 6.77644 7.00047 6.50015 7.00002L6.49946 6.99922C6.22357 6.999 6 6.77565 6 6.49976C6.00011 6.22373 6.22393 6 6.49996 6Z" fill="rgb(132,136,142)" fill-rule="evenodd" />
</svg>
<template>
<div class="color-svg" v-if="svgContent">
<div v-html="processedSvgContent" class="svg-container"></div>
</div>
<div class="color-svg-loading" v-else>
<div class="loading-spinner"></div>
</div>
</template>
<script setup lang="ts">
import { size } from 'lodash';
import { ref, computed, watch, onMounted } from 'vue';
// 组件属性
const props = defineProps({
// SVG地址
svgUrl: {
type: String,
required: true
},
// SVG颜色
color: {
type: String,
default: '#000'
}
, size: {
type: Number,
default: null
}
});
// 组件事件
const emit = defineEmits(['svg-loaded', 'svg-error']);
// 状态管理
const svgContent = ref<string>('');
const isLoading = ref<boolean>(false);
const error = ref<string>('');
// 处理后的SVG内容
const processedSvgContent = computed(() => {
if (!svgContent.value) return '';
// 替换SVG中的颜色
let processed = svgContent.value;
// 替换fill属性
processed = processed.replace(/fill="([^"]*)"/g, (match, p1) => {
// 保留透明和none值
if (p1 === 'none' || p1 === 'transparent') {
return match;
}
return `fill="${props.color}"`;
});
// 替换stroke属性
processed = processed.replace(/stroke="([^"]*)"/g, (match, p1) => {
// 保留透明和none值
if (p1 === 'none' || p1 === 'transparent') {
return match;
}
return `stroke="${props.color}"`;
});
// 替换width属性
processed = processed.replace(/width="([^"]*)"/g, (match, p1) => {
if (props.size !== null) {
return `width="${props.size}"`;
}
return match;
});
// 替换height属性
processed = processed.replace(/height="([^"]*)"/g, (match, p1) => {
if (props.size !== null) {
return `height="${props.size}"`;
}
return match;
});
console.log(processed)
return processed;
});
// 加载SVG内容
const loadSvgContent = async () => {
if (!props.svgUrl) return;
isLoading.value = true;
error.value = '';
try {
const response = await fetch(props.svgUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const content = await response.text();
svgContent.value = content;
emit('svg-loaded', content);
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to load SVG';
emit('svg-error', error.value);
console.error('Error loading SVG:', err);
} finally {
isLoading.value = false;
}
};
// 监听属性变化
watch(
() => props.svgUrl,
() => {
loadSvgContent();
}
);
watch(
() => props.color,
() => {
// 颜色变化时重新处理SVG,不需要重新加载
}
);
// 组件挂载时加载SVG
onMounted(() => {
loadSvgContent();
});
</script>
<style scoped>
.color-svg {
display: inline-block;
}
.svg-container {
display: inline-block;
width: 100%;
height: 100%;
}
.color-svg-loading {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
\ No newline at end of file
<template> <template>
<div class="box4"> <div class="msg-bubble">
<div class="box4-header"> <div class="msg-bubble-header">
<div class="header-icon"> <div class="header-icon">
<!-- <img src="./image1.png" alt="" /> --> <!-- <img src="./image1.png" alt="" /> -->
<img src="./message-icon.svg" alt="" /> <img src="./message-icon.svg" alt="" />
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
<div class="header-title"> <div class="header-title">
<slot name="title">{{ "社交媒体" }}</slot> <slot name="title">{{ "社交媒体" }}</slot>
</div> </div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> <!-- <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> -->
</div> </div>
<div class="box4-main"> <div class="msg-bubble-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)"> <div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container"> <div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" /> <img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)" <!-- <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" @info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> --> :time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index"> <!-- <div class="msg-bubble-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)"> <div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" /> <img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div> </div>
...@@ -121,7 +121,7 @@ const handleToMoreNews = item => { ...@@ -121,7 +121,7 @@ const handleToMoreNews = item => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box4 { .msg-bubble {
width: 792px; width: 792px;
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
...@@ -129,7 +129,7 @@ const handleToMoreNews = item => { ...@@ -129,7 +129,7 @@ const handleToMoreNews = item => {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
.box4-header { .msg-bubble-header {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
...@@ -178,7 +178,7 @@ const handleToMoreNews = item => { ...@@ -178,7 +178,7 @@ const handleToMoreNews = item => {
} }
} }
.box4-main { .msg-bubble-main {
height: 402px; height: 402px;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="news-main"> <div class="news-main">
<div class="news-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)"> <div class="news-item" v-for="(news, index) in showNewsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left"> <div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" /> <img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div> </div>
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
</template> </template>
<script setup> <script setup>
import { computed } from "vue";
import DefaultIconNews from "@/assets/icons/default-icon-news.png"; import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({ const props = defineProps({
// 新闻列表数据 // 新闻列表数据
...@@ -54,6 +55,12 @@ const props = defineProps({ ...@@ -54,6 +55,12 @@ const props = defineProps({
default: "content" default: "content"
} }
}); });
const showNewsList = computed(() => {
return props.newsList.slice(0,5)
})
const emit = defineEmits(["item-click", "more-click"]); const emit = defineEmits(["item-click", "more-click"]);
const handleToMoreNews = () => { const handleToMoreNews = () => {
emit("more-click"); emit("more-click");
...@@ -113,7 +120,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -113,7 +120,7 @@ const handleToNewsAnalysis = (item, index) => {
} }
.more { .more {
width: 45px; width: 54px;
height: 24px; height: 24px;
position: absolute; position: absolute;
top: 12px; top: 12px;
...@@ -135,7 +142,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -135,7 +142,7 @@ const handleToNewsAnalysis = (item, index) => {
.news-item { .news-item {
display: flex; display: flex;
height: 78px; height: 76px;
width: 749px; width: 749px;
margin-left: 21px; margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--color-primary-10); border: 1px solid var(--color-primary-10);
color: var(--color-primary-100); color: var(--color-primary-100);
margin: 10px;
} }
.img { .img {
......
<template> <template>
<el-space @click="onClick(person)"> <el-space @click="onClick(person)">
<ElAvatar :size="48" :src="person[img]" alignment="center" /> <el-avatar :size="48" :src="person[img]" alignment="center" />
<el-space :size="0" direction="vertical" alignment="flex-start"> <el-space :size="0" direction="vertical" alignment="flex-start">
<div class="text-header">{{ person[name] }}</div> <div class="text-header">{{ person[name] }}</div>
<div class="person-position">{{ person[position] }}</div> <div class="person-position">{{ person[position] }}</div>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script setup> <script setup>
import '@/styles/common.scss' import '@/styles/common.scss'
import { ElSpace } from 'element-plus'; import { ElSpace, ElAvatar } from 'element-plus';
const props = defineProps({ const props = defineProps({
// 新闻列表数据 // 新闻列表数据
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)"> <div class="box2-main-item" v-for="(item, index) in showRiskSignalList" :key="index" @click="handleItemClick(item, index)">
<div :class="{ <div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大', itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险', itemLeftStatus2: item[props.riskLevel] === '重大风险',
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
<script setup> <script setup>
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { computed } from "vue";
// 接收父组件传递的参数 // 接收父组件传递的参数
const props = defineProps({ const props = defineProps({
// 标题(默认“风险信号”) // 标题(默认“风险信号”)
...@@ -75,6 +76,10 @@ const props = defineProps({ ...@@ -75,6 +76,10 @@ const props = defineProps({
}); });
const showRiskSignalList = computed(() => {
return props.list.slice(0,6)
})
// 定义自定义事件,把点击事件传递给父组件 // 定义自定义事件,把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']); const emit = defineEmits(['item-click', 'more-click']);
...@@ -85,7 +90,6 @@ const handleItemClick = (item, index) => { ...@@ -85,7 +90,6 @@ const handleItemClick = (item, index) => {
// 点击“查看更多” // 点击“查看更多”
const handleMoreClick = () => { const handleMoreClick = () => {
emit('more-click') emit('more-click')
}; };
...@@ -202,11 +206,10 @@ const handleMoreClick = () => { ...@@ -202,11 +206,10 @@ const handleMoreClick = () => {
box-sizing: border-box; box-sizing: border-box;
padding-left: 23px; padding-left: 23px;
padding-right: 30px; padding-right: 30px;
overflow-y: auto;
width: 520px; width: 520px;
height: calc(100% - 160px); height: 313px;
border-radius: 4px; border-radius: 4px;
padding: 15px 30px 10px 23px;
.box2-main-item { .box2-main-item {
width: 463px; width: 463px;
height: 48px; height: 48px;
......
<template>
<el-space :size="16" class="text-tip-1-bold box">
<div class="color-prefix"></div>
<slot></slot>
</el-space>
</template>
<script setup lang="ts">
import '@/styles/common.scss';
import { ElSpace } from 'element-plus';
const props = defineProps({
color: {
type: String,
default: 'var(--color-primary-100)'
}
})
</script>
<style lang="scss" scoped>
.color-prefix {
width: 8px;
height: 16px;
background-color: v-bind(color);
}
.box {
color: v-bind(color);
}
</style>
\ No newline at end of file
<template>
<el-scrollbar>
<div class="common-page">
<el-space direction="vertical" :size="20" alignment="flex-start">
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<ConstStyle />
<div class="text-title-1-show">文字样式</div>
<TextStyle />
</el-space>
</div>
</el-scrollbar>
</template>
<script setup>
import "@/styles/container.scss"
import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue';
</script>
\ No newline at end of file
...@@ -9,7 +9,7 @@ const companyPagesRoutes = [ ...@@ -9,7 +9,7 @@ const companyPagesRoutes = [
{ {
path: "/companyPages/:id", path: "/companyPages/:id",
name: "companyPages", name: "companyPages",
component: companyPages, component: companyPages2,
meta: { meta: {
title: "企业主页", title: "企业主页",
dynamicTitle: true dynamicTitle: true
...@@ -19,7 +19,7 @@ const companyPagesRoutes = [ ...@@ -19,7 +19,7 @@ const companyPagesRoutes = [
{ {
path: "/companyPages2/:id", path: "/companyPages2/:id",
name: "companyPages2", name: "companyPages2",
component: companyPages2, component: companyPages,
meta: { meta: {
title: "企业主页", title: "企业主页",
dynamicTitle: true dynamicTitle: true
......
//样式主页 //样式主页
const StylePages = () => import("@/components/devStyle/components/index.vue"); const StylePages = () => import("@/styles/components/index.vue");
const stylePagesRoutes = [ const stylePagesRoutes = [
// 智库系统的主要路由 // 智库系统的主要路由
......
...@@ -4,17 +4,39 @@ ...@@ -4,17 +4,39 @@
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--bg-white-100); border: 1px solid var(--bg-white-100);
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.15);
} }
.flex-display { .flex-display {
display: flex; display: flex;
} }
.flex-display-center{
@extend .flex-display;
justify-content: center;
align-items: center;
}
.flex-display-end{
@extend .flex-display;
justify-content: flex-end;
align-items: center;
}
.flex-display-start{
@extend .flex-display;
justify-content: flex-start;
align-items: center;
}
.flex-fill { .flex-fill {
flex: 1; flex: 1;
} }
.full-width {
width: 100%;
}
// 文本超出指定行数省略号显示 // 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) { @mixin text-ellipsis($line-clamp) {
overflow: hidden; overflow: hidden;
...@@ -39,13 +61,13 @@ ...@@ -39,13 +61,13 @@
/***文本样式***/ /***文本样式***/
.text-base { .text-base {
color: var(--color-primary-80); color: var(--text-primary-80);
} }
//0级标题 //0级标题
.text-title-0 { .text-title-0 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 32px; font-size: 32px;
} }
...@@ -63,7 +85,7 @@ ...@@ -63,7 +85,7 @@
//1级标题 //1级标题
.text-title-1 { .text-title-1 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 24px; font-size: 24px;
} }
...@@ -81,7 +103,7 @@ ...@@ -81,7 +103,7 @@
//2级标题 //2级标题
.text-title-2 { .text-title-2 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 20px; font-size: 20px;
line-height: 26px; line-height: 26px;
} }
...@@ -101,7 +123,7 @@ ...@@ -101,7 +123,7 @@
//3级标题 //3级标题
.text-title-3 { .text-title-3 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
} }
...@@ -148,7 +170,7 @@ ...@@ -148,7 +170,7 @@
//1级提示文字 //1级提示文字
.text-tip-1 { .text-tip-1 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
} }
...@@ -161,7 +183,7 @@ ...@@ -161,7 +183,7 @@
//2级提示文字 //2级提示文字
.text-tip-2 { .text-tip-2 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
} }
...@@ -174,60 +196,100 @@ ...@@ -174,60 +196,100 @@
//3级提示文字 //3级提示文字
.text-tip-3 { .text-tip-3 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--text-primary-90);
font-size: 12px; font-size: 12px;
} }
.main-color{ .main-color {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
// 业务主色 高亮背景 // 业务主色 高亮背景
.color-bg-active{ .color-bg-active {
background: rgb(246, 250, 255); background: rgb(246, 250, 255);
} }
// 黑色 // 黑色
.text-primary-clor{ .text-primary-clor {
color: #0a121e; color: #0a121e;
} }
// 黑色90% / 主标题文字颜色 // 黑色90% / 主标题文字颜色
.text-primary-90-clor{ .text-primary-90-clor {
color: #222934; color: #222934;
} }
// 黑色80% / 小标题文字颜色 // 黑色80% / 小标题文字颜色
.text-primary-80-clor{ .text-primary-80-clor {
color: #3b414b; color: #3b414b;
} }
// 黑色65% / 正文颜色 // 黑色65% / 正文颜色
.text-primary-65-clor{ .text-primary-65-clor {
color: #5f656c; color: #5f656c;
} }
// 黑色50% // 黑色50%
.text-primary-50-clor{ .text-primary-50-clor {
color: #84888e; color: #84888e;
} }
// 黑色10% // 黑色10%
.bg-black-10{ .bg-black-10 {
background: #E6E7E8; background: #E6E7E8;
} }
// 黑色5% // 黑色5%
.bg-black-5{ .bg-black-5 {
background: #EAECEE; background: #EAECEE;
} }
// 黑色2% // 黑色2%
.bg-black-2{ .bg-black-2 {
background: #F7F8F9; background: #F7F8F9;
} }
// 白色主色 // 白色主色
.bg-white-100{ .bg-white-100 {
background: #FFFFFF; background: #FFFFFF;
} }
// 红色
.color-red-100 {
color: rgb(206, 79, 81);
}
// 红色10%背景
.bg-red-10 {
background: rgba(206, 79, 81, 0.1);
}
// 橙色
.color-orange-100 {
color: rgb(255, 149, 77)
}
// 橙色10%背景
.bg-orange-10 {
background: rgba(255, 149, 77, 0.1)
}
// 黄色
.color-yellow-100 {
color: rgb(232, 189, 11);
}
// 黄色10%背景
.bg-yellow-10 {
background: rgba(232, 189, 11, 0.1);
}
// 绿色
.color-green-100 {
color: rgb(33, 129, 57);
}
// 绿色10%背景
.bg-green-10 {
background: rgba(33, 129, 57, 0.1);
}
\ No newline at end of file
<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{ `import '@/styles/common.scss';
<template>
<div class="background-as-card"></div>
</template>
`}}
</pre>
<div class="background-as-card">
<div v-for="item in [1, 2, 3, 4]" :key="item">
{{ item }}
</div>
</div>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.wrapper {
// background-color: rgba(0, 0, 0, 0.068);
padding: 10px;
}
</style>
\ No newline at end of file
<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import ColorSvg from '@/components/base/images/ColorSvg.vue';
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{ `import ColorSvg from '@/components/base/images/ColorSvg.vue';
<template>
<color-svg :size="64" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-orange-100)'" />
<color-svg :size="16" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-green-100)'" />
</template>
`}}
</pre>
<color-svg :size="64" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-orange-100)'" />
<color-svg :size="16" :svg-url="'/icon/arrow-up.svg'" :color="'var(--color-green-100)'" />
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
const span = 12
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{ `import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
<template>
<person-avatar class="person-avatar" :person="{
name: '张三',
position: 'CEO,CTO',
avatarUrl: '/icon/美国.png'
}">
</person-avatar>
</template>
`}}
</pre>
<person-avatar class="person-avatar" :person="{
name: '张三',
position: 'CEO,CTO',
avatarUrl: '/icon/美国.png'
}">
</person-avatar>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.person-avatar {
width: 200px;
}
</style>
\ No newline at end of file
<script setup lang="ts">
import { ElRadioGroup, ElRadioButton, ElRow, ElCol } from 'element-plus';
import { ref } from 'vue';
import '@/styles/radio.scss';
const radio = ref(1)
const span = 12
</script>
<template>
<el-row class="layout-grid-line">
<el-col :span="span">
<pre>
{{ `import '@/styles/radio.scss';
<template>
<el-radio-group class="radio-group-as-gap-btn">
</el-radio-group>
</template>
`}}
</pre>
<el-radio-group v-model="radio" class="radio-group-as-gap-btn">
<el-radio-button :value="1">选项1</el-radio-button>
<el-radio-button :value="2">选项2</el-radio-button>
<el-radio-button :value="3">选项3</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
<script setup lang="ts">
import { ElTabs, ElTabPane, ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss'
const span = 12
</script>
<template>
<el-row :gutter="16" class="layout-grid-line">
<el-col :span="span">
<pre>
{{ `import '@/styles/tabs.scss';
<template>
<el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
</el-tabs>
</template>
`}}
</pre>
<el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
<el-tab-pane label="tab1">tab1</el-tab-pane>
<el-tab-pane label="tab2">tab2</el-tab-pane>
<el-tab-pane label="tab3">tab3</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/tabs.scss';\n<template>
//确保父级position: relative;
<el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
</template>
`}}
</pre>
<div style="margin-left: 160px;position: relative; height: 200px;">
<el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
<el-tab-pane label="tab1">tab1</el-tab-pane>
<el-tab-pane label="tab2">tab2</el-tab-pane>
<el-tab-pane label="tab3">tab3</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
<script setup lang="ts">
import { ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss'
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue';
const span = 12
</script>
<template>
<el-row class="layout-grid-line">
<el-col :span="span">
<pre>
{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
<template>
<color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title>
</template>
`}}
</pre>
<el-space direction="vertical">
<color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title>
</el-space>
</el-col>
<el-col :span="span">
<pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template>
<ai-tip-pane>huidadadadadasda</ai-tip-pane>
</template>
`}}
</pre>
<ai-tip-pane>huidadadadadasda</ai-tip-pane>
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
.layout-grid-line {
.el-col {
border: 1px double var(--bg-black-5);
}
}
\ No newline at end of file
<template>
<el-scrollbar>
<div class="common-page box">
<el-space direction="vertical" :size="20" alignment="flex-start" fill>
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<ConstStyle />
<div class="text-title-1-show">文字样式</div>
<TextStyle />
<div class="text-title-1-show">通用样式/组件</div>
<div style="position: relative; min-height: 300px;">
<el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
<el-tab-pane label="通用" lazy>
<common-page />
</el-tab-pane>
<el-tab-pane label="文本" lazy>
<text-page />
</el-tab-pane>
<el-tab-pane label="图片" lazy>
<images-page />
</el-tab-pane>
<el-tab-pane label="单选框" lazy>
<radio-page />
</el-tab-pane>
<el-tab-pane label="选项卡" lazy>
<tabs-page />
</el-tab-pane>
<el-tab-pane label="人物" lazy>
<people-page />
</el-tab-pane>
</el-tabs>
</div>
</el-space>
</div>
</el-scrollbar>
</template>
<script setup>
import "@/styles/container.scss"
import "./devStyle.scss"
import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue';
import { ElTabs, ElTabPane, ElSpace } from "element-plus";
import RadioPage from './RadioPage/index.vue';
import TabsPage from './TabsPage/index.vue';
import CommonPage from './CommonPage/index.vue';
import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue';
</script>
<style lang="scss" scoped>
.box {
padding-bottom: 20px;
}
</style>
\ No newline at end of file
...@@ -96,7 +96,19 @@ const tableData = ref([ ...@@ -96,7 +96,19 @@ const tableData = ref([
{ name: '白色主色', className: 'bg-white-100'}, { name: '白色主色', className: 'bg-white-100'},
{name: '主色', className: 'main-color'}, {name: '主色', className: 'main-color'},
{name: '高亮背景色', className: 'color-bg-active'} {name: '高亮背景色', className: 'color-bg-active'},
{name: '红色', className: 'color-red-100'},
{name: '红色10%-背景', className: 'bg-red-10'},
{name: '橙色', className: 'color-orange-100'},
{name: '橙色10%-背景', className: 'bg-orange-10'},
{name: '黄色', className: 'color-yellow-100'},
{name: '黄色10%-背景', className: 'bg-yellow-10'},
{name: '绿色', className: 'color-green-100'},
{name: '绿色10%-背景', className: 'bg-green-10'},
]) ])
</script> </script>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/***通用页面***/ /***通用页面***/
.common-page { .common-page {
margin: 16px auto; padding: 16px 160px;
width: 1600px; // width: 1600px;
align-items: center; align-items: center;
} }
\ No newline at end of file
...@@ -25,20 +25,13 @@ ...@@ -25,20 +25,13 @@
/*定义字体*/ /*定义字体*/
.el-tabs__item:not(.disinheritance .el-tabs__item) { .el-tabs__item:not(.disinheritance .el-tabs__item) {
font-size: 20px; @extend .text-title-2;
font-family: "Source Han Sans CN-Regular"; color: var(--text-primary-80-color);
font-weight: Regular;
line-height: 26px;
height: 50px;
} }
/*激活时按钮样式*/ /*激活时按钮样式*/
.el-tabs__item.is-active:not(.disinheritance .el-tabs__item) { .el-tabs__item.is-active:not(.disinheritance .el-tabs__item) {
@extend .text-title-1-bold;
font-size: 24px;
font-family: "Source Han Sans CN-Bold";
font-weight: Bold;
color: var(--color-primary-100); color: var(--color-primary-100);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
...@@ -48,27 +41,54 @@ ...@@ -48,27 +41,54 @@
} }
} }
/***允许tab-pane内部元素溢出***/
.tab-pane-overflow-visible {
.el-tab-pane {
overflow: visible !important;
}
// 同时确保父容器也允许溢出
.el-tabs__content {
overflow: visible !important;
}
}
/***tabs-bar左边悬浮***/ /***tabs-bar左边悬浮***/
.left-float-nav-tabs { .left-float-nav-tabs {
.el-tabs__header.is-left {
position: absolute;
left: -140px;
top: 0px;
// .el-tabs__header { .el-tabs__nav {
gap: 16px;
position: relative; }
overflow: visible;
transform: translateZ(0);
/* 双重保障 */
/* 创建新的渲染层 */ .el-tabs__active-bar {
/* 创建新的层叠上下文 */ background-color: transparent;
.el-tabs__header { right: 12px;
top: 11px;
height: 8px !important;
border-top: 6px solid transparent;
/* 顶部边框透明 */
border-bottom: 6px solid transparent;
/* 底部边框透明 */
border-left: 8px solid var(--bg-white-100);
/* 左侧边框有颜色 */
}
}
// position: absolute; .el-tabs__item.is-left {
left: 0; @extend .text-tip-1;
top: 0; color: var(--text-primary-65-color);
z-index: 999; height: 32px;
background-color: red; padding: 4px 26px 4px 28px;
// margin-left: -20px; border-radius: 16px 16px 16px 16px;
justify-content: center;
} }
// } .el-tabs__item.is-left.is-active {
color: var(--bg-white-100);
background-color: var(--color-primary-100);
}
} }
\ No newline at end of file
...@@ -3,14 +3,23 @@ ...@@ -3,14 +3,23 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="policy-monitoring"> <div class="policy-monitoring">
<div class="header"> <div class="header">
<div class="section" v-for="(section, index) in sectionTab" :key="index" <div
:style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'"> class="section"
v-for="(section, index) in sectionTab"
:key="index"
:style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'"
>
<img class="section-title" :src="`/public/icon/riskToday/btn-` + index + `.png`" /> <img class="section-title" :src="`/public/icon/riskToday/btn-` + index + `.png`" />
<div class="stats"> <div class="stats">
<div v-for="value in sections[index].waveBall" @click="highLight(value)"> <div v-for="value in sections[index].waveBall" @click="highLight(value)">
<div @click="highLight(value.title)" style="cursor: pointer;"> <div @click="highLight(value.title)" style="cursor: pointer">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" <WaveBall
@click="highLight(value)" /> :percent="value.percent"
:data="value"
:color="section.waterColor"
:size="128"
@click="highLight(value)"
/>
<div class="waveBall-text">{{ value.title }}</div> <div class="waveBall-text">{{ value.title }}</div>
</div> </div>
</div> </div>
...@@ -35,12 +44,20 @@ ...@@ -35,12 +44,20 @@
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div class="risk-signals"> <div class="risk-signals">
<div class="risk-signals-item" v-for="(item, index) in warningList" :key="index" <div
@click="handleClickToDetailO(item)" :class="{ 'highlighted': item.eventType === highlightedEventType }"> class="risk-signals-item"
<div class="item-left" :class="{ v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetailO(item)"
:class="{ highlighted: item.eventType === highlightedEventType }"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.signalLevel === '特别重大', itemLeftStatus1: item.signalLevel === '特别重大',
itemLeftStatus2: item.signalLevel === '重大风险' itemLeftStatus2: item.signalLevel === '重大风险'
}"> }"
>
{{ item.signalLevel ? item.signalLevel : "一般风险" }} {{ item.signalLevel ? item.signalLevel : "一般风险" }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -62,8 +79,15 @@ ...@@ -62,8 +79,15 @@
<img src="./icon/box1-right.png" alt="" /> <img src="./icon/box1-right.png" alt="" />
</div> </div>
</div> </div>
<el-carousel ref="carouselRef" style="height: 412px; width: 736px" :autoplay="true" :interval="3000" <el-carousel
arrow="never" indicator-position="none" @change="handleCarouselChange"> ref="carouselRef"
style="height: 412px; width: 736px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(News, NewsIndex) in hotNewsList" :key="NewsIndex"> <el-carousel-item v-for="(News, NewsIndex) in hotNewsList" :key="NewsIndex">
<div class="carousel-item"> <div class="carousel-item">
<div class="carousel-title"> <div class="carousel-title">
...@@ -74,9 +98,13 @@ ...@@ -74,9 +98,13 @@
{{ News.category }} {{ News.category }}
</div> </div>
</div> </div>
<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div> <div
style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"
></div>
<div class="carousel-content">{{ News.content }}</div> <div class="carousel-content">{{ News.content }}</div>
<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div> <div
style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"
></div>
<div class="carousel-bottom"> <div class="carousel-bottom">
<div class="carousel-bottom">{{ News.date + News.source }}</div> <div class="carousel-bottom">{{ News.date + News.source }}</div>
</div> </div>
...@@ -198,7 +226,7 @@ const sections = ref([ ...@@ -198,7 +226,7 @@ const sections = ref([
count: 14, count: 14,
change: "无新增", change: "无新增",
unit: "次", unit: "次",
title: "230调查" title: "232调查"
}, },
{ {
percent: 3, // 估算的百分比 percent: 3, // 估算的百分比
...@@ -223,7 +251,7 @@ const handlegetBillRiskSignal = async () => { ...@@ -223,7 +251,7 @@ const handlegetBillRiskSignal = async () => {
if (res.code === 200) { if (res.code === 200) {
warningList.value = res.data; warningList.value = res.data;
} }
} catch (error) { } } catch (error) {}
}; };
const hotNewsList = ref([ const hotNewsList = ref([
{ {
...@@ -269,9 +297,9 @@ const handleClickToDetailO = item => { ...@@ -269,9 +297,9 @@ const handleClickToDetailO = item => {
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
const highlightedEventType = ref('') const highlightedEventType = ref("");
const highLight = (title) => { const highLight = title => {
console.log(title) console.log(title);
// 如果再次点击同一个,取消高亮 // 如果再次点击同一个,取消高亮
if (highlightedEventType.value === title) { if (highlightedEventType.value === title) {
highlightedEventType.value = null; highlightedEventType.value = null;
......
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
<div class="col-domain" style="color: rgb(59, 65, 75); font-weight: 700">所属领域</div> <div class="col-domain" style="color: rgb(59, 65, 75); font-weight: 700">所属领域</div>
<div class="col-date" style="color: rgb(59, 65, 75); font-weight: 700">制裁时间</div> <div class="col-date" style="color: rgb(59, 65, 75); font-weight: 700">制裁时间</div>
<div class="col-member" v-if="rankType !== 'school'" style="color: rgb(59, 65, 75); font-weight: 700"> <div class="col-member" v-if="rankType !== 'school'" style="color: rgb(59, 65, 75); font-weight: 700">
关键人物 省份
</div> </div>
</div> </div>
<div class="table-list"> <div class="table-list">
...@@ -210,7 +210,8 @@ ...@@ -210,7 +210,8 @@
</div> </div>
</div> </div>
<div class="col-date">{{ item.date }}</div> <div class="col-date">{{ item.date }}</div>
<div class="col-member" v-if="rankType !== 'school'">{{ item.member }}</div> <!-- <div class="col-member" v-if="rankType !== 'school'">{{ item.member }}</div> -->
<div class="col-member" v-if="rankType !== 'school'">{{ item.province }}</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -1083,7 +1084,8 @@ const processRankingData = rawData => { ...@@ -1083,7 +1084,8 @@ const processRankingData = rawData => {
// 新增字段 // 新增字段
domains: item.domainList ? item.domainList.map(d => d.name) : [], domains: item.domainList ? item.domainList.map(d => d.name) : [],
date: formattedDate, date: formattedDate,
member: item.keyMember || "-" member: item.keyMember || "-",
province: item.province || ""
}; };
}); });
}; };
...@@ -1108,6 +1110,7 @@ const handleGetDomainContainmentRanking = async () => { ...@@ -1108,6 +1110,7 @@ const handleGetDomainContainmentRanking = async () => {
// 处理返回的数据结构 // 处理返回的数据结构
const processedData = processRankingData(res.data); const processedData = processRankingData(res.data);
rankList.value = processedData; rankList.value = processedData;
console.log("排行数据 =>", rankList.value);
} }
} catch (error) { } catch (error) {
console.error("获取美对华领域打压遏制排行失败:", error); console.error("获取美对华领域打压遏制排行失败:", error);
......
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
<el-empty <el-empty
v-if="box2DataList.length === 0" v-if="box2DataList.length === 0"
style="padding-top: 80px" style="padding-top: 80px"
description="暂无数据1" description="暂无数据"
:image-size="100" :image-size="100"
/> />
<div <div
......
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
<div class="bottom-item"> <div class="bottom-item">
<div class="bottom-item-title"> <div class="bottom-item-title">
<img :src="icon4" alt="" /> <img :src="icon4" alt="" />
<span>美政府部门对华打压遏制历程</span> <span>美政府部门对华工作日程表</span>
</div> </div>
<div class="bottom-item-select"> <div class="bottom-item-select">
<!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'"> <!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'">
......
...@@ -49,7 +49,21 @@ ...@@ -49,7 +49,21 @@
</div> </div>
</div> </div>
<div style="width: 100%; height: 620px; padding-top: 24px" id="char"></div> <div v-if="activeButtonId == 2" style="width: 100%; height: 520px; padding-top: 24px" id="char"></div>
<!-- <Echarts v-if="activeButtonId == 2" :option="lineOption" height="520px" /> -->
<div v-else>
<div class="content-line-chart-header">
<el-radio-group v-model="selectedIndicator" @change="handleIndicatorChange" size="default">
<el-radio
v-for="option in indicatorOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-radio-group>
</div>
<Echarts :option="lineOption" height="520px" />
</div>
</div> </div>
<div style="width: 778px; height: 620px; overflow: auto"> <div style="width: 778px; height: 620px; overflow: auto">
<el-table <el-table
...@@ -128,7 +142,8 @@ ...@@ -128,7 +142,8 @@
<div class="card-box" style="margin-top: 16px" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)"> <div class="card-box" style="margin-top: 16px" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="card-title"> <div class="card-title">
<img class="icon" src="../../assets/icons/title-icon2.png" /> <img class="icon" src="../../assets/icons/title-icon2.png" />
<img class="text" src="../../assets/icons/title-text2.svg" /> <!-- <img class="text" src="../../assets/icons/title-text2.svg" /> -->
<span class="text-new">中美科技博弈历程</span>
</div> </div>
<div class="card-main"> <div class="card-main">
<!-- <Timeline :data="course" text-key="title" id-key="seq" /> --> <!-- <Timeline :data="course" text-key="title" id-key="seq" /> -->
...@@ -218,6 +233,8 @@ import { ArrowRight, CaretBottom } from "@element-plus/icons-vue"; ...@@ -218,6 +233,8 @@ import { ArrowRight, CaretBottom } from "@element-plus/icons-vue";
import Timeline from "./Timeline.vue"; import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue"; import tableShow from "./tableShow.vue";
import ButtonList from "@/components/buttonList/buttonList.vue"; import ButtonList from "@/components/buttonList/buttonList.vue";
import Echarts from "@/components/Chart/index.vue";
import mockData from "./mock.json";
import radarChart from "./radarChart3.js"; import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js"; import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js";
...@@ -242,8 +259,8 @@ import { ElMessage } from "element-plus"; ...@@ -242,8 +259,8 @@ import { ElMessage } from "element-plus";
const buttonList = ref([ const buttonList = ref([
{ {
id: 1, id: 1,
text: "趋势变化", text: "趋势变化"
disabled: true // disabled: true
}, },
{ {
id: 2, id: 2,
...@@ -253,6 +270,9 @@ const buttonList = ref([ ...@@ -253,6 +270,9 @@ const buttonList = ref([
const activeButtonId = ref(buttonList.value[1]?.id || 1); const activeButtonId = ref(buttonList.value[1]?.id || 1);
const setActiveButtonId = id => { const setActiveButtonId = id => {
activeButtonId.value = id; activeButtonId.value = id;
if (id == 2) {
handleGetCompare();
}
}; };
const course = ref([ const course = ref([
...@@ -390,6 +410,202 @@ onMounted(async () => { ...@@ -390,6 +410,202 @@ onMounted(async () => {
// // setChart(option, "char7"); // // setChart(option, "char7");
startAutoPlay(); startAutoPlay();
processIndicatorOptions();
});
const chartColors = [
"rgba(8, 151, 156, 1)",
"#FF4D4F",
"#FF9900",
"#00CC99",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
];
// const series = {
// name: key,
// type: "line",
// symbolSize: 15,
// // stack: "Total",
// itemStyle: {
// color: chartColors[Math.floor(Math.random() * chartColors.length)]
// },
// data: []
// };
const indicatorOptions = ref([]);
const selectedIndicator = ref("");
// 整理指标选项
const processIndicatorOptions = () => {
const chinaData = mockData["中国"];
if (!chinaData) return;
indicatorOptions.value = Object.keys(chinaData).map(key => ({
label: key,
value: key
}));
if (indicatorOptions.value.length > 0) {
selectedIndicator.value = indicatorOptions.value[0].value;
handleIndicatorChange(selectedIndicator.value);
}
};
// 处理指标变化
const handleIndicatorChange = indicator => {
const chinaData = mockData["中国"]?.[indicator] || [];
const usaData = mockData["美国"]?.[indicator] || [];
const years = chinaData.map(item => item.year.toString());
const chinaValues = chinaData.map(item => item.value);
const usaValues = usaData.map(item => item.value);
lineOption.value.xAxis.data = years;
lineOption.value.series = [
{
name: "中国",
type: "line",
symbolSize: 8,
smooth: true,
itemStyle: {
color: "#CE4F51"
},
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgb(206, 79, 81, .8)"
// },
// {
// offset: 1,
// color: "rgb(206, 79, 81, .3)"
// }
// ])
// },
data: chinaValues
},
{
name: "美国",
type: "line",
smooth: true,
symbolSize: 8,
itemStyle: {
color: "#055FC2"
},
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgb(5, 95, 194,.8)"
// },
// {
// offset: 1,
// color: "rgb(5, 95, 194, .3)"
// }
// ])
// },
data: usaValues
}
];
};
const lineOption = ref({
title: {
text: ""
},
tooltip: {
trigger: "axis",
confine: true,
backgroundColor: "rgba(50, 50, 50, 0.7)",
borderColor: "#333",
borderWidth: 0,
padding: [5, 10],
textStyle: {
color: "#fff",
fontSize: 16
}
},
legend: {
show: false
},
grid: {
top: "5%",
left: "3%",
right: "4%",
bottom: "2%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
minInterval: 1,
scale: true,
axisLine: {
lineStyle: {
color: "#e0e0e0",
width: 1
}
},
axisTick: {
show: false,
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
color: "#666",
fontSize: 13,
fontWeight: 500,
margin: 12
},
data: ["2021", "2022", "2023", "2024", "2025"]
},
yAxis: {
type: "value",
// name: "指数",
nameLocation: "top",
nameGap: 35,
nameTextStyle: {
color: "#666",
fontSize: 13,
fontWeight: 600,
padding: [0, 0, 10, 0]
},
axisLine: {
show: true,
lineStyle: {
color: "#e0e0e0",
width: 1
}
},
axisTick: {
show: false,
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
color: "#ccc",
fontSize: 14,
fontWeight: 400,
formatter: value => {
return value.toFixed(0);
}
},
splitLine: {
lineStyle: {
width: 1,
type: "dashed",
color: "rgba(12, 78, 125, .3)"
}
},
splitNumber: 8
},
series: []
}); });
const tableData = ref([ const tableData = ref([
...@@ -562,7 +778,7 @@ const handleClickBottomBtn = () => { ...@@ -562,7 +778,7 @@ const handleClickBottomBtn = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1600px; width: 1600px;
height: 1600px; height: 1450px;
margin: 0 auto; margin: 0 auto;
.card-box { .card-box {
...@@ -585,6 +801,7 @@ const handleClickBottomBtn = () => { ...@@ -585,6 +801,7 @@ const handleClickBottomBtn = () => {
// width: 100%; // width: 100%;
height: 48px; height: 48px;
display: flex; display: flex;
align-items: center;
.icon { .icon {
/* 合并 */ /* 合并 */
...@@ -599,6 +816,13 @@ const handleClickBottomBtn = () => { ...@@ -599,6 +816,13 @@ const handleClickBottomBtn = () => {
height: 31px; height: 31px;
margin: 8px 0px; margin: 8px 0px;
} }
.text-new {
font-family: YouSheBiaoTiHei;
font-size: 24px;
font-weight: 400;
line-height: 24px;
color: rgb(5, 95, 194);
}
} }
.content-chart-header { .content-chart-header {
...@@ -608,6 +832,10 @@ const handleClickBottomBtn = () => { ...@@ -608,6 +832,10 @@ const handleClickBottomBtn = () => {
// line-height: 32px; // line-height: 32px;
align-items: center; align-items: center;
} }
.content-line-chart-header {
margin-top: 15px;
margin-left: 48px;
}
.card-main { .card-main {
height: 650px; height: 650px;
...@@ -1022,7 +1250,8 @@ const handleClickBottomBtn = () => { ...@@ -1022,7 +1250,8 @@ const handleClickBottomBtn = () => {
width: 100%; width: 100%;
height: auto; height: auto;
/* 高度自适应内容 */ /* 高度自适应内容 */
display: flex; // display: flex;
display: none;
flex-direction: row; flex-direction: row;
/* 行方向布局 */ /* 行方向布局 */
flex-wrap: wrap; flex-wrap: wrap;
......
{
"中国": {
"企业研发人才占比": [
{
"year": 2021,
"value": 79.8
},
{
"year": 2022,
"value": 80.1
},
{
"year": 2023,
"value": 82.7
},
{
"year": 2024,
"value": 81.3
},
{
"year": 2025,
"value": 82.1
}
],
"公共研发支出占比": [
{
"year": 2021,
"value": 72.6
},
{
"year": 2022,
"value": 72.6
},
{
"year": 2023,
"value": 73.7
},
{
"year": 2024,
"value": 72.7
},
{
"year": 2025,
"value": 73.5
}
],
"创新关联": [
{
"year": 2021,
"value": 78.2
},
{
"year": 2022,
"value": 78.1
},
{
"year": 2023,
"value": 77.0
},
{
"year": 2024,
"value": 78.5
},
{
"year": 2025,
"value": 77.0
}
],
"国内产业分布": [
{
"year": 2021,
"value": 99.4
},
{
"year": 2022,
"value": 99.9
},
{
"year": 2023,
"value": 100.4
},
{
"year": 2024,
"value": 100.9
},
{
"year": 2025,
"value": 101.4
}
],
"知识与技术产出": [
{
"year": 2021,
"value": 63.6
},
{
"year": 2022,
"value": 64.3
},
{
"year": 2023,
"value": 64.5
},
{
"year": 2024,
"value": 63.4
},
{
"year": 2025,
"value": 62.9
}
],
"知识工作者": [
{
"year": 2021,
"value": 79.5
},
{
"year": 2022,
"value": 79.7
},
{
"year": 2023,
"value": 78.1
},
{
"year": 2024,
"value": 78.9
},
{
"year": 2025,
"value": 79.4
}
]
},
"美国": {
"企业研发人才占比": [
{
"year": 2021,
"value": 81.1
},
{
"year": 2022,
"value": 81.8
},
{
"year": 2023,
"value": 82.8
},
{
"year": 2024,
"value": 81.3
},
{
"year": 2025,
"value": 82.5
}
],
"公共研发支出占比": [
{
"year": 2021,
"value": 73.8
},
{
"year": 2022,
"value": 71.6
},
{
"year": 2023,
"value": 72.1
},
{
"year": 2024,
"value": 72.6
},
{
"year": 2025,
"value": 71.9
}
],
"创新关联": [
{
"year": 2021,
"value": 77.4
},
{
"year": 2022,
"value": 77.3
},
{
"year": 2023,
"value": 77.2
},
{
"year": 2024,
"value": 77.1
},
{
"year": 2025,
"value": 77.0
}
],
"国内产业分布": [
{
"year": 2021,
"value": 98.5
},
{
"year": 2022,
"value": 101.1
},
{
"year": 2023,
"value": 98.4
},
{
"year": 2024,
"value": 99.8
},
{
"year": 2025,
"value": 98.2
}
],
"知识与技术产出": [
{
"year": 2021,
"value": 64.5
},
{
"year": 2022,
"value": 63.4
},
{
"year": 2023,
"value": 63.7
},
{
"year": 2024,
"value": 63.4
},
{
"year": 2025,
"value": 62.7
}
],
"知识工作者": [
{
"year": 2021,
"value": 66.8
},
{
"year": 2022,
"value": 71.8
},
{
"year": 2023,
"value": 76.8
},
{
"year": 2024,
"value": 81.8
},
{
"year": 2025,
"value": 86.8
}
]
}
}
\ No newline at end of file
...@@ -142,11 +142,11 @@ ...@@ -142,11 +142,11 @@
</div> </div>
<div class="carousel-footer"> <div class="carousel-footer">
<div class="footer-left"> <div class="footer-left">
<div class="type">{{ News.hotspotType +'——' }}</div> <div class="type">{{ News.hotspotType + "——" }}</div>
<div class="text">{{ News.eventTitle }}</div> <div class="text">{{ News.eventTitle }}</div>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<img src="@/assets/icons/arrow-right.png" alt=""> <img src="@/assets/icons/arrow-right.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -290,8 +290,8 @@ const sections = ref([ ...@@ -290,8 +290,8 @@ const sections = ref([
count: 0, count: 0,
change: "无新增", change: "无新增",
unit: "次", unit: "次",
title: "230调查", title: "232调查",
type: "230调查" type: "232调查"
}, },
{ {
percent: 0, // 估算的百分比 percent: 0, // 估算的百分比
...@@ -436,8 +436,8 @@ const handleGetLatestRiskUpdates = async () => { ...@@ -436,8 +436,8 @@ const handleGetLatestRiskUpdates = async () => {
count: res.data["232Survey"].total, count: res.data["232Survey"].total,
change: res.data["232Survey"].dailyIncrement, change: res.data["232Survey"].dailyIncrement,
unit: "次", unit: "次",
title: "230调查", title: "232调查",
type: "230调查" type: "232调查"
}, },
{ {
percent: 3, // 估算的百分比 percent: 3, // 估算的百分比
...@@ -1222,7 +1222,6 @@ onUnmounted(() => { ...@@ -1222,7 +1222,6 @@ onUnmounted(() => {
// color:var(--color-main-active); // color:var(--color-main-active);
// } // }
// } // }
// } // }
......
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论