提交 7f07b843 authored 作者: sumengxi's avatar sumengxi

更新部分样式

上级 d4b8b274
......@@ -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 {
......
......@@ -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 {
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论