haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compact post detail layout

Browse Source
This commit is contained in:
hajimi
2026-08-03 01:30:54 +08:00
parent a91a11dda1
commit f03d1afe3e
1 changed files with 117 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_community/pages/post_detail.vue
+117 -117
View File
@@ -112,7 +112,7 @@
<view class="detail-unlock-card__ring detail-unlock-card__ring--middle" />
<view class="detail-unlock-card__ring detail-unlock-card__ring--inner" />
<view class="detail-unlock-card__lock">
<u-icon name="lock-fill" size="70" color="#1468f5" />
<u-icon name="lock-fill" size="60" color="#1468f5" />
</view>
</view>
<view class="detail-unlock-card__content">
@@ -991,25 +991,25 @@ const formatCommentTime = (value: any) => {
}
.detail-main {
padding: 24rpx 22rpx 36rpx;
padding: 16rpx 18rpx 24rpx;
}
.detail-post-card {
padding: 30rpx 30rpx 28rpx;
padding: 24rpx 24rpx 22rpx;
border: 1rpx solid #e4e8ef;
border-radius: 24rpx;
border-radius: 20rpx;
background: #ffffff;
box-shadow: 0 12rpx 30rpx rgba(18, 37, 63, 0.045);
box-shadow: 0 8rpx 22rpx rgba(18, 37, 63, 0.04);
&__author {
display: flex;
align-items: center;
gap: 18rpx;
gap: 14rpx;
}
&__avatar {
width: 92rpx;
height: 92rpx;
width: 80rpx;
height: 80rpx;
flex-shrink: 0;
border-radius: 50%;
background: #edf3ff;
@@ -1020,13 +1020,13 @@ const formatCommentTime = (value: any) => {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6rpx;
gap: 4rpx;
}
&__name {
overflow: hidden;
color: #111111;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 650;
white-space: nowrap;
text-overflow: ellipsis;
@@ -1034,7 +1034,7 @@ const formatCommentTime = (value: any) => {
&__date {
color: #707784;
font-size: 24rpx;
font-size: 22rpx;
}
&__author-actions {
@@ -1046,13 +1046,13 @@ const formatCommentTime = (value: any) => {
&__follow,
&__chat {
height: 64rpx;
padding: 0 27rpx;
height: 56rpx;
padding: 0 22rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999rpx;
font-size: 25rpx;
font-size: 23rpx;
white-space: nowrap;
}
@@ -1067,30 +1067,30 @@ const formatCommentTime = (value: any) => {
}
&__chat {
padding: 0 20rpx;
padding: 0 17rpx;
color: #4f5d73;
background: #f1f4f8;
}
&__paid-badge {
width: auto;
margin-top: 28rpx;
padding: 8rpx 14rpx;
margin-top: 20rpx;
padding: 6rpx 12rpx;
display: inline-flex;
align-items: center;
gap: 8rpx;
border-radius: 8rpx;
color: #1468f5;
background: #e8f1ff;
font-size: 23rpx;
font-size: 21rpx;
font-weight: 600;
}
&__title {
display: block;
margin-top: 20rpx;
margin-top: 16rpx;
color: #090a0d;
font-size: 36rpx;
font-size: 32rpx;
font-weight: 750;
line-height: 1.42;
word-break: break-word;
@@ -1098,13 +1098,13 @@ const formatCommentTime = (value: any) => {
&__summary-wrap {
position: relative;
margin-top: 14rpx;
margin-top: 10rpx;
}
&__summary {
color: #30333a;
font-size: 29rpx;
line-height: 1.82;
font-size: 27rpx;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
@@ -1119,7 +1119,7 @@ const formatCommentTime = (value: any) => {
&__expand {
margin-left: 10rpx;
color: #1468f5;
font-size: 27rpx;
font-size: 25rpx;
white-space: nowrap;
&--collapsed {
@@ -1133,10 +1133,10 @@ const formatCommentTime = (value: any) => {
}
&__bilingual {
margin-top: 20rpx;
margin-top: 16rpx;
display: flex;
flex-direction: column;
gap: 24rpx;
gap: 16rpx;
}
&__bilingual-pair {
@@ -1147,16 +1147,16 @@ const formatCommentTime = (value: any) => {
&__bilingual-original {
color: #20242b;
font-size: 29rpx;
font-size: 27rpx;
font-weight: 500;
line-height: 1.72;
line-height: 1.65;
word-break: break-word;
}
&__bilingual-translated {
color: #647187;
font-size: 27rpx;
line-height: 1.72;
font-size: 25rpx;
line-height: 1.65;
word-break: break-word;
}
@@ -1168,18 +1168,18 @@ const formatCommentTime = (value: any) => {
}
.detail-images {
margin-top: 24rpx;
margin-top: 18rpx;
&__grid {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
gap: 10rpx;
}
&__item {
width: calc(33.333% - 8rpx);
height: 202rpx;
border-radius: 14rpx;
width: calc(33.333% - 7rpx);
height: 184rpx;
border-radius: 12rpx;
background: #f0f2f5;
}
@@ -1236,25 +1236,25 @@ const formatCommentTime = (value: any) => {
}
.detail-tags {
margin-top: 20rpx;
margin-top: 16rpx;
display: flex;
flex-wrap: wrap;
gap: 10rpx;
gap: 8rpx;
&__item {
padding: 5rpx 13rpx;
padding: 4rpx 11rpx;
border-radius: 8rpx;
color: #1468f5;
background: #eaf2ff;
font-size: 22rpx;
font-size: 21rpx;
}
}
.detail-unlock-card {
margin-top: 20rpx;
padding: 32rpx 22rpx 22rpx;
margin-top: 16rpx;
padding: 24rpx 18rpx 18rpx;
border: 1rpx solid #c6dcff;
border-radius: 24rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, #edf6ff 0%, #f8fbff 52%, #eaf4ff 100%);
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
overflow: hidden;
@@ -1263,13 +1263,13 @@ const formatCommentTime = (value: any) => {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 22rpx;
gap: 16rpx;
}
&__visual {
position: relative;
width: 184rpx;
height: 194rpx;
width: 160rpx;
height: 170rpx;
flex-shrink: 0;
display: flex;
align-items: center;
@@ -1282,20 +1282,20 @@ const formatCommentTime = (value: any) => {
border: 1rpx solid rgba(20, 104, 245, 0.12);
&--outer {
width: 182rpx;
height: 182rpx;
width: 158rpx;
height: 158rpx;
opacity: 0.55;
}
&--middle {
width: 150rpx;
height: 150rpx;
width: 130rpx;
height: 130rpx;
opacity: 0.7;
}
&--inner {
width: 122rpx;
height: 122rpx;
width: 106rpx;
height: 106rpx;
border-color: rgba(20, 104, 245, 0.06);
background: rgba(20, 104, 245, 0.1);
}
@@ -1304,8 +1304,8 @@ const formatCommentTime = (value: any) => {
&__lock {
position: relative;
z-index: 1;
width: 84rpx;
height: 84rpx;
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -1323,40 +1323,40 @@ const formatCommentTime = (value: any) => {
&__title {
color: #10131a;
font-size: 38rpx;
font-size: 34rpx;
font-weight: 750;
line-height: 1.25;
}
&__points {
margin-top: 16rpx;
margin-top: 12rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
color: #30343b;
font-size: 25rpx;
font-size: 23rpx;
line-height: 1.5;
.is-primary {
color: #1468f5;
font-size: 30rpx;
font-size: 28rpx;
}
}
&__dot {
margin: 0 12rpx;
margin: 0 10rpx;
color: #7c8798;
}
&__link {
height: 32rpx;
margin-top: 10rpx;
margin-top: 8rpx;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4rpx;
color: #1468f5;
font-size: 25rpx;
font-size: 23rpx;
line-height: 1;
> text {
@@ -1373,16 +1373,16 @@ const formatCommentTime = (value: any) => {
&__btn {
width: 100%;
height: 82rpx;
margin-top: 20rpx;
height: 74rpx;
margin-top: 16rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999rpx;
color: #ffffff;
background: linear-gradient(90deg, #176af6 0%, #0878f8 100%);
box-shadow: 0 12rpx 26rpx rgba(20, 104, 245, 0.2);
font-size: 30rpx;
box-shadow: 0 8rpx 20rpx rgba(20, 104, 245, 0.18);
font-size: 28rpx;
font-weight: 700;
&.is-disabled {
@@ -1391,30 +1391,30 @@ const formatCommentTime = (value: any) => {
}
&__notice {
margin-top: 24rpx;
margin-top: 18rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
gap: 8rpx;
color: #7c8798;
font-size: 23rpx;
font-size: 21rpx;
line-height: 1.45;
text-align: center;
}
}
.detail-tools {
margin-top: 16rpx;
margin-top: 12rpx;
display: flex;
justify-content: flex-end;
gap: 12rpx;
&__item {
padding: 11rpx 20rpx;
padding: 8rpx 16rpx;
border-radius: 999rpx;
color: #1468f5;
background: #eaf2ff;
font-size: 23rpx;
font-size: 21rpx;
&--danger {
color: #e54242;
@@ -1424,42 +1424,42 @@ const formatCommentTime = (value: any) => {
}
.detail-discussion {
margin-top: 20rpx;
margin-top: 16rpx;
border: 1rpx solid #e8ebf0;
border-radius: 20rpx;
border-radius: 18rpx;
background: #ffffff;
overflow: hidden;
}
.detail-interaction {
padding: 26rpx 24rpx;
padding: 20rpx 20rpx;
border-bottom: 1rpx solid #edf0f4;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
gap: 16rpx;
}
&__title {
color: #111111;
font-size: 34rpx;
font-size: 30rpx;
font-weight: 720;
}
&__stats {
display: flex;
align-items: center;
gap: 40rpx;
gap: 30rpx;
}
&__stat {
display: flex;
align-items: center;
gap: 8rpx;
gap: 6rpx;
color: #737373;
font-size: 26rpx;
font-size: 24rpx;
.is-active {
color: #1468f5;
@@ -1468,17 +1468,17 @@ const formatCommentTime = (value: any) => {
}
.detail-comments {
padding: 0 24rpx 12rpx;
padding: 0 20rpx 8rpx;
&__empty,
&__error {
padding: 70rpx 0;
padding: 52rpx 0;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
gap: 12rpx;
color: #9aa1ac;
font-size: 25rpx;
font-size: 23rpx;
}
&__retry {
@@ -1486,16 +1486,16 @@ const formatCommentTime = (value: any) => {
}
&__loading {
padding: 26rpx 0;
padding: 20rpx 0;
display: flex;
justify-content: center;
}
}
.comment-item {
padding: 30rpx 0;
padding: 22rpx 0;
display: flex;
gap: 20rpx;
gap: 16rpx;
border-bottom: 1rpx solid #edf0f4;
&:last-of-type {
@@ -1503,8 +1503,8 @@ const formatCommentTime = (value: any) => {
}
&__avatar {
width: 72rpx;
height: 72rpx;
width: 64rpx;
height: 64rpx;
flex-shrink: 0;
border-radius: 50%;
background: #edf2f8;
@@ -1519,62 +1519,62 @@ const formatCommentTime = (value: any) => {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14rpx;
gap: 10rpx;
}
&__name {
color: #17191e;
font-size: 28rpx;
font-size: 26rpx;
font-weight: 680;
}
&__more {
width: 46rpx;
height: 46rpx;
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
color: #818894;
font-size: 34rpx;
font-size: 30rpx;
}
&__content {
margin-top: 10rpx;
margin-top: 6rpx;
display: flex;
align-items: center;
gap: 18rpx;
gap: 14rpx;
}
&__text {
flex: 1;
min-width: 0;
color: #2f333a;
font-size: 29rpx;
line-height: 1.62;
font-size: 27rpx;
line-height: 1.55;
word-break: break-word;
}
&__meta {
margin-top: 14rpx;
margin-top: 10rpx;
display: flex;
align-items: center;
gap: 30rpx;
gap: 24rpx;
}
&__time,
&__like,
&__reply-btn {
color: #9299a4;
font-size: 22rpx;
font-size: 21rpx;
}
&__like {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8rpx;
gap: 6rpx;
color: #737a86;
font-size: 24rpx;
font-size: 22rpx;
.is-active {
color: #1468f5;
@@ -1587,23 +1587,23 @@ const formatCommentTime = (value: any) => {
}
.comment-replies {
margin-top: 16rpx;
padding: 15rpx 17rpx;
border-radius: 12rpx;
margin-top: 12rpx;
padding: 12rpx 14rpx;
border-radius: 10rpx;
background: #f6f8fb;
&__more {
display: block;
margin-top: 9rpx;
margin-top: 7rpx;
color: #8b94a2;
font-size: 21rpx;
font-size: 20rpx;
}
}
.comment-reply {
color: #3b414b;
font-size: 24rpx;
line-height: 1.75;
font-size: 22rpx;
line-height: 1.62;
&__name {
color: #1468f5;
@@ -1621,35 +1621,35 @@ const formatCommentTime = (value: any) => {
.detail-input-bar {
flex-shrink: 0;
padding: 16rpx 22rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
padding: 12rpx 18rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
display: flex;
align-items: center;
gap: 16rpx;
gap: 12rpx;
border-top: 1rpx solid #e9edf2;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 -10rpx 28rpx rgba(30, 42, 58, 0.04);
&__input {
flex: 1;
height: 72rpx;
padding: 0 28rpx;
height: 64rpx;
padding: 0 22rpx;
border-radius: 999rpx;
color: #262a31;
background: #f3f5f7;
font-size: 27rpx;
font-size: 25rpx;
}
&__btn {
min-width: 116rpx;
height: 72rpx;
min-width: 104rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999rpx;
color: #ffffff;
background: linear-gradient(90deg, #176bf4 0%, #0b79f5 100%);
font-size: 28rpx;
font-size: 26rpx;
}
}
</style>