@media screen and (max-width: 1360px){ body .content { display: flex; flex-direction: column; min-width: 100%; background-color: #f1f9fc; } body .content .product-compontent .product-compontent-banner{ height: 8rem; } body .content .product-compontent .product-compontent-nav{ height: 4rem; padding: 0 1rem; box-sizing: border-box; } body .content .product-compontent .product-compontent-nav-content { width: 100%; display: flex; box-sizing: border-box; justify-content: space-between; padding: unset; } body .content .product-compontent .product-compontent-nav-content-right{ display: none; } body .content .product-compontent .product-compontent-nav-content-left { display: flex; width: 100%; overflow: auto; } body .content .product-compontent .product-compontent-nav-content-left a { min-width: unset; text-align: center; height: 100%; line-height: 4rem; flex-shrink: 0; color: #000000; font-size: 1rem; position: relative; margin-right: 1rem; cursor: pointer; transition: all .3; } body .content .product-compontent .product-compontent-nav-content-left a:hover { color: #0084ce; } body .content .product-compontent .product-compontent-nav-content-left a:hover::after { content: unset; width: unset; position: unset; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; } body .content .product-compontent .product-compontent-nav-content-left .select-nav { color: #0084ce; } body .content .product-compontent .select-nav::after { content: unset; width: unset; position: unset; bottom: unset; left: unset; height: unset; background-color: unset; color: unset; line-height: unset; transition: all .3; } } .content { display: flex; flex-direction: column; background-color: #f1f9fc; } .content .product-compontent { display: flex; flex-direction: column; width: 100%; } .content .product-compontent .product-compontent-banner { width: 100%; height: 320px; background-image: url('../../images/banner-11.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } .content .product-compontent .product-compontent-nav { width: 100%; height: 70px; background-color: #fff; display: flex; justify-content: center; } .content .product-compontent .product-compontent-nav-content { width: 1360px; margin: 0 auto; display: flex; padding: 0 20px; box-sizing: border-box; justify-content: space-between; } .content .product-compontent .product-compontent-nav-content-left { display: flex; } .content .product-compontent .product-compontent-nav-content-left a { min-width: 100px; text-align: center; height: 100%; line-height: 70px; color: #000000; font-size: 16px; position: relative; margin-right: 30px; cursor: pointer; transition: all .3; } .content .product-compontent .product-compontent-nav-content-left a:hover { color: #0084ce; } .content .product-compontent .product-compontent-nav-content-left a:hover::after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background-color: #0084ce; color: #0084ce; line-height: 3px; } .content .product-compontent .product-compontent-nav-content-left div:last-child { margin: 0; } .content .product-compontent .product-compontent-nav-content-left .select-nav { color: #0084ce; } .content .product-compontent .select-nav::after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; height: 3px; background-color: #0084ce; color: #0084ce; line-height: 3px; transition: all .3; } .content .product-compontent .product-compontent-nav-content-right { display: flex; align-items: center; } .content .product-compontent .product-compontent-nav-content-right span:first-child { font-size: 16px; color: #0084ce; margin-right: 7px; } .content .product-compontent .product-compontent-nav-content-right a { color: #888888; font-size: 14px; cursor: pointer; transition: all .3s; } .content .product-compontent .product-compontent-nav-content-right a:hover{ color: #0084ce; } .content .product-compontent .product-compontent-nav-content-right span { margin: 0 14px; font-size: 14px; color: #888888; }