update at 2026-03-15 15:58:14

calendar/src/components/QuoteCard.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { QUOTE_ICON_ASSET } from '@/lib/icon-assets';
+
 const props = defineProps<{
   quote: string;
 }>();
@@ -8,20 +10,62 @@ const props = defineProps<{
 const quoteFontSize = computed(() => {
   const length = props.quote.length;
 
-  if (length > 140) {
-    return '1.75rem';
+  if (length > 120) {
+    return '1.05rem';
   }
 
-  if (length > 100) {
-    return '1.95rem';
+  if (length > 80) {
+    return '1.22rem';
   }
 
-  return '2.2rem';
+  if (length > 48) {
+    return '1.4rem';
+  }
+
+  return '1.6rem';
 });
 </script>
 
 <template>
   <section class="card quote-card">
+    <div class="quote-card__header">
+      <img class="quote-card__icon" :src="QUOTE_ICON_ASSET" alt="" aria-hidden="true" />
+      <span class="quote-card__title">每日鸡汤</span>
+    </div>
     <p class="quote-card__content" :style="{ fontSize: quoteFontSize }">{{ quote }}</p>
   </section>
 </template>
+
+<style scoped>
+.quote-card {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 0.34rem;
+  padding: 0.72rem 1.02rem;
+  background: linear-gradient(180deg, rgba(255, 248, 230, 0.96), rgba(255, 252, 243, 0.94));
+  overflow: hidden;
+}
+
+.quote-card__header {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: #c75d00;
+}
+
+.quote-card__icon {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.quote-card__title {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.quote-card__content {
+  margin: 0;
+  line-height: 1.34;
+  color: #292929;
+}
+</style>