<template>
|
<label class="settings">
|
<uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
|
</label>
|
<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></view>
|
<view>
|
<input type="text">
|
</view>
|
|
</view>
|
<view class="box shadow-warp">
|
<view></view>
|
<view>
|
<input type="text">
|
</view>
|
|
</view>
|
<view class="check">
|
<view>
|
<text>记住密码</text>
|
</view>
|
|
<view></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: 240rpx;
|
width: 100%;
|
// background-color: bisque;
|
display: grid;
|
grid-template-columns: 1fr;
|
justify-items: center;
|
.box {
|
width: 70%;
|
height: 80rpx;
|
background-color: #FFFFFF;
|
padding: 1upx 30upx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.check {
|
width: 78%;
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
text-align: left;
|
}
|
}
|
|
.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>
|
