diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 4969d39..1374143 100644
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -140,6 +140,38 @@
+
+
+
+ +
+
+
+
+
+
@@ -173,6 +205,47 @@ const topicData = ref({
]
});
+const showAddPopup = ref(false);
+const newItem = ref({
+ name: '',
+ avatar: ''
+});
+
+const chooseAvatar = () => {
+ uni.chooseImage({
+ count: 1,
+ success: (res) => {
+ newItem.value.avatar = res.tempFilePaths[0];
+ }
+ });
+};
+
+const confirmAddItem = () => {
+ if (!newItem.value.name.trim()) {
+ uni.showToast({ title: '请输入名称', icon: 'none' });
+ return;
+ }
+
+ // 模拟添加
+ const newRatingItem = {
+ id: Date.now(),
+ rank: ratingItems.value.length + 1,
+ name: newItem.value.name,
+ avatar: newItem.value.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${Date.now()}`,
+ score: '0.0',
+ quote: '刚刚加入讨论,快来发表你的看法吧。',
+ userAction: ''
+ };
+
+ ratingItems.value.push(newRatingItem);
+
+ // 重置并关闭
+ newItem.value = { name: '', avatar: '' };
+ showAddPopup.value = false;
+
+ uni.showToast({ title: '添加成功', icon: 'success' });
+};
+
const actions = [
{ label: '离谱', value: 'terrible', emoji: '👎' },
{ label: '一般', value: 'bad', emoji: '😐' },
@@ -717,4 +790,158 @@ onReachBottom(() => {
color: #999;
font-size: 24rpx;
}
+
+/* 悬浮添加按钮 */
+.fab-btn {
+ position: fixed;
+ right: 40rpx;
+ bottom: 160rpx; /* 留出 tabBar 的距离 */
+ width: 100rpx;
+ height: 100rpx;
+ background: linear-gradient(135deg, #4d44f1, #2953ff);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 8rpx 24rpx rgba(41, 83, 255, 0.4);
+ z-index: 99;
+ transition: transform 0.2s;
+}
+
+.fab-btn:active {
+ transform: scale(0.9);
+}
+
+.plus-icon {
+ color: #fff;
+ font-size: 60rpx;
+ font-weight: 300;
+ line-height: 1;
+ margin-top: -8rpx;
+}
+
+/* 弹窗样式 */
+.popup-mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ backdrop-filter: blur(4px);
+}
+
+.popup-content {
+ width: 600rpx;
+ background-color: #fff;
+ border-radius: 32rpx;
+ padding: 40rpx;
+ box-sizing: border-box;
+ animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popIn {
+ from { transform: scale(0.8); opacity: 0; }
+ to { transform: scale(1); opacity: 1; }
+}
+
+.popup-title {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #111;
+ text-align: center;
+ display: block;
+ margin-bottom: 40rpx;
+}
+
+.form-item {
+ margin-bottom: 32rpx;
+}
+
+.form-label {
+ font-size: 28rpx;
+ color: #333;
+ margin-bottom: 16rpx;
+ display: block;
+ font-weight: 500;
+}
+
+.avatar-uploader {
+ width: 120rpx;
+ height: 120rpx;
+ border-radius: 20rpx;
+ background-color: #f5f6fa;
+ border: 2rpx dashed #d1d5db;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+
+.preview-avatar {
+ width: 100%;
+ height: 100%;
+}
+
+.upload-placeholder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.camera-icon {
+ width: 48rpx;
+ height: 48rpx;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E");
+ background-size: cover;
+}
+
+.form-input {
+ height: 80rpx;
+ background-color: #f5f6fa;
+ border-radius: 16rpx;
+ padding: 0 24rpx;
+ font-size: 28rpx;
+ color: #333;
+}
+
+.input-placeholder {
+ color: #aaa;
+}
+
+.popup-actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 48rpx;
+ gap: 24rpx;
+}
+
+.btn-cancel, .btn-confirm {
+ flex: 1;
+ height: 80rpx;
+ line-height: 80rpx;
+ text-align: center;
+ border-radius: 100rpx;
+ font-size: 30rpx;
+ margin: 0;
+}
+
+.btn-cancel::after, .btn-confirm::after {
+ border: none;
+}
+
+.btn-cancel {
+ background-color: #f0f2f7;
+ color: #666;
+}
+
+.btn-confirm {
+ background: linear-gradient(135deg, #4d44f1, #2953ff);
+ color: #fff;
+ font-weight: bold;
+}