#menu { display: none; position: fixed; opacity: 0; width: 100%; height: 50%; left: 0; top: 0; // background-image: url("./../img/index/bg1.png"); // background-color: black; z-index: 99; background-repeat: no-repeat; background-size: 100% 100%; overflow-y: scroll; scrollbar-arrow-color: #000; /*顶部/底部图标颜色*/ scrollbar-face-color: #000; /*滚动条颜色*/ scrollbar-shadow-color: #000; /*滚动条阴影颜色*/ /*定义滚动条轨道 内阴影+圆角*/ &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); border-radius: 0; background-color: #000; } /*定义滑块 内阴影+圆角*/ &::-webkit-scrollbar-thumb { border-radius: 0; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background-color: #000; } #menuContent { display: none; opacity: 0; .navbar-brand { height: auto; padding: 65px 51px; * { color: #fff; } img { height: 92px; } .zd-logo { div { p { margin: 0; } font-weight: bold; &:nth-child(1) { font-size: 0.24rem; transition: none; } &:nth-child(2) { transition: none; font-size: 0.13rem; } } .linheight10 { margin-top: 0.1rem; } .lineheight5 { margin-top: 0.05rem; } } } .content { width: 100%; // height: 100%; display: flex; justify-content: space-around; li { list-style: none; text-align: center; & > a { font-size: 0.22rem; font-weight: bold; } } * { color: #fff; } .nav-a { font-size: 0.22rem; font-weight: bold; img { display: none; } } .close { position: absolute; right: 10px; top: 10px; width: 40px; cursor: pointer; } .items { li { font-size: 0.2rem; line-height: 0.4rem; a { font-size: 0.16rem; } .sanji { li { text-align: center; a { opacity: 0.65; font-size: 0.12rem; line-height: 0.3rem; } } li:hover { a { opacity: 1; } } } } } } } } @media screen and (max-width: 768px) { #menu { // display: none !important; } } #search { display: none; opacity: 0; position: fixed; width: 100%; height: 20%; left: 0; top: 0; // background-image: url("./../img/index/bg1.png"); transition: all 0.3s; background-color: rgba(51, 51, 51, 0.95); z-index: 99; background-repeat: no-repeat; background-size: 100% 100%; transition: all 0.3s; align-items: center; justify-content: center; // form{ // display: flex; // align-items: center; // justify-content: center; // width: 700px; // max-width: 100%; // } // input { // max-width: 800px; // width: 50%; // height: 60px; // padding: 20px; // font-size: 20px; // border-right: 10px; // } // button { // color: #fff; // font-size: 30px; // font-weight: bold; // margin-left: 20px; // background: none; // height: 30px; // border: 0; // line-height: 1; // } form { max-width: 1200px; width: 100%; margin: 0 auto; align-items: center; border-bottom: 2px solid fade(#fff,80%); display: flex; justify-content: center; position: relative; margin-top: 20%; input { background: none; border: none; color: #fff; font-size: 30px; font-weight: 400; padding-bottom: 15px; text-align: center; width: 75%; } ::-webkit-input-placeholder { color: fade(#fff, 80%); } :-moz-placeholder { color: fade(#fff, 80%); } ::-moz-placeholder { color: fade(#fff, 80%); } :-ms-input-placeholder { color: fade(#fff, 80%); } button { color: #fff; height: 100%; position: absolute; right: 0; top: 0; fill: #fff; background: none; border: 0; display: flex; align-items: center; svg { height: 50px; } } } } @media screen and (max-width: 768px) { #search { display: none; opacity: 0; position: fixed; width: 100%; height: 20%; left: 0; top: 0; // background-image: url("./../img/index/bg1.png"); background-color: rgba(51, 51, 51, 0.95); z-index: 99; background-repeat: no-repeat; background-size: 100% 100%; transition: all 0.3s; align-items: center; justify-content: center; // form{ // display: flex; // align-items: center; // justify-content: center; // width: 700px; // max-width: 100%; // } // input { // max-width: 800px; // width: 50%; // height: 40px; // padding: 20px; // font-size: 14px; // border-right: 10px; // } // a { // color: #fff; // font-size: 20px; // font-weight: bold; // margin-left: 50px; // } form { width: 80%; margin: 0 auto; align-items: center; border-bottom: 2px solid fade(#fff,80%); display: flex; justify-content: center; position: relative; input { background: none; border: none; color: #fff; font-size: 16px; font-weight: 400; padding-bottom: 10px; text-align: center; width: 75%; } ::-webkit-input-placeholder { color: fade(#fff, 80%); } :-moz-placeholder { color: fade(#fff, 80%); } ::-moz-placeholder { color: fade(#fff, 80%); } :-ms-input-placeholder { color: fade(#fff, 80%); } button { color: #fff; height: 100%; position: absolute; right: 0; top: 0; fill: #fff; background: none; border: 0; svg { height: 20px; } } } } } #login { display: none; opacity: 0; position: fixed; flex-direction: column; width: 100%; height: 20%; left: 0; top: 0; // background-image: url("./../img/index/bg1.png"); transition: all 0.3s; background-color: black; z-index: 99; background-repeat: no-repeat; background-size: 100% 100%; transition: all 0.3s; align-items: center; justify-content: center; input { max-width: 800px; width: 50%; height: 60px; padding: 20px; font-size: 20px; border-right: 10px; margin-bottom: 10px; } a { color: #fff; font-size: 30px; font-weight: bold; margin-left: 50px; } }

map