page{ background: #f7f7f7; } .notice-detail { width: 100%; height: 100%; box-sizing: border-box; padding: 20rpx; background: #f7f7f7; } .richContent img{ width: 100%!important; height: auto; } .selfContent { width: 100%; /* display: table; */ background: #ffffff; border-radius: 16rpx; box-sizing: border-box; padding: 0 25rpx 38rpx; } .detail-title { font-family: PingFang-SC-Bold; font-size: 48rpx; font-weight: bold; line-height: 68rpx; color: #333333; padding-top: 40rpx; } .detail-subtitle { display: flex; width: 100%; justify-content: space-between; font-size: 22rpx; color: #999999; margin-top:45rpx; } .detail-subtitle .left span:nth-child(1){ margin-right: 32rpx; } .detail-subtitle .right{ display: flex; height: 32rpx; line-height: 32rpx; } .detail-subtitle .right .readNum { /* display: inline-block; */ width: 32rpx; height: 32rpx; margin-right: 10rpx; } .detail-subtitle .right .readNum image{ width: 100%; height: 100%; float:left; object-fit: cover; } .banner { width: 100%; height: 400rpx; margin: 39rpx 0 19rpx 0; } .banner image{ width: 100%; height: 100%; float:left; object-fit: cover; border-radius: 16rpx; overflow: hidden; } .paragraph { font-size: 38rpx; line-height: 58rpx; color: #333333; text-indent: 76rpx; margin-top:22rpx; } .default { border: 1px solid #eaeaea; } .default span { color: #999999; } .active { border: 1px solid #ffab00; } .active span { color: #ffb700; } /* preload start */ .preload { width: 100%; background: #fff; box-sizing: border-box; border-radius: 16rpx; padding: 0 24rpx; overflow: hidden; margin-bottom: 20rpx; } .preload-title { width: 100%; height: 80rpx; border-radius: 8rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; margin-top: 20rpx; } .preload-content { width: 100%; height: 200rpx; border-radius: 8rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; margin-top: 20rpx; } @keyframes loading { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } } /* preload end */ /* 轮播图start */ .altitle { position: absolute; width: 100%; height: 66rpx; background-color: black; margin-top: 237rpx; border-bottom-right-radius: 16rpx; border-bottom-left-radius: 16rpx; opacity: 0.5; font-size: 22rpx; font-weight: 500; color: rgba(255, 255, 255, 1); } .altitle-name { margin: 10rpx 20rpx; } .container { width: 100vw; } .page-body { padding-top: 30rpx; background: #fff; height: 340rpx; } .page-section { width: 100%; margin-bottom: 60rpx; } .page-section_center { display: flex; flex-direction: column; align-items: center; } .page-section:last-child { margin-bottom: 0; } .page-section-gap { box-sizing: border-box; padding: 0 30rpx; } .page-section-spacing { box-sizing: border-box; height: 340rpx; background-color: #fff; } .page-section-title { font-size: 28rpx; color: #999; margin-bottom: 10rpx; padding-left: 30rpx; padding-right: 30rpx; } .page-section-gap .page-section-title { padding-left: 0; padding-right: 0; } .swiper-item { display: block; height: 340rpx; } .swiper-item video { height: 340rpx; width: 100%; } .notice-detail .banner { overflow: hidden; height: 340rpx !important; display: flex; width: 100%; border-radius: 16rpx !important; margin: 0rpx 0rpx 20rpx 0rpx; } .dots { display: flex; justify-content: center; margin-top: -16rpx; z-index: 999; position: relative; } .dots .dot { width: 8rpx; height: 8rpx; border-radius: 8rpx; margin-left: 10rpx; background: #d2d5da; transition: all 0.3s; } .dots .dot.active { width: 24rpx; background: #fff; } .page-section-title { margin-top: 60rpx; position: relative; } swiper { height: 340rpx; box-shadow: 0px 4px 29px 0px rgba(63, 63, 63, 0.1); border-radius: 16rpx; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .video-title { width: 100%; height: 50rpx; line-height: 50rpx; padding-left: 40rpx; color: white; background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0)); background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0)); position: absolute; top: 0; } /* 轮播图end */