style(视图): css

This commit is contained in:
junjie 2021-03-25 12:43:19 +08:00
parent 586b3ef24f
commit d321be221a

View File

@ -15,18 +15,18 @@
<!-- </el-button>--> <!-- </el-button>-->
</span> </span>
</el-row> </el-row>
<el-row style="display: flex;height: 100%"> <el-row class="view-panel">
<el-col <el-col
style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;" style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
> >
<div style="height: 45%;border-bottom: 1px solid #E6E6E6;" class="padding-lr"> <div style="height: 50%;border-bottom: 1px solid #E6E6E6;" class="padding-lr">
<span>{{ $t('chart.dimension') }}</span> <span>{{ $t('chart.dimension') }}</span>
<draggable <draggable
v-model="dimension" v-model="dimension"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}" :options="{group:{name: 'dimension',pull:'clone'},sort: true}"
animation="300" animation="300"
:move="onMove" :move="onMove"
style="height: 90%;overflow:auto" class="drag-list"
@end="end1" @end="end1"
@start="start1" @start="start1"
> >
@ -35,14 +35,14 @@
</transition-group> </transition-group>
</draggable> </draggable>
</div> </div>
<div style="height: 45%;" class="padding-lr"> <div style="height: 50%;" class="padding-lr">
<span>{{ $t('chart.quota') }}</span> <span>{{ $t('chart.quota') }}</span>
<draggable <draggable
v-model="quota" v-model="quota"
:options="{group:{name: 'quota',pull:'clone'},sort: true}" :options="{group:{name: 'quota',pull:'clone'},sort: true}"
animation="300" animation="300"
:move="onMove" :move="onMove"
style="height: 90%;overflow:auto" class="drag-list"
@end="end1" @end="end1"
@start="start1" @start="start1"
> >
@ -54,7 +54,7 @@
</el-col> </el-col>
<el-col <el-col
style="height: 100%;width: 25%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;" style="height: 100%;width: 30%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
> >
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr"> <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">
<el-row> <el-row>
@ -73,7 +73,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div style="height: 25%;overflow:auto" class="padding-lr"> <div style="height: 30%;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span> <span>{{ $t('chart.chart_type') }}</span>
<el-row> <el-row>
<div class="chart-type"> <div class="chart-type">
@ -172,7 +172,7 @@
</el-row> </el-row>
</el-row> </el-row>
<chart-component :chart-id="chart.id" :chart="chart" style="padding: 10px" class="chart-class" /> <chart-component :chart-id="chart.id" :chart="chart" class="chart-class" />
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -566,7 +566,7 @@ export default {
this.resetRename() this.resetRename()
}, },
resetRename() { resetRename() {
this.itemForm = {} // this.itemForm = {}
} }
} }
} }
@ -595,6 +595,16 @@ export default {
margin-left: 10px; margin-left: 10px;
} }
.view-panel {
display: flex;
height: calc(100% - 40px);
}
.drag-list {
height: calc(100% - 26px);
overflow:auto;
}
.item { .item {
padding: 2px 10px; padding: 2px 10px;
margin: 2px 2px 0 2px; margin: 2px 2px 0 2px;
@ -698,7 +708,8 @@ export default {
} }
.chart-class{ .chart-class{
height: calc(100% - 124px); height: calc(100% - 84px);
padding: 10px;
} }
.dialog-css>>>.el-dialog__title { .dialog-css>>>.el-dialog__title {