feat(新组件): 历史收益组件

src/components/historySalary.vue

@@ -0,0 +1,132 @@
+<template>
+  <div style="position: relative; width: 100%">
+    <img :src="bgUrl" alt="" width="100%" style="display: block" />
+    <div
+      style="
+        width: 48%;
+        height: 40%;
+        position: absolute;
+        top: 0;
+        right: 3%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      "
+    >
+      <div
+        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
+      >
+        <div style="color: #fff; font-weight: 600" :style="{ fontSize }">{{ type }}</div>
+      </div>
+    </div>
+    <div style="position: absolute; inset: 0; padding: 3% 4%">
+      <div
+        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
+      >
+        <slot name="content"></slot>
+      </div>
+      <div
+        v-if="type == 'Completed'"
+        class="moreBt"
+        style="position: absolute; top: 40%; right: 4%; color: #bb92ff; font-weight: 500"
+        @click="btMore"
+      >
+        More >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+const progress = new URL('@/assets/images/BDCenter/progress.png', import.meta.url).href
+const completed = new URL('@/assets/images/BDCenter/completed.png', import.meta.url).href
+const progressLong = new URL('@/assets/images/BDCenter/progressLong.png', import.meta.url).href
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+
+  long: {
+    type: Boolean,
+    default: false,
+  },
+
+  date: {
+    type: String,
+    default: '',
+  },
+})
+
+const bgUrl = computed(() => {
+  if (props.type == 'In Progress' && props.long) {
+    return progressLong
+  } else if (props.type == 'In Progress') {
+    return progress
+  } else if (props.type == 'Completed') {
+    return completed
+  }
+})
+
+const emit = defineEmits(['showMore'])
+const btMore = () => {
+  emit('showMore')
+}
+
+const backgroundImage = ref('')
+const fontSize = ref('')
+
+watch(
+  () => props.type,
+  (newType) => {
+    if (newType == 'In Progress') {
+      fontSize.value = '0.9em'
+    }
+    if (newType == 'Completed') {
+      fontSize.value = '1em'
+    }
+    return
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+  font-weight: 700;
+}
+
+.contentTime {
+  font-size: 1.1em;
+}
+
+.contentText {
+  font-size: 1em;
+}
+
+.moreBt {
+  font-size: 1em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+</style>