root/pad-nl-three-uni
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页样式修改

Browse Source
This commit is contained in:
caill
2024-02-23 18:03:59 +08:00
parent 9cef00a472
commit 9df8b4b10f
22 changed files with 157 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
pages/home/home.vue
View File

@@ -1,6 +1,10 @@
<template>
<view class="content">
<view class="header">首页</view>
<view class="home_content">
<view class="zd-row header">
<view class="zd-col-8 home_title"></view>
<view class="zd-col-8 home_title">首页</view>
<view class="zd-col-8 home_title">首页</view>
</view>
<view class="userInfo-wrap">
<view class="userInfo">
<text class="p1">{{userName}}</text>
@@ -35,7 +39,7 @@
</template>
<script>
import {authority} from '@/utils/getData2.js'
import {authority, getBillsCount} from '@/utils/getData2.js'
export default {
data() {
return {
@@ -47,12 +51,18 @@
},
created () {
this._authority()
this._getBillsCount()
},
methods: {
async _authority () {
let res = await authority()
this.menuList = [...res.sonTree]
},
async _getBillsCount () {
let res = await getBillsCount()
console.log(res)
},
toPage1 (e) {
if (e.sonTree.length > 0) {
@@ -83,11 +93,19 @@
<style lang="stylus">
@import '../../common/style/mixin.styl';
.home_content
position relative
_wh(100%, 100%)
_bis(,'../../static/images/home_bg.jpg', 100%, 100%,bottom)
.zd_content
padding-top 0
.header
height 42px
_font(16px,42px,#333,,center)
height 120rpx
padding 0 30rpx 50rpx 30rpx
_bis(,'../../static/images/header_bg.png', 100%, 100%,bottom)
.home_title
_font(50rpx,60rpx,#fff,,center)
font-family: YouSheBiaoTiHei;
.userInfo-wrap
_fj()
_wh(calc(100% - 30px),80px)

207
pages/login/login.vue
View File

@@ -1,48 +1,62 @@
<template>
<view class="login_bg">
<view class="login-bg relative">
<view class="logo-wraper">
<img src="../../static/images/logo.png" alt="">
</view>
<view class="login_wrap">
<view class="login_tab">
<view class="login_tab_line drift" :style="{'left': drift+'%'}"></view>
<view class="login_tab_item" @tap="_tabChange(0)">登录</view>
<view class="login_tab_item" @tap="_tabChange(50)">配置</view>
</view>
<view class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
<view class="login_card">
<view class="card_wrap">
<view class="inputOuter">
<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
<text v-show="showBtn3" class="iconfont login_icon delete_icon" @tap="clearData(3)"></text>
</view>
<view class="inputOuter">
<input :type="inputType" placeholder="密码" v-model="password" class="inputStyle">
<text class="iconfont login_icon" :class="eyeOpen ? 'eye_colse_icon' : 'eye_open_icon'" @click="passwordShow"></text>
</view>
</view>
<view class="submit">
<button class="primary-button" :disabled="disabled" @click="toLogin">登&nbsp;&nbsp;录</button>
</view>
<view class="scanBox">
<!-- <view class="iconfont scan_icon"></view> -->
<!-- <text class="san_text">扫码登录</text> -->
<text class="san_text" @tap="isUpdate">升级版本</text>
</view>
<view class="login_w">
<view class="zd-row jcflexstart login_tab">
<view class="login_tab_item" :class="{'login_tab_active': drift === 0}" @tap="_tabChange(0)">登录</view>
<view class="login_tab_item" :class="{'login_tab_active': drift === 50}" @tap="_tabChange(50)">配置</view>
</view>
<view class="login_card">
<view class="card_wrap">
<view class="inputOuter">
<input type="text" placeholder="域名地址" v-model="baseUrl" class="inputStyle">
<text v-show="showBtn1" class="iconfont login_icon delete_icon" @tap="clearData(1)"></text>
<view class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
<view class="login_card">
<view class="card_wrap">
<view class="zd-row mgb40">
<view class="zd-col-4 login_label">账号</view>
<view class="zd-col-20">
<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
</view>
</view>
<view class="zd-row mgb40">
<view class="zd-col-4 login_label">密码</view>
<view class="zd-col-20 relative">
<input :type="inputType" placeholder="密码" v-model="password" class="inputStyle">
<text class="iconfont login_icon" :class="eyeOpen ? 'eye_colse_icon' : 'eye_open_icon'" @click="passwordShow"></text>
</view>
</view>
</view>
<view class="zd-row mgt40 mgb40">
<button class="primary-button" :disabled="disabled" @click="toLogin">登&nbsp;&nbsp;录</button>
</view>
<view class="zd-row">
<!-- <view class="iconfont scan_icon"></view> -->
<!-- <text class="san_text">扫码登录</text> -->
<text class="zd-col-24 san_text" @tap="isUpdate">升级版本</text>
</view>
<!-- <view class="inputOuter">
<input type="text" placeholder="图片域名地址" v-model="imgBaseUrl" class="inputStyle">
<text v-show="showBtn2" class="iconfont login_icon delete_icon" @tap="clearData(2)"></text>
</view> -->
</view>
<view class="submit">
<button class="primary-button" :disabled="disabled" @tap="toConfig">配&nbsp;&nbsp;置</button>
<view class="login_card">
<view class="card_wrap">
<view class="zd-row mgb40">
<view class="zd-col-4 login_label">域名</view>
<view class="zd-col-20">
<input type="text" placeholder="域名地址" v-model="baseUrl" class="inputStyle">
</view>
</view>
<view class="zd-row mgb40">
<view class="zd-col-6 login_label">刷新时间</view>
<view class="zd-col-18">
<input type="number" placeholder="刷新时间" v-model="setTime" class="inputStyle">
</view>
</view>
</view>
<view class="zd-row mgt40 mgb40">
<button class="primary-button" :disabled="disabled" @tap="toConfig">配&nbsp;&nbsp;置</button>
</view>
</view>
</view>
</view>
<view class="daoying_bg"></view>
</view>
<view v-if="version !== ''" class="version-name">v{{version}}</view>
<Up-grade v-if="grade === true" @closeUpdate="closeUpdate" :androidUrl="androidUrl"></up-grade>
@@ -63,7 +77,7 @@
loginname: '',
password: '',
baseUrl: this.$store.getters.baseUrl,
imgBaseUrl: this.$store.getters.imgBaseUrl,
setTime: this.$store.getters.setTime / 1000,
inputType: 'password',
eyeOpen: true,
drift: 0,
@@ -77,34 +91,10 @@
androidUrl: ''
};
},
computed: {
showBtn1 () {
return this.baseUrl !== ''
},
showBtn2 () {
return this.imgBaseUrl !== ''
},
showBtn3 () {
return this.loginname !== ''
}
},
methods: {
_tabChange (num) {
this.drift = num
},
clearData (t) {
switch (t) {
case 1:
this.baseUrl = ''
break
case 2:
this.imgBaseUrl = ''
break
case 3:
this.loginname = ''
break
}
},
passwordShow () {
this.eyeOpen = !this.eyeOpen
if (this.eyeOpen) {
@@ -116,12 +106,15 @@
toConfig () {
let obj = {
baseUrl: this.baseUrl,
imgBaseUrl: this.imgBaseUrl
setTime: this.setTime * 1000
}
this.$store.dispatch('setConfig', obj)
this._tabChange(0)
},
async toLogin() {
uni.redirectTo({
url: '/pages/home/home'
})
this.disabled = true
if (this.loginname === '') {
uni.showToast({
@@ -175,34 +168,39 @@
<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.login_bg
.login-bg
_wh(100%, 100%)
_bis(#fff,'../../static/images/bg_01.png', 100%,,bottom)
_bis(#fff,'../../static/images/login_bg.jpg', 100%, 100%,bottom)
.logo-wraper
_wh(90%, auto)
margin 0 auto
text-align center
_bis(,'../../static/images/login_bg.png', 100%, 100%,bottom)
img
_wh(30%, auto)
.login_wrap
position fixed
left 50%
top 50%
width 44%
width 50%
padding 5% 6%
transform translate3d(-50%, -50%, 0)
border-radius 5px
_bis(,'../../static/images/form_bg.png', 100%, 100%,bottom)
.login_w
_wh(100%, 100%)
overflow hidden
.login_tab
position relative
height 35px
border-bottom 1px solid #E2E2E2
height 100rpx
padding 0 10rpx 50rpx 10%
margin-bottom 15px
_bis(,'../../static/images/login_tabs_bg.png', 100%, 100%,bottom)
.login_tab_item
float left
width 50%
_font(16px,35px,#444444,,center)
cursor pointer
.login_tab_line
position absolute
width 50%
height 2px
background-color #D7592F
left 0
bottom -1px
_font(50rpx,66rpx,#99B1DD,,center)
font-family: YouSheBiaoTiHei;
padding 0 50rpx 0 10rpx
.login_tab_active
color #fff
_bis(,'../../static/images/login_tab_active.png', 100%, 100%,bottom)
.login_cnt
position relative
width 200%
@@ -212,39 +210,40 @@
float left
.card_wrap
overflow hidden
.inputOuter
position relative
width 100%
margin 15px auto
.login_label
_font(36rpx, 90rpx, #AFBED8,,)
.inputStyle
_wh(100%,35px)
_font(16px,35px,#999,,)
text-indent 10px
border-bottom 1px solid #E2E2E2
box-sizing border-box
_font(36rpx, 90rpx, #fff,,)
_wh(100%, 90rpx)
background: rgba(45,88,184,0.1);
border: 2rpx solid #4980BD;
padding 0 22rpx
.inputStyle[focus]
background: rgba(45,88,184,0.25);
border: 2rpx solid #21D0F2;
line-height 90rpx
.login_icon
position absolute
top 0
right 10px
.submit
width 100%
margin 15px auto
text-align center
.primary-button
_wh(100%, 35px)
background-color #d7592f
border-radius 35px
_font(16px,35px,#fff,,center)
.scanBox
_fj()
flex-direction column
_wh(auto, 100rpx)
padding 0 100rpx
_font(50rpx,100rpx,#fff,,center)
_bis(,'../../static/images/button.png', 100%, 100%,bottom)
.san_text
_font(16px,24px,#D7592F,,center)
_font(36rpx,36px,#fff,,center)
.drift
transition left .3s linear
.version-name
width 100%
position: absolute
bottom: 15px
_font(15px, 30px, #999,,center)
bottom 3%
_font(30rpx, 60rpx, #fff,,center)
.daoying_bg
position: absolute
bottom -30%
left 0
_wh(100%, 30%)
_bis(,'../../static/images/daoy.png', 100%, 100%,bottom)
</style>