workspace/code/link56/link56-frontend-new/src/views/auth/forget.vue

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'

import { useRouter } from 'vue-router'

const router = useRouter()

function navigateTo(path: string) {
  router.push(path)
}

const carouselList = [
  {
    title: '值得信赖',
    company: '恒星科技有限公司',
    content: '我们已经连续三年使用该平台，数据处理稳定高效，团队协作体验非常顺畅。',
  },
  {
    title: '安全 · 高效',
    company: '博越信息技术',
    content: '平台的权限管理做得很好，操作简单清晰，极大提升了内部管理效率。',
  },
  {
    title: '稳定可靠',
    company: '远航供应链集团',
    content: '系统运行非常稳定，几乎没有出现过宕机情况，客服响应速度也很快。',
  },
  {
    title: '智能化体验',
    company: '蓝海数据服务中心',
    content: '智能报表和自动化功能非常实用，减少了大量人工整理数据的时间。',
  },
  {
    title: '灵活易用',
    company: '中联创投有限公司',
    content: 'UI设计简洁友好，新员工上手很快，各项业务流程也能灵活配置。',
  },
]

const form = reactive<{
  email: string
}>({
  email: '',
})
const formRef = ref<FormInstance>()
const formRules = {
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
  ],
}
const submitLoading = ref(false)

async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate((valid) => {
    if (valid) {
      submitLoading.value = true
    }
  })
}

function onSubmit() {
  console.log('submit!')
}
</script>

<template>
  <div class="auth-wrapper">
    <div class="auth-bg">
      <img src="/auth-bg.jpg">
      <div class="bg-content">
        <el-carousel
          height="150px"
          indicator-position="none"
        >
          <el-carousel-item v-for="(item, index) in carouselList" :key="index">
            <div class="carousel-item">
              <h2 class="title">
                {{ item.title }}
              </h2>

              <span class="content">{{ item.content }}</span>

              <span class="company"> - {{ item.company }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="login-form">
      <img src="/logo.png" class="logo" @click="navigateTo('/')">

      <div class="main">
        <h4 class="title">
          重置密码
        </h4>
        <p class="title-extra">
          请输入您的电子邮箱地址，我们将向您发送一封包含密码重置说明的邮件。
        </p>
        <el-form
          ref="formRef"
          :model="form"
          :rules="formRules"
          label-width="auto"
          label-position="top"
          hide-required-asterisk
        >
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" size="large" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="form-btn" :loading="submitLoading" @click="submitForm(formRef)">
              找回密码
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="footer">
        返回
        <span class="back" @click="navigateTo('/auth/login')">登录</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.auth-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;

  .auth-bg {
    width: 70%;
    height: 100%;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .bg-content {
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translateX(-50%);
      text-align: center;
      color: #fff;
      width: 600px;

      .carousel-item {
        display: flex;
        flex-direction: column;
        .title {
          font-size: 28px;
          line-height: 28px;
          margin-bottom: 16px;
        }
        .content {
          margin-bottom: 8px;
        }
        .company {
          font-size: 14px;
        }
      }
    }
  }

  .form-label-flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;

    .forgot {
      color: #0f6fec;
      cursor: pointer;
    }
  }

  .login-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 36px;

    .logo {
      height: 70px;
      width: 160px;
      cursor: pointer;
    }

    .main {
      flex: 1;
      display: flex;
      justify-content: center;
      flex-direction: column;
      :deep(.el-form-item__label) {
        font-size: 16px;
        width: 100%;
        margin-bottom: 12px;
      }

      .title {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .title-extra {
        font-size: 16px;
        color: #666;
        margin-bottom: 36px;
      }

      .form-btn {
        width: 100%;
        height: 36px;
        font-size: 16px;
        margin-top: 16px;
      }
    }

    .footer {
      font-size: 18px;
      color: #999;
      height: 48px;
      text-align: center;
      line-height: 48px;

      .back {
        color: #0f6fec;
        cursor: pointer;
      }
    }
  }
}
</style>