my_loan/htmldev/wxMini/pages/home/home.wxss

.home-wrapper {
  padding-top: 20rpx;
  background: #FFF;
}

.leaving-a-message {
  position: relative;
  left: 0;
  top: 0;
}

.leaving-a-message image {
  display: block;
  width: 40rpx;
  height: 50rpx;
  background: pink;
}

.leaving-a-message view {
  position: absolute;
  top: -9rpx;
  right: -9rpx;
  z-index: 1;
  min-width: 36rpx;
  min-height: 36rpx;
  border-radius: 18rpx;
  background: #FA5151;
  font-size: 24rpx;
  font-weight: 500;
  color: #FFF;
  line-height: 36rpx;
  text-align: center;
}

.page-section {
  width: 100%;
  margin: 22rpx auto 10rpx;
}

.page-section swiper {
  height: 270rpx;
}

.page-section .swiper-item {
  width: 690rpx;
  height: 100%;
  margin: 0 auto;
  border-radius: 20rpx;
  overflow: hidden;
}

.page-section .swiper-item image {
  display: block;
  width: 100%;
  height: 100%;
  background: pink;
}

.page-section .wx-swiper-dot {
  width: 34px !important;
  height: 6px !important;
  border-radius: 0 !important;
}

.news-section {
  display: flex;
  align-items: center;
  width: 690rpx;
  padding: 0 16rpx;
  height: 50rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  background: linear-gradient(90deg, rgba(255, 202, 138, 1) 0%, rgba(135, 222, 216, 1) 100%);
}

.news-section image {
  width: 140rpx;
  height: 42rpx;
  background: pink;
}

.news-section swiper {
  width: calc(100% - 140rpx);
  height: 50rpx;
  overflow: hidden;
}

.news-section .swiper-item {
  display: block;
  height: 100%;
  line-height: 50rpx;
  font-size: 20rpx;
  color: #8C8C8C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 690rpx;
  margin: 25rpx auto 0;
}

.header-nav .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-nav .nav image {
  width: 70rpx;
  height: 70rpx;
  background: pink;
}

.header-nav .nav text {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: rgba(102, 102, 102, 1);
}

.marketing-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 690rpx;
  margin: 0 auto;
}

.marketing-wrap view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20rpx 0;
}

.marketing-wrap .new-goods,
.marketing-wrap .vr {
  width: 339rpx;
  height: 194rpx;
  background: pink;
}

.marketing-wrap .media {
  width: 100%;
  height: 175rpx;
  background: pink;
}

.excellent-goods-title {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: 690rpx;
  padding-left: 40rpx;
  margin: 46rpx auto;
  line-height: 40rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #1F1F39;
}

.excellent-goods-title:before {
  content: '';
  position: absolute;
  left: 16rpx;
  top: 1rpx;
  width: 14rpx;
  height: 37rpx;
  border-radius: 40rpx;
  background: #91B379;
}

.my-tab-class {
  width: 140rpx;
  height: 56rpx;
  margin-left: 23rpx;
  border-radius: 40rpx;
  background: rgba(145, 179, 121, 0.1);
}

.my-tab-class[data-index="0"] {
  margin-left: 30rpx;
}

.my-tab-class view {
  line-height: 56rpx;
  font-size: 28rpx;
}

.my-tab-active-class {
  background: rgba(145, 179, 121, 1);
}

.van-tabs--line .van-tabs__wrap {
  height: 56rpx !important;
}

.van-tabs__scroll--line {
  height: 56rpx !important;
}

.waterfall {
  display: flex;
  justify-content: space-between;
  width: 690rpx;
  padding: 30rpx 0;
  margin: 0 auto;
}