xiaoshi_system/src/utils/model/card/index.vue

<template>
    <div :class="classList">
        <div class="head">
            <slot name="head"></slot>
        </div>
        <div class="body">
          <slot></slot>  
        </div>
        <div class="foot">
            <slot name="foot"></slot>
        </div>
        
    </div>
</template>

<script>
export default {
  components: {},
  props: {
    shadow:{
        default:'always'
    }
  },
  data() {
    return {
        classList:'myCard'
    };
  },
  watch: {
    shadow(){
        this.getStyle()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getStyle()
  },
  methods: {
    getStyle(){
        var a = 'myCard'
        switch(this.shadow){
            case 'always':
                a = a + ' is-always-shadow'
                break;
            case 'hover':
                a = a + ' is-hover-shadow'
                break;
            case 'never':
                break;
            default:
                break;
        }
        this.classList = a
    }
  },
};
</script>
<style lang="scss" scoped>
.myCard{
    background-color: #FFF;
    color: #303133;
    transition: .3s;
    border: 1px solid var(--color1) !important;
    border-radius: 5px;
    .head{
        width: auto;
        border-bottom: 1px solid var(--color1) !important;
        padding: 10px;
    }
    .head>*{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-family: var(--fm);
        color: var(--color1);
        font-weight: bold;
    }
    .head:empty{
        border-bottom: none !important;
        padding: 0px;
    }
    .body{
        padding: 10px;
    }
    .foot{
        border-top: 1px solid var(--color1) !important;
        padding: 10px;
    }
    .foot>*{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .foot:empty{
        border-top: none !important;
        padding: 0px;
    }
}
.is-always-shadow{
    box-shadow: 10px 18px 12px 0 rgba(27, 23, 23, 0.1);
}
.is-hover-shadow:hover{
    box-shadow: 10px 18px 12px 0 rgba(27, 23, 23, 0.1);
}
</style>