3回答

Tobin_Xu

2020-05-04

hhhh真实

0

0

慕丝2514782

提问者

2020-04-23

对不起，是我眼瞎，class写成了calss，这不知道是我多少次眼瞎了，我是猪吧

0

0

慕丝2514782

提问者

2020-04-23

<template>
 <div class="ebook-loading">
   <div class="ebook-loading-wrapper">
     <div class="ebook-loading-item" v-for="(item, index) in data" :key="index">
       <div class="ebook-loading-line-wrapper" v-for="(subItem, subIndex) in item" :key="subIndex">
         <div calss="ebook-loading-line"></div>
         <div calss="ebook-loading-mask"></div>
       </div>
     </div>
     <div class="ebook-loading-center"></div>
   </div>
 </div>
</template>

<script>
export default {
 data () {
   return {
     data: [
       [{}, {}, {}],
       [{}, {}, {}]
     ]
   }
 }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
 @import "../../assets/style/global";
 .ebook-loading {
   position: relative;
   z-index: 400;
   width: px2rem(63);
   height: px2rem(40);
   background: transparent;
   border: px2rem(1.5) solid #d7d7d7;
   border-radius: px2rem(3);
   .ebook-loading-wrapper {
     display: flex;
     width: 100%;
     height: 100%;
     .ebook-loading-item {
       display: flex;
       flex-direction: column;
       flex: 1;
       padding: px2rem(7) 0;
       box-sizing: border-box;
       .ebook-loading-line-wrapper {
         flex: 1;
         padding: 0 px2rem(7);
         box-sizing: border-box;
         @include left;
         .ebook-loading-line {
           flex: 0 0 px2rem(16);
           width: px2rem(16);
           height: px2rem(2);
           background: #d7d7d7;
         }
         .ebook-loading-mask {
           flex: 0 0 0;
           width: 0;
           height: px2rem(2);
         }
       }
     }
     .ebook-loading-center {
       position: absolute;
       left: 50%;
       top: 0;
       width: px2rem(1.5);
       height: 100%;
       background: #d7d7d7;
     }
   }
 }
</style>

0

0