graceEmpty.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <view class="grace-empty">
  3. <view :class="['grace-empty-icon', 'grace-empty-icon'+iconType]" :style="{fontSize:iconSize+'rpx', lineHeight:(iconSize+10)+'rpx', color:iconColor}"></view>
  4. <view class="grace-empty-text" v-if="text != ''" :style="{fontSize:textSize+'rpx', lineHeight:(textSize+10)+'rpx', color:textColor}">{{text}}</view>
  5. <slot></slot>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props: {
  11. iconType : { type: Number, default : 1},
  12. iconSize : { type: Number, default : 80},
  13. iconColor : { type: String, default : "#999999"},
  14. textSize : { type: Number, default : 26},
  15. textColor : { type: String, default : "#999999"},
  16. text : { type: String, default :''}
  17. },
  18. }
  19. </script>
  20. <style scoped>
  21. .grace-empty{width:100%;}
  22. .grace-empty-icon{text-align:center;}
  23. .grace-empty-text{padding:20rpx 0; text-align:center;}
  24. @font-face{
  25. font-family:"graceEmptyFont";
  26. src:url('https://at.alicdn.com/t/font_1348648_qbg88v58i.ttf') format('truetype');
  27. }
  28. .grace-empty-icon1:before{font-family: "graceEmptyFont" !important; content:"\e736";}
  29. .grace-empty-icon2:before{font-family: "graceEmptyFont" !important; content:"\e600";}
  30. .grace-empty-icon3:before{font-family: "graceEmptyFont" !important; content:"\e704";}
  31. .grace-empty-icon4:before{font-family: "graceEmptyFont" !important; content:"\e66e";}
  32. .grace-empty-icon5:before{font-family: "graceEmptyFont" !important; content:"\e644";}
  33. </style>