83 lines
1.2 KiB
Plaintext
83 lines
1.2 KiB
Plaintext
<template>
|
|
<view class="action-row" :class="compact ? 'compact-row' : ''">
|
|
<view v-for="item in actions" :key="item.key" class="action-btn" :class="item.tone" @click="handleClick(item.key)">
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
type ServiceActionItem = {
|
|
key: string
|
|
label: string
|
|
tone: string
|
|
}
|
|
|
|
defineProps({
|
|
actions: {
|
|
type: Array<ServiceActionItem>,
|
|
default: [] as Array<ServiceActionItem>
|
|
},
|
|
compact: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'action', key: string): void
|
|
}>()
|
|
|
|
function handleClick(key: string) {
|
|
emit('action', key)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.action-row {
|
|
margin-top: 20rpx;
|
|
flex-direction: row;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.compact-row {
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 20rpx 0;
|
|
border-radius: 16rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ghost {
|
|
background: #ffffff;
|
|
color: #16324f;
|
|
border-width: 2rpx;
|
|
border-style: solid;
|
|
border-color: #d7e0ea;
|
|
}
|
|
|
|
.primary {
|
|
background: #1d4ed8;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.warn {
|
|
background: #fff4e5;
|
|
color: #b45309;
|
|
}
|
|
|
|
.success {
|
|
background: #e8f7ef;
|
|
color: #15803d;
|
|
}
|
|
|
|
.teal {
|
|
background: #e6fffb;
|
|
color: #0f766e;
|
|
}
|
|
</style> |