From 1788c96aea9247cc36ef8b82734997f1a6a92fb4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 23 八月 2024 11:07:42 +0800
Subject: [PATCH] 新增新版本。静安区特供版
---
src/views/LoginPage.vue | 185 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 183 insertions(+), 2 deletions(-)
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index ae1bd3e..e02c33d 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -1,9 +1,190 @@
<template>
- <div>LoginPage</div>
+ <div class="background">
+ <div class="title-content">椋炵窘澶ф皵鐜鏅鸿兘璧拌埅鐩戞祴绯荤粺</div>
+
+ <div class="flexbox flex-space-around">
+ <img :src="underwayPng" alt="璧拌埅鐩戞祴" class="img-1" />
+
+ <div class="input-box flexbox">
+ <div class="flexbox-col align-items" style="margin: auto">
+ <div class="flexbox-col input-content flex-space-between">
+ <el-form
+ :model="formObj"
+ ref="formRef"
+ :rules="rules"
+ label-position="top"
+ >
+ <el-form-item label="鐢ㄦ埛鍚�" prop="userName">
+ <el-input
+ size="default"
+ v-model="formObj.userName"
+ placeholder="鐢ㄦ埛鍚�"
+ style="width: 200px"
+ />
+ </el-form-item>
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ size="default"
+ type="password"
+ show-password
+ v-model="formObj.password"
+ placeholder="瀵嗙爜"
+ style="width: 200px"
+ />
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="btn-login" @click="login">鐧诲綍</div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import underwayPng from '@/assets/mipmap/underway-2.png';
+import { ElMessage } from 'element-plus';
+
export default {
- name: 'LoginPage'
+ data() {
+ return {
+ underwayPng: underwayPng,
+ formObj: {},
+ rules: {
+ userName: [
+ {
+ required: true,
+ message: '璇疯緭鍏ョ敤鎴峰悕',
+ trigger: 'blur'
+ }
+ ],
+ password: [
+ {
+ required: true,
+ message: '璇疯緭鍏ュ瘑鐮�',
+ trigger: 'blur'
+ }
+ ]
+ }
+ };
+ },
+ methods: {
+ login() {
+ this.$refs.formRef.validate((valid) => {
+ if (valid) {
+ if (
+ this.formObj.userName == 'jingan' &&
+ this.formObj.password == 'jingan123'
+ ) {
+ this.$router.replace('/index/hmode');
+ } else {
+ ElMessage({
+ message: '鐢ㄦ埛鍚嶆垨瀵嗙爜閿欒',
+ type: 'error'
+ });
+ }
+ }
+ });
+ }
+ }
};
</script>
+<style scoped>
+.background {
+ background-color: #002378;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ min-height: 768px;
+ min-width: 1366px;
+}
+
+.title-content {
+ /* position: absolute; */
+ width: 100%;
+ height: 200px;
+ padding: 3vh 0 0 0;
+ /* top: 80px;
+ left: 0;
+ right: 0; */
+ color: white;
+ font-size: 1.4rem;
+ display: flex;
+ justify-content: center;
+ background-image: url('@/assets/mipmap/title_bg.png');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+.img-1 {
+ min-height: 500px;
+ height: 60vh;
+ /* margin-left: 6vw; */
+}
+
+.input-box {
+ width: 400px;
+ height: 420px;
+ /* background-color: aquamarine; */
+ background-image: url('@/assets/mipmap/border.png');
+ background-size: 100% 100%;
+ color: white;
+}
+
+.input-content {
+}
+
+.input-content .text-box {
+ width: 220px;
+ height: 28px;
+ font-size: 12px;
+ border-radius: 6px;
+}
+
+.btn-login {
+ margin-top: 20px;
+ border-radius: 6px;
+ padding: 8px 60px;
+ box-shadow: 10px 10px 10px rgba(39, 39, 39, 0.473);
+ background: -moz-linear-gradient(
+ left,
+ rgb(109, 213, 231),
+ rgb(80, 166, 202),
+ rgb(65, 141, 186),
+ rgb(33, 90, 154),
+ rgb(13, 56, 133),
+ rgb(11, 53, 131)
+ );
+ background: -ms-linear-gradient(
+ left,
+ rgb(109, 213, 231),
+ rgb(80, 166, 202),
+ rgb(65, 141, 186),
+ rgb(33, 90, 154),
+ rgb(13, 56, 133),
+ rgb(11, 53, 131)
+ );
+ background: -o-linear-gradient(
+ left,
+ rgb(109, 213, 231),
+ rgb(80, 166, 202),
+ rgb(65, 141, 186),
+ rgb(33, 90, 154),
+ rgb(13, 56, 133),
+ rgb(11, 53, 131)
+ );
+ background: -webkit-linear-gradient(
+ left,
+ rgb(109, 213, 231),
+ rgb(80, 166, 202),
+ rgb(65, 141, 186),
+ rgb(33, 90, 154),
+ rgb(13, 56, 133),
+ rgb(11, 53, 131)
+ );
+ cursor: pointer;
+}
+</style>
--
Gitblit v1.9.3