feat:重构模块

src/components/DailyCard.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="daily-card record-card-item">
+    <div class="card-item__icon">
+      <slot name="icon"></slot>
+    </div>
+
+    <div class="card-item__body">
+      <span class="card-item__title">
+        {{ props.title }}
+      </span>
+      <div class="card-item__content">
+        <span>{{ props.content }}</span>
+        <slot name="content"></slot>
+      </div>
+    </div>
+
+    <div class="card-item__extra">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  content: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss">
+.daily-card {
+  padding: 0 5px;
+  height: 60px;
+
+  display: grid;
+  grid-template-columns: 40px 1fr 100px;
+  justify-items: center;
+  align-items: center;
+  gap: 5px;
+
+  .card-item__icon {
+    .iconfont {
+      font-size: 28px;
+    }
+
+    .el-avatar {
+      background: #009FA8;
+      font-size: 1.2rem;
+    }
+  }
+
+  .card-item__body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    justify-self: left;
+
+    .card-item__title {
+      font-size: 1rem;
+      font-weight: bold;
+    }
+
+    .card-item__content {
+      display: flex;
+      gap: 5px;
+
+      font-size: 0.9rem;
+      color: #A9A9A9;
+    }
+  }
+
+  .card-item__extra {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+
+    justify-self: flex-end;
+  }
+
+  .card-item__extra span:nth-child(1) {
+    font-size: 1rem;
+  }
+
+  .card-item__extra span:nth-child(2) {
+    font-size: 0.9rem;
+    color: #A9A9A9;
+  }
+
+  hr {
+    height: 1px;
+    background-color: #cccccc;
+    border: none;
+  }
+}
+
+.daily-card:hover {
+  cursor: pointer;
+}
+</style>