fiee-official-website/src/views/email-alerts/size375/index.vue

<script setup>
import { ref } from "vue";
import axios from "axios";
const form = ref({
  firstName: "",
  lastName: "",
  email: "",
  company: "",
  phone: "",
  alertType: "all",
});
const submitted = ref(false);

async function handleSubmit(e) {
  e.preventDefault();
  const res = await axios.post(
    "https://erpapi-out.szjixun.cn/api/stock/submit/data",
    form.value
  );
  if (res.data.status === 0) {
    submitted.value = true;
  } else {
  }
}
</script>

<template>
  <main class="email-alerts-375">
    <!-- Header -->
    <template v-if="!submitted">
      <div class="title-block">
        <div class="title-bar"></div>
        <h2 class="title">E-Mail Alerts</h2>
        <p class="subtitle">* Required Fields</p>
      </div>
      <!-- Card -->
      <div class="card">
        <form class="form" @submit="handleSubmit">
          <div class="form-field">
            <label>* First Name</label>
            <input v-model="form.firstName" type="text" />
          </div>
          <div class="form-field">
            <label>* Last Name</label>
            <input v-model="form.lastName" type="text" />
          </div>
          <div class="form-field">
            <label>* Email</label>
            <input v-model="form.email" type="email" />
          </div>
          <div class="form-field">
            <label>* Company</label>
            <input v-model="form.company" type="text" />
          </div>
          <div class="form-field">
            <label>* Phone</label>
            <input v-model="form.phone" type="tel" />
          </div>
          <button type="submit" class="submit">Submit</button>
        </form>
      </div>
    </template>
    <template v-else>
      <div class="success-block">
        <div class="title-block">
          <div class="title-bar"></div>
          <h2 class="title">Submitted successfully!</h2>
          <p class="subtitle">The information you submitted is as follows:</p>
        </div>

        <div class="success-card">
          <div class="success-card-item">
            <div class="font-semibold success-card-label">First Name：</div>
            {{ form.firstName || "Not filled in" }}
          </div>
          <div class="success-card-item">
            <div class="font-semibold success-card-label">Last Name：</div>
            {{ form.lastName || "Not filled in" }}
          </div>
          <div class="success-card-item">
            <div class="font-semibold success-card-label">Email：</div>
            {{ form.email || "Not filled in" }}
          </div>
          <div class="success-card-item">
            <div class="font-semibold success-card-label">Company：</div>
            {{ form.company || "Not filled in" }}
          </div>
          <div class="success-card-item">
            <div class="font-semibold success-card-label">Phone：</div>
            {{ form.phone || "Not filled in" }}
          </div>
        </div>
        <div class="submitted-bg"></div>
      </div>
    </template>
  </main>
</template>

<style scoped lang="scss">
/* 375*5.12px design exact *5.12px values from Figma */
.email-alerts-375 {
  max-width: 343 * 5.12px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24 * 5.12px; /* spacing between header and card */
}

.title-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8 * 5.12px;
  padding: 0 16 * 5.12px;
  margin-top: 47 * 5.12px;
}

.title-bar {
  width: 58 * 5.12px;
  height: 7 * 5.12px;
  background: #ff7bac; /* 主题色-粉色 */
}

.title {
  margin: 0;
  color: #000000; /* 标题色 */
  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 24 * 5.12px; /* 手机端主标题 */
  line-height: 24 * 5.12px;
  text-align: center;
}

.subtitle {
  margin: 0;
  width: 100%;
  color: #455363; /* 正文色 */
  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14 * 5.12px; /* 移动端正文 */
  line-height: 14 * 5.12px;
  letter-spacing: 0.48 * 5.12px;
  text-align: center;
}

.card {
  width: 100%;
  background: #ffffff;
  border-radius: 16 * 5.12px;
  box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 24 * 5.12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24 * 5.12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8 * 5.12px;
}

.form-field > label {
  color: #000000;
  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 14 * 5.12px;
  line-height: 14 * 5.12px;
  letter-spacing: 0.48 * 5.12px;
}

.form-field > input {
  width: 100%;
  height: 38 * 5.12px;
  background: #ffffff;
  border: 1 * 5.12px solid #e0e0e6;
  border-radius: 8 * 5.12px;
  padding: 0 12 * 5.12px;
  font-size: 14 * 5.12px;
  outline: none;
}

.submit {
  width: 100%;
  height: 48 * 5.12px;
  border: none;
  border-radius: 8 * 5.12px;
  background: #ff7bac;
  color: #ffffff;
  font-family: "PingFang SC", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 20 * 5.12px; /* 手机端三级标题 */
  line-height: 20 * 5.12px;
  letter-spacing: 1.2 * 5.12px; /* 按钮字间距 */
}

/* success view simple alignment */
.success-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.success-title {
  margin: 0 0 8 * 5.12px 0;
  color: #ff7bac;
  font-weight: 700;
  font-size: 18 * 5.12px;
}

.success-subtitle {
  margin-bottom: 12 * 5.12px;
  color: #374151;
  font-size: 14 * 5.12px;
}

.success-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12 * 5.12px;
  box-shadow: 0 1 * 5.12px 3 * 5.12px rgba(0, 0, 0, 0.08);
  padding: 56 * 5.12px 38 * 5.12px;
  min-height: 484 * 5.12px;
  margin-top: 24 * 5.12px;
}
.submitted-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 186 * 5.12px;
  background-image: url("@/assets/image/375/email-alerts-submit.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
}
.success-card-item {
  display: flex;
  align-items: center;
  margin-bottom: 16 * 5.12px;
}
.success-card-label {
  width: 92 * 5.12px;
}
</style>