u

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

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function navigateTo(path: string) {
+  router.push(path)
+}
+
+// do not use same name with ref
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+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 in 4" :key="item">
+            <h3 class="small justify-center" text="2xl">
+              {{ item }}
+            </h3>
+          </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
+          :model="form"
+          label-width="auto"
+          label-position="top"
+        >
+          <el-form-item label="邮箱">
+            <el-input v-model="form.name" placeholder="请输入邮箱" size="large" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" class="form-btn">
+              找回密码
+            </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: 12%;
+      transform: translateX(-50%);
+      text-align: center;
+      color: #fff;
+      width: 600px;
+    }
+  }
+  .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: 48px 56px 24px 56px;
+
+    .logo {
+      height: 70px;
+      width: 160px;
+      cursor: pointer;
+      margin-bottom: 48px;
+    }
+
+    .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>