|
|
@@ -628,7 +628,8 @@
|
|
|
<style lang="scss" scoped>
|
|
|
.matchmaker-message {
|
|
|
min-height: 100vh;
|
|
|
- background: #FFF9F9;
|
|
|
+ /* 顶部淡粉，中部淡紫，越到底部越接近白色 */
|
|
|
+ background: linear-gradient(180deg, #fff1f7 0%, #f6ebff 45%, #fbf7ff 75%, #ffffff 100%);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
@@ -640,8 +641,8 @@
|
|
|
justify-content: space-between;
|
|
|
padding: 25rpx 30rpx;
|
|
|
padding-top: calc(25rpx + env(safe-area-inset-top));
|
|
|
- background: #FFF9F9;
|
|
|
- border-bottom: 1rpx solid #F0F0F0;
|
|
|
+ background: transparent;
|
|
|
+ border-bottom-width: 0;
|
|
|
|
|
|
.back-btn {
|
|
|
width: 70rpx;
|
|
|
@@ -670,62 +671,63 @@
|
|
|
|
|
|
.content {
|
|
|
flex: 1;
|
|
|
- padding: 20rpx 20rpx 120rpx;
|
|
|
+ padding: 20rpx 24rpx 140rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* 消息项 */
|
|
|
.message-item {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 25rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 28rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
|
position: relative;
|
|
|
|
|
|
&.system-notification {
|
|
|
- background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
|
|
|
- border: 2rpx solid #F8BBD0;
|
|
|
-
|
|
|
- &.active {
|
|
|
- border-color: #E91E63;
|
|
|
- }
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ border: 2rpx solid rgba(255, 128, 171, 0.85);
|
|
|
+ box-shadow: 0 10rpx 26rpx rgba(255, 128, 171, 0.28);
|
|
|
+ padding: 26rpx 30rpx;
|
|
|
|
|
|
.message-type {
|
|
|
display: block;
|
|
|
font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 600;
|
|
|
color: #333;
|
|
|
- margin-bottom: 15rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.message-time {
|
|
|
- display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 26rpx;
|
|
|
+ right: 30rpx;
|
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- text-align: right;
|
|
|
+ color: #b88bb0;
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
display: block;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
- line-height: 1.5;
|
|
|
- margin-bottom: 15rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #555;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.message-footer {
|
|
|
display: block;
|
|
|
font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
+ color: #b27aa0;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.match-success {
|
|
|
display: flex;
|
|
|
- background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
|
|
|
- border: 2rpx solid #D1C4E9;
|
|
|
+ background: linear-gradient(135deg, #f8f3ff 0%, #f4e6ff 45%, #ffeaf7 100%);
|
|
|
+ border: 0;
|
|
|
+ box-shadow: 0 8rpx 20rpx rgba(186, 104, 200, 0.25);
|
|
|
|
|
|
.message-icon {
|
|
|
width: 60rpx;
|
|
|
@@ -738,8 +740,8 @@
|
|
|
}
|
|
|
|
|
|
.message-icon.heart {
|
|
|
- background-color: #F8BBD0;
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E91E63"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
|
|
|
+ background-color: #f8d9ef;
|
|
|
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e573ab"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
|
|
|
}
|
|
|
|
|
|
.message-body {
|
|
|
@@ -749,7 +751,7 @@
|
|
|
.message-type {
|
|
|
display: block;
|
|
|
font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
@@ -763,22 +765,25 @@
|
|
|
|
|
|
.message-time {
|
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
+ color: #a691c0;
|
|
|
margin-top: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.user-message {
|
|
|
display: flex;
|
|
|
- background: #FFFFFF;
|
|
|
- border: 2rpx solid #E0E0E0;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 0;
|
|
|
+ box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
|
+
|
|
|
align-items: center;
|
|
|
|
|
|
.message-avatar {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
+ background: linear-gradient(135deg, #b39ddb 0%, #ce93d8 100%);
|
|
|
+
|
|
|
color: #FFFFFF;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
@@ -788,7 +793,7 @@
|
|
|
margin-right: 20rpx;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.message-avatar-img {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
@@ -805,21 +810,21 @@
|
|
|
.message-type {
|
|
|
display: block;
|
|
|
font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 500;
|
|
|
color: #333;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
display: block;
|
|
|
font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
+ color: #777;
|
|
|
line-height: 1.4;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.message-right {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -829,12 +834,12 @@
|
|
|
|
|
|
.message-time {
|
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
+ color: #b0a6c5;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.unread-badge {
|
|
|
- background: #E91E63;
|
|
|
+ background: #ff5c9a;
|
|
|
color: #FFFFFF;
|
|
|
font-size: 20rpx;
|
|
|
padding: 4rpx 10rpx;
|
|
|
@@ -844,7 +849,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/* 加载和空状态 */
|
|
|
.loading-container,
|
|
|
.empty-container {
|
|
|
@@ -864,8 +869,8 @@
|
|
|
|
|
|
.time-label {
|
|
|
display: inline-block;
|
|
|
- background: #FFF3E0;
|
|
|
- color: #FF9800;
|
|
|
+ background: #ffe6f0;
|
|
|
+ color: #e573ab;
|
|
|
font-size: 24rpx;
|
|
|
padding: 8rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
