提交 4c3f7e40 authored 作者: 李郝虎's avatar 李郝虎

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

<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>
<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>
<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
<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
<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
......@@ -12,6 +12,12 @@ import "./styles/main.css";
import '@/assets/fonts/font.css'
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 实例
import pinia from './stores'
const app = createApp(App);
......@@ -29,4 +35,9 @@ app.use(ElementPlus, {
})
app.use(pinia) // 挂载 Pinia
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");
......@@ -6,7 +6,7 @@
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.svg" />
</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="
......@@ -37,7 +37,7 @@
</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 style="width: 778px; height: 620px; overflow: auto">
<el-table
......@@ -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="美国">
<template #default="scope">
<div style="display: flex">
......@@ -79,7 +80,7 @@
<el-table-column prop="chinaScore" label="中国">
<template #default="scope">
<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
:percentage="scope.row.chinaScore"
:stroke-width="20"
......@@ -998,19 +999,20 @@ const handleClickBottomBtn = () => {
/* 自定义未展开图标 */
:deep(.el-table__expand-icon) {
background-image: url("./icon/arrowDown.png");
background-image: url("./icon/arrowRight.png");
background-repeat: no-repeat;
background-size: contain;
width: 24px;
height: 24px;
// background-size: contain;
margin-left: 16px;
margin-top: 4px;
cursor: pointer;
transition: transform 0.3s;
transition: transform 0.1s;
}
/* 自定义展开图标 */
:deep(.el-table__expand-icon--expanded) {
background-image: url("./icon/arrowDown.png");
transform: rotate(270deg) !important;
background-image: url("./icon/arrowRight.png");
transform-origin:center;
transform: rotate(90deg) !important;
}
/* 自定义表头背景颜色 */
......@@ -1043,7 +1045,7 @@ const handleClickBottomBtn = () => {
}
:deep(.el-table .el-table__cell) {
padding-left: 5px;
padding-right: 5px;
padding-left: 1px;
padding-right: 1px;
}
</style>
......@@ -17,7 +17,7 @@ const radarChart = (nameList, valueList) => {
const option = {
title: { text: '' },
radar: {
radius: '75%', // 雷达图本身占容器 75%
radius: '70%', // 雷达图本身占容器 75%
indicator: nameList.map(name => ({
name: name,
max: maxValue * 1.2 // 设置最大值为数据最大值的120%
......@@ -25,13 +25,14 @@ const radarChart = (nameList, valueList) => {
axisName: {
color: '#ffffff',
fontSize: 18,
lineHeight: 24,
fontWeight: 700,
backgroundColor: '#0560C3',
borderRadius: 20,
padding: [8, 20],
padding: [8, 12],
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
if (len <= 8) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
}
......
......@@ -1215,9 +1215,16 @@ onUnmounted(() => {
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
// &:hover {
// //background: var(--color-bg-hover);
// .item-right {
// .text{
// color:var(--color-main-active);
// }
// }
// }
.itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important;
......@@ -1291,11 +1298,11 @@ onUnmounted(() => {
width: 780px;
display: flex;
cursor: pointer;
background: var(--color-bg-hover);
// background: var(--color-bg-hover);
&:hover {
background: var(--color-bg-hover);
}
// &:hover {
// background: var(--color-bg-hover);
// }
.itemLeftStatus1 {
color: rgba(245, 34, 45, 1) !important;
......@@ -1341,6 +1348,7 @@ onUnmounted(() => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: underline;
}
.time {
......
......@@ -169,19 +169,9 @@
{{ bill.billName }}
</div>
<div class="box1-main-left-info">
<div
class="info-box"
:class="{
info1: index === 0,
info2: index === 1,
info3: index === 2,
info4: index === 3
}"
v-for="(item, index) in bill.hylyList"
:key="index"
>
{{ item.industryName }}
</div>
<AreaTag v-for="(item, index) in bill.hylyList"
:key="index" :tagName="item.industryName"></AreaTag>
</div>
<div class="box1-main-left-info1">
<div class="info1-box">
......@@ -841,6 +831,7 @@ import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
import { ElMessage } from "element-plus";
import AreaTag from "@/components/areaTag.vue";
const searchBillText = ref("");
......@@ -2153,42 +2144,6 @@ onUnmounted(() => {
margin-top: 17px;
display: flex;
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 {
margin-top: 25px;
......
......@@ -1808,6 +1808,7 @@ onMounted(async () => {
.box1-main {
display: flex;
justify-content: space-between;
width: 1064px;
height: 354px;
margin-top: 22px;
......@@ -1816,8 +1817,9 @@ onMounted(async () => {
box-sizing: border-box;
.box1-main-left {
width: 458px;
width: 450px;
height: 353px;
position: relative;
img {
width: 100%;
......@@ -1825,6 +1827,7 @@ onMounted(async () => {
}
.box1-main-left-img-mock {
width: 100%;
height: 100%;
margin-left: 24px;
border-radius: 4px;
......@@ -1856,8 +1859,12 @@ onMounted(async () => {
}
.box1-main-right {
margin-left: 28px;
flex: 1;
width: 500px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.box1-main-right-title {
width: 100%;
......@@ -1867,9 +1874,12 @@ onMounted(async () => {
font-size: 20px;
font-weight: 700;
line-height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
-webkit-line-clamp: 2; /* 限制文本显示的行数 */
-webkit-box-orient: vertical; /* 设置弹性盒子的子元素垂直排列 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
.box1-main-right-info {
......@@ -1922,6 +1932,10 @@ onMounted(async () => {
font-size: 16px;
font-weight: 400;
line-height: 30px;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
.box1-main-right-footer {
......
......@@ -2,7 +2,70 @@
<div class="introduction-wrap">
<div class="left">
<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>
......@@ -76,10 +139,31 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<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="title">主要指令</div>
<div class="header-right">
......@@ -96,23 +180,76 @@
<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" />
<el-pagination @current-change="handleCurrentChange" :page-size="5" background layout="prev, pager, next"
:total="majorListNum" />
</div>
</div>
</div> -->
</div>
</div>
<div class="right">
<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="title">发布机构</div>
<div class="header-right">
......@@ -133,12 +270,6 @@
<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">
......@@ -170,14 +301,14 @@
<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">
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>
</div> -->
</div>
</div>
</div>
......@@ -198,6 +329,7 @@ import {
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import AnalysisBox from "@/components/BoxBackground/analysisBox.vue";
const route = useRoute();
const decreeId = ref(route.query.id);
......@@ -444,9 +576,9 @@ onMounted(() => {
margin-top: 16px;
width: 1064px;
height: 414px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
.box1-main {
display: flex;
......@@ -455,13 +587,14 @@ onMounted(() => {
width: 395px;
height: 332px;
margin-left: 24px;
img {
width: 100%;
// height: 100%;
}
}
.box1-main-left-img-mock{
.box1-main-left-img-mock {
width: 240px;
height: 332px;
margin-left: 24px;
......@@ -470,17 +603,20 @@ onMounted(() => {
align-items: center;
flex-direction: column;
padding: 16px;
.img-mock-badge-img{
.img-mock-badge-img {
width: 80px;
height: 80px;
}
.img-mock-badge-title{
.img-mock-badge-title {
text-align: center;
font-size: 20px;
line-height: 28px;
color: #fff;
}
.img-mock-badge-org{
.img-mock-badge-org {
text-align: center;
font-size: 14px;
color: #fff;
......@@ -543,9 +679,9 @@ onMounted(() => {
margin-top: 16px;
width: 1064px;
height: 415px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
.box2-main {
margin-left: 22px;
......@@ -631,9 +767,9 @@ onMounted(() => {
margin-top: 16px;
width: 520px;
height: 845px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
.box3-top {
margin-top: 2px;
......
......@@ -3,7 +3,7 @@
<div class="resource-box">
<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%">
......@@ -23,7 +23,7 @@
</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 style="display: flex;width: 100%">
<div class="unite">
......
......@@ -69,10 +69,13 @@
<!-- 6个数据 -->
<div class="data">
<div v-for="(item, index) in dataList" :key="item.id" class="data-item">
<img :src="item.logoUrl" alt="" />
<div class="data-item-title">{{ item.orgName }}</div>
<div class="data-item-name">{{ item.orgNameEn }}</div>
<div class="data-item-abb">{{ item.orgAbbEn }}</div>
<img v-if="item.logoUrl && /\\.(jpe?g|png)$/i.test(item.logoUrl)" :src="item.logoUrl" alt="" />
<img v-else src="./assets/images/nullcorpimg.png" alt="" />
<div class="data-text-item">
<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>
</div>
......@@ -426,32 +429,36 @@ onMounted(async () => {
position: relative;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
padding: 0px 24px;
&:hover {
transform: translateY(-3px);
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 {
width: 88px;
height: 88px;
position: absolute;
top: 30px;
left: 23px;
}
.data-item-title {
width: 260px;
width: 280px;
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
position: absolute;
top: 19px;
left: 132px;
font-size: 32px;
font-size: 24px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 42px;
......@@ -459,9 +466,6 @@ onMounted(async () => {
}
.data-item-name {
position: absolute;
top: 71px;
left: 134px;
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论