Introducción

Soluciones industriales

Solución de visualización de azúcar de Baidu

https://sugar.baidu.com/home

Ali datav

https://data.aliyun.com/visual/datav

Atlas de nubes de Tencent

https://cloud.tencent.com/product/yuntu

Talla

Ahora, el diseño general de la pantalla grande es básicamente de tamaño 16: 9 o 32: 9

borrador de diseño

Los dibujos dados en el borrador del diseño son básicamente 16: 9, 1920 * 1080

Tamaño adaptable

Según el borrador del diseño, no hay ningún problema con la pantalla de imagen cortada de 1920 * 1080, pero aún se necesita una solución, es decir, debe ser compatible con páginas de otros tamaños, por lo que se necesita una solución adaptativa.

esquema de escala + margen

Son las style="width: 1920px;height: 1080px;"
propiedades de configuración de la página del panel de control de la pantalla grande , luego mediante la scaleescala adaptativa.
A través de la capa exterior margin: 0 xxpxpara lograr un centrado.

<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

https://github.com/bosscheng/big-dashboard

https://bosscheng.github.io/big-dashboard/

Desarrollo visual de pantalla grande basado en vue