新版式
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user