登录

src/stores/theme.ts

@@ -1,6 +1,7 @@
 import {defineStore} from "pinia";
 import titleLogo from '@/assets/images/web/web-home_title.png'
 import webBgImg from '@/assets/images/web/web-home_bg.png'
+import loginImg from '@/assets/images/global/login-img.png'
 
 export const useThemeStore = defineStore('theme', {
   state: () => ({
@@ -10,7 +11,7 @@ export const useThemeStore = defineStore('theme', {
     logo: '',
     titleLogo: titleLogo,
     webBgImg: webBgImg,
-    loginImg: titleLogo,
+    loginImg: loginImg,
   }),
   getters: {
   },

src/views/global/login/index.vue

@@ -1,24 +1,202 @@
 <template>
-  <div>
-    <h1>这里是登录页面</h1>
-    <el-button @click="onLogin">登录成功</el-button>
+  <div class="login" :style="{
+    backgroundImage: `url('${ThemeStore.webBgImg}')`
+  }">
+    <div class="logo">
+      <img :src="ThemeStore.titleLogo"/>
+    </div>
+    <div class="block">
+      <div class="block-left">
+        <div class="bg-img" :style="{
+          backgroundImage: `url('${ThemeStore.loginImg}')`
+        }"/>
+        <div class="bg">
+          <div class="title">{{ThemeStore.title}}</div>
+          <div class="sub">{{ThemeStore.subTitle}}</div>
+        </div>
+      </div>
+      <div class="block-right">
+        <div class="text">用户登录</div>
+        <CusForm ref="ref_form">
+          <div class="form-label">账号</div>
+          <CusFormColumn
+            :span="24"
+            required
+            v-model:param="state.form.username"
+            default-error-msg="请输入账号"
+          />
+          <div class="form-label">密码</div>
+          <CusFormColumn
+            :span="24"
+            required
+            v-model:param="state.form.password"
+            type="password"
+            show-password
+            default-error-msg="请输入密码"
+          />
+          <div class="form-label">验证码</div>
+          <div class="form-code">
+            <div class="form-code-left">
+              <CusFormColumn
+                :span="24"
+                required
+                v-model:param="state.form.code"
+                default-error-msg="请输入验证码"
+              />
+            </div>
+            <div class="form-code-right"></div>
+          </div>
+
+        </CusForm>
+        <div class="button __hover" @click="onLogin">登录</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive} from "vue";
-import {ElMessage} from "element-plus";
+import {getCurrentInstance, reactive, ref} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
 import {useRouter} from "vue-router";
+import {useThemeStore} from "@/stores";
 
+const ThemeStore = useThemeStore()
 const {proxy} = getCurrentInstance()
 const router = useRouter()
-const state: any = reactive({})
+const state: any = reactive({
+  form: {
+    username: '',
+    password: '',
+    code: '',
+    uuid: ''
+  }
+})
+const ref_form = ref()
 const onLogin = () => {
-  ElMessage.success('登录成功！')
-  localStorage.setItem('ss_token', 'tttoken')
-  location.replace('/')
+  ref_form.value.submit().then(() => {
+    ElMessage.success('登录成功！')
+    localStorage.setItem('ss_token', 'tttoken')
+    location.replace('/')
+  }).catch((e) => {
+    ElMessage({
+      message: e[0].message,
+      grouping: true,
+      type: 'warning',
+    })
+  })
 }
 </script>
 
 <style lang="scss" scoped>
+.login {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 64px;
+  .logo {
+    height: 58px;
+    >img {
+      height: 100%;
+    }
+  }
+  .block {
+    display: flex;
+    box-shadow: 0px 4px 10px 0px rgba(46,129,255,0.1);
+    >div {
+      width: 440px;
+      height: 524px;
+    }
+    .block-left {
+      position: relative;
+      >* {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px 0 0 8px;
+      }
+      .bg-img {
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: 1;
+      }
+      .bg {
+        background-color: rgba(var(--cus-main-color-rgb), 0.7);
+        z-index: 2;
+        padding: 48px;
+        .title {
+          font-weight: 600;
+          font-size: 32px;
+          color: #FFFFFF;
+          line-height: 47px;
+        }
+        .sub {
+          font-weight: 400;
+          font-size: 13px;
+          color: rgba(255,255,255,0.5);
+          line-height: 18px;
+        }
+      }
+    }
+    .block-right {
+      padding: 48px;
+      border-radius: 0 8px 8px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #ffffff;
+      .text {
+        font-weight: 600;
+        font-size: 28px;
+        color: var(--cus-main-color);
+        line-height: 38px;
+        margin-bottom: auto;
+      }
+      .form-label {
+        width: 100%;
+        margin: 0 0 10px;
+        font-weight: bold;
+        font-size: 18px;
+        color: var(--cus-text-color-2);
+        line-height: 21px;
+      }
+      .form-code {
+        width: 100%;
+        display: flex;
+        gap: 10px;
+        .form-code-left {
+          flex: 1;
+        }
+        .form-code-right {
+          background-color: red;
+          width: 150px;
+          height: 48px;
+          border-radius: 4px;
+        }
+      }
+      :deep(.el-input) {
+        height: 48px;
+      }
+      .button {
+        width: 100%;
+        height: 48px;
+        background-color: var(--cus-main-color);
+        box-shadow: 0px 4px 4px 0px rgba(var(--cus-main-color-rgb),0.3);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        color: #FFFFFF;
+        margin-top: 10px;
+      }
+    }
+  }
+}
 </style>