登录页面样式

main.js

@@ -6,7 +6,7 @@ import common from './utils/common.js'
 // const baseURL = 'http://localhost:7010'
 //const baseURL = 'http://81.69.47.31:7010'
 // const baseURL = 'http://bnyer.vaiwan.com'
-const baseURL = 'http://i5s7bh.natappfree.cc'
+const baseURL = 'http://aipdbt.natappfree.cc'
 
 
 Vue.prototype.$baseURL = baseURL;

pages.json

@@ -38,8 +38,9 @@
 		},{
 			"path": "pages/login/login",
 			"style": {
-				"navigationBarTitleText": "登录",
+				"navigationBarTitleText": " ",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#22343C"
 			}
 
 		}, {
@@ -211,7 +212,10 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "bnyer",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"backgroundColor": "#F8F8F8",
+		"rpxCalcMaxDeviceWidth": 750, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
+		"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
+		"rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
 	},
 	//底部跳转tab
 	"tabBar": {

pages/login/login.vue

@@ -1,14 +1,40 @@
 <template>
-	<view>
+	<view class="login-body uni-bg-color">
-		<uni-forms validate-trigger='blur' :modelValue="formData" ref="form">
+		<div class="auto-center">
-			<uni-forms-item label="手机号" required name="phone">
+			<div class="logo-div"></div>
-				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
+			<div class="welcome-text">
-			</uni-forms-item>
+				<p class="welcome-title uni-white">进入次元Hub</p>
-			<uni-forms-item label="密码" required name="password">
+				<p class="welcome-subtitle uni-secondary-color">开启你的创作之旅~</p>
-				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
+			</div>
-			</uni-forms-item>
+			<uni-forms class="login-form-ss" validate-trigger='blur' :modelValue="formData" ref="form">
-		</uni-forms>
+				<uni-forms-item required name="phone">
-		<button type="primary" @click="$noMultipleClicks(login,formData)">登录</button>
+					<template #label>
+						<div class="form-label l-username">
+							<uni-icons type="contact" size="18" color="#FFC542"></uni-icons>
+						</div>
+					</template>
+					<uni-easyinput 
+						type="number" 
+						v-model="formData.phone"
+						placeholder="请输入手机号"
+						:clearable="false"
+						:inputBorder="false"
+					/>
+				</uni-forms-item>
+				<uni-forms-item required name="password">
+					<template #label>
+						<div class="form-label l-password">
+							<uni-icons type="locked-filled" size="18" color="#FF575F"></uni-icons>
+						</div>
+					</template>
+					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" :inputBorder="false" />
+				</uni-forms-item>
+			</uni-forms>
+			<button class="login-btn" type="primary" @click="$noMultipleClicks(login,formData)">登录<uni-icons type="arrow-right" size="20" color="#fff"></uni-icons></button>
+			<div class="foget-password uni-secondary-color">
+				<span >忘记密码？</span>
+			</div>
+		</div>
 	</view>
 </template>
 
@@ -27,7 +53,7 @@
 					phone: '',
 					password: ''
 				},
-
+				
 				rules: {
 					password: {
 						rules: [{
@@ -141,6 +167,94 @@
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
+.login-body {
+	min-height: 100vh;
+	background-color: #22343C;
+
+	.auto-center {
+		width: 622rpx;
+		margin: 0 auto;
+		border-top: 1rpx solid #22343C;
+		border-bottom: 1rpx solid #22343C;
+	}
+
+	.logo-div {
+		width: 86rpx;
+		height: 86rpx;
+		background: linear-gradient(180.00deg, rgba(63.59,223.05,158.63,1) 0%,rgba(62,213,152,1) 100%);
+		box-shadow: 0 4rpx 8rpx rgba(15, 218, 137, 0.3);
+		border-radius: 24rpx;
+		margin-top: 154rpx;
+	}
+	.welcome-text {
+		margin-top: 72rpx;
+		margin-bottom: 72rpx;
+		
+		.welcome-title {
+			font-size: 84rpx;
+		}
+		.welcome-subtitle {
+			font-size: 48rpx;
+			margin-left: 90rpx;
+			margin-top: 44rpx;
+		}
+	}
+	
+	.uni-forms {
+		
+		.form-label {
+			width: 76rpx;
+			height: 96rpx;
+			border-radius: 24rpx;
+			line-height: 96rpx;
+			text-align: center;
+			margin-right: 24rpx;
+			margin-bottom: 4rpx;
+			margin-top: 4rpx;
+		}
+		
+		.l-username {
+			background: rgb(98, 91, 57);
+		}
+		
+		.l-password {
+			background: rgb(98, 58, 66);
+		}
+		
+	}
+	
+	.login-btn {
+		background: linear-gradient(180.00deg, rgba(63.59,223.05,158.63,1) 0%,rgba(62,213,152,1) 100%);
+		box-shadow: 0 4rpx 8rpx rgba(15, 218, 137, 0.3);
+		border-radius: 24rpx;
+		margin-top: 52rpx;
+	}
+	.foget-password {
+		text-align: right;
+		margin-top: 26rpx;
+		margin-right: 24rpx;
+		margin-bottom: 100rpx;
+	}
+}
+.login-body {
+	::v-deep .uni-forms-item {
+		margin-bottom: 0 !important; 
+	}
+}
+.login-body {
+	::v-deep input {
+		height: 100rpx;
+		border-bottom: 4rpx solid rgba(0, 0, 0, 0.05);
+		background: none !important;
+		font-size: 36rpx;
+		color: rgb(150, 167, 175);
+	}
+}
 
+.login-body {
+	::v-deep .uni-easyinput__content {
+		background: none !important;
+	}
+}
 </style>

uni.scss

@@ -1 +1 @@
-@import '@/uni_modules/uni-scss/variables.scss';
+@import '@/uni_modules/uni-scss/variables.scss';