123 lines
2.3 KiB
Vue
123 lines
2.3 KiB
Vue
<template>
|
|
<view class="pages">
|
|
<u-navbar title="添加设备" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='48' height='136' style="z-index: 99;"></u-navbar>
|
|
<view class="title">
|
|
<text>WiFi选择</text>
|
|
<text class="sm"> 请输入您的WiFi网络详细信息 </text>
|
|
</view>
|
|
|
|
<view class="wifiname">
|
|
<view class="name">
|
|
<image src="../../../static/wifi/redian.png" mode=""></image> <text>WiFi路网名称</text>
|
|
</view>
|
|
<u-input v-model="value" placeholder="请输入WiFi名称" :type="type" />
|
|
<text class="xian"></text>
|
|
|
|
<view class="names">
|
|
<image src="../../../static/wifi/pwd.png" mode=""></image> <text>密码</text>
|
|
</view>
|
|
<u-input v-model="values" placeholder="请输入WiFi密码" :type="type" />
|
|
<text class="xian"></text>
|
|
</view>
|
|
|
|
<button>连接</button>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value:'',
|
|
values:'',
|
|
type: 'text',
|
|
bgc: {
|
|
backgroundColor: "#F7FAFE",
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background-color: #F7FAFE !important;
|
|
}
|
|
.pages{
|
|
padding: 0 66rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.title{
|
|
margin-bottom: 84rpx;
|
|
image{
|
|
display: inline-block;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
vertical-align: bottom;
|
|
margin-right: 10rpx;
|
|
}
|
|
text:nth-child(1){
|
|
font-weight: 400;
|
|
font-size: 96rpx;
|
|
color: #262B37;
|
|
line-height: 88rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: block;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
.sm{
|
|
color: #77808D;
|
|
padding-left: 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.wifiname{
|
|
padding: 0 24rpx;
|
|
box-sizing: border-box;
|
|
.name{
|
|
margin-bottom: 44rpx;
|
|
image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.names{
|
|
margin-top: 30rpx;
|
|
margin-bottom: 44rpx;
|
|
image{
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-right: 20rpx;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
.xian{
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
}
|
|
button{
|
|
width: 562rpx;
|
|
height: 96rpx;
|
|
background: #8883F0;
|
|
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
line-height: 96rpx;
|
|
margin-top: 514rpx;
|
|
}
|
|
</style> |