登录

src/pages/system/login/index.vue

@@ -3,47 +3,85 @@
 	<view class="container">
 		<!-- 顶部Logo和标题 -->
 		<view class="header">
-			<image src="/static/知己Logo.png" class="logo"></image>
+			<image class="logo" src="/static/知己Logo.png"></image>
 			<text class="title">知己欢迎您</text>
 		</view>
 
 		<!-- 表单部分 -->
 		<view class="form-container">
-			<up-form :model="formData" :rules="rules" class="form">
-				<up-form-item prop="username">
-					<up-input prefixIcon="account" placeholder="请输入用户名" v-model="formData.username"></up-input>
-				</up-form-item>
-				<up-form-item prop="password">
-					<up-input placeholder="请输入密码" prefixIcon="lock" v-model="formData.password"></up-input>
-				</up-form-item>
-				<up-form-item>
-					<up-button  text="登录" type="primary" @click="submit"></up-button>
-<!--					<up-button @click="reset">重置</up-button>-->
-				</up-form-item>
-			</up-form>
-
-<!--			<form :model="formData" :rules="rules">-->
-<!--				-->
-<!--			</form>-->
 
+
+			<!--			<up-form :model="formData" :rules="rules" class="form">-->
+			<!--				<up-form-item prop="username">-->
+			<!--					<up-input v-model="formData.username" placeholder="请输入用户名" prefixIcon="account"></up-input>-->
+			<!--				</up-form-item>-->
+			<!--				<up-form-item prop="password">-->
+			<!--					<up-input v-model="formData.password" passwordVisibilityToggle placeholder="请输入密码" prefixIcon="lock"-->
+			<!--					          type="password"></up-input>-->
+
+			<!--&lt;!&ndash;					<up-input v-model="formData.password" :type="showPass ? 'text' : 'password'" placeholder="请输入密码"&ndash;&gt;-->
+			<!--&lt;!&ndash;					          prefixIcon="lock">&ndash;&gt;-->
+			<!--&lt;!&ndash;						<template #suffix>&ndash;&gt;-->
+			<!--&lt;!&ndash;							<view class="eye-icon" @click="togglePassword">&ndash;&gt;-->
+			<!--&lt;!&ndash;								<up-icon :name="showPass ? 'eye-fill' : 'eye-off'" color="#999" size="20"></up-icon>&ndash;&gt;-->
+			<!--&lt;!&ndash;							</view>&ndash;&gt;-->
+			<!--&lt;!&ndash;						</template>&ndash;&gt;-->
+			<!--&lt;!&ndash;					</up-input>&ndash;&gt;-->
+			<!--&lt;!&ndash;				</up-form-item>&ndash;&gt;-->
+			<!--&lt;!&ndash;				<up-form-item>&ndash;&gt;-->
+			<!--&lt;!&ndash;					<up-button text="登录" type="primary" @click="submit"></up-button>&ndash;&gt;-->
+			<!--&lt;!&ndash;					<up-button @click="reset">重置</up-button>&ndash;&gt;-->
+
+			<!--				</up-form-item>-->
+			<!--			</up-form>-->
+
+			<!--			<form :model="formData" :rules="rules">-->
+			<!--				-->
+			<!--			</form>-->
+
+
+			<uni-forms :model="formData" :rules="rules">
+				<uni-forms-item prop="username">
+					<uni-easyinput v-model="formData.username" placeholder="请输入用户名" prefixIcon="person" />
+				</uni-forms-item>
+				<uni-forms-item prop="password">
+					<uni-easyinput v-model="formData.password" placeholder="请输入密码" prefixIcon="locked"
+						type="password" />
+				</uni-forms-item>
+
+				<uni-forms-item>
+					<button style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" @click="submit">
+						登录
+					</button>
+				</uni-forms-item>
+
+
+			</uni-forms>
 		</view>
 	</view>
 
 </template>
 
 <script setup>
-import { reactive } from 'vue'
-import  useUserStore from  "@/store/modules/user"
-const userStore = useUserStore()
-const rules ={
+import { reactive, ref } from 'vue'
+import useUserStore from "@/store/modules/user"
 
-}
+const userStore = useUserStore()
+const rules = {}
 
 const formData = reactive({
 	username: '',
 	password: ''
 })
 
+// 控制密码显示/隐藏状态
+const showPass = ref(false)
+
+// 切换密码显示/隐藏
+const togglePassword = () => {
+	showPass.value = !showPass.value
+}
+
 const submit = () => {
 
 	if (!formData.username || !formData.password) {
@@ -81,11 +119,10 @@ const submit = () => {
 }
 
 
-
 </script>
 
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .container {
 	display: flex;
 	flex-direction: column;
@@ -99,22 +136,37 @@ const submit = () => {
 	margin-bottom: 50rpx;
 
 	.logo {
-		width: 50rpx;
-		height: 50rpx;
+		width: 80rpx;
+		height: 80rpx;
 	}
 
 	.title {
-		margin-left: 10rpx;
-		font-size: large;
+		margin-left: 20rpx;
+		font-size: 60rpx;
 		font-weight: bold;
 	}
 }
 
 .form-container {
 	width: 80%;
+	margin-top: 100rpx;
 
 	.form {
 		width: 100%;
 	}
 }
+
+.eye-icon {
+	cursor: pointer;
+	padding: 10rpx;
+	transition: all 0.3s ease;
+
+	&:hover {
+		transform: scale(1.1);
+	}
+
+	&:active {
+		transform: scale(0.95);
+	}
+}
 </style>