问题：同级编辑工具模板
This commit is contained in:
ival
parent
2fe27a3c47
commit
20f3acdc1f
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="menu"
|
||||
@click.self="onClick"
|
||||
@mouseenter.self="onMouseEnter"
|
||||
@mouseleave.self="onMouseLeave">
|
||||
<slot name="prefix"/>
|
||||
<span class="menu-label" :class="{'menu-check': check}" :style="{color: color}">{{menu.title}}</span>
|
||||
<slot name="append"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
check: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
onMouseEnter() {
|
||||
this.$emit('mouseenter');
|
||||
},
|
||||
onMouseLeave() {
|
||||
this.$emit('mouseleave');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
list-style: none;
|
||||
padding: 0 17px;
|
||||
margin: 0;
|
||||
border: 1px solid transparent;
|
||||
|
||||
cursor: pointer;
|
||||
&-label {
|
||||
border: 1px dashed transparent;
|
||||
}
|
||||
|
||||
&-check {
|
||||
border: 1px dashed #8f8f8f;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #C4E1FF;
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
&:active {
|
||||
background: #C4E1FF;
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,12 +2,13 @@
|
||||
<div class="nav" :class="elNavClass" :style="{background: background}">
|
||||
<div class="nav-menu" v-for="(el,i) in menus" :key="i">
|
||||
<menu-item :menu="el"
|
||||
:check="active==i"
|
||||
:actived="active==i"
|
||||
@click="onClick(el, i)"
|
||||
@mouseenter="onMouseEnter(el, i)"
|
||||
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
||||
<template v-if="el.children&&el.children.length" slot="append">
|
||||
<menu-list style="transform: translateY(-3px);" v-show="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"/>
|
||||
<menu-list style="transform: translateY(-3px);" v-show="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"
|
||||
@close="onClose(el, i)" />
|
||||
</template>
|
||||
</menu-item>
|
||||
</div>
|
||||
@ -31,11 +32,11 @@ export default {
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#F6F6F6'
|
||||
default: '#fff'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#222'
|
||||
default: '#000'
|
||||
},
|
||||
elNavClass: {
|
||||
type: String,
|
||||
@ -54,7 +55,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onClick(el, i){
|
||||
this.active = i;
|
||||
this.active = i
|
||||
if (el.disabled) return;
|
||||
if (el.handle) {
|
||||
el.handle(el);
|
||||
@ -63,11 +64,13 @@ export default {
|
||||
},
|
||||
onMouseEnter(el, i) {
|
||||
this.index = i;
|
||||
console.log(333333333333333);
|
||||
},
|
||||
onMouseLeave(el, i) {
|
||||
console.log(444444444444444);
|
||||
this.index = -1;
|
||||
},
|
||||
onClose(el, i) {
|
||||
this.active = i
|
||||
this.onMouseLeave(el, i);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -77,8 +80,10 @@ export default {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
&-menu {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="menu"
|
||||
@click.stop="onClick"
|
||||
@mouseenter.stop="onMouseEnter"
|
||||
@mouseleave.stop="onMouseLeave">
|
||||
<slot name="prefix"/>
|
||||
<span class="menu-label" :class="{'__active': actived, '__disable': disabled}" :style="{color: color}">{{menu.title}}</span>
|
||||
<slot name="append"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
actived: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
onMouseEnter() {
|
||||
this.$emit('mouseenter');
|
||||
},
|
||||
onMouseLeave() {
|
||||
this.$emit('mouseleave');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
padding: 0 17px;
|
||||
margin: 0;
|
||||
&::after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
&-label {
|
||||
border: 1px dashed transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #cfe1f6;
|
||||
&::after {
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: #cfe1f6;
|
||||
&::after {
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
}
|
||||
|
||||
.__active {
|
||||
border: 1px dashed #8f8f8f !important;
|
||||
}
|
||||
|
||||
.__disable {
|
||||
background: #f4f4f5 !important;
|
||||
cursor: not-allowed !important;
|
||||
span {
|
||||
color: #bcbec2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,13 +3,14 @@
|
||||
<li class="menu-li" :class="elMenuClass" v-for="(el,i) in menus" :key="i">
|
||||
<div v-if="el.isSeparation" class="menu-separation" />
|
||||
<menu-item v-else :menu="el" :color="color"
|
||||
:check="false"
|
||||
:actived="false"
|
||||
@click="onClick(el, i)"
|
||||
@mouseenter="onMouseEnter(el, i)"
|
||||
@mouseleave="onMouseLeave(el, i)">
|
||||
<template v-if="el.children&&el.children.length" slot="append">
|
||||
<span class="menu-arrow" />
|
||||
<menu-list class="menu-list" v-show="index==i" :background="background" :color="color" :menus="el.children"/>
|
||||
<menu-list class="menu-list" v-show="index==i" :background="background" :color="color" :menus="el.children"
|
||||
@close="onClose(el, i)"/>
|
||||
</template>
|
||||
</menu-item>
|
||||
</li>
|
||||
@ -49,21 +50,21 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onMouseEnter(el, i) {
|
||||
this.$emit('mouseenter', el, i);
|
||||
this.index = i;
|
||||
},
|
||||
onMouseLeave(el, i) {
|
||||
this.$emit('mouseleave', el, i);
|
||||
this.index = -1;
|
||||
console.log(999999999999999)
|
||||
},
|
||||
onClick(el, i) {
|
||||
this.$emit('click', el, i);
|
||||
if (el.disabled) return;
|
||||
if (el.handle) {
|
||||
el.handle(el);
|
||||
this.onMouseLeave(el, i);
|
||||
this.$emit('close', el, i);
|
||||
}
|
||||
},
|
||||
onClose(el, i) {
|
||||
this.$emit('close', el, i);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -78,11 +79,11 @@ export default {
|
||||
|
||||
.menu {
|
||||
&-ul {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #d1d1d1;
|
||||
box-shadow: 2px 2px 2px #999;
|
||||
z-index: 999;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
&-li {
|
||||
position: relative;
|
||||
@ -100,15 +101,21 @@ export default {
|
||||
}
|
||||
|
||||
&-list {
|
||||
transform:translateX(100%);
|
||||
transform:translate(100%, -1px);
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&-separation {
|
||||
height: 0px;
|
||||
border: 1px solid #bfbfbf;
|
||||
margin: 0 5px;
|
||||
&::after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
left: -50%;
|
||||
bottom: -1px;
|
||||
width: 200%;
|
||||
border: 1px solid #d1d1d1;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,49 +1,103 @@
|
||||
<template>
|
||||
<div class="plan-tool" style="width: 100%; height: 100%;">
|
||||
<nav-bar ref="bar"/>
|
||||
<!-- <nav-tool ref="tool" /> -->
|
||||
<!-- <schedule ref="schedule" :max-height="height" :max-width="width" /> -->
|
||||
<nav-state ref="state" />
|
||||
</div>
|
||||
<div class="plan">
|
||||
<div class="plan__header">
|
||||
<span class="title">运行图编辑工具</span>
|
||||
<span class="close" @click="doClose"/>
|
||||
</div>
|
||||
<div class="plan__layer" style="width: 100%; height: 100%;">
|
||||
<nav-bar class="noselect" ref="bar"/>
|
||||
<nav-tool class="noselect" ref="tool"/>
|
||||
<nav-schedule ref="schedule" />
|
||||
<nav-state ref="state" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from './navBar';
|
||||
import NavTool from './navTool';
|
||||
import NavState from './navState';
|
||||
import Schedule from './schedule';
|
||||
import NavSchedule from './navSchedule';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
NavTool,
|
||||
NavState,
|
||||
Schedule,
|
||||
NavSchedule,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
doClose() {
|
||||
this.$router.go(-1);
|
||||
this.$emit('doClose');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently not supported by any browser */
|
||||
}
|
||||
|
||||
.plan {
|
||||
padding: 40px 5px 5px 5px;
|
||||
height: 100%;
|
||||
background: #06c;
|
||||
&__header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
background: #ff4b4b;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 18px;
|
||||
&::before {
|
||||
content: "\2716";
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #ff000066;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__layer {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div id="PlanMenuBar">
|
||||
<menu-nav :menus="menuList" />
|
||||
<div class="nav">
|
||||
<menu-nav :menus="menuList" background="#fff" color="#333" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MenuNav from './component/menuNav';
|
||||
import MenuNav from './component/menuNav/index';
|
||||
|
||||
export default {
|
||||
name: 'PlanNavBar',
|
||||
@ -75,11 +75,9 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '列车交路管理(S)',
|
||||
handle: this.newRunPlan,
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
handle: this.newRunPlan,
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
@ -90,17 +88,16 @@ export default {
|
||||
},
|
||||
{
|
||||
title: 'test2',
|
||||
handle: this.newRunPlan,
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: 'test2',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
]
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: 'test2',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
@ -167,18 +164,10 @@ export default {
|
||||
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
$top: 0px;
|
||||
$width: 30px;
|
||||
$height: 40px;
|
||||
$menuPadding: 15px;
|
||||
$menuItemHeight: 30px;
|
||||
$menuItemWidth: 160px;
|
||||
$menuItemPadding: 5px;
|
||||
|
||||
#PlanMenuBar {
|
||||
.nav {
|
||||
width: 100%;
|
||||
line-height: $height;
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
30
src/views/planMonitor/editToolTJ/navSchedule.vue
Normal file
30
src/views/planMonitor/editToolTJ/navSchedule.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="schedule">
|
||||
context
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.schedule {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
background: #efefef;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="PlanStatusBar">
|
||||
<div class="state">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -20,12 +20,15 @@ export default {
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.PlanStatusBar {
|
||||
z-index: 5;
|
||||
.state {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background: #F6F6F6;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid #ffffee;
|
||||
box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div id="PlanNavTool">
|
||||
<div class="nav">
|
||||
<div v-for="(item,index) in tools" :key="index" class="tool">
|
||||
<img :src="item.src" :alt="item.title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="el-dialog__wrapper" v-dialogDrag> -->
|
||||
<div class="el-dialog__wrapper">
|
||||
<div class="bar el-dialog">
|
||||
<div class="tool el-dialog__header" style="padding: 0">
|
||||
<div class="tool-move" />
|
||||
<div v-for="(el,i) in tools" :key="i" class="tool-elem"
|
||||
:class="{'__active': active == i, '__disable': el.disabled}"
|
||||
@click="doClick(el, i)" >
|
||||
<img :src="el.src" />
|
||||
<span>{{ el.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import logo_ from '@/assets/logo_.png';
|
||||
@ -14,89 +21,32 @@ export default {
|
||||
name: 'PlanNavTool',
|
||||
data() {
|
||||
return {
|
||||
active: -1,
|
||||
tools: [
|
||||
{
|
||||
title: this.$t('planMonitor.server1'),
|
||||
operate: '',
|
||||
title: "打开",
|
||||
src: logo_,
|
||||
disabled: true,
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.server2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
title: "车站平面图",
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.frontMachine1'),
|
||||
operate: '',
|
||||
src: '',
|
||||
title: "列车信息",
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.frontMachine2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
{
|
||||
title: "底图管理",
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.mainDispatcher'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher1'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher2'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.dispatcher3'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.bigScreen'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.maintenanceWorkstation'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.runGraphShowManualStation'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.jumpStop'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.detainTrain'),
|
||||
operate: '',
|
||||
src: '',
|
||||
click: this.undeveloped
|
||||
},
|
||||
{
|
||||
title: this.$t('planMonitor.trainAlarm'),
|
||||
operate: '',
|
||||
src: logo_,
|
||||
{
|
||||
title: "运行图编制",
|
||||
src: logo_,
|
||||
click: this.undeveloped
|
||||
}
|
||||
]
|
||||
@ -105,50 +55,101 @@ export default {
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
doClick(el, i) {
|
||||
if (!el.disabled) {
|
||||
this.active = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
$top: 32px;
|
||||
$top: 40px;
|
||||
$height: 30px;
|
||||
$size: 22px;
|
||||
$background: #F6F6F6;
|
||||
$background: #ffffee;
|
||||
$color: #0000;
|
||||
$border-color: #B6BCCC;
|
||||
|
||||
#PlanNavTool {
|
||||
z-index: 5;
|
||||
.el-dialog__wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bar {
|
||||
z-index: 60;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: $top;
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
border: 1px solid $border-color !important;
|
||||
background: $background;
|
||||
color: $color;
|
||||
}
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
list-style: none;
|
||||
padding: 0 17px;
|
||||
}
|
||||
.tool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
list-style: none;
|
||||
cursor: move;
|
||||
|
||||
.tool {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: $size;
|
||||
height:$size;
|
||||
margin: 2px;
|
||||
&-move {
|
||||
position: relative;
|
||||
margin: 0 12px;
|
||||
position: relative;
|
||||
height: $height - 2px;
|
||||
border: 1px dashed #ccc;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-elem {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
&:nth-child(2) {
|
||||
border-left: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: $size;
|
||||
height:$size;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.__disable {
|
||||
background: #f4f4f5 !important;
|
||||
cursor: not-allowed !important;
|
||||
span {
|
||||
color: #bcbec2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.__active {
|
||||
background: #cfe1f6 !important;
|
||||
border-right: 1px outset #d1d1d1!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user