feat: 九龙坡大屏

god-ui/src/layout/components/Navbar.vue

@@ -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;

god-ui/src/router/index.js

@@ -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,

god-ui/src/views/bigscreen7/index.vue

@@ -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>