<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlPic 用户</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础用法</Title>
      <WlUser :data="user_info" />
      <Title>组件大小</Title>
      <div class="size-wrap">
        <div class="item">
          <p>默认</p>
          <WlUser :data="user_info" size="normal" />
          <p>size: normal</p>
        </div>
        <div class="item">
          <p>中</p>
          <WlUser :data="user_info" size="medium" />
          <p>size: medium</p>
        </div>
        <div class="item">
          <p>小</p>
          <WlUser :data="user_info" size="small" />
          <p>size: small</p>
        </div>
      </div>
      <Title>点击跳转类型</Title>
      <WlUser :data="user_info" target="_target" />
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "WlUser-Example",
  components: { Title, Container },
  data() {
    return {
      user_info: {
        nick_name: "名称",
        head_img_url:
          "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
        href:
          "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
      },
    };
  },
};
</script>

<style scoped lang="scss">
.pic-wrap {
  width: 100%;
}
.pic-tx-wrap {
  width: j(100);
  height: j(100);
}
.size-wrap {
  @extend %flex-middle-center;
  .item {
    flex: 1;
    @extend %flex-middle-center;
    @extend %flex-direction-column;
    p{
        margin: j(10) 0;
    }
  }
}
</style>
