页面完善
This commit is contained in:
parent
90a4064041
commit
49bfb7c6c2
12
App.vue
12
App.vue
|
|
@ -7,15 +7,23 @@
|
|||
// uni.onSocketOpen(function(res) {
|
||||
// console.log('WebSocket连接已打开！');
|
||||
|
||||
// // username: userInfo.value.master_phone,
|
||||
// // device: 'lihai_lot_walnutpi_dev_' + userInfo.value.device_id
|
||||
|
||||
// uni.sendSocketMessage({
|
||||
// data: "你好,靓仔2"
|
||||
// data: JSON.stringify({
|
||||
// "username": "1",
|
||||
// "device": "lihai_lot_walnutpi_dev_5"
|
||||
// })
|
||||
// });
|
||||
|
||||
// });
|
||||
// uni.onSocketError(function(res) {
|
||||
// console.log('WebSocket连接打开失败，请检查！');
|
||||
// });
|
||||
|
||||
// uni.onSocketClose(function(res) {
|
||||
// console.log('WebSocket 已关闭！');
|
||||
// });
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
|
|
|
|||
|
|
@ -17,27 +17,38 @@
|
|||
您好！
|
||||
</view>
|
||||
<view class="tit" style="margin-bottom: 60rpx;">
|
||||
欢迎进入吟龙土壤墒情监测溯系统!
|
||||
欢迎进入吟龙土壤墒情监测系统!
|
||||
</view>
|
||||
|
||||
<view class="input-card">
|
||||
<view class="card-head">
|
||||
<view class="triangle top" />
|
||||
<view class="triangle bottom" />
|
||||
<view class="code-login" @click="changeLoginType(0)" :class="{act:loginType==2}">
|
||||
<!-- <view class="triangle top" />
|
||||
<view class="triangle bottom" /> -->
|
||||
<view class="code-login" @click="changeLoginType(0)" :class="{act_code:loginType==1}">
|
||||
<span>验证码登录</span>
|
||||
<view class="line" :style="{transform: 'translateX('+lineX+'rpx)'}" />
|
||||
|
||||
</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 class="line" :style="{transform: 'translateX('+lineX+'rpx)'}" />
|
||||
<!-- <view class="" style="background-color: #35D190;color: white;width: 100%;height: 100rpx;
|
||||
text-align: center;line-height: 100rpx;">
|
||||
账号登录
|
||||
</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="" v-if="loginType==1" style="margin-bottom: 20rpx;">
|
||||
|
|
@ -202,9 +213,12 @@
|
|||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
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 {
|
||||
background-color: #fff;
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -231,17 +245,44 @@
|
|||
}
|
||||
|
||||
.code-login {
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
background-color: #35D190;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
background-image: url("/static/main/index/white_bg.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
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;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100rpx;
|
||||
|
|
@ -249,39 +290,46 @@
|
|||
height: 3px;
|
||||
border-radius: 100rpx;
|
||||
transition: 500ms;
|
||||
z-index: 999999;
|
||||
margin-top: 70rpx;
|
||||
margin-left: 130rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.password-login {
|
||||
width: 50%;
|
||||
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;
|
||||
.act_code {
|
||||
// background-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 {
|
||||
background-color: white;
|
||||
color: black;
|
||||
.act_password {
|
||||
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 {
|
||||
background-color: #fff;
|
||||
padding: 10rpx 40rpx;
|
||||
transform: translateY(-1rpx);
|
||||
color: #7A7A7A;
|
||||
// background-color: #fff;
|
||||
padding: 40rpx 40rpx;
|
||||
// // transform: translateY(-1rpx);
|
||||
// color: #7A7A7A;
|
||||
// min-height: 380rpx;
|
||||
// position: absolute;
|
||||
// z-index: 999;
|
||||
// height: 500rpx;
|
||||
// background-color: red;
|
||||
// // height: 380rpx;
|
||||
// top: 0;
|
||||
|
||||
|
||||
.code {
|
||||
|
||||
|
|
@ -309,7 +357,7 @@
|
|||
|
||||
.sub-btn {
|
||||
margin-top: 80rpx;
|
||||
margin-bottom: 30rpx;
|
||||
// margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
// 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({
|
||||
url: 'ws://60.204.152.17:8765'
|
||||
});
|
||||
uni.onSocketOpen(function(res) {
|
||||
console.log(scoketData);
|
||||
|
||||
uni.sendSocketMessage({
|
||||
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