46 lines
1.0 KiB
Vue
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>
|