138 lines
1.8 KiB
Plaintext
138 lines
1.8 KiB
Plaintext
.detail-page {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scroll-body {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.owner-card {
|
|
margin: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: #F2F2F7;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #C7C7CC;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
|
|
.owner-info {
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.owner-name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
|
|
.owner-expire {
|
|
font-size: 24rpx;
|
|
color: #8E8E93;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0 24rpx;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.grid-item {
|
|
width: calc(50% - 12rpx);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.clothes-card {
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.clothes-img {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 24rpx;
|
|
background: #F2F2F7;
|
|
}
|
|
|
|
.clothes-placeholder {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 24rpx;
|
|
background: #F2F2F7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #C7C7CC;
|
|
}
|
|
|
|
.clothes-placeholder .icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
|
|
.clothes-name {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #1C1C1E;
|
|
margin-top: 12rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.clothes-sub {
|
|
font-size: 22rpx;
|
|
color: #8E8E93;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.share-btn {
|
|
margin: 32rpx 24rpx 0;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: var(--color-primary, #000);
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.share-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.cancel-btn {
|
|
text-align: center;
|
|
padding: 32rpx 0;
|
|
}
|
|
|
|
.footer-space {
|
|
height: 40rpx;
|
|
}
|