feat: release

2026-05-21 23:19:20 +08:00
parent 1b7dc31916
commit 0270ba084f
3 changed files with 191 additions and 137 deletions
--- a/components/RatingCard/RatingCard.vue
+++ b/components/RatingCard/RatingCard.vue
@@ -0,0 +1,174 @@
+<template>
+  <view class="rating-card" @tap="handleCardTap">
+    <view class="card-header">
+      <image class="item-avatar" :src="FILE_BASE_URL + item.avatarUrl" mode="aspectFill" />
+      <text class="item-name">{{ item.name }}</text>
+      <view class="rank-tag" v-if="item.rank <= 3">NO.{{ item.rank }}</view>
+      <view class="flex-spacer"></view>
+      <text class="item-score">{{ item.score }}</text>
+    </view>
+    <view class="quote-box" v-if="item.quote">
+      <text class="quote-text">“{{ item.quote }}”</text>
+    </view>
+    <view class="action-group">
+      <view 
+        class="action-item" 
+        v-for="(action, aIndex) in actions" 
+        :key="aIndex" 
+        :class="{ active: item.userAction === action.value }"
+        @tap.stop="handleAction(action.value)"
+      >
+        <view class="action-icon-wrap" :class="'icon-' + action.value">
+          <text class="emoji">{{ action.emoji }}</text>
+        </view>
+        <text class="action-name">{{ action.label }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { FILE_BASE_URL } from "@/utils/constants";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  actions: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['item-click', 'action-click']);
+
+const handleCardTap = () => {
+  emit('item-click', props.item.id);
+};
+
+const handleAction = (actionValue) => {
+  emit('action-click', props.item, actionValue);
+};
+</script>
+
+<style lang="scss" scoped>
+.rating-card {
+  background-color: #fff;
+  border-radius: 32rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.02);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.item-avatar {
+  width: 90rpx;
+  height: 90rpx;
+  border-radius: 20rpx;
+  margin-right: 24rpx;
+  background-color: #eee;
+}
+
+.item-name {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #111;
+  margin-right: 16rpx;
+}
+
+.rank-tag {
+  background-color: #eef1ff;
+  color: #2953ff;
+  font-size: 22rpx;
+  font-weight: bold;
+  padding: 4rpx 16rpx;
+  border-radius: 10rpx;
+}
+
+.flex-spacer {
+  flex: 1;
+}
+
+.item-score {
+  font-size: 48rpx;
+  font-weight: 900;
+  color: #2953ff;
+  font-family: 'DIN Alternate', sans-serif;
+}
+
+.quote-box {
+  background-color: #f9fafe;
+  border-radius: 0 20rpx 20rpx 20rpx;
+  padding: 24rpx 28rpx;
+  margin-bottom: 36rpx;
+  border-left: 6rpx solid #c9d4ff;
+}
+
+.quote-text {
+  font-size: 30rpx;
+  color: #555;
+  font-style: italic;
+  line-height: 1.5;
+}
+
+.action-group {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10rpx;
+}
+
+.action-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.action-icon-wrap {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  background-color: #f5f6fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12rpx;
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.emoji {
+  font-size: 44rpx;
+  filter: grayscale(100%);
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+
+.action-name {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.action-item.active .action-icon-wrap {
+  background-color: #eef1ff;
+  transform: scale(1.15);
+  box-shadow: 0 8rpx 16rpx rgba(41, 83, 255, 0.15);
+}
+
+.action-item.active .emoji {
+  filter: grayscale(0%);
+  opacity: 1;
+}
+
+.action-item.active .action-name {
+  color: #2953ff;
+  font-weight: bold;
+}
+</style>