uniapp/rating
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rating

Browse Source
This commit is contained in:
zzc
2026-06-10 00:25:10 +08:00
parent 829f9a07d4
commit d129f1d38e
1 changed files with 174 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
pages/release/index.vue
View File

@@ -16,6 +16,7 @@
<view class="content-wrap"> <view class="content-wrap">
<view class="topic-editor card-block"> <view class="topic-editor card-block">
<view class="editor-badge">创建新话题</view>
<textarea <textarea
v-model="formData.title" v-model="formData.title"
class="topic-input" class="topic-input"
@@ -24,14 +25,7 @@
placeholder-class="topic-placeholder" placeholder-class="topic-placeholder"
auto-height auto-height
/> />
<!-- <textarea <text class="topic-helper">标题越明确，越容易吸引大家参与评分和评论</text>
v-model="formData.description"
class="desc-input"
maxlength="120"
placeholder="简单介绍一下这个评分话题..."
placeholder-class="desc-placeholder"
auto-height
/> -->
</view> </view>
<!-- <view class="cover-card" :class="{ 'has-cover': formData.coverUrl }" @tap="chooseCover"> <!-- <view class="cover-card" :class="{ 'has-cover': formData.coverUrl }" @tap="chooseCover">
@@ -47,20 +41,29 @@
</view> </view>
</view> --> </view> -->
<view class="category-group"> <view class="category-group card-block">
<view <view class="section-meta">
v-for="category in categories" <text class="category-label">话题分类</text>
:key="category.id" <text class="section-helper">选择一个更贴近内容的圈层</text>
class="category-chip" </view>
:class="{ active: formData.categoryId === category.id }" <view class="category-list">
@tap="formData.categoryId = category.id" <view
> v-for="category in categories"
{{ category.title }} :key="category.id"
class="category-chip"
:class="{ active: formData.categoryId === category.id }"
@tap="formData.categoryId = category.id"
>
{{ category.title }}
</view>
</view> </view>
</view> </view>
<view class="section-header"> <view class="section-header">
<text class="section-title">评分对象</text> <view class="section-title-wrap">
<text class="section-title">评分对象</text>
<text class="section-subtitle">至少保留 1 个，最多添加 20 个</text>
</view>
<text class="section-count">{{ participants.length }}/20</text> <text class="section-count">{{ participants.length }}/20</text>
</view> </view>
@@ -106,7 +109,9 @@
</view> </view>
<view class="add-participant" @tap="addParticipant"> <view class="add-participant" @tap="addParticipant">
<text class="add-plus">+</text> <view class="add-plus-wrap">
<text class="add-plus">+</text>
</view>
<text class="add-text">添加评分对象</text> <text class="add-text">添加评分对象</text>
</view> </view>
</view> </view>
@@ -378,9 +383,12 @@ const handleSubmit = async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.page-container { .page-container {
min-height: 100vh; min-height: 100vh;
background: #f8f9fc; /* 整体背景调亮 */ background:
radial-gradient(circle at top, rgba(111, 90, 255, 0.1), transparent 34%),
linear-gradient(180deg, #f7f8ff 0%, #f6f7fb 28%, #ffffff 100%);
padding-bottom: 180rpx; padding-bottom: 180rpx;
box-sizing: border-box; box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
} }
.nav-bar { .nav-bar {
@@ -389,8 +397,9 @@ const handleSubmit = async () => {
left: 0; left: 0;
right: 0; right: 0;
z-index: 100; z-index: 100;
background: rgba(244, 245, 251, 0.96); background: rgba(247, 248, 255, 0.82);
backdrop-filter: blur(18rpx); backdrop-filter: blur(24rpx);
border-bottom: 1rpx solid rgba(133, 142, 194, 0.08);
} }
.nav-content { .nav-content {
@@ -398,7 +407,7 @@ const handleSubmit = async () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24rpx; padding: 0 28rpx;
} }
.nav-side { .nav-side {
@@ -420,61 +429,68 @@ const handleSubmit = async () => {
.nav-title { .nav-title {
font-size: 34rpx; font-size: 34rpx;
font-weight: 700; font-weight: 800;
color: #171717; color: #16161d;
letter-spacing: 1rpx;
} }
.preview-text { .preview-text {
font-size: 28rpx; font-size: 28rpx;
color: #5f63ff; color: #5c43f5;
font-weight: 600;
} }
.content-wrap { .content-wrap {
padding: 24rpx; padding: 28rpx 24rpx 0;
} }
/* 统一的卡片风格 */
.card-block { .card-block {
background: #ffffff; background: #ffffff;
border-radius: 36rpx; /* 增大圆角，与设计图更统一 */ border-radius: 34rpx;
box-shadow: 0 4rpx 20rpx rgba(72, 82, 130, 0.03); /* 柔和的阴影 */ box-shadow: 0 18rpx 40rpx rgba(84, 88, 132, 0.08);
margin-bottom: 32rpx; /* 增加块级间距 */ margin-bottom: 28rpx;
border: 2rpx solid #eef0f7; /* 统一的极淡边框 */ border: 1rpx solid rgba(222, 227, 246, 0.9);
} }
.topic-editor { .topic-editor {
padding: 32rpx; /* 增加内边距 */ padding: 28rpx 28rpx 30rpx;
margin-bottom: 24rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 246, 255, 0.92));
} }
.topic-input, .editor-badge {
.desc-input { display: inline-flex;
width: 100%; align-items: center;
min-height: 52rpx; height: 44rpx;
color: #232323; padding: 0 18rpx;
border-radius: 999rpx;
margin-bottom: 22rpx;
background: rgba(92, 67, 245, 0.08);
color: #5c43f5;
font-size: 22rpx;
font-weight: 700;
} }
.topic-input { .topic-input {
font-size: 44rpx; /* 稍微减小标题字号，显得更精致 */ width: 100%;
font-weight: 800; /* 加粗 */ min-height: 76rpx;
margin-bottom: 16rpx; /* 增加行距 */ color: #191a22;
} font-size: 48rpx;
font-weight: 800;
.desc-input { line-height: 1.3;
font-size: 28rpx;
color: #666;
line-height: 1.5;
} }
.topic-placeholder { .topic-placeholder {
font-size: 44rpx; font-size: 48rpx;
font-weight: 800; font-weight: 800;
color: #c1c2d3; color: #c6cadc;
} }
.desc-placeholder { .topic-helper {
font-size: 28rpx; margin-top: 18rpx;
color: #b8b9c9; display: block;
font-size: 24rpx;
line-height: 1.6;
color: #8a8fa7;
} }
.cover-card { .cover-card {
@@ -518,29 +534,53 @@ const handleSubmit = async () => {
} }
.category-group { .category-group {
padding: 28rpx;
}
.section-meta {
margin-bottom: 20rpx;
}
.category-label {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #1c1d24;
}
.section-helper {
display: block;
margin-top: 8rpx;
font-size: 24rpx;
color: #9196ac;
}
.category-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16rpx; gap: 16rpx;
margin-bottom: 24rpx;
} }
.category-chip { .category-chip {
min-width: 88rpx; min-width: 88rpx;
padding: 14rpx 32rpx; /* 增加内边距 */ padding: 16rpx 30rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: #e9ecf5; /* 背景调浅一些，更接近设计图 */ background: #f3f5fc;
color: #5c6176; /* 字体颜色调浅 */ color: #5f647d;
font-size: 28rpx; /* 字体调大 */ font-size: 28rpx;
font-weight: 500; font-weight: 600;
text-align: center; text-align: center;
transition: all 0.2s ease; border: 1rpx solid transparent;
transition: all 0.22s ease;
} }
.category-chip.active { .category-chip.active {
background: linear-gradient(135deg, #6c4af2, #883cf3); /* 更接近设计图的紫色渐变 */ background: linear-gradient(135deg, #5e43f4, #7d4dff);
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
box-shadow: 0 8rpx 20rpx rgba(108, 74, 242, 0.3); /* 调整阴影颜色 */ border-color: rgba(116, 85, 255, 0.24);
box-shadow: 0 12rpx 26rpx rgba(101, 74, 245, 0.25);
transform: translateY(-2rpx);
} }
.tag-box { .tag-box {
@@ -590,16 +630,27 @@ const handleSubmit = async () => {
.section-header { .section-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24rpx; /* 增加底部间距 */ margin-bottom: 20rpx;
padding: 0 8rpx; /* 标题与内容对齐 */ padding: 0 8rpx;
}
.section-title-wrap {
display: flex;
flex-direction: column;
} }
.section-title { .section-title {
font-size: 34rpx; /* 调整大小 */ font-size: 34rpx;
font-weight: 800; /* 加粗 */ font-weight: 800;
color: #171717; color: #1b1c24;
}
.section-subtitle {
margin-top: 8rpx;
font-size: 24rpx;
color: #9297ad;
} }
.section-count { .section-count {
@@ -607,10 +658,11 @@ const handleSubmit = async () => {
height: 46rpx; height: 46rpx;
line-height: 46rpx; line-height: 46rpx;
text-align: center; text-align: center;
border-radius: 14rpx; border-radius: 999rpx;
background: #e6e9f7; background: rgba(92, 67, 245, 0.1);
color: #5c6176; color: #5c43f5;
font-size: 26rpx; font-size: 26rpx;
font-weight: 700;
} }
.participant-list { .participant-list {
@@ -622,11 +674,15 @@ const handleSubmit = async () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: #fff; background: #fff;
border-radius: 36rpx; /* 更圆润的边角 */ border-radius: 32rpx;
padding: 32rpx 28rpx; /* 增加内边距 */ padding: 28rpx 24rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
border: 2rpx solid #eef0f7; /* 增加细微的描边，更接近设计图质感 */ border: 1rpx solid #edf0fb;
box-shadow: 0 4rpx 20rpx rgba(72, 82, 130, 0.03); /* 阴影调弱 */ box-shadow: 0 12rpx 28rpx rgba(72, 82, 130, 0.05);
}
.participant-card:active {
transform: scale(0.995);
} }
.participant-main { .participant-main {
@@ -637,21 +693,23 @@ const handleSubmit = async () => {
.participant-avatar-wrap { .participant-avatar-wrap {
margin-right: 20rpx; margin-right: 20rpx;
position: relative;
} }
.participant-avatar { .participant-avatar {
width: 92rpx; width: 96rpx;
height: 92rpx; height: 96rpx;
border-radius: 50%; border-radius: 50%;
background: #e8ebf7; background: #eceffc;
box-shadow: 0 8rpx 18rpx rgba(95, 99, 255, 0.12);
} }
.participant-avatar.empty { .participant-avatar.empty {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2rpx dashed #b5bad0; /* 加深虚线颜色 */ border: 2rpx dashed #c8cde1;
background: #f8f9fc; /* 空状态背景色 */ background: linear-gradient(180deg, #fafbff, #f3f5fc);
} }
.camera-small { .camera-small {
@@ -671,64 +729,64 @@ const handleSubmit = async () => {
} }
.participant-name { .participant-name {
height: 42rpx; height: 44rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 700; font-weight: 700;
color: #202020; color: #1c1d24;
margin-bottom: 10rpx;
}
.participant-desc {
height: 38rpx;
font-size: 24rpx;
color: #676c7f;
} }
.participant-placeholder { .participant-placeholder {
color: #b6b9c7; color: #b7bbcd;
} }
.participant-actions { .participant-actions {
width: 56rpx; width: 72rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 16rpx;
margin-left: 16rpx; margin-left: 16rpx;
} }
.drag-icon {
font-size: 34rpx;
color: #b2b4c5;
line-height: 1;
}
.delete-icon-img { .delete-icon-img {
width: 44rpx; width: 40rpx;
height: 44rpx; height: 40rpx;
padding: 10rpx; /* 增加点击热区 */ padding: 12rpx;
border-radius: 50%;
background: #fff5f5;
} }
.add-participant { .add-participant {
height: 120rpx; /* 增加高度 */ height: 120rpx;
border: 2rpx dashed #c0c4d6; /* 边框颜色更明显 */ border: 2rpx dashed #cfd5e8;
border-radius: 36rpx; /* 圆角一致 */ border-radius: 32rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #888d9e; /* 字体颜色微调 */ color: #737993;
gap: 16rpx; /* 间距变大 */ gap: 16rpx;
background: #f8f9fc; /* 添加底色 */ background: rgba(255, 255, 255, 0.72);
}
.add-plus-wrap {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(92, 67, 245, 0.1);
} }
.add-plus { .add-plus {
font-size: 38rpx; font-size: 34rpx;
line-height: 1; line-height: 1;
color: #5c43f5;
} }
.add-text { .add-text {
font-size: 28rpx; font-size: 28rpx;
font-weight: 600;
} }
.settings-card { .settings-card {
@@ -772,19 +830,20 @@ const handleSubmit = async () => {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom)); padding: 24rpx 24rpx calc(28rpx + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(244, 245, 251, 0) 0%, rgba(244, 245, 251, 0.98) 34%); background: linear-gradient(180deg, rgba(247, 248, 255, 0) 0%, rgba(247, 248, 255, 0.94) 26%, rgba(247, 248, 255, 1) 100%);
} }
.submit-btn { .submit-btn {
height: 100rpx; height: 104rpx;
line-height: 100rpx; line-height: 104rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: linear-gradient(135deg, #5c43f5, #7a2cf3); /* 更接近设计图的深紫色 */ background: linear-gradient(135deg, #5c43f5, #6f55ff 58%, #8b66ff);
color: #fff; color: #fff;
font-size: 34rpx; font-size: 34rpx;
font-weight: 700; font-weight: 800;
box-shadow: 0 16rpx 32rpx rgba(100, 60, 240, 0.3); /* 加强底部按钮阴影 */ letter-spacing: 1rpx;
box-shadow: 0 18rpx 36rpx rgba(98, 69, 246, 0.34);
} }
.submit-btn::after { .submit-btn::after {