Skip to content

R
risk-monitor
提交 4c3f7e40 authored 作者: 李郝虎's avatar 李郝虎
浏览文件
操作

Merge branch 'master' of http://8.140.26.4:10003/caijian/risk-monitor into lhh-dev

上级 7eaffc3a 012aa801
隐藏空白字符变更
内嵌 并排
正在显示 包含 693 行增加 和 129 行删除
src/components/BoxBackground/analysisBox.vue 0 → 100644
浏览文件 @ 4c3f7e40
<template>
<div class="analysis-box-wrapper" :style="{ width: width ? width : '100%', height: height ? height : '100%' }">
<div class="wrapper-header">
<div class="header-icon"></div>
<div class="header-title">{{ title }}</div>
<div class="header-right">
<div class="header-right-btn" @click="handleSave" v-if="showAllBtn">
<img src="@/assets/icons/box-header-icon1.png" alt="">
</div>
<div class="header-right-btn" @click="handleDownload">
<img src="@/assets/icons/box-header-icon2.png" alt="">
</div>
<div class="header-right-btn" @click="handleCollect">
<img src="@/assets/icons/box-header-icon3.png" alt="">
</div>
</div>
</div>
<div class="wrapper-main">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
},
showAllBtn: {
type: Boolean,
default: true
}
})
const handleSave = () => {
alert('save')
}
const handleDownload = () => {
alert('download')
}
const handleCollect = () => {
alert('collect')
}
</script>
<style lang="scss" scoped>
.analysis-box-wrapper {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.wrapper-header {
height: 45px;
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-top: 18px;
width: 8px;
height: 20px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.header-title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
justify-content: flex-end;
gap: 4px;
.header-right-btn {
width: 28px;
height: 28px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.wrapper-main {
height: calc(100% - 45px);
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: 5px 10px;
}
}
</style>
src/components/BoxBackground/overviewBox.vue 0 → 100644
浏览文件 @ 4c3f7e40
<template>
<div class="overview-box-wrapper" :style="{ width: width ? width : '640px', height: height ? height : '415px' }">
<div class="wrapper-header">
<div class="header-icon"></div>
<div class="header-title">{{ title }}</div>
<div class="header-right">
<div class="header-right-btn" @click="handleSave">
<img src="@/assets/icons/box-header-icon1.png" alt="">
</div>
<div class="header-right-btn" @click="handleDownload">
<img src="@/assets/icons/box-header-icon2.png" alt="">
</div>
<div class="header-right-btn" @click="handleCollect">
<img src="@/assets/icons/box-header-icon3.png" alt="">
</div>
</div>
</div>
<div class="wrapper-main">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
})
const handleSave = () => {
alert('save')
}
const handleDownload = () => {
alert('download')
}
const handleCollect = () => {
alert('collect')
}
</script>
<style lang="scss" scoped>
.overview-box-wrapper {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.wrapper-header {
height: 45px;
display: flex;
box-sizing: border-box;
.header-icon {
margin-top: 18px;
width: 8px;
height: 20px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.header-title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
justify-content: flex-end;
gap: 4px;
.header-right-btn {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.wrapper-main {
height: calc(100% - 45px);
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: 5px 10px;
}
}
</style>
src/components/areaTag.vue 0 → 100644
浏览文件 @ 4c3f7e40
<template>
<div class="tag-wrapper" :class="classObject">
{{ tagName }}
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const props = defineProps({
tagName: {
type: String,
default: '标签名称'
}
})
const classObject = computed(() => ({
'tag1': props.tagName === '人工智能',
'tag2': props.tagName === '生物科技',
'tag3': props.tagName === '新一代通信网络',
'tag4': props.tagName === '量子科技',
'tag5': props.tagName === '新能源',
'tag6': props.tagName === '集成电路',
'tag7': props.tagName === '海洋',
'tag8': props.tagName === '先进制造',
'tag9': props.tagName === '新材料',
'tag10': props.tagName === '航空航天',
'tag11': props.tagName === '太空',
'tag12': props.tagName === '深海',
'tag13': props.tagName === '极地',
'tag14': props.tagName === '核',
'tag15': props.tagName === '其他',
}))
</script>
<style lang="scss" scoped>
.tag-wrapper {
height: 24px;
padding: 0 8px;
line-height: 24px;
text-align: center;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
box-sizing: border-box;
border-radius: 4px;
}
.tag1 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.tag2 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag3 {
border: 1px solid rgba(174, 214, 255, 1);
background: rgba(246, 250, 255, 1);
color: rgba(5, 95, 194, 1);
}
.tag4 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.tag5 {
border: 1px solid rgba(183, 235, 143, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag6 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag7 {
border: 1px solid rgba(156, 207, 245, 1);
background: rgba(241, 247, 250, 1);
color: rgba(15, 120, 199, 1);
}
.tag8 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tag9 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag10 {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(47, 84, 235, 1);
}
.tag11 {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(47, 84, 235, 1);
}
.tag12 {
border: 1px solid rgba(116, 146, 203, 1);
background: rgba(230, 244, 255, 1);
color: rgba(73, 104, 161, 1);
}
.tag13 {
border: 1px solid rgba(214, 228, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(133, 165, 255, 1);
}
.tag14 {
border: 1px solid rgba(255, 187, 150, 1);
background: rgba(255, 242, 232, 1);
color: rgba(250, 84, 28, 1);
}
.tag15 {
border: 1px solid rgba(183, 235, 143, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
</style>
\ No newline at end of file
src/components/pageBtn/leftBtn.vue 0 → 100644
浏览文件 @ 4c3f7e40
<template>
<div class="left-btn-wrapper">
<img src="@/assets/images/icon/card-btn-left.png" alt="">
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.left-btn-wrapper {
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/components/pageBtn/rightBtn.vue 0 → 100644
浏览文件 @ 4c3f7e40
<template>
<div class="right-btn-wrapper">
<img src="@/assets/images/icon/card-btn-right.png" alt="">
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.right-btn-wrapper {
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ 4c3f7e40
...@@ -12,6 +12,12 @@ import "./styles/main.css"; ...@@ -12,6 +12,12 @@ import "./styles/main.css";
import '@/assets/fonts/font.css' import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import AreaTag from '@/components/areaTag.vue'
import leftBtn from "@/components/pageBtn/leftBtn.vue";
import rightBtn from "@/components/pageBtn/rightBtn.vue";
import OverviewBox from '@/components/BoxBackground/overviewBox.vue'
import AnalysisBox from '@/components/BoxBackground/analysisBox.vue'
// 引入 Pinia 实例 // 引入 Pinia 实例
import pinia from './stores' import pinia from './stores'
const app = createApp(App); const app = createApp(App);
...@@ -29,4 +35,9 @@ app.use(ElementPlus, { ...@@ -29,4 +35,9 @@ app.use(ElementPlus, {
}) })
app.use(pinia) // 挂载 Pinia app.use(pinia) // 挂载 Pinia
app.component("CardTitle", CardTitle); app.component("CardTitle", CardTitle);
app.component('AreaTag', AreaTag)
app.component('leftBtn', leftBtn)
app.component('rightBtn', rightBtn)
app.component('OverviewBox', OverviewBox)
app.component('AnalysisBox', AnalysisBox)
app.mount("#app"); app.mount("#app");
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 4c3f7e40
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<img class="icon" src="../../assets/icons/title-icon1.png" /> <img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.svg" /> <img class="text" src="../../assets/icons/title-text1.svg" />
</div> </div>
<div style="display: flex; height: 650px; width: 100%"> <div style="display: flex; height: 650px; width: 100%;padding-top: 24px;">
<div style="width: 50%"> <div style="width: 50%">
<div <div
style=" style="
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div> <div style="width: 100%; height: 620px; padding-top: 24px" id="char"></div>
</div> </div>
<div style="width: 778px; height: 620px; overflow: auto"> <div style="width: 778px; height: 620px; overflow: auto">
<el-table <el-table
...@@ -53,7 +53,8 @@ ...@@ -53,7 +53,8 @@
> >
<!-- 自定义展开图标 --> <!-- 自定义展开图标 -->
<el-table-column prop="targetName" label="指标名称" width="350" /> <el-table-column prop="targetName" label="指标名称" width="350" >
</el-table-column>
<el-table-column prop="usScore" label="美国"> <el-table-column prop="usScore" label="美国">
<template #default="scope"> <template #default="scope">
<div style="display: flex"> <div style="display: flex">
...@@ -79,7 +80,7 @@ ...@@ -79,7 +80,7 @@
<el-table-column prop="chinaScore" label="中国"> <el-table-column prop="chinaScore" label="中国">
<template #default="scope"> <template #default="scope">
<div style="display: flex"> <div style="display: flex">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }"> <div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px'}">
<el-progress <el-progress
:percentage="scope.row.chinaScore" :percentage="scope.row.chinaScore"
:stroke-width="20" :stroke-width="20"
...@@ -998,19 +999,20 @@ const handleClickBottomBtn = () => { ...@@ -998,19 +999,20 @@ const handleClickBottomBtn = () => {
/* 自定义未展开图标 */ /* 自定义未展开图标 */
:deep(.el-table__expand-icon) { :deep(.el-table__expand-icon) {
background-image: url("./icon/arrowDown.png"); background-image: url("./icon/arrowRight.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; // background-size: contain;
width: 24px; margin-left: 16px;
height: 24px; margin-top: 4px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s; transition: transform 0.1s;
} }
/* 自定义展开图标 */ /* 自定义展开图标 */
:deep(.el-table__expand-icon--expanded) { :deep(.el-table__expand-icon--expanded) {
background-image: url("./icon/arrowDown.png"); background-image: url("./icon/arrowRight.png");
transform: rotate(270deg) !important; transform-origin:center;
transform: rotate(90deg) !important;
} }
/* 自定义表头背景颜色 */ /* 自定义表头背景颜色 */
...@@ -1043,7 +1045,7 @@ const handleClickBottomBtn = () => { ...@@ -1043,7 +1045,7 @@ const handleClickBottomBtn = () => {
} }
:deep(.el-table .el-table__cell) { :deep(.el-table .el-table__cell) {
padding-left: 5px; padding-left: 1px;
padding-right: 5px; padding-right: 1px;
} }
</style> </style>
src/views/ZMOverView/components/gameProfile/radarChart3.js
浏览文件 @ 4c3f7e40
...@@ -17,7 +17,7 @@ const radarChart = (nameList, valueList) => { ...@@ -17,7 +17,7 @@ const radarChart = (nameList, valueList) => {
const option = { const option = {
title: { text: '' }, title: { text: '' },
radar: { radar: {
radius: '75%', // 雷达图本身占容器 75% radius: '70%', // 雷达图本身占容器 75%
indicator: nameList.map(name => ({ indicator: nameList.map(name => ({
name: name, name: name,
max: maxValue * 1.2 // 设置最大值为数据最大值的120% max: maxValue * 1.2 // 设置最大值为数据最大值的120%
...@@ -25,13 +25,14 @@ const radarChart = (nameList, valueList) => { ...@@ -25,13 +25,14 @@ const radarChart = (nameList, valueList) => {
axisName: { axisName: {
color: '#ffffff', color: '#ffffff',
fontSize: 18, fontSize: 18,
lineHeight: 24,
fontWeight: 700, fontWeight: 700,
backgroundColor: '#0560C3', backgroundColor: '#0560C3',
borderRadius: 20, borderRadius: 20,
padding: [8, 20], padding: [8, 12],
formatter: function (txt) { formatter: function (txt) {
const len = txt.length; const len = txt.length;
if (len <= 5) return txt; if (len <= 8) return txt;
const br = Math.ceil(len / 2); const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br); return txt.substring(0, br) + '\n' + txt.substring(br);
} }
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 4c3f7e40
...@@ -1215,9 +1215,16 @@ onUnmounted(() => { ...@@ -1215,9 +1215,16 @@ onUnmounted(() => {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
&:hover { // &:hover {
background: var(--color-bg-hover); // //background: var(--color-bg-hover);
} // .item-right {
// .text{
// color:var(--color-main-active);
// }
// }
// }
.itemLeftStatus1 { .itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important; color: rgba(245, 34, 45, 1) !important;
...@@ -1291,11 +1298,11 @@ onUnmounted(() => { ...@@ -1291,11 +1298,11 @@ onUnmounted(() => {
width: 780px; width: 780px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
background: var(--color-bg-hover); // background: var(--color-bg-hover);
&:hover { // &:hover {
background: var(--color-bg-hover); // background: var(--color-bg-hover);
} // }
.itemLeftStatus1 { .itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important; color: rgba(245, 34, 45, 1) !important;
...@@ -1341,6 +1348,7 @@ onUnmounted(() => { ...@@ -1341,6 +1348,7 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-decoration: underline;
} }
.time { .time {
......
src/views/bill/billHome/index.vue
浏览文件 @ 4c3f7e40
...@@ -169,19 +169,9 @@ ...@@ -169,19 +169,9 @@
{{ bill.billName }} {{ bill.billName }}
</div> </div>
<div class="box1-main-left-info"> <div class="box1-main-left-info">
<div <AreaTag v-for="(item, index) in bill.hylyList"
class="info-box" :key="index" :tagName="item.industryName"></AreaTag>
:class="{
info1: index === 0,
info2: index === 1,
info3: index === 2,
info4: index === 3
}"
v-for="(item, index) in bill.hylyList"
:key="index"
>
{{ item.industryName }}
</div>
</div> </div>
<div class="box1-main-left-info1"> <div class="box1-main-left-info1">
<div class="info1-box"> <div class="info1-box">
...@@ -841,6 +831,7 @@ import Ghd from "@/assets/icons/ghd.png"; ...@@ -841,6 +831,7 @@ import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png"; import Mzd from "@/assets/icons/mzd.png";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import AreaTag from "@/components/areaTag.vue";
const searchBillText = ref(""); const searchBillText = ref("");
...@@ -2153,42 +2144,6 @@ onUnmounted(() => { ...@@ -2153,42 +2144,6 @@ onUnmounted(() => {
margin-top: 17px; margin-top: 17px;
display: flex; display: flex;
gap: 8px; gap: 8px;
.info-box {
max-width: 80px;
height: 24px;
text-align: center;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.info1 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.info2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.info3 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.info4 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
} }
.box1-main-left-info1 { .box1-main-left-info1 {
margin-top: 25px; margin-top: 25px;
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 4c3f7e40
...@@ -1808,6 +1808,7 @@ onMounted(async () => { ...@@ -1808,6 +1808,7 @@ onMounted(async () => {
.box1-main { .box1-main {
display: flex; display: flex;
justify-content: space-between;
width: 1064px; width: 1064px;
height: 354px; height: 354px;
margin-top: 22px; margin-top: 22px;
...@@ -1816,8 +1817,9 @@ onMounted(async () => { ...@@ -1816,8 +1817,9 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
.box1-main-left { .box1-main-left {
width: 458px; width: 450px;
height: 353px; height: 353px;
position: relative;
img { img {
width: 100%; width: 100%;
...@@ -1825,6 +1827,7 @@ onMounted(async () => { ...@@ -1825,6 +1827,7 @@ onMounted(async () => {
} }
.box1-main-left-img-mock { .box1-main-left-img-mock {
width: 100%;
height: 100%; height: 100%;
margin-left: 24px; margin-left: 24px;
border-radius: 4px; border-radius: 4px;
...@@ -1856,8 +1859,12 @@ onMounted(async () => { ...@@ -1856,8 +1859,12 @@ onMounted(async () => {
} }
.box1-main-right { .box1-main-right {
margin-left: 28px; width: 500px;
flex: 1; height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.box1-main-right-title { .box1-main-right-title {
width: 100%; width: 100%;
...@@ -1867,9 +1874,12 @@ onMounted(async () => { ...@@ -1867,9 +1874,12 @@ onMounted(async () => {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
overflow: hidden;
text-overflow: ellipsis; display: -webkit-box; /* 将元素设置为弹性盒模型 */
white-space: nowrap; -webkit-line-clamp: 2; /* 限制文本显示的行数 */
-webkit-box-orient: vertical; /* 设置弹性盒子的子元素垂直排列 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
} }
.box1-main-right-info { .box1-main-right-info {
...@@ -1922,6 +1932,10 @@ onMounted(async () => { ...@@ -1922,6 +1932,10 @@ onMounted(async () => {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
} }
.box1-main-right-footer { .box1-main-right-footer {
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 4c3f7e40
...@@ -2,7 +2,70 @@ ...@@ -2,7 +2,70 @@
<div class="introduction-wrap"> <div class="introduction-wrap">
<div class="left"> <div class="left">
<div class="box1"> <div class="box1">
<div class="box-header"> <analysis-box title="基本信息" :showAllBtn="false">
<div class="box1-main">
<div class="box1-main-left" v-if="basicInfo.img">
<img :src="basicInfo.img" alt="" />
</div>
<div v-else class="box1-main-left-img-mock">
<img class="img-mock-badge-img" src="./assets/images/badge.png">
<p class="img-mock-badge-title">{{ basicInfo.eName }}</p>
<p class="img-mock-badge-org">The White House</p>
</div>
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ basicInfo.name }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text" v-if="basicInfo.eName?.length < 60">
{{ basicInfo.eName }}
</div>
<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start">
<template #reference>
<div class="item-right text">
{{ basicInfo.eName }}
</div>
</template>
</el-popover>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
{{ area.industryName }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ basicInfo.signTime }}</div>
</div>
<div class="item">
<div class="item-left">{{ "发布机构：" }}</div>
<div class="item-right text">
{{ basicInfo.proposeOrgName }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ basicInfo.bh }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ basicInfo.deadline + " 天" }}
</div>
</div>
</div>
</div>
</analysis-box>
<!-- <div class="box-header">
<div class="header-left"> <div class="header-left">
</div> </div>
...@@ -76,10 +139,31 @@ ...@@ -76,10 +139,31 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="box2"> <div class="box2">
<div class="box-header"> <analysis-box title="主要指令" :showAllBtn="false">
<div class="box2-main">
<el-empty v-if="!curmajorList.length" description="暂无数据" :image-size="100" />
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div>
<!-- <div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div> -->
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div>
<div class="box2-footer-right">
<el-pagination @current-change="handleCurrentChange" :page-size="5" background layout="prev, pager, next"
:total="majorListNum" />
</div>
</div>
</analysis-box>
<!-- <div class="box-header">
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">主要指令</div> <div class="title">主要指令</div>
<div class="header-right"> <div class="header-right">
...@@ -96,23 +180,76 @@ ...@@ -96,23 +180,76 @@
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index"> <div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div> <div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div> <div class="title">{{ item.content }}</div>
<!-- <div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div> -->
</div> </div>
</div> </div>
<div class="box2-footer"> <div class="box2-footer">
<div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div> <div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div>
<div class="box2-footer-right"> <div class="box2-footer-right">
<el-pagination @current-change="handleCurrentChange" :page-size="5" background <el-pagination @current-change="handleCurrentChange" :page-size="5" background layout="prev, pager, next"
layout="prev, pager, next" :total="majorListNum" /> :total="majorListNum" />
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="box3"> <div class="box3">
<div class="box-header"> <analysis-box title="发布机构" :showAllBtn="false">
<div class="box3-top">
<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
<div class="left">
<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
</div>
<div class="right">
<div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div>
</div>
<!-- <div class="more">
<div class="text">{{ "查看官网" }}</div>
<div class="icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div> -->
</div>
<div class="box3-top-bottom">
<div class="box3-top-bottom-header">
<div class="icon">
<img src="./assets/images/box3-icon1.png" alt="" />
</div>
<div class="text">{{ "关键人物" }}</div>
</div>
<div class="box3-top-bottom-main">
<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
<div class="box3-top-bottom-item-left">
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
</div>
<div class="box3-top-bottom-item-right">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.job }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="box3-bottom">
<div class="box3-bottom-header">
<div class="header-icon">
<img src="./assets/images/box3-bottom-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "机构动态" }}</div>
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
</analysis-box>
<!-- <div class="box-header">
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">发布机构</div> <div class="title">发布机构</div>
<div class="header-right"> <div class="header-right">
...@@ -133,12 +270,6 @@ ...@@ -133,12 +270,6 @@
<div class="name">{{ box3TopTopData.name + " >" }}</div> <div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div> <div class="ename">{{ box3TopTopData.eName }}</div>
</div> </div>
<!-- <div class="more">
<div class="text">{{ "查看官网" }}</div>
<div class="icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div> -->
</div> </div>
<div class="box3-top-bottom"> <div class="box3-top-bottom">
<div class="box3-top-bottom-header"> <div class="box3-top-bottom-header">
...@@ -170,14 +301,14 @@ ...@@ -170,14 +301,14 @@
<div class="box3-bottom-main"> <div class="box3-bottom-main">
<el-timeline style="max-width: 500px"> <el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top" <el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in eventList?.slice(0,3)" :key="index"> v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content"> <div class="timeline-content">
{{ item.newsContent }} {{ item.newsContent }}
</div> </div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -198,6 +329,7 @@ import { ...@@ -198,6 +329,7 @@ import {
import DefaultIcon1 from "@/assets/icons/default-icon1.png"; import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png"; import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import AnalysisBox from "@/components/BoxBackground/analysisBox.vue";
const route = useRoute(); const route = useRoute();
const decreeId = ref(route.query.id); const decreeId = ref(route.query.id);
...@@ -444,9 +576,9 @@ onMounted(() => { ...@@ -444,9 +576,9 @@ onMounted(() => {
margin-top: 16px; margin-top: 16px;
width: 1064px; width: 1064px;
height: 414px; height: 414px;
border-radius: 10px; // border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); // box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); // background: rgba(255, 255, 255, 1);
.box1-main { .box1-main {
display: flex; display: flex;
...@@ -455,13 +587,14 @@ onMounted(() => { ...@@ -455,13 +587,14 @@ onMounted(() => {
width: 395px; width: 395px;
height: 332px; height: 332px;
margin-left: 24px; margin-left: 24px;
img { img {
width: 100%; width: 100%;
// height: 100%; // height: 100%;
} }
} }
.box1-main-left-img-mock{
.box1-main-left-img-mock {
width: 240px; width: 240px;
height: 332px; height: 332px;
margin-left: 24px; margin-left: 24px;
...@@ -470,17 +603,20 @@ onMounted(() => { ...@@ -470,17 +603,20 @@ onMounted(() => {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 16px; padding: 16px;
.img-mock-badge-img{
.img-mock-badge-img {
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.img-mock-badge-title{
.img-mock-badge-title {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
color: #fff; color: #fff;
} }
.img-mock-badge-org{
.img-mock-badge-org {
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
...@@ -543,9 +679,9 @@ onMounted(() => { ...@@ -543,9 +679,9 @@ onMounted(() => {
margin-top: 16px; margin-top: 16px;
width: 1064px; width: 1064px;
height: 415px; height: 415px;
border-radius: 10px; // border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); // box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); // background: rgba(255, 255, 255, 1);
.box2-main { .box2-main {
margin-left: 22px; margin-left: 22px;
...@@ -631,9 +767,9 @@ onMounted(() => { ...@@ -631,9 +767,9 @@ onMounted(() => {
margin-top: 16px; margin-top: 16px;
width: 520px; width: 520px;
height: 845px; height: 845px;
border-radius: 10px; // border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); // box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); // background: rgba(255, 255, 255, 1);
.box3-top { .box3-top {
margin-top: 2px; margin-top: 2px;
......
src/views/overView/component/strengthComparison.vue
浏览文件 @ 4c3f7e40
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="resource-box"> <div class="resource-box">
<DivideHeader class="divide1" :titleText="'中美科技实力对比'"></DivideHeader> <DivideHeader class="divide1" :titleText="'中美科技实力对比'"></DivideHeader>
<div style="margin-top: 20px;display: flex;"> <div style="margin-top: 24px;display: flex;">
<div class="resource-content" style="width:100%"> <div class="resource-content" style="width:100%">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<div style="width: 50%;height: 550px;text-align: center;padding:0 15px ;position: relative;"> <div style="width: 50%;height: 550px;text-align: center;padding:0 24px ;position: relative;">
<div class="title-box"> <div class="title-box">
<div style="display: flex;width: 100%"> <div style="display: flex;width: 100%">
<div class="unite"> <div class="unite">
......
src/views/scientificFunding/index.vue
浏览文件 @ 4c3f7e40
...@@ -69,10 +69,13 @@ ...@@ -69,10 +69,13 @@
<!-- 6个数据 --> <!-- 6个数据 -->
<div class="data"> <div class="data">
<div v-for="(item, index) in dataList" :key="item.id" class="data-item"> <div v-for="(item, index) in dataList" :key="item.id" class="data-item">
<img :src="item.logoUrl" alt="" /> <img v-if="item.logoUrl && /\\.(jpe?g|png)$/i.test(item.logoUrl)" :src="item.logoUrl" alt="" />
<div class="data-item-title">{{ item.orgName }}</div> <img v-else src="./assets/images/nullcorpimg.png" alt="" />
<div class="data-item-name">{{ item.orgNameEn }}</div> <div class="data-text-item">
<div class="data-item-abb">{{ item.orgAbbEn }}</div> <div class="data-item-title">{{ item.orgName }}</div>
<div class="data-item-name">{{ item.orgNameEn }}</div>
<div v-if="item.orgAbbEn" class="data-item-abb">{{ item.orgAbbEn }}</div>
</div>
<div class="data-item-num" :style="{ color: color[index] }">{{ item.num + '项' }}</div> <div class="data-item-num" :style="{ color: color[index] }">{{ item.num + '项' }}</div>
</div> </div>
</div> </div>
...@@ -426,32 +429,36 @@ onMounted(async () => { ...@@ -426,32 +429,36 @@ onMounted(async () => {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
padding: 0px 24px;
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
} }
.data-text-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
margin-left: 16px;
margin-bottom: 4px;
}
img { img {
width: 88px; width: 88px;
height: 88px; height: 88px;
position: absolute;
top: 30px;
left: 23px;
} }
.data-item-title { .data-item-title {
width: 260px; width: 280px;
white-space: nowrap; white-space: nowrap;
/* 保持在一行内 */ /* 保持在一行内 */
overflow: hidden; overflow: hidden;
/* 隐藏超出部分 */ /* 隐藏超出部分 */
text-overflow: ellipsis; text-overflow: ellipsis;
/* 超出部分显示省略号 */ /* 超出部分显示省略号 */
position: absolute; font-size: 24px;
top: 19px;
left: 132px;
font-size: 32px;
font-weight: 700; font-weight: 700;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 42px; line-height: 42px;
...@@ -459,9 +466,6 @@ onMounted(async () => { ...@@ -459,9 +466,6 @@ onMounted(async () => {
} }
.data-item-name { .data-item-name {
position: absolute;
top: 71px;
left: 134px;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论