提交

1

src/components/col-header/modals/index.module.less

@@ -85,8 +85,8 @@
         }
         .icon {
           margin-left: 14px;
-          width: 21px;
-          height: 20px;
+          width: 26px;
+          height: 26px;
         }
       }
 
@@ -157,7 +157,7 @@
 :global {
   .loginPopper {
     border-radius: 10px!important;
-    overflow: hidden;
+    // overflow: hidden;
     .el-dropdown__popper.el-popper {
       border: none !important;
       // border-radius: 10px 10px;
@@ -226,10 +226,10 @@
       .backWrap {
         color: #ff5151;
         .backIcon {
-          width: 18px;
-          height: 18px;
-          margin-right: 5px;
-          margin-left: 3px;
+          width: 24px;
+          height: 24px;
+          margin-right: 12px;
+          margin-left: 5px;
         }
       }
     }

src/components/col-header/modals/loganInfo.tsx

@@ -192,7 +192,7 @@ export default defineComponent({
         <ElDropdown
           onCommand={val => this.changeState(val)}
           popper-class="loginPopper"
-          trigger="click"
+          trigger="hover"
           v-slots={{
             dropdown: () => (
               <>

src/components/musicLIstItem/index.module.less

@@ -1,6 +1,49 @@
 .itemWrap {
   &:hover {
     background-color: #f8f8f8;
+    .vip {
+      width: 150px;
+      height: 48px;
+      color: #fff!important;
+      background-color: var(--music-list-item-vip-bg)!important;
+      width: 150px!important;
+      height: 48px;
+      text-align: center!important;
+      color: #fff!important;
+
+      p{
+        width: 150px!important;
+
+      }
+    }
+    .free {
+      width: 150px!important;
+      height: 48px;
+      text-align: center!important;
+      color: #fff!important;
+
+      p{
+        width: 150px!important;
+
+      }
+      background-color: var(--music-list-item-free-bg)!important;
+    }
+    .charge {
+      width: 150px;
+      height: 48px;
+      text-align: center;
+      color: #fff!important;
+      background-color: var(--music-list-item-charge-bg)!important;
+      width: 150px!important;
+      height: 48px;
+      text-align: center!important;
+      color: #fff!important;
+
+      p{
+        width: 150px!important;
+
+      }
+    }
   }
   --music-list-item-background-color: #fff;
   --music-list-item-title-color: #333;
@@ -111,49 +154,7 @@
     }
     .touchButtonO {
       &:hover {
-        .vip {
-          width: 150px;
-          height: 48px;
-          color: #fff!important;
-          background-color: var(--music-list-item-vip-bg);
-          width: 150px!important;
-          height: 48px;
-          text-align: center!important;
-          color: #fff!important;
 
-          p{
-            width: 150px!important;
-
-          }
-        }
-        .free {
-          width: 150px!important;
-          height: 48px;
-          text-align: center!important;
-          color: #fff!important;
-
-          p{
-            width: 150px!important;
-
-          }
-          background-color: var(--music-list-item-free-bg);
-        }
-        .charge {
-          width: 150px;
-          height: 48px;
-          text-align: center;
-          color: #fff!important;
-          background-color: var(--music-list-item-charge-bg);
-          width: 150px!important;
-          height: 48px;
-          text-align: center!important;
-          color: #fff!important;
-
-          p{
-            width: 150px!important;
-
-          }
-        }
       }
       .touchButton {
         background: #fff;

src/components/musicLIstItem/index.tsx

@@ -62,6 +62,12 @@ export default defineComponent({
         onClick={() => {
           props.onClick(state.item)
         }}
+        onMouseover={() => {
+          state.item.hoverTop = true
+        }}
+        onMouseout={() => {
+          state.item.hoverTop = false
+        }}
       >
         <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
           <div class={classes.leftWrap}>
@@ -91,12 +97,7 @@ export default defineComponent({
           </div>
           <div class={classes.right}>
             <div
-              onMouseover={() => {
-                state.item.hoverTop = true
-              }}
-              onMouseout={() => {
-                state.item.hoverTop = false
-              }}
+
               class={[classes.touchButtonO]}
             >
               {state.item.hoverTop ? (

src/components/silder/index.module.less

@@ -138,6 +138,7 @@
 }
 :global {
   .silderPopver {
+    border-radius: 10px!important;
     padding-top: 28px!important;
     .codeItem {
       width: 100%;

src/components/silder/index.tsx

@@ -68,6 +68,8 @@ export default defineComponent({
               placement="left"
               trigger="hover"
               popper-class="silderPopver"
+              hide-after={0}
+              show-after={200}
               v-slots={{
                 reference: () => (
                   <div
@@ -132,6 +134,8 @@ export default defineComponent({
               width="230px"
               trigger="hover"
               popper-class="silderPopver"
+              hide-after={0}
+              show-after={200}
               v-slots={{
                 reference: () => (
                   <div

src/views/albumDetail/index.module.less

@@ -40,6 +40,7 @@
       .albumInfoTop {
         display: flex;
         flex-direction: row;
+        margin-bottom: 66px;
         .albumInfoTopImg {
           position: relative;
           width: 190px;

src/views/albumDetail/modals/musicLIstItem/index.module.less

@@ -7,10 +7,7 @@
   }
 }
 .itemWrap {
-  &:hover {
-    background-color: #f8f8f8;
 
-  }
   --music-list-item-background-color: #fff;
   --music-list-item-title-color: #333;
   --music-list-item-desc-color: #333;
@@ -23,7 +20,45 @@
   --music-list-item-free-color: #4ca751;
   --music-list-item-charge-bg: #3f90d6;
   --music-list-item-charge-color: #3f90d6;
+  &:hover {
+    background-color: #f8f8f8;
+    .vip {
+      // width: 96px;
+      color: #fff !important;
+      background-color: var(--music-list-item-vip-bg)!important;
+      width: 96px !important;
+      height: 42px;
+      text-align: center !important;
+
+      p {
+        width: 96px !important;
+      }
+    }
+    .free {
+      width: 96px !important;
+      height: 42px;
+      text-align: center !important;
+      color: #fff !important;
+
+      p {
+        width: 96px !important;
+      }
+      background-color: var(--music-list-item-free-bg)!important;
+    }
+    .charge {
+      text-align: center;
+      color: #fff !important;
+      background-color: var(--music-list-item-charge-bg)!important;
+      width: 96px !important;
+      height: 42px;
+      text-align: center !important;
+
 
+      p {
+        width: 96px !important;
+      }
+    }
+  }
   height: 188px;
   background: #ffffff;
   // border-radius: 12px;
@@ -133,43 +168,7 @@
       top: 38px;
       position: absolute;
       &:hover {
-        .vip {
-          // width: 96px;
-          color: #fff !important;
-          background-color: var(--music-list-item-vip-bg);
-          width: 96px !important;
-          height: 42px;
-          text-align: center !important;
-          color: #fff !important;
-
-          p {
-            width: 96px !important;
-          }
-        }
-        .free {
-          width: 96px !important;
-          height: 42px;
-          text-align: center !important;
-          color: #fff !important;
 
-          p {
-            width: 96px !important;
-          }
-          background-color: var(--music-list-item-free-bg);
-        }
-        .charge {
-          text-align: center;
-          color: #fff !important;
-          background-color: var(--music-list-item-charge-bg);
-          width: 96px !important;
-          height: 42px;
-          text-align: center !important;
-          color: #fff !important;
-
-          p {
-            width: 96px !important;
-          }
-        }
       }
       .touchButton {
         background: #fff;

src/views/albumDetail/modals/musicLIstItem/index.tsx

@@ -64,6 +64,12 @@ export default defineComponent({
         onClick={() => {
           props.onClick(state.item)
         }}
+        onMouseover={() => {
+          state.item.hoverTop = true
+        }}
+        onMouseout={() => {
+          state.item.hoverTop = false
+        }}
       >
         <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
           <div class={classes.leftWrap}>
@@ -79,12 +85,7 @@ export default defineComponent({
                   <span>{state.item.favoriteCount | 0} 收藏</span>
                 </div>
                 <div
-                onMouseover={() => {
-                  state.item.hoverTop = true
-                }}
-                onMouseout={() => {
-                  state.item.hoverTop = false
-                }}
+
                 class={[classes.touchButtonO]}
               >
                 {state.item.hoverTop ? (

src/views/home/index.tsx

@@ -178,7 +178,7 @@ export default defineComponent({
               <div class={[styles.titleWrap]}>
                 {/* <img src={titleDot} class={styles.dotImg} alt="" /> */}
                 <div class={[styles.titleWrapLeft]}>
-                  <h4>热门专辑</h4>
+                  <h4>精品视频课</h4>
                   <img src={titleDot} class={styles.dotImg} alt="" />
                 </div>
                 <div class={[styles.titleWrapMore]} onClick={()=>gotoVideoList()}>