page { background-color: #f7f7f7; } .classify-tab { width: 100%; height: 90rpx; border-bottom: 1rpx solid #eaeaea; background-color: #fff; padding: 0rpx 20rpx; box-sizing: border-box; } ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; display:none; } .classify-tab .tab-list { width: auto; min-width: 100%; height: 90rpx; display: flex; } .tab-list .item { height: 90rpx; color: #ababab; font-size: 30rpx; margin: 0 20rpx; line-height: 90rpx; flex-shrink: 0; position: relative; width: 150rpx; text-align: center; } .tab-list .item.select { color: #FF4848; font-size: 32rpx; font-weight: bold; } .tab-list .item:first-child { margin-left: 0; } .tab-list .item:last-child { margin-right: 0; } .classify-tab .tab-list .item .select-bar { width: 30rpx; height: 8rpx; border-radius: 4rpx; background: #FF4848; position: absolute; bottom: 0; left: 0; } /* list */ .volunteer-list { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; margin-top: 20rpx; } .volunteer-list .volunteer-item { width: 690rpx; height: 110rpx; display: flex; align-items: center; justify-content: space-between; } .volunteer-list .volunteer-item .volunteer-title { width: 650rpx; font-size: 34rpx; color: #333333; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .volunteer-list .volunteer-item .volunteer-icon { width: 22rpx; height: 22rpx; } .volunteer-list .list-line { width: 690rpx; height: 1px; background-color: #eeeeee; border-radius: 1px; opacity: 0.7; }