epdc-resident-mp-js/pages/heart/heart.wxss

page {
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
  background: #f7f7f7;
}

.container {
  width: 100vw;
}

.page-body {
  padding-top: 30rpx;
  background: #fff;
}

.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;
  padding: 0 20rpx;
}

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

.demo-text-1 {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1aad19;
  color: #fff;
  font-size: 36rpx;
}

.demo-text-1:before {
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.demo-text-2 {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782d7;
  color: #fff;
  font-size: 36rpx;
}

.demo-text-2:before {
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.demo-text-3 {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  color: #353535;
  font-size: 36rpx;
}

.demo-text-3:before {
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  margin-bottom: 30rpx;
}

button:last-child {
  margin-bottom: 0;
}

.page-section-title {
  padding: 0;
}

.swiper-item {
  display: block;
  height: 300rpx;
}

.banner {
  overflow: hidden;
  height: 300rpx;
  display: flex;
  width: 100%;
  border-radius: 16rpx;
}

.dots {
  display: flex;
  justify-content: center;
  padding-bottom: 10rpx;
}

.dots .dot {
  width: 22rpx;
  height: 16rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
  background: #d2d5da;
  transition: all 0.3s;
}

.dots .dot.active {
  width: 40rpx;
  background-image: linear-gradient(90deg, #fc5555 58%, #fc5555 100%);
}

.page-section-title {
  margin-top: 60rpx;
  position: relative;
}

.info {
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}

.page-foot {
  margin-top: 50rpx;
}

swiper {
  height: 320rpx;
}

.tab-view {
  height: 98rpx;
  width: 100wh;
  background-color: #fff;
  margin-top: 30rpx;
}

.wux-tabs__tab {
  font-size: 32rpx !important;
  color: #8393a0 !important;
}

.wux-tabs__tab--current {
  color: #333 !important;
  font-weight: bold;
  font-size: 40rpx !important;
}

.wux-tabs__tab-bar {
  background: #fb3535 !important;
  height: 10rpx !important;
  border-radius: 6rpx !important;
  margin-top: -40rpx !important;
  width: 80% !important;
  margin-left: 20rpx !important;
}

.top {
  position: absolute;
  width: 200rpx;
  height: 80rpx;
  right: 20rpx;
  margin-top: -80rpx;
}

.toptxt {
  color: #8393a0;
  line-height: 80rpx;
}

.imgtop {
  width: 44rpx;
  height: 32rpx;
  float: left;
  margin-top: 28rpx;
  margin-right: 10rpx;
}

.topimg {
  float: left;
  width: 44rpx;
  height: 32rpx;
}

.wux-tabs__tab--horizontal.wux-tabs__tab--scroll {
  padding: 0 20rpx !important;
}