seecoder-devcloud-frontend/src/components/ProjectCard.vue

<template>
  <div class="project-card" @click="goToProject(id)">
    <div class="project-name">{{name}}</div>
    <div class="project-description">
      {{description}}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    id: Number,
    name: String,
    description: String,
  },
  methods: {
    goToProject(id: number) {
      this.$router.push(`/project/${id}/schedule`);
    },
  },
});
</script>

<style lang="scss" scoped>
.project-card {
  display: inline-block;
  box-shadow: 0 0 1px #BDC3C7;
  border-radius: 5px;
  padding: 10px;
  height: 150px;
  width: 320px;
  margin: 10px auto;
  transition: all .3s ease;
}
.project-card:hover {
  box-shadow: 0 0 5px #BDC3C7;
}
</style>