# 导航栏动画 背景颜色

whycq

2022-03-18 c3682d3c5951e84cdf085c62263af4c64e232f58

# 导航栏动画 背景颜色

 src/main/webapp/static/css/car_vue.css

New file
@@ -0,0 +1,14 @@
body {
    background-color: #6CA7A8;
}

.title {
    margin-top: 10px;
    font-size: 20px;
    text-align: center;

}
.bg-orgin {
    color: white;
    background-color: #FF5722;
}

 src/main/webapp/static/css/crn.css

@@ -1,12 +1,11 @@
body {
    background-color: #f1f1f1;
    background-color: #6CA7A8;
}
.button-window {
    float: left;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #6CA7A8;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0 0 0 .3);
}

 src/main/webapp/static/css/index.css

@@ -30,19 +30,53 @@
}

.sidebar {
    width: 7%;
    width: 8%;
    height: 40%;
    line-height: 90px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);


}
/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.cl-effect-1 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}
/* Effect 1: Brackets 👆*/
.sidebar ul {
    font-size: 20px;
    font-weight: 5c00;
    padding-left: 15%;
    font-weight: 500;
    padding-left: 5%;

}
.sidebar a {

 src/main/webapp/static/css/pipeline.css

@@ -1,6 +1,6 @@
body {
    /*padding: 10px;*/
    background-color: #f1f1f1;
    background-color: #6CA7A8;
}
main {
    background-color: #fff;
@@ -14,7 +14,6 @@
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #6CA7A8;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0 0 0 .3);
}

 src/main/webapp/views/index.html

@@ -12,7 +12,7 @@
<!--            <li class="right">注销<a id="about" class="nav-unselect" onclick="logout()" href="#"></a></li>-->
<!--        </div>-->
<div class="sidebar">
    <ul>
    <ul class="cl-effect-1">
        <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">主控图</a></li>
        <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li>
        <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li>