<template>
  <PageWrapper>
    <PageContentWrapper>
      <PageItemCard class="tabs-item" style="height: 260px;" :title="'我是卡片标题'">
        <template v-slot:header>
          <div>
            <el-button type="primary">操作按钮</el-button>
          </div>
        </template>
        <div>
          <el-radio-group v-model="currentValue">
            <el-radio-button label="上海"/>
            <el-radio-button label="北京"/>
            <el-radio-button label="广州"/>
            <el-radio-button label="深圳"/>
          </el-radio-group>
          <el-checkbox-group v-model="checkboxGroup1" style="margin-top: 30px;">
            <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </div>
      </PageItemCard>
    </PageContentWrapper>
  </PageWrapper>
</template>

<script>
export default {
  name: 'Radio',
  data () {
    return {
      currentValue: '上海',
      checkboxGroup1: ['上海'],
      cities: ['上海', '北京', '广州', '深圳']
    }
  }
}
</script>

<style scoped lang="scss">
.tabs-item {
  min-height: 100px;
}
</style>
