.navigation {
|
height: 65px;
|
width: 989px;
|
position: absolute;
|
bottom: 40px;
|
left: calc(50% - 494px);
|
}
|
|
.navigation-bg {
|
background: url("@/assets/img/navigation/navigationbg.png");
|
background-size: 100% 100%;
|
width: 989px;
|
height: 28px;
|
position: absolute;
|
bottom: 0px;
|
left: 0px;
|
}
|
|
.navigation-content {
|
/* 使用 flex 布局 */
|
display: flex;
|
/* 使子元素水平等间隔分布 */
|
justify-content: space-between;
|
position: absolute;
|
top: 0px;
|
left: calc(50% - 350px);
|
float: left;
|
width: 700px;
|
margin: auto;
|
z-index: 1;
|
}
|
.navigation-contents {
|
/* 使用 flex 布局 */
|
display: flex;
|
/* 使子元素水平等间隔分布 */
|
justify-content: center;
|
position: absolute;
|
top: 0px;
|
left: calc(50% - 350px);
|
float: left;
|
width: 700px;
|
margin: auto;
|
z-index: 1;
|
}
|
|
.navigation-item {
|
float: left;
|
|
color: #cdf3fd;
|
cursor: pointer;
|
width: 149px;
|
height: 51px;
|
|
line-height: 46px;
|
text-align: center;
|
font-size: 18px;
|
font-weight: bold;
|
text-indent: 40px;
|
}
|
|
.bg1 {
|
background: url("@/assets/img/navigation/buttonbg1.png");
|
}
|
|
.bg2 {
|
background: url("@/assets/img/navigation/buttonbg2.png");
|
}
|
|
.bg3 {
|
background: url("@/assets/img/navigation/buttonbg3.png");
|
}
|
|
.bg4 {
|
background: url("@/assets/img/navigation/buttonbg4.png");
|
}
|
|
.bg1:hover {
|
background: url("@/assets/img/navigation/buttonbgac1.png");
|
}
|
.bg1-active {
|
background: url("@/assets/img/navigation/buttonbgac1.png");
|
}
|
.bg2:hover {
|
background: url("@/assets/img/navigation/buttonbgac2.png");
|
}
|
.bg2-active {
|
background: url("@/assets/img/navigation/buttonbgac2.png");
|
}
|
.bg3:hover {
|
background: url("@/assets/img/navigation/buttonbgac3.png");
|
}
|
.bg3-active {
|
background: url("@/assets/img/navigation/buttonbgac3.png");
|
}
|
|
.bg4:hover {
|
background: url("@/assets/img/navigation/buttonbgac4.png");
|
}
|
.bg4-active {
|
background: url("@/assets/img/navigation/buttonbgac4.png");
|
}
|
