.header {} .header_menu { height: 36px; background: #2e2828; line-height: 33px; } .header_menu a { color: #afafaf; font-size: 12px; } .left_menu li, .right_menu li { float: left; padding: 0 8px; position: relative; } .left_menu li::after, .right_menu li::after { content: ""; width: 1px; height: 10px; display: block; position: absolute; top: 14px; right: -1px; background: #414141; } .right_menu li:hover .icon-zhankai{ transform: rotate(180deg); } .right_menu i { font-size: 14px; display: inline-block; } .icon-zhankai { font-size: 12px !important; padding-left: 3px; } .car { padding: 0 12px 0 10px; background: #424242; } .right_menu li:nth-child(4)::after, .right_menu li:nth-child(5)::after { width: 0; } .right_menu li:hover .drop_menu { display: block !important; } .right_menu .drop_menu { position: absolute; width: 893px; height: 210px; background: #fff; box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%); border-radius: 8px 0 8px 8px; right: 0; top: 36px; z-index: 9; padding-top: 37px; padding-left: 49px; box-sizing: border-box; display: none; } .drop_menu_item { float: left; width: 185.0px; } .drop_menu_item:first-child { width: auto !important; } .icon_home { width: 50px; height: 50px; background: url("../img/icon-common.svg"); background-position: -202px 0; margin-right: 46px; } .drop_menu_item a { display: inline-block; width: 48%; } .header_logo { height: 41px; padding: 18px 0 15px 0; box-shadow: 0 0 46px rgb(0 0 0 / 3%); } .logo { height: 36px; margin-right: 34px; } .menus { line-height: 41px; } .menus img { height: 24px; margin-top: 9px; } .menus li { float: left; margin-right: 24px; } .menus li a { font-size: 16px; color: #333; } .search { position: relative; width: 238px; height: 28px; } .search input{ background: #f0f0f0; border: 1px solid #f0f0f0; border-radius: 15px; width: 100%; height: 100%; text-align: right; padding-right: 35px; box-sizing: border-box; } .search i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; } .banner { background: url("https://res.vmallres.com/pimages//pages/picImages/29481579522617518492.jpg"); height: 514px; background-position: 50% 0px; border-bottom-left-radius: 191px 52px; border-bottom-right-radius: 191px 52px; } .banner_center { height: 100%; position: relative; } .banner_menu { position: absolute; left: 0; top: 18px; width: 200px; height: 440px; box-shadow: 0 0 28px rgb(0 0 0 / 8%); background: rgba(255,255,255,0.95); border-radius: 10px; } .banner_menu li { height: 40px; line-height: 40px; padding: 0 16px; box-sizing: border-box; position: relative; } .banner_menu li:first-child:hover { border-top-left-radius: 10px; border-top-right-radius: 10px; } .banner_menu li:hover { background: #fff; } .banner_menu li:hover .drow_menu{ display: block !important; } .banner_menu li a { font-size: 14px; color: #848484; } .banner_menu li i { font-size: 13px; color: #848484; } .drow_menu { position: absolute; left: 193px; width: 274px; padding-left: 32px; padding-top: 20px; box-sizing: border-box; height: 440px; background: #fff; border-radius: 0 10px 10px 0; box-shadow: 0 0 46px rgb(0 0 0 / 10%); display: none; } .list { padding-right: 20px; } .list .item { margin-bottom: 15px; height: 60px; padding: 8px 5px 0px 5px; border-radius: 10px; } .list .item:hover { background: #f6f6f6; } .list .item img { width: 48px; height: 48px; margin-right:8px; vertical-align: middle; } .list .item span { color: #666; font-size: 14px; } .show_all { width: 112px; height: 42px; position: relative; border: 1px solid #f2f2f2; border-radius: 0 22px 22px 0; font-size: 13px; color: #999; text-align: center; margin-left: 26px; margin-top: 24px; } .icon-play { position: absolute; display: inline-block; width: 42px; height: 42px; background: #fff; border: 1px solid #f2f2f2; border-radius: 22px; left: -20px; top: -1px; } .but { background: url("https://res8.vmallres.com/20210519/images/echannel/icon/icon01.svg"); background-repeat: no-repeat; width: 80px; height: 80px; position: absolute; top: 50%; transform: translateY(-50%); } .left_button { background-position: 0 -72px; left: 210px; } .right_button { background-position: -80px -72px; right: 0; } .dh { position: absolute; right: 0; bottom: 83px; } .dh li { float: left; width: 10px; margin-right: 7px; height: 10px; border-radius: 100%; border: 1px solid #FFF; } .dh .active { background: #fff !important; } .user_info { height: 88px; background: #fff; border-radius: 10px; box-shadow: 0 2px 26px rgb(0 0 0 / 7%); position: absolute; bottom: -46px; width: 100%; } .user_info li { float: left; } .user_info li:first-child { width: 270px; height: 55px; margin-top: 17px; border-right: 1px solid #eee; padding-left: 26px; box-sizing: border-box; } .user_info li:first-child img { width: 52px; height: 52px; margin-right: 17px; } .user_info li:first-child p { font-size: 14px; color: #999; margin-bottom: 6px; } .user_info li:first-child a { color: #333; } .user_text .news { display: inline-block; width: 66px; height: 20px; text-align: center; line-height: 20px; border-radius: 5px; border: 1px solid #e47b7f; color: #de5b60 !important; font-size: 13px; } .user_text .vip { color: #fde4b3 !important; background: #595454; border: 1px solid #595454; margin-left: 8px; } .user_info li:nth-child(2) { width: 660px; margin-top: 17px; overflow: hidden; } .icon_item { float: left; width: 84px; text-align: center; margin: 0 10px; } .icon_item img { width: 40px; height: 40px; } .icon_item p { font-size: 12px; color: #777; } .user_info li:nth-child(3) { width: 266px; height: 88px; border-left: 1px solid #eee; } .top_tips { height: 43px; line-height: 43px; } .top_tips span{ color: #777; font-size: 14px; font-weight: 700; margin-left: 12px; margin-right: 5px; } .top_tips a{ color: #6f6f6f; font-size: 12px; } .b_icon { float: left; height: 42px; line-height: 42px; width: 88px; border-top: 1px solid #eee; text-align: center } .b_icon img { width: 20px; height: 20px; vertical-align: middle; } .b_icon span { color: #666; font-size: 12px; }