Tony/god-ytr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 九龙坡大屏

Browse Source
This commit is contained in:
Tony 2023-11-28 14:20:52 +08:00
parent 5846d7834e
commit 6131efe6e9
27 changed files with 939 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
god-ui/src/layout/components/Navbar.vue
View File

@ -105,6 +105,9 @@ export default {
case '9160':
location.href = '/index';
break;
case '9180': // 九龙坡
location.href = '/index';
break;
default:
location.href = '/index';
break;
@ -131,6 +134,9 @@ export default {
case '9170':
this.$router.push("/bigscreen5")
break;
case '9180': // 九龙坡
this.$router.push("/bigscreen7")
break;
case '9190':
this.$router.push("/bigscreen6")
break;

5
god-ui/src/router/index.js
View File

@ -96,6 +96,11 @@ export const constantRoutes = [
component: () => import('@/views/bigscreen6/index.vue'),
hidden: true
},
{
path: '/bigscreen7',
component: () => import('@/views/bigscreen7/index.vue'),
hidden: true
},
{
path: '',
component: Layout,

BIN
god-ui/src/views/bigscreen7/assets/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
god-ui/src/views/bigscreen7/assets/device1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
god-ui/src/views/bigscreen7/assets/device2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
god-ui/src/views/bigscreen7/assets/footerBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
god-ui/src/views/bigscreen7/assets/headerBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
god-ui/src/views/bigscreen7/assets/itemTitle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
god-ui/src/views/bigscreen7/assets/mid1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
god-ui/src/views/bigscreen7/assets/mid2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
god-ui/src/views/bigscreen7/assets/mid3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
god-ui/src/views/bigscreen7/assets/mid4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
god-ui/src/views/bigscreen7/assets/run1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
god-ui/src/views/bigscreen7/assets/run2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
god-ui/src/views/bigscreen7/assets/run3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
god-ui/src/views/bigscreen7/assets/run4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
god-ui/src/views/bigscreen7/assets/run5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
god-ui/src/views/bigscreen7/assets/run6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
god-ui/src/views/bigscreen7/assets/runTimeBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
god-ui/src/views/bigscreen7/assets/top1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
god-ui/src/views/bigscreen7/assets/top2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
god-ui/src/views/bigscreen7/assets/top3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
god-ui/src/views/bigscreen7/assets/top4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
god-ui/src/views/bigscreen7/assets/top5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
god-ui/src/views/bigscreen7/assets/top6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
god-ui/src/views/bigscreen7/assets/top7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

928
god-ui/src/views/bigscreen7/index.vue Normal file
View File

@ -0,0 +1,928 @@
<!--九龙坡项目大屏-->
<template>
<div class="bigscreen-main-wrapper bigscreen7-wrapper">
<div class="header-main-wrapper">
<div class="header-left-part-wrapper">
<div class="current-time-wrapper">
<div class="tttt-time">{{ dateTime }}</div>
<span>{{ dateDay }}</span>
</div>
</div>
<div class="header-title-wrapper">九龙坡城市管理数据可视化大屏</div>
<div class="header-right-part-wrapper"></div>
</div>
<div class="content-main-wrapper">
<div class="content-main-item top-card-wrapper" style="grid-column: span 3;">
<div class="top-card-item" v-for="(item, index) in topCardList">
<div :class="['left-icon', 'top-icon-' + (index + 1)]"></div>
<div class="right-wrapper">
<div class="right-value">{{ item.value }}</div>
<div class="right-title">{{ item.title }}</div>
</div>
</div>
</div>
<div class="content-main-item">
<div class="content-main-item-title">人口及民生</div>
<div class="content-main-item-inner person-staff-wrapper">
<div class="progress-wrapper">
<div class="progress-item">
<div class="left-main-progress">
<div class="color-item"
style="width: 90%;background: linear-gradient(to right, #2977D3, #19FCDE);">优抚人员</div>
</div>
<div class="right-text-wrapper">100.72万（65.5%）</div>
</div>
<div class="progress-item">
<div class="left-main-progress">
<div class="color-item"
style="width: 60%;background: linear-gradient(to right, #2977D3, #0779FE);">流动人口</div>
</div>
<div class="right-text-wrapper">52.84（34.4%）</div>
</div>
</div>
<div class="staff-bottom-wrapper">
<div class="staff-bottom-item" id="chart1"></div>
<div class="staff-bottom-item" id="chart2"></div>
</div>
</div>
</div>
<div class="content-main-item middle-content-wrapper" style="grid-row: span 3;">
<div class="middle-top-wrapper">
<div class="middle-top-item">
<div class="middle-top-icon mid-icon-1"></div>
<div class="middle-top-title">今日投诉</div>
<div class="middle-top-value">10</div>
</div>
<div class="middle-top-item">
<div class="middle-top-icon mid-icon-2"></div>
<div class="middle-top-title">今日受理</div>
<div class="middle-top-value">8</div>
</div>
<div class="middle-top-item">
<div class="middle-top-icon mid-icon-3"></div>
<div class="middle-top-title">今日报警</div>
<div class="middle-top-value">16</div>
</div>
<div class="middle-top-item">
<div class="middle-top-icon mid-icon-4"></div>
<div class="middle-top-title">设备在线率</div>
<div class="middle-top-value">99%</div>
</div>
</div>
<div class="middle-bottom-wrapper" style="background-color: #3d5566b6;">
<bigScreen-table
:columns="columns1"
:data="data1"
rowStyle="background: none;margin-top: 3px;"
rowOddStyle="background: #071926A0;margin-top: 3px;"
/>
</div>
</div>
<div class="content-main-item">
<div class="content-main-item-title">城市管理数据分析</div>
<div class="content-main-item-inner" id="chart3"></div>
</div>
<div class="content-main-item">
<div class="content-main-item-title">设备信息</div>
<div class="content-main-item-inner device-info-wrapper">
<div class="device-info-main-wrapper">
<div class="device-info-main-icon device-icon-1"></div>
<div class="device-info-main-right">
<div class="device-info-main-right-title">设备总数</div>
<div class="device-info-main-right-value">1032</div>
</div>
</div>
<div class="device-info-content-wrapper">
<div class="device-info-content-title">环境监测</div>
<div class="device-info-content-value">1032</div>
</div>
<div class="device-info-content-wrapper">
<div class="device-info-content-title">智能传感</div>
<div class="device-info-content-value">597</div>
</div>
<div class="device-info-content-wrapper">
<div class="device-info-content-title">安防</div>
<div class="device-info-content-value">55</div>
</div>
<div class="device-info-main-wrapper">
<div class="device-info-main-icon device-icon-2"></div>
<div class="device-info-main-right">
<div class="device-info-main-right-title">监控设备</div>
<div class="device-info-main-right-value">2812</div>
</div>
</div>
<div class="device-info-content-wrapper">
<div class="device-info-content-title">在线</div>
<div class="device-info-content-value" style="color: greenyellow;">2791</div>
</div>
<div class="device-info-content-wrapper">
<div class="device-info-content-title">离线</div>
<div class="device-info-content-value" style="color: red;">20</div>
</div>
<div class="device-info-content-wrapper">
<div class="device-info-content-title">故障</div>
<div class="device-info-content-value">1</div>
</div>
</div>
</div>
<div class="content-main-item">
<div class="content-main-item-title">城管街道管理数据分析</div>
<div class="content-main-item-inner" id="chart4"></div>
</div>
<div class="content-main-item">
<div class="content-main-item-title">实时环境监测</div>
<div class="content-main-item-inner runtime-env-wrapper">
<div class="runtime-env-item" v-for="item in runTimeData">
<div :class="['runtime-env-icon', item.icon]"></div>
<div class="runtime-env-title">{{ item.title }}</div>
<div class="runtime-env-value">{{ item.value }}</div>
</div>
</div>
</div>
<div class="content-main-item">
<div class="content-main-item-title">投诉类型分布</div>
<div class="content-main-item-inner" id="chart5"></div>
</div>
</div>
<div class="footer-main-wrapper"></div>
</div>
</template>
<script>
import BigScreenTime from "@/utils/bigscreenTool/currentTime.vue";
import BigScreenTable from "@/utils/bigscreenTool/bigscreenTable.vue";
import {
generateBaseOptions,
generatePieOptions,
initChartStatic,
} from "@/utils/bigscreenTool/index.js";
import * as echarts from 'echarts'
export default {
components: { BigScreenTime, BigScreenTable },
data() {
return {
dateDay: '',
dateTime: '',
timeTimer: null,
columns1: [
{
key: "road",
label: "街道",
width: "40%",
},
{
key: "person",
label: "人口数",
width: "30%",
},
{
key: "device",
label: "设备数量",
width: "30%",
},
],
data1: [
{
road: "杨家坪街道",
person: "10.11万",
device: "1032",
},
{
road: "黄角坪街道",
person: "9.3万",
device: "965",
},
{
road: "谢家湾街道",
person: "8.92万",
device: "901",
},
{
road: "石坪桥街道",
person: "7.45万",
device: "865",
},
],
runTimeData: [
{
icon: 'run-icon-1',
title: 'PM2.5',
value: '68'
},
{
icon: 'run-icon-2',
title: 'PM10',
value: '66'
},
{
icon: 'run-icon-3',
title: '温度',
value: '21℃'
},
{
icon: 'run-icon-4',
title: '湿度',
value: '57.7R'
},
{
icon: 'run-icon-5',
title: '噪声',
value: '43.6db'
},
{
icon: 'run-icon-6',
title: '风速',
value: '1.6m/s'
},
],
topCardList: [
{
title: '城市面积',
value: '432k㎡'
},
{
title: '人口数量',
value: '153.56万'
},
{
title: '人口密度',
value: '3550人/k㎡'
},
{
title: '企业数量',
value: '2968'
},
{
title: '城市建设',
value: '1032'
},
{
title: '当前空气质量',
value: '优'
},
{
title: '当前公共安全指数',
value: '6'
},
]
}
},
created() {
this.getNowTime();
this.timeTimer = setInterval(() => {
this.getNowTime();
}, 1000);
},
beforeDestroy() {
clearInterval(this.timeTimer)
},
mounted() {
this.initChart1();
this.initChart2();
this.initChart3();
this.initChart4();
this.initChart5();
},
methods: {
initChart1() {
initChartStatic(
"chart1",
generatePieOptions({
color: [
"#0877fb",
"#19fcde",
],
legend: {
orient: 'horizontal',
left: 'right',
top: 'bottom',
itemWidth: 18,
itemHeight: 10,
textStyle: {
fontSize: 10,
lineHeight: 16,
}
},
series: [
{
name: "数据详情",
type: "pie",
radius: ["36%", "50%"],
center: ["50%", "50%"],
data: [
{
name: "城镇人口",
value: 329,
},
{
name: "乡村人口",
value: 1021,
},
],
label: {
formatter: "{b|{b}}\n {per|{d}%}",
lineHeight: 16,
rich: {
b: {
color: "#fff",
fontSize: 12,
lineHeight: 13,
},
per: {
color: "#fff",
fontSize: 12,
lineHeight: 13,
},
},
},
},
],
})
);
},
initChart2() {
initChartStatic(
"chart2",
generatePieOptions({
color: [
"#ffb742",
"#69e190",
],
legend: {
orient: 'horizontal',
left: 'right',
top: 'bottom',
itemWidth: 18,
itemHeight: 10,
textStyle: {
fontSize: 10,
lineHeight: 16,
}
},
series: [
{
name: "数据详情",
startAngle: -45,
type: "pie",
radius: ["36%", "50%"],
center: ["50%", "50%"],
data: [
{
name: "男",
value: 49.13,
},
{
name: "女",
value: 51.59,
},
],
label: {
formatter: "{c|{c}}\n {per|{d}%}",
lineHeight: 16,
rich: {
b: {
color: "#fff",
fontSize: 12,
lineHeight: 13,
},
per: {
color: "#fff",
fontSize: 12,
lineHeight: 13,
},
},
},
},
],
})
);
},
initChart3() {
initChartStatic(
"chart3",
generateBaseOptions({
xAxis: {
axisLabel: {
interval: 0,
color: '#ffffff'
},
data: ['沿街晾晒', '道路不洁检测', '街道垃圾', '火焰', '乱堆物料', '烟雾'],
},
color: ["#136acf", "#12a4ae", "#358d6a"],
yAxis: {
name: "",
max: 500,
axisLabel: {
interval: 0,
color: '#ffffff'
},
},
series: [
{
name: "",
data: [487, 432, 289, 292, 390, 450],
type: "bar",
barWidth: 35,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#66FFFF",
fontSize: 13,
},
},
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#1e68bf' },
{ offset: 1, color: '#27e5ee' }
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#1e68bf' },
{ offset: 1, color: '#476882' }
]
)
}
}
}
],
grid: {
left: '10%',
top: '13%',
right: '6%',
bottom: '13%'
}
})
);
},
initChart4() {
initChartStatic(
"chart4",
generatePieOptions({
color: [
"#5a3fff",
"#0f7fff",
"#ffb742",
"#335fff",
"#69e190",
"#34dcfe",
],
legend: {
// 图例配置
orient: "vertical",
right: 20,
itemGap: 10,
top: 'center',
textStyle: {
color: '#fff'
},
},
series: [
{
name: "数据详情",
type: "pie",
radius: ["36%", "60%"],
center: ["35%", "50%"],
data: [
{
name: "机动车占道",
value: 3207,
},
{
name: "餐饮占道经营",
value: 4319,
},
{
name: "自行车占道",
value: 1018,
},
{
name: "广告牌占道",
value: 358,
},
{
name: "自行车占道",
value: 1897,
},
{
name: "摆摊占道",
value: 2153,
},
],
label: {
formatter: "{c|{c}}, {per|{d}%}",
rich: {
c: {
color: "#fff",
fontSize: 12,
lineHeight: 33,
},
per: {
color: "#fff",
fontSize: 12,
lineHeight: 33,
},
},
},
},
],
})
);
},
initChart5() {
initChartStatic(
"chart5",
generatePieOptions({
color: [
"#80d4fd",
"#52d98a",
"#496eef",
"#f1cb59",
],
legend: {
// 图例配置
orient: "vertical",
right: 20,
itemGap: 10,
top: 'center',
textStyle: {
color: '#fff'
},
},
series: [
{
name: "数据详情",
type: "pie",
radius: ["36%", "60%"],
center: ["35%", "50%"],
data: [
{
name: "市容秩序类",
value: 432,
},
{
name: "环境卫生类",
value: 598,
},
{
name: "市政园林类",
value: 176,
},
{
name: "源头管理类",
value: 213,
},
],
label: {
formatter: "{c|{c}}, {per|{d}%}",
rich: {
c: {
color: "#fff",
fontSize: 12,
lineHeight: 33,
},
per: {
color: "#fff",
fontSize: 12,
lineHeight: 33,
},
},
},
},
],
})
);
},
getNowTime() {
const date = new Date();
let year = date.getFullYear(); //获取当前年份
let month = date.getMonth() + 1; //获取当前月份（记得+1）
month = month < 10 ? '0' + month.toString() : month.toString();
let dates = date.getDate(); //获取当前是几日
dates = dates < 10 ? '0' + dates.toString() : dates.toString();
let day = date.getDay();
const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
this.dateDay = year + '-' + month + '-' + dates + ' ' + arr[day];
this.dateTime = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
+ ':' +
(date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
+ ':' +
(date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
},
}
}
</script>
<style scoped lang="scss">
@import url(../../utils/bigscreenTool/index.scss);
.bigscreen7-wrapper {
width: 100vw;
height: 100vh;
overflow: hidden;
background-image: url(./assets/bg.png);
mix-blend-mode: multiply;
}
.header-main-wrapper {
background-image: url(./assets/headerBg.png);
}
.current-time-wrapper {
display: flex;
align-items: center;
color: #00D1FF;
font-family: "TitleFont";
padding: 0 10px;
font-size: 1rem;
span {
padding: 8px;
}
.tttt-time {
padding: 8px;
width: 10rem;
font-size: 2rem;
padding-left: 20px;
}
}
.content-main-wrapper {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 7.2rem calc(33% - 2.4rem) calc(33% - 2.4rem) calc(34% - 2.4rem);
.content-main-item {
padding: 16px;
.content-main-item-title {
height: 2rem;
background-image: url(./assets/itemTitle.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 100% auto;
font-family: "TitleFont";
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 3.2rem;
background-color: #275079b3;
}
.content-main-item-inner {
height: calc(100% - 2rem);
background-color: #275079b3;
}
}
}
.footer-main-wrapper {
background-image: url(./assets/footerBg.png);
}
/**顶部 */
.top-card-wrapper {
padding: 10px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1rem;
.top-card-item {
border: 1px solid #275079;
background: linear-gradient(to right, #081f37c1, #123251c2);
display: flex;
justify-content: center;
align-items: center;
.left-icon {
width: 3rem;
height: 3rem;
background-size: 100% 100%;
}
.right-wrapper {
margin-left: 1.6rem;
display: flex;
flex-direction: column;
width: 8rem;
.right-value {
font-family: "TitleFont";
font-size: 1.3rem;
}
.right-title {
color: #90D7FC;
font-size: 0.8rem;
}
}
}
}
/**人口及民生 */
.person-staff-wrapper {
padding: 12px;
.progress-wrapper {
height: 3.2rem;
display: flex;
flex-direction: column;
justify-content: space-around;
.progress-item {
display: flex;
align-items: center;
.left-main-progress {
height: 1.3rem;
line-height: 1.3rem;
width: calc(100% - 8rem);
background-color: #132d47b7;
.color-item {
height: 100%;
font-size: .8rem;
font-family: "TitleFont";
padding-left: 1rem;
}
}
.right-text-wrapper {
width: 8rem;
font-size: .7rem;
padding-left: 1rem;
}
}
}
.staff-bottom-wrapper {
height: calc(100% - 3.2rem);
display: flex;
.staff-bottom-item {
width: 50%;
height: 100%;
}
}
}
/**设备信息 */
.device-info-wrapper {
display: grid;
grid-template-columns: 3fr 2fr 2fr 2fr;
grid-template-rows: 1fr 1fr;
gap: 0;
/**左侧的带图表的item */
.device-info-main-wrapper {
display: flex;
justify-content: center;
align-items: center;
.device-info-main-icon {
width: 2rem;
height: 2rem;
}
.device-info-main-right {
padding-left: 1.3rem;
.device-info-main-right-title {
font-size: .8rem;
}
.device-info-main-right-value {
font-size: 1.2rem;
font-family: "TitleFont";
}
}
}
.device-info-content-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.device-info-content-title {
font-size: .8rem;
}
.device-info-content-value {
font-size: 1.2rem;
font-family: "TitleFont";
}
}
}
/**实时环境监测 */
.runtime-env-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding: 16px;
.runtime-env-item {
background-size: 100 80%;
background-repeat: no-repeat;
background-position: center top;
background-image: url(./assets/runTimeBg.png);
display: flex;
flex-direction: column-reverse;
align-items: center;
.runtime-env-icon {
width: 1.6rem;
height: 1.6rem;
background-size: 100% 100%;
}
.runtime-env-title {
font-size: .8rem;
padding: 6px;
}
.runtime-env-value {
font-family: "TitleFont";
font-size: 1.4rem;
color: #66FFFF;
}
}
}
/**中间部分 */
.middle-content-wrapper {
position: relative;
.middle-top-wrapper {
position: absolute;
width: calc(100% - 32px);
display: flex;
justify-content: center;
align-items: center;
.middle-top-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 14px;
padding: 12px 2.4rem;
border: 1px solid #2ACFF6;
background-color: #081f379a;
.middle-top-icon {
width: 3rem;
height: 3rem;
background-size: 100% 100%;
}
.middle-top-title {
font-size: .9rem;
}
.middle-top-value {
font-family: "TitleFont";
font-size: 1.4rem;
}
}
}
.middle-bottom-wrapper {
position: absolute;
width: calc(100% - 32px);
bottom: 10px;
}
}
@for $i from 1 through 7 {
.top-icon-#{$i} {
background-image: url(./assets/top#{$i}.png);
}
}
@for $i from 1 through 6 {
.run-icon-#{$i} {
background-image: url(./assets/run#{$i}.png);
}
}
@for $i from 1 through 4 {
.mid-icon-#{$i} {
background-image: url(./assets/mid#{$i}.png);
}
}
@for $i from 1 through 2 {
.device-icon-#{$i} {
background-image: url(./assets/device#{$i}.png);
}
}
</style>