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

style: refine community post unlock card

Browse Source
This commit is contained in:
hajimi
2026-08-03 00:23:05 +08:00
parent 05791bbdad
commit 01b582ab60
1 changed files with 51 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_community/pages/post_detail.vue
+51 -35
View File
@@ -109,9 +109,10 @@
<view class="detail-unlock-card__main">
<view class="detail-unlock-card__visual">
<view class="detail-unlock-card__ring detail-unlock-card__ring--outer" />
<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" size="62" color="#1468f5" />
<u-icon name="lock-fill" size="70" color="#1468f5" />
</view>
</view>
<view class="detail-unlock-card__content">
@@ -123,7 +124,10 @@
<text>当前余额 </text>
<text class="is-primary">{{ userPointsText }}</text>
</view>
<text class="detail-unlock-card__link" @tap="openPoints">积分明细 ›</text>
<view class="detail-unlock-card__link" @tap="openPoints">
<text>积分规则</text>
<u-icon name="arrow-right" size="24" color="#1468f5" />
</view>
<view class="detail-unlock-card__btn" :class="{ 'is-disabled': purchasing }"
@tap="handlePurchase">
<text>{{ purchasing ? '解锁中' : '确认解锁' }}</text>
@@ -1244,22 +1248,24 @@ const formatCommentTime = (value: any) => {
.detail-unlock-card {
margin-top: 20rpx;
padding: 36rpx 28rpx 24rpx;
border: 1rpx solid #c9ddff;
padding: 32rpx 22rpx 22rpx;
border: 1rpx solid #c6dcff;
border-radius: 24rpx;
background: linear-gradient(135deg, #f1f7ff 0%, #e8f2ff 56%, #f7fbff 100%);
background: linear-gradient(90deg, #edf6ff 0%, #f8fbff 52%, #eaf4ff 100%);
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
overflow: hidden;
&__main {
display: flex;
align-items: center;
gap: 20rpx;
justify-content: flex-start;
gap: 22rpx;
}
&__visual {
position: relative;
width: 188rpx;
height: 188rpx;
width: 184rpx;
height: 194rpx;
flex-shrink: 0;
display: flex;
align-items: center;
@@ -1272,32 +1278,39 @@ const formatCommentTime = (value: any) => {
border: 1rpx solid rgba(20, 104, 245, 0.12);
&--outer {
width: 184rpx;
height: 184rpx;
width: 182rpx;
height: 182rpx;
opacity: 0.55;
}
&--middle {
width: 150rpx;
height: 150rpx;
opacity: 0.7;
}
&--inner {
width: 136rpx;
height: 136rpx;
background: rgba(20, 104, 245, 0.08);
width: 122rpx;
height: 122rpx;
border-color: rgba(20, 104, 245, 0.06);
background: rgba(20, 104, 245, 0.1);
}
}
&__lock {
position: relative;
z-index: 1;
width: 90rpx;
height: 90rpx;
width: 84rpx;
height: 84rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10rpx 30rpx rgba(20, 104, 245, 0.12);
}
&__content {
flex: 1;
width: 100%;
max-width: 370rpx;
min-width: 0;
display: flex;
flex-direction: column;
@@ -1306,18 +1319,19 @@ const formatCommentTime = (value: any) => {
&__title {
color: #10131a;
font-size: 36rpx;
font-weight: 760;
font-size: 38rpx;
font-weight: 750;
line-height: 1.25;
}
&__points {
margin-top: 15rpx;
margin-top: 16rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
color: #39414f;
color: #30343b;
font-size: 25rpx;
line-height: 1.6;
line-height: 1.5;
.is-primary {
color: #1468f5;
@@ -1331,24 +1345,27 @@ const formatCommentTime = (value: any) => {
}
&__link {
margin-top: 9rpx;
margin-top: 10rpx;
display: inline-flex;
align-items: center;
gap: 4rpx;
color: #1468f5;
font-size: 25rpx;
}
&__btn {
width: 100%;
height: 78rpx;
margin-top: 18rpx;
height: 82rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999rpx;
color: #ffffff;
background: linear-gradient(90deg, #176bf4 0%, #0b79f5 100%);
box-shadow: 0 12rpx 24rpx rgba(20, 104, 245, 0.2);
font-size: 29rpx;
font-weight: 650;
background: linear-gradient(90deg, #176af6 0%, #0878f8 100%);
box-shadow: 0 12rpx 26rpx rgba(20, 104, 245, 0.2);
font-size: 30rpx;
font-weight: 700;
&.is-disabled {
opacity: 0.58;
@@ -1356,15 +1373,14 @@ const formatCommentTime = (value: any) => {
}
&__notice {
margin-top: 22rpx;
padding-top: 18rpx;
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 9rpx;
border-top: 1rpx solid rgba(105, 135, 181, 0.15);
gap: 10rpx;
color: #7c8798;
font-size: 22rpx;
font-size: 23rpx;
line-height: 1.45;
text-align: center;
}
}