1

1

src/components/albumItem/index.module.less

@@ -1,4 +1,12 @@
 .itemWrap {
+  &:hover {
+    .hold {
+      img {
+        transform:scale(1.1);
+      }
+
+    }
+  }
   cursor: pointer;
   &:nth-child(5n){
     margin-right: 0;
@@ -20,6 +28,11 @@
     width: 219px;
     height: 219px;
     border-radius: 4px;
+    overflow: hidden;
+    transition: 2s;
+    img {
+      width: 100%;
+    }
   }
   span {
     color: #999;

src/components/albumItem/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, reactive, onMounted, ref,watch } from 'vue'
+import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
 
 import classes from './index.module.less'
 import hold from './images/hold.png'
@@ -43,18 +43,27 @@ export default defineComponent({
       }
     )
     const router = useRouter()
-    const gotoAlbum = ()=>{
-
-      router.push({path:'/albumDetail',query:{id:state.detail.id}})
+    const gotoAlbum = () => {
+      router.push({ path: '/albumDetail', query: { id: state.detail.id } })
     }
     return () => (
       <>
-        <div class={classes.itemWrap} onClick={()=>{gotoAlbum()}}>
-          <img
-            src={state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold}
-            alt=""
-            class={classes.hold}
-          />
+        <div
+          class={classes.itemWrap}
+          onClick={() => {
+            gotoAlbum()
+          }}
+        >
+          <div   class={classes.hold}>
+            <img
+              src={
+                state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold
+              }
+              alt=""
+
+            />
+          </div>
+
           <h2>{state.detail.albumName}</h2>
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>