dz-app/components/mx-submit-layout/mx-submit-layout.vue

<template>
    <view class="page-content">
        <mx-nav-bar :title="title" v-bind="barOptions"/>
        <slot name="prepend"/>
        <view class="m-40 p-40 mx-card bg-white">
            <slot/>
        </view>
        <slot name="append"/>
        <view class="mt-20 mb-40 fx-col fx-cen-cen gap-40">
            <slot name="prefix"/>
            <uv-button :loading="loading" type="primary" shape="circle" size="large" :text="buttonText"
                       color="linear-gradient(to right, var(--primary-light-color), var(--primary-deep-color))"
                       :custom-style="{width: '55vw', height: '44px'}" @click="$emit('submit')"/>
            <slot name="suffix"/>
        </view>
    </view>
</template>

<script setup>
import {createPropDefine} from "@/utils";

defineProps({
    title: createPropDefine(''),
    buttonText: createPropDefine('保存'),
    loading: createPropDefine(false, Boolean),
    barOptions: createPropDefine({}, Object)
})
defineEmits(['submit'])
</script>

<style scoped>

</style>