.components.ProjectListItem { padding-bottom: 30px; border-bottom: 2px solid #eee; > .Img { width: 260px; position: relative; overflow: hidden; margin-right: 20px; > view { width: 100%; padding-bottom: 60%; background: #eee; position: relative; overflow: hidden; border-radius: 8px; > image { width: 100%; height: 100%; } } } > .flex-item { > .Name { align-items: center; > .flex-item { margin-right: 10px; > text { display: block; font-size: 28px; font-weight: bold; color: #000; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } > text { font-size: 24px; line-height: 40px; color: #000; &:last-child { color: red; } } } > .Address { display: block; font-size: 24px; color: #666; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } > .Tags { font-size: 0; white-space: nowrap; > text { display: inline-block; vertical-align: middle; font-size: 16px; padding: 0 10px; line-height: 36px; background: #FBAB57; color: #333; margin-right: 10px; } } > .ShareInfo { font-size: 0; white-space: nowrap; margin-top: 10px; > text { display: inline-block; vertical-align: middle; font-size: 24px; color: #333; line-height: 40px; margin-left: 10px; &:first-child { margin-left: 0; } } > .Users { display: inline-block; vertical-align: middle; font-size: 0; white-space: nowrap; margin-left: 30px; > view { display: inline-block; vertical-align: middle; width: 40px; height: 40px; background: #eee; border-radius: 100%; margin-left: -10px; position: relative; &:nth-child(1) { z-index: 1; margin-left: 0; } &:nth-child(2) { z-index: 2; } &:nth-child(3) { z-index: 3; } } } } } }