epdc-resident-mp-js/subpages/understandJs/pages/noticeDetail/noticeDetail.wxss

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);
}

/* 轮播图end */