.details { align-items: flex-start; margin-top: .6rem; padding-bottom: 1.2rem; } .details .body { min-width: 0; } .te_c_h2{text-align:center;margin-top:0.3rem;font-size:0.2rem;} @media (max-width: 1199px){ .te_c_h2{font-size:0.36rem;} } @media (max-width: 950px){ .te_c_h2{font-size:0.45rem;} } @media (max-width: 480px){ .te_c_h2{font-size:0.6rem;} } .details .body h1 { margin: 0; font-size: .36rem; font-weight: normal; line-height: 1.5; } .details .body .sub{margin-top: 0.3rem; text-align: center; font-size: 0.28rem;} .details .body .info { margin-top: .3rem; align-items: center; } .details .body .info .time { margin-right: .3rem; } .details .body .info .share a { width: .3rem; height: .3rem; background: url(/repository/portal-local/ngc202204150002/cms/image/3e8a0bf1-9c29-4c06-9770-cb23e8ba06c1.png?d=1657851179845)no-repeat center; background-size: 100%; } .details .body .info .share a .erwma{ position: absolute; border-radius: .05rem; -webkit-border-radius: .05rem; -moz-border-radius: .05rem; -ms-border-radius: .05rem; -o-border-radius: .05rem; width: 1.5rem; height: 1.5rem; padding: .05rem;left: .4rem;top: -.1rem;display: none; } .details .body .info .share .erwma img{ width: 100%; } .details .body .tags { margin-top: .3rem; border-bottom: 1px #eee solid; padding-bottom: .4rem; } .details .body .tags a { border: 1px #eee solid; border-radius: .03rem; -webkit-border-radius: .03rem; -moz-border-radius: .03rem; -ms-border-radius: .03rem; -o-border-radius: .03rem; padding: 0 .08rem; margin-left: .1rem; cursor: context-menu; color: #5b626c!important; } .details .body .content { margin-top: .3rem; font-size: 16px; line-height: 1.8; } .details .body .content p { text-indent: 2em!important; } .details .body .content img { max-width: 100% !important; margin: 0 auto!important; display: block!important; } .details .body .prev-next { margin-top: .3rem; border-top: 1px #eee solid; padding-top: .4rem; } .details .body .prev-next .btn { margin-top: 0; } .details .body .prev-next a { min-width: 0; width:3rem; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height:1.5; height:1.5em; } .details .body .prev-next a.btn{ width: 1.55rem; line-height:0.45rem; height:auto; } .sidebar { width: 4rem; padding-left: .4rem; border-left: 1px #f5f5f5 solid; margin-left: .8rem; } .sidebar .title { border-bottom: 1px #f5f5f5 solid; padding-bottom: .3rem; } .sidebar .title::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: .4rem; background-color: #c0aa8b; } .sidebar li { border-bottom: 1px #f5f5f5 solid; padding-bottom: .2rem; padding-top: .3rem; } .sidebar li .pic { width: 1rem; height: .5rem; border-radius: .1rem; -webkit-border-radius: .1rem; -moz-border-radius: .1rem; -ms-border-radius: .1rem; -o-border-radius: .1rem; overflow: hidden; margin-right: .2rem; } .sidebar li .pic img { width: 100%; } .sidebar li .info { margin-top: .1rem; } .sidebar li .time { background: url(/repository/portal-local/ngc202204150002/cms/image/73d4f4e8-a3be-497d-9698-da7e44195a75.png?d=1657851203042)no-repeat left center; padding-left: 20px; } .sidebar li .more { width: .2rem; background: url(/repository/portal-local/ngc202204150002/cms/image/da2a951a-9bf7-4e00-865e-5cd6eb7002ad.png?d=1657851219634)no-repeat right center; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } .sidebar li .more::after { content: ''; position: absolute; left: -.2rem; top: 50%; width: 1px; height: 60%; background-color: #eeeeee; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .sidebar .focus { margin-bottom: .4rem; } .sidebar .focus .pic { overflow: hidden; border: .1rem; width: 1.3rem; height: 1rem; margin-right: .2rem; } .sidebar .focus .pic img { width: 100%; } .sidebar .focus .pic span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); width: .3rem; height: .3rem; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: url(/repository/portal-local/ngc202204150002/cms/image/0d9608d9-9e60-4ead-815e-160a71bb07ee.png?d=1657851248413)no-repeat center; background-size: 100%; } .sidebar .focus .slick-dots { padding-left: .2rem; bottom: .01rem; } .sidebar .focus .slick-dots li { width: 15px; height: 15px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: #eee; padding: 0; } .sidebar .focus .slick-dots li button { display: none; } .sidebar .focus .slick-dots .slick-active { background-image: linear-gradient(45deg, #1d82d6, #02b4ee); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .sidebar .erwma { margin-top: .3rem; } .sidebar .erwma .con { margin-top: .3rem; } .sidebar .erwma .pic { width: 1.45rem; overflow: hidden; margin-right: .1rem; } .sidebar .erwma .pic img { width: 100%; } .sidebar .search { border: 1px #eee solid; border-radius: .1rem; -webkit-border-radius: .1rem; -moz-border-radius: .1rem; -ms-border-radius: .1rem; -o-border-radius: .1rem; height: .6rem; overflow: hidden; margin: .3rem 0 .6rem 0; } .sidebar .search input[type='text'] { width: 100%; padding-left: .2rem; } .sidebar .search button { border: 0; width: .6rem; background: url(/repository/portal-local/ngc202204150002/cms/image/0ff5fcc3-c91b-46e7-98ef-7cef652a748e.png?d=1657851262618)no-repeat center; background-size: .16rem; } .sidebar .search button::after { content: ''; position: absolute; left: 0rem; width: 1px; height: 40%; background-color: #eee; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .sidebar .mores { margin-top: .6rem; } .sidebar .mores a { border-radius: .1rem; -webkit-border-radius: .1rem; -moz-border-radius: .1rem; -ms-border-radius: .1rem; -o-border-radius: .1rem; line-height: .6rem; } .sidebar .mores a em { width: 10px; height: 10px; border-right: 2px #FFF solid; border-top: 2px #FFF solid; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); margin-left: .1rem; } .roll { margin-top: .6rem; } .roll .item { height: 3.25rem; overflow: hidden; border-radius: .1rem; -webkit-border-radius: .1rem; -moz-border-radius: .1rem; -ms-border-radius: .1rem; -o-border-radius: .1rem; margin: 0 .15rem; background-color: #000; } .roll .item img { width: 100%; height: 100%; } .roll .item span { position: absolute; left: 50%; top: 50%; width: .6rem; height: .6rem; background: url(/repository/portal-local/ngc202204150002/cms/image/d9bb7feb-23ec-4b97-8d2e-20d850e33127.png?d=1657851276435)no-repeat center; background-size: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } @media (min-width:1025px) { .details .body .info .share a:hover .erwma{ display: block; } .sidebar li:hover .more { margin-right: -.1rem; } } @media (max-width:1199px) { .sidebar { display: none; } .details .body { margin-right: 0; } .details .body h1 { font-size: .48rem; } .details .body .info .share a { width: .5rem; height: .5rem; } .roll .item img { display: none; } .roll .item { height: 4rem; } } @media (max-width:950px) { .details .body .prev-next a{ width:100%; } .details .body .prev-next a.btn{ width: 4rem; line-height: 3; order: 3; } .details .body .prev-next{ justify-content: center; } .details .body h1 { font-size: .62rem; } .details .body .info .share a { width: .6rem; height: .6rem; } .details .body .tags a { padding: 0 .1rem; } } @media (max-width:768px) { .details .body .content img{ width: 100%!important; max-width: none!important; display: block; height: auto!important; } } @media (max-width:480px) { .details{ flex-wrap: wrap;} .sidebar .mores{display:none;} .sidebar { display: block; width:100%; margin-left:0; border-left:0; padding-left:0; margin-top: 5%; } .sidebar li .more{width: 20px; } .sidebar .search,.sidebar .title{display:none} .sidebar .title.tit2{ display:block } .sidebar li{ padding:15px 0 } .details .body{width:100%;flex: auto;} .sidebar li .pic{ width:30%; height:auto; } .sidebar li .txt{ width:70% } .sidebar li .txt a{font-size:16px;} .sidebar li .time{font-size:14px;} .details .body h1 { font-size: .88rem; } .details .body .prev-next { flex-flow: column; } .details .body .prev-next .btn { order: 1; margin-top: .6rem; line-height: 2rem; } .details .body .prev-next a { width: 100%; line-height: 2; } .roll .item { height: 6rem; } .roll .item { height: 11rem; } }