first commit

src/pages/login.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useTheme } from 'vuetify'
+import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
+
+import logo from '@images/logo.svg?raw'
+import authV1MaskDark from '@images/pages/auth-v1-mask-dark.png'
+import authV1MaskLight from '@images/pages/auth-v1-mask-light.png'
+import authV1Tree2 from '@images/pages/auth-v1-tree-2.png'
+import authV1Tree from '@images/pages/auth-v1-tree.png'
+
+const form = ref({
+  email: '',
+  password: '',
+  remember: false,
+})
+
+const vuetifyTheme = useTheme()
+
+const authThemeMask = computed(() => {
+  return vuetifyTheme.global.name.value === 'light'
+    ? authV1MaskLight
+    : authV1MaskDark
+})
+
+const isPasswordVisible = ref(false)
+</script>
+
+<template>
+  <div class="auth-wrapper d-flex align-center justify-center pa-4">
+    <VCard
+      class="auth-card pa-4 pt-7"
+      max-width="448"
+      min-width="448"
+    >
+      <VCardItem class="justify-center">
+        <template #prepend>
+          <div class="d-flex">
+            <div v-html="logo" />
+          </div>
+        </template>
+
+        <VCardTitle class="font-weight-semibold text-2xl text-uppercase">
+          MoviePilot
+        </VCardTitle>
+      </VCardItem>
+
+      <VCardText class="pt-2">
+        <h5 class="text-h5 font-weight-semibold mb-1">
+          欢迎使用 MoviePilot! 👋🏻
+        </h5>
+        <p class="mb-0">
+          请输入用户名密码登录
+        </p>
+      </VCardText>
+
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <!-- email -->
+            <VCol cols="12">
+              <VTextField
+                v-model="form.email"
+                label="用户名"
+                type="email"
+              />
+            </VCol>
+
+            <!-- password -->
+            <VCol cols="12">
+              <VTextField
+                v-model="form.password"
+                label="密码"
+                :type="isPasswordVisible ? 'text' : 'password'"
+                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                @click:append-inner="isPasswordVisible = !isPasswordVisible"
+              />
+
+              <!-- remember me checkbox -->
+              <div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
+                <VCheckbox
+                  v-model="form.remember"
+                  label="保持登录"
+                />
+              </div>
+
+              <!-- login button -->
+              <VBtn
+                block
+                type="submit"
+                to="/"
+              >
+                登录
+              </VBtn>
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+    </VCard>
+
+    <VImg
+      class="auth-footer-start-tree d-none d-md-block"
+      :src="authV1Tree"
+      :width="250"
+    />
+
+    <VImg
+      :src="authV1Tree2"
+      class="auth-footer-end-tree d-none d-md-block"
+      :width="350"
+    />
+
+    <!-- bg img -->
+    <VImg
+      class="auth-footer-mask d-none d-md-block"
+      :src="authThemeMask"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+@use "@core/scss/pages/page-auth.scss";
+</style>