修改样式

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,105 @@
+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, { slots }) {
+    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}
+          {slots.default && slots.default()}
+        </div>
+      </div>
+    )
+  }
+})

src/teacher/share-page/share-vip/index.module.less

@@ -202,4 +202,19 @@
       margin: 0 6%;
     }
   }
+}
+
+.btnGroup {
+  // paddingTop: '12px', position: 'relative'
+  padding-top: 12px;
+  position: relative;
+  background-color: #fff;
+  font-weight: bold;
+
+  :global {
+    .van-button {
+      font-weight: bold;
+      font-size: 15px;
+    }
+  }
 }

src/teacher/share-page/share-vip/index.tsx

@@ -122,10 +122,7 @@ export default defineComponent({
           <img src={equityBg} class={styles.iconEquity} />
         </div>
         <ColSticky position="bottom">
-          <div
-            class={['btnGroup']}
-            style={{ paddingTop: '12px', position: 'relative' }}
-          >
+          <div class={['btnGroup', styles.btnGroup]}>
             {this.discount === 1 && (
               <div class={styles.tagDiscount}>专属优惠</div>
             )}
@@ -136,7 +133,7 @@ export default defineComponent({
               onClick={this.onShare}
               color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
             >
-              下载小酷Ai开始练习吧！
+              下载酷乐秀开始练习吧！
             </Button>
           </div>
         </ColSticky>

src/views/member-center/components/member-interes/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
         ) : (
           <div class={[styles.intro, styles.introVip]}>
             <img src={vip1} />
-            <img src={vip2} />
+            <img src={vip2} style={{ 'margin-top': '-1px' }} />
             <img src={vip3} />
           </div>
         )}

src/views/member-center/index.module.less

@@ -86,7 +86,7 @@
 
   .userInfo {
     padding-top: 5px;
-    max-width: 175px;
+    max-width: 185px;
 
     .userName {
       display: flex;
@@ -116,6 +116,7 @@
 
       span {
         color: #FF623A;
+        font-weight: bold;
       }
     }
   }
@@ -306,7 +307,7 @@
 }
 
 .memberDiscount {
-  margin: 10px 16px 0;
+  margin: 10px 16px 6px;
   position: relative;
   background: url('./new-images/icon-discount-bg.png') no-repeat center;
   background-size: contain;
@@ -327,14 +328,18 @@
   }
 
   .discountName {
-    padding-left: 30px;
-    max-width: 200px;
+    margin-left: 30px;
+    width: 200px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    background: transparent;
+    font-size: 14px;
+    color: #6B4429;
 
     span {
       color: #FF491A;
+      font-weight: 500;
     }
   }
 
@@ -348,7 +353,7 @@
 }
 
 .btnGroup {
-  padding: 18px 15px;
+  padding: 18px 15px 23px;
   background-color: #fff;
 
   .btn {
@@ -375,7 +380,7 @@
 }
 
 .system-list {
-  width: 100%;
+  width: calc(100% - 16px);
   overflow-x: auto;
   overflow-y: hidden;
   display: flex;
@@ -383,6 +388,8 @@
   user-select: none;
   box-sizing: content-box;
   padding-top: 15px;
+  padding-bottom: 2px;
+  padding-right: 16px;
 
 
   &.list_two {
@@ -405,6 +412,7 @@
   flex: 1 0 auto;
   width: 96px;
   min-height: 120px;
+  overflow: hidden;
   box-sizing: border-box;
   background: #ffffff;
   border-radius: 8px;
@@ -415,9 +423,9 @@
     margin-left: 16px;
   }
 
-  &:last-child {
-    margin-right: 16px;
-  }
+  // &:last-child {
+  //   margin-right: 16px;
+  // }
 
 
   .discountTag {
@@ -483,7 +491,7 @@
 
   .extraTip {
     position: absolute;
-    bottom: 0;
+    bottom: -1px;
     left: 0;
     right: 0;
     width: 100%;
@@ -498,7 +506,7 @@
     white-space: nowrap;
     overflow: hidden;
     padding: 2px 8px 1px;
-    border-radius: 0px 0px 7px 7px;
+    // border-radius: 0 0 8px 8px;
   }
 
   &.active {

src/views/member-center/index.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent, onMounted, reactive, shallowRef } from 'vue'
 import styles from './index.module.less'
 import ColHeader from '@/components/col-header'
-import { Button, Image, Popup, Toast } from 'vant'
+import { Button, Image, NoticeBar, Popup, Toast } from 'vant'
 import { state as baseState, setLogin } from '@/state'
 import iconShare from './new-images/icon-share.png'
 import { useEventListener } from '@vant/use'
@@ -19,6 +19,7 @@ import deepClone from '@/helpers/deep-clone'
 import { memberSimpleType, memberType } from '@/constant'
 import dayjs from 'dayjs'
 import { orderStatus } from '../order-detail/orderStatus'
+import TheNoticeBar from '@/components/the-noticeBar'
 
 export default defineComponent({
   name: 'member-center',
@@ -160,7 +161,7 @@ export default defineComponent({
         window.scrollY ||
         window.pageYOffset ||
         document.documentElement.scrollTop
-      state.titleOpacity = height > 100 ? 1 : height / 100
+      state.titleOpacity = height > 80 ? 1 : 0
     })
 
     /** 切换购买类型 */
@@ -366,6 +367,7 @@ export default defineComponent({
           color={`rgba(0,0,0, ${state.titleOpacity})`}
           backIconColor="black"
           hideHeader={false}
+          border={false}
           v-slots={{
             right: () => (
               <Image
@@ -400,7 +402,7 @@ export default defineComponent({
             </div>
             <div class={styles.userInfo}>
               <div class={styles.userName}>
-                <span class={styles.name}>{userInfo.value.username}</span>
+                <span class={styles.name}>{userInfo.value.username}测试</span>
                 {userInfo.value.phone && (
                   <span class={styles.phone}>({userInfo.value.phone})</span>
                 )}
@@ -523,11 +525,11 @@ export default defineComponent({
                       src={state.discountTeacher.avatar || iconTeacher}
                       class={styles.discountAvatar}
                     />
-
-                    <span class={styles.discountName}>
-                      {state.discountTeacher.username}老师的
+                    <TheNoticeBar class={styles.discountName} isAnimation>
+                      {state.discountTeacher.username}
+                      老师的
                       <span>专属优惠～</span>
-                    </span>
+                    </TheNoticeBar>
 
                     <Image src={iconGift} class={styles.discountGift} />
                   </div>
@@ -615,19 +617,14 @@ export default defineComponent({
                                 </p>
                                 <p class={styles.s_title}>{member.title}</p>
                               </div>
-                              {/* 只有永久才会有数量提示 */}
-                              {member.period === 'PERPETUAL' ? (
-                                <div class={styles.oneMaxNum}>限量1000份</div>
-                              ) : (
-                                <div
-                                  class={[
-                                    styles.oneMaxNum,
-                                    styles.oneMaxNumPrice
-                                  ]}
-                                >
-                                  ¥{member.originalPrice}
-                                </div>
-                              )}
+                              <div
+                                class={[
+                                  styles.oneMaxNum,
+                                  styles.oneMaxNumPrice
+                                ]}
+                              >
+                                ¥{member.originalPrice}
+                              </div>
                             </div>
                             <span
                               class={[