Foshan4A4.0/src/components/bfbutton/index.vue

<template>
    <div class="bf-button">
        <!-- 1 2是公用头部按钮 3是左边长按钮 4 10导入新增 8 9调用规则管理-->
        <el-row>
            <el-button  :class="{'but':type == 1 , 'buter': type == 2 , 'butewid': type == 3 , 'butdao': type == 4 , 'butdaoadd': type == 10 ,'butedit': type == 5 , 'butels': type == 6 , 'buteles': type == 7 , 'butcan': type == 8 , 'butsub': type == 9, 'butout': type == 11 , 'butmod': type == 12,  'butb': type == 13,  'butc': type == 14,'butd': type == 15, 'bute': type == 16, 'butmods': type == 17, 'butsuber': type == 18}">{{butName}}</el-button>
        </el-row>
    </div>
</template>
<script>
export default {
    props: ['butName', 'type'],
    data () {
        return {}
    },
    mounted () {
        console.log(this.type)
    }
}
</script>
<style lang="scss">
.bf-button{
    // height: 48px;
    border-radius: 16px;
    >.el-row{
        width: 100%;
        height: 100%;
        >.but{
            width: 100%;
            height: 100%;
            padding: 0 32px 0 32px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            border: none;
            background: linear-gradient(0deg, #777DBA, #6983BE);
            // box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
        }
        .but:hover{
            background: #87A6D3
        }
        .but:focus{         
            background: #2D4F80;
        }
        >.buter{
            width: 100%;
            height: 100%;
            padding: 1px 32px 1px 32px;
            background:  #F5F7FA;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #5077AE;
            border: 1px solid #90A8C9;
            box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        }
        .buter:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .buter:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        >.butewid{
            width: 100%;
            height: 100%;
            padding: 0 92px 0 92px;
            background: linear-gradient(0deg, #777DBA, #6983BE);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        }
        .butewid:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butewid:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butdao{
            width: 100%;
            height: 100%;
            padding: 0 47px 0 47px;
            background: #FFFFFF;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #5077AE;
            border: 1px solid #E4E8F0;
            border-radius: 6px;
        }
        .butdao:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butdao:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butdaoadd{
            width: 100%;
            height: 100%;
            padding: 0 47px 0 47px;
            background: linear-gradient(0deg, #777DBA, #6983BE);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            border-radius: 6px;
        }
        .butdaoadd:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butdaoadd:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butedit{
            width: 100%;
            height: 100%;
            padding: 0 16px 0 16px;
            background: #5077AE;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .butedit:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butedit:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butels{
            width: 100%;
            height: 100%;
            padding: 0 15px 0 15px;
            background: #F56C6C;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .butels:hover{
            background: #F88585;
            color: #FFFFFF;
        }
        .butels:focus{         
            background: #DD4343;
            color: #FFFFFF;
        }
        .buteles{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 24px 0 24px;
            background: #F56C6C;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            border: none;
        }
        .buteles:hover{
            background: #F88585;
            color: #FFFFFF;
        }
        .buteles:focus{         
            background: #DD4343;
            color: #FFFFFF;
            border: none;
        }
        .butcan{
            width: 100%;
            height: 100%;
            padding: 0 24px 0 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #FFFFFF;
            border: 1px solid #E4E8F0;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #5077AE;
        }
        .butcan:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butcan:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butsub{
            width: 100%;
            height: 100%;
            padding: 0 24px 0 24px;
            background: linear-gradient(0deg, #777DBA, #6983BE);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .butsub:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butsub:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butsuber{
            width: 100%;
            height: 100%;
            padding: 0 15px 0 15px;
            background: linear-gradient(0deg, #777DBA, #6983BE);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .butsuber:hover{
            background: #87A6D3;
            color: #FFFFFF;
        }
        .butsuber:focus{         
            background: #2D4F80;
            color: #FFFFFF;
        }
        .butout{
            width: 100%;
            height: 100%;
            padding: 0 20px 0 20px;
            // background: #F56C6C;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #F56C6C;
            border: 1px solid #F56C6C
        }
        .butout:hover{
            background: #F88585;
            color: #FFFFFF;
        }
        .butout:focus{         
            background: #DD4343;
            color: #FFFFFF;
        }
        .butmod{
            width: 100%;
            height: 100%;
            padding: 0 20px 0 20px;
            // background: #F56C6C;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #303133;
            border: 1px solid #E3E5E8;
        }
        .butmod:hover{
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .butmod:focus{         
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .butb{
            width: 100%;
            height: 100%;
            padding: 0 24px 0 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #FFFFFF;
            border: 1px solid #E4E8F0;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #5077AE;
        }
        .butb:hover{
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .butb:focus{         
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .butc{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 24px 0 24px;
            background: #F56C6C;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .butc:hover{
            background: #F88585;
            color: #FFFFFF;
        }
        .butc:focus{         
            background: #DD4343;
            color: #FFFFFF;
        }
        .butd{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 8px 0 8px;
            background: #6E81BC;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .butd:hover{
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .butd:focus{         
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .bute{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 74px 0 74px;
            background: #6E81BC;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
        }
        .bute:hover{
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .bute:focus{         
            background: #6f80bc;
            color: #FFFFFF;
            // border: none;
        }
        .butmods{
            width: 100%;
            height: 100%;
            padding: 0 20px 0 20px;
            // background: #F56C6C;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #303133;
            border: 1px solid #E3E5E8;
        }
    }
}
</style>