From 51f6ef46952e1207d2f3b8e63dace54b88508646 Mon Sep 17 00:00:00 2001
From: hajimi <phperbylyh@163.com>
Date: Mon, 3 Aug 2026 17:37:04 +0800
Subject: [PATCH] style: refine community publish page

---
 docs/业务进度管理.md                          |   1 +
 .../src/packages_community/pages/publish.vue  | 143 ++++++++++--------
 2 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/docs/业务进度管理.md b/docs/业务进度管理.md
index 624f9f11..33dcabad 100644
--- a/docs/业务进度管理.md
+++ b/docs/业务进度管理.md
@@ -22,6 +22,7 @@
 - 发帖页首行新增必选分类下拉选择器，读取后台启用的社区分类并将分类 ID 一同提交；分类名称过长时以省略号隐藏。
 - 标签区域明确支持多选，展示已选数量，并限制最多选择 3 个标签。
 - 发布接口校验分类与标签的启用状态，写入帖子分类并同步更新分类、标签的帖子计数。
+- 发布页按社区主页的白底卡片、浅灰背景和蓝色主色重新统一视觉，覆盖顶部操作栏、分类选择、编辑器、上传区、收费区与标签胶囊。
 
 涉及模块：
 
diff --git a/uniapp/src/packages_community/pages/publish.vue b/uniapp/src/packages_community/pages/publish.vue
index 356e9229..f0a39d50 100644
--- a/uniapp/src/packages_community/pages/publish.vue
+++ b/uniapp/src/packages_community/pages/publish.vue
@@ -28,6 +28,7 @@
                 </view>
                 <textarea v-model="form.content" class="publish-textarea" placeholder="分享你的体育见解..." :maxlength="2000"
                     auto-height />
+                <text class="publish-textarea-count">{{ form.content.length }}/2000</text>
 
                 <view class="publish-images">
                     <view v-for="(img, idx) in form.images.slice(0, form.images.length >= 9 ? 8 : form.images.length)"
