root/apt-nl-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航、车辆、系统、弹窗、登录

Browse Source
This commit is contained in:
caill
2023-10-21 17:28:31 +08:00
parent 0fee4ca8a3
commit 788e748ab3
48 changed files with 772 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/pages/modules/login/login.vue
View File

@@ -1,55 +1,42 @@
<template>
<div class="login-container">
<div class="login-header">
<div class="login_logo"></div>
</div>
<div class="login-bottom"></div>
<div class="login-wraper">
<div class="login-logo-wraper">
<div class="login-logo"></div>
<div class="login-logo-txts">
<p class="login-logo-txt1">诺力智能搬运车系统</p>
<p class="login-logo-txt2">NoBleLift intelligent truck system</p>
<div class="navs-wraper">
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">密码登录</button>
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
</div>
<div v-show="tab === 0" class="login-content_wraper">
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label" @click="toFocus(1)">用户名</div>
<input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
</div>
<div class="login-item">
<div class="login-label" @click="toFocus(2)">密码</div>
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
</div>
</div>
<div class="login-buttons-wraper">
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
</div>
</div>
<div class="login-content">
<div v-show="tab === 0" class="login-content_wraper">
<div class="dl">登录</div>
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label" @click="toFocus(1)">用户名</div>
<input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
</div>
<div class="login-item">
<div class="login-label" @click="toFocus(2)">密码</div>
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
</div>
<div v-show="tab === 1" class="login-content_wraper">
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
<input type="text" class="login-input login-input_1" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
</div>
<!-- <div class="login-setup-wraper">
<div class="setup-info pointer" @click="toSetup">配置信息</div>
<router-link to="/home">忘记密码</router-link>
</div> -->
<div class="login-setup-wraper login-setup-wraper__r">
<div class="setup-info pointer" @click="toSetup">配置信息</div>
</div>
<div class="login-buttons-wraper">
<button class="button button--primary button-login" :disabled="disabled" @click="saveLogin">登录</button>
<div class="login-item">
<div class="login-label login-label_1" @click="toFocus(4)">刷新时间（秒）</div>
<input type="number" class="login-input login-input_1" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
</div>
</div>
<div v-show="tab === 1" class="login-content_wraper">
<div class="dl">配置</div>
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label" @click="toFocus(3)">域名地址</div>
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
</div>
<div class="login-item">
<div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
</div>
</div>
<div class="login-setup-wraper login-setup-wraper__r">
<div class="setup-info pointer" @click="toLogin">立即登录</div>
</div>
<div class="login-buttons-wraper">
<button class="button button--primary button-login" @click="saveSetup">配置</button>
</div>
<div class="login-buttons-wraper">
<button class="button_control" @click="saveSetup"><p>配置</p></button>
</div>
</div>
</div>
@@ -186,74 +173,72 @@ export default {
.login-container
position relative
_wh(100%, 100%)
background-color #64b4dc
background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
_fj(center)
.login-header
position absolute
top 0
_wh(100%, 181px)
background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
.login_logo
_wh(100%, 100%)
background center / 532px 127px url(../../../images/new/logo.png) no-repeat
.login-bottom
position absolute
bottom 0
_wh(100%, 175px)
background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
.login-wraper
_fj()
_wh(60%, 65%)
padding 20px
background-color #fff
border-radius 20px
.login-logo-wraper
width 50%
padding 20px
_fj(center,,column)
.login-logo
width 100px
height 112px
background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
.login-logo-txts
// margin-top 20px
text-align center
.login-logo-txt1
_font(24px, 34px, $red2,bold,center)
.login-logo-txt2
_font(20px, 34px, #464646,,center)
.login-content
width 50%
padding 20px 10px
_wh(900px, 702px)
padding 87px 85px 50px 70px
background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
.login-content_wraper
width 100%
padding 0 10%
padding 51px 45px 51px
margin 0 auto
_fj(center,,column)
.dl
width 100%
_font(20px, 50px, #333, bold, center)
margin-bottom 30px
.navs-wraper
_wh(100%, 107px)
_fj(flex-start)
background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
padding 1px 0 35px 28px
.nav_item
_wh(270px, 73px)
padding 10px 0 0 52px
_font(40px, 40px, #99B1DD,,)
font-family: YouSheBiaoTiHei;
background none
&:first-child
background center / 100% url(../../../images/new/login_tab.png) no-repeat
.nav_item_active
color #fff
.login-items-wraper
width 100%
.login-item
_fj()
_wh(100%, 40px)
background-color #fff
padding 5px 10px
border 1px solid $gray2
border-radius 8px
+.login-item
margin-top 20px
width 100%
margin-bottom 40px
.login-label
width 115px
_font(16px, 30px, $gray1,,)
_font(30px, 80px, #AFBED8,,right)
.login-label_1
width 215px
.login-input
width calc(100% - 115px)
_font(16px, 30px, $gray1,,)
.login-setup-wraper
width 100%
margin-top 10px
_fj()
a
_font(16px, 30px, $red1,,)
.login-setup-wraper__r
justify-content flex-end
.setup-info
color $red1
.setup-info
_font(16px, 30px, $fc1,,)
width calc(100% - 140px)
_font(30px, 78px, #fff,,)
background: rgba(45,88,184,0.1);
border: 1px solid #4980BD;
padding 0 22px
&:focus
background: rgba(45,88,184,0.25);
border: 2px solid #21D0F2;
line-height 76px
.login-input_1
width calc(100% - 240px)
.login-buttons-wraper
width 100%
margin-top 10px
margin-top 12px
padding-left 180px
.button-login
width 100%
border-radius 20px