football/pages/order-submit/app-order-submit-row.vue

<template>
    <view class="app-order-submit-row"
          :class="[
                    showBorder ? 'border-bottom' : '',
                    noPadding ? 'no-padding' : '',
                  ]"
          @click="handleClick">
        <slot name="header"></slot>
        <view class="cross-center container">
            <view class="box-grow-1">
                <slot></slot>
            </view>
            <view v-if="showNav" class="box-grow-0">
                <image class="arrow-image" src="/static/image/icon/arrow-right.png"></image>
            </view>
        </view>
        <slot name="footer"></slot>
    </view>
</template>

<script>
    export default {
        name: 'app-order-submit-row',
        props: {
            showNav: {
                type: Boolean,
                default: true,
            },
            showBorder: {
                type: Boolean,
                default: true,
            },
            noPadding: {
                type: Boolean,
                default: false,
            },
        },
        methods: {
            handleClick(e) {
                this.$emit('click', e);
            },
        }
    }
</script>

<style scoped lang="scss">
    $xWidth: #{24rpx};
    $yWidth: #{24rpx};
    .app-order-submit-row {
        background: #fff;

        .container {
            padding: $yWidth $xWidth;
            /* #ifndef MP-TOUTIAO */
            min-height: #{100rpx};
            /* #endif */
            /* #ifdef MP-TOUTIAO */
            min-height: #{50rpx};
            /* #endif */
        }

        .arrow-image {
            width: #{12rpx};
            height: #{24rpx};
            margin-left: $xWidth;
        }
    }

    .app-order-submit-row.border-bottom {
        border-bottom: #{1rpx} solid #e2e2e2;
    }

    .app-order-submit-row.no-padding {
        .container {
            padding: 0 0;
        }
    }
</style>