fix: rating

components/AttitudePanel/AttitudePanel.vue

@@ -0,0 +1,168 @@
+<template>
+  <view class="attitude-panel card">
+    <text class="section-title">你的态度</text>
+    <view class="action-group">
+      <view 
+        class="action-item" 
+        v-for="(action, index) in actions" 
+        :key="index"
+        :class="{ active: currentAction === action.label }"
+        @tap="handleAction(action)"
+      >
+        <view class="emoji-wrap">
+          <text class="emoji">{{ action.emoji }}</text>
+        </view>
+        <text class="action-name">{{ action.label }}</text>
+      </view>
+    </view>
+    <view class="quick-comment">
+      <input 
+        class="comment-input" 
+        type="text" 
+        v-model="commentText"
+        placeholder="说点什么吧..." 
+        placeholder-class="input-placeholder" 
+      />
+      <button class="send-btn" @tap="handleSend">发送</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  initialAction: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['action-change', 'send-comment']);
+
+const currentAction = ref(props.initialAction);
+
+// 监听父组件传入的 initialAction 的变化
+watch(() => props.initialAction, (newVal) => {
+  currentAction.value = newVal;
+});
+
+const commentText = ref('');
+
+const actions = [
+  { label: '拉', value: 'terrible', emoji: '👎', score: 2, scoreType:1 },
+  { label: 'NPC', value: 'bad', emoji: '😐', score: 4, scoreType: 2},
+  { label: '人上人', value: 'ok', emoji: '🙂', score: 6, scoreType: 3},
+  { label: '顶级', value: 'good', emoji: '🔥', score: 8, scoreType: 4},
+  { label: '夯', value: 'god', emoji: '👑', score: 10, scoreType: 5 }
+];
+
+const handleAction = (action) => {
+  emit('action-change', action);
+};
+
+const handleSend = () => {
+  if (!commentText.value.trim()) {
+    uni.showToast({
+      title: '请输入评论内容',
+      icon: 'none'
+    });
+    return;
+  }
+  emit('send-comment', {
+    action: currentAction.value,
+    content: commentText.value
+  });
+  commentText.value = ''; // 发送后清空
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+  background-color: #fff;
+  border-radius: 32rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #111;
+  margin-bottom: 32rpx;
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+
+.action-group {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 32rpx;
+}
+
+.action-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: transform 0.2s;
+}
+
+.emoji-wrap {
+  margin-bottom: 12rpx;
+}
+
+.emoji {
+  font-size: 56rpx;
+  filter: grayscale(100%);
+  opacity: 0.6;
+}
+
+.action-name {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.action-item.active .emoji {
+  filter: grayscale(0%);
+  opacity: 1;
+  transform: scale(1.2);
+}
+
+.action-item.active .action-name {
+  color: #2953ff;
+  font-weight: bold;
+}
+
+.quick-comment {
+  display: flex;
+  align-items: center;
+  background-color: #f0f2f7;
+  border-radius: 16rpx;
+  padding: 8rpx 8rpx 8rpx 32rpx;
+}
+
+.comment-input {
+  flex: 1;
+  height: 72rpx;
+  font-size: 28rpx;
+}
+
+.input-placeholder {
+  color: #999;
+}
+
+.send-btn {
+  background-color: #4d44f1;
+  color: #fff;
+  font-size: 26rpx;
+  border-radius: 12rpx;
+  padding: 0 40rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  margin: 0;
+}
+
+.send-btn::after {
+  border: none;
+}
+</style>