美化登录页面

components/mini-login/mini-login.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="content">
-		<view class="bg"></view>
+		<view class="bg1"></view>
 		<view class="bg2"></view>
+		<view class="bg3"></view>
 		<view class="tips">
 			<text class="title">登录</text>
 			<text class="subtitle">欢迎来到醍摩豆家长</text>
@@ -17,6 +18,7 @@
 			</view>
 		</view>
 	</view>
+	
 </template>
 
 <script>
@@ -92,18 +94,19 @@
 		width: 100vw;
 		height: 100vh;
 		background-color: #fafafa;
-		z-index: 999;
 
 		.tips {
 			padding-top: 200rpx;
 			padding-left: 80rpx;
 			display: flex;
 			flex-direction: column;
+			z-index: 99;
 
 			.title {
 				line-height: 70rpx;
 				font-weight: bold;
 				font-size: 50rpx;
+				z-index: 99;
 			}
 
 			.subtitle {
@@ -111,65 +114,53 @@
 				font-size: 35rpx;
 				font-weight: bold;
 				color: #b0b0b1;
+				z-index: 99;
 			}
 
 		}
 
-		.bg {
+		.bg1 {
 			position: fixed;
 			top: -250rpx;
-			right: -250rpx;
-			width: 600rpx;
-			height: 600rpx;
+			right: -280rpx;
+			width: 650rpx;
+			height: 650rpx;
 			border-radius: 100%;
 			background-color: #4169E1;
-			z-index: 2
+			margin-right: 10px;
+			z-index: 5;
 		}
 
 		.bg2 {
 			position: fixed;
-			top: -150rpx;
-			right: -300rpx;
+			top: -100rpx;
+			right: -320rpx;
+			width: 630rpx;
+			height: 630rpx;
+			border-radius: 100%;
+			margin-top: 20px;
+			background-color: #ff5959;
+			z-index: 4;
+		}
+		.bg3 {
+			position: fixed;
+			top: 400rpx;
+			right: 480rpx;
 			width: 600rpx;
 			height: 600rpx;
 			border-radius: 100%;
-			background-color: #6495ed;
-			z-index: 1;
+			margin-top: 20px;
+			background-color: #FFC600;
+			z-index: 4;
 		}
+		
+		
 
 		.form-box {
 			padding-top: 250rpx;
 			padding-left: 70rpx;
 			width: 610rpx;
 
-			.input-box {
-				margin: 40rpx 0;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				height: 100rpx;
-				background-color: #f5f5f5;
-				border-radius: 100rpx;
-				width: 100%;
-
-				input {
-					flex: 1;
-					height: 100%;
-					font-size: 30rpx;
-				}
-
-				.left {
-					padding: 0 30rpx;
-					width: 35rpx;
-					height: 35rpx;
-				}
-
-				.right {
-					padding: 0 30rpx;
-					width: 40rpx;
-					height: 40rpx;
-				}
-			}
 
 			.btn {
 				display: flex;
@@ -179,24 +170,28 @@
 				height: 100rpx;
 				border-radius: 100rpx;
 				color: #FFFFFF;
+				font-weight: bold;
 				background: linear-gradient(to right, #506AE7, #87CEFA);
-				text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
 				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 				margin-top: 30px;
+				z-index: 99;
 			}
 
 			.other {
 				display: flex;
 				justify-content: space-between;
+				z-index: 99;
 
 				text {
 					line-height: 80rpx;
 					font-size: 28rpx;
+					z-index: 99;
 				}
 
 				.other-text-left {
 					margin-left: 2px;
 					margin-top: 10px;
+					color: #FFFFFF;
 				}
 
 				.other-text-right {
@@ -206,4 +201,6 @@
 			}
 		}
 	}
+	
+	
 </style>

components/mini-userinfo/mini-userinfo.vue

@@ -161,7 +161,7 @@
 				justify-content: center;
 				align-items: center;
 				background-color: #FFFFFF;
-				box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+				box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 				
 				.cart-icon{
 					width: 60px;
@@ -183,13 +183,13 @@
 				
 				.cart-item{
 					background-color: #FFFFFF;
-					box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 					display: flex;
 					flex-direction: row;
 					align-items: center;
 					padding: 10px;
 					border-radius: 15rpx;
 					overflow: hidden;
+					box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 					
 					.cart-icon-sim{
 						width: 50rpx;
@@ -207,7 +207,6 @@
 		// 功能列表
 		.com-item {
 				margin-top: 20rpx;
-				box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 		
 				.com-box {
 					overflow: hidden;

pages/my/my.vue

@@ -1,5 +1,7 @@
 <template>
 	<view class="my-container">
+		<view class="bg1"></view>
+		<view class="bg2"></view>
 		<!-- 家长信息头部 -->
 		<view class="userinfo-topinfo">
 			<image class="parent-avatar" :src="parentinfo.avatarUrl" @click="getUserInfo"></image>
@@ -61,10 +63,31 @@
 	page,
 	.my-container {
 		height: 100%;
+		.bg1{
+			position: fixed;
+			top: -250rpx;
+			right: -250rpx;
+			width: 700rpx;
+			height: 700rpx;
+			margin-right: 250px;
+			border-radius: 100%;
+			background-color: #6495ed;
+			z-index: -2;
+		}
+		.bg2{
+			position: fixed;
+			top: -150rpx;
+			right: -250rpx;
+			width: 600rpx;
+			height: 600rpx;
+			border-radius: 100%;
+			background-color: #4169E1;
+			z-index: -1;
+		}
 
 		.userinfo-topinfo {
 			height: 400rpx;
-			background: linear-gradient(#ff5959, #f1f3f5);
+			// background: linear-gradient(#ff5959, #f1f3f5);
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
@@ -87,13 +110,13 @@
 				font-weight: bold;
 
 				.name {
-					color: #6b778d;
+					color: #303133;
 					font-size: 14px;
 					margin: 2px 0px 0px 5px;
 				}
 
 				.detail {
-					color: #3B4144;
+					color: #000000;
 					font-weight: bold;
 					margin: 5px 0px 0px 5px;
 				}

subpkg/login/login.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
-		<mini-login></mini-login>
+		<mini-login></mini-login>
+		<view class="ocean"></view>
 	</view>
 </template>
 
@@ -10,10 +11,70 @@
 			return {
 				
 			};
+		},
+		methods:{
+			
 		}
 	}
 </script>
 
-<style lang="scss">
-
+<style lang="scss">
+	.ocean {
+	    display: flex;
+			margin-top: -240px;
+			margin-left: -260px;
+	    width: 900px;
+	    height: 900px;
+	    background-color: #4169E1;
+	    border-radius: 50%;
+	
+	    &::before,
+	    &::after {
+	        content: "";
+	        position: absolute;
+					margin-top: 450px;
+	        width: 800px;
+	        height: 800px;
+	        top: 0;
+	        left: 50%;
+					border-radius: 43%;
+	        background-color: #fafafa;
+	        transform: translate(-50%, -70%) rotate(0);
+	        animation: rotate 6s linear infinite;
+	        z-index: 2;
+	    }
+	
+	    &::after {
+					border-radius: 46%;
+	        background-color: #fafafa;
+					opacity: 0.7;
+	        transform: translate(-50%, -70%) rotate(0);
+	        animation: rotate 10s linear -5s infinite;
+	        z-index: 3;
+	    }
+			&::after {
+					border-radius: 40%;
+			    background-color: #fafafa;
+					opacity: 0.5;
+			    transform: translate(-50%, -70%) rotate(0);
+			    animation: rotate 10s linear -5s infinite;
+			    z-index: 3;
+			}
+			&::after {
+					border-radius: 40%;
+			    background-color: #fafafa;
+					opacity: 0.3;
+			    transform: translate(-50%, -70%) rotate(0);
+			    animation: rotate 10s linear -5s infinite;
+			    z-index: 3;
+			}
+	}
+	
+	@keyframes rotate {
+	    50% {
+	        transform: translate(-50%, -73%) rotate(180deg);
+	    } 100% {
+	        transform: translate(-50%, -70%) rotate(360deg);
+	    }
+	}
 </style>