登录

pages.json

@@ -186,6 +186,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/projectDepartment/exportApplication/application",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 
 	

pages/login/login.vue

@@ -0,0 +1,261 @@
+<template>
+	<view>
+		<view class="background">
+
+		</view>
+		<view class="logo">
+			<img src="../../assets/img/loginLogo@1x.png" alt="">
+		</view>
+		<view class="title">
+			荆力设备管理系统
+		</view>
+		<image src="../../assets/img/login.png" mode="">
+		</image>
+
+		<view class="login">
+			<view class="login-box">
+				<!-- 登录身份 -->
+				<view class="identity">
+					<view class="icon">
+						<img src="../../assets/img/riFill-account-box-fill@1x.png" alt="">
+					</view>
+					<view class="tips">
+						请选择登录身份
+					</view>
+					<view class="unfold" @click="changeoptionShow()">
+						<u-icon name="arrow-down"></u-icon>
+
+					</view>
+					<view class="options" v-if="optionShow">
+						<view class="item">选项1</view>
+						<view class="item">选项2</view>
+						<view class="item">选项3</view>
+					</view>
+				</view>
+
+				<!-- 手机号 -->
+				<view class="tel">
+					<view class="icon">
+
+						<img src="../../assets/img/riFill-smartphone-fill@1x.png" alt="">
+					</view>
+					<view class="tips">
+						<u-input class="telInput" type="number" placeholder="请填写手机号码" />
+					</view>
+				</view>
+				<!-- 验证码 -->
+				<view class="pwd">
+					<view class="icon">
+						<img src="../../assets/img/riFill-message-3-fill Copy@1x.png" alt="">
+
+					</view>
+
+					<view class="tips">
+						<view class="input">
+							<u-input type="number" placeholder="请填写验证码" />
+						</view>
+						<view class="verification-code">获取验证码</view>
+
+					</view>
+				</view>
+			
+			<view class="login-btn">
+				<button>登录</button>
+			</view>
+			</view>
+		
+
+		</view>
+	
+	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				optionShow: false
+			}
+		},
+		methods: {
+			changeoptionShow() {
+				this.optionShow = !this.optionShow
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #fff;
+	}
+
+	uni-image {
+		width: 100%;
+		height: 512px;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+
+	.background {
+		width: 100%;
+		height: 512px;
+		background: linear-gradient(180deg, rgba(0, 45, 194, 1) 0%, rgba(0, 59, 254, 0.76) 49%, rgba(1, 122, 255, 0.5) 100%);
+		position: relative;
+		z-index: 111;
+		opacity: 0.5;
+		padding-top: 300px;
+	}
+
+	.title {
+		font-family: 'Alibaba-PuHuiTi-Regular';
+		text-align: center;
+		color: rgba(255, 255, 255, 1);
+		font-size: 56rpx;
+		position: absolute;
+		top: 217px;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		opacity: 1;
+
+	}
+
+	.logo {
+		width: 144rpx;
+		height: 144rpx;
+		line-height: 144rpx;
+		border-radius: 12px;
+		background-color: rgba(255, 255, 255, 1);
+		text-align: center;
+		position: absolute;
+		top: 133px;
+		left: 0;
+		right: 0;
+		margin: auto;
+		z-index: 999;
+
+		img {
+			vertical-align: middle;
+		}
+	}
+
+	.login-box {
+		position: absolute;
+		border-radius: 24px 24px 0px 0px;
+		background-color: rgba(255, 255, 255, 1);
+		padding: 88rpx 96rpx;
+		top: 410px;
+		left: 0;
+		right: 0;
+		z-index: 999;
+
+		.tel {
+			/deep/.u-input {}
+		}
+
+		.pwd {
+			/deep/.u-input {}
+		}
+
+
+
+
+
+
+		.tel,
+		.pwd,
+		.identity {
+			width: 558rpx;
+			background-color: rgba(244, 245, 249, 1);
+			position: relative;
+			display: flex;
+			height: 80rpx;
+			line-height: 80rpx;
+			color: rgba(183, 172, 172, 1);
+			margin: auto;
+			margin-bottom: 36rpx;
+			border: 1px solid rgba(193, 204, 223, 1);
+			border-radius: 8px;
+
+			/deep/.u-input__input {
+				font-size: 32rpx;
+			}
+
+			.icon {
+				width: 14%;
+				text-align: center;
+				color: #B0B8C8;
+
+				img {
+					vertical-align: middle;
+				}
+			}
+
+
+			.tips {
+
+				text-indent: 16rpx;
+				padding-right: 16rpx;
+				display: flex;
+				justify-content: space-between;
+
+				/deep/uni-input {
+					height: 80rpx !important;
+					line-height: 80rpx !important;
+					color: #A7ACB4;
+				}
+
+				.input {
+					width: 60%;
+				}
+			}
+
+
+		}
+
+		// 验证码
+		.verification-code {
+			color: #1F4A99;
+			line-height: 80rpx;
+			font-family: 'Alibaba-PuHuiTi-Regular';
+			color: rgba(0, 59, 254, 1);
+		}
+
+		.unfold {
+			margin-left: auto;
+			margin-right: 24rpx;
+		}
+
+		.options {
+
+			background-color: #fff;
+			z-index: 999;
+			position: absolute;
+			top: 80rpx;
+			left: 40px;
+			right: 4rpx;
+			box-shadow: 0px 2px 4px #A7ACB4;
+			color: #101010;
+
+			.item {
+				padding-left: 16rpx;
+				line-height: 72rpx;
+			}
+		}
+		.login-btn{
+			margin-top: 80rpx;
+			uni-button{
+				border-radius: 8px;
+				background-color: rgba(0, 59, 254, 1);
+				color: #fff;
+				height: 88rpx;
+				line-height: 88rpx;
+			}
+		}
+		
+	}
+</style>