.hover-btn { box-shadow: 0 0 10rpx rgba(63, 63, 63, 0.1); } .community-item{ width: 690rpx; height: 300rpx; border-radius: 10rpx; position: relative; margin: 0 auto; margin-top: 28rpx; } .community-item image{ width: 100%; height: 100%; position: absolute; border-radius: 10rpx; } .community-item .cover-image{ width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.1); border-radius: 10rpx; text-align: center; display: flex; flex-direction: column; justify-content: center; } .community-item .cover-image .community-name text { padding: 0 20rpx; font-size: 48rpx; line-height: 70rpx; display: inline-block; height: 70rpx; background: rgba(0, 0,0,0.3); border-radius: 5rpx; overflow: hidden; color: white; text-shadow: 2rpx 2rpx 0rpx #999; } .btn-container { width: 100%; display: flex; align-items: center; justify-content: center; } .community-item .cover-image .community-add{ height: 54rpx; line-height: 54rpx; color:#fff; font-size: 28rpx; text-align: center; background: linear-gradient(to right, #fd3539, #fa695c); border-radius: 27rpx; box-sizing: content-box; padding: 0; margin: 0; margin-top: 32rpx; border: 0; width: 240rpx; } .community-item .cover-image .hover-btn { background: #cb0000; } .community-item .cover-image .community-add image{ width: 100%; height: 100%; }