.topic { background-color: #fff; margin-bottom: 20rpx; } .supply { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 20rpx; font-size: 32rpx; } .supply::after { content: ""; position: absolute; left: 0; bottom: 0; right: 0; border-bottom: 1px solid #ececec; transform-origin: 0 0; transform: scaleY(0.5); } .supply-l { display: flex; align-items: center; } .supply .avatar { position: relative; width: 80rpx; height: 80rpx; border-radius: 50%; background: #eee; margin-right: 8px; } .supply .avatar::before { content: "δΎ›"; position: absolute; left: 0; top: 0; right: 0; display: block; line-height: 80rpx; text-align: center; color: #e5e5e5; font-weight: bold; z-index: 0; } .supply .avatar image { position: relative; width: 80rpx; height: 80rpx; border-radius: 50%; z-index: 1; } .supply .name { font-weight: bold; } .icon-right { width: 12rpx; height: 22rpx; margin-left: 5px; } .new-comers { position: relative; padding: 10rpx 20rpx 30rpx; } .new-comers-scroll { max-height: 340rpx; } .new-comers-wrap { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; } .new-comers-item { width: 240rpx; box-sizing: border-box; padding: 20rpx; font-size: 28rpx; } .new-comers-item .new-img { width: 200rpx; height: 180rpx; margin-bottom: 20rpx; } .new-comers-item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .new-comers-item .new-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 10rpx; } .new-comers-item .add-cart { width: 44rpx; height: 44rpx; padding: 0; margin: 0; } .new-comers-item .add-cart .img { width: 44rpx; height: 44rpx; display: block; } .new-comers-item .price { color: #ff758c; } .new-comers-item { position: relative; } .new-comers-item .act-end { position: absolute; height: 60rpx; border-radius: 10rpx; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 28rpx; text-align: center; line-height: 60rpx; left: 50%; top: 80rpx; padding: 0 12rpx; transform: translateX(-50%); }