|
@@ -1,49 +1,48 @@
|
|
|
<template>
|
|
|
<div class="conatiner">
|
|
|
- <!-- <p class="introduce">楚楚E-订单系统 <small>是一个便捷、高效的供应链管理软件。我们的系统为您提供基于云端的物流和供应链、库存管理、产品管理等功能,让订货变得无比简单。通过本系统,您可以随时下单或查看订单状态,轻松跟踪进度并且及时调整采购计划。</small></p> -->
|
|
|
- <div class="login-form">
|
|
|
- <p class="color-info">欢迎登录</p>
|
|
|
- <div>
|
|
|
- <p class="title">云链E-订单系统</p>
|
|
|
+ <h1 class="introduce">E-YUNLIAN</h1>
|
|
|
+
|
|
|
+ <div class="login-wrap">
|
|
|
+ <div class="top">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
|
|
|
</div>
|
|
|
- <a-form
|
|
|
- :model="formState"
|
|
|
- name="basic"
|
|
|
- layout="vertical"
|
|
|
- autocomplete="off"
|
|
|
- @finish="onFinish"
|
|
|
- @finishFailed="onFinishFailed"
|
|
|
- >
|
|
|
- <a-form-item
|
|
|
- label="账号"
|
|
|
- name="phonenumber"
|
|
|
- :rules="[{ required: true, message: '请输入账号' }]"
|
|
|
+ <div class="login-form">
|
|
|
+ <p class="color-info">欢迎登录</p>
|
|
|
+ <div>
|
|
|
+ <p class="title">云链E-订单系统</p>
|
|
|
+ </div>
|
|
|
+ <a-form
|
|
|
+ :model="formState"
|
|
|
+ name="basic"
|
|
|
+ layout="vertical"
|
|
|
+ autocomplete="off"
|
|
|
+ @finish="onFinish"
|
|
|
+ @finishFailed="onFinishFailed"
|
|
|
>
|
|
|
- <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号"/>
|
|
|
- </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="账号"
|
|
|
+ name="phonenumber"
|
|
|
+ :rules="[{ required: true, message: '请输入账号' }]"
|
|
|
+ >
|
|
|
+ <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号"/>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
- <a-form-item
|
|
|
- label="密码"
|
|
|
- name="password"
|
|
|
- :rules="[{ required: true, message: '请输入密码!' }]"
|
|
|
- >
|
|
|
- <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
|
|
|
- </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="密码"
|
|
|
+ name="password"
|
|
|
+ :rules="[{ required: true, message: '请输入密码!' }]"
|
|
|
+ >
|
|
|
+ <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
- <a-form-item name="remember">
|
|
|
- <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
|
|
|
- </a-form-item>
|
|
|
+ <a-form-item name="remember">
|
|
|
+ <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
- <a-form-item>
|
|
|
- <a-button :loading="loading" type="primary" html-type="submit" size="large" block>登录</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- <!-- <a-divider><span style="color:#999;font-weight:300">其他登录方式</span></a-divider>
|
|
|
- <span>敬请期待</span> -->
|
|
|
- </div>
|
|
|
- <div class="login-wrap">
|
|
|
- <div class="top">
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
|
|
|
+ <a-form-item>
|
|
|
+ <a-button :loading="loading" type="primary" html-type="submit" size="large" block>登录</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-layout-footer class="footer">
|
|
@@ -165,21 +164,13 @@ export default defineComponent({
|
|
|
}
|
|
|
.introduce{
|
|
|
position: absolute;
|
|
|
- left: 10%;
|
|
|
- top:10vh;
|
|
|
- font-size: 20px;
|
|
|
+ left: 20px;
|
|
|
+ top:20px;
|
|
|
color:#fff;
|
|
|
text-indent: 3rem;
|
|
|
line-height: 3rem;
|
|
|
text-shadow: 0 0px 5px #666;
|
|
|
-}
|
|
|
-.introduce {
|
|
|
- white-space: pre-wrap; /* 允许换行 */
|
|
|
- overflow: hidden; /* 隐藏超出部分 */
|
|
|
- max-width: 700px; /* 固定宽度为 200 像素 */
|
|
|
- animation: typingH 5s forwards;
|
|
|
-
|
|
|
- display: inline-block; /* 让行内元素可以自适应宽度、允许换行 */
|
|
|
+ font-family: fantasy;
|
|
|
}
|
|
|
|
|
|
/* 伪元素来实现光标 */
|