yangjun
/
nyzy_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式

This commit is contained in:
wangshengnan 2022-05-11 09:04:30 +08:00
parent 10a847deb0
commit 17bcd4e774
6 changed files with 146 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,4 +1,4 @@
NODE_ENV=development
VUE_APP_API_BASE_URL=http://127.0.0.1:8890/nyzy
VUE_APP_API_BASE_URL=http://124.71.184.231:8891/nyzy
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview

BIN
src/assets/bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 231 KiB

After

Width:  |  Height:  |  Size: 168 KiB

BIN
src/assets/dlbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 592 KiB

BIN
src/assets/logobg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

11
src/components/layouts/UserLayout.vue
View File

@ -1,13 +1,13 @@
<template>
<div id="userLayout" :class="['user-layout-wrapper', device]">
<div class="container">
<div class="top">
<!-- <div class="top">
<div class="header">
<a href="/">
<img src="~@/assets/logo.png" class="logo" alt="logo">
</a>
</div>
</div>
</div> -->
<route-view></route-view>
@ -112,10 +112,11 @@
.main {
min-width: 260px;
width: 368px;
padding: 20px;
border-radius: 10px;
width: 1000px;
border-radius: 20px;
margin: 60px auto;
background-color: #fff;
box-shadow: 0 0 20px #ffffff9e;
}
.footer {

240
src/views/user/Login.vue
View File

@ -1,111 +1,116 @@
<template>
<div class="main">
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
<a-tabs
:activeKey="customActiveKey"
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@change="handleTabClick">
<a-tab-pane key="tab1" tab="账号密码登录">
<a-form-item>
<a-input
size="large"
v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
type="text"
placeholder="请输入帐户名">
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<div class="clearfloat">
<div class="leimg">
<img src="~@/assets/dlbg.png" class="logo" alt="logo">
</div>
<div class="rikuang">
<div class="dlitem">吉林省农业资源信息平台</div>
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
<a-tabs
:activeKey="customActiveKey"
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@change="handleTabClick">
<a-tab-pane key="tab1" tab="账号密码登录">
<a-form-item>
<a-input
size="large"
v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
type="text"
placeholder="请输入帐户名">
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="['password',validatorRules.password]"
size="large"
type="password"
autocomplete="false"
placeholder="密码">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="['password',validatorRules.password]"
size="large"
type="password"
autocomplete="false"
placeholder="密码">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-row :gutter="0">
<a-col :span="16">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
placeholder="请输入验证码">
<a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="8" style="text-align: right">
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
</a-row>
<a-row :gutter="0">
<a-col :span="16">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
placeholder="请输入验证码">
<a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="8" style="text-align: right">
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
</a-row>
</a-tab-pane>
<!-- <a-tab-pane key="tab2" tab="手机号登录">
<a-form-item>
<a-input
v-decorator="['mobile',validatorRules.mobile]"
size="large"
type="text"
placeholder="手机号">
<a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-tab-pane>
<!-- <a-tab-pane key="tab2" tab="手机号登录">
<a-form-item>
<a-input
v-decorator="['mobile',validatorRules.mobile]"
size="large"
type="text"
placeholder="手机号">
<a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-form-item>
<a-input
v-decorator="['captcha',validatorRules.captcha]"
size="large"
type="text"
placeholder="请输入验证码">
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="8">
<a-button
class="getCaptcha"
tabindex="-1"
:disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
</a-col>
</a-row>
</a-tab-pane> -->
</a-tabs>
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-form-item>
<a-input
v-decorator="['captcha',validatorRules.captcha]"
size="large"
type="text"
placeholder="请输入验证码">
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="8">
<a-button
class="getCaptcha"
tabindex="-1"
:disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
</a-col>
</a-row>
</a-tab-pane> -->
</a-tabs>
<!-- <a-form-item>
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox>
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码
</router-link>
<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
注册账户
</router-link>
</a-form-item> -->
<a-form-item style="margin-top:24px">
<a-button
size="large"
type="primary"
htmlType="submit"
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">确定
</a-button>
</a-form-item>
</a-form>
<!-- <a-form-item>
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox>
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码
</router-link>
<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
注册账户
</router-link>
</a-form-item> -->
<a-form-item style="margin-top:24px">
<a-button
size="large"
type="primary"
htmlType="submit"
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">确定
</a-button>
</a-form-item>
</a-form>
</div>
<two-step-captcha
v-if="requiredTwoStepCaptcha"
:visible="stepCaptchaVisible"
@ -377,7 +382,7 @@
</script>
<style lang="less" scoped>
.user-layout-login {
label {
font-size: 14px;
@ -398,6 +403,8 @@
font-size: 16px;
height: 40px;
width: 100%;
background-color: #0067cc;
border-color: #0067cc;
}
.user-login-other {
@ -426,6 +433,37 @@
</style>
<style>
.clearfloat:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearfloat{
zoom:1
}
.leimg{
float: left;
width: 50%;
}
.rikuang{
width: 50%;
float: right;
padding: 40px;
box-sizing: border-box;
}
.ant-form{
width: 80%;
margin: auto;
}
.dlitem{
font-size: 34px;
color: #0067cc;
font-weight: 600;
text-align: center;
margin-bottom: 40px;
}
.valid-error .ant-select-selection__placeholder{
color: #f5222d;
}