flat: 新页面

components/empty/empty.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
+		<view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
+			<view class="content_top" :style="{ width: width + 'rpx', height: height + 'rpx' }">
+				<image :src="pictrue || Empty" style="width: 100%;" mode=""></image>
+			</view>
+			<view class="content_c color_666666">{{ content }}</view>
+			<button class="content_btn" v-if="showButton" hover-class="active">重新加载</button>
+		</view>
+	</view>
+</template>
+
+<script>
+        let Empty = require('../../static/img/Empty.png');
+export default {
+	name: 'empty',
+	data() {
+		return {
+            Empty   
+		}
+	},
+	props: {
+		content: {
+			type: String,
+			required: false,
+			default: '网络加载失败'
+		},
+		bgcolor: {
+			type: String,
+			required: false,
+			default: 'transparent'
+		},
+		width: {
+			type: String,
+			required: false,
+			default: '504'
+		},
+		height: {
+			type: String,
+			required: false,
+			default: '504'
+		},
+		pdTop: {
+			type: String,
+			required: false,
+			default: '20'
+		},
+		mrTop: {
+			type: String,
+			required: false,
+			default: '0'
+		},
+		pictrue: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		showButton: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	methods: {
+
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    
+.empty {
+	width: 100%;
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+
+	.ty_content {
+		// position: absolute;
+		// left: 50%;
+		// top: 0;
+		// transform: translate(-50%, 0);
+		display: flex;
+		width: 100%;
+		height: max-content;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding-bottom: 20rpx;
+
+		.content_top {
+			// width: 504rpx;
+			// height: 504rpx;
+		}
+
+		.content_c {
+			width: 100%;
+			margin-top: 20rpx;
+			color: #6A707C;
+			font-size: 28rpx;
+			text-align: center;
+		}
+
+		.content_btn {
+			margin-top: 37rpx;
+			width: fit-content;
+			height: 45rpx;
+			border-radius: 5rpx;
+			border: 1rpx solid #643CB6;
+			font-size: 24rpx;
+			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
+			font-weight: 400;
+			color: #643CB6;
+			line-height: 45rpx;
+		}
+
+		.active {
+			border: 1rpx solid #666666;
+			color: #666666;
+		}
+	}
+}
+</style>