42 lines
1006 B
Vue
42 lines
1006 B
Vue
<template>
|
|
<view class="footer-button-bar" :style="elderVarStyle">
|
|
<view class="footer-button" :class="{ 'footer-button--brown': theme === 'brown' }" @click="onClick"> {{ text }}</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import useDebounce from '@/hooks/useDebounce';
|
|
import useElder from '@/hooks/useElder';
|
|
|
|
const emits = defineEmits(['onClick'])
|
|
const props = defineProps({
|
|
text: { type: String, default: '确定' },
|
|
theme: { type: String, default: 'blue' } // 'blue' 或 'brown'
|
|
})
|
|
const { elderVarStyle } = useElder();
|
|
const onClick = useDebounce(() => {
|
|
emits('onClick')
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.footer-button-bar {
|
|
padding: 24rpx 30rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.footer-button {
|
|
height: 44px;
|
|
line-height: 43px;
|
|
font-size: var(--text-lg);
|
|
background: $theme-brown-primary;
|
|
color: #fff;
|
|
border-radius: 16rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-button--brown {
|
|
background: $theme-brown-primary;
|
|
box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);
|
|
}
|
|
</style>
|