fix

src/views/courseware-list/component/book/index.module.less

@@ -3,23 +3,28 @@
     inset: 0;
     z-index: 100;
     padding-top: 10vh;
-    .back{
+
+    .back {
         position: absolute;
         left: 41px;
         top: 24px;
     }
-    &.bookHide{
+
+    &.bookHide {
         visibility: hidden;
         pointer-events: none;
         opacity: 0;
     }
+
     :global {
-        .bookWrap{
+        .bookWrap {
             margin: 0 auto;
         }
+
         .animated {
             transition: margin-left 0.2s ease-in-out;
         }
+
         #flipbook {
             // margin: 0 auto;
         }
@@ -59,25 +64,29 @@
         }
     }
 }
-.wrap{
+
+.wrap {
     position: relative;
-    padding: 41px 24px;
-    .item{
-        font-size: 15px;
-        font-weight: 600;
-        color: #333;
-        line-height: 20px;
-        padding: 12px 0;
-    }
-    .des{
+    padding: 20Px;
+
+    .item {
         display: flex;
-        padding-left: 20px;
         justify-content: space-between;
         align-items: center;
         font-size: 14px;
-        line-height: 19px;
+        font-weight: 600;
+        color: #333;
+        line-height: 20Px;
+        padding: 10Px 0;
+        word-break:break-all;
     }
-    .icon{
+
+    .des {
+        padding-left: 12px;
+        font-size: 12px;
+    }
+
+    .icon {
         width: 22px;
         height: 22px;
     }

src/views/courseware-list/component/book/index.tsx

@@ -64,7 +64,7 @@ export default defineComponent({
       const height = document.body.clientHeight * 0.8;
 
       data.height = height;
-      data.width = height * (210 / 297) * 2;
+      data.width = height * 0.8 * 2;
       book.turn({
         autoCenter: true,
         duration: 1000,
@@ -95,13 +95,18 @@ export default defineComponent({
           ((rect.height * (yScale - 1)) / 2 + props.rect.y - rect.y) / yScale;
         const transform = `scale3d(${xScale}, ${yScale}, 1) translate(${left}px, ${top}px)`;
         bookWrap.style.transform = data.transform = transform;
-        requestAnimationFrame(() => {
-          bookWrap.style.transition = 'transform 1s';
-          bookWrap.style.transform = '';
-          data.show = true;
-          timer = setTimeout(() => {
-            book.turn('page', 2);
-          }, 500);
+        bookWrap.style.transition = 'transform 0s';
+        nextTick(() => {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              bookWrap.style.transition = 'transform 1s';
+              bookWrap.style.transform = '';
+              data.show = true;
+              timer = setTimeout(() => {
+                book.turn('page', 2);
+              }, 500);
+            });
+          });
         });
       }
     };
@@ -128,17 +133,19 @@ export default defineComponent({
     });
     const getList = () => {
       if (!props.bookData?.lessonList) return;
+      const step = (document.body.clientHeight * 0.8 - 40) / 50;
+      console.log("🚀 ~ step:", step)
       const list = [];
       let listItem = [] as any[];
       for (let i = 0; i < props.bookData.lessonList.length; i++) {
         const item = props.bookData.lessonList[i];
-        if (listItem.length < 5) {
+        if (listItem.length < step) {
           listItem.push({ name: item.name });
         } else {
           listItem = [{ name: item.name }];
         }
         for (let j = 0; j < item.knowledgeList.length; j++) {
-          if (listItem.length < 5) {
+          if (listItem.length < step) {
             listItem.push(item.knowledgeList[j]);
           } else {
             list.push(listItem);
@@ -172,7 +179,7 @@ export default defineComponent({
         </div>
         <div class="bookWrap" style={{ width: data.width + 'px' }}>
           {!!data.list.length && (
-            <div id="flipbook" class="animated">
+            <div id="flipbook" class={[data.show && "animated"]}>
               <div class="page">
                 <img
                   style="width: 100%; height: 100%; object-fit: cover;"

src/views/courseware-list/index.module.less

@@ -117,22 +117,19 @@
         position: relative;
         display: flex;
         height: 100%;
-        padding: 40px 63px 0;
+        padding: 20px 63px 0;
     }
 }
 
 .wrapItem {
     position: relative;
-    width: 120px;
+    width: 154px;
     display: flex;
     flex-direction: column;
-    margin: 0 17px;
+    align-items: center;
+    padding: 0 16px;
     flex-shrink: 0;
     z-index: 1;
-    transition: all .3s .3s;
-    &.wrapItemHide{
-        // opacity: 0;
-    }
 
 
     .name {
@@ -145,9 +142,9 @@
 
     .favoriteBtn {
         position: absolute;
-        top: 130px;
-        right: 6px;
-        z-index: 10;
+        top: 135px;
+        right: 20px;
+        z-index: 3;
     }
 }
 
@@ -169,7 +166,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        z-index: 4;
+        z-index: 2;
         background-repeat: no-repeat;
         background-image: linear-gradient(to right, rgba(0, 0, 0, .2) 0, rgba(255, 255, 255, .08) 0%, transparent .5%), linear-gradient(to right, rgba(0, 0, 0, .1) .3%, rgba(255, 255, 255, .09) 1.1%, transparent 1.3%);
         background-size: 50% 100%, 50% 100%;

src/views/courseware-list/index.tsx

@@ -21,6 +21,7 @@ import { state } from '@/state';
 import TheFavorite from '@/components/the-favorite';
 import { useRouter } from 'vue-router';
 import TheBook from './component/book';
+import { postMessage } from '@/helpers/native-message';
 
 export const BOOK_DATA = {
   grades: [
@@ -251,56 +252,6 @@ export default defineComponent({
           </div>
         </div>
 
-        {/* <div class={[styles.book, data.showBook && styles.show]}>
-          <div class={styles.bookWrap}>
-            {data.details.map((item: any) => {
-              return (
-                <ul class={styles.detail}>
-                  <li class={styles.detailTitle}>
-                    {item.name}
-
-                    <ul>
-                      {item.knowledgeList.map((k: any) => {
-                        return (
-                          <li>
-                            <Button
-                              style={{ margin: '8px 14px' }}
-                              type="primary"
-                              size="small"
-                              block
-                              onClick={() => {
-                                router.push({
-                                  path: '/courseware-play',
-                                  query: {
-                                    id: k.id,
-                                    name: k.name
-                                  }
-                                });
-                              }}>
-                              {k.name}
-                            </Button>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  </li>
-                </ul>
-              );
-            })}
-          </div>
-          <div style={{ padding: '8px 14px' }}>
-            <Button
-              type="danger"
-              size="small"
-              block
-              onClick={() => {
-                data.showBook = false;
-              }}>
-              关闭
-            </Button>
-          </div>
-        </div> */}
-
         <TheBook
           show={data.showBook}
           bookData={data.bookData}