From 048dd1cc5fb86b5348aee05878c6b4d6bb4b8fad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Thu, 2 Mar 2023 23:31:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Emodal=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/widgets/modal.vue | 104 +++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 src/components/widgets/modal.vue

diff --git a/src/components/widgets/modal.vue b/src/components/widgets/modal.vue
new file mode 100644
index 0000000..6d3bf72
--- /dev/null
+++ b/src/components/widgets/modal.vue
@@ -0,0 +1,104 @@
+<template>
+    <view class="component-widgets-modal" v-if="show">
+        <view class="modal-mask" @click="close"></view>
+        <view class="modal-content" :style="{ width: width }">
+            <view class="modal-title">
+                <text class="title">
+                    {{ title }}
+                </text>
+                <text class="iconfont icon-guanbi close" @click="close"></text>
+            </view>
+            <view class="content-box">
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-widgets-modal",
+    data() {
+        return {};
+    },
+    props: {
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        title: {
+            type: String,
+            default: "默认标题",
+        },
+        width: {
+            type: String,
+            default: "650rpx",
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        close() {
+            this.$emit("close");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.component-widgets-modal {
+    z-index: 25;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    max-width: 750px;
+    width: 100%;
+    height: 100vh;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .modal-mask {
+        z-index: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #000000;
+        opacity: 0.2;
+    }
+    .modal-content {
+        z-index: 5;
+        position: relative;
+        padding: 30rpx 50rpx;
+        box-sizing: border-box;
+        background-color: #fff;
+    }
+    .modal-title {
+        text-align: center;
+        line-height: 0;
+        padding-bottom: 15px;
+        border-bottom: 4rpx solid #e0e0e0;
+        .title {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #7286f1;
+            line-height: 32rpx;
+        }
+        .close {
+            position: absolute;
+            top: 20rpx;
+            right: 20rpx;
+            font-size: 30rpx;
+            line-height: 30rpx;
+        }
+    }
+    .content-box {
+        padding-top: 15rpx;
+    }
+}
+</style>
\ No newline at end of file