.body-background{ background: { color:#F5F5F6; }; height:100vh; } .app-wallpaper{ padding:16rpx 26rpx; .room-list,.good-list{ margin-bottom:16rpx; border-radius:10rpx; padding:0 24rpx; background-color:#fff; .item{ &:last-of-type{ border-bottom:none; } border-bottom:2rpx solid #EEEEEE; padding:24rpx 0; .image{ flex: 0 0 176rpx; } .info{ display: flex; flex-direction: column; justify-content: space-between; padding-left:14rpx; .top{ .title{ max-width: 280rpx; } justify-content: space-between; } .center{ } .bottom{ justify-content: space-between; align-items:center; .tags{ .tag+.tag{ margin-left:8rpx; } .tag{ padding:10rpx 12rpx; background-color: rgba(175, 181, 190, .1); border-radius: 8rpx; } } .price{ flex:0 0 150rpx; justify-content: flex-end; } } } } } .project-list{ margin-bottom:16rpx; border-radius:10rpx; padding:0 20rpx; background-color:#fff; .item { &:last-of-type { border-bottom: none; } border-bottom: 2rpx solid #EEEEEE; padding: 24rpx 0; .green{ background: linear-gradient(180deg, rgba(14, 175, 78, .1) 0%, rgba(23,138,242,0) 100%); } .blue{ background: linear-gradient(180deg, rgba(23, 138, 242, .1) 0%, rgba(23,138,242,0) 100%); } .orange{ background: linear-gradient(180deg, rgba(255, 149, 69, .1) 0%, rgba(23,138,242,0) 100%); } .red{ background: linear-gradient(180deg, rgba(255, 100, 82, .1) 0%, rgba(23,138,242,0) 100%); } .title{ border-bottom:2rpx solid #eee; } .title-item{ &.green{ background: rgba(14, 175, 78, 1); } &.blue{ background:rgba(23, 138, 242, 1); } &.orange{ background: rgba(255, 149, 69, 1); } &.red{ background: rgba(255, 100, 82, 1); } padding:4rpx 20rpx; transform: skewX(-15deg); border-radius: 8rpx; .title-content{ transform: skewX(15deg); } } } } .big-title{ margin-top:48rpx; margin-bottom:22rpx; } }