feat:student-vol

student-vol/src/components/ServiceRecords/RecordItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container">
+    <div class="details" @click="detailsClick">
+      <div class="imgBox">
+        <img :src="data.pic" />
+        <p class="status" :style="{ backgroundColor: bgColorMap[data.status] }">
+          {{ statusMap[data.status] }}
+        </p>
+      </div>
+      <div class="main">
+        <p class="content">{{ data.content }}</p>
+        <p class="bottomTxt">
+          <span style="margin-right: 10px">{{ data.publisher }}</span>
+          <span>{{ formatDate(data.time) }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  name: "recordItem",
+  props: ["data"],
+  data() {
+    return {
+      statusMap: ["审核中", "审核通过", "审核驳回"],
+      bgColorMap: ["#1989fa", "#07c160", "#f6352c"],
+    };
+  },
+  methods: {
+    formatDate(value) {
+      return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
+    },
+    detailsClick() {
+      this.$emit("goDetails", this.data.id);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.details {
+  display: flex;
+  gap: 15px;
+  padding: 15px;
+  background: white;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.imgBox {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.imgBox img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.status {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 2px 8px;
+  color: white;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.content {
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.bottomTxt {
+  color: #999;
+  font-size: 12px;
+}
+</style>