.container { width: 100%; position: relative; min-width: 1200px; background: #f5f5f5; } .header-menu { height: 90px; background: #fff; } .header-menu .logo { margin-top: 23px; } .add-cart-box { float: right; width: 172px; height: 34px; line-height: 34px; border: 2px solid #dedede; margin-top: 25px; text-align: center; font-size: 14px !important; color: #00a0e9; padding-left: 28px; background: 30px center no-repeat; } .search-box { display: inline-block; width: 500px; margin: 25px 15px 0 0; float: left; } .search-input-box input { width: 418px; height: 34px; line-height: 34px; font-size: 14px; border: none; border: 2px solid #dedede; border-right: none; padding: 0 10px; box-sizing: border-box; float: left; } .search-input-box { width: 500px; height: 34px; } .search-btn { display: inline-block; width: 82px; height: 34px; line-height: 34px; text-align: center; color: #fff; padding-left: 20px; font-size: 14px; background: #00a0e9 20px center no-repeat; } .hot-word { margin-top: 5px; color: #999; } .hot-word a { font-size: 12px; color: #999; } .hot-word a:hover{ color:#00a0e9; text-decoration: none; } .search-btn:hover { opacity: 0.8; color: #fff; text-decoration: none; } .add-cart-box:hover { text-decoration: none; color: #00a0e9; background-color: #e8f8ff; } .add-cart-box span { font-size: 14px; display: inline-block; width: 25px; height: 25px; line-height: 25px; text-align: center; background: #ff0000; color: #fff; border-radius: 50%; margin-left: -2px; } .all-types-menu { background-color: #fff; } .all-types-menu-title { width: 220px; height: 40px; line-height: 40px; padding-left: 15px; background: center left no-repeat; background-size: cover; font-size: 16px; color: #fff; cursor: pointer; } .all-types-menu-title img { margin-right: 4px; } .banner-box { position: relative; height: 380px; width: 100%; background-size: cover; background-color: #fff; } .banner-img-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; } .left-main-menu { position: relative; z-index: 999; width: 220px; height: 380px; background: rgba(0, 0, 0, 0.8); box-sizing: border-box; display: inline-block } .banner-menu-one { height: 62px; line-height: 62px; font-size: 16px; color: #fff; padding: 0 15px; cursor: pointer; transition: all 0.3s ease; } .b-menu-title { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-left: 25px; } .banner-menu-one:hover { background-color: rgba(0, 0, 0, 0.8) } .banner-menu-one:hover .b-menu-title { border: none; } .second-banner-meun { display: none; position: absolute; left: 220px; top: 0; z-index: 8888; height: 380px; width: 510px; background-color: rgba(255, 255, 255, 0.8); padding: 10px 20px; box-sizing: border-box; } .banner-menu-one:hover .second-banner-meun { display: block; } .right-main-info { position: relative; width: 200px; height: 380px; background: rgba(255, 255, 255, 0.9); float: right; text-align: center; } .user-logo-img { width: 78px; height: 78px; border-radius: 50%; box-shadow: 0 3px 10px 0 #bababa; margin: 6px auto; padding: 6px; text-align: center; box-sizing: border-box; } .user-logo-img img { width: 66px; height: 66px; border-radius: 50%; } .welcome-desc { font-size: 14px; color: #666; margin-bottom: 15px; } .user-oper-btns { padding: 0px 15px 20px; border-bottom: 1px solid #a5c6da; text-align: center; } .work-state-box { width: 100%; height: 200px; } .work-item-one { width: 50%; float: left; height: 100px; border-bottom: 1px dashed #dedede; text-align: center; padding-top: 25px; cursor: pointer; } .work-item-one p { margin: 0; padding: 0; } .w-num { padding: 0px; color: #ff0000; font-size: 20px; } .wi-1, .wi-3 { border-right: 1px dashed #dedede; } .wi-3, .wi-4 { border-bottom: none; } .r-btn { display: inline-block; padding: 8px 24px; border-radius: 20px; } .r-btn-1 { color: #fff; background: #00a0e9 !important; margin-right: 14px; } .r-btn-1:hover { text-decoration: none; opacity: 0.8; color: #fff; } .r-btn-2 { border: 1px solid #00a0e9 !important; color: #00a0e9 !important; } .r-btn-3 { border: 1px solid #999 !important; color: #999 !important; } .r-btn-2:hover { text-decoration: none; color: #00a0e9 !important; background: #d3f1ff; } .section-rect-header { height: 60px; line-height: 60px; margin-top: 15px; } .second-menu-one-box { font-size: 14px; color: #333; } .second-menu-types { float: left; height: 50px; line-height: 50px; margin-right: 20px; } .second-menus { line-height: 50px; border-bottom: 1px dashed #cacaca; float: left; width: 360px; padding-left: 20px; } .second-menu-one { float: left; } .second-menus a { font-size: 14px; padding-right: 20px; } .section-rect-header.section-1, .section-rect-header.section-5 { background: center no-repeat; background-size: cover; } .section-rect-header.section-2, .section-rect-header.section-3 { background: center no-repeat; background-size: cover; } .section-title { font-size: 22px; color: #fff; width: 220px; padding-left: 60px; float: left; } .st-1 { background: 22px center no-repeat; } .st-2, .st-3 { background: 22px center no-repeat; } .section-more-link { width: 140px; height: 36px; line-height: 36px; text-align: center; color: #fff; border: 1px solid #fff; border-radius: 18px; float: right; margin-top: 12px; margin-right: 24px; font-size: 16px !important; } .section-more-link:hover { color: #fff; } .section-tj { float: left; } .sec-type-one { margin-right: 15px; font-size: 14px; font-weight: bold; display: inline-block; height: 30px; line-height: 30px; padding: 0 15px; color: #fff; } .section-1 .sec-type-one, .section-5 .sec-type-one { border: 1px solid #bdcbe5; } .section-1 .sec-type-one:first-child, .section-5 .sec-type-one:first-child { color: #597ebe; background: #dee5f2; border: 1px solid #dee5f2; } .section-1 .sec-type-one:hover, .section-5 .sec-type-one:hover { background: #dee5f2; color: #597ebe; cursor: pointer; } .section-2 .sec-type-one, .section-3 .sec-type-one { border: 1px solid #99d9f6; } .section-2 .sec-type-one:first-child, .section-3 .sec-type-one:first-child { color: #00a0e9; background: #ccecfb; border: 1px solid #99d9f6; } .section-2 .sec-type-one:hover, .section-3 .sec-type-one:hover { background: #ccecfb; color: #00a0e9; cursor: pointer; } .goods-wrap { width: 100%; background: #f7f7f7; } .goods-box { width: 900px; overflow: hidden; display: inline-block; } .good-box-one { width: 210px; height: 300px; margin-right: 15px; margin-top: 15px; background-color: #fff; float: left; transition: all 0.3s ease; border: 2px solid transparent; box-sizing: border-box; cursor: pointer; } .good-box-one:hover { transform: translatey(-5px); /* border: 1px solid #e81936; */ background:#edf8fc; } .good-img { position: relative; width: 100%; height: 190px; overflow: hidden; } .good-img1 { position: relative; width: 100%; height: 190px; } .good-img2 { position: relative; width: 100%; height: 190px; top:45px; left:35px } .good-img img { position: absolute; margin-left: 50%; margin-top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .good-title-desc { height: 54px; font-size: 14px; padding: 0 10px; border-bottom: 1px solid #f7f7f7 } .good-title-desc .good-title { height: 22px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; } .good-title-desc .good-desc { height: 22px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999; } .good-money-box { height: 50px; line-height: 50px; padding: 0 10px; box-sizing: border-box; } .good-money { float: left; color: #df0021; font-size: 22px; } .good-money1 { color: #bababa; font-size: 20px; text-align:center } .good-money i { font-size: 14px; font-style: normal; } .good-sale-num { float: right; font-size: 14px; color: #999; } .goods-ranking { float: right; width: 296px; height:616px; overflow: hidden; background: #fff; border-top: 4px solid #597ebe; margin-top: 15px; padding: 0 15px; box-sizing: border-box; } .ranking-2 { border-top: 4px solid #00a0e9; } .goods-rank-title { height: 62px; line-height: 62px; border-bottom: 1px solid #f7f7f7; font-size: 20px; } .goods-rank-title img { margin-left: 10px; } .grt-1 { color: #597ebe; } .grt-2 { color: #00a0e9; } .goods-ranking-one { height: 55px; line-height: 55px; overflow: hidden; } .goods-ranking-item { clear: both; width: 100%; } .sort-num { width: 40px; float: left; height: 55px; line-height: 55px; text-align: center; font-size: 24px; color: #ffa67c; } .good-sort-img { width: 60px; overflow: hidden; float: left; text-align: center; margin-right: 18px; } .good-sort-img img { width: 36px; height: 36px; margin-top: 10px; } .good-name { height: 52px; line-height: 52px; width: 146px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left; font-size: 14px; cursor: pointer; } .footer-box { padding-top: 40px; box-sizing: border-box; height: 180px; background: #323232; font-size: 14px; color: #898989; text-align: center; margin-top: 15px; } .footer-box p { margin-top: 24px; margin: 0; } .backtop { position: fixed; right: 0; width: 52px; height: 52px; bottom: 179px; background: center no-repeat; cursor: pointer; transition: all 0.3s ease; background-color: #00a0e9; } .backtop:hover { background: center -4px no-repeat; background-color: #00a0e9; } .slide-menu-box { position: fixed; top: 250px; left: 50%; margin-left: -680px; width: 62px; background: #333; } .slide-menu-one { width: 100%; height: 68px; line-height: 20px; padding-top: 12px; border-top: 1px solid #fff; font-size: 14px; text-align: center; transition: all 0.3s ease; cursor: pointer; color: #fff; } .slide-menu-one.active, .slide-menu-one:hover { background: #00a0e9; color: #fff; } .slide-menu-one:first-child { border-top: none; }