[v-bloak] { display: none; } html,body{ width: 100%; height: 100%; } .header { width: 100%; } .header-wrap { width: 1200px; height: 60px; margin: 0 auto; } .header-logo, .header-btn { width: 20%; height: 100%; float: left; display: flex; align-items: center; } .header-btn { justify-content: flex-end; } .header-logo img { width: 150px; } .header-nav { float: left; width: 60%; height: 100%; display: flex; align-items: center; font-size: 16px; } .header-li { flex: 1; text-align: center; /*box-sizing: border-box;*/ /*padding: 0 40px;*/ } .activeLi { color: #18d6a3; } .login-btn { width: 80px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #18d6a3; color: #18d6a3; box-sizing: border-box; padding: 7px 0; font-size: 14px; } /*底部*/ .footer { width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: #273747; color: #A5AAAB; font-size: 14px; } .fixed{ position: fixed; bottom: 0; left: 0; } /*侧栏*/ .sidebar { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); font-size: 14px; display: flex; z-index: 2; } .appearSide { width: 180px; border: 1px solid #eee; position: relative; right: 0; background: #fff; } .sideAnim { right: -180px; transition: right 1s linear; } .sideAnim2 { right: 20px; transition: right 1s linear; } .sidebar-title { width: 100%; height: 40px; line-height: 40px; text-align: center; } .sidebar-com { width: 100%; display: inline-block; box-sizing: border-box; padding: 10px 0; text-align: center; border-bottom: 1px solid #eee; position: relative; } .sidebar-com:hover { background: #f6f6f6; } .qq { width: 25px; vertical-align: middle; display: inline-block; } .sidebar-deputy { vertical-align: middle; } .wx { width: 80px; } .phone { color: #2389ED; } .sidebar-wrap { display: flex; justify-content: center; } .com-img { width: 25px; display: inline-block; margin-bottom: 10px; } .close-sidebar { position: absolute; right: 0; top: -30px; width: 20px; } .side-box { width: 80px; border: 1px solid #eee; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding-bottom: 10px; align-self: flex-end; } .sidebar-wx, .sidebar-qq { width: 100%; text-align: center; } .sidebar-wx img, .sidebar-qq img { width: 45px; display: inline-block; margin: 5px 0; } .slide-top { border-top: 1px solid #eee; }