diff --git a/public/imgs/login.png b/public/imgs/login.png deleted file mode 100644 index c2dd8b1..0000000 Binary files a/public/imgs/login.png and /dev/null differ diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue index a2eb305..5817329 100644 --- a/src/views/MainPage.vue +++ b/src/views/MainPage.vue @@ -24,19 +24,16 @@
- -
+
{{ item.text }}
- +
@@ -75,7 +72,7 @@ 🎉

融汇通更新

-
+
@@ -105,7 +102,7 @@
- 暂无未读更新信息 + {{ isSystemAnnouncementClick ? '暂无公告信息' : '暂无未读更新信息' }}
@@ -203,6 +200,20 @@ export default { return announcements.value.filter(announcement => !announcement.is_read); }); + // 标记是否通过系统公告按钮打开对话框 + const isSystemAnnouncementClick = ref(false); + + // 计算要显示的公告列表 + const displayAnnouncements = computed(() => { + if (isSystemAnnouncementClick.value) { + // 如果是通过系统公告按钮打开,显示所有公告并按创建时间倒序排列(最新的在前) + return [...announcements.value].sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); + } else { + // 否则只显示未读公告 + return unreadAnnouncements.value; + } + }); + // 计算是否应该显示弹窗 const shouldShowDialog = computed(() => { return unreadAnnouncements.value.length > 0; @@ -290,8 +301,12 @@ export default { // 关闭欢迎弹窗并标记所有未读公告为已读 const closeWelcomeDialog = async () => { - await markAllAnnouncementsAsRead(); + // 只有在非系统公告点击时才标记为已读 + if (!isSystemAnnouncementClick.value) { + await markAllAnnouncementsAsRead(); + } showWelcomeDialog.value = false; + isSystemAnnouncementClick.value = false; // 重置标志 }; // 点击已读按钮 @@ -299,6 +314,13 @@ export default { showWelcomeDialog.value = false; }; + // 处理系统公告点击事件 + const handleSystemAnnouncementClick = () => { + console.log('触发') + isSystemAnnouncementClick.value = true; + showWelcomeDialog.value = true; // 无条件显示对话框 + }; + return { modules: [Autoplay, Pagination], userPoints, @@ -315,6 +337,9 @@ export default { getUserPoints, // 如果需要外部调用可以暴露 closeWelcomeDialog, handleReadClick, + handleSystemAnnouncementClick, + displayAnnouncements, + isSystemAnnouncementClick, }; }, }; diff --git a/src/views/MyLogin.vue b/src/views/MyLogin.vue index 5b5c338..92559a7 100644 --- a/src/views/MyLogin.vue +++ b/src/views/MyLogin.vue @@ -6,10 +6,6 @@

用户登录

欢迎来到炬融圈

- -
- 炬融圈 -
{ font-size: 14px; } -/* 图片容器样式 */ -.image { - width: 375px; /* 固定宽度 */ - height: 287px; /* 固定高度 */ - margin: 0 auto 20px; /* 水平居中,底部留出间距 */ - overflow: hidden; /* 隐藏超出容器的部分 */ - border-radius: 8px; /* 可选:添加圆角增强视觉效果 */ - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 可选:添加轻微阴影 */ -} - -/* 图片填充样式 */ -.image img { - width: 100%; /* 宽度充满容器 */ - height: 100%; /* 高度充满容器 */ - object-fit: contain; - display: block; /* 去除图片底部默认空白 */ -} - -/* 响应式适配(小屏设备自动缩放) */ -@media (max-width: 375px) { - .image { - width: 100%; /* 在小于375px的屏幕上宽度自适应 */ - height: auto; /* 高度按比例自动计算 */ - aspect-ratio: 375 / 287; /* 保持原比例 */ - } -} - .login-form { margin-bottom: 20px; } diff --git a/src/views/Register.vue b/src/views/Register.vue index 80e8c9e..5cf8249 100644 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -114,28 +114,16 @@ - 我已阅读并同意 - - 《用户协议》 - - 和 - - 《隐私政策》 - + + 我已阅读并同意《用户协议》和《隐私政策》 + -
+
- 请先点击查看用户协议和隐私政策 + 请点击查看用户协议和隐私政策
@@ -170,6 +158,64 @@
+ + + +
+ + + +
+

用户协议

+

1. 用户应当遵守法律法规,不得发布违法违规内容。

+

2. 用户对自己发布的内容承担全部责任。

+

3. 平台有权对违规内容进行删除或限制。

+

4. 用户应当保护好自己的账号安全。

+

5. 平台保留修改本协议的权利。

+
+
+ + +
+

隐私政策

+

1. 我们重视用户隐私保护。

+

2. 我们只收集必要的用户信息。

+

3. 用户信息仅用于提供服务。

+

4. 我们不会向第三方泄露用户信息。

+

5. 用户有权查看、修改或删除个人信息。

