feat: rebuild miniapp reference home
This commit is contained in:
Codex
@@ -1,75 +1,13 @@
|
||||
<view class="ui-rec" wx:if="{{recommendation}}">
|
||||
<view class="ui-rec__header" bindtap="onViewDetail">
|
||||
<ui-avatar
|
||||
src="{{recommendation.avatarUrl}}"
|
||||
size="xl"
|
||||
verified="{{recommendation.verified}}"
|
||||
reviewed="{{recommendation.reviewed}}"
|
||||
default-text="{{recommendation.displayName}}"
|
||||
/>
|
||||
<view class="ui-rec__info">
|
||||
<view class="ui-rec__name-row">
|
||||
<text class="ui-rec__name">{{recommendation.displayName}}</text>
|
||||
<text class="ui-rec__age">{{recommendation.age}}岁</text>
|
||||
</view>
|
||||
<view class="ui-rec__meta">
|
||||
<text wx:if="{{recommendation.heightCm}}">{{recommendation.heightCm}}cm · </text>
|
||||
<text>{{recommendation.regionName}}</text>
|
||||
<text wx:if="{{recommendation.educationCode}}"> · {{recommendation.educationCode}}</text>
|
||||
</view>
|
||||
<view wx:if="{{recommendation.occupationCode}}" class="ui-rec__meta">
|
||||
{{recommendation.occupationCode}}
|
||||
</view>
|
||||
<view wx:if="{{recommendation.maritalStatus || recommendation.hasChildren}}" class="ui-rec__meta">
|
||||
<text wx:if="{{recommendation.maritalStatus}}">{{recommendation.maritalStatus}}</text>
|
||||
<text wx:if="{{recommendation.hasChildren}}"> · 有孩</text>
|
||||
</view>
|
||||
<view wx:if="{{recommendation.photoUrls}}" class="ui-rec__photo-count">
|
||||
{{recommendation.photoUrls.length}} 张生活照
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
wx:if="{{recommendation.recommendationLevel}}"
|
||||
class="ui-rec__level ui-rec__level--{{recommendation.recommendationLevel}}"
|
||||
>
|
||||
{{levelTextMap[recommendation.recommendationLevel]}}
|
||||
</view>
|
||||
<view class="ui-rec" wx:if="{{recommendation}}" bindtap="onViewDetail">
|
||||
<ui-avatar src="{{recommendation.avatarUrl || '/assets/brand/default-avatar.png'}}" size="lg" verified="{{recommendation.verified}}" reviewed="{{recommendation.reviewed}}" default-text="{{recommendation.displayName}}" />
|
||||
<view class="ui-rec__info">
|
||||
<view class="ui-rec__name-row"><text class="ui-rec__name">{{recommendation.displayName || '善缘用户'}}</text><text wx:if="{{recommendation.age}}" class="ui-rec__age">{{recommendation.age}}岁</text><text wx:if="{{recommendation.online}}" class="ui-rec__online">在线</text></view>
|
||||
<view class="ui-rec__meta"><text wx:if="{{recommendation.regionName}}">{{recommendation.regionName}}</text><text wx:if="{{recommendation.heightCm}}"> · {{recommendation.heightCm}}cm</text><text wx:if="{{recommendation.educationCode}}"> · {{recommendation.educationCode}}</text></view>
|
||||
<view wx:if="{{recommendation.occupationCode}}" class="ui-rec__meta">{{recommendation.occupationCode}}</view>
|
||||
<view wx:if="{{recommendation.recommendationReasons && recommendation.recommendationReasons.length}}" class="ui-rec__reasons"><text wx:for="{{recommendation.recommendationReasons}}" wx:key="*this" class="ui-rec__reason">{{item}}</text></view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
wx:if="{{recommendation.recommendationReasons && recommendation.recommendationReasons.length}}"
|
||||
class="ui-rec__reasons"
|
||||
>
|
||||
<view class="ui-rec__reasons-title">为什么推荐给你</view>
|
||||
<view
|
||||
wx:for="{{recommendation.recommendationReasons}}"
|
||||
wx:key="*this"
|
||||
class="ui-rec__reason"
|
||||
>✓ {{item}}</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{recommendation.intro}}" class="ui-rec__intro">
|
||||
{{recommendation.intro}}
|
||||
</view>
|
||||
|
||||
<view wx:if="{{showActions}}" class="ui-rec__actions">
|
||||
<ui-button
|
||||
variant="ghost"
|
||||
size="md"
|
||||
disabled="{{actionLoading}}"
|
||||
class="ui-rec__btn-pass"
|
||||
bindtap="onPass"
|
||||
>不合适</ui-button>
|
||||
<ui-button
|
||||
variant="primary"
|
||||
size="md"
|
||||
loading="{{actionLoading}}"
|
||||
class="ui-rec__btn-like"
|
||||
bindtap="onLike"
|
||||
>喜欢</ui-button>
|
||||
</view>
|
||||
|
||||
<view class="ui-rec__more">
|
||||
<text class="ui-rec__more-text" catchtap="onBlock">拉黑该用户</text>
|
||||
<view class="compact-like" catchtap="onLike"><image src="/assets/brand/logo-mark.png" mode="aspectFit" /></view>
|
||||
<text class="compact-pass" catchtap="onPass">暂不考虑</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,113 +1 @@
|
||||
.ui-rec {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-4);
|
||||
margin-bottom: var(--spacing-3);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.ui-rec__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
.ui-rec__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: var(--spacing-3);
|
||||
}
|
||||
.ui-rec__name-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
.ui-rec__name {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
margin-right: var(--spacing-2);
|
||||
}
|
||||
.ui-rec__age {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.ui-rec__meta {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-normal);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.ui-rec__photo-count {
|
||||
margin-top: var(--spacing-2);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.ui-rec__level {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.ui-rec__level--high {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.ui-rec__level--medium {
|
||||
background: var(--color-info-light);
|
||||
color: var(--color-info);
|
||||
}
|
||||
.ui-rec__level--normal {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.ui-rec__reasons {
|
||||
margin-top: var(--spacing-3);
|
||||
padding: var(--spacing-3);
|
||||
background: var(--color-primary-light);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.ui-rec__reasons-title {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
.ui-rec__reason {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
.ui-rec__intro {
|
||||
margin-top: var(--spacing-3);
|
||||
padding-top: var(--spacing-3);
|
||||
border-top: 1rpx solid var(--color-divider);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-rec__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
margin-top: var(--spacing-4);
|
||||
}
|
||||
.ui-rec__btn-pass {
|
||||
flex: 1;
|
||||
}
|
||||
.ui-rec__btn-like {
|
||||
flex: 2;
|
||||
}
|
||||
.ui-rec__more {
|
||||
margin-top: var(--spacing-3);
|
||||
text-align: center;
|
||||
}
|
||||
.ui-rec__more .ui-rec__more-text {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
}
|
||||
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:#fff;border-bottom:1rpx solid #F0F1F6}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:#222746}.ui-rec__age{font-size:21rpx;color:#545B76}.ui-rec__online{margin-left:auto;font-size:18rpx;color:#39A987}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:20rpx;color:#767C94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}.ui-rec__actions{width:82rpx;display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:#FFF0F5;box-shadow:0 7rpx 18rpx rgba(255,79,145,.18)}.compact-like image{width:44rpx;height:44rpx}.compact-pass{font-size:17rpx;color:#A0A4B4;white-space:nowrap}
|
||||
|
||||
Reference in New Issue
Block a user