commit
61219dd88e
@ -1,9 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-view/>
|
<div id="app">
|
||||||
|
<MyComponent />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import MyComponent from './components/MainPage.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App'
|
components: {
|
||||||
}
|
MyComponent
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</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