63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
|
<view class="empty-component" :style="{'height':`calc(100vh - ${statusBarHeight + 50}px)`}">
|
|
<view class="empty-main">
|
|
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/mine/no.png" mode="" class="empty-img"></image>
|
|
<view class="empty-txt">{{ title }}</view>
|
|
<slot></slot>
|
|
<!-- <view class="empty-btn">去逛商城</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
export default{
|
|
props:{
|
|
title:{
|
|
type: String,
|
|
default:"暂无数据"
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
statusBarHeight,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.empty-component{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.empty-main{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.empty-img{
|
|
width: 120rpx;
|
|
height: 152rpx;
|
|
}
|
|
.empty-txt{
|
|
margin-top: 68rpx;
|
|
color: #666;
|
|
font-size: 32rpx;
|
|
}
|
|
.empty-btn{
|
|
margin-top: 60rpx;
|
|
width: 324rpx;
|
|
height: 100rpx;
|
|
background: #70E3DE;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |