Introduction to the

Industry Solutions

Baidu’s Sugar visualization solution

sugar.baidu.com/home

Ali datav

Data.aliyun.com/visual/data…

Tencent cloud

Cloud.tencent.com/product/yun…

size

Now the average large screen design is basically 16:9 or 32:9 in size

The design draft

The drawings given by the design draft are basically 16:9 drawings, 1920*1080

Adaptive size

According to the design draft, there is no problem with 1920*1080 cut diagram display, but one still needs a bottom-pocket scheme, that is, it needs to be compatible with pages of other sizes, so it needs an adaptive scheme

Scale + Margin scheme

Style =”width: 1920px; height: 1080px;” Property, and then adapt by scaling. The outer layer is displayed in the center by 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> 
Copy the code

.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;
}

Copy the code

github

Github.com/bosscheng/b…

Bosscheng. Making. IO/big – dashboa…