Merge branch 'guide'

src/components/the-noticeBar/index.module.less

@@ -0,0 +1,21 @@
+.wrap{
+    max-width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    &.isAnitaion, &:hover{
+        .notice{
+            width: auto;
+            overflow: initial;
+        }
+    }
+}
+.notice{
+    transition-timing-function: linear;
+    transition-duration: 5s;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition-timing-function: linear;
+}

src/components/the-noticeBar/index.tsx

@@ -0,0 +1,106 @@
+import { defineComponent, reactive, ref, watch, onMounted } from 'vue';
+import styles from './index.module.less';
+
+const refAnimation = (callback: any) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      callback();
+    });
+  });
+};
+
+export default defineComponent({
+  name: 'TheNoticeBar',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    isAnimation: {
+      type: Boolean,
+      default: false
+    },
+
+  },
+  setup(props) {
+    const wrapRef = ref();
+    const contentRef = ref();
+    const notiData = reactive({
+      isActive: false,
+      wrapWidth: 0,
+      contentWidth: 0,
+      contentStyle: {
+        transitionDuration: '0s',
+        transform: 'translateX(0px)'
+      },
+      time: null as any
+    });
+    const init = () => {
+      if (notiData.isActive || !contentRef.value || !wrapRef.value) return;
+      notiData.isActive = true;
+
+      notiData.contentWidth = contentRef.value.getBoundingClientRect().width;
+      notiData.wrapWidth = wrapRef.value.getBoundingClientRect().width;
+      console.log('进来加载动画', notiData.contentWidth - notiData.wrapWidth)
+
+      if (notiData.contentWidth - notiData.wrapWidth > 0) {
+        startAnimate();
+
+      }
+
+    };
+
+    onMounted(() => {
+      init()
+      // startAnimate();
+    })
+    const startAnimate = () => {
+      if (notiData.contentWidth <= notiData.wrapWidth || !notiData.isActive) {
+        notiData.contentStyle.transitionDuration = '0s';
+        notiData.contentStyle.transform = 'translateX(0px)';
+        return;
+      }
+
+      notiData.contentStyle.transitionDuration = '5s';
+      notiData.contentStyle.transform = 'translateX(-100%)';
+
+      notiData.time = setTimeout(() => {
+        notiData.contentStyle.transitionDuration = '0s';
+        notiData.contentStyle.transform = `translateX(${notiData.wrapWidth}px)`;
+        refAnimation(startAnimate);
+      }, 5 * 1000);
+    };
+    const stopAnimate = () => {
+      clearTimeout(notiData.time);
+      notiData.isActive = false;
+      notiData.contentStyle.transitionDuration = '0s';
+      notiData.contentStyle.transform = 'translateX(0px)';
+      notiData.time = null;
+    };
+    watch(
+      () => props.isAnimation,
+      val => {
+        if (val) {
+          refAnimation(init);
+        } else {
+          refAnimation(stopAnimate);
+        }
+      }
+    );
+    //    onMouseenter={() => !props.isAnimation && init()}
+    // onMouseleave={() => !props.isAnimation && stopAnimate()}
+    return () => (
+      <div
+        ref={wrapRef}
+        class={[styles.wrap, props.isAnimation ? styles.isAnitaion : '']}
+      >
+        <div
+          ref={contentRef}
+          style={notiData.contentStyle}
+          class={styles.notice}>
+          {props.text}
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -1,148 +1,159 @@
 .book {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    inset: 0;
-    z-index: 100;
-    padding-top: 10vh;
-
-    .back {
-        position: absolute;
-        left: 41px;
-        top: 24px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  inset: 0;
+  z-index: 100;
+  padding-top: 10vh;
+
+  .back {
+    position: absolute;
+    left: 41px;
+    top: 24px;
+  }
+
+  &.bookHide {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  :global {
+    .bookWrap {
+      margin: 0 auto;
     }
 
-    &.bookHide {
-        visibility: hidden;
-        pointer-events: none;
-        opacity: 0;
+    .animated {
+      transition: margin-left 0.2s ease-in-out;
     }
 
-    :global {
-        .bookWrap {
-            margin: 0 auto;
-        }
-
-        .animated {
-            transition: margin-left 0.2s ease-in-out;
-        }
-
-
-        .page {
-            background: white;
-        }
+    .page {
+      background: white;
+    }
 
-        .shadow {
-            box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
-        }
+    .shadow {
+      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
+    }
 
-        .page-wrapper {
-            perspective: 2000px;
-        }
+    .page-wrapper {
+      perspective: 2000px;
     }
+  }
 }
 
 .wrap {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ffd8a1;
+  width: calc(100% + 1px);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    top: 10px;
+    bottom: 10px;
+    background-color: #fff;
+    z-index: 1;
+  }
+
+  .wrapItem {
     position: relative;
+    padding: 30px 30px;
     height: 100%;
     overflow: hidden;
-    background-color: #FFD8A1;
-    width: calc(100% + 1Px);
+    z-index: 2;
+  }
+
+  .item {
+    display: flex;
+    font-size: 12px;
+    font-weight: 600;
+    color: #333;
+    line-height: 20px;
+    margin: 20px 0;
+    word-break: break-all;
+  }
+  .name {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .des {
+    line-height: 16px;
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+
+  .last {
+    font-size: 12px;
+    color: #ff5a56;
+    margin-left: 6px;
+    font-weight: 400;
+  }
+}
 
+:global(.even) {
+  .wrap {
+    left: -1px;
     &::before {
-        content: '';
-        position: absolute;
-        left: 10Px;
-        right: 10Px;
-        top: 10Px;
-        bottom: 10Px;
-        background-color: #fff;
-        z-index: 1;
-    }
-
-    .wrapItem {
-        position: relative;
-        padding: 20Px;
-        height: 100%;
-        overflow: hidden;
-        z-index: 2;
-    }
-
-    .item {
-        display: flex;
-        font-size: 14px;
-        font-weight: 600;
-        color: #333;
-        line-height: 20Px;
-        padding: 13Px 0;
-        word-break: break-all;
+      right: 0;
+      border-radius: 4px 0 0 4px;
     }
 
-    .des {
-        line-height: 16Px;
-        font-size: 12px;
-        font-weight: 400;
-    }
-
-    .icon {
-        width: 20Px;
-        height: 20Px;
-        margin-right: 6Px;
-    }
-
-    .last {
-        font-size: 12Px;
-        color: #FF5A56;
-        margin-left: 6px;
-        font-weight: 400;
-    }
-}
-
-:global(.even) {
-    .wrap {
-        left: -1Px;
-        &::before {
-            right: 0;
-            border-radius: 4Px 0 0 4Px;
-        }
-
-        &::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;
-        }
+    &::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, 0.4) 100%
+      );
+      z-index: 3;
     }
+  }
 }
 
 :global(.odd) {
-    .wrap {
-        left: -1Px;
-        &::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;
-        }
+  .wrap {
+    left: -1px;
+    &::before {
+      left: 0;
+      border-radius: 0 4px 4px 0;
     }
 
-    .wrapItem {
-        padding-left: 20Px;
-        
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 24px;
+      background: linear-gradient(
+        to right,
+        rgba(255, 225, 183, 0.35) 8%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      z-index: 2;
     }
-}
+  }
+
+  .wrapItem {
+    padding-left: 20px;
+  }
+}

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

@@ -17,6 +17,7 @@ import queryString from 'query-string';
 import CoursewareDetail from '@/custom-plugins/guide-page/courseware-detail';
 import { usePageVisibility } from '@vant/use';
 import { state } from '@/state';
+import TheNoticeBar from '@/components/the-noticeBar';
 export default defineComponent({
   name: 'the-book',
   props: {
@@ -55,6 +56,8 @@ export default defineComponent({
       lastTime: localStorage.getItem(lastTimeKey)
     });
     const showGuide = ref(false);
+
+    const isHandMove = ref(false)
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
         const _s = document.head.querySelector(`script[data-key="${key}"]`);
@@ -86,31 +89,32 @@ export default defineComponent({
       book.turn({
         autoCenter: true,
         duration: 1000,
+        disable: false,
         acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
         elevation: 50, // 转换期间页面的高度
         width: data.width, // 宽度 单位 px
         height: data.height, // 高度 单位 px
-        gradients: true // 是否显示翻页阴影效果
+        gradients: true, // 是否显示翻页阴影效果
         // display: 'single', //设置单页还是双页
       });
-      book.bind('start', (event: Event, pageObject: any, corner: any) => {});
+      book.bind('start', (event: Event, pageObject: any, corner: any) => {
+
+      });
       book.bind('turned', (event: Event, page: any, corner: any) => {
         setTimeout(() => {
           showGuide.value = true;
         }, 500);
-      });
-      book.bind('turned', (e: any, page: any) => {
         if (page === book.turn('pages')) {
-          nextTick(() => {
-            book.turn('page', 2);
-            nextTick(() => {
-              book.turn('page', 1);
-            })
-          });
+          handleClose()
+          // nextTick(() => {
+
+          // });
         }
       });
-    };
+      // book.bind('turned', (e: any, page: any) => {
 
+      // });
+    };
     const getRect = () => {
       const bookWrap = document.querySelector(
         '.bookWrap'
@@ -195,6 +199,8 @@ export default defineComponent({
       }
       data.list = list;
       // console.log('🚀 ~ data.list:', data.list.length);
+      // console.log(book.turn.pages, 'book.turn.pages')
+      // console.log(book.turn('pages'), 'pages')
     };
     watch(
       () => props.show,
@@ -250,6 +256,12 @@ export default defineComponent({
         // });
       }
     };
+
+    const isStartAnimate = (item: any) => {
+      // console.log(item) item.name.length > 9 ? true :
+
+      return false
+    }
     return () => (
       <div
         class={[styles.book, data.show ? '' : styles.bookHide]}
@@ -285,7 +297,8 @@ export default defineComponent({
                                 onClick={(e: Event) => {
                                   e.stopPropagation();
                                   handleOpenPlay(item);
-                                }}>
+                                }}
+                              >
                                 {item.id ? (
                                   <img
                                     id={index == 1 ? 'coursewareDetail-0' : ''}
@@ -297,11 +310,12 @@ export default defineComponent({
                                   class={styles.name}
                                   style={{ lineHeight: '20Px' }}>
                                   {item.name}
+                                  {/* <TheNoticeBar text={item.name} isAnimation={isStartAnimate(item)}></TheNoticeBar> */}
                                   {data.lastTime === item.id && (
                                     <span class={styles.last}>上次观看</span>
                                   )}
                                 </div>
-                              </div>
+                              </div >
                             </>
                           );
                         })}
@@ -328,7 +342,7 @@ export default defineComponent({
           )}
         </div>
         {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
-      </div>
+      </div >
     );
   }
 });

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

@@ -5,7 +5,8 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+  background: url('../../common/images/icon_bg.png') no-repeat center center /
+    cover;
   display: flex;
   flex-direction: column;
 }
@@ -65,7 +66,6 @@
       color: var(--van-primary-color) !important;
     }
 
-
     :global {
       .van-button__text {
         color: var(--van-primary-color);
@@ -268,14 +268,18 @@
     height: 100%;
     z-index: 2;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         rgba(0, 0, 0, 0.2) 0,
         rgba(255, 255, 255, 0.08) 0%,
-        transparent 0.5%),
-      linear-gradient(to right,
+        transparent 0.5%
+      ),
+      linear-gradient(
+        to right,
         rgba(0, 0, 0, 0.1) 0.3%,
         rgba(255, 255, 255, 0.09) 1.1%,
-        transparent 1.3%);
+        transparent 1.3%
+      );
     background-size: 50% 100%, 50% 100%;
     background-position: 0% top, 9% top;
   }
@@ -299,7 +303,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 50vw;
+  width: 55vw;
   transform: translate(-50%, -50%) scale(0);
   z-index: 20;
   background-color: #fff;
@@ -326,9 +330,8 @@
   }
 }
 
-
 .popupContainer {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 12px;
   width: 298px;
   padding-top: 12px;
@@ -352,7 +355,7 @@
       display: inline-block;
       width: 4px;
       height: 11px;
-      background: #2AA4FE;
+      background: #2aa4fe;
       border-radius: 2px;
       margin-right: 6px;
     }
@@ -371,7 +374,7 @@
         padding: 7px 24px;
         height: 30px;
         font-size: 12px;
-        background: #F6F6F6;
+        background: #f6f6f6;
         border: none;
         color: #333333;
         margin-right: 8px;
@@ -381,13 +384,13 @@
       .van-tag--plain {
         background: rgba(42, 164, 254, 0.08);
         border: none;
-        color: #2AA4FE;
+        color: #2aa4fe;
       }
     }
   }
 
   .btnGroup {
-    border: 1px solid #F2F2F2;
+    border: 1px solid #f2f2f2;
     padding: 16px 12px;
     display: flex;
     align-items: center;
@@ -405,7 +408,8 @@
     }
 
     .btnSure {
-      background: linear-gradient(135deg, #19F1E1 0%, #0094FF 100%), linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
+      background: linear-gradient(135deg, #19f1e1 0%, #0094ff 100%),
+        linear-gradient(73deg, #5becff 0%, #259cfe 100%);
       border: none;
       color: #fff;
     }