nova-trip/nova-tourism/components/template2/homestay/index.less

page {
    background-color: #f8f8f8;
    padding-bottom: 120rpx;
  
    .flexd {
      position: fixed;
      z-index: 999;
      width: 100%;
  
      .nav-background {
        background: #f39283;
        height: 40rpx;
      }
  
      .v-search {
        position: relative;
        top: -40rpx;
        // box-shadow: 0px 5rpx 10rpx rgba(0, 0, 0, 0.2);
        background-color: transparent;
      }
    }
  
    .swiper {
      margin: 128rpx 32rpx 24rpx 32rpx;
      width: 687rpx;
      height: 329rpx;
  
      .slide-image {
        width: 687rpx;
        height: 329rpx;
        border-radius: 12rpx;
      }
    }
  
    .rank {
      width: 687rpx;
      height: 375rpx;
      margin: 24rpx 32rpx;
      color: #ffffff;
      border-radius: 16rpx;
      background: url('https://file.ruixiuauto.com/cDBRXuM6Xh/20230809/i8j113103131670.web 拷贝') no-repeat 100% 100%;
  
      .item-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 52rpx 32rpx 32rpx 32rpx;
  
        .title-left {
          display: flex;
          align-items: center;
  
          .text {
            text-indent: 4rpx;
            font-size: 28rpx;
            font-family: MiSans;
            font-weight: 400;
            color: #F8F8F8;
          }
        }
  
        .title-right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f39475;
          border-radius: 36rpx;
  
          >view {
            padding: 16rpx 28rpx;
          }
  
          .right-active {
            background-color: #f8f8f8;
            border-radius: 36rpx;
            color: #2b2b2b;
          }
        }
      }
  
      .content {
        padding: 0 32rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
  
        .card {
          background-color: #f8f8f8;
          // display: flex;
          // flex-direction: column;
          // align-items: center;
          border-radius: 16rpx;
          height: 85rpx;
          width: 298rpx;
          padding: 8rpx;
          margin-bottom: 24rpx;
          display: flex;
          flex-direction: row;
  
          .left {
            position: relative;
  
            .ranking {
              // width: 32rpx;
              // height: 16rpx;
              padding: 3rpx 4rpx 3rpx 3rpx;
              background-color: #f39283;
              border-radius: 0 12rpx 12rpx 0;
              position: absolute;
              left: 0;
              top: 10rpx;
              font-size: 8rpx;
              font-family: MiSans;
              font-weight: bold;
              color: #F8F8F8;
            }
  
            image {
              border-radius: 16rpx;
              width: 66rpx;
              height: 66rpx;
            }
          }
  
          .right {
            height: 70rpx;
            text-indent: 8rpx;
            width: 200rpx;
            >view {
              padding: 0;
            }
  
            .h1 {
              font-size: 16rpx;
              font-weight: bold;
              color: #000;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
  
            .h2 {
              font-size: 14rpx;
              color: #999999;
              display: flex;
              align-items: center;
              justify-content: space-between;
  
              .light {
                font-size: 16rpx;
                font-weight: bold;
                color: #fb7204;
              }
            }
  
            .h3 {
              font-size: 12rpx;
              color: #999999;
              overflow:hidden; //超出的文本隐藏
              text-overflow:ellipsis; //溢出用省略号显示
              white-space:nowrap; //溢出不换行
            }
          }
        }
      }
    }
  
    .navBar {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      margin: 32rpx;
  
      .navItem {
        // display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
        border-bottom: 4rpx solid transparent;
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #363636;
  
        .navItemTitle {
          padding-bottom: 12rpx;
        }
  
        .navItemIcon {
          width: 60rpx;
  
          image {
            width: 50rpx;
            height: 50rpx;
            margin-left: 6rpx;
            // transform: translate(-25rpx -25rpx 0);
          }
        }
      }
  
      .active {
        font-weight: bold;
        border-bottom: 4rpx solid #f39283;
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        color: #363636;
      }
  
    }
  
    .play-list {
      margin: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
  
      .play-item {
        width: 332rpx;
        height: 480rpx;
        background: #FFFFFF;
        box-shadow: 0px 5px 9px 0px rgba(14, 5, 9, 0.05);
        border-radius: 12rpx;
        margin-bottom: 24rpx;
  
        .item-img {
          position: relative;
  
          .item-ranking {
            position: absolute;
            top: 18rpx;
            left: 0;
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #FFFFFF;
            padding: 18rpx 24rpx;
            background-color: #f39283;
            border-radius: 0 32rpx 32rpx 0;
          }
        }
  
        .body {
          padding: 0 16rpx;
          height: 150rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .item-text {
            height: 62rpx;
            font-size: 24rpx;
            font-weight: 300;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
  
          .label {
            display: flex;
            font-size: 15rpx;
            font-weight: 400;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
  
            >view {
              background-color: #fdefed;
              border-radius: 12rpx;
              padding: 5rpx 16rpx;
              margin-right: 12rpx;
              overflow:hidden; //超出的文本隐藏
              text-overflow:ellipsis; //溢出用省略号显示
              white-space:nowrap; //溢出不换行
            }
          }
  
          .detail {
            display: flex;
            align-items: center;
            font-size: 18rpx;
            font-weight: 300;
  
            // padding-bottom: 20rpx;
            .d-light {
              font-weight: bold;
              font-size: 26rpx;
              margin-right: 26rpx;
              color: #FB8737;
            }
          }
        }
      }
    }
  }
  
  ;