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 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_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview 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> <template>
<div id="userLayout" :class="['user-layout-wrapper', device]"> <div id="userLayout" :class="['user-layout-wrapper', device]">
<div class="container"> <div class="container">
<div class="top"> <!-- <div class="top">
<div class="header"> <div class="header">
<a href="/"> <a href="/">
<img src="~@/assets/logo.png" class="logo" alt="logo"> <img src="~@/assets/logo.png" class="logo" alt="logo">
</a> </a>
</div> </div>
</div> </div> -->
<route-view></route-view> <route-view></route-view>
@ -112,10 +112,11 @@
.main { .main {
min-width: 260px; min-width: 260px;
width: 368px; width: 1000px;
padding: 20px; border-radius: 20px;
border-radius: 10px;
margin: 60px auto; margin: 60px auto;
background-color: #fff;
box-shadow: 0 0 20px #ffffff9e;
} }
.footer { .footer {

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

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