|
@@ -9,15 +9,18 @@
|
|
|
</view>
|
|
|
<uni-forms :model="formData">
|
|
|
<uni-forms-item name="name">
|
|
|
- <uni-icons class="item" type="staff" color="#cfcfcf" size="70"></uni-icons>
|
|
|
+ <uni-icons class="item" type="person-filled" color="#cfcfcf" size="50"></uni-icons>
|
|
|
<view class="input">
|
|
|
<input type="text" class="item" v-model="formData.name" placeholder="请输入账号" />
|
|
|
</view>
|
|
|
</uni-forms-item>
|
|
|
<uni-forms-item name="password">
|
|
|
- <uni-icons type="locked" class="item" color="#cfcfcf" size="70"></uni-icons>
|
|
|
+ <uni-icons type="locked" class="item" color="#cfcfcf" size="50"></uni-icons>
|
|
|
<view class="input">
|
|
|
- <input type="password" class="item" v-model="formData.password" placeholder="请输入密码" />
|
|
|
+ <input class="item" v-model="formData.password" :password="showPassword" placeholder="请输入密码" />
|
|
|
+ <!-- <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></text> -->
|
|
|
+ <uni-icons custom-prefix="iconfont" class="item" :type="showPassword?'icon-biyanjing':'icon-yanjing'" color="#000" size="50" @click="changePassword"></uni-icons>
|
|
|
+ <!-- :type="showPassword?'icon-biyanjing':'icon-yanjing'" -->
|
|
|
</view>
|
|
|
</uni-forms-item>
|
|
|
|
|
@@ -41,6 +44,7 @@
|
|
|
import { onMounted, ref } from 'vue'
|
|
|
import { login } from '@/static/api.js'
|
|
|
|
|
|
+const showPassword = ref(false)
|
|
|
const formData = ref({
|
|
|
name:'',
|
|
|
password:'',
|
|
@@ -75,6 +79,10 @@ const handleChange = ()=>{
|
|
|
// 如果为true本地保存账号密码
|
|
|
console.log('handleChange', formData.value)
|
|
|
}
|
|
|
+
|
|
|
+const changePassword = ()=>{
|
|
|
+ showPassword.value = ! showPassword.value
|
|
|
+}
|
|
|
onMounted(() => {
|
|
|
const name = uni.getStorageSync('username')
|
|
|
const password = uni.getStorageSync('password')
|
|
@@ -89,6 +97,7 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ @import "@/static/iconfont.css";
|
|
|
.main{
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
@@ -97,14 +106,13 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
flex-direction:column;
|
|
|
align-items: center;
|
|
|
- height: 400rpx;
|
|
|
- width: 600rpx;
|
|
|
+ width: 1074px;
|
|
|
border-radius: 40rpx;
|
|
|
background-color: #fff;
|
|
|
margin-top: 100px;
|
|
|
:deep(.uni-forms){
|
|
|
margin-top: 80rpx;
|
|
|
- width: 500rpx;
|
|
|
+ width: 1074px;
|
|
|
};
|
|
|
.logo{
|
|
|
display: flex;
|
|
@@ -128,24 +136,33 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
:deep(.uni-forms-item__content) {
|
|
|
- font-size: 12px;
|
|
|
display: flex;
|
|
|
flex-direction:row;
|
|
|
border-bottom: 1px solid #bcbcbc;
|
|
|
.input{
|
|
|
margin-left: 20rpx;
|
|
|
- width: 100rpx;
|
|
|
- height: 40rpx;
|
|
|
+ width: 1000px;
|
|
|
+ height: 48px;
|
|
|
color:#bcbcbc;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ :deep(.uni-input-wrapper){
|
|
|
+ font-size: 48px;
|
|
|
+ width: 1000px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ font-size: 28px;
|
|
|
+ color: #bcbcbc;
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
:deep(.uni-label-pointer) {
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.button {
|
|
|
- background-color: #bcbcbc;
|
|
|
+ background-color: #fff;
|
|
|
margin-top: 40rpx;
|
|
|
color: #fff;
|
|
|
height: 30rpx;
|