+
+
+
+
+ +
@@ -187,6 +233,7 @@ import { CreditCard, Location, InfoFilled, + Check, } from '@element-plus/icons-vue'; import Captcha from '@/components/Captcha.vue'; import api from '@/utils/api' @@ -218,9 +265,12 @@ const registerForm = reactive({ // 协议查看状态 const agreementViewed = ref(false); const privacyViewed = ref(false); -const canCheckAgreement = computed( - () => agreementViewed.value && privacyViewed.value -); + +// 协议弹窗相关状态 +const showAgreementDialogVisible = ref(false); +const activeTab = ref('agreement'); +const agreementContent = ref(); +const privacyContent = ref(); // 短信验证码相关状态 const sendingSMS = ref(false); @@ -477,62 +527,45 @@ const handleRegister = async () => { } }; -// 显示用户协议 -const showAgreement = () => { - ElMessageBox.alert( - `
-

用户协议

-

1. 用户应当遵守法律法规,不得发布违法违规内容。

-

2. 用户对自己发布的内容承担全部责任。

-

3. 平台有权对违规内容进行删除或限制。

-

4. 用户应当保护好自己的账号安全。

-

5. 平台保留修改本协议的权利。

-
`, - '用户协议', - { - confirmButtonText: '我已了解', - dangerouslyUseHTMLString: true, - customClass: 'agreement-dialog', - } - ).then(() => { - agreementViewed.value = true; - ElMessage.success('已查看用户协议'); - }); +// 显示协议弹窗 +const showAgreementDialog = () => { + showAgreementDialogVisible.value = true; + activeTab.value = 'agreement'; + // 弹窗打开时默认用户协议已读 + agreementViewed.value = true; }; -// 显示隐私政策 -const showPrivacy = () => { - ElMessageBox.alert( - `
-

隐私政策

-

1. 我们重视用户隐私保护。

-

2. 我们只收集必要的用户信息。

-

3. 用户信息仅用于提供服务。

-

4. 我们不会向第三方泄露用户信息。

-

5. 用户有权查看、修改或删除个人信息。

-
`, - '隐私政策', - { - confirmButtonText: '我已了解', - dangerouslyUseHTMLString: true, - customClass: 'privacy-dialog', - } - ).then(() => { - privacyViewed.value = true; - ElMessage.success('已查看隐私政策'); - }); +// 关闭协议弹窗 +const closeAgreementDialog = () => { + showAgreementDialogVisible.value = false; }; -// 处理协议勾选 -const handleAgreementChange = (value) => { - if (value && !canCheckAgreement.value) { - registerForm.agreement = false; - ElMessage.warning('请先查看用户协议和隐私政策后再勾选'); - return false; +// 确认已阅读协议 +const confirmAgreement = () => { + if (agreementViewed.value && privacyViewed.value) { + registerForm.agreement = true; + showAgreementDialogVisible.value = false; + ElMessage.success('已确认阅读用户协议和隐私政策'); + } else { + ElMessage.warning('请先查看用户协议和隐私政策'); } - return true; }; +// 处理选项卡切换 +const handleTabChange = (tabName) => { + if (tabName === 'agreement') { + // 切换到用户协议时,标记为已读 + agreementViewed.value = true; + } else if (tabName === 'privacy') { + // 切换到隐私政策时,标记为已读 + privacyViewed.value = true; + } +}; + + + + + // 图片上传成功处理 const handleUploadSuccess = (response, field) => { ElMessage.success('图片上传成功'); @@ -888,9 +921,111 @@ onMounted(() => { font-size: 14px; } -:deep(.el-link.viewed) { - color: #67c23a !important; - font-weight: 500; +.agreement-text { + color: #409eff; + cursor: pointer; + text-decoration: underline; +} + +.agreement-text:hover { + color: #66b1ff; +} + +/* 协议弹窗样式 */ +:deep(.agreement-dialog) { + .el-dialog__body { + padding: 20px; + max-height: 60vh; + overflow: hidden; + } +} + +.agreement-content { + height: 100%; +} + +:deep(.agreement-dialog .el-tabs__nav) { + display: flex; + width: 100%; +} + +:deep(.agreement-dialog .el-tabs__item) { + flex: 1; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +.tab-label { + margin-right: 4px; +} + +.agreement-text-content, +.privacy-text-content { + max-height: 400px; + overflow-y: auto; + padding: 20px; + line-height: 1.6; + font-size: 14px; + color: #606266; + border: 1px solid #e4e7ed; + border-radius: 8px; + background-color: #fafafa; +} + +.agreement-text-content h3, +.privacy-text-content h3 { + color: #303133; + margin-bottom: 16px; + font-size: 18px; + font-weight: 600; +} + +.agreement-text-content p, +.privacy-text-content p { + margin-bottom: 12px; +} + +.agreement-text-content strong, +.privacy-text-content strong { + color: #409eff; + font-weight: 600; +} + +.dialog-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; +} + +.check-icon { + color: #67c23a; + font-size: 16px; +} + +/* 滚动条样式 */ +.agreement-text-content::-webkit-scrollbar, +.privacy-text-content::-webkit-scrollbar { + width: 6px; +} + +.agreement-text-content::-webkit-scrollbar-track, +.privacy-text-content::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; +} + +.agreement-text-content::-webkit-scrollbar-thumb, +.privacy-text-content::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 3px; +} + +.agreement-text-content::-webkit-scrollbar-thumb:hover, +.privacy-text-content::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; } :deep(.el-link.viewed:hover) {