beta

2026-02-10 09:51:18 +08:00
commit 634e0b9456
150 changed files with 18730 additions and 0 deletions
@@ -0,0 +1,116 @@
+<template>
+    <a-drawer
+        class="drawer"
+        placement="bottom"
+        :maskClosable="true"
+        height="480"
+        :visible="visible"
+        :destroyOnClose="true"
+        getContainer="#app"
+        :bodyStyle="{ background: '#f6f6f6', paddingTop: 0}"
+        :headerStyle="{ background: '#f6f6f6' }"
+        @close="close"
+        >
+        <a-row type="flex" justify="center">
+            <a-col style="max-width: 500px">
+                <div style="width: 100%;height: 80px; padding: 0 10px;">
+                    <span class="input val">
+                        {{ value }}
+                        <span class="input-addon" @click="backspace" v-show="value.length > 0">
+                            <arrow-left-outlined />
+                        </span>
+                    </span>
+                </div>
+                <a-space style="flex-wrap: wrap; justify-content: center;" :size="10">
+                    <span @click="input(i)" class="number" v-for="(i, k) in numbers" :key="k">{{i}}</span>
+                </a-space>
+                <a-space style="margin-top:10px; width: 100%; justify-content: center;" :size="10">
+                    <span @click="input('.')" class="number">·</span>
+                    <span @click="input('0')" class="number">0</span>
+                    <span @click="enter" class="number">确认</span>
+                </a-space>
+            </a-col>
+        </a-row>
+    </a-drawer>
+
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            visible: false,
+            numbers: [1,2,3,4,5,6,7,8,9],
+            value: '',
+            isError: false
+        }
+    },
+    methods: {
+        init() {
+            this.value = ""
+            this.isError = false
+        },
+        input(val) {
+            this.value += val
+            this.$emit('input', val)
+        },
+        enter() {
+            this.$emit('submit', parseInt(this.value))
+            this.close()
+        },
+        backspace() {
+            this.value = this.value.slice(0, -1)
+        },
+        open() {
+            this.init()
+            this.visible = true
+        },
+        close() {
+            this.visible = false
+        }
+    }
+}
+</script>
+
+<style scoped>
+.title{
+    text-align: center;
+    margin-bottom: 10px;
+}
+.input, .number{
+    width: 152px;
+    height: 74px;
+    background: #fff;
+    color: #333;
+    display: inline-block;
+    line-height: 74px;
+    border-radius: 10px;
+    font-size: 24px;
+    border: 1px solid #eee;
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    font-weight: 600;
+}
+.input.error{
+    color: red;
+    border-color: red;
+}
+.number{
+    height: 74px;
+    line-height: 74px;
+    font-size: 30px;
+}
+
+.input.val{
+    width: 100%;
+    font-size: 40px;
+    letter-spacing: 4px;
+    position: relative;
+}
+.input-addon{
+    position: absolute;
+    right: 16px;
+    color: #999;
+}
+</style>