From 15ccd3661e90d61a45d246ff8fc0708f3b0f0c4b Mon Sep 17 00:00:00 2001
From: "zorro.zhang" <zorro.zhang@bambulab.com>
Date: Fri, 9 Sep 2022 15:49:59 +0800
Subject: [PATCH] ENH: self-adaption UserGuide Icon arrange

Change-Id: I6b04d7b54bd73ae0c7864cc6e1661b44c6d6c059
---
 resources/web/homepage/css/home.css | 79 +++++++++++++++++++++++++----
 1 file changed, 68 insertions(+), 11 deletions(-)

diff --git a/resources/web/homepage/css/home.css b/resources/web/homepage/css/home.css
index 7dda7dd72..294648fa4 100644
--- a/resources/web/homepage/css/home.css
+++ b/resources/web/homepage/css/home.css
@@ -62,6 +62,7 @@ body
 	justify-content: center;
 	flex-wrap: nowrap;
 	position: relative;
+	width:262px;
 }
 
 
@@ -205,6 +206,7 @@ body
 {
 	width: 100%;
 	height: 100%;
+	min-width: 835px;
 	overflow-y:auto;
 }
 
@@ -404,14 +406,14 @@ body
 
 .CT_Delete
 {
-	background: url("../img/remove.svg");
+	background: url("../img/delete.png");
 	background-repeat: no-repeat;
 	background-size: contain;	
 }
 
 .CT_Explore
 {
-	background: url("../img/open_folder.svg");
+	background: url("../img/folder.png");
 	background-repeat: no-repeat;
 	background-size: contain;		
 }
@@ -475,26 +477,81 @@ body
 	flex-wrap: wrap;
 	align-content: flex-start;
 	overflow-y: auto;
-	padding: 50px 80px;
+	margin: 30px 40px;
+	position: relative;
+	top: 0px;
+	bottom: 0px;
+	right: 0px;
+	left: 0px;
 }
 
+
+@media screen and (max-width: 1100px) {
 .GuideBlock
 {
-	width: 400px;
-	margin: 0px 20px 40px 20px;
+	width: calc(50% - 20px);
+	margin: 0px 10px 40px 10px;
 	cursor: pointer;
 }
+}
+
+@media screen and ( min-width:1101px) and ( max-width:1680px )
+{
+	.GuideBlock
+	{
+		width: calc(33% - 20px);
+	    margin: 0px 10px 40px 10px;
+		cursor: pointer;
+	}
+}
+
+@media screen and ( min-width:1681px) and (max-width:2120px ) {
+.GuideBlock
+{
+    width: calc(25% - 20px);	
+	margin: 0px 10px 40px 10px;
+	cursor: pointer;
+}
+}
+
+@media screen and ( min-width:2121px) and (max-width:2620px ) {
+.GuideBlock
+{
+    width: calc(20% - 20px);
+	margin: 0px 10px 40px 10px;
+	cursor: pointer;
+}
+}
+
+@media screen  and (min-width:2621px ) and (max-width:3120px ) {
+.GuideBlock
+{
+    width: calc(16.6% - 20px);
+	margin: 0px 10px 40px 10px;
+	cursor: pointer;
+}
+}
+
+@media screen  and (min-width:3121px ) {
+.GuideBlock
+{
+    width: calc(14.2% - 20px);
+	margin: 0px 10px 40px 10px;
+	cursor: pointer;
+}
+}
+
+
+
 
 .UG_IMG
 {
-	width: 400px;
-	height: 250px;	
+	width: 100%;	
 }
 
 .UG_IMG img
 {
-	width: 400px;
-	height: 250px;	
+	width: 100%;
 	border-radius: 5px 5px 0px 0px;
 }
 
@@ -503,14 +560,14 @@ body
 	font-size: 18px;
 	font-weight: 700;
 	line-height: 20px;
-	width: 400px;
+	width: 100%;
 	margin-top: 20px;
 	margin-bottom: 4px;
 }
 
 .UG_DESC
 {
-	width: 400px;
+	width: 100%;
 	line-height: 18px;
 	color: #4E5454;
 	font-size: 14px;