first1

src/views/demand/cpns/DemandActionBar.vue

@@ -0,0 +1,129 @@
+<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>