jf-frock/src/views/BasicSettings/Setting.vue

<template>
     <div style="padding: 10px" class="setting" dis-hover>
        <Card title="Options" icon="ios-options" :padding="0"  >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
      <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"  >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"  >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"  >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"  >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"  >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0"   >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
         <Card title="Options" icon="ios-options" :padding="0" >
            <CellGroup>
                <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
                 <Cell title="With Switch">
                    <i-switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>

    </div>
</template>
<script>
export default {
    data(){
        return {
                switchValue: true,
                switch1:true
            }
    }
       
        }
</script>
<style scoped lang='scss'>
.setting{
   margin-top:10px ;
   display: flex;
   flex-wrap: wrap;
}
/deep/ .ivu-card{
         background:  #f8f8f9;
         width: 250px;
         height: 200px;
         margin: 10px;
         border-radius: 20px;
  .ivu-card:hover{
      box-shadow: darkgrey 2px 2px 2px 2px ;//边框阴影
  }
}
 /deep/ .ivu-card-head{
    border-bottom: none;
}
</style>