fix(): refine show cases

Author: weareoutman

bricks/ai-portal/src/show-cases/images/[email protected]

@@ -5,10 +5,10 @@ import "@next-core/theme";
 import { initializeI18n } from "@next-core/i18n";
 import type { Link, LinkProps } from "@next-bricks/basic/link";
 import { get } from "lodash";
-import { K, NS, locales, t } from "./i18n.js";
-import styleText from "./styles.shadow.css";
 import classNames from "classnames";
 import { getBasePath } from "@next-core/runtime";
+import { K, NS, locales, t } from "./i18n.js";
+import styleText from "./styles.shadow.css";
 
 initializeI18n(NS, locales);
 
@@ -109,7 +109,11 @@ function ShowCasesComponent({ list, taskUrlTemplate }: ShowCasesProps) {
                     }}
                   />
                 ) : (
-                  <span>{item.summary}</span>
+                  <span className="summary-1">
+                    <span className="summary-2">
+                      <span>{item.summary}</span>
+                    </span>
+                  </span>
                 )}
               </span>
               <span className="title">

bricks/ai-portal/src/show-cases/index.tsx

@@ -52,16 +52,14 @@
 .cases {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
+  gap: 24px;
   margin-top: 2em;
 }
 
 .link {
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow:
-    0px 1px 2px rgba(46, 41, 51, 0.08),
-    0px 2px 4px rgba(71, 63, 79, 0.08);
+  background: #fefefe;
+  border: 1px solid #e8e9ec;
   border-radius: 12px;
   overflow: hidden;
   display: block;
@@ -71,19 +69,18 @@
   display: flex;
   gap: 0;
   flex-direction: column;
-  height: 200px;
+  height: 218px;
 }
 
 .title {
-  font-size: 16px;
-  line-height: 24px;
   width: 100%;
-  height: 80px;
-  padding: 16px 15px 15px;
+  height: 76px;
+  padding: 16px 16px 15px;
   color: #262626;
-  border: 1px solid rgba(35, 33, 41, 0.05);
-  border-top: 0;
-  border-radius: 0 0 12px 12px;
+  border-top: 1px solid #e8e9ec;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
 
   span {
     display: -webkit-box;
@@ -96,23 +93,14 @@
 
 .placeholder {
   width: 100%;
-  background: #f8f8f8;
-  border: 1px solid rgba(35, 33, 41, 0.05);
-  border-radius: 12px 12px 0 0;
-  height: 120px;
+  height: 142px;
+  background: linear-gradient(308deg, #dee9fc 0%, #fcfbfd 100%, #fbf9fe 100%);
+  overflow: hidden;
 }
 
 .summary {
   color: rgba(0, 0, 0, 0.65);
-  padding: 15px;
-
-  span {
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+  padding: 27px 0 0 24px;
 }
 
 .thumbnail span {
@@ -125,9 +113,37 @@
 }
 
 .link:hover {
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06);
 
   .title {
     color: var(--elevo-color-brand);
   }
 }
+
+.summary-1 {
+  display: block;
+  background-image: url("./images/[email protected]");
+  background-size: 237px 115px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  padding: 10px 0 0 10px;
+}
+
+.summary-2 {
+  display: block;
+  background: linear-gradient(90deg, #ffffff 0%, #e4ecfc 100%);
+  padding: 12px 15px 5px 15px;
+  border-top-left-radius: 12px;
+
+  span {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: 15px;
+    color: #525971;
+    line-height: 22px;
+    height: 88px;
+  }
+}