Browse Source

完成登录注册等静态页面

sslyg 3 years ago
parent
commit
6591c56ddd

+ 1 - 1
components/product-item/product-item.vue

@@ -65,7 +65,7 @@
 		width: 350rpx;
 		.image {
 			width: 350rpx;
-			height: 350rpx;
+			height: 300rpx;
 		}
 	}
 

+ 6 - 4
manifest.json

@@ -8,7 +8,7 @@
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,
-		"nvueStyleCompiler" : "uni-app",
+        "nvueStyleCompiler" : "uni-app",
         "compilerVersion" : 3,
         "splashscreen" : {
             "alwaysShowBeforeRender" : true,
@@ -43,7 +43,9 @@
             /* ios打包配置 */
             "ios" : {},
             /* SDK配置 */
-            "sdkConfigs" : {}
+            "sdkConfigs" : {
+                "ad" : {}
+            }
         }
     },
     /* 快应用特有相关 */
@@ -65,7 +67,7 @@
     "mp-toutiao" : {
         "usingComponents" : true
     },
-    "uniStatistics": {  
-        "enable": false
+    "uniStatistics" : {
+        "enable" : false
     }
 }

+ 120 - 61
pages.json

@@ -4,74 +4,133 @@
 			"path": "pages/home/home",
 			"style": {
 				"navigationStyle": "custom",
-				"backgroundColorTop":"#ff5d5b",
-				"backgroundColorBottom":"#eeeeee"
+				"backgroundColorTop": "#ff5d5b",
+				"backgroundColorBottom": "#eeeeee"
 			}
+		}, {
+			"path": "pages/order/order",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/user/user-center",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/shopping-cart/shopping-cart",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/user/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#ff5d5b",
+				"backgroundColor": "#ff5d5b"
+			}
+		}, {
+			"path": "pages/user/find-pass",
+			"style": {
+				"navigationBarTitleText": "找回密码",
+				"enablePullDownRefresh": false,
+				"backgroundColor": "#ff5d5b"
+			}
+
+		}, {
+			"path": "pages/register/step1",
+			"style": {
+				"navigationBarTitleText": "第一步",
+				"enablePullDownRefresh": false,
+				"backgroundColor": "#ff5d5b"
+
+			}
+
+		}, {
+			"path": "pages/register/step2",
+			"style": {
+				"navigationBarTitleText": "第二步",
+				"enablePullDownRefresh": false,
+				"backgroundColor": "#ff5d5b"
+			}
+		}, {
+			"path": "pages/register/step3",
+			"style": {
+				"navigationBarTitleText": "注册",
+				"enablePullDownRefresh": false,
+				"backgroundColor": "#ff5d5b"
+			}
+
+		}, {
+			"path": "pages/user/simple-article",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/user/vcode-login",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#ff5d5b",
+				"backgroundColor": "#ff5d5b"
+
+			}
+
 		}
