You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<div class="page-container tn-gradient-bg__cool-5">
|
|
<cheader></cheader>
|
|
<div class="login-body">
|
|
<div class="login-form tn-grey_shadow">
|
|
<p>账号登录</p>
|
|
<tn-input v-model="username" placeholder="请输入用户名">
|
|
<template #prefix>
|
|
<uni-icons type="contact" size="18" color="#ccc"></uni-icons>
|
|
</template>
|
|
</tn-input>
|
|
<div class="divider"></div>
|
|
<tn-input v-model="password" type="password" placeholder="请输入密码">
|
|
<template #prefix>
|
|
<uni-icons type="locked-filled" size="18" color="#ccc"></uni-icons>
|
|
</template>
|
|
</tn-input>
|
|
<div class="divider"></div>
|
|
<tn-button width="250px" height="36px" @click="loginAction">登 录</tn-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import cheader from '@/components/header.vue'
|
|
import { ref } from 'vue'
|
|
|
|
let username = ref('')
|
|
let password = ref('')
|
|
|
|
let loginAction = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/index/index'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.login-body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 90vh;
|
|
|
|
.login-form {
|
|
height: 40vh;
|
|
width: 30vw;
|
|
padding: 15px 40px;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
p {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(to right, #1874CD 70%, #0099ff );
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.divider{
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style> |