github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 06:34:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add dashboard layout

Browse Source
This commit is contained in:
Qiuxia Fan 2021-12-20 13:59:12 +08:00
parent edf070c932
commit 2aa8204434
1 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/dashboard/Edit.vue
View File

@ -18,7 +18,14 @@ limitations under the License. -->
<el-button size="mini">Discard</el-button> <el-button size="mini">Discard</el-button>
<el-button size="mini" type="primary">Apply</el-button> <el-button size="mini" type="primary">Apply</el-button>
</div> </div>
<div class="ds-layout"></div> <div class="flex-h ds-main">
<div class="ds-layout flex-h">
<div class="panel">item</div>
<div class="panel">item</div>
<div class="panel">item</div>
</div>
<div class="ds-config">config</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ElButton } from "element-plus"; import { ElButton } from "element-plus";
@ -27,10 +34,30 @@ import { ElButton } from "element-plus";
.dashboard-tool { .dashboard-tool {
text-align: right; text-align: right;
padding: 5px 10px; padding: 5px 10px;
// border-bottom: 1px solid #ccc; background: rgb(240, 242, 245);
// border-bottom: 1px solid rgb(240, 242, 245);
}
.ds-main {
background: rgb(240, 242, 245);
} }
.ds-layout { .ds-layout {
background: rgb(240, 242, 245); // background: rgb(240, 242, 245);
// background-color: #fafbfc;
height: 890px;
flex-grow: 2;
overflow: auto;
// padding: 0 5px;
}
.ds-config {
width: 360px;
margin: 5px 0;
background-color: #fff;
}
.panel {
width: 300px;
height: 300px; height: 300px;
background-color: #fff;
margin: 5px;
text-align: center;
} }
</style> </style>