-	    ,{
-            "path" : "pages/order/order",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/user-center/user-center",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/shopping-cart/shopping-cart",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
+		"navigationBarTextStyle": "white",
+		"navigationBarTitleText": "省心直供",
+		"navigationBarBackgroundColor": "#ff5d5b",
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
-	    "color": "#7A7E83",
-	    "selectedColor": "#ff5555",
-	    "borderStyle": "black",
-	    "backgroundColor": "#ffffff",
-		"midButton":{
+		"color": "#7A7E83",
+		"selectedColor": "#ff5d5b",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"midButton": {
 			"iconPath": "static/images/camera.png",
-			"iconWidth":"40px",
-			"height":"45px"
+			"iconWidth": "40px",
+			"height": "45px"
 		},
-	    "list": [{
-	        "pagePath": "pages/home/home",
-	        "iconPath": "static/images/home.png",
-	        "selectedIconPath": "static/images/home_selected.png",
-	        "text": "首页"
-	    }, {
-	        "pagePath": "pages/order/order",
-	        "iconPath": "static/images/qiang.png",
-	        "selectedIconPath": "static/images/qiang_selected.png",
-	        "text": "订单"
-	    }, {
-	        "pagePath": "pages/shopping-cart/shopping-cart",
-	        "iconPath": "static/images/kan.png",
-	        "selectedIconPath": "static/images/kan_selected.png",
-	        "text": "购物车"
-	    }, {
-	        "pagePath": "pages/user-center/user-center",
-	        "iconPath": "static/images/user.png",
-	        "selectedIconPath": "static/images/user_selected.png",
-	        "text": "我的"
-	    }]
+		"list": [{
+			"pagePath": "pages/home/home",
+			"iconPath": "static/images/home.png",
+			"selectedIconPath": "static/images/home_selected.png",
+			"text": "首页"
+		}, {
+			"pagePath": "pages/order/order",
+			"iconPath": "static/images/qiang.png",
+			"selectedIconPath": "static/images/qiang_selected.png",
+			"text": "订单"
+		}, {
+			"pagePath": "pages/shopping-cart/shopping-cart",
+			"iconPath": "static/images/kan.png",
+			"selectedIconPath": "static/images/kan_selected.png",
+			"text": "购物车"
+		}, {
+			"pagePath": "pages/user/user-center",
+			"iconPath": "static/images/user.png",
+			"selectedIconPath": "static/images/user_selected.png",
+			"text": "我的"
+		}]
+	},
+	"condition": { //模式配置,仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+			"name": "", //模式名称
+			"path": "", //启动页面,必选
+			"query": "" //启动参数,在页面的onLoad函数里面得到
+		}]
 	}
 }

