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

feat: update style

Browse Source
This commit is contained in:
Qiuxia Fan 2021-12-22 20:55:39 +08:00
parent aa196251f6
commit 337d9bfe04
4 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layout/components/AppMain.vue
View File

@ -24,6 +24,7 @@ limitations under the License. -->
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
height: calc(100% - 128px); height: calc(100% - 40px);
background: #f7f9fa;
} }
</style> </style>

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

@ -19,9 +19,7 @@ limitations under the License. -->
<el-button size="mini" type="primary">Apply</el-button> <el-button size="mini" type="primary">Apply</el-button>
</div> </div>
<div class="flex-h ds-main"> <div class="flex-h ds-main">
<div class="ds-layout"> <GridLayout />
<GridLayout />
</div>
<div class="ds-config">Configurations</div> <div class="ds-config">Configurations</div>
</div> </div>
</template> </template>
@ -35,29 +33,20 @@ import GridLayout from "./widget/GridLayout.vue";
text-align: right; text-align: right;
padding: 5px 10px; padding: 5px 10px;
background: rgb(240, 242, 245); background: rgb(240, 242, 245);
border-bottom: 1px solid #ccc; border-bottom: 1px solid #dfe4e8;
} }
.ds-main { .ds-main {
background: #f7f9fa; height: calc(100% - 40px);
// background: #eee;
}
.ds-layout {
// background: rgb(240, 242, 245);
// background-color: #fafbfc;
height: 890px;
flex-grow: 2;
overflow: auto;
// padding: 0 5px;
} }
.ds-config { .ds-config {
width: 360px; width: 360px;
margin: 5px 0; margin: 5px 0;
background-color: #fff; background-color: #fff;
box-shadow: 5px 5px 5px #fff; box-shadow: 2px 0 2px 0 #ccc;
text-align: center; text-align: center;
border-left: 1px solid #eee;
} }
.panel { .panel {

12
src/views/dashboard/New.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="new-dashboard"> <div class="new-dashboard">
<h4>{{ t("newDashboard") }}</h4> <div class="title">{{ t("newDashboard") }}</div>
<div class="item"> <div class="item">
<div class="label">{{ t("name") }}</div> <div class="label">{{ t("name") }}</div>
<el-input <el-input
@ -195,20 +195,30 @@ const onCreate = () => {
selectorStore.fetchServices("general"); selectorStore.fetchServices("general");
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title {
font-size: 18px;
font-weight: bold;
padding-top: 20px;
}
.new-dashboard { .new-dashboard {
margin: 0 auto; margin: 0 auto;
} }
.item { .item {
margin-top: 20px; margin-top: 20px;
} }
.new-dashboard, .new-dashboard,
.selectors, .selectors,
.el-cascader-menu { .el-cascader-menu {
width: 600px; width: 600px;
} }
.create { .create {
width: 600px; width: 600px;
} }
.btn { .btn {
margin-top: 40px; margin-top: 40px;
} }

3
src/views/dashboard/widget/GridLayout.vue
View File

@ -21,7 +21,6 @@ limitations under the License. -->
:is-resizable="true" :is-resizable="true"
:is-mirrored="false" :is-mirrored="false"
:vertical-compact="true" :vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true" :use-css-transforms="true"
> >
<grid-item <grid-item
@ -73,6 +72,8 @@ const layout = [
<style lang="scss" scoped> <style lang="scss" scoped>
.vue-grid-layout { .vue-grid-layout {
background: #f7f9fa; background: #f7f9fa;
flex-grow: 2;
overflow: auto;
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {