shizhong-miniprogram/src/pages/home/index.scss

page {
  background-color: #f3f4f5;
}
.page {
  padding-bottom: 10vh;
  min-height: 100vh;
  .logo {
    margin-left: 32rpx;
    width: 216rpx;
    height: 70rpx;
  }
  .page-title {
    margin: 50rpx 0 0 32rpx;
    width: 580rpx;
    height: 52rpx;
  }
  .page-slogan {
    margin-top: 22rpx;
    margin-left: 32rpx;
    font-size: 32rpx;
    color: #222222;
  }
  .search {
    margin: 34rpx 32rpx 0;
    padding: 0 0 0 24rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(158deg, #ffffff 0%, #f2f9fe 100%);
    border-radius: 106rpx 106rpx 106rpx 106rpx;
    border: 1px solid #ffffff;
    .icon {
      width: 36rpx;
      height: 36rpx;
    }
    .input {
      flex: 1;
      padding: 16rpx;
      line-height: 40rpx;
      font-size: 28rpx;
    }
    .place-input {
      color: #c9cdd4;
    }
  }
  .swiper {
    margin: 36rpx 32rpx 0;
    height: 318rpx;

    .wx-swiper-dots {
      bottom: 60rpx;
      display: flex;
      align-items: center;
    }
    .wx-swiper-dot{
      width: 8rpx;
      height: 8rpx;
    }
    .wx-swiper-dot-active {
      width: 24rpx !important;
      height: 8rpx !important;
      border-radius: 5rpx !important;
    }

    .swiper-item {
      position: relative;
      .banner {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 274rpx;
        border-radius: 32rpx;
      }
      &::after {
        content: '';
        position: absolute;
        bottom: 74rpx;
        left: 40rpx;
        width: 606rpx;
        height: 194rpx;
        background: rgba(0, 43, 88, 0.28);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.65);
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        filter: blur(16.5px);
      }
    }
  }

  .cards {
    margin: 0 32rpx;
    display: grid;
    gap: 28rpx 26rpx;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fill, 164rpx);
    .card {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      .title {
        font-size: 36rpx;
        color: #3795f7;
        line-height: 42rpx;
      }
      .content {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #65686c;
        min-width: 0;
        line-height: 40rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .remark {
    margin: 52rpx 32rpx 0;
    .r-header {
      display: flex;
      align-items: center;
      gap: 16rpx;
      font-size: 36rpx;
      color: #222222;
      font-weight: bold;
      &::before {
        content: '';
        width: 8rpx;
        height: 34rpx;
        background-color: #3795f7;
      }
    }
    .r-content {
      margin-top: 30rpx;
      padding: 32rpx;
      width: 100%;
      box-sizing: border-box;
      height: 272rpx;
      font-size: 32rpx;
      background-color: #fff;
      border-radius: 24rpx;
    }
    .textarea-placeholder {
      color: #babdc1;
    }
    .submit {
      margin: 28rpx auto 0;
      width: 236rpx;
      height: 70rpx;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      line-height: 70rpx;
      background: linear-gradient(90deg, #134df6 36%, #3795f7 100%);
      border-radius: 112rpx 112rpx 112rpx 112rpx;
    }
  }
}