+ 110 - 0
pages/register/step1.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="step1">
+		<view class="step1-from">
+			<view class="title">填写邀请码</view>
+			<view class="input-item" style="margin-top: 180upx;">
+				<input type="text" placeholder="请输入邀请码">
+				<view class="scan">
+					<image src="../../static/images/scan.png" mode="scaleToFill" style="width: 46upx;height: 45upx;"></image>
+				</view>
+			</view>
+			<view class="button-item" style="margin-top: 220upx;">
+				<navigator url="/pages/register/step2" open-type="navigate">
+					<button class="next">下一步</button>
+				</navigator>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.step1 {
+		background: $primary-color;
+		height: 100vh;
+		width: 750rpx;
+		overflow: hidden;
+	}
+
+	.step1-from {
+		margin: auto;
+		width: 600upx;
+		height: 700upx;
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 72upx;
+		padding-top: 40upx;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 2;
+		margin-top: 200upx;
+
+		&::after {
+			content: "";
+			background: url(../../static/images/login/box-bottom.png) no-repeat;
+			background-size: contain;
+			width: 564upx;
+			height: 30upx;
+			display: block;
+			position: absolute;
+			bottom: -30upx;
+			left: 18upx;
+			z-index: -1;
+		}
+
+		.title {
+			font-size: 30upx;
+			color: #999999;
+			font-weight: bold;
+			text-align: center;
+			margin-bottom: 80upx;
+		}
+	}
+
+	.input-item {
+		display: flex;
+		position: relative;
+		margin-bottom: 30upx;
+		border-bottom: 2upx solid $primary-color;
+
+		.scan {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+		input {
+			flex-grow: 1;
+			font-size: 30upx;
+			text-align: center;
+			padding: 5upx 55upx;
+		}
+	}
+
+	.next {
+		height: 80upx;
+		border: 2upx solid $primary-color;
+		line-height: 80upx;
+		margin: 30upx 0;
+		font-size: 32upx;
+		background: $primary-color;
+		color: white;
+
+		&::after {
+			border: none;
+		}
+	}
+</style>

+ 119 - 0
pages/register/step2.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="step2">
+		<view class="step2-from">
+			<view class="title">请选择角色</view>
+			<view class="role-list">
+				<view class="role-item" @tap="user_type=1" :class="{'selected':user_type===1}">
+					<image src="../../static/images/woman.png" mode="scaleToFill" style="width: 144upx;height: 144upx;"></image>
+					<view class="text"><text>网店店主</text></view>
+				</view>
+				<view class="role-item" @tap="user_type=2" :class="{'selected':user_type===2}">
+					<image src="../../static/images/man.png" mode="scaleToFill" style="width: 144upx;height: 144upx;"></image>
+					<view class="text"><text>供货厂家</text></view>
+				</view>
+			</view>
+			<view class="button-item" style="margin-top: 80upx;">
+				<navigator url="/pages/register/step3" open-type="navigate">
+					<button class="next">下一步</button>
+				</navigator>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				user_type: 1
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.step2 {
+		background: $primary-color;
+		height: 100vh;
+		width: 750rpx;
+		overflow: hidden;
+	}
+
+	.step2-from {
+		margin: auto;
+		width: 600upx;
+		height: 700upx;
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 72upx;
+		padding-top: 40upx;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 2;
+		margin-top: 200upx;
+
+		&::after {
+			content: "";
+			background: url(../../static/images/login/box-bottom.png) no-repeat;
+			background-size: contain;
+			width: 564upx;
+			height: 30upx;
+			display: block;
+			position: absolute;
+			bottom: -30upx;
+			left: 18upx;
+			z-index: -1;
+		}
+
+		.title {
+			font-size: 30upx;
+			color: #999999;
+			font-weight: bold;
+			text-align: center;
+			margin-bottom: 70upx;
+		}
+	}
+
+	.role-list {
+		display: flex;
+		justify-content: center;
+
+		.role-item {
+			margin: 50upx;
+			text-align: center;
+			position: relative;
+			.text{
+				font-size: 30upx;
+				color: #666666;
+			}
+			&.selected::after {
+				background-image: url(../../static/images/icon71.png);
+				content: "";
+				width: 40upx;
+				height: 40upx;
+				display: block;
+				position: absolute;
+				top: 5upx;
+				right: 5upx;
+			}
+		}
+	}
+
+	.next {
+		height: 80upx;
+		border: 2upx solid $primary-color;
+		line-height: 80upx;
+		margin: 30upx 0;
+		font-size: 32upx;
+		background: $primary-color;
+		color: white;
+
+		&::after {
+			border: none;
+		}
+	}
+</style>

+ 152 - 0
pages/register/step3.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="step3">
+		<view class="login-from">
+			<view class="title">填写资料</view>
+			<view class="input-item">
+				<label for="">
+					<text>中国(+86)</text>
+				</label>
+				<input type="number" placeholder="请输入手机号">
+			</view>
+			<view class="input-item">
+				<label for="">
+					<text>验证码</text>
+				</label>
+				<input type="number" placeholder="" maxlength="6">
+				<button class="send-vcode">获取验证码</button>
+			</view>
+			<view class="input-item">
+				<label for="">
+					<text>密码</text>
+				</label>
+				<input type="password" placeholder="请输入密码">
+			</view>
+			<view class="button-item" style="margin-top: 80upx;">
+				<button class="confirm">注册</button>
+			</view>
+			<view class="agreement">
+				<view>
+					<text>注册代表您已同意</text>
+					<navigator url="/pages/user/simple-article?title=用户协议" open-type="navigate" style="display: inline;">
+						<text class="warning">《省心直供APP协议》</text>
+					</navigator>
+					<navigator url="/pages/user/simple-article?title=用户协议" open-type="navigate" style="display: inline;">
+						<text class="warning">《隐私协议》</text>
+					</navigator>
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.step3 {
+		background: $primary-color;
+		height: 100vh;
+		width: 750rpx;
+		overflow: hidden;
+	}
+
+	.login-from {
+		margin: auto;
+		width: 600upx;
+		height: 700upx;
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 72upx;
+		padding-top: 40upx;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 2;
+		margin-top: 200upx;
+
+		&::after {
+			content: "";
+			background: url(../../static/images/login/box-bottom.png) no-repeat;
+			background-size: contain;
+			width: 564upx;
+			height: 30upx;
+			display: block;
+			position: absolute;
+			bottom: -30upx;
+			left: 18upx;
+			z-index: -1;
+		}
+
+		.title {
+			font-size: 30upx;
+			color: #999999;
+			font-weight: bold;
+			text-align: center;
+			margin-bottom: 80upx;
+		}
+	}
+
+	.input-item {
+		display: flex;
+		position: relative;
+		margin-bottom: 30upx;
+		border-bottom: 2upx solid $primary-color;
+
+		label {
+			width: 158upx;
+			font-size: 30upx;
+			color: #999999;
+		}
+
+		input {
+			flex-grow: 1;
+			padding: 5upx;
+			font-size: 30upx;
+		}
+	}
+
+	.confirm {
+		height: 80upx;
+		border: 2upx solid $primary-color;
+		line-height: 80upx;
+		margin: 30upx 0;
+		font-size: 32upx;
+		background: $primary-color;
+		color: white;
+
+		&::after {
+			border: none;
+		}
+	}
+
+	.send-vcode {
+		background: $primary-color;
+		color: white;
+		font-size: 24upx;
+		position: absolute;
+		padding: 5upx 0;
+		width: 160upx;
+		line-height: normal;
+		right: 0upx;
+		top: -5upx;
+	}
+
+	.agreement {
+		font-size: 22upx;
+
+		.warning {
+			color: $primary-color;
+			font-weight: bold;
+		}
+	}
+</style>

+ 137 - 0
pages/user/find-pass.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="find-pass">
+		<view class="login-from">
+			<view class="title">填写资料</view>
+			<view class="input-item">
+				<label for="">
+					<text>中国(+86)</text>
+				</label>
+				<input type="number" placeholder="请输入注册的手机号">
+			</view>
+			<view class="input-item">
+				<label for="">
+					<text>验证码</text>
+				</label>
+				<input type="number" placeholder="" maxlength="6">
+				<button class="send-vcode">获取验证码</button>
+			</view>
+			<view class="input-item">
+				<label for="">
+					<text>新密码</text>
+				</label>
+				<input type="password" placeholder="请再新密码">
+			</view>
+			<view class="input-item">
+				<label for="">
+					<text>确认密码</text>
+				</label>
+				<input type="password" placeholder="请再次输入新密码">
+			</view>
+			<view class="button-item" style="margin-top: 80upx;">
+				<button class="confirm">确认修改</button>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.find-pass {
+		background: $primary-color;
+		height: 100vh;
+		width: 750rpx;
+		overflow: hidden;
+	}
+
+	.login-from {
+		margin: auto;
+		width: 600upx;
+		height: 700upx;
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 72upx;
+		padding-top: 40upx;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 2;
+		margin-top: 200upx;
+
+		&::after {
+			content: "";
+			background: url(../../static/images/login/box-bottom.png) no-repeat;
+			background-size: contain;
+			width: 564upx;
+			height: 30upx;
+			display: block;
+			position: absolute;
+			bottom: -30upx;
+			left: 18upx;
+			z-index: -1;
+		}
+		.title{
+			font-size: 30upx;
+			color: #999999;
+			font-weight: bold;
+			text-align: center;
+			margin-bottom: 80upx;
+		}
+	}
+
+	.input-item {
+		display: flex;
+		position: relative;
+		margin-bottom: 30upx;
+		border-bottom: 2upx solid $primary-color;
+
+		label {
+			width: 158upx;
+			font-size: 30upx;
+			color: #999999;
+		}
+
+		input {
+			flex-grow: 1;
+			padding: 5upx;
+			font-size: 30upx;
+		}
+	}
+
+	.confirm {
+		height: 80upx;
+		border: 2upx solid $primary-color;
+		line-height: 80upx;
+		margin: 30upx 0;
+		font-size: 32upx;
+		background: $primary-color;
+		color: white;
+
+		&::after {
+			border: none;
+		}
+	}
+
+	.send-vcode {
+		background: $primary-color;
+		color: white;
+		font-size: 24upx;
+		position: absolute;
+		padding: 5upx 0;
+		width: 160upx;
+		line-height: normal;
+		right: 0upx;
+		top:-5upx;
+	}
+</style>

+ 186 - 0
pages/user/login.vue

@@ -0,0 +1,186 @@
+<template>
+	<view class="login">
+		<view class="logo">
+			<image src="../../static/images/login/logo.png" style="width: 160upx;height: 160upx;" mode="scaleToFill"></image>
+		</view>
+		<view class="login-from">
+			<view class="input-item">
+				<label for="">
+					<image src="../../static/images/login/phone.png" style="width: 30upx;height: 40upx;" mode=""></image>
+				</label>
+				<input type="text" placeholder="请输入账号">
+			</view>
+			<view class="input-item" style="margin-bottom: 20upx;">
+				<label for="">
+					<image src="../../static/images/login/lock.png" style="width: 30upx;height: 40upx;" mode=""></image>
+				</label>
+				<input type="text" placeholder="请输入密码">
+			</view>
+			<view class="forget">
+				<navigator url="/pages/user/find-pass" open-type="navigate" style="display: inline;">
+					<text>忘记密码</text>
+				</navigator>
+			</view>
+			<view class="button-item">
+				<button class="login-btn">登录</button>
+			</view>
+			<view class="button-item">
+				<navigator url="/pages/register/step1" open-type="navigate">
+					<button class="reg-btn">注册</button>
+				</navigator>
+			</view>
+			<view class="use-phone">
+				<navigator url="/pages/user/vcode-login" open-type="navigate" style="display: inline;">
+					<text>使用手机验证码登入</text>
+				</navigator>
+			</view>
+		</view>
+
+		<view class="third-party">
+			<view class="title"><text>第三方登录</text></view>
+			<view class="content">
+				<image src="../../static/images/login/wx.png" style="width: 90upx;height: 90upx;" mode="scaleToFill"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.login {
+		background: $primary-color;
+		height: 100vh;
+		width: 750rpx;
+		/* #ifdef APP-PLUS */
+		padding-bottom: 60upx;
+		/* #endif */
+	}
+
+	.logo {
+		width: 160upx;
+		height: 160upx;
+		background: white;
+		border-radius: 160upx;
+		border: 10upx solid $primary-color;
+		margin: auto;
+		margin-top: -60upx;
+		position: relative;
+		top: 80upx;
+		z-index: 999;
+	}
+
+	.login-from {
+		margin: auto;
+		width: 600upx;
+		height: 740upx;
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 72upx;
+		padding-top: 180upx;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 2;
+
+		&::after {
+			content: "";
+			background: url(../../static/images/login/box-bottom.png) no-repeat;
+			background-size: contain;
+			width: 564upx;
+			height: 30upx;
+			display: block;
+			position: absolute;
+			bottom: -30upx;
+			left: 18upx;
+			z-index: -1;
+		}
+	}
+
+	.input-item {
+		display: flex;
+		margin-bottom: 48upx;
+
+		label {
+			width: 50upx;
+		}
+
+		input {
+			border-bottom: 2upx solid $primary-color;
+			flex-grow: 1;
+			padding: 5upx;
+			font-size: 30upx;
+		}
+	}
+
+	.forget {
+		text-align: right;
+		color: $primary-color;
+		font-size: 28upx;
+	}
+
+	.login-btn,
+	.reg-btn {
+		height: 80upx;
+		border: 2upx solid $primary-color;
+		line-height: 80upx;
+		margin: 30upx 0;
+		font-size: 32upx;
+
+		&::after {
+			border: none;
+		}
+	}
+
+	.login-btn {
+		background: $primary-color;
+		color: white;
+	}
+
+	.reg-btn {
+		background-color: white;
+		color: $primary-color;
+	}
+
+	.use-phone {
+		font-size: 28upx;
+		text-align: center;
+		color: $primary-color;
+	}
+
+	.third-party {
+		margin: auto;
+		text-align: center;
+		margin-top: 100upx;
+
+		.title {
+			font-size: 28upx;
+			color: white;
+
+			&::before,
+			&::after {
+				display: inline-block;
+				width: 100upx;
+				height: 0upx;
+				border: 1upx solid #ff8ca8;
+				transform: scaleY(0.5);
+				content: "";
+				margin: 8upx 20upx;
+			}
+		}
+
+		.content {
+			margin-top: 50upx;
+		}
+	}
+</style>

+ 28 - 0
pages/user/simple-article.vue

@@ -0,0 +1,28 @@
+<template>
+	<view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		},
+		onLoad: function(option) {
+
+			uni.setNavigationBarTitle({
+				title: option.title
+			})
+		}
+	}
+</script>
+
+<style>
+
+</style>

