lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善样式

Browse Source
This commit is contained in:
zjc
2024-12-20 12:56:03 +08:00
parent c9b4f315e5
commit cfba180177
13 changed files with 924 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/views/scenic/components/box-2.vue
View File

@@ -3,7 +3,7 @@
<div class="flex">
<div class="box mr-10">
<Title1 title="排队信息" />
<div class="top flex justify-between">
<div class="count-box flex justify-between">
<count-item label="今日出票" :count="35600" suffix="张" />
<count-item label="今日接待人数" :count="35600" suffix="人" />
<count-item label="排队人数" :count="35600" suffix="人" />
@@ -62,7 +62,7 @@
</div>
<div class="box-2">
<Title1 title="安全信息 " />
<div class="top flex">
<div class="count-box flex">
<count-item label="当前告警总数" :count="561" suffix="次" />
<count-item label="安全告警总数" :count="561" suffix="次" />
<count-item label="已解除告警数" :count="561" />
@@ -78,7 +78,7 @@
<div class="flex mt-10">
<div class="box-3 mr-10">
<Title1 title="交通信息" />
<div class="top flex">
<div class="count-box flex">
<count-item label="总通景路段" :count="35600" suffix="张" />
<count-item label="通景路段拥堵数" :count="35600" suffix="人" />
<count-item label="拥堵开始时间" :count="35600" suffix="人" />
@@ -86,24 +86,68 @@
</div>
<div class="flex">
<div class="border">
<Line :width="260" :height="330" />
<Title3 title="今日交通负载" />
<traffic-flow />
</div>
<div class="border">
<PieCol :width="230" :height="330" />
<Title3 title="今日交通负载" />
<PieCol :width="230" :height="300" />
</div>
<div class="border">
<PieCol :width="230" :height="330" />
<Title3 title="今日交通负载" />
<PieCol :width="230" :height="300" />
</div>
</div>
</div>
<div class="box-4 mr-10">
<Title1 title="用户画像" />
<div class="flex">
<div class="border">1</div>
<div class="border">2</div>
<div class="border">3</div>
<div class="flex-1">
<Title3 title="年龄/性别占比" />
<age-ratio />
<div class="count">总人数：<countup endVal="124563" /></div>
<div class="cell pt-20">
<img class="icon" src="@/assets/images/man.png" />
<div class="bg">
<span class="text">男性</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
/>
</div>
<span class="man">50%</span>
</div>
</div>
<div class="cell pt-20">
<img class="icon" src="@/assets/images/woman.png" />
<div class="bg">
<span class="text">女性</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right, #0A4482 0%, #FF7021 100%)"
/>
</div>
<span class="woman">50%</span>
</div>
</div>
</div>
<div class="border flex-1">
<Title3 title="客源地分析TOP5" />
<top />
</div>
<div class="border flex-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup endVal="124563" /></div>
<ticket />
</div>
</div>
</div>
<div class="box-5">
<Title1 title="车船信息" />
<div class="flex mb-6">
@@ -172,6 +216,11 @@
import carIcon from '@/assets/images/car.png'
import shipIcon from '@/assets/images/ship.png'
import BigCarShipMap from './big-car-ship-map.vue'
import AgeRatio from './age-ratio.vue'
import top from './top.vue'
import ticket from './ticket.vue'
import TrafficFlow from './traffic-flow.vue'
const { initMap, addMarker } = useMap()
let show = ref(false)
onMounted(() => {
@@ -222,7 +271,7 @@
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
.top {
.count-box {
padding: 0 vw(10);
height: vh(70);
}
@@ -233,7 +282,7 @@
position: relative;
overflow: hidden;
padding: 0 vw(10);
margin: 0 vw(10);
margin: 0 vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
@@ -300,5 +349,109 @@
width: vw(50);
z-index: 999;
}
.count {
margin: vw(20) vw(20) 0 vw(20);
height: vh(24);
font-weight: bold;
font-size: vw(14);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-left: vw(4) solid #37d8fc;
border-right: vw(4) solid #37d8fc;
background: rgba(0, 150, 255, 0.19);
}
.cell {
margin-left: vw(10);
display: flex;
align-items: center;
.bg {
display: flex;
align-items: center;
height: vh(20);
padding-right: vw(10);
background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
}
.icon {
width: vw(26);
height: vh(28);
margin-right: vw(4);
}
.text {
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.progress {
width: vw(120);
margin-left: vw(4);
}
.man {
font-weight: bold;
font-size: vw(14);
color: #02f9fa;
margin-left: vw(10);
}
.woman {
font-weight: bold;
font-size: vw(14);
color: #f15a25;
margin-left: vw(10);
}
}
.ticket-box {
margin-top: vh(20);
width: 100%;
height: vh(106);
background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
.title {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
}
.ticket-wrap {
display: flex;
align-items: center;
justify-content: space-between;
& > img {
width: vw(74);
height: vh(74);
}
& > div {
flex: 1;
height: vh(58);
display: flex;
align-items: center;
background-image: url('@/assets/images/ticket-item-bg.png');
background-size: 100% 100%;
}
.label {
padding-left: vw(10);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
font-weight: bold;
}
}
}
</style>