NEZ-2614 fix:project topology 样式修改

This commit is contained in:
zhangyu
2023-02-28 14:50:37 +08:00
parent 0bb607f9e8
commit f92c950baa
4 changed files with 33 additions and 16 deletions

View File

@@ -58,6 +58,15 @@
justify-content: space-between;
margin-bottom: 15px;
text-transform: initial;
.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
}
.nz-icon-arrow-down.is-rotate{
transform: rotate(
-90deg
);
}
}
.form-row-content{
margin-bottom: 5px;
@@ -164,4 +173,9 @@
}
}
}
.nz-color {
.vc-input__input {
font-size: 14px;
}
}
}

View File

@@ -4,7 +4,7 @@
<!-- backGround -->
<div class="form-row-title">
{{$t('project.topology.bac')}}
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
<i class="nz-icon nz-icon-arrow-down" :class="canvasProps.backGround?'':'is-rotate'" @click="updateShow('backGround')"/>
</div>
<div v-show="canvasProps.backGround" class="form-row-content">
<div class="form-row-item">
@@ -61,18 +61,18 @@
</span>
</span>
<span>
<span @click.stop="penChange(item, 'locked')" class="pen-tools-item">
<span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
<i class="nz-icon nz-icon-lock" v-if="item.locked"/>
<i class="nz-icon nz-icon-unlock" v-if="!item.locked"/>
</span>
<span @click.stop="penChange(item, 'visible')" class="pen-tools-item">
<span @click.stop="penChange(item, 'visible')" class="pen-tools-item" :title="!item.visible?$t('overall.visible'): $t('overall.invisible')">
<i class="nz-icon nz-icon-mimakejian1" v-if="item.visible"/>
<i class="nz-icon nz-icon-mimabukejian" v-if="!item.visible"/>
</span>
<span @click.stop="copyPen(item)" class="pen-tools-item">
<span @click.stop="copyPen(item)" class="pen-tools-item" :title="$t('overall.duplicate')">
<i class="nz-icon nz-icon-override"/>
</span>
<span @click.stop="delPen(item)" class="pen-tools-item">
<span @click.stop="delPen(item)" class="pen-tools-item" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"/>
</span>
<span style="cursor: grab;" class="drag-sort pen-tools-item" :title="$t('dashboard.panel.chartForm.sort')">

View File

@@ -8,7 +8,7 @@
<!-- Position -->
<div class="form-row-title">
{{$t('project.topology.position')}}
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('position')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.position?'':'is-rotate'" @click="updateShow('position')"/>
</div>
<div v-show="elements.position" class="form-row-content">
<div class="form-row-item">
@@ -126,7 +126,7 @@
<!-- Border -->
<div class="form-row-title">
{{ $t('project.topology.border') }}
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('border')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.border?'':'is-rotate'" @click="updateShow('border')"/>
</div>
<div v-show="elements.border" class="form-row-content">
<div class="form-row-item special-meta2d-select">
@@ -216,7 +216,7 @@
<!-- backGround -->
<div class="form-row-title">
{{$t('project.topology.bac')}}
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.backGround?'':'is-rotate'" @click="updateShow('backGround')"/>
</div>
<div v-show="elements.backGround" class="form-row-content">
<div class="form-row-item">
@@ -278,7 +278,7 @@
<!-- text -->
<div class="form-row-title">
{{$t('project.topology.text')}}
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('text')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.text?'':'is-rotate'" @click="updateShow('text')"/>
</div>
<div v-show="elements.text" class="form-row-content">
<div class="form-row-item">
@@ -398,7 +398,7 @@
<!-- Line -->
<div class="form-row-title">
{{$t('project.topology.line')}}
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('line')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.line?'':'is-rotate'" @click="updateShow('line')"/>
</div>
<div v-show="elements.line" class="form-row-content">
<div class="form-row-item special-meta2d-select">
@@ -712,7 +712,7 @@
:inactive-value="false"
@change="change('data.enable.valueMapping')"
></el-switch>
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('valueMapping')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.valueMapping&& pen.data.enable.valueMapping?'':'is-rotate'" @click="updateShow('valueMapping')"/>
</span>
</div>
<transition name="el-zoom-in-top">
@@ -930,7 +930,7 @@
:inactive-value="false"
@change="change('data.enable.tooltip')"
></el-switch>
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
<i class="nz-icon nz-icon-arrow-down" :class="elements.tooltip&& pen.data.enable.tooltip?'':'is-rotate'" @click="updateShow('tooltip')"/>
</span>
</div>
<transition name="el-zoom-in-top">

View File

@@ -1,10 +1,13 @@
<template>
<div class="tool-top" id="tool-top" @mouseup="changeDrawLineFlag(false)">
<div id="tools-left-drag" class="top-tool-item" :title="$t('project.topology.addNode')" :class="dragstartFlag ? 'is-active-meta2d' : ''">
<div
<div id="tools-left-drag"
class="top-tool-item"
:title="$t('project.topology.addNode')"
:class="dragstartFlag ? 'is-active-meta2d' : ''"
draggable="true"
@mousedown="changeState('dragstartFlag')"
@dragstart.stop="onDragstart($event)"
@dragstart.stop="onDragstart($event)">
<div
>
<i class="nz-icon nz-icon-zhengfangxing" />
</div>