首页 > 其他分享 >超漂亮智能看板 大屏展示 前端静态模板

超漂亮智能看板 大屏展示 前端静态模板

时间：2024-06-10 13:58:51浏览次数：24  
标签：静态 写字楼 西路 金燕龙 建材城 大屏 北京市 昌平区 模板

效果图

代码

<div class="viewport">
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>2,190</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            设备总数
                        </span>
                    </div>
                    <div class="item">
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            季度新增
                        </span>
                    </div>
                    <div class="item">
                        <h4>3,001</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            运营设备
                        </span>
                    </div>
                    <div class="item">
                        <h4>108</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            异常设备
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">故障设备监控</a>
                        <a href="javascript:;" data-index="1">异常设备监控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">故障时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">11北京市昌平西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000003</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col">1000004</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000005</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">异常时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190703</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190705</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190706</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190707</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190708</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190709</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    设备数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

下载链接

超漂亮智能看板 大屏展示 前端静态模板

https://download.csdn.net/download/JSPSEO/89417002

标签：静态,写字楼,西路,金燕龙,建材城,大屏,北京市,昌平区,模板
From： https://blog.csdn.net/JSPSEO/article/details/139576175

相关文章

  • Vue TypeScript 实战：掌握静态类型编程
    title:VueTypeScript实战：掌握静态类型编程date:2024/6/10updated:2024/6/10excerpt:这篇文章介绍了如何在TypeScript环境下为Vue.js应用搭建项目结构，包括初始化配置、创建Vue组件、实现状态管理利用Vuex、配置路由以及性能优化的方法，旨在提升开发效率与应用性能。categ......
  • 32、matlab:基于模板匹配的车牌识别
    1、准备工作1）准备材料车牌字符模板和测试的实验车牌2）车牌字符模板数字、字母和省份缩写3）测试车牌四张测试车牌 2、车牌识别实现(已将其嵌入matlab)1）打开APP找到APP找到我的APP双击点开  2)界面介绍包括：按钮、视图界面和文本框等功能组件按钮包含打开图片......
  • C++多态详解：静态多态与动态多态的实现
    C++中的多态是面向对象编程的重要特性，允许相同的接口调用不同的实现。多态性可以分为两类：静态多态和动态多态。1.静态多态(编译时多态)（1）函数重载(FunctionOverloading）：函数重载是一种静态多态，允许同一个函数名在同一作用域内具有不同的参数列表。这些不同的版本在编译时......
  • Zabbix 7.0 LTS OVF (build with LNMP based on Rocky 8.10) - VMware 虚拟机模板
    Zabbix7.0LTSOVF(buildwithLNMPbasedonRocky8.10)-VMware虚拟机模板Zabbix7.0LTS|企业级开源监控解决方案请访问原文链接：https://sysin.org/blog/zabbix-7-ovf/，查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgZabbix简介全方位监控获取整个IT......
  • 开源C++静态代码检测工具clang-tidy、cppcheck和oclint的比较
    以下是clang-tidy、cppcheck和oclint的比较关于Clang-Tidy的使用请参考：使用Clang-Tidy进行静态代码分析：完整的配置与CMake集成实例关于Cppcheck的使用请参考：使用Cppcheck进行静态代码分析：完整的shell脚本与CMake集成实例关于OCLint的使用请参考：使用OCLint......
  • 【数据结构·队列】链队列（带头结点）模板简单应用算法设计：长整数加法计算
    目的：使用C++模板设计链队列的抽象数据类型（ADT）。并在此基础上，使用链队列ADT的基本操作，设计并实现简单应用的算法设计。内容：（1）请参照单链表的ADT模板，设计链队列的抽象数据类型。（由于该环境目前仅支持单文件的编译，故将所有内容都集中在一个源文件内。在实际的设计中，推荐将抽象类及......
  • Linux配置路由功能及添加静态路由
    配置路由功能Linux作为路由器，Linux本身就具备路由功能，开启方式如下：临时开启：echo"1">/proc/sys/net/ipv4/ip_forward永久开启：vim/etc/sysctl.confnet.ipv4.ip_forward=1#配置生效sysctl-p开启了路由功能之后的Linux服务器就相当于一个Router，Linux服务器的路......
  • XSLT 模板美化nmap输出报告
    Nmap扫描与报告美化简介Nmap（NetworkMapper）是一款开源的网络探测和安全审核工具，它主要用于扫描IP地址和端口，检测网络上的设备、开放的端口以及运行的服务。Nmap是网络管理员评估网络系统安全性的重要工具。扫描并输出XML文档首先使用Nmap进行网络扫描，并将详细结果......
  • 模板方法模式
    什么是模板方法模式   模板方法模式是一种行为设计模式，它定义了一个操作中的算法的框架，将一些步骤延迟到子类中实现。模板方法模式使得子类可以在不改变算法结构的情况下重新定义算法的某些步骤。在模板方法模式中，有一个抽象类定义了一个模板方法，该方法定义了算法的步骤......
  • 【模板】单源最短路径（Dijkstra + 堆优化）
    #include<iostream>#include<queue>usingnamespacestd;constintinf=2147483647;constintMAXX=2e5+11;intn,m,s,cnt;intdis[MAXX];intto[MAXX],nxt[MAXX],val[MAXX],h[MAXX];boolvis[MAXX];structnode{intv,w;friendbool......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99