<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlPic 图片</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础用法</Title>
      <WlUserGroups :data="user_info" />
      <Title>组件大小</Title>
      <WlUserGroups :data="user_info" size="20" />
      <Title>头像间隔距离</Title>
      <WlUserGroups :data="user_info" avatar_offset="-5px" />
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "WlUserGroups-Example",
  components: { Title, Container },
  data() {
    return {
      user_info: [
        {
          avatar:
            "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
        },
        {
          avatar:
            "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
        },
        {
          avatar:
            "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
        },
      ],
    };
  },
};
</script>
