flat：修改

2024-07-01 14:43:19 +08:00
parent d19b4d502b
commit 7d1904fa2c
19 changed files with 1406 additions and 929 deletions
--- a/components/custom-popup/custom-popup.vue
+++ b/components/custom-popup/custom-popup.vue
@@ -0,0 +1,128 @@
+<template>
+    <view v-if="visible" class="tianditu-popop"
+        :style="{ height: (winHeight)+ 'px',width: winWidth+'px',top: winTop+'px'}">
+        <view class="popup-header" @click="close">
+            <slot name="header"></slot>
+        </view>
+        <view :style="{ minHeight: (contentHeight)+ 'vh'}" class="popup-content fadeInUp animated">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'custom-popup',
+        data() {
+            return {
+                winWidth: 0,
+                winHeight: 0,
+                winTop: 0,
+                contentHeight: 30,
+            }
+        },
+        props: {
+            visible: {
+                type: Boolean,
+                require: true,
+                default: false
+            },
+            hide: {
+                type: Number,
+                default: 0
+            },
+            contentH: {
+                type: Number,
+                default: 30
+            }
+        },
+        created() {
+            var that = this
+            if (this.contentH) {
+                this.contentHeight = this.contentH
+            }
+            uni.getSystemInfo({
+                success: function(res) {
+                    if (that.hide === 0) {
+                        that.winWidth = res.screenWidth
+                        that.winHeight = res.screenHeight
+                        that.winTop = 0
+                    } else {
+                        that.winWidth = res.windowWidth
+                        that.winHeight = res.windowHeight
+                        that.winTop = res.windowTop
+                    }
+
+                }
+            });
+        },
+        methods: {
+            close(e) {
+                this.$emit('onClose')
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .tianditu-popop {
+        position: fixed;
+        left: 0;
+        z-index: 403;
+        background-color: rgba(0, 0, 0, 0.6);
+        display: flex;
+        flex-direction: column;
+    }
+
+    .popup-header {
+        flex: 1;
+    }
+
+    .popup-content {
+        background-color: #FFFFFF;
+        min-height: 300px;
+        width: 100%;
+        /*     position: absolute;
+        bottom: 0;
+        left: 0; */
+    }
+
+    /*base code*/
+    .animated {
+        -webkit-animation-duration: 1s;
+        animation-duration: 1s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+
+    .animated.infinite {
+        -webkit-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+    }
+
+    .animated.hinge {
+        -webkit-animation-duration: 2s;
+        animation-duration: 2s;
+    }
+
+    @keyframes fadeInUp {
+        0% {
+            opacity: 0;
+            -webkit-transform: translate3d(0, 100%, 0);
+            -ms-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0)
+        }
+
+        100% {
+            opacity: 1;
+            -webkit-transform: none;
+            -ms-transform: none;
+            transform: none
+        }
+    }
+
+    .fadeInUp {
+        -webkit-animation-name: fadeInUp;
+        animation-name: fadeInUp
+    }
+</style>