haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine community publish page

Browse Source
This commit is contained in:
hajimi
2026-08-03 17:37:04 +08:00
parent eb8ab4af75
commit 51f6ef4695
2 changed files with 85 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_community/pages/publish.vue
+84 -59
View File
@@ -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;
}
}
}