diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index 8c3df0d6..9819bd34 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -59,15 +59,15 @@
边框
装饰
@@ -842,81 +842,93 @@ li {
padding: 0;
}
.nav {
+ width: 40px;
+ padding: 0;
+ list-style: none;
+ /* overflow: hidden; */
}
-.nav > li {
- display: inline-block;
- position: relative;
+.nav {
+ zoom: 1;
}
-.nav > li > a {
- text-decoration: none;
+.nav:before,
+.nav:after {
+ content: "";
+ display: table;
}
-.nav > li:hover > a {
- color: rgb(0, 136, 214);
+.nav:after {
+ clear: both;
}
-.nav a {
- color: #cde8ff;
- display: block;
+.nav li {
+ width: 40px;
+ text-align: center;
+ position: relative;
+}
+.nav li a {
+ float: left;
+ padding: 12px 30px;
+ color: #999;
+ font: bold 12px;
text-decoration: none;
}
-
-.nav ul {
- // display: none;
- background: #00113a;
+.nav li:hover {
+ color: #6dc5ff;
+}
+.nav li ul {
+ visibility: hidden;
position: absolute;
- z-index: 10000;
+ z-index: 1000;
+ list-style: none;
+ top: 38px;
+ left: 0;
+ padding: 0;
+ background-color: #263445;
+ opacity: 0;
+ _margin: 0;
width: 120px;
- margin-left: -20px;
+ transition: all 0.2s ease-in-out;
}
-.nav ul li {
- position: relative;
- font-size: 12px;
+.nav li:hover > ul {
+ opacity: 1;
+ visibility: visible;
+ margin: 0;
}
-.nav > li:hover > ul {
+.nav ul li {
+ float: left;
display: block;
-}
-.nav > li > .three-level > li > a {
+ border: 0;
width: 100%;
- padding-left: 1em;
- padding-right: 1em;
- background-color: #0f2030;
-}
-.nav li .three-level {
- padding: 10px 20px;
-}
-.nav li .three-level li {
- width: 33.333%;
- height: 80px;
- float: left;
- height: 80px;
- display: inline-block;
+ font-size: 12px;
}
-.nav > li > ul > li:hover > a {
+.nav ul a {
+ padding: 10px;
+ width: 100%;
display: block;
- background-color: #182e42;
- color: #fff;
+ float: none;
+ height: 120px;
+ border: 1px solid #30445c;
+ transition: all 0.2s ease-in-out;
}
-.nav > li > ul > li > ul {
- left: 100%;
- top: 0;
+.nav ul a:hover {
+ border: 1px solid #3c5e88;
}
-.nav > li:last-child > ul > li > ul {
- left: 140px;
+.nav ul li:first-child > a:hover:before {
+ border-bottom-color: #04acec;
+}
+.nav ul ul {
top: 0;
+ left: 120px;
width: 400px;
+ height: 300px;
+ overflow: auto;
+ padding: 10px;
+ box-shadow: -1px 0 0 #30445c;
+ _margin: 0;
}
-.nav > li > ul > li:hover > ul {
+.nav ul ul li {
+ width: 120px;
+ height: 120px;
+ margin-right: 3px;
display: block;
-}
-.nav > li > ul > li > ul > li > a {
- padding-top: 0.4em;
- padding-bottom: 0.4em;
- width: 10em;
- padding-left: 1em;
- padding-right: 1em;
- background-color: rgb(50, 50, 50);
-}
-.nav > li > ul > li > ul > li:hover > a {
- background-color: rgb(255, 255, 0);
- color: rgb(0, 0, 0);
+ float: left;
}