From 5eee2f8e1443ee2a1205516d83f47316c61502e4 Mon Sep 17 00:00:00 2001 From: Hacker-00001 <335942189@qq.com> Date: Wed, 4 Jun 2025 16:04:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E7=95=8C=E9=9D=A2=E5=92=8C?= =?UTF-8?q?=E5=8F=91=E5=B8=83=E5=B8=96=E5=AD=90=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/ChangeInformation.vue | 69 ++++-- .../vue-frontend/src/views/PostPublish.vue | 231 +++++++++++++----- 2 files changed, 221 insertions(+), 79 deletions(-) diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue index ffb806f..2828c2d 100644 --- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue +++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue @@ -15,6 +15,7 @@ 新头像预览 @@ -143,7 +144,7 @@ import { ref, computed, onMounted } from 'vue'; import { useUserStore } from '@/stores/user'; import request from '@/utils/request'; import { ElMessage } from 'element-plus'; -import { useRouter } from 'vue-router' +import { useRouter } from 'vue-router'; const userStore = useUserStore(); const userInfo = computed(() => userStore.userInfo); @@ -384,9 +385,10 @@ onMounted(() => { max-width: 700px; margin: 2rem auto; padding: 2.5rem 2rem 2rem 2rem; - background: #f8f9fa; + background: #fff; border-radius: 12px; - box-shadow: 0 4px 16px rgba(52, 152, 219, 0.08); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + position: relative; } .title { @@ -396,6 +398,8 @@ onMounted(() => { margin-bottom: 2.2rem; letter-spacing: 1px; text-align: center; + border-bottom: 2px solid #ff88aa; + padding-bottom: 10px; } .section-title { @@ -428,13 +432,15 @@ onMounted(() => { } .new-avatar { - border-color: #3498db; + border-color: #ff88aa; } .upload-btn { - display: inline-block; + display: flex; + align-items: center; + gap: 8px; padding: 0.5rem 1.2rem; - background: linear-gradient(90deg, #3498db 60%, #6dd5fa 100%); + background: #ff88aa; color: white; border-radius: 4px; cursor: pointer; @@ -445,7 +451,12 @@ onMounted(() => { } .upload-btn:hover { - background: linear-gradient(90deg, #2980b9 60%, #3498db 100%); + background: #ff6699; +} + +.plus-icon { + font-size: 20px; + font-weight: bold; } .file-input { @@ -483,17 +494,17 @@ onMounted(() => { .input, .textarea, select.input { width: 100%; padding: 0.75rem; - border: 1px solid #bdc3c7; - border-radius: 4px; + border: 1px solid #e0e0e0; + border-radius: 8px; font-size: 0.95rem; transition: border-color 0.3s ease; - background: #fff; + background: #f9f9f9; } .input:focus, .textarea:focus, select.input:focus { outline: none; - border-color: #3498db; - box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.08); + border-color: #ff88aa; + box-shadow: 0 0 0 2px rgba(255, 136, 170, 0.08); } .input-error { @@ -514,10 +525,10 @@ onMounted(() => { .submit-btn { width: 100%; padding: 0.85rem; - background: linear-gradient(90deg, #3498db 60%, #6dd5fa 100%); + background: #ff88aa; color: white; border: none; - border-radius: 4px; + border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; @@ -527,6 +538,34 @@ onMounted(() => { } .submit-btn:hover { - background: linear-gradient(90deg, #2980b9 60%, #3498db 100%); + background: #ff6699; +} + +/* 花瓣动画（与背景呼应） */ +@keyframes fall { + 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } + 100% { transform: translateY(100vh) rotate(360deg); opacity: 0.5; } +} + +.petal { + position: absolute; + width: 10px; + height: 15px; + background: pink; + border-radius: 50% 50% 0 0; + animation: fall 5s linear infinite; + z-index: -1; +} + +/* 初始化花瓣（可在mounted中动态生成，此处简化） */ +.change-info-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + animation: none; /* 避免重复动画 */ } \ No newline at end of file diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue index c658dd7..c68cb50 100644 --- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue +++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue @@ -12,34 +12,49 @@ maxlength="50" placeholder="请输入标题（3-50个字符）" required + class="input-field" />
-
- +
- - -
- 预览 - + +
+ + + + + +
+ 预览 + +
- -
- + +
+
@@ -50,12 +65,13 @@ rows="8" placeholder="请输入帖子内容（支持Markdown语法）" required + class="textarea-field" >
-
@@ -102,9 +118,7 @@ export default { const onFileChange = async (e) => { const file = e.target.files[0] if (!file) return - // 预览 form.value.imagePreview = URL.createObjectURL(file) - // 上传到后端 const fd = new FormData() fd.append('file', file) try { @@ -152,7 +166,6 @@ export default { const res = await request.post('/post', postData) if (res.code === 200) { showResult('success', '帖子发布成功') - console.log(res.data); setTimeout(() => { router.push(`/`) }, 1200) @@ -187,96 +200,186 @@ export default { \ No newline at end of file + + \ No newline at end of file From 81a0768f0a490cd2225864ad0c98e55d5c1bf92c Mon Sep 17 00:00:00 2001 From: Hacker-00001 <335942189@qq.com> Date: Wed, 4 Jun 2025 18:38:27 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=8F=91=E5=B8=83=E5=B8=96=E5=AD=90?= =?UTF-8?q?=E6=97=B6=E5=A6=82=E6=9E=9C=E6=B2=A1=E4=B8=8A=E4=BC=A0=E5=B0=81?= =?UTF-8?q?=E9=9D=A2=E5=A2=9E=E5=8A=A0=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../luojia-island/vue-frontend/src/views/PostPublish.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue index c68cb50..7ef5d5e 100644 --- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue +++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostPublish.vue @@ -146,6 +146,10 @@ export default { showResult('error', '请填写完整信息') return } + if (!form.value.image) { + showResult('error', '请先选择帖子封面') + return + } if (form.value.title.length < 3 || form.value.title.length > 50) { showResult('error', '标题长度需3-50字符') return @@ -200,7 +204,6 @@ export default { - \ No newline at end of file + \ No newline at end of file