vue开发大屏

简介

业界解决方案

百度的 sugar 可视化解决方案

sugar.baidu.com/home

阿里datav

data.aliyun.com/visual/data…

腾讯云图

cloud.tencent.com/product/yun…

尺寸

现在一般的大屏设计基本都是16:9 或者是 32:9的尺寸

设计稿

设计稿给出来的图也基本是16:9的图，1920*1080

自适应尺寸

按照设计稿来说1920*1080切图展示是没有问题的，但是一个还是需要兜底方案的，就是需要兼容其他尺寸的页面，所以需要一个自适应的方案

scale + margin 方案

就是dashboard 大屏的页面 设置 style="width: 1920px;height: 1080px;" 属性，然后通过 scale 缩放 来自适应。 外层通过 margin: 0 xxpx 实现居中展示。

<div class="wrapper">
    <div class="container">
        <div class="dashboard-bg-image"></div>
        <div :style="marginStyle">
            <div style="position: relative;">
                <div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle">
                    <top-title :title.sync="title"></top-title>
                    <!-- left -->
                    <dashboard1></dashboard1>
                    <!-- right -->
                    <dashboard2></dashboard2>
                    <!-- right -->
                    <dashboard3></dashboard3>
                    <!-- right -->
                    <dashboard4></dashboard4>
                </div>
            </div>
        </div>
    </div>
</div> 
复制代码

.wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

.container {
    background-color: rgb(3, 12, 59);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.dashboard-bg-image {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../assets/bg2.jpg');
}

.dashboard-container {
    position: relative;
    user-select: none;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
    transition: all .3s linear;
    overflow: hidden;
}

复制代码

github

github.com/bosscheng/b…

bosscheng.github.io/big-dashboa…

 

关注下面的标签，发现更多相似文章

数据可视化

bosscheng 前端工程师 @ 前苏宁易购前端架构部bug工程师