页面完善
This commit is contained in:
parent
90a4064041
commit
49bfb7c6c2
12
App.vue
12
App.vue
|
@ -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')
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 |
Loading…
Reference in New Issue