新版式

This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions

View File

@@ -20,7 +20,7 @@
</div>
</div>
</div>
<div class="box-2 mr-8" :class="homeStore.amplify?'':'coll-box'">
<div class="box-2 mr-8" style="flex:1;" :class="homeStore.amplify?'':'coll-box'">
<div class="flex justify-center">
<div class="top flex justify-evenly">
<count-item label="今日舆情总数" :count="total" suffix="条" color="#ffffff" />
@@ -31,7 +31,7 @@
<div class="flex mt-20 gap-8 ml-8 mr-8">
<div v-for="(item, index) in stateList" :key="index" class="border flex-1">
<Title3 :title="item.name" />
<pie-row :width="490" :height="330" :dataList="item.data" :total="item.total" />
<pie-row :width="150" :height="200" :dataList="item.data" :total="item.total" />
</div>
</div>
</div>
@@ -41,7 +41,7 @@
</div>
</div>
<div class="flex mt-8">
<div class="box-2 mr-8 rela" :class="homeStore.amplify?'':'coll-box'">
<div class="box-2 mr-8 rela" style="width: 33%;" :class="homeStore.amplify?'':'coll-box'">
<Title1 title="舆情指数" />
<div class="select-box">
<Select
@@ -53,8 +53,8 @@
</div>
<div class="coll-box-3">
<Line
:width="1500"
:height="400"
width="100%"
:height="220"
:data="seriesData"
:xAxisData="xAxisData"
:seriesConfig="{ smooth: false, symbol: 'circle' }"
@@ -62,11 +62,11 @@
</div>
</div>
<div class="box-4 mr-8 rela">
<div class="box-4 mr-8 rela" style="width: 33%;" >
<Title1 title="地域分析" />
<Area />
<Area width="100%" />
</div>
<div class="box-3">
<div class="box-3" style="width: 33%;" >
<Title1 title="词频分析" />
<word-cloud />
</div>
@@ -249,7 +249,7 @@
.link {
color: #1890ff;
text-decoration: none;
// font-size:vw(14);
// font-size: font-vw(14);
}
.title {
@@ -332,7 +332,7 @@
}
.header-title{
font-size:vw(32);
font-size: font-vw(32);
color:#fff;
text-align:center;
font-weight:bold;
@@ -350,7 +350,7 @@
.header {
height: vh(28);
font-weight: 400;
font-size: vw(24);
font-size: font-vw(24);
color: #fff;
display: flex;
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
@@ -363,8 +363,9 @@
}
.list {
overflow-y: auto;
height: vh(490);
height: vh(520);
/* 滚动条整体样式 */
// height:100%;
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
@@ -380,7 +381,7 @@
.item {
height: vh(50);
font-weight: 400;
font-size: vw(24);
font-size: font-vw(20);
color: #f1f7ff;
display: flex;
&:nth-child(2n + 1) {
@@ -406,7 +407,7 @@
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
font-size: font-vw(22);
line-height: vh(26);
text-align: center;
font-style: normal;
@@ -424,7 +425,7 @@
height: vh(500);
.icon-box {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(24);
color: #ffffff;
line-height: vh(16);
flex-wrap: wrap;
@@ -451,7 +452,7 @@
text-align: center;
line-height: vh(26);
margin-left: vw(32.5);
font-size: vw(16);
font-size: font-vw(16);
font-weight: 800;
color: #fff;
background-image: url('@/assets/images/title-1.png');
@@ -477,33 +478,35 @@
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
.top {
width: vw(600);
height: vh(50);
width: vw(800);
height: vh(150);
margin-top: vh(35);
font-size: font-vw(22);
}
.box-1 {
width: vw(790);
height: vh(470);
width: vw(1000);
// height: vh(470);
@extend .bg;
}
.box-2 {
width: vw(1514);
height: vh(470);
// width: vw(1720);
// min-width: vw(1440);
// height: vh(470);
@extend .bg;
}
.box-3 {
width: vw(810);
height: vh(470);
// height: vh(470);
@extend .bg;
}
.box-4{
width: vw(850);
height: vh(470);
// height: vh(470);
@extend .bg;
}
.box-5{
width: vw(870);
height: vh(470);
width: vw(1200);
// height: vh(470);
@extend .bg;
}
.border {
@@ -513,7 +516,7 @@
.list {
margin: 0 vw(20);
overflow-y: auto;
height: vh(400);
height: vh(850);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
@@ -530,20 +533,21 @@
.item {
display: flex;
align-items: center;
height: vh(40);
height: vh(90);
&:nth-child(2n + 1) {
background: rgba(3, 78, 153, 0.3);
}
.status {
width: vw(40);
height: vh(20);
line-height: vh(20);
// width: vw(60);
// height: vh(40);
line-height: vh(40);
text-align: center;
margin: 0 vw(20);
font-weight: 400;
font-size: vw(12);
font-size: font-vw(20);
color: #ffffff;
border-radius: vw(2);
padding:vw(15);
&-error {
@extend .status;
background: #d9011b;
@@ -561,16 +565,17 @@
.content {
flex: 1;
font-weight: 400;
font-size: vw(15);
font-size: font-vw(22);
color: #ffffff;
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
margin-top:0;
}
.date {
margin: 0 vw(20);
font-weight: 400;
font-size: vw(12);
font-size: font-vw(18);
color: rgba(255, 255, 255, 0.7);
}
}