From bbd4291df45794a49e3527f6ae76e4ce61a07d66 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 12 二月 2026 11:04:17 +0800
Subject: [PATCH] Merge branch 'dev_new' of http://114.132.189.42:9002/r/product-inventory-APP-before into dev_new
---
src/pages/message.vue | 690 +++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 598 insertions(+), 92 deletions(-)
diff --git a/src/pages/message.vue b/src/pages/message.vue
index a4aae5e..879ea5c 100644
--- a/src/pages/message.vue
+++ b/src/pages/message.vue
@@ -30,7 +30,10 @@
v-for="(item) in messageList"
:key="item.id"
class="message-item"
- :class="{ 'unread': !item.read }">
+ :class="{
+ 'unread': !item.read,
+ [getApprovalTypeClass(item.noticeTitle)]: true
+ }">
<view class="message-content">
<view class="message-header">
<text class="message-title">{{ item.noticeTitle }}</text>
@@ -62,7 +65,8 @@
<script setup>
import { ref, reactive, onMounted } from "vue";
- import { listNotice, confirmMessage } from "@/api/login.js";
+ import { onShow } from "@dcloudio/uni-app";
+ import { listNotice, confirmMessage, getNoticeCount } from "@/api/login.js";
import useUserStore from "@/store/modules/user";
// 鏍囩椤垫暟鎹�
@@ -99,22 +103,191 @@
return `${Y}-${M}-${D} ${h}:${m}`;
};
+ // 鏍规嵁鏍囬鑾峰彇瀹℃壒绫诲瀷瀵瑰簲鐨勬牱寮忕被鍚�
+ const getApprovalTypeClass = (title) => {
+ if (!title) return 'type-default';
+ const titleStr = title.toString().trim();
+
+ if (titleStr.includes('閲囪喘瀹℃壒') || titleStr.includes('閲囪喘')) {
+ return 'type-purchase';
+ } else if (titleStr.includes('鎶ヤ环瀹℃壒') || titleStr.includes('鎶ヤ环')) {
+ return 'type-quotation';
+ } else if (titleStr.includes('鍙戣揣瀹℃壒') || titleStr.includes('鍙戣揣')) {
+ return 'type-shipment';
+ } else if (titleStr.includes('鍏嚭') || titleStr.includes('鍏嚭绠＄悊')) {
+ return 'type-business-trip';
+ } else if (titleStr.includes('璇峰亣') || titleStr.includes('璇峰亣绠＄悊')) {
+ return 'type-leave';
+ } else if (titleStr.includes('鍑哄樊') || titleStr.includes('鍑哄樊绠＄悊')) {
+ return 'type-travel';
+ } else if (titleStr.includes('鎶ラ攢') || titleStr.includes('鎶ラ攢绠＄悊')) {
+ return 'type-reimbursement';
+ } else if (titleStr.includes('鍗遍櫓浣滀笟')) {
+ return 'type-dangerous';
+ }
+
+ return 'type-default';
+ };
+
+ // 鏍规嵁 noticeTitle 鍒ゆ柇璺宠浆椤甸潰
+ const getJumpPathByTitle = (title, appJumpPath) => {
+ if (!title) return null;
+
+ const titleStr = title.toString().trim();
+
+ // 灏濊瘯浠� appJumpPath 涓彁鍙� approveId
+ let approveId = null;
+ if (appJumpPath) {
+ const queryIndex = appJumpPath.indexOf('?');
+ if (queryIndex !== -1) {
+ const queryString = appJumpPath.substring(queryIndex + 1);
+ const params = queryString.split('&');
+ params.forEach(param => {
+ const [key, value] = param.split('=');
+ if (key === 'approveId' && value) {
+ approveId = decodeURIComponent(value);
+ }
+ });
+ }
+ // 濡傛灉娌℃湁鍦ㄦ煡璇㈠弬鏁颁腑鎵惧埌锛屽皾璇曚粠璺緞涓彁鍙栵紙濡� /pages/xxx/xxx/123锛�
+ if (!approveId) {
+ const pathParts = appJumpPath.split('/');
+ const lastPart = pathParts[pathParts.length - 1];
+ if (lastPart && !lastPart.includes('?') && !lastPart.includes('.')) {
+ approveId = lastPart;
+ }
+ }
+ }
+
+ // 鏍规嵁鏍囬鍒ゆ柇瀹℃壒绫诲瀷鍜岃烦杞矾寰�
+ if (titleStr.includes('閲囪喘瀹℃壒') || titleStr.includes('閲囪喘')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '5');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=5`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index5`;
+ } else if (titleStr.includes('鎶ヤ环瀹℃壒') || titleStr.includes('鎶ヤ环')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '6');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=6`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index6`;
+ } else if (titleStr.includes('鍙戣揣瀹℃壒') || titleStr.includes('鍙戣揣')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '7');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=7`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index7`;
+ } else if (titleStr.includes('鍏嚭') || titleStr.includes('鍏嚭绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '1');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=1`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index1`;
+ } else if (titleStr.includes('璇峰亣') || titleStr.includes('璇峰亣绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '2');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=2`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index2`;
+ } else if (titleStr.includes('鍑哄樊') || titleStr.includes('鍑哄樊绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '3');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=3`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index3`;
+ } else if (titleStr.includes('鎶ラ攢') || titleStr.includes('鎶ラ攢绠＄悊')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '4');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=4`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index4`;
+ } else if (titleStr.includes('鍗遍櫓浣滀笟')) {
+ if (approveId) {
+ uni.setStorageSync('approveId', approveId);
+ uni.setStorageSync('approveType', '8');
+ return `/pages/cooperativeOffice/collaborativeApproval/approve?approveType=8`;
+ }
+ return `/pages/cooperativeOffice/collaborativeApproval/index8`;
+ }
+
+ // 濡傛灉閮戒笉鍖归厤锛屽皾璇曚娇鐢ㄥ師濮嬬殑 appJumpPath
+ if (appJumpPath) {
+ let jumpPath = appJumpPath;
+ if (jumpPath.indexOf("/") !== 0) {
+ jumpPath = "/" + jumpPath;
+ }
+ return jumpPath;
+ }
+
+ return null;
+ };
+
+ // 鏇存柊 tab 鏍忚鏍�
+ const updateTabBarBadge = () => {
+ if (userId.value) {
+ getNoticeCount(userId.value)
+ .then(res => {
+ const count = res.data || 0;
+ // 鏇存柊tabbar鐨勮鏍�
+ if (count > 0) {
+ uni.setTabBarBadge({
+ index: 1, // 娑堟伅鏍囩椤电殑绱㈠紩
+ text: count.toString(),
+ });
+ } else {
+ uni.removeTabBarBadge({
+ index: 1,
+ });
+ }
+ })
+ .catch(error => {
+ console.error("鑾峰彇鏈娑堟伅鏁伴噺澶辫触:", error);
+ });
+ }
+ };
+
// 璺宠浆鍒拌鎯呴〉
const goToDetail = item => {
confirmMessage(item.noticeId, 1).then(res => {
if (res.code === 200) {
// uni.showToast({ title: "纭鎴愬姛", icon: "success" });
loadMessages(false);
- if (item.appJumpPath) {
- if (item.appJumpPath.indexOf("/") === 0) {
- uni.navigateTo({
- url: item.appJumpPath,
- });
- } else {
- uni.navigateTo({
- url: "/" + item.appJumpPath,
- });
- }
+
+ // 鏇存柊 tab 鏍忚鏍�
+ updateTabBarBadge();
+
+ // 鏍规嵁 noticeTitle 鍒ゆ柇璺宠浆椤甸潰
+ const jumpPath = getJumpPathByTitle(item.noticeTitle, item.appJumpPath);
+
+ if (jumpPath) {
+ console.log('璺宠浆璺緞:', jumpPath);
+ console.log('娑堟伅鏍囬:', item.noticeTitle);
+ console.log('娑堟伅鏁版嵁:', item);
+
+ uni.navigateTo({
+ url: jumpPath,
+ fail: (err) => {
+ console.error('璺宠浆澶辫触:', err);
+ uni.showToast({
+ title: "璺宠浆澶辫触锛岃妫�鏌ヨ矾寰�",
+ icon: "none",
+ });
+ }
+ });
+ } else {
+ console.warn('鏃犳硶鏍规嵁鏍囬鍒ゆ柇璺宠浆椤甸潰:', item.noticeTitle);
+ uni.showToast({
+ title: "鏃犳硶璺宠浆锛岃鎵嬪姩杩涘叆",
+ icon: "none",
+ });
}
} else {
uni.showToast({ title: "纭澶辫触", icon: "none" });
@@ -203,53 +376,71 @@
onMounted(() => {
getUserId().then(() => {
loadMessages();
+ // 鏇存柊 tab 鏍忚鏍�
+ updateTabBarBadge();
});
+ });
+
+ // 椤甸潰鏄剧ず鏃朵篃鏇存柊瑙掓爣锛堜粠鍏朵粬椤甸潰杩斿洖鏃讹級
+ onShow(() => {
+ if (userId.value) {
+ updateTabBarBadge();
+ }
});
</script>
<style scoped lang="scss">
// 鍏ㄥ眬鍙橀噺
- $primary-color: #2c7be5;
+ $primary-color: #2979ff;
$primary-light: #4a90e2;
$success-color: #4cd964;
$warning-color: #ff9500;
$danger-color: #ff3b30;
- $text-primary: #333333;
- $text-secondary: #666666;
- $text-tertiary: #999999;
- $bg-color: #f5f7fa;
+ $text-primary: #1f2937;
+ $text-secondary: #6b7280;
+ $text-tertiary: #9ca3af;
+ $bg-color: #f9fafb;
$card-bg: #ffffff;
- $border-color: #e8e8e8;
- $shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+ $border-color: #e5e7eb;
+ $shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+ $shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ $shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
.message-page {
min-height: 100vh;
- background-color: $bg-color;
+ background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
padding-bottom: 30rpx;
}
/* 鏍囩椤靛鍣� */
.tabs-container {
background-color: #ffffff;
- margin-bottom: 20rpx;
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+ margin-bottom: 12rpx;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ position: sticky;
+ top: 0;
+ z-index: 10;
}
/* 娑堟伅鍒楄〃 */
.message-list {
- margin: 0 20rpx 20rpx;
+ padding: 0 24rpx 24rpx;
min-height: 600rpx;
height: calc(100vh - 200rpx);
+ box-sizing: border-box;
}
/* 鍔犺浇鐘舵�� */
.loading-state {
background-color: $card-bg;
- border-radius: 16rpx;
+ border-radius: 20rpx;
box-shadow: $shadow-sm;
text-align: center;
padding: 120rpx 0;
- margin-bottom: 20rpx;
+ margin: 0 0 24rpx 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ width: 100%;
+ box-sizing: border-box;
}
.loading-text {
@@ -263,70 +454,331 @@
.message-item {
display: flex;
align-items: flex-start;
- background-color: $card-bg;
- border-radius: 16rpx;
+ background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+ border-radius: 20rpx;
box-shadow: $shadow-sm;
- padding: 24rpx;
- margin-bottom: 20rpx;
- margin-right: 40rpx;
- transition: all 0.3s ease;
+ padding: 32rpx;
+ margin: 0 0 24rpx 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ box-sizing: border-box;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 6rpx;
+ height: 100%;
+ background: linear-gradient(180deg, $primary-color 0%, $primary-light 100%);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
}
- .message-item:hover {
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
- transform: translateY(-2rpx);
+ .message-item:active {
+ transform: scale(0.98);
+ box-shadow: $shadow-md;
}
.message-item.unread {
- border-left: 4rpx solid $primary-color;
+ &::before {
+ opacity: 1;
+ }
+
+ .message-title {
+ font-weight: 700;
+ }
+
+ .message-title::before {
+ content: '';
+ display: inline-block;
+ width: 12rpx;
+ height: 12rpx;
+ border-radius: 50%;
+ margin-right: 12rpx;
+ vertical-align: middle;
+ animation: pulse 2s infinite;
+ }
}
- /* 娑堟伅鍥炬爣 */
- .message-icon {
- margin-right: 20rpx;
- margin-top: 4rpx;
+ // 閲囪喘瀹℃壒 - 钃濊壊
+ .message-item.type-purchase.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%);
+ border: 1px solid rgba(33, 150, 243, 0.2);
+ box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #2196f3 0%, #1976d2 100%);
+ }
+
+ .message-title {
+ color: #1976d2;
+ }
+
+ .message-title::before {
+ background: #1976d2;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
+ box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
+ }
+ }
+
+ // 鎶ヤ环瀹℃壒 - 缁胯壊
+ .message-item.type-quotation.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #e8f5e9 100%);
+ border: 1px solid rgba(76, 175, 80, 0.2);
+ box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
+ }
+
+ .message-title {
+ color: #388e3c;
+ }
+
+ .message-title::before {
+ background: #388e3c;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
+ box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
+ }
+ }
+
+ // 鍙戣揣瀹℃壒 - 姗欒壊
+ .message-item.type-shipment.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #fff3e0 100%);
+ border: 1px solid rgba(255, 152, 0, 0.2);
+ box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
+ }
+
+ .message-title {
+ color: #f57c00;
+ }
+
+ .message-title::before {
+ background: #f57c00;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+ box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
+ }
+ }
+
+ // 鍏嚭绠＄悊 - 绱壊
+ .message-item.type-business-trip.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #f3e5f5 100%);
+ border: 1px solid rgba(156, 39, 176, 0.2);
+ box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #9c27b0 0%, #7b1fa2 100%);
+ }
+
+ .message-title {
+ color: #7b1fa2;
+ }
+
+ .message-title::before {
+ background: #7b1fa2;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
+ box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);
+ }
+ }
+
+ // 璇峰亣绠＄悊 - 闈掕壊
+ .message-item.type-leave.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #e0f2f1 100%);
+ border: 1px solid rgba(0, 150, 136, 0.2);
+ box-shadow: 0 2px 8px rgba(0, 150, 136, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #009688 0%, #00796b 100%);
+ }
+
+ .message-title {
+ color: #00796b;
+ }
+
+ .message-title::before {
+ background: #00796b;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #009688 0%, #00796b 100%);
+ box-shadow: 0 4rpx 12rpx rgba(0, 150, 136, 0.3);
+ }
+ }
+
+ // 鍑哄樊绠＄悊 - 绾㈣壊
+ .message-item.type-travel.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #ffebee 100%);
+ border: 1px solid rgba(244, 67, 54, 0.2);
+ box-shadow: 0 2px 8px rgba(244, 67, 54, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
+ }
+
+ .message-title {
+ color: #d32f2f;
+ }
+
+ .message-title::before {
+ background: #d32f2f;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+ box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
+ }
+ }
+
+ // 鎶ラ攢绠＄悊 - 绮夎壊
+ .message-item.type-reimbursement.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #fce4ec 100%);
+ border: 1px solid rgba(233, 30, 99, 0.2);
+ box-shadow: 0 2px 8px rgba(233, 30, 99, 0.15);
+
+ &::before {
+ background: linear-gradient(180deg, #e91e63 0%, #c2185b 100%);
+ }
+
+ .message-title {
+ color: #c2185b;
+ }
+
+ .message-title::before {
+ background: #c2185b;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
+ box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3);
+ }
+ }
+
+ // 鍗遍櫓浣滀笟 - 娣辩孩鑹�
+ .message-item.type-dangerous.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #ffebee 100%);
+ border: 1px solid rgba(211, 47, 47, 0.3);
+ box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
+
+ &::before {
+ background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
+ }
+
+ .message-title {
+ color: #b71c1c;
+ }
+
+ .message-title::before {
+ background: #b71c1c;
+ }
+
+ .message-view {
+ background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+ box-shadow: 0 4rpx 12rpx rgba(211, 47, 47, 0.4);
+ }
+ }
+
+ // 榛樿绫诲瀷 - 钃濊壊锛堝師鑹诧級
+ .message-item.type-default.unread {
+ background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
+ border: 1px solid rgba(41, 121, 255, 0.15);
+ box-shadow: 0 2px 8px rgba(41, 121, 255, 0.1);
+
+ &::before {
+ background: linear-gradient(180deg, $primary-color 0%, $primary-light 100%);
+ }
+
+ .message-title {
+ color: $primary-color;
+ }
+
+ .message-title::before {
+ background: $primary-color;
+ }
+ }
+
+ @keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.6;
+ transform: scale(1.2);
+ }
}
/* 娑堟伅鍐呭 */
.message-content {
flex: 1;
+ position: relative;
+ z-index: 1;
}
/* 娑堟伅澶撮儴 */
.message-header {
display: flex;
justify-content: space-between;
- align-items: center;
- margin-bottom: 12rpx;
+ align-items: flex-start;
+ margin-bottom: 16rpx;
+ gap: 16rpx;
}
.message-title {
- font-size: 16px;
+ font-size: 32rpx;
font-weight: 600;
color: $text-primary;
flex: 1;
- margin-right: 20rpx;
+ line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
- white-space: nowrap;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
}
.message-time {
- font-size: 12px;
+ font-size: 24rpx;
color: $text-tertiary;
+ white-space: nowrap;
+ flex-shrink: 0;
+ padding: 4rpx 12rpx;
+ background: rgba(0, 0, 0, 0.03);
+ border-radius: 12rpx;
}
/* 娑堟伅鎻忚堪 */
.message-desc {
- font-size: 14px;
+ font-size: 28rpx;
color: $text-secondary;
- line-height: 1.4;
- margin-bottom: 16rpx;
+ line-height: 1.6;
+ margin-bottom: 20rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
+ line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
+ max-height: 2.4em;
}
/* 娑堟伅搴曢儴 */
@@ -334,25 +786,62 @@
display: flex;
justify-content: flex-end;
align-items: center;
+ margin-top: 16rpx;
+ padding-top: 16rpx;
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
}
- .message-creator {
- font-size: 12px;
- color: $text-tertiary;
+ .message-view {
+ padding: 12rpx 32rpx;
+ background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
+ color: #ffffff;
+ border-radius: 24rpx;
+ font-size: 26rpx;
+ font-weight: 500;
+ box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.3);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+ }
+
+ &:active {
+ transform: scale(0.95);
+ box-shadow: 0 2rpx 8rpx rgba(41, 121, 255, 0.4);
+
+ &::before {
+ width: 300rpx;
+ height: 300rpx;
+ }
+ }
}
/* 绌虹姸鎬� */
.empty-state {
- background-color: $card-bg;
- border-radius: 16rpx;
+ background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+ border-radius: 20rpx;
box-shadow: $shadow-sm;
text-align: center;
- padding: 160rpx 0;
- margin: 40rpx 0;
+ padding: 160rpx 40rpx;
+ margin: 60rpx 0 0 0;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ width: 100%;
+ box-sizing: border-box;
}
.empty-text {
- font-size: 14px;
+ font-size: 28rpx;
color: $text-tertiary;
margin-top: 24rpx;
font-weight: 500;
@@ -363,44 +852,21 @@
display: flex;
align-items: center;
justify-content: center;
- padding: 30rpx 0;
- margin-top: 10rpx;
- }
-
- .loading-more-text {
- font-size: 14px;
- color: $text-tertiary;
- margin-left: 10rpx;
- }
-
- /* 鍔犺浇鏇村 */
- .load-more {
- text-align: center;
- padding: 30rpx 0;
- font-size: 14px;
- color: $primary-color;
- font-weight: 500;
+ padding: 40rpx 0;
margin-top: 20rpx;
}
- .load-more-text {
- display: inline-block;
- padding: 10rpx 30rpx;
- background-color: rgba($primary-color, 0.1);
- border-radius: 20rpx;
- transition: all 0.3s ease;
- }
-
- .load-more-text:hover {
- background-color: rgba($primary-color, 0.2);
- transform: translateY(-2rpx);
+ .loading-more-text {
+ font-size: 26rpx;
+ color: $text-tertiary;
+ margin-left: 12rpx;
}
/* 鍔ㄧ敾鏁堟灉 */
@keyframes fadeInUp {
from {
opacity: 0;
- transform: translateY(20rpx);
+ transform: translateY(30rpx);
}
to {
opacity: 1;
@@ -409,7 +875,11 @@
}
.message-item {
- animation: fadeInUp 0.3s ease-out;
+ animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+ }
+
+ .message-item:nth-child(1) {
+ animation-delay: 0.05s;
}
.message-item:nth-child(2) {
@@ -417,18 +887,54 @@
}
.message-item:nth-child(3) {
- animation-delay: 0.2s;
+ animation-delay: 0.15s;
}
.message-item:nth-child(4) {
- animation-delay: 0.3s;
+ animation-delay: 0.2s;
}
.message-item:nth-child(5) {
- animation-delay: 0.4s;
+ animation-delay: 0.25s;
}
- .message-view {
- float: right;
- color: $primary-color;
+
+ /* 鍝嶅簲寮忎紭鍖� */
+ @media (prefers-color-scheme: dark) {
+ .message-page {
+ background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
+ }
+
+ .tabs-container {
+ background-color: #1f2937;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .message-item {
+ background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+ border-color: rgba(255, 255, 255, 0.1);
+ }
+
+ .message-item.unread {
+ background: linear-gradient(135deg, #1f2937 0%, #1e3a5f 100%);
+ border-color: rgba(41, 121, 255, 0.3);
+ }
+
+ .message-title {
+ color: #f3f4f6;
+ }
+
+ .message-desc {
+ color: #d1d5db;
+ }
+
+ .message-time {
+ background: rgba(255, 255, 255, 0.1);
+ color: #9ca3af;
+ }
+
+ .empty-state {
+ background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+ border-color: rgba(255, 255, 255, 0.1);
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3