2021-02-19 23:33:19 +08:00
|
|
|
.friends-wrap
|
|
|
|
|
.group-header
|
|
|
|
|
margin: 1rem 0
|
|
|
|
|
p
|
|
|
|
|
margin: 0
|
|
|
|
|
p.title
|
|
|
|
|
font-size: 1.125rem
|
|
|
|
|
font-weight: 500
|
|
|
|
|
p.description
|
|
|
|
|
font-size: $fs14
|
|
|
|
|
.group-body
|
|
|
|
|
display: grid
|
|
|
|
|
grid-gap: 4px 4px
|
|
|
|
|
grid-template-columns: repeat(auto-fill, 96px)
|
|
|
|
|
margin-bottom: 2rem
|
|
|
|
|
|
|
|
|
|
.friends-wrap .user-simple
|
|
|
|
|
a
|
|
|
|
|
margin: auto
|
|
|
|
|
color: var(--text-p1)
|
|
|
|
|
font-size: $fs12
|
|
|
|
|
display: flex
|
|
|
|
|
flex-direction: column
|
|
|
|
|
align-items: center
|
|
|
|
|
text-align: center
|
|
|
|
|
line-height: 1.2
|
|
|
|
|
border-radius: 4px
|
|
|
|
|
overflow: hidden
|
|
|
|
|
position: relative
|
|
|
|
|
background: var(--card)
|
|
|
|
|
img
|
|
|
|
|
object-fit: cover
|
|
|
|
|
display: block
|
|
|
|
|
width: 64px
|
|
|
|
|
height: 64px
|
|
|
|
|
.name
|
|
|
|
|
padding-top: 0.5em
|
|
|
|
|
|
2021-02-24 22:52:46 +08:00
|
|
|
|
|
|
|
|
|
2021-02-19 23:33:19 +08:00
|
|
|
// style
|
|
|
|
|
.friends-wrap.round .user-simple
|
|
|
|
|
a
|
|
|
|
|
padding: 0.5rem
|
|
|
|
|
trans1: background
|
|
|
|
|
img
|
|
|
|
|
border-radius: 64px
|
2021-02-24 22:52:46 +08:00
|
|
|
margin-top: 0.5rem
|
|
|
|
|
margin-bottom: 2rem
|
|
|
|
|
.name
|
|
|
|
|
position: absolute
|
|
|
|
|
height: 2rem
|
|
|
|
|
bottom: 0
|
2021-02-19 23:33:19 +08:00
|
|
|
&:hover
|
|
|
|
|
background: var(--hover-block)
|
|
|
|
|
|
|
|
|
|
.friends-wrap.rect .user-simple
|
|
|
|
|
a
|
|
|
|
|
padding: 0
|
|
|
|
|
display: block
|
|
|
|
|
trans1: box-shadow
|
|
|
|
|
img
|
|
|
|
|
width: 96px
|
|
|
|
|
height: 96px
|
|
|
|
|
border-radius: 0
|
|
|
|
|
.name
|
2021-02-24 22:52:46 +08:00
|
|
|
padding: 0 0.5em
|
|
|
|
|
height: 2rem
|
|
|
|
|
display: flex
|
|
|
|
|
justify-content: center
|
|
|
|
|
align-items: center
|
2021-02-19 23:33:19 +08:00
|
|
|
&:hover
|
|
|
|
|
box-shadow: $boxshadow-card-float
|
