Di-Iip/src/views/ContactView.vue

<script setup>
import { reactive, ref } from "vue";
import PageHero from "../components/PageHero.vue";

const submitted = ref(false);
const form = reactive({
  company: "",
  name: "",
  phone: "",
  email: "",
  need: "",
});

function submit() {
  submitted.value = true;
}
</script>

<template>
  <div>
    <PageHero
      kicker=""
      title="获取演示与试点建议"
      subtitle="填写需求信息，我们会在 1 个工作日内与你联系。"
    />

    <section class="section">
      <div class="container grid contactGrid">
        <div class="card card-pad">
          <div class="blockTitle">联系方式</div>
          <div class="muted">热线：400-000-0000</div>
          <div class="muted">邮箱：wubj@keruigroup.com</div>
          <div class="muted">地址：山东省东营市东营区南二路233号</div>
          <div class="divider blockDivider"></div>
          <div class="blockTitle">咨询方向</div>
          <div class="tags">
            <span class="pill">设备接入</span>
            <span class="pill">数据治理</span>
            <span class="pill">低代码应用</span>
            <span class="pill">AI 质检</span>
            <span class="pill">能效优化</span>
          </div>
        </div>

        <div class="card card-pad">
          <div class="blockTitle">需求表单</div>

          <div v-if="submitted" class="success">
            <div class="successTitle">已收到你的需求</div>
            <div class="muted">
              你可以继续修改信息再次提交，或直接通过电话/邮箱联系我们。
            </div>
          </div>

          <form class="form" @submit.prevent="submit">
            <label class="field">
              <span class="label">公司名称</span>
              <input
                v-model="form.company"
                class="input"
                type="text"
                placeholder="例如：某某制造有限公司"
              />
            </label>
            <label class="field">
              <span class="label">联系人</span>
              <input
                v-model="form.name"
                class="input"
                type="text"
                placeholder="你的姓名"
              />
            </label>
            <label class="field">
              <span class="label">联系电话</span>
              <input
                v-model="form.phone"
                class="input"
                type="tel"
                placeholder="手机/座机"
              />
            </label>
            <label class="field">
              <span class="label">邮箱</span>
              <input
                v-model="form.email"
                class="input"
                type="email"
                placeholder="name@company.com"
              />
            </label>
            <label class="field fieldFull">
              <span class="label">需求描述</span>
              <textarea
                v-model="form.need"
                class="input textarea"
                rows="4"
                placeholder="简单描述你的场景与目标"
              ></textarea>
            </label>

            <div class="formActions">
              <button class="btn btn-primary" type="submit">提交需求</button>
            </div>
          </form>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.contactGrid {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
}

.blockTitle {
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.blockDivider {
  margin: 16px 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.success {
  margin-bottom: 14px;
  padding: 12px;
  /* border-radius: var(--radius-md); */
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.successTitle {
  font-weight: 700;
  margin-bottom: 4px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.fieldFull {
  grid-column: 1 / -1;
}

.label {
  font-size: 12px;
  /* font-weight: 800; */
  color: var(--slate-700);
}

.input {
  width: 100%;
  /* border-radius: 12px; */
  border: 1px solid var(--border);
  padding: 10px 12px;
  outline: none;
  background: #fff;
  transition: 160ms ease;
}

.input:focus {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.textarea {
  resize: vertical;
}

.formActions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 960px) {
  .contactGrid {
    grid-template-columns: 1fr;
  }

  .form {
    grid-template-columns: 1fr;
  }
}
</style>