125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<navBar> 登录 </navBar>
|
||
|
|
<view class="container-box">
|
||
|
|
<view class="title">
|
||
|
|
<span>登录</span>
|
||
|
|
<span style="color: #efc54e">仓库管理</span>
|
||
|
|
</view>
|
||
|
|
<view>使用你的手机号登录</view>
|
||
|
|
<view class="login" v-if="!isCode">
|
||
|
|
<view class="login-input">
|
||
|
|
<up-input placeholder="请输入手机号" clearable>
|
||
|
|
<template #prefix>
|
||
|
|
<up-text
|
||
|
|
text="手机号"
|
||
|
|
margin="0 3px 0 0"
|
||
|
|
color="#000000"
|
||
|
|
style="width: 100rpx"
|
||
|
|
></up-text>
|
||
|
|
</template>
|
||
|
|
</up-input>
|
||
|
|
</view>
|
||
|
|
<view class="login-input">
|
||
|
|
<up-input placeholder="请输入密码" :password="true">
|
||
|
|
<template #prefix>
|
||
|
|
<up-text
|
||
|
|
text="密码"
|
||
|
|
margin="0 3px 0 0"
|
||
|
|
color="#000000"
|
||
|
|
style="width: 100rpx"
|
||
|
|
></up-text>
|
||
|
|
</template>
|
||
|
|
</up-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
<view class="code-box">
|
||
|
|
<span style="color: #888888">已发送验证码至 </span>
|
||
|
|
<span>123123123</span>
|
||
|
|
</view>
|
||
|
|
<up-code-input v-model="code" :maxlength="6"></up-code-input>
|
||
|
|
</view>
|
||
|
|
<view> </view>
|
||
|
|
<view> </view>
|
||
|
|
<view
|
||
|
|
style="text-align: right; color: #e3af1c; margin-top: 20rpx"
|
||
|
|
@click="toCode"
|
||
|
|
>验证码登录</view
|
||
|
|
>
|
||
|
|
<up-button
|
||
|
|
style="width: 626rpx; margin: auto; height: 96rpx"
|
||
|
|
color="#EFC54E"
|
||
|
|
throttleTime="5"
|
||
|
|
:loading="loading"
|
||
|
|
v-if="!isCode"
|
||
|
|
>登录</up-button
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
import useToast from "@/hooks/toast/useToast.js";
|
||
|
|
const { showMessage } = useToast();
|
||
|
|
const loading = ref(false);
|
||
|
|
const isCode = ref(false);
|
||
|
|
const code = ref("");
|
||
|
|
// const show = () => {
|
||
|
|
// showMessage({ type: "default", message: "验证码已发送" });
|
||
|
|
// };
|
||
|
|
const toCode = () => {
|
||
|
|
isCode.value = true;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
page {
|
||
|
|
background: url("@/static/bg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-attachment: fixed;
|
||
|
|
height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
:deep(.u-code-input) {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
gap: 20rpx;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
.container-box {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 62rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.title {
|
||
|
|
margin-top: 124rpx;
|
||
|
|
font-size: 64rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.login {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-top: 140rpx;
|
||
|
|
gap: 20rpx;
|
||
|
|
.login-input {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
padding: 32rpx 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 96rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.code-box {
|
||
|
|
margin-top: 84rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|