新疆马铃薯 1.过程检验下载添加3个模版

gaoluyang

2026-06-02 7c2cdcbc7f5585b96fba76a07b0e4417a09c4d7e

 src/components/FileCard.vue

对比新文件
@@ -0,0 +1,81 @@
<template>
  <div class="file-card">
    <img src="@/assets/img/fileImg/unknowfile.png" alt="" v-if="fileType == 0"/>
    <img src="@/assets/img/fileImg/word.png" alt="" v-else-if="fileType == 1"/>
    <img src="@/assets/img/fileImg/excel.png" alt="" v-else-if="fileType == 2"/>
    <img src="@/assets/img/fileImg/ppt.png" alt="" v-else-if="fileType == 3"/>
    <img src="@/assets/img/fileImg/pdf.png" alt="" v-else-if="fileType == 4"/>
    <img src="@/assets/img/fileImg/zpi.png" alt="" v-else-if="fileType == 5"/>
    <img src="@/assets/img/fileImg/txt.png" alt="" v-else/>
    <div class="word">
      <span
        >{{file.name || '鏈煡'}}</span
      >
      <span>154kb</span>
    </div>
  </div>
</template>

<script>
export default {
  // props: ["fileType", "file"],
  props: {
    fileType: Number,
    file: File,
    default() {
      return {};
    },
  },
  watch: {
    file() {
      console.log(this.file);
    },
  },  
  mounted() {
    console.log(this.file);
    console.log(this.fileType);
  }
};
</script>

<style lang="scss" scoped>
.file-card {
  width: 250px;
  height: 100px;
  background-color: rgb(45, 48, 63);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  &:hover {
    background-color: rgb(33, 36, 54);
  }
  img {
    width: 60px;
    height: 60px;
  }
  .word {
    width: 60%;
    margin-left: 10px;
    overflow: hidden;
    span {
      width: 90%;
      display: inline-block;
      color: #fff;
    }
    span:first-child {
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:last-child {
      font-size: 12px;
      color: rgb(180, 180, 180);
    }
  }
}
</style>