<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="12" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <e-switch
                            v-model="value"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </e-switch>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="12" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>文字描述</span>
                    </div>
                    <div>
                        <e-switch
                        v-model="value1"
                        active-text="按月付费"
                        inactive-text="按年付费">
                        </e-switch>
                        <e-switch
                        style="display: block"
                        v-model="value2"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="按月付费"
                        inactive-text="按年付费">
                        </e-switch>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="12" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>扩展的 value 类型</span>
                    </div>
                    <div>
                        <el-tooltip :content="'Switch value: ' + value3" placement="top">
                        <e-switch
                            v-model="value3"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="100"
                            inactive-value="0">
                        </e-switch>
                        </el-tooltip>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="12" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>禁用状态</span>
                    </div>
                    <div>
                        <e-switch
                        v-model="value4"
                        disabled>
                        </e-switch>
                        <e-switch
                        v-model="value5"
                        disabled>
                        </e-switch>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            value: true,
            value1: true,
            value2: true,
            value3: '100',
            value4: true,
            value5: false
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
