From 7897bd78bf9295c8d95cf5307115012724a1cf02 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 7 Jun 2021 11:46:20 +0800
Subject: [PATCH] docs: update site home recommand style

---
 site/theme/template/Home/RecommendPage.less | 25 ++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/site/theme/template/Home/RecommendPage.less b/site/theme/template/Home/RecommendPage.less
index 9712f7ef52..e4fe897505 100644
--- a/site/theme/template/Home/RecommendPage.less
+++ b/site/theme/template/Home/RecommendPage.less
@@ -1,5 +1,13 @@
 @import '../../../../components/style/themes/default.less';
 
+.linear-gradient(@mid-pos, @end-pos) {
+  background: linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.25) @mid-pos,
+    rgba(0, 0, 0, 0.65) @end-pos
+  );
+}
+
 .recommend-block {
   position: relative;
   display: block;
@@ -37,16 +45,15 @@
   }
 
   &::before {
+    .linear-gradient(40%, 100%);
+
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background: linear-gradient(
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0, 0.25) 30%,
-      rgba(0, 0, 0, 0.5) 100%
-    );
+    opacity: 0.3;
+    transition: all 0.5s;
     content: '';
     pointer-events: none;
   }
@@ -107,9 +114,17 @@
   .recommend-block {
     &-main {
       height: 408px;
+
+      &::before {
+        .linear-gradient(70%, 100%);
+      }
     }
 
     &:hover {
+      &::before {
+        opacity: 1;
+      }
+
       .recommend-content {
         transform: translateY(0);