KM-PC-Front-Milestone2/src/views/modules/knowledge/warehouse/components/card.vue

<template>
   <div class="content" :style="{'background': isDocument ? '#406CC4' : '#00C8DC'}"  @click="handleGoAddClick">
    <img :src="isDocument ? documentKnowledge : myKnowledge" alt="">
    <div>{{ isDocument ? '新增知识' : '我的知识' }}</div>
    <div>
      <span>{{ isDocument ? '去新增' : '点击查看' }}</span>
      <img :src="rightGray" alt="">
    </div>
  </div>
</template>

<script>
import documentKnowledge from  '@/assets/img/warehouse/documentKnowledge.png'
import wikiKnowledge from  '@/assets/img/warehouse/wikiKnowledge.png'
import myKnowledge from  '@/assets/img/warehouse/myKnowledge.png'
import rightGray from  '@/assets/img/warehouse/rightGray.png'
export default {
  props: {
    isDocument: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      documentKnowledge,
      wikiKnowledge,
      rightGray,
      myKnowledge
    }
  },
  methods: {
    // 去新增
    handleGoAddClick() {
      if(this.isDocument){
        this.$router.push({
          name: "knowledgeAddUpdate",
          query: {
            type: this.isDocument? '1' : '2'
          }
       })
      }else{
        this.$router.push({ path: 'contentData?type=0&showMy=1' });
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  width:100%;
  height:11.19vw;
  border-radius:0.52vw;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  >img {
    width: 3.4vw;
  }

  >:nth-child(2) {
    font-size: 1.25vw;
    font-weight: 500;
    color: #fff;
    margin: 1.04vw 0 0.41vw;
  }

  >:nth-child(3) {
    display:flex;
    align-items: center;

    span {
      font-size:0.83vw;
      color:#ddd;
      margin-right:0.56vw;
    }

    img {
      width:0.31vw;
      height:0.52vw;
    }
  }
}
</style>