.recommend { padding-top: 66px; padding-left: 257px; } .menu { width: 240px; border-right: 1px solid #e6e6e6; position: fixed; top: 0; left: 0; background: white; z-index: 9; } .top { width: calc(1600px - 240px); border-bottom: 1px solid #e6e6e6; position: fixed; right: 0; top: 0; background: white; z-index: 8; } .menu .logo { padding: 14px 0 33.86px; text-align: center; } .menu img { width: 146px; height: 36px; } .menu .block { padding: 0 28px; box-sizing: border-box; overflow: hidden; height: calc(100vh - 84px); } .menu .block:hover { overflow: overlay; } .menu .block ul { padding: 16px 0; } .block .active { background-color: #f7f7f7; } .block ul { position: relative; } .block ul::after { content: ''; width: 100%; height: 1px; background: #e6e6e6; position: absolute; bottom: 0; left: 0; } .menu .block li { margin-top: 8px; padding: 10px 0; } .block .top-0 li:first-child { margin-top: 0; } .block li i { margin: 0 6px 0 18px; } .block li a { font-size: 16px; color: #111622; } .blockC li a { margin-left: 18px; } .blockA li i { width: 24px; height: 24px; } .blockA a { font-size: 16px; color: #111622; } .top { overflow: hidden; } .top .search { width: 438px; height: 34px; background-color: #f7f7f7; overflow: hidden; border-radius: 3px; margin: 15px 0 15px 35px; border: 1px solid #e6e6e6; float: left; } .search input { font-size: 14px; padding: 0 10px; border-style: none; float: left; background-color: #f7f7f7; height: 100%; width: calc(100% - 75px - 20px); } .search input:focus { border: none; outline: none; } .intrduce { line-height: 34px; position: relative; float: left; height: 100%; color: #666; } .intrduce::before { content: ''; height: 17px; width: 1px; background-color: #e6e6e6; position: absolute; top: calc((100% - 17px)/2); } .intrduce i { float: left; margin: 0 4px 0 10px; } .intrduce span { font-size: 14px; float: left; } .search_r { float: right; height: 34px; margin: 15px 0; line-height: 34px; } .search_r ul { float: left; overflow: hidden; } .search_r ul li { font-size: 14px; color: #111622; float: left; margin-right: 44px; } .search_r ul li i {} .search_r ul li span {} .search_r .button { font-size: 14px; color: #111622; overflow: hidden; float: right; } .search_r .button1 { float: left; margin-left: 16px; border-radius: 5px; border: 1px solid #e6e6e6; padding: 0 12px; } .search_r .button2 { float: left; margin-left: 24px; margin-right: 35px; background-color: #ff2626; border-radius: 5px; border: 1px solid #e6e6e6; padding: 0 28px; color: white; } .content { padding-top: 30px; overflow: hidden; } .first { width: 630px !important; height: 280px !important; border-radius: 3px !important; overflow: hidden; } .first img { width: 100%; height: 100%; } .content li { float: left; margin-left: 16px; width: 307px; height: 280px; margin-top:30px; position: relative; } .content li .one { width: 307px; height: 172px; border-radius: 3px; margin-bottom: 10px; } .content li .ing{ position:absolute; top: 15px; left: 10px; color: white; background: #ff2626; padding: 3px 10px; border-radius: 20px; font-size: 12px; } .content li .two { width: 36px; height: 36px; border-radius: 50%; } .content li p {} .content li p i {} .content li .des { width: 100%; } .content li .des_l { float: left; } .content li .des_r { float: left; width: calc(100% - 36px - 10px); margin-left: 10px; } .content li .des_r p:first-child { font-size: 16px !important; color: #111622 !important; width: 100%; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .content li .des_r p:first-child:hover{ color: #ff2626; } .des_r p{ font-size: 14px; color: #505666; }