commit
61219dd88e
@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<router-view/>
|
||||
<div id="app">
|
||||
<MyComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyComponent from './components/MainPage.vue';
|
||||
|
||||
export default {
|
||||
name: 'App'
|
||||
components: {
|
||||
MyComponent
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 你可以在这里添加全局样式 */
|
||||
</style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div class="demo">
|
||||
<Button type="primary" @click="handleClick">Welcome!</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Demo',
|
||||
setup() {
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$Message.info('Welcome to View UI Plus Demo!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.demo{
|
||||
color: lightcoral;
|
||||
font-size: @font-size;
|
||||
text-align: center;
|
||||
margin: 300px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="gradient-1">
|
||||
<transition name="fade">
|
||||
<div class="container">
|
||||
<div class="demo-login">
|
||||
<Login @on-submit="handleSubmit">
|
||||
<h3>用户登录</h3>
|
||||
<br>
|
||||
<UserName name="username" />
|
||||
<Password name="password" />
|
||||
<div class="demo-auto-login">
|
||||
<Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
|
||||
<a>忘记密码</a>
|
||||
</div>
|
||||
<Submit/>
|
||||
<br>
|
||||
<a href="" class="another">换种方式登录</a>
|
||||
</Login>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const autoLogin = true;
|
||||
const anim = 0;
|
||||
async function handleSubmit(valid, {username, password}){
|
||||
if (valid) {
|
||||
const user = {
|
||||
name : $this.username,
|
||||
password : $this.password
|
||||
}
|
||||
const res = await axios.post('https://localhost:8080/Login',user)
|
||||
.then(response => {
|
||||
//成功就跳转主页
|
||||
})
|
||||
.catch(error => {
|
||||
//失败就提醒出错
|
||||
this.$Message.info('error');
|
||||
})
|
||||
console.log(res);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gradient-1 {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
|
||||
}
|
||||
.container{
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
border: pink solid 1px;
|
||||
border-radius: 10px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.demo-login{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 250px;
|
||||
|
||||
}
|
||||
.demo-auto-login{
|
||||
margin-bottom: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
.demo-auto-login a{
|
||||
float: right;
|
||||
}
|
||||
h3{
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="gradient-1">
|
||||
<div class="headArea">
|
||||
<div class="haBody">
|
||||
<div class="haBody-1">
|
||||
<h1>
|
||||
<a href="" class="logo">
|
||||
<img src="../logo1.png" alt="">
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="haBody-2"></div>
|
||||
<div class="haBody-3"></div>
|
||||
<div class="haBody-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.gradient-1 {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
|
||||
}
|
||||
.headArea {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
display: flex; /* 使用 Flexbox 布局 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
.haBody{
|
||||
display: flex;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
background-color: lightblue;
|
||||
}
|
||||
.haBody-1{
|
||||
display: flex;
|
||||
background-image: url();
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
.haBody-2{
|
||||
display: flex;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: blue;
|
||||
}
|
||||
.haBody-3{
|
||||
display: flex;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: red;
|
||||
}
|
||||
.haBody-4{
|
||||
display: flex;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.logo{
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="demo-login">
|
||||
<Login @on-submit="handleSubmit">
|
||||
<Mobile name="mobile" />
|
||||
<Captcha name="captcha" :field="['mobile']" @on-get-captcha="handleGetCaptcha" />
|
||||
<Submit />
|
||||
</Login>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSubmit (valid, { mobile, captcha }) {
|
||||
if (valid) {
|
||||
this.$Modal.info({
|
||||
title: '输入的内容如下：',
|
||||
content: 'mobile: ' + mobile + ' | captcha: ' + captcha
|
||||
});
|
||||
}
|
||||
},
|
||||
handleGetCaptcha () {
|
||||
this.$Message.info('获取验证码');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-login{
|
||||
width: 400px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 24 KiB |
Loading…
Reference in new issue