skeleton-information.vue

<template>
  <div
    class="skeleton-information skeleton-animate skeleton-block-w100"
    :class="[listStyle==2||listStyle==3||listStyle==4?'skeleton-flex-sb':'']"
  >
    <div class="skeleton-bg skeleton-title-h20 skeleton-title-w100"></div>
    <div
      v-for="(item,index) in skeletonNum"
      :key="index"
      :class="[listStyle==2||listStyle==3||listStyle==4?'skeleton-block-w48':'skeleton-block-w100']"
    >
      <div v-if="listStyle==1">
        <div class="skeleton-bg skeleton-block-h40 skeleton-block-w100"></div>
        <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
        <div class="skeleton-flex-sb">
          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
        </div>
      </div>
      <div v-if="listStyle==2||listStyle==3||listStyle==4">
        <div class="skeleton-bg skeleton-block-h100 skeleton-block-w100"></div>
        <div class="skeleton-bg skeleton-title-h20 skeleton-title-w100"></div>
        <div class="skeleton-flex-sb">
          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
        </div>
      </div>
      <div v-if="listStyle==5">
        <div v-if="index==0">
          <div class="skeleton-bg skeleton-block-h40 skeleton-block-w100"></div>
          <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
          <div class="skeleton-flex-sb">
            <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
            <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
          </div>
        </div>
        <div v-else>
          <div class="skeleton-flex-sb">
            <div class="skeleton-block-w60">
              <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
              <div class="skeleton-block-h12 skeleton-block-w30"></div>
              <div class="skeleton-flex-sb">
                <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
                <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
              </div>
            </div>
            <div class="skeleton-bg skeleton-block-h30 skeleton-block-w30"></div>
          </div>
        </div>
      </div>
      <div v-if="listStyle==6">
        <div class="skeleton-flex-sb">
          <div class="skeleton-block-w60">
            <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
            <div class="skeleton-block-h12 skeleton-block-w30"></div>
            <div class="skeleton-flex-sb">
              <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
              <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
            </div>
          </div>
          <div class="skeleton-bg skeleton-block-h30 skeleton-block-w30"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "skeleton-information",
  props:['listStyle','skeletonNum'],
  data() {
    return {};
  },
  components: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
$skeletonColor: #f2f3f5;
// $skeletonColor: #ccc;
// 骨架屏样式
.skeleton-bg {
  background: $skeletonColor;
}
.skeleton-flex-sb {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.skeleton-flex-sa {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
@for $h from 1 through 200 {
  .skeleton-block-h#{$h} {
    padding-top: (1% * $h);
    margin-top: 10px;
  }
}
@for $w from 1 through 200 {
  .skeleton-block-w#{$w} {
    width: (1% * $w);
  }
}
@for $h from 1 through 200 {
  .skeleton-title-h#{$h} {
    height: (1px * $h);
    margin-top: 10px;
  }
}
@for $h from 1 through 200 {
  .skeleton-title-w#{$h} {
    width: (1% * $h);
  }
}

.skeleton-animate {
  animation: skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes skeleton-blink {
  50% {
    opacity: 0.6;
  }
}
</style>