+ 4 - 2
pages/user-center/user-center.vue

@@ -1,6 +1,8 @@
 <template>
 	<view>
-		
+		<navigator url="/pages/user/login" open-type="navigate" style="display: inline;">
+			<button type="default">登录</button>
+		</navigator>
 	</view>
 </template>
 
@@ -8,7 +10,7 @@
 	export default {
 		data() {
 			return {
-				
+
 			};
 		}
 	}

+ 167 - 0
pages/user/vcode-login.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="login">
+		<view class="logo">
+			<image src="../../static/images/login/logo.png" style="width: 160upx;height: 160upx;" mode="scaleToFill"></image>
+		</view>
+		<view class="login-from">
+			<view class="input-item">
+				<label for="">
+					<image src="../../static/images/login/phone.png" style="width: 30upx;height: 40upx;" mode=""></image>
+				</label>
+				<input type="text" placeholder="请输入手机号">
+			</view>
+			<view class="input-item">
+				<label for="">
+					<image src="../../static/images/login/lock.png" style="width: 30upx;height: 40upx;" mode=""></image>
+				</label>
+				<input type="number" placeholder="请输入验证码" maxlength="6">
+				<button class="send-vcode">获取验证码</button>
+			</view>
+			<view class="button-item" style="margin-top: 140upx;">
+				<button class="login-btn">登录</button>
+			</view>
+
+		</view>
+
+		<view class="third-party">
+			<view class="title"><text>第三方登录</text></view>
+			<view class="content">
+				<image src="../../static/images/login/wx.png" style="width: 90upx;height: 90upx;" mode="scaleToFill"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.login {
+		background: $primary-color;
+		height: 100vh;
+		width: 750rpx;
+		/* #ifdef APP-PLUS */
+		padding-bottom: 60upx;
+		/* #endif */
+	}
+
+	.logo {
+		width: 160upx;
+		height: 160upx;
+		background: white;
+		border-radius: 160upx;
+		border: 10upx solid $primary-color;
+		margin: auto;
+		margin-top: -60upx;
+		position: relative;
+		top: 80upx;
+		z-index: 999;
+	}
+
+	.login-from {
+		margin: auto;
+		width: 600upx;
+		height: 700upx;
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 72upx;
+		padding-top: 180upx;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 2;
+
+		&::after {
+			content: "";
+			background: url(../../static/images/login/box-bottom.png) no-repeat;
+			background-size: contain;
+			width: 564upx;
+			height: 30upx;
+			display: block;
+			position: absolute;
+			bottom: -30upx;
+			left: 18upx;
+			z-index: -1;
+		}
+	}
+
+	.input-item {
+		display: flex;
+		margin-bottom: 48upx;
+		position: relative;
+		label {
+			width: 50upx;
+		}
+
+		input {
+			border-bottom: 2upx solid $primary-color;
+			flex-grow: 1;
+			padding: 5upx;
+			font-size: 30upx;
+		}
+	}
+
+
+	.send-vcode {
+		background: $primary-color;
+		color: white;
+		font-size: 24upx;
+		position: absolute;
+		padding: 5upx 0;
+		width: 160upx;
+		line-height: normal;
+		right: 0upx;
+		top: -5upx;
+	}
+	.login-btn {
+		height: 80upx;
+		border: 2upx solid $primary-color;
+		line-height: 80upx;
+		margin: 30upx 0;
+		font-size: 32upx;
+		background: $primary-color;
+		color: white;
+
+		&::after {
+			border: none;
+		}
+	}
+
+
+
+
+	.third-party {
+		margin: auto;
+		text-align: center;
+		margin-top: 100upx;
+
+		.title {
+			font-size: 28upx;
+			color: white;
+
+			&::before,
+			&::after {
+				display: inline-block;
+				width: 100upx;
+				height: 0upx;
+				border: 1upx solid #ff8ca8;
+				transform: scaleY(0.5);
+				content: "";
+				margin: 8upx 20upx;
+			}
+		}
+
+		.content {
+			margin-top: 50upx;
+		}
+	}
+</style>

+ 0 - 3
ssly.scss

@@ -1,3 +0,0 @@
-.flex{
-	display: flex;
-}

BIN
static/images/icon71.png


BIN
static/images/login/bg.jpg


BIN
static/images/login/box-bottom.png


BIN
static/images/login/lock.png


BIN
static/images/login/logo.png


BIN
static/images/login/phone.png


BIN
static/images/login/wx.png


BIN
static/images/man.png


BIN
static/images/scan.png


BIN
static/images/woman.png