页面完善

This commit is contained in:
lxz 2024-01-04 11:32:58 +08:00
parent 90a4064041
commit 49bfb7c6c2
7 changed files with 111 additions and 34 deletions

12
App.vue
View File

@ -7,15 +7,23 @@
// uni.onSocketOpen(function(res) { // uni.onSocketOpen(function(res) {
// console.log('WebSocket'); // console.log('WebSocket');
// // username: userInfo.value.master_phone,
// // device: 'lihai_lot_walnutpi_dev_' + userInfo.value.device_id
// uni.sendSocketMessage({ // uni.sendSocketMessage({
// data: ",2" // data: JSON.stringify({
// "username": "1",
// "device": "lihai_lot_walnutpi_dev_5"
// })
// }); // });
// }); // });
// uni.onSocketError(function(res) { // uni.onSocketError(function(res) {
// console.log('WebSocket'); // console.log('WebSocket');
// }); // });
// uni.onSocketClose(function(res) {
// console.log('WebSocket ');
// });
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')

View File

@ -17,27 +17,38 @@
您好 您好
</view> </view>
<view class="tit" style="margin-bottom: 60rpx;"> <view class="tit" style="margin-bottom: 60rpx;">
欢迎进入吟龙土壤墒情监测系统! 欢迎进入吟龙土壤墒情监测系统!
</view> </view>
<view class="input-card"> <view class="input-card">
<view class="card-head"> <view class="card-head">
<view class="triangle top" /> <!-- <view class="triangle top" />
<view class="triangle bottom" /> <view class="triangle bottom" /> -->
<view class="code-login" @click="changeLoginType(0)" :class="{act:loginType==2}"> <view class="code-login" @click="changeLoginType(0)" :class="{act_code:loginType==1}">
<span>验证码登录</span> <span>验证码登录</span>
<view class="line" :style="{transform: 'translateX('+lineX+'rpx)'}" />
</view> </view>
<view class="password-login" @click="changeLoginType(350)" :class="{act:loginType==1}"> <view class="password-login" @click="changeLoginType(320)" :class="{act_password:loginType==1}">
密码登录 密码登录
</view> </view>
<view class="line" :style="{transform: 'translateX('+lineX+'rpx)'}" />
<!-- <view class="" style="background-color: #35D190;color: white;width: 100%;height: 100rpx; <!-- <view class="" style="background-color: #35D190;color: white;width: 100%;height: 100rpx;
text-align: center;line-height: 100rpx;"> text-align: center;line-height: 100rpx;">
账号登录 账号登录
</view> --> </view> -->
</view> </view>
<view class="login-content">
<!-- <view class="" style="height: 90rpx;">
</view> -->
<view class="login-content"
style="position: absolute;width: 680rpx;height: 900rpx;background-color: white;top: 85rpx;z-index: 99999;">
<view class="code"> <view class="code">
<view class="" v-if="loginType==1" style="margin-bottom: 20rpx;"> <view class="" v-if="loginType==1" style="margin-bottom: 20rpx;">
@ -202,9 +213,12 @@
border-radius: 20rpx; border-radius: 20rpx;
overflow: hidden; overflow: hidden;
box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1); box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
position: relative;
min-height: 680rpx;
// background-color: white;
.card-head { .card-head {
background-color: #fff; // background-color: #fff;
display: flex; display: flex;
position: relative; position: relative;
@ -231,17 +245,44 @@
} }
.code-login { .code-login {
width: 50%;
height: 50px; height: 50px;
background-color: #35D190; background-color: transparent;
box-sizing: border-box; box-sizing: border-box;
background-image: url("/static/main/index/white_bg.png");
background-size: 100% 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20rpx; padding: 20rpx;
transition: 500ms; transition: 500ms;
color: black;
font-weight: bold;
position: absolute;
width: 360rpx;
z-index: 5;
}
.password-login {
width: 360rpx;
height: 50px;
// background-color: white;
background-image: url("/static/main/index/login_r.png");
right: 0;
z-index: 4;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20rpx;
transition: 200ms;
color: white; color: white;
position: absolute;
}
.line { .line {
width: 100rpx; width: 100rpx;
@ -249,39 +290,46 @@
height: 3px; height: 3px;
border-radius: 100rpx; border-radius: 100rpx;
transition: 500ms; transition: 500ms;
z-index: 999999;
margin-top: 70rpx;
margin-left: 130rpx;
} }
}
.password-login { .act_code {
width: 50%; // background-color: white;
height: 50px;
background-color: #35D190;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20rpx;
transition: 500ms;
color: white; color: white;
font-weight: normal;
background-image: url('/static/main/index/login_ad.png');
// background-image: url('/static/main/index/white_bg.png');
} }
.act { .act_password {
background-color: white;
color: black;
font-weight: bold; font-weight: bold;
}
// background-color: white;
color: black;
z-index: 9;
background-image: url('/static/main/index/white_bg_r.png');
// background-image: url('/static/main/index/white_bg.png');
}
} }
.login-content { .login-content {
background-color: #fff; // background-color: #fff;
padding: 10rpx 40rpx; padding: 40rpx 40rpx;
transform: translateY(-1rpx); // // transform: translateY(-1rpx);
color: #7A7A7A; // color: #7A7A7A;
// min-height: 380rpx;
// position: absolute;
// z-index: 999;
// height: 500rpx;
// background-color: red;
// // height: 380rpx;
// top: 0;
.code { .code {
@ -309,7 +357,7 @@
.sub-btn { .sub-btn {
margin-top: 80rpx; margin-top: 80rpx;
margin-bottom: 30rpx; // margin-bottom: 30rpx;
} }
// box-sizing: b; // box-sizing: b;

View File

@ -738,12 +738,33 @@
} }
setTimeout(() => { const openScoket = () => {
uni.connectSocket({
url: 'ws://60.204.152.17:8765'
});
uni.onSocketOpen(function(res) {
uni.sendSocketMessage({
data: JSON.stringify(scoketData)
});
});
uni.onSocketError(function(res) {
console.log('WebSocket连接打开失败请检查');
});
uni.onSocketClose(function(res) {
console.log('WebSocket 已关闭!');
});
}
setTimeout(() => {
uni.connectSocket({ uni.connectSocket({
url: 'ws://60.204.152.17:8765' url: 'ws://60.204.152.17:8765'
}); });
uni.onSocketOpen(function(res) { uni.onSocketOpen(function(res) {
console.log(scoketData);
uni.sendSocketMessage({ uni.sendSocketMessage({
data: JSON.stringify(scoketData) data: JSON.stringify(scoketData)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB