sgxt_web/src/views/backOfficeSystem/MakeAcomment/components/itemXs/itemXs.vue

<template>
  <div class="itemXs_Box" :style="{color:fontColor,backgroundColor:bgColor}">
    <div class="itemXs_Mc">
      {{ item.xsMc }}
    </div>
    <div class="itemXs_Ms">
      {{item.xsNr }}
    </div>
    <div class="itemXs_Xs flex just-between align-center">
      <div class=" flex just-between align-center">
        <el-icon class="icon"><Histogram /></el-icon>
        {{item.rd?item.rd:0}}
      </div>
      <div  class=" flex just-between align-center">
        <el-icon class="icon"><ChatDotSquare /></el-icon>
        {{item.pls?item.pls:0}}
      </div>
      <div  class=" flex just-between align-center">
        <el-icon class="icon"><Clock /></el-icon>
        {{item.fbsj}}
      </div>
      <div  class=" flex just-between align-center">
        <el-icon class="icon"><Avatar /></el-icon>
        {{item.fbrxm}}
      </div>
      <div class="flex align-center">情报类型：
         <DictTag :tag="false" :value="item.xlLx" color="#6c6c6c" :options="dict.D_GS_XS_LX" />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => { },
  }, bgColor: {
    type: String,
    default: '#ffebee'
  },fontColor:{
    type:String,
    default:'#de0909'
  }, dict: {
    type:Object,
    default:()=>{}
  }

})
</script>

<style lang="scss" scoped>
.itemXs_Box {
  box-sizing: border-box;
  width: 32.5%;
  border-radius: 5px;
  padding: 20px 10px;
max-height: 11vh;
  .itemXs_Mc {
    font-size: 16px;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  line-height: 20px;
  }

  .itemXs_Ms {
    color: #6c6c6c;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px 0;
  }
  .itemXs_Xs{
    font-size: 12px;
    color: #6c6c6c;
    line-height: 20px;
    display: flex;
    align-items: center;
    .icon{
      font-size: 18px;
    }
  }
}
</style>