130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
// 底部固定操作条（设计稿：通栏白底 + 顶部细线；左侧提示 + 右侧三个按钮）
|
||
interface Props {
|
||
saving?: boolean
|
||
submitting?: boolean
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), { saving: false, submitting: false })
|
||
|
||
const emit = defineEmits<{
|
||
'save-draft': []
|
||
reset: []
|
||
submit: []
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<div class="demand-bar">
|
||
<div class="container demand-bar__inner">
|
||
<p class="demand-bar__tip">
|
||
<span class="demand-bar__info" aria-hidden="true">i</span>
|
||
提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
|
||
</p>
|
||
<div class="demand-bar__actions">
|
||
<button
|
||
class="demand-bar__btn"
|
||
type="button"
|
||
:disabled="props.saving || props.submitting"
|
||
@click="emit('save-draft')"
|
||
>
|
||
{{ props.saving ? '保存中…' : '保存草稿' }}
|
||
</button>
|
||
<button
|
||
class="demand-bar__btn"
|
||
type="button"
|
||
:disabled="props.saving || props.submitting"
|
||
@click="emit('reset')"
|
||
>
|
||
重置
|
||
</button>
|
||
<button
|
||
class="demand-bar__btn demand-bar__btn--primary"
|
||
type="button"
|
||
:disabled="props.submitting"
|
||
@click="emit('submit')"
|
||
>
|
||
{{ props.submitting ? '提交中…' : '立即提报' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.demand-bar {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
border-top: 1px solid @border-color;
|
||
background: @white;
|
||
|
||
&__inner {
|
||
.flex(row, space-between, center);
|
||
height: 72px;
|
||
gap: @spacing-base;
|
||
}
|
||
|
||
&__tip {
|
||
.flex(row, flex-start, center);
|
||
gap: @spacing-sm;
|
||
min-width: 0;
|
||
font-size: @font-size-base;
|
||
color: @text-color;
|
||
}
|
||
|
||
&__info {
|
||
.flex(row, center, center);
|
||
flex-shrink: 0;
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1px solid @primary-color;
|
||
border-radius: 50%;
|
||
font-size: 11px;
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
color: @primary-color;
|
||
}
|
||
|
||
&__actions {
|
||
.flex(row, flex-end, center);
|
||
gap: @spacing-base;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__btn {
|
||
height: 36px;
|
||
padding: 0 @spacing-lg;
|
||
border: none;
|
||
border-radius: @radius-round;
|
||
background: @demand-secondary-bg;
|
||
font-size: @font-size-base;
|
||
color: @heading-color;
|
||
cursor: pointer;
|
||
transition: background 0.2s, opacity 0.2s;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: darken(@demand-secondary-bg, 6%);
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
&--primary {
|
||
// 设计稿按钮宽度（247px @1400 版面）由 min-width 兜住，短文案也不塌
|
||
min-width: 240px;
|
||
background: @primary-color;
|
||
color: @white;
|
||
|
||
&:hover:not(:disabled) {
|
||
background: @primary-hover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|