翻书

src/custom-plugins/guide-page/courseware-list.tsx

@@ -117,7 +117,6 @@ export default defineComponent({
     tipShow.value =true
    }
     const getStepELe = () => {
-      console.log(`courseware-${data.step}`)
       const ele: HTMLElement = document.getElementById(`courseware-${data.step}`)!;
       if (ele) {
 				const eleRect = ele.getBoundingClientRect();
@@ -132,7 +131,6 @@ export default defineComponent({
 				  width: eleRect.width + width + 'px',
 				  height: eleRect.height + height + 'px'
 				};
-				console.log(`coai-${data.step}`, data.box);
 			  }else{
 				handleNext()
 			  }

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

@@ -46,17 +46,27 @@
 
 .wrap {
     position: relative;
-    padding: 10Px;
     height: 100%;
     overflow: hidden;
     background-color: #FFD8A1;
 
+    &::before {
+        content: '';
+        position: absolute;
+        left: 10Px;
+        right: 10Px;
+        top: 10Px;
+        bottom: 10Px;
+        background-color: #fff;
+        z-index: 1;
+    }
+
     .wrapItem {
-        padding: 10Px;
+        position: relative;
+        padding: 20Px;
         height: 100%;
-        background-color: #fff;
-        border-radius: 3Px;
         overflow: hidden;
+        z-index: 2;
     }
 
     .item {
@@ -64,12 +74,13 @@
         font-size: 14px;
         font-weight: 600;
         color: #333;
-        line-height: 22Px;
-        padding: 6Px 0;
+        line-height: 20Px;
+        padding: 13Px 0;
         word-break: break-all;
     }
 
     .des {
+        line-height: 16Px;
         font-size: 12px;
         font-weight: 400;
     }
@@ -88,32 +99,47 @@
     }
 }
 
-:global(.odd) {
+:global(.even) {
     .wrap {
-        padding-left: 0;
-
-    }
+        &::before {
+            right: 0;
+            border-radius: 4Px 0 0 4Px;
+        }
 
-    .wrapItem {
-        padding-left: 14Px;
-        background-image: url('./pics/right-border.png');
-        background-position: left top;
-        background-repeat: no-repeat;
-        background-size: 24Px 100%;
+        &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 24Px;
+            background: linear-gradient(to right,rgba(255, 255, 255, 0) 20% ,rgba(229, 199, 156, .4) 100%);
+            z-index: 3;
+        }
     }
 }
 
-:global(.even) {
+:global(.odd) {
     .wrap {
-        padding-right: 0;
+        &::before {
+            left: 0;
+            border-radius: 0 4Px 4Px 0;
+        }
 
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 24Px;
+            background: linear-gradient(to right, rgba(255, 225, 183, .35) 8%, rgba(255, 255, 255, 0) 100%);
+            z-index: 2;
+        }
     }
 
     .wrapItem {
-        padding-right: 14Px;
-        background-image: url('./pics/left-border.png');
-        background-position: right top;
-        background-repeat: no-repeat;
-        background-size: 24Px 100%;
+        padding-left: 20Px;
+        
     }
 }

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

@@ -72,7 +72,7 @@ export default defineComponent({
       const height = document.body.clientHeight * 0.8;
 
       data.height = height;
-      data.width = height * (210 / 297) * 2;
+      data.width = height * (210 / 297) * 2.2;
       book.turn({
         autoCenter: true,
         duration: 1000,
@@ -263,11 +263,18 @@ export default defineComponent({
                   </div>
                 );
               })}
-              <div class="page" style={{pointerEvents: 'none'}}>
+              <div class="page" style={{ pointerEvents: 'none' }}>
                 <div class={styles.wrap}>
                   <div class={styles.wrapItem}></div>
                 </div>
               </div>
+              {/* {data.list.length % 2 == 0 && (
+                <div class="page" style={{ pointerEvents: 'none' }}>
+                  <div class={styles.wrap}>
+                    <div class={styles.wrapItem}></div>
+                  </div>
+                </div>
+              )} */}
             </div>
           )}
         </div>