feat: 调整图书样式

2025-04-03 22:05:36 -05:00
parent 36f9885f3a
commit 9b5299cae1
3 changed files with 154 additions and 35 deletions
--- a/src/pages/book/index.scss
+++ b/src/pages/book/index.scss
@@ -14,12 +14,34 @@
    gap: 40px;
    .BookItem {
      flex-grow: 1; /* 自动增长填充空间 */
-      flex-basis: 300px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+      flex-basis: 310px; /* 基本宽度为 300px，元素数量随可用空间调整 */
      max-width: 320px;
-      height: 350px;
-      background-color: greenyellow;
+      min-height: 350px;
+      // background-color: greenyellow;
      // margin-right: 100px;
      margin-bottom: 40px;
+      display: flex;
+      flex-direction: column;
+      // background-color: yellow;
+      // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+
+      .BookItem_img {
+      }
+      .BookItem_right {
+        display: none;
+        // display: flex;
+        // flex-direction: column;
+        // align-items: center;
+        .BookItem_right_title{
+          font-size: 34px;
+        }
+        .BookItem_right_content {
+          // display: none;
+        }
+        .BookItem_right_text {
+          // display: none;
+        }
+      }
    }
  }
 }
@@ -38,12 +60,48 @@
      gap: 60px;
      .BookItem {
        flex-grow: 1; /* 自动增长填充空间 */
-        flex-basis: 240px; /* 基本宽度为 300px，元素数量随可用空间调整 */
-        max-width: 260px;
-        height: 350px;
-        background-color: green;
-        // margin-right: 100px;
+        flex-basis: 500px; /* 基本宽度为 300px，元素数量随可用空间调整 */
+        max-width: 540px;
+        height: 300px;
        margin-bottom: 40px;
+
+        display: flex;
+        flex-direction: row;
+
+        /* 添加卡片阴影样式 */
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+        border-radius: 8px; /* 圆角 */
+        background-color: #fff; /* 背景色 */
+        transition: box-shadow 0.3s ease;
+
+        &:hover {
+          box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15),
+            0 3px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .BookItem_img {
+          // background-color: yellow;
+          min-width: 300px;
+        }
+        .BookItem_right {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          padding-top: 20px;
+          padding-bottom: 20px;
+          padding-right: 10px;
+          .BookItem_right_title {
+            font-size: 24px;
+          }
+          .BookItem_right_content {
+            font-size: 16px;
+            color: greenyellow;
+          }
+          .BookItem_right_text {
+            font-size: 16px;
+            // color: greenyellow;
+          }
+        }
      }
    }
  }
--- a/src/pages/book/index.tsx
+++ b/src/pages/book/index.tsx
@@ -39,34 +39,93 @@ const Book = () => {
      <Nav></Nav>
      <View className="BookItems">
        {[
-          { imagePath: elevenImage, text: "列表1" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
-          { imagePath: elevenImage2, text: "列表2" },
+          {
+            imagePath: elevenImage,
+            text: "作者",
+            title: "认知跃迁",
+            content:
+              "认知跃迁认知跃迁认知跃迁认知跃迁认知认知跃迁认知跃迁认知跃知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁迁认知跃迁认知跃迁跃迁认知跃迁认知跃迁认知跃迁",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },
+          {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },
+          {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          },     {
+            imagePath: elevenImage2,
+            text: "创业行",
+            title: "创业行",
+            content: "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
+            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
+          }
+
        ].map((item, index) => {
          return (
-            <View className="BookItem">
-              <Image
-                src={item?.imagePath}
-                style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              />
+            <View
+              className="BookItem"
+              key={index}
+              onClick={() => {
+              
+                // window.open(item?.url, '_blank');
+                setTimeout(() => {
+                  window.location.href = item?.url;
+                }, 0); // ⏱️ 解耦浏览器的调试器
+              }}
+            >
+              <View className="BookItem_img" >
+                <Image
+                  src={item?.imagePath}
+                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                />
+              </View>
+              <View className="BookItem_right">
+                <View className="BookItem_right_title">{item.title}</View>
+                <View className="BookItem_right_content">
+                  {item.content.length > 80
+                    ? `${item.content.slice(0, 80)}...`
+                    : item.content}
+                </View>
+                <View className="BookItem_right_text">{item?.text}</View>
+              </View>
            </View>
          );
        })}
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -77,7 +77,9 @@ import IndexDetail from "./componments/IndexDetail/index";

 import { LazyLoadImage } from "react-lazy-load-image-component";
 import "react-lazy-load-image-component/src/effects/blur.css";
-import Nav from './componments/Nav/index'
+// import Nav from './componments/Nav/index'
+import Nav from '@/pages/componments/Nav/index'
+
 // export default class Index extends Component {
 const Index = () => {
  const [current, setcurrent] = useState(0);