BJYSYBZ/BJYSYBZ_C/src/views/YsbzDetail/components/common/CardItem2.vue

<template>
  <div class="card">
    <div :class="{TitleCardBox: true, is_hover: hover, is_selected: is_selected}" @click="clickHandle">
      <span class="icon"><img :src="icon"/></span>
      <span class="title" :style="{color: color}">{{ title }}</span>

      <span class="numbers" :style="{color: color}">{{value}}</span>
      <span class="unit" :style="{color: color}">{{ unit }}</span>
    </div>


  </div>
</template>

<script>
export default {
  name: 'CardItem',
  props: {
    icon: {
      type: [Object, String],
      default() {
        return null
      }
    },
    hover: {
      type: Boolean,
      default: false
    },
    is_selected: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: '#4ADEFF'
    },
    value: {
      type: [String, Number],
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: '个'
    },
    secondValue:{
      type: [String, Number],
      default: 22.2
    },
    percent:{
      type: [String, Number],
      default: 22.2
    }
  },
  data(){
    return{
      selected:false
    }
  },
  methods: {
    clickHandle() {
      this.selected=!this.selected
      this.$emit('click')
    },
    clearActive(){
      this.selected=false
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  border: 1px solid #3D77DC;
  margin-bottom: 12px;
  .TitleCardBox {
    height: 50px;
    //background: #193E86;
    display: flex;
    color: #fff;
    align-items: center;
    padding: 0px 10px;

    &.is_hover {
      cursor: pointer;
    }

    &.is_hover:hover {
      background: linear-gradient(90deg, #0E66BF 0%, #153981 100%);
      border-left: 3px solid #3BAAFF;
    }

    &.selected{
      background: linear-gradient(90deg, #0E66BF 0%, #153981 100%);
      border-left: 3px solid #3BAAFF;
    }
    &.is_selected{
      background: linear-gradient(90deg, #0E66BF 0%, #153981 100%);
      border-left: 3px solid #3BAAFF;
    }

    > span {
      &.icon {
        width: 34px;
        height: 34px;
        margin-right: 10px;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      &.title {
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        flex: 1;
      }
    }

    .label{
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #FFFFFF;
      margin-right: 15px;
    }
    .numbers{
      font-size: 22px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      margin-right: 5px;
    }


    > .unit {
      font-size: 20px;
      margin-left: 3px;
      width: 50px;
    }
  }


}
</style>