first commit

金壶/appV1/components/common/common-popup.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="_popup"  :class="popupClass">
+		<view class="_mask" @tap.stop="$emit('hide')"></view>
+		<view class="_body">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			popupClass: {
+				type: String,
+				default:'none' 
+			},
+		},
+	}
+</script>
+
+<style scoped>
+._popup ,._mask{
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+._popup{
+	z-index: 2000;
+	display: none;
+}
+._mask{
+	z-index: 2002;
+	background: rgba(0,0,0,0.5);
+}
+._popup ._body{
+	position: fixed;
+	bottom: -1035rpx;
+	width: 100%;
+	padding: 0 4%;
+	height: 750rpx;
+	z-index: 2003;
+	border-radius: 20rpx 20rpx 0 0;
+	background: #FFFFFF;
+	display: flex;
+	flex-direction: column;
+}
+._popup.show{
+	display: block;
+}
+.show ._mask{
+	animation: showPopupMask 0.2s linear both;
+}
+.show ._body{
+	animation: showPopupBody 0.2s linear both;
+}
+._popup.hide{
+	display: block;
+}
+.hide ._mask{
+	animation: hidePopupMask 0.2s linear both;
+}
+.hide ._body{
+	animation: hidePopupBody 0.2s linear both;
+}
+@keyframes showPopupBody{
+	0%{ transform: translateY(0); }
+	100%{ transform: translateY(-100%);  }
+}
+@keyframes hidePopupBody{
+	0%{ transform: translateY(-100%); }
+	100%{ transform: translateY(0);  }
+}
+@keyframes showPopupMask{
+	0%{ opacity: 0; }
+	100%{ opacity: 1; }
+}
+@keyframes hidePopupMask{
+	0%{ opacity: 1; }
+	100%{ opacity: 0; }
+}
+._popup.none{
+	display: none;
+}
+</style>