<template>
|
<!-- 设置 -->
|
<label class="settings">
|
<uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
|
</label>
|
<!-- logo -->
|
<view class="head">
|
<view class="logo">
|
<image src="../../static/img/logo.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
<view class="content">
|
<!-- 账号 -->
|
<view class="box shadow-warp">
|
<view class="box-icon">
|
<uni-icons type="person" size="20" color="#707070"></uni-icons>
|
</view>
|
<view class="box-text">账号:</view>
|
<view class="box-input">
|
<input type="text">
|
</view>
|
<view class="box-show"></view>
|
</view>
|
<!-- 密码 -->
|
<view class="box shadow-warp">
|
<view class="box-icon">
|
<uni-icons type="locked" size="20" color="#707070"></uni-icons>
|
</view>
|
<view class="box-text">密码:</view>
|
<view class="box-input">
|
<input type="text">
|
</view>
|
<view class="box-show">
|
<uni-icons type="eye-filled" size="20" color="#707070"></uni-icons>
|
</view>
|
</view>
|
<!-- 记住密码 -->
|
<view class="check">
|
<view class="check-left">
|
<view>记住密码</view>
|
</view>
|
<view class="check-right">
|
<switch checked color="#FFCC33" style="zoom:.5"/>
|
</view>
|
</view>
|
</view>
|
<!-- 登录按钮 -->
|
<view class="submit">
|
<view class="" style="width: 400rpx;">
|
<button type="primary" size="default">登录</button>
|
</view>
|
|
</view>
|
|
<!-- 设置弹窗区域 -->
|
<view>
|
<uni-popup ref="inputDialog" type="dialog">
|
<view class="popup">
|
<!-- 标题 -->
|
<view class="title title-font">配置</view>
|
<view class="input">
|
<view class="input-left">ip:</view>
|
<view class="input-right"><input type="text"></view>
|
</view>
|
<view class="input">
|
<view class="input-left">端口:</view>
|
<view class="input-right"><input type="text"></view>
|
</view>
|
<view class="input">
|
<view class="input-left">项目:</view>
|
<view class="input-right"><input type="text"></view>
|
</view>
|
<view class="btn">
|
<view class="btn-left" @click="close">取消</view>
|
<view class="btn-right">确认</view>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
|
|
<!-- 版本号 -->
|
<!-- #ifdef APP-PLUS -->
|
<view class="version">
|
当前版本:{{version}}
|
</view>
|
<!-- #endif -->
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
version: '',
|
value: ''
|
}
|
},
|
onLoad() {
|
// 手机端版本号
|
// #ifdef APP-PLUS
|
var that = this
|
plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
|
that.version = wgtinfo.version
|
});
|
// #endif
|
},
|
methods: {
|
// 设置窗口开启按钮
|
settings() {
|
this.$refs.inputDialog.open()
|
},
|
// 设置窗口确认修改按钮
|
dialogInputConfirm() {
|
this.$refs.inputDialog.close()
|
},
|
// 设置窗口关闭按钮
|
close() {
|
this.$refs.inputDialog.close()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.title-font {
|
color: #606266;
|
font-size: 18px;
|
letter-spacing: 3px;
|
font-weight: 500;
|
}
|
// 设置区域
|
.settings {
|
width: 100rpx;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
position: fixed;
|
// background-color: #007aff;
|
right: 0;
|
top: 70rpx;
|
}
|
// 设置区域 - 手机
|
<!-- #ifdef APP-PLUS -->
|
.settings {
|
width: 100rpx;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
position: fixed;
|
right: 0rpx;
|
top: 0rpx;
|
}
|
<!-- #endif -->
|
.head {
|
height: 400rpx;
|
width: 100%;
|
display: grid;
|
grid-template-columns: 1fr;
|
// background-color: aqua;
|
justify-items: center;
|
align-items: center;
|
|
.logo {
|
image {
|
height: 300rpx;
|
}
|
}
|
}
|
// 输入框区域
|
.content {
|
min-height: 250rpx;
|
width: 100%;
|
// background-color: bisque;
|
display: grid;
|
grid-template-columns: 1fr;
|
justify-items: center;
|
align-items: flex-start;
|
// 输入大区
|
.box {
|
width: 80%;
|
height: 80rpx;
|
background-color: #FFFFFF;
|
display: grid;
|
grid-template-columns: 1fr 1fr 5fr 1fr;
|
align-items: center;
|
font-size: 12px;
|
// 图标
|
&-icon {
|
display: grid;
|
justify-items: center;
|
}
|
// 输入框
|
&-input {
|
background-color: aquamarine;
|
}
|
// 隐藏显示密码
|
&-show {
|
display: grid;
|
justify-items: center;
|
}
|
}
|
// 记住密码
|
.check {
|
width: 80%;
|
// background-color: blueviolet;
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
align-items: center;
|
text-align: left;
|
&-left {
|
display: grid;
|
align-items: center;
|
font-size: 12px;
|
text-indent: 10rpx;
|
}
|
&-right {
|
display: grid;
|
align-items: center;
|
justify-items: flex-end;
|
}
|
}
|
}
|
// 登录按钮
|
.submit {
|
position: fixed;
|
width: 100%;
|
bottom: 200rpx;
|
display: grid;
|
grid-template-columns: 1fr;
|
justify-items: center;
|
}
|
// 弹出层
|
.popup {
|
width: 650rpx;
|
min-height: 400rpx;
|
background-color: #FFF;
|
border-radius: 25rpx;
|
.title {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
}
|
.input {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
display: grid;
|
grid-template-columns: 1fr 3fr;
|
align-items: center;
|
&-left {
|
text-align: right;
|
}
|
&-right {
|
display: grid;
|
align-items: center;
|
height: 50rpx;
|
padding: 5rpx;
|
margin-left: 20rpx;
|
width: 400rpx;
|
border-bottom: 1px solid #e7e6e4;
|
|
}
|
}
|
.btn {
|
margin-top: 20rpx;
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
border-top: 1px solid #e7e6e4;
|
&-left {
|
border-right: 1px solid #e7e6e4;
|
}
|
&-right {
|
color: #007aff;
|
}
|
}
|
}
|
.version {
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
text-align: center;
|
}
|
</style>
|
