JM-MiniApp/components/emptyCard.vue
2023-10-08 21:21:21 +08:00

46 lines
1.0 KiB
Vue

<script setup>
// 引入依赖
import {watch,ref,reactive} from "vue"
// icons
import normal from "/static/default_icon.png"
import search_icon from "/static/default_search_icon.png"
// props
const props = defineProps(['type',"title","message"])
// 变量
</script>
<template>
<view class="default-icon-box">
<view class="icon-box">
<image v-if="type=='search'" :src="search_icon" mode="widthFix"></image>
<image v-else :src="normal" mode="widthFix"></image>
</view>
<view class="text-box">
<view class="title-part">{{title?title:'暂无数据...'}}</view>
<view class="message-part empty-text">{{message?message:''}}</view>
</view>
</view>
</template>
<style scoped lang="scss">
.default-icon-box{
padding: 20rpx;
.icon-box{
text-align: center;
image{
width: 200rpx;
}
}
.text-box{
text-align: center;
margin-top: 20rpx;
font-size: 28rpx;
color:gray;
.title-part{
margin-bottom: 10rpx;
}
.message-part{
}
}
}
</style>