feat(fix):前端样式调整

This commit is contained in:
junjie 2021-06-02 19:22:04 +08:00
parent fb02dd6160
commit 4108e68927
5 changed files with 42 additions and 38 deletions

View File

@ -53,7 +53,7 @@ export default {
<style scoped>
.ms-aside-container {
height: calc(100vh - 56px);
padding: 15px;
padding: 10px 15px;
min-width: 260px;
max-width: 460px;
}

View File

@ -73,14 +73,14 @@ export default {
<style scoped>
.ms-aside-container {
height: calc(100vh - 56px);
padding: 15px;
padding: 10px 15px;
min-width: 260px;
max-width: 460px;
}
.ms-main-container {
height: calc(100vh - 56px);
padding: 15px 15px 0 15px;
padding: 10px 15px 0 15px;
}
</style>

View File

@ -1,5 +1,5 @@
<template xmlns:el-col="http://www.w3.org/1999/html">
<el-col style="padding: 0 10px 0 10px;">
<el-col style="padding: 0 5px 0 5px;">
<el-col>
<el-row>
<span class="header-title">{{ $t('panel.default_panel') }}</span>

View File

@ -1,6 +1,6 @@
<template>
<de-container>
<de-aside-container>
<de-aside-container style="padding: 0 10px;">
<el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
<el-tab-pane name="PanelList">
<span slot="label"><i class="el-icon-document" />{{ $t('panel.panel_list') }}</span>
@ -107,4 +107,8 @@ export default {
.tab-panel>>>.el-tabs__nav-wrap::after {
height: 1px;
}
.tab-panel>>>.el-tabs__item{
width: 10px;
padding: 0 10px;
}
</style>

View File

@ -3,39 +3,40 @@
<el-col v-if="panelInfo.name.length>0" class="panel-design">
<el-row class="panel-design-head">
<!--仪表板头部区域-->
<el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
<span>{{ panelInfo.name || '测试仪表板' }}</span>
</el-col>
<el-col :span="12">
<span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.save_to_panel')">
<el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
</el-tooltip>
</span>
<span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.export_to_panel')">
<el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
</el-tooltip>
</span>
<span style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip>
</span>
<div style="border-bottom: 1px solid #dfe4ed;height: 100%;">
<el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
<span>{{ panelInfo.name || '测试仪表板' }}</span>
</el-col>
<el-col :span="12">
<span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.save_to_panel')">
<el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
</el-tooltip>
</span>
<span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.export_to_panel')">
<el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
</el-tooltip>
</span>
<span style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip>
</span>
<span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.store')">
<el-button class="el-icon-star-off" size="mini" circle @click="star" />
</el-tooltip>
</span>
<span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('commons.cancel')">
<el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
</el-tooltip>
</span>
</el-col>
<span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.store')">
<el-button class="el-icon-star-off" size="mini" circle @click="star" />
</el-tooltip>
</span>
<span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('commons.cancel')">
<el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
</el-tooltip>
</span>
</el-col>
</div>
</el-row>
<!-- 仪表板预览区域-->
<el-row class="panel-design-preview">
@ -217,9 +218,8 @@ export default {
.panel-design-head {
height: 40px;
background-color: white;
padding: 0 6px;
padding: 0 10px;
line-height: 40px;
border-bottom: 1px solid #dfe4ed;
}
.panel-design-preview {