@@ -235,7 +236,8 @@ const toggleTag = (id: number) => {
 <style lang="scss" scoped>
 .publish-page {
     min-height: 100vh;
-    background: #fff;
+    color: #172033;
+    background: #f5f7fb;
     display: flex;
     flex-direction: column;
 }
@@ -244,19 +246,20 @@ const toggleTag = (id: number) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16rpx 30rpx;
-    border-bottom: 1rpx solid #f0f0f0;
+    padding: 16rpx 30rpx 18rpx;
+    background: #fff;
+    border-bottom: 1rpx solid #edf0f5;
 
     &__left {
-        font-size: 30rpx;
-        color: #666;
+        font-size: 28rpx;
+        color: #667085;
         width: 120rpx;
     }
 
     &__title {
-        font-size: 32rpx;
-        font-weight: 600;
-        color: #333;
+        font-size: 34rpx;
+        font-weight: 700;
+        color: #172033;
     }
 
     &__right {
@@ -267,15 +270,17 @@ const toggleTag = (id: number) => {
 }
 
 .publish-btn {
-    width: 120rpx;
-    height: 56rpx;
+    width: 112rpx;
+    height: 58rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #185dff;
+    background: linear-gradient(145deg, #2478ff, #0753de);
     color: #fff;
-    border-radius: 12rpx;
-    font-size: 26rpx;
+    border-radius: 14rpx;
+    box-shadow: 0 8rpx 18rpx rgba(20, 104, 245, 0.2);
+    font-size: 25rpx;
+    font-weight: 600;
     white-space: nowrap;
 
     &--disabled {
@@ -288,42 +293,55 @@ const toggleTag = (id: number) => {
 }
 
 .publish-body {
-    padding: 30rpx;
+    margin: 20rpx 24rpx 0;
+    padding: 22rpx 24rpx 26rpx;
+    border: 1rpx solid #edf1f6;
+    border-radius: 20rpx;
+    background: #fff;
+    box-shadow: 0 8rpx 22rpx rgba(29, 53, 87, 0.035);
 }
 
 .publish-textarea {
     width: 100%;
-    min-height: 300rpx;
-    font-size: 30rpx;
-    line-height: 1.7;
-    color: #333;
+    min-height: 260rpx;
+    font-size: 29rpx;
+    line-height: 1.65;
+    color: #263247;
+}
+
+.publish-textarea-count {
+    display: block;
+    margin-top: 8rpx;
+    color: #a5aebd;
+    font-size: 20rpx;
+    text-align: right;
 }
 
 .publish-images {
     display: flex;
     flex-wrap: wrap;
-    gap: 16rpx;
-    margin-top: 24rpx;
+    gap: 14rpx;
+    margin-top: 18rpx;
 
     &__item {
         position: relative;
-        width: 200rpx;
-        height: 200rpx;
+        width: 176rpx;
+        height: 176rpx;
     }
 
     &__img {
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 12rpx;
+        width: 176rpx;
+        height: 176rpx;
+        border-radius: 14rpx;
     }
 
     &__del {
         position: absolute;
         top: -12rpx;
         right: -12rpx;
-        width: 40rpx;
-        height: 40rpx;
-        background: rgba(0, 0, 0, 0.6);
+        width: 38rpx;
+        height: 38rpx;
+        background: rgba(24, 32, 47, 0.68);
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -331,10 +349,11 @@ const toggleTag = (id: number) => {
     }
 
     &__add {
-        width: 200rpx;
-        height: 200rpx;
-        border: 2rpx dashed #ddd;
-        border-radius: 12rpx;
+        width: 176rpx;
+        height: 176rpx;
+        border: 2rpx dashed #cfd7e5;
+        border-radius: 14rpx;
+        background: #fafcff;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -342,9 +361,9 @@ const toggleTag = (id: number) => {
 
     &__more {
         position: relative;
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 12rpx;
+        width: 176rpx;
+        height: 176rpx;
+        border-radius: 14rpx;
         overflow: hidden;
     }
 
@@ -376,8 +395,11 @@ const toggleTag = (id: number) => {
 }
 
 .publish-paid {
-    padding: 24rpx 30rpx;
-    border-top: 16rpx solid #f5f5f5;
+    margin: 20rpx 24rpx 0;
+    padding: 24rpx;
+    border: 1rpx solid #edf1f6;
+    border-radius: 20rpx;
+    background: #fff;
 
     &__row {
         display: flex;
@@ -387,8 +409,8 @@ const toggleTag = (id: number) => {
 
     &__label {
         font-size: 28rpx;
-        font-weight: 600;
-        color: #333;
+        font-weight: 700;
+        color: #253044;
     }
 
     &__price {
@@ -401,7 +423,7 @@ const toggleTag = (id: number) => {
     &__input {
         width: 300rpx;
         height: 64rpx;
-        background: #f5f5f5;
+        background: #f5f8fd;
         border-radius: 12rpx;
         padding: 0 20rpx;
         font-size: 28rpx;
@@ -413,7 +435,7 @@ const toggleTag = (id: number) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 20rpx;
+    margin-bottom: 18rpx;
 }
 
 .publish-section__title-wrap {
@@ -425,7 +447,7 @@ const toggleTag = (id: number) => {
 .publish-section__title {
     font-size: 28rpx;
     font-weight: 600;
-    color: #333;
+    color: #253044;
 }
 
 .publish-section__required,
@@ -454,18 +476,18 @@ const toggleTag = (id: number) => {
 .publish-category-select {
     display: flex;
     align-items: center;
-    height: 76rpx;
-    margin-bottom: 20rpx;
-    padding: 0 20rpx;
-    border: 2rpx solid #e5eaf2;
-    border-radius: 14rpx;
-    background: #fafcff;
+    height: 78rpx;
+    margin-bottom: 18rpx;
+    padding: 0 22rpx;
+    border: 2rpx solid #dfe8f6;
+    border-radius: 16rpx;
+    background: #f8fbff;
 
     &__label {
         display: flex;
         align-items: center;
         gap: 8rpx;
-        color: #303846;
+        color: #253044;
         font-size: 27rpx;
         font-weight: 600;
         white-space: nowrap;
@@ -483,7 +505,7 @@ const toggleTag = (id: number) => {
     &__picker {
         flex: 1;
         min-width: 0;
-        margin-left: 24rpx;
+        margin-left: 26rpx;
     }
 
     &__value {
@@ -510,27 +532,30 @@ const toggleTag = (id: number) => {
 }
 
 .publish-tags {
-    padding: 24rpx 30rpx;
-    border-top: 16rpx solid #f5f5f5;
+    margin: 20rpx 24rpx 36rpx;
+    padding: 24rpx;
+    border: 1rpx solid #edf1f6;
+    border-radius: 20rpx;
+    background: #fff;
 
     &__list {
         display: flex;
         flex-wrap: wrap;
-        gap: 16rpx;
+        gap: 14rpx;
     }
 
     &__item {
-        padding: 10rpx 24rpx;
-        background: #f5f5f5;
-        border-radius: 12rpx;
+        padding: 10rpx 20rpx;
+        background: #f5f7fb;
+        border-radius: 14rpx;
         font-size: 24rpx;
         color: #666;
         border: 2rpx solid transparent;
 
         &--active {
-            background: #e5edff;
-            color: #185dff;
-            border-color: #185dff;
+            background: #edf4ff;
+            color: #1468f5;
+            border-color: #1468f5;
         }
     }
 }