feat(web): 新增轮播图并优化首页样式

- 在首页添加了轮播图组件，提升了页面视觉效果
- 优化了卡片样式，增加了背景图和阴影效果
- 调整了页面布局，使内容展示更加合理
- 新增了底部背景图片，丰富了页面元素

web/new-components/common/blurredCardIndex/style.css

@@ -1,13 +1,28 @@
 .hover-underline-gradient:hover {
   z-index: 1;
   border: solid 1px rgba(16, 96, 255, 1);
-  background: linear-gradient(190deg, #1060FF10 0%, rgba(16, 96, 255, 0.03) 53%);
+  background: linear-gradient(25deg, #FFFFFF 25%, #E3ECFC 100%);
+  box-shadow: 0px 10px 20px 0px rgba(16,96,255,0.15);
   border-radius: 12px;
   transition: all 0.1s ease-in;
 }
+.hover-underline-gradient:hover::after {
+  content: "";
+  position: absolute;
+  top: -100px;
+  right: -50px;
+  width: 200px;
+  height: 200px;
+  background: url('./img/bg_select_active.svg');
+  background-size: cover;
+  transition: all 0.1s ease-in;
+  opacity: 0.1;
+}
 .hover-underline-gradient{
   border: solid 1px transparent;
   border-radius: 12px;
   background: #fff;
+  position: relative;
+  overflow: hidden;
 }
 

web/pages/index.tsx

@@ -6,7 +6,7 @@ import { PlusOutlined, SearchOutlined, StarFilled, StarOutlined } from '@ant-des
 import { useRequest } from 'ahooks';
 // 导入类型定义和antd组件
 import type { SegmentedProps } from 'antd';
-import { Button, ConfigProvider, Image, Input, Segmented, Spin, message } from 'antd';
+import { Button, ConfigProvider, Image, Input, Segmented, Spin, message, Carousel } from 'antd';
 // 导入classnames用于操作CSS类名
 import cls from 'classnames';
 import './construct/app/index.scss';
@@ -42,7 +42,14 @@ const Playground: NextPage = () => {
   //     router.push('/login');
   //   }
   // }, []);
-
+  const contentStyle: React.CSSProperties = {
+    margin: 0,
+    height: '340px',
+    color: '#fff',
+    lineHeight: '340px',
+    textAlign: 'center',
+    background: '#364d7900',
+  };
   const { t } = useTranslation();
   const { setAgent, setCurrentDialogInfo, model } = useContext(ChatContext);
 
@@ -193,12 +200,12 @@ const Playground: NextPage = () => {
     if (!isRowLoaded({ index })) return null;
     const item = apps.app_list[index];
     return (
-      <div key={key} style={style}>
+      <div key={key} style={style} >
         <BlurredCard
           key={item.app_code}
           name={item.app_name}
           description={item.app_describe}
-          className='w-11/12'
+          className='w-11/12 max-h-[150px]'
           RightTop={
             item.is_collected === 'true' ? (
               <StarFilled
@@ -260,14 +267,14 @@ const Playground: NextPage = () => {
             }
           }}
           LeftBottom={
-            <div className='flex gap-8 justify-end items-end text-[#878c93] text-sm dark:text-stone-200 w-full text-[13px]'>
+            <div className='flex gap-8 justify-start item-start text-[#878c93] text-sm dark:text-stone-200 w-full text-[13px]'>
               {activeKey === 'recommend' ? (
                 <div className='flex items-start gap-1'>
                   <IconFont type='icon-hot' className='text-lg' />
                   <span className='text-[#878c93]'>{item.hot_value}</span>
                 </div>
               ) : (
-                <div>{moment(item?.updated_at).fromNow() + ' ' + t('update')}</div>
+                <div className='text-[14px] pt-1'>・{moment(item?.updated_at).fromNow() + ' ' + t('update')}</div>
               )}
             </div>
           }
@@ -291,14 +298,24 @@ const Playground: NextPage = () => {
   // useEffect(() => {
   //   getAppListFn();
   // }, [getAppListFn, pageNo]);
-
+  const onChange = (currentSlide: number) => {
+    console.log(currentSlide);
+  };
   return (
     <div
-      className='flex flex-col h-full w-full backdrop-filter backdrop-blur dark:bg-gradient-dark bg-gradient-light  p-10 pt-3 '
+      className='flex flex-col h-full w-full backdrop-filter backdrop-blur dark:bg-gradient-dark bg-gradient-light m-bg relative'
       id='home-container'
     >
-      <div className='mt-3'>
-        <Image preview={false} src={'/banner/banner.png'} />
+      <div className='h-[340px] z-[99] absolute top-0 left-0 w-full'>
+        {/* <Image preview={false} src={'/banner/banner.png'} /> */}
+        <Carousel afterChange={onChange} autoplay={true} dots={false} style={{ width: '100%' }}>
+          <div>
+            <Image preview={false} src={'/banner/banner.png'} />
+          </div>
+          <div>
+            <h3 style={contentStyle}>2</h3>
+          </div>
+        </Carousel>
       </div>
       <ConfigProvider
         theme={{
@@ -315,7 +332,7 @@ const Playground: NextPage = () => {
       >
         {/* Apps list */}
         <div
-          className='flex flex-col h-full mt-4 overflow-hidden relative'
+          className='flex flex-col h-full overflow-hidden relative m-10 pt-5 mt-[240px] z-[100]'
           style={{
             paddingBottom: apps.total_count > 12 ? 45 : 20,
           }}

web/pages/style.css

@@ -88,4 +88,18 @@
   top: -90px;
   transform: translate(50%, -15%);
 }
-/* 你可能需要添加更多的自定义样式，取决于你的需求 */
+/* 你可能需要添加更多的自定义样式，取决于你的需求 */
+
+.m-bg::after{
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 200px;
+  background: url('/pictures/feet-bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  bottom: 0;
+  left: 0;
+  transition: all 0.1s ease-in;
+}