From 9d5b4d650e5b01081d3537c750e7469db4d161e3 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Tue, 29 Apr 2025 08:53:20 +0800
Subject: [PATCH] 提交
---
pages/index/index.vue | 136 ++++++++++++++++++--------------------------
1 files changed, 56 insertions(+), 80 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b2c3f32..aeeca37 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,34 +1,34 @@
<template>
<view class="box">
- <image :src="loginTop" class="topImg" mode="widthFix"></image>
+ <view class="topContainer">
+ <image :src="loginTop" class="topImg" mode="widthFix"></image>
+ <image :src="loginPic" class="topPic" mode="widthFix"></image>
+ </view>
+
<view class="main">
<view class="header">
<view class="titleFirst">
- 你好~<br/>欢迎来到安全教育平台</view>
+ 你好~<br/>欢迎来到危化品全生命周期管理平台</view>
</view>
<view>
<u-form :model="form" ref="uForm" class="form" >
<u-form-item style="width: 80%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
- <u-form-item style="margin-top: 10px;width: 80%;" ><u-input v-model="form.password" :class="{'isFocused': codeFocused}" :type="codeType" placeholder="请输入密码" @focus="focusCode">
- <template slot="suffix">
- <u-icon v-show="codeType == 'password'" name="eye" color="#999" size="20" @click="viewCode"></u-icon>
- <u-icon v-show="codeType == 'text'" name="eye-off" color="#999" size="20" @click="viewCode"></u-icon>
- </template>
- </u-input></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: 80%;" >
+ <u-input v-model="form.password" :class="{'isFocused': codeFocused}" :password="isPwd" placeholder="请输入密码" @focus="focusCode">
+ <template slot="suffix">
+ <u-icon :name="isPwd?'eye':'eye-off'" color="#999" size="20" @click="isPwd = !isPwd"></u-icon>
+ </template>
+ </u-input>
+ </u-form-item>
<u-form-item style="margin-top: 10px;width: 80%;">
<u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 56px;border-radius: 28px" @click="Login" type="primary">登录</u-button>
</u-form-item>
- <!-- <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
</u-form>
</view>
</view>
-
+ <view class="footer">
+ 当前版本：1.2
+ </view>
</view>
</template>
@@ -36,12 +36,13 @@
import {login,getLastApp} from '../../api/index.js';
import store from '@/store/index.js'
import VUE_APP_BASE_URL from '../../common/constant.js'
- const jpushModule = uni.requireNativePlugin('JG-JPush')
- import loginTop from '../../static/loginTop1.png'
+ import loginTop from '../../static/loginBg.png'
+ import loginPic from '../../static/loginPic.png'
export default {
data() {
return {
loginTop: loginTop,
+ loginPic: loginPic,
userFocused: false,
codeFocused: false,
form: {
@@ -50,42 +51,19 @@
code: '',
uuid: ''
},
- codeType: 'password',
+ isPwd: true,
type: '',
- //极光推送
- connectStatus: '未连接',
- registrationID: '未获得',
isLogining: false
}
},
onShow() {
if(uni.getStorageSync('name') && uni.getStorageSync('pwd')){
- // this.form.name = uni.getStorageSync('name');
- // this.form.pwd = uni.getStorageSync('pwd');
-// if(uni.getStorageSync('roleName') == '工作人员'){
-// this.$store.commit('setRoleId', 'user_other');
-// uni.switchTab({
-// url: '/pages/tabBar/notice/notice'
-// });
-// }else if (uni.getStorageSync('roleName') == '管理员'){
-// this.$store.commit('setRoleId', '');
-// uni.showToast({
-// icon: "none",
-// title: '管理员请使用平台登录'
-// });
-// }else{
-// this.$store.commit('setRoleId', 'user_leader');
-// uni.switchTab({
-// url: '/pages/tabBar/firstPage/firstPage'
-// });
-// }
}else{
uni.clearStorageSync();
uni.clearStorage();
}
},
onLoad() {
- // this.connect()
},
methods: {
base64Encode(str) {
@@ -158,29 +136,7 @@
this.isLogining = false;
})
},
- connect() {
- uni.$on('connectStatusChange', (connectStatus) => {
- var connectStr = ''
- if (connectStatus == true) {
- connectStr = '已连接'
- this.getRegistrationID()
- } else {
- connectStr = '未连接'
- }
- console.log('监听到了连接状态变化 --- ', connectStr)
- this.connectStatus = connectStr
- })
- },
- //获取推送ID
- getRegistrationID() {
- jpushModule.getRegistrationID(result => {
- let registerID = result.registerID
- this.registrationID = registerID
- this.form.registrationId = registerID;
- uni.setStorageSync('registrationID', registerID);
- console.log("iddd",uni.getStorageSync('registrationID'))
- })
- },
+
focusUser(){
this.userFocused = true
@@ -189,13 +145,6 @@
focusCode(){
this.codeFocused = true
this.userFocused = false
- },
- viewCode(){
- if(this.codeType == 'password'){
- this.codeType = 'text'
- } else{
- this.codeType = 'password'
- }
}
}
}
@@ -210,10 +159,30 @@
flex-direction: column;
}
+.topContainer {
+ position: relative; /* 新增容器，并设置相对定位 */
+ width: 100%;
+}
+
.topImg{
width: 100%;
- height: 100%;
- filter: drop-shadow(0 3px 5px rgba(21,148,232,.1))
+}
+.topPic{
+ width: 80%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(-50%, -50%)
+ }
+ 50% {
+ transform: translate(-50%, calc(-50% + 15rpx))
+ }
}
.main{
@@ -230,10 +199,17 @@
align-items: center;
justify-content: center;
}
-
+.footer{
+ width: 100%;
+ position: fixed;
+ bottom: 24rpx;
+ text-align: center;
+ font-size: 22rpx;
+ color: #999;
+}
.titleFirst{
width: 80%;
- font-size: 44rpx;
+ font-size: 34rpx;
line-height: 1.5;
font-weight: bold;
letter-spacing: 2px;
@@ -259,7 +235,7 @@
border-radius: 99px;
background: #f5f5f5;
padding: 15px 20px !important;
- box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1) !important;
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1)!important;
transition: box-shadow .1s ease !important;
&:active{
@@ -269,8 +245,8 @@
.isFocused{
background: #fff;
- border-width: 1.5px !important;
- border-color: #e6e6e6 !important;
+ border-width: 2px !important;
+ border-color: #fff !important;
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
}
@@ -281,7 +257,7 @@
}
.loginBtn{
- border: 1px solid rgba(255,255,255,.4);
+ border: 2px solid rgba(255,255,255,.8);
letter-spacing: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
background-image: linear-gradient(#41a2ff,#0f7ff9);
--
Gitblit v1.9.2