xuhuajiao
/
canvasScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

login-bind

dev
xuhuajiao 4 years ago
parent
e4444a9acf
commit
10827d8abd
6 changed files with 234 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      App.vue
  2. 4
      pages.json
  3. 28
      pages/bind/bind.vue
  4. 71
      pages/header.vue
  5. 149
      pages/login/login.vue
  6. BIN
      static/images/bind-select.png

6
App.vue
View File

@ -15,4 +15,10 @@
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
@import './static/iconfont/iconfont.css'; @import './static/iconfont/iconfont.css';
.main_container {
width: 100%;
height: 100vh;
background: url(./static/images/bg.png) no-repeat left top;
background-size: cover;
}
</style> </style>

4
pages.json
View File

@ -9,6 +9,10 @@
{ {
"path" : "pages/login/login", "path" : "pages/login/login",
"style" : {} "style" : {}
},
{
"path" : "pages/bind/bind",
"style" : {}
} }
], ],
"globalStyle": { "globalStyle": {

28
pages/bind/bind.vue
View File

@ -0,0 +1,28 @@
<template>
<view class="main_container">
<Header></Header>
<view class="login">
<form @submit="formSubmit">
</form>
</view>
<view class="login_bg"></view>
</view>
</template>
<script>
import Header from '@/pages/header.vue'
export default {
components: {
Header
},
data() {
return {
};
},
methods: {
}
};
</script>
<style scoped>
</style>

71
pages/header.vue
View File

@ -1,19 +1,51 @@
<template> <template>
<view class="header-content">
<text class="iconfont icon-bangzhu" ></text>
帮助
<view class="header">
<view class="header-content" @tap="helpClick()">
<text class="iconfont icon-bangzhu" ></text>
帮助
</view>
<uni-popup ref="uniPop" class="help-cont">
<image src="../static/images/bt.png" class="help-title"></image>
<view>
<text class="step">第一步</text>
<view class="step-txt">下载apk在终端设备上进行安装</view>
</view>
<view>
<text class="step">第二步</text>
<view class="step-txt">输入后台登录账号、密码进行登录</view>
</view>
<view>
<text class="step">第三步</text>
<view class="step-txt">账号登录完成后，自动绑定当前设备，您可以选择输入设备名称、设定设备方向</view>
</view>
<view>
<text class="step">第四步</text>
<view class="step-txt">根据当前推荐选择您需要的节目点击进行播放，或选择电脑登录后台管理自行发布节目内容</view>
</view>
<view @tap="closedClick()"><text class="iconfont icon-guanbi"></text></view>
</uni-popup>
</view> </view>
</template> </template>
<script> <script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default { export default {
name:'Header', name:'Header',
components: { components: {
uniPopup
}, },
data() { data() {
return { return {
}; };
}, },
methods: {
helpClick(){
this.$refs.uniPop.open()
},
closedClick(){
this.$refs.uniPop.close()
}
}
}; };
</script> </script>
@ -26,9 +58,40 @@ export default {
line-height: 27.77rpx; line-height: 27.77rpx;
color: #fff; color: #fff;
} }
.iconfont{
color: #fff;
}
.icon-bangzhu{ .icon-bangzhu{
margin-top: 1.38rpx; margin-top: 1.38rpx;
margin-right: 11.11rpx; margin-right: 11.11rpx;
color: #fff;
}
.help-title{
display: block;
width: 133.33rpx;
height: 53.47rpx;
margin: 0 auto;
}
.help-cont /deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
padding: 83.33rpx 69.44rpx 62.5rpx 69.44rpx;
/* width: 597.22rpx; */
border-radius: 20.83rpx;
overflow: initial;
}
.step{
display: block;
font-size: 27.77rpx;
color: #0069f9;
padding: 41.66rpx 0 20.83rpx 0;
}
.step-txt{
font-size: 25rpx;
line-height: 48.61rpx;
}
.icon-guanbi{
position: absolute;
bottom: -76.38rpx;
left: 50%;
font-size: 48.61rpx;
transform: translateX(-50%);
} }
</style> </style>

149
pages/login/login.vue
View File

@ -1,17 +1,43 @@
<template> <template>
<view class="main_container"> <view class="main_container">
<Header></Header> <Header></Header>
<view class="login">
<image class="logo" src="/static/logo.png"></image>
<form @submit="formSubmit">
<view class="uni-form-item uni-column">
<input class="uni-input" name="phone" type="number" placeholder="登录账号" />
</view>
<view class="uni-form-item uni-column">
<input class="uni-input" name="password" placeholder="密码" password="true" />
</view>
<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
</form>
<view class="login-bind">
<view v-if="!isLogin" class="login">
<image class="logo" src="/static/logo.png"></image>
<form @submit="loginSubmit">
<view class="uni-form-item uni-column">
<input class="uni-input" name="phone" type="number" placeholder="登录账号" />
</view>
<view class="uni-form-item uni-column">
<input class="uni-input" name="password" placeholder="密码" password="true" />
</view>
<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
</form>
</view>
<view v-else class="bind">
<text class="bind-title">设备信息</text>
<form @submit="bindSubmit">
<view class="uni-form-item uni-column">
<view class="title">设备账号：</view>
<input class="uni-input" name="phone" type="text" placeholder="设备账号" disabled />
</view>
<view class="uni-form-item uni-column">
<view class="title">设备名称：</view>
<input class="uni-input" name="name" placeholder="设备名称" />
</view>
<view class="uni-form-item uni-column">
<view class="title">选择设备方向</view>
<image class="select_img" src="../../static/images/bind-select.png"></image>
<view class="device_radio">
<radio-group>
<label class="radio"><radio value="r1" checked="true" />竖屏</label>
<label class="radio"><radio value="r2" />横屏</label>
</radio-group>
</view>
</view>
<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">授权绑定</button></view>
</form>
</view>
</view> </view>
<view class="login_bg"></view> <view class="login_bg"></view>
</view> </view>
@ -25,28 +51,30 @@ export default {
}, },
data() { data() {
return { return {
isLogin: false
}; };
}, },
methods: { methods: {
formSubmit: function(e) {
loginSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value)); console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
var formdata = e.detail.value; var formdata = e.detail.value;
// uni.showModal({ // uni.showModal({
// content: '表单数据内容：' + JSON.stringify(formdata), // content: '表单数据内容：' + JSON.stringify(formdata),
// showCancel: false // showCancel: false
// }); // });
// uni.navigateTo({
// url: '../bind/bind'
// });
this.isLogin = true
},
bindSubmit: function(e){
console.log('bindform发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.main_container {
width: 100%;
height: 100vh;
background: url(../../static/images/bg.png) no-repeat left top;
background-size: cover;
}
.login_bg { .login_bg {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -60,7 +88,7 @@ export default {
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15); box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
z-index: 9; z-index: 9;
} }
.login {
.login-bind {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -76,13 +104,19 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.login{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo { .logo {
width: 278rpx; width: 278rpx;
height: 52rpx; height: 52rpx;
margin-bottom: 69.44rpx; margin-bottom: 69.44rpx;
/* margin: 132rpx auto 70rpx auto; */ /* margin: 132rpx auto 70rpx auto; */
} }
.uni-input {
.login .uni-input {
width: 520rpx; width: 520rpx;
height: 86rpx; height: 86rpx;
margin-bottom: 41.66rpx; margin-bottom: 41.66rpx;
@ -104,4 +138,79 @@ export default {
border-radius: 86rpx; border-radius: 86rpx;
color: #fff; color: #fff;
} }
.bind-title{
display: block;
margin-bottom: 37.5rpx;
font-size: 37.5rpx;
font-weight: bold;
color: #333;
text-align: center;
}
.bind .uni-form-item{
position: relative;
display: flex;
justify-content: space-between;
width: 409.72rpx;
height: 86.11rpx;
padding: 0 55.55rpx;
line-height: 86.11rpx;
margin-bottom: 27.77rpx;
font-size: 27.77rpx;
background-color: #f6f6f6;
border-radius: 86.11rpx;
}
.bind .uni-form-item .title{
min-width: 138.88rpx;
}
.bind .uni-input{
width: auto;
height: 86.11rpx;
font-size: 27.77rpx;
}
.select_img{
display: block;
width: 21.52rpx;
height: 13.88rpx;
margin-top: 36.8rpx;
}
.device_radio{
position: absolute;
bottom: -145.83rpx;
left: 0;
z-index: 99;
}
.device_radio uni-radio-group{
width: 520.83rpx;
height: 145.83rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 25rpx;
background-color: #FFFFFF;
border-radius: 13.88rpx;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
}
.device_radio .radio {
width: 50%;
text-align: center;
}
.device_radio /deep/ uni-radio .uni-radio-input{
width: 27.77rpx;
height: 27.77rpx;
background: url(../../static/images/an-wx.png) no-repeat left top;
background-size: 100% 100%;
border: none;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked{
background: none !important;
border: none !important;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before{
content: "";
width: 27.77rpx;
height: 27.77rpx;
background: url(../../static/images/an-xz.png) no-repeat left top;
background-size: 100% 100%;
transform: translate(-50%,-50%) scale(1);
}
</style> </style>

BIN
static/images/bind-select.png
View File

Side by Side

After

Width: 31  |  Height: 20  |  Size: 1.3 KiB

Write Preview
Loading…
Cancel
Save