.pageListNav{ display: none; } .investList{ padding-top: 40px; padding-bottom: 60px; background: #f7f7f7; .w1280{ display: flex; align-items: flex-start; justify-content: space-between; .left{ width: 260px; background: #fff; .tit{ display: flex; align-items: center; justify-content: center; position: relative; font-size: 0; p{ position: absolute; font-weight: bold; font-size: 28px; line-height: 1.5; color: #fff; } } ul{ padding: 19px 30px 60px; li{ transition: border .5s; > a{ display: flex; align-items: center; justify-content: space-between; position: relative; transition: color .5s; padding-bottom: 18px; padding-top: 17px; font-size: 18px; color: #333; border-bottom: 1px solid rgba($color: #f08200, $alpha: 0); i{ transition: transform .5s; transform: rotate(0deg); img{ transition: opacity .5s; opacity: 0; } } &.active{ i{ transform: rotate(90deg); img{ opacity: 1; } } color: #f08200; border-bottom: 1px solid #f08200; } } &.on{ > a { color: #f08200; border-bottom: 1px solid #f08200; i{ display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: -15px; width: 40px; height: 40px; img{ opacity: 1; } } } } .childList{ width: 100%; height: 0; overflow: hidden; .center{ padding-top: 14px; a{ display: block; position: relative; transition: color .5s; padding-left: 20px; margin-top: 10px; font-size: 16px; line-height: 1.5; color: #666; &::after{ display: block; content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background: rgba($color: #000000, $alpha: .1); } &:first-child{ margin-top: 0; } &.on{ color: #f08200; } } } } } } } .mobPageNav{ display: none; width: 100%; margin-bottom: 40px; overflow-x: auto; a{ white-space: nowrap; padding: 10px 20px; font-size: 14px; line-height: 24px; color: #333; &.on{ font-weight: bold; background: #f08200; color: #fff; } } } .right{ width: calc(100% - 290px); padding: 37px 40px 48px; background: #fff; .tit{ display: flex; align-items: center; font-size: 24px; color: #333; &::before{ display: block; content: ''; width: 4px; height: 25px; margin-right: 14px; background-color: #f0850a; border-radius: 2px; } } .content{ margin-top: 38px; border-top: 1px solid rgba($color: #000000, $alpha: .1); .list{ padding: 26px 0; border-bottom: 1px solid rgba($color: #000000, $alpha: .1); a{ font-weight: bold; font-size: 16px; line-height: 1.5; color: #333; } p{ margin-top: 12px; font-size: 15px; color: #999; } } .pagination{ margin-top: 50px; } } } } } @media (any-hover:hover) { .investList .w1280 .left ul { li:hover{ > a{ color: #f08200; border-bottom: 1px solid #f08200; i img{ opacity: 1; } } } .childList .center a:hover{ color: #f08200; } } } @media (max-width: 1080px){ .pageListNav{ display: block; } .investList{ padding-top: 20px; } .investList .w1280{ flex-direction: column; .left{ display: none; } .mobPageNav{ display: flex; margin-bottom: 20px; a{ padding: 5px 10px; } } .right{ width: 100%; } } } @media (max-width: 500px) { .investList .w1280 .right{ padding: 20px; .tit{ font-size: 20px; } .content{ margin-top: 20px; .list{ padding: 10px 0; a{ line-height: 1.3; } p{ margin-top: 10px; } } .pagination{ margin-top: 20px; } } } }