.pageListNav{ display: none; } .informationBlock{ padding-top: 40px; padding-bottom: 60px; .w1280{ display: flex; justify-content: space-between; > .left{ width: 260px; // .tit{ // display: flex; // align-items: center; // justify-content: center; // position: relative; // font-size: 0; // p{ // position: absolute; // font-weight: bold; // font-size: 20px; // line-height: 1.5; // color: #fff; // } // } // ul{ // border-left: 1px solid #e6e6e6; // border-right: 1px solid #e6e6e6; // li{ // transition: border .5s; // border-bottom: 1px solid #e6e6e6; // > a{ // display: block; // position: relative; // transition: color .5s; // text-align: center; // font-size: 18px; // line-height: 80px; // color: #333; // &::after{ // display: block; // content: ''; // position: absolute; // left: -1px; // top: 50%; // transform: translateY(-50%); // transition: transform .5s; // opacity: 0; // width: 3px; // height: 39px; // background-color: #f08300; // } // } // &.on{ // > a { // font-weight: bold; // color: #f08200; // &::after{ // opacity: 1; // } // } // } // &.gary{ // background: #f7f7f7; // } // } // } ul{ border-top: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; li{ border-bottom: 1px solid #e6e6e6; .tit{ display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 80px; cursor: pointer; img{ position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s; z-index: -1; width: 100%; height: 100%; } p{ transition: font-weight .5s,color .5s; font-size: 20px; font-weight: 400; color: #333; } } .list{ height: 0; overflow: hidden; a{ display: flex; align-items: center; justify-content: center; position: relative; height: 80px; border-top: 1px solid #e6e6e6; background: #f7f7f7; font-size: 20px; color: #333; &::after{ display: block; content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: transform .5s; opacity: 0; width: 3px; height: 39px; background-color: #f08300; } &.on{ font-weight: bold; color: #f08200; &::after{ opacity: 1; } } } } &.on{ .tit{ p{ font-weight: bold; color: #fff; } img{ opacity: 1; } } } } } } .mobPageNav{ display: none; width: 100%; padding-bottom: 20px; overflow-x: auto; border-bottom: 1px solid #e6e6e6; 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% - 300px); .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{ .list{ display: flex; justify-content: space-between; padding: 25px 0; border-bottom: 1px solid #e6e6e6; .left{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: calc(100% - 120px); padding-left: 30px; background: url(../images/online/pdfico.png) no-repeat left center; background-size: 18px auto; line-height: 30px; color: #333; } .time{ width: 90px; text-align: right; font-size: 15px; line-height: 30px; color: #999; } } } } } } @media (max-width: 1080px) { .pageListNav{ display: block; } .informationBlock { padding-top: 20px; .w1280 { flex-direction: column; > .left{ display: none; } .mobPageNav{ display: flex; a{ padding: 5px 10px; } } .right{ width: 100%; .tit{ display: none; } } } } }