myspace
Blue Lagoon UI design
The overall layout is such a Header, a sider, and content. What we need to care about is the content area.
According to the content area of the design drawing, it is divided into three containers, A B C
Now it is required that the content area is highly responsive, and the height of A + B is the same as that of C.
Replenish:
- The width of A and B can be adjusted, and the width of C is self-adaptive.
- The height of A can be adjusted, and the height of B is self-adaptive.
Solution Demo
This is an abstract schematic
The html structure is as follows
<div class="outer">
<div class="left">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</div>
The css layout is as follows, a whole is divided into left and right parts, and then the left part is further divided into upper and lower parts, all using flex for self-adaptation.
.outer {
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.left {
display: flex;
width: 240px;
margin-right: 8px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
.top {
height: 50%;
margin-bottom: 8px;
background-color: #fff;
}
.bottom {
flex: 1;
background-color: yellow;
}
}
.right {
flex: 1;
background-color: #ff33ff;
}
}real solution scenario
- Refactor according to the above html structure.
- Can be compatible with the current row, col components.
The final effect is as follows
side effect
Due to the modification of the code structure, the CSS of some elements in the container is invalid. The reason has not been identified for the time being, and the workload of subsequent modifications cannot be estimated. It should not be difficult to adjust the CSS alone, but there are many details.
codePage
Blue Lagoon UI design
The design diagram display is divided as follows
- Header General
- Sider Universal
- Content customization
Content area planning
Due to the inconsistent display of breadcrumbs, the plan is to manage them separately on the page, so put the breadcrumbs in the Content area for layout, the effect is as follows
- outer outermost container
- YsBreadcrumb breadcrumb area
- box is the real content area
Vue2.x requires that each component must have a root node, so a root is also required
<div class="root">
<div class="YsBreadcrumb"></div>
<div class="box">
</div>
</div>Box area planning
The box area is divided into three parts: left, middle, and right, and the right part is subdivided into two parts: upper and lower.
- Left
- Middle
- Top
- Bottom
<template>
<div class="root">
<div class="YsBreadcrumb"></div>
<div class="box">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</div>
</template>.root {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
height: calc(100% - 48px);
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.left {
display: flex;
margin-right: 8px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
background: #2f3e59;
}
.middle {
flex: 1;
background: #2f3e59;
margin-right: 8px;
border: 1px solid #fff;
}
.right {
height: 100%;
display: flex;
margin-right: 8px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
.top {
height: 50%;
margin-bottom: 8px;
background: #2f3e59;
}
.bottom {
flex: 1;
background: #2f3e59;
}
}
}real solution scenario
- Because it can be compatible with Flex, Col, and Row components at the same time, it has little effect on the overall structure
- It should be noted that each layer of dom structure needs to inherit the height of the previous level (height: 100%)
- Refactor the code according to the set html structure
The final effect is as follows
dynamic display
Remark
- The class name is for demonstration, it should be modified to be more semantic
- Due to the modification of the dom structure, the background color needs to be set on the corresponding div
- The color is currently hard-coded, you need to declare the common class name in the less file, and then add the class name to the corresponding dom node