<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlPic 图片</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础图片</Title>
      <WlPic pic-class="pic-wrap" src="https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg" />
      <Title>腾讯图片服务</Title>
      <WlPic
        pic-class="pic-tx-wrap"
        src="https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg"
        needCos
      />
      <Title>圆形图片</Title>
      <WlPic
        src="https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg"
        pic-class="pic-tx-wrap"
        needCos
        round
      />
      <Title>加载失败状态图片</Title>
      <WlPic
        src="https://wlmvp-cos.weiling.cn/frontend/weilingMobileUI/loadingFail.png"
        pic-class="pic-tx-wrap"
        needCos
      />
      <Title>加载中状态图片</Title>
      <div class="pic-loading">
        <WlPic
          src="https://wlmvp-cos.weiling.cn/frontend/weilingMobileUI/loading.png"
          class="pic-tx-wrap"
          needCos
        />
      </div>
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "Example",
  components: { Title, Container },
};
</script>

<style scoped lang="scss">
.pic-wrap {
  width: j(160);
  height: j(100);
}

.pic-tx-wrap {
  width: j(100);
  height: j(100);
}
@keyframes onRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pic-loading {
  width: j(100);
  height: j(100);
  background-color: white;
  @extend %flex-middle-center;
  .pic-tx-wrap {
    width: 30%;
    height: 30%;
    min-width: j(20);
    min-height: j(20);
    max-width: j(80);
    max-height: j(80);
    animation: onRotate 5s infinite;
  }
}
</style>
