123456789101112131415161718192021222324252627282930313233 |
- <template>
- <view class="grace-empty">
- <view :class="['grace-empty-icon', 'grace-empty-icon'+iconType]" :style="{fontSize:iconSize+'rpx', lineHeight:(iconSize+10)+'rpx', color:iconColor}"></view>
- <view class="grace-empty-text" v-if="text != ''" :style="{fontSize:textSize+'rpx', lineHeight:(textSize+10)+'rpx', color:textColor}">{{text}}</view>
- <slot></slot>
- </view>
- </template>
- <script>
- export default {
- props: {
- iconType : { type: Number, default : 1},
- iconSize : { type: Number, default : 80},
- iconColor : { type: String, default : "#999999"},
- textSize : { type: Number, default : 26},
- textColor : { type: String, default : "#999999"},
- text : { type: String, default :''}
- },
- }
- </script>
- <style scoped>
- .grace-empty{width:100%;}
- .grace-empty-icon{text-align:center;}
- .grace-empty-text{padding:20rpx 0; text-align:center;}
- @font-face{
- font-family:"graceEmptyFont";
- src:url('https://at.alicdn.com/t/font_1348648_qbg88v58i.ttf') format('truetype');
- }
- .grace-empty-icon1:before{font-family: "graceEmptyFont" !important; content:"\e736";}
- .grace-empty-icon2:before{font-family: "graceEmptyFont" !important; content:"\e600";}
- .grace-empty-icon3:before{font-family: "graceEmptyFont" !important; content:"\e704";}
- .grace-empty-icon4:before{font-family: "graceEmptyFont" !important; content:"\e66e";}
- .grace-empty-icon5:before{font-family: "graceEmptyFont" !important; content:"\e644";}
- </style>
|