修复翻书的效果

1

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,102 @@
+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 = () => {
+      console.log('进入准备执行执行init', contentRef.value.getBoundingClientRect().width, wrapRef.value.getBoundingClientRect().width)
+      console.log(!wrapRef.value)
+      if (notiData.isActive || !contentRef.value || !wrapRef.value) return;
+      notiData.isActive = true;
+      notiData.contentWidth = contentRef.value.getBoundingClientRect().width;
+      notiData.wrapWidth = wrapRef.value.getBoundingClientRect().width;
+
+
+      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);
+        }
+      }
+    );
+    return () => (
+      <div
+        ref={wrapRef}
+        class={[styles.wrap, props.isAnimation ? styles.isAnitaion : '']}
+        onMouseenter={() => !props.isAnimation && init()}
+        onMouseleave={() => !props.isAnimation && stopAnimate()}>
+        <div
+          ref={contentRef}
+          style={notiData.contentStyle}
+          class={styles.notice}>
+          {props.text}
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -63,7 +63,7 @@
 
   .wrapItem {
     position: relative;
-    padding: 20px;
+    padding: 20px 30px;
     height: 100%;
     overflow: hidden;
     z-index: 2;
@@ -75,10 +75,12 @@
     font-weight: 600;
     color: #333;
     line-height: 20px;
-    padding: 13px 0;
+    margin: 20px 0;
     word-break: break-all;
   }
-
+  .name {
+    width: 100%;
+  }
   .des {
     line-height: 16px;
     font-size: 12px;

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: {
@@ -292,7 +293,7 @@ export default defineComponent({
                                 <div
                                   class={styles.name}
                                   style={{ lineHeight: '20Px' }}>
-                                  {item.name}
+                                  <TheNoticeBar text={item.name} ></TheNoticeBar>
                                   {data.lastTime === item.id && (
                                     <span class={styles.last}>上次观看</span>
                                   )}

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

@@ -3,7 +3,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;
 }
@@ -63,7 +64,6 @@
       color: var(--van-primary-color) !important;
     }
 
-
     :global {
       .van-button__text {
         color: var(--van-primary-color);
@@ -266,14 +266,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;
   }
@@ -298,7 +302,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 50vw;
+  width: 55vw;
   transform: translate(-50%, -50%) scale(0);
   z-index: 20;
   background-color: #fff;
@@ -325,9 +329,8 @@
   }
 }
 
-
 .popupContainer {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 12px;
   width: 298px;
   padding-top: 12px;
@@ -351,7 +354,7 @@
       display: inline-block;
       width: 4px;
       height: 11px;
-      background: #2AA4FE;
+      background: #2aa4fe;
       border-radius: 2px;
       margin-right: 6px;
     }
@@ -370,7 +373,7 @@
         padding: 7px 24px;
         height: 30px;
         font-size: 12px;
-        background: #F6F6F6;
+        background: #f6f6f6;
         border: none;
         color: #333333;
         margin-right: 8px;
@@ -380,13 +383,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;
@@ -404,9 +407,10 @@
     }
 
     .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;
     }
   }
-}
+}