Procházet zdrojové kódy

[dev]
根据ui调整界面:
1、增加login图片
2、调整标题位置
3、增加通过睁眼闭眼进行密码的显示和隐藏

Neo.Sun před 2 roky
rodič
revize
63ac6ae524
3 změnil soubory, kde provedl 27 přidání a 10 odebrání
  1. 27 10
      pages/login/login.vue
  2. binární
      static/by@2x.png
  3. binární
      static/zy@2x.png

+ 27 - 10
pages/login/login.vue

@@ -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">&#xe568;</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;

binární
static/by@2x.png


binární
static/zy@2x.png