6155部分功能

2025-07-11 16:11:40 +08:00
parent 413c495880
commit cc0ad19e2d
39 changed files with 3823 additions and 13 deletions
--- a/components/Progress/Progress.vue
+++ b/components/Progress/Progress.vue
@ -0,0 +1,129 @@
+<template>
+	<view class="message-popup" :class="{ 'show': config.show }">
+		<view class="mask" @click="closeProgress" :class="{ 'show': config.show }"
+			:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
+		</view>
+
+		<view class="progress-content" :style="{backgroundColor:config.contentBgColor}">
+			<text
+				:style="{color:config.txtColor,display:(config.showText?'':'none')}">{{config.curr}}/{{config.total}}</text>
+			<view class="jdWai"
+				:style="{borderRadius:config.borderRadius, backgroundColor:config.proBgColor,border:config.proBorder,height:config.height}">
+				<view class="jdNei"
+					:style="{borderRadius:config.borderRadius,height:config.height,backgroundColor:config.currBgColor,border:config.currBorder,width:(config.curr/config.total*100)+'%'}">
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "Progress",
+		data() {
+			return {
+
+			};
+		},
+		props: {
+			config: {
+				type: Object,
+				default: () => ({
+					show: false, //是否显示
+					showMask: true, //是否显示mask
+					height:'20px',
+					maskBgColor: '#00000000', //mask背景颜色
+					contentBgColor: '#121212', //总背景颜色
+					showText: true, //是否显示当前进度的文字
+					txtColor: '#ffffffde', //文字的颜色
+					curr: 0, //当前进度
+					total: 100, //总进度
+					proBgColor: '#2a2a2a', //进度条底色,
+					proBorder: '', //进度条border
+					currBgColor: '#bbe600', //当前进度底色
+					currBorder: '', //当前进度border
+					borderRadius:'10px'
+				})
+			}
+		},methods: {
+			closeProgress() {
+
+				this.$emit('closeProgress');
+			}
+			}
+	}
+</script>
+
+<style>
+	.message-popup {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+		display: none;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.message-popup.show {
+		display: block;
+	}
+
+	.p100 {
+		width: 100%;
+		height: 100%;
+		border-radius: 8rpx;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-content: center;
+		justify-content: flex-start;
+		align-items: center;
+		box-sizing: border-box;
+		padding: 0rpx 20rpx;
+	}
+
+	.displayNone {
+		display: none !important;
+	}
+
+
+
+	.mask {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 9;
+		width: 100%;
+		height: 100%;
+	}
+
+
+	.progress-content {
+		position: relative;
+		width: 100%;
+		padding: 30rpx;
+		box-sizing: border-box;
+		z-index: 10;
+
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		align-content: center;
+		align-items: center;
+		height: 100%;
+		justify-content: center;
+	}
+
+	.jdWai {
+		width: 100%;
+	}
+
+	.jdNei {
+		height: 100%;
+
+	}
+</style>