From f70faf03fd8ba6d662567a552978adac90d096b9 Mon Sep 17 00:00:00 2001
From: greenhat616 <i@a632079.me>
Date: Fri, 1 Sep 2023 10:55:00 +0800
Subject: [PATCH] feat: card stamp in poll records

---
 components/review/records/Card.vue      | 15 +++++++++-
 components/review/records/CardStamp.vue | 39 +++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 components/review/records/CardStamp.vue

diff --git a/components/review/records/Card.vue b/components/review/records/Card.vue
index e7e4517..1fdfa0a 100644
--- a/components/review/records/Card.vue
+++ b/components/review/records/Card.vue
@@ -29,8 +29,13 @@ const emit = defineEmits<{
 
 <template>
   <a-card class="review-record-card">
+    <ReviewRecordsCardStamp
+      v-if="props.userPollLog.sentence.poll_status != PollStatus.Open"
+      :poll-status="props.userPollLog.sentence.poll_status"
+    />
     <template #title> #{{ props.userPollLog.poll_id }} </template>
     <ReviewRecordsCardSentence :sentence="sentence" />
+
     <a-divider />
 
     <div class="polled-info-container">
@@ -53,7 +58,7 @@ const emit = defineEmits<{
         投票评论：{{ userPollLog.comment }}
       </p>
     </div>
-    <div class="actions-container flex justify-end mt-5">
+    <div class="actions-container">
       <a-button
         v-show="
           userStore.user?.role === UserRole.Admin ||
@@ -69,9 +74,17 @@ const emit = defineEmits<{
 </template>
 
 <style lang="scss" scoped>
+.review-record-card {
+  @apply relative overflow-hidden;
+}
+
 .polled-info-container {
   p {
     @apply mb-1 mt-0;
   }
 }
+
+.actions-container {
+  @apply flex mt-5 justify-end;
+}
 </style>
diff --git a/components/review/records/CardStamp.vue b/components/review/records/CardStamp.vue
new file mode 100644
index 0000000..959563d
--- /dev/null
+++ b/components/review/records/CardStamp.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { PollStatus } from '@/enums/poll'
+const props = defineProps<{
+  pollStatus: PollStatus
+}>()
+</script>
+<template>
+  <div class="stamp">
+    <div
+      class="icon"
+      :class="{
+        approve: props.pollStatus === PollStatus.Approved,
+        reject: props.pollStatus === PollStatus.Rejected,
+        'need-modify': props.pollStatus === PollStatus.NeedModify
+      }"
+    ></div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.stamp {
+  @apply flex items-center justify-center  absolute -right-10 -top-15;
+
+  .icon {
+    @apply h-38 w-38 z-1 opacity-25;
+  }
+}
+
+.approve {
+  @apply i-solar-check-circle-bold bg-green-500;
+}
+
+.reject {
+  @apply i-solar-close-circle-bold bg-red-500;
+}
+
+.need-modify {
+  @apply i-solar-text-circle-bold bg-yellow-500;
+}
+</style>