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

<template>
  <div class="albumMain" @click="lookDetail">
    <div class="topImg">
      <img :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+item.cover"/>
      <div class="btnBoxTop">
        <div class="albumDel" @click.stop="delData(item.pkId)" v-if="item.actionFlag.indexOf('delete')>-1">
          <img src="../../../../image/album/del.png" class="btnsty"/>
          删除
        </div>
        <div class="albumDel" @click.stop="editeData(item.pkId)" v-if="item.actionFlag.indexOf('edit')>-1">
          <img src="../../../../image/album/edit.png"/>
          编辑
        </div>
      </div>
    </div>
    <div class="nameBox">
      {{item.name}}
    </div>
    <div class="classBox">
      <div v-if="item.versionStateName!=''&&item.versionStateName!=null&&item.versionState!=2" :class="'stateBox'+item.versionState">{{item.versionStateName}}</div>
      {{ item.categoryName.split('|')[0] }}
    </div>
    <div class="classUser">
      <img class="header" :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+item.ownerPhoto"/>
      {{item.ownerName}}
      <div class="btnBox">
        <div class="btn">
          <img src="../../../../image/album/look.png"/>
          {{item.views}}
        </div>
        <div class="btn">
          <img src="../../../../image/album/file.png"/>
          {{item.knowledgeTotal}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatedMenu from '../../../../image/FloatedMenu.png'
export default {
  props: {
    item: {
      type: Object,
      default: []
    }
  },
  computed: {
 
  },
  data() {
    return {
      FloatedMenu
    }
  },
  created() {
    
  },
  methods: {
    delData(){
      this.$emit('del',this.item.pkId)
    },
    editeData(){
      this.$router.push({
        name: "albumDetail",
        query: {
            pkId: this.item.pkId,
            isAdd: 1
        }
      })
    },
    lookDetail(){
      this.$router.push({
        name: "albumDetail",
        query: {
            pkId: this.item.pkId,
            isAdd: 2
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.albumMain{
  width: 17.8125vw;
}
.topImg{
  height: 11.77vw;
  width: 100%;
  border-radius: 0.6vw;
  overflow: hidden;
  position: relative;
}
.topImg img{
  width: 100%;
  height: 100%;
}
.btnBoxTop{
  display: flex;
  position: absolute;
  top: 0.52vw;
  right: 0.52vw;
  flex-wrap: wrap;
  justify-content: space-between;
}
.albumDel{
  cursor: pointer;
  color: #fff;
  font-size: 0.83vw;
  display: flex;
  background: rgba(0,0,0,0.36);
  border-radius: 0.3125vw;
  width: 3.90625vw;
  height: 1.45vw;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 0.625vw;
  margin-left: 0.4vw;
}
.albumDel img{
  width: 0.677vw;
  height: 0.833vw;
}
.nameBox{
  color: #202124;
  font-size: 0.9375vw;
  margin-top: 0.8333vw;
  width: 15.9375vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.classBox{
  color: #C0C0C0;
  font-size: 0.83vw;
  display: flex;
  align-items: center;
  margin-top: 0.42vw;
}
.classBox div{
  border-radius:4px;
  height: 1.25vw;
  line-height: 1.25vw;
  padding: 0px 0.4vw;
  text-align: center;
  margin-right: 0.625vw;
}
.stateBox1{
  background: rgba(255,144,13,0.04);
  color: #FF900D;
}
.stateBox2{
  background: rgba(64,108,196,0.04);
  color: #406CC4;
}
.stateBox3{
  background: rgba(255,144,13,0.04);
  color: #FF900D;
}
.stateBox4{
  background: rgba(248,78,76,0.04);
  color: #F84E4C;
}
.classUser{
  .header{
    width: 1.3vw;
    height: 1.3vw;
    margin-right: 0.4vw;
    border-radius: 2vw;
  }
  .btnBox{
    margin-left: auto;
    display: flex;
    .btn{
      font-size: 0.83vw;
      color: #C0C0C0;
      display: flex;
      align-items: center;
      margin-right: 0.52vw;
      img{
        width: 1.1vw;
        height: auto;
        margin-right: 0.36vw;
      }
    }
  }
  color: #202124;
  font-size: 0.9375vw;
  display: flex;
  align-items: center;
  margin-top: 0.42vw
}
</style>