| | |
| | | <template> |
| | | <view class="box"> |
| | | <view class="header"> |
| | | <view class="titleFirst"><b>安全在线教育平台</b></view> |
| | | <view class="main"> |
| | | <view class="header"> |
| | | <view class="titleFirst"><b>安全在线教育平台</b></view> |
| | | </view> |
| | | <view> |
| | | <u-form :model="form" ref="uForm" class="form" > |
| | | <u-form-item style="width: 75%;"><u-input :customStyle="cstyle" v-model="form.username" placeholder="请输入用户名" /></u-form-item> |
| | | <u-form-item style="margin-top: 10px;width: 75%;" ><u-input :customStyle="cstyle" v-model="form.password" type="password" placeholder="请输入密码" /></u-form-item> |
| | | <!-- <view class="loginPsw"> |
| | | <u-checkbox-group > |
| | | <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text> |
| | | </u-checkbox-group> |
| | | <text style="color: lightblue;">忘记密码</text> |
| | | </view> --> |
| | | <u-form-item style="margin-top: 10px;width: 75%;"> |
| | | <u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 44px" @click="Login" type="primary">登录</u-button> |
| | | </u-form-item> |
| | | <!-- <view style="color: white;margin-top: 150px;">技术支持:技术保障部</view>--> |
| | | </u-form> |
| | | </view> |
| | | </view> |
| | | <view> |
| | | <u-form :model="form" ref="uForm" class="form" > |
| | | <u-form-item style="width: 75%;"><u-input :customStyle="cstyle" v-model="form.username" placeholder="请输入用户名" /></u-form-item> |
| | | <u-form-item style="margin-top: 10px;width: 75%;" ><u-input :customStyle="cstyle" v-model="form.password" type="password" placeholder="请输入密码" /></u-form-item> |
| | | <!-- <view class="loginPsw"> |
| | | <u-checkbox-group > |
| | | <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text> |
| | | </u-checkbox-group> |
| | | <text style="color: lightblue;">忘记密码</text> |
| | | </view> --> |
| | | <u-form-item style="margin-top: 10px;width: 75%;"> |
| | | <u-button :loading="isLogining" style="width: 100%;height: 44px" @click="Login" type="primary">登录</u-button> |
| | | </u-form-item> |
| | | <!-- <view style="color: white;margin-top: 150px;">技术支持:技术保障部</view>--> |
| | | </u-form> |
| | | </view> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | isLogining: false, |
| | | cstyle: { |
| | | background: '#fff', |
| | | padding: '10px' |
| | | padding: '10px', |
| | | boxShadow: '0 2px 4px rgba(0,0,0,.2),0 -2px 4px rgba(255,255,255,.2),inset 0 2px 4px rgba(0,0,0,.2)', |
| | | border: '1px solid #fff' |
| | | } |
| | | } |
| | | }, |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style scoped> |
| | | .box{ |
| | | width: 100%; |
| | | height: 100vh; |
| | | background: url('../../static/login1.jpg') no-repeat; |
| | | background: url('../../static/login.jpg') no-repeat; |
| | | background-size: 100% 100%; |
| | | background-attachment: fixed;/* 不设置的话页面滑动时,背景会不铺满*/ |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .main{ |
| | | width: 100%; |
| | | height: 50vh; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: left; |
| | | } |
| | | |
| | | .header { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | text-shadow:0 0 1px #000; |
| | | } |
| | | |
| | | .titleFirst{ |
| | | text-align: center; |
| | | font-size: 32px; |
| | |
| | | color:#fff; |
| | | margin-top: 10px; |
| | | } |
| | | .header { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding-top:120px; |
| | | text-shadow:0 0 1px #000; |
| | | } |
| | | .form{ |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | margin-top: 25%; |
| | | margin-top: 40px; |
| | | } |
| | | .loginPsw{ |
| | | margin-bottom: 20px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .loginBtn{ |
| | | border: 1px solid rgba(255,255,255,.4); |
| | | box-shadow: 0 2px 4px rgba(0,0,0,.2); |
| | | background-image: linear-gradient(#41a2ff,#0f7ff9); |
| | | transition: box-shadow .25s ease !important; |
| | | } |
| | | |
| | | .loginBtn:active{ |
| | | box-shadow: 0 2px 4px rgba(0,0,0,0); |
| | | background-image: linear-gradient(#0f7ff9,#41a2ff); |
| | | } |
| | | |
| | | |
| | | </style> |