线路：同济大学版本运行图功能样式调整
This commit is contained in:
ival
parent
150eeaaaba
commit
fa2c7c8297
@ -206,9 +206,19 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.plan-tool {
|
||||
position: absolute;
|
||||
&::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// background-image: url(https://www.cnblogs.com/skins/imetro/images/background.jpg);
|
||||
// filter: blur(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.plan-tool .pop-menu {
|
||||
|
||||
@ -5,9 +5,11 @@
|
||||
:actived="active==i"
|
||||
@click="onClick(el, i)"
|
||||
@mouseenter="onMouseEnter(el, i)"
|
||||
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
||||
@mouseleave="onMouseLeave(el, i)"
|
||||
:background="background"
|
||||
: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: translate(-9px, 1px);" v-show="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"
|
||||
@close="onClose(el, i)" />
|
||||
</template>
|
||||
</menu-item>
|
||||
@ -80,6 +82,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
&-menu {
|
||||
position: relative;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="menu"
|
||||
:style="{background: background}"
|
||||
@click.stop="onClick"
|
||||
@mouseenter.stop="onMouseEnter"
|
||||
@mouseleave.stop="onMouseLeave">
|
||||
@ -22,6 +23,10 @@ export default {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
actived: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -48,17 +53,11 @@ export default {
|
||||
.menu {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
padding: 0 17px;
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
&::after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
line-height: 30px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
|
||||
cursor: pointer;
|
||||
&-label {
|
||||
@ -66,16 +65,13 @@ export default {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #cfe1f6;
|
||||
&::after {
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
background: aliceblue !important;
|
||||
border: 1px solid #0295f6;
|
||||
|
||||
}
|
||||
&:active {
|
||||
background: #cfe1f6;
|
||||
&::after {
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
background: aliceblue !important;
|
||||
border: 1px solid #0295f6;
|
||||
}
|
||||
|
||||
.__active {
|
||||
@ -90,4 +86,15 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.frosted-glass{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: aliceblue;
|
||||
filter:drop-shadow(2px 4px 6px black);
|
||||
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
<ul class="menu-ul" :style="{background: background}">
|
||||
<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"
|
||||
<menu-item v-else :menu="el"
|
||||
:actived="false"
|
||||
@click="onClick(el, i)"
|
||||
@mouseenter="onMouseEnter(el, i)"
|
||||
@mouseleave="onMouseLeave(el, i)">
|
||||
@mouseleave="onMouseLeave(el, i)"
|
||||
:background="background"
|
||||
:color="color">
|
||||
<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"
|
||||
@ -101,21 +103,15 @@ export default {
|
||||
}
|
||||
|
||||
&-list {
|
||||
transform:translate(100%, -1px);
|
||||
transform: translate(calc(100% + 1px), -2px);
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&-separation {
|
||||
&::after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
left: -50%;
|
||||
bottom: -1px;
|
||||
width: 200%;
|
||||
border: 1px solid #d1d1d1;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
border-bottom: 1px solid #d5d5d5;
|
||||
bottom: -1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div class="plan">
|
||||
<div class="plan-glass"/>
|
||||
<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"/>
|
||||
<div class="layer-glass" />
|
||||
<nav-bar ref="bar"/>
|
||||
<nav-tool ref="tool"/>
|
||||
<nav-schedule ref="schedule" />
|
||||
<nav-state ref="state" />
|
||||
</div>
|
||||
@ -56,7 +58,6 @@ export default {
|
||||
.plan {
|
||||
padding: 40px 5px 5px 5px;
|
||||
height: 100%;
|
||||
background: #06c;
|
||||
&__header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -77,8 +78,8 @@ export default {
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: 11px;
|
||||
right: 11px;
|
||||
|
||||
background: #ff4b4b;
|
||||
color: #fff;
|
||||
@ -98,6 +99,33 @@ export default {
|
||||
}
|
||||
&__layer {
|
||||
position: relative;
|
||||
border: 2px solid #c0c4cc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-glass{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, #0060cf, #000);
|
||||
filter: blur(10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layer-glass {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
filter: drop-shadow(2px 4px 6px black);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="nav">
|
||||
<menu-nav :menus="menuList" background="#fff" color="#333" />
|
||||
</div>
|
||||
<div class="bar">
|
||||
<menu-nav :menus="menuList" background="#fff" color="#303133" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MenuNav from './component/menuNav/index';
|
||||
@ -162,12 +162,9 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
.nav {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
<style scoped lang="scss">
|
||||
.bar {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="schedule">
|
||||
context
|
||||
<div class="container">
|
||||
<div class="context">
|
||||
context
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -21,10 +25,23 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.schedule {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 70px;
|
||||
padding-bottom: 30px;
|
||||
background: #efefef;
|
||||
position: relative;
|
||||
background: #ecf5ff;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.1fr.com.cn%2Fimg.php%3Fimgcdn.gz01.bdysite.com%2Fupfile%2Ft0101c94484b6ea8522.jpg&refer=http%3A%2F%2Fwww.1fr.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618136165&t=66e6bdb…);
|
||||
filter: blur(18px);
|
||||
}
|
||||
.container {
|
||||
margin: 17px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="state">
|
||||
|
||||
<div class="state-glass"/>
|
||||
<div class="container">
|
||||
<span>就绪</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -21,14 +24,30 @@ export default {
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.state {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background: #F6F6F6;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
height: 32px;
|
||||
border: 1px solid #ffffee;
|
||||
box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&-glass {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f4f4f5;
|
||||
// filter: blur(3px);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
padding: 0 17px;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<!-- <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">
|
||||
@ -8,19 +7,20 @@
|
||||
:class="{'__active': active == i, '__disable': el.disabled}"
|
||||
@click="doClick(el, i)" >
|
||||
<img :src="el.src" />
|
||||
<span>{{ el.title }}</span>
|
||||
<!-- <span>{{ el.title }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import logo_ from '@/assets/logo_.png';
|
||||
import logo_ from '@/assets/voiceOpen.png';
|
||||
|
||||
export default {
|
||||
name: 'PlanNavTool',
|
||||
data() {
|
||||
return {
|
||||
isDrag: false,
|
||||
active: -1,
|
||||
tools: [
|
||||
{
|
||||
@ -52,8 +52,6 @@ export default {
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
doClick(el, i) {
|
||||
if (!el.disabled) {
|
||||
@ -66,26 +64,33 @@ export default {
|
||||
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
$top: 40px;
|
||||
$height: 30px;
|
||||
$size: 22px;
|
||||
$size: 26px;
|
||||
$background: #ffffee;
|
||||
$color: #0000;
|
||||
|
||||
.el-dialog__wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frosted-glass{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $background;
|
||||
filter:drop-shadow(2px 4px 6px black);
|
||||
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar {
|
||||
z-index: 60;
|
||||
position: absolute;
|
||||
top: $top;
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
background: $background;
|
||||
width: 100%;
|
||||
color: $color;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
@ -102,14 +107,13 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
list-style: none;
|
||||
cursor: move;
|
||||
|
||||
&-move {
|
||||
position: relative;
|
||||
margin: 0 12px;
|
||||
position: relative;
|
||||
height: $height - 2px;
|
||||
border: 1px dashed #ccc;
|
||||
height: 32px;
|
||||
border: 1px dashed #b2b2b2;
|
||||
|
||||
}
|
||||
|
||||
@ -119,7 +123,6 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
&:nth-child(2) {
|
||||
border-left: 1px solid #d1d1d1;
|
||||
@ -140,15 +143,20 @@ export default {
|
||||
|
||||
.__disable {
|
||||
background: #f4f4f5 !important;
|
||||
border-left: 1px inset #d1d1d1!important;
|
||||
border-right: 1px inset #d1d1d1!important;
|
||||
cursor: not-allowed !important;
|
||||
filter: opacity(0.5) !important;
|
||||
span {
|
||||
color: #bcbec2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.__active {
|
||||
background: #cfe1f6 !important;
|
||||
background: #cdcdcd !important;
|
||||
border-left: 1px inset #d1d1d1!important;
|
||||
border-right: 1px outset #d1d1d1!important;
|
||||
filter: contrast(0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user