'新增动画和图片懒加载'

src/pages/index/index.jsx

@@ -59,6 +59,9 @@ import wechatGroup from "../../images/wechatGroup.jpg";
 
 import IndexDetail from "./componments/IndexDetail/index";
 
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import "react-lazy-load-image-component/src/effects/blur.css";
+
 // export default class Index extends Component {
 const Index = () => {
   const [current, setcurrent] = useState(0);
@@ -72,12 +75,19 @@ const Index = () => {
   const weGroup = () => {
     return (
       <View className="weGroup">
-        {" "}
-        <Image
+
+        {/* <Image
           style="width: 100%;height: 100%;"
           // mode="heightFix"
           src={wechatGroup}
-        />
+        /> */}
+          <LazyLoadImage
+                  alt="Sample"
+                  src={wechatGroup}
+                  effect="blur"
+                  width="100%"
+                  height="100%"
+                />
       </View>
     );
   };
@@ -86,11 +96,18 @@ const Index = () => {
   const weBook = () => {
     return (
       <View className="weBook">
-        <Image
+        {/* <Image
           style="width: 100%;height: 100%;"
           // mode="heightFix"
           src={nomadBook}
-        />
+        /> */}
+             <LazyLoadImage
+                  alt="Sample"
+                  src={nomadBook}
+                  effect="blur"
+                  width="100%"
+                  height="100%"
+                />
       </View>
     );
   };
@@ -223,10 +240,17 @@ const Index = () => {
                   <View className="itemDownright">¥1545/月</View>
                 </View>
                 {/* 0;opacity: 0.93; */}
-                <Image
+                {/* <Image
                   style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;filter: contrast(0.9);"
                   // mode="heightFix"
                   src={item.img}
+                /> */}
+                <LazyLoadImage
+                  alt="Sample"
+                  src={item.img}
+                  effect="blur"
+                  width="100%"
+                  height="100%"
                 />
               </View>
             );

src/pages/index/index.scss

@@ -29,6 +29,11 @@
     // padding-right: 10px;
     // background-color: aqua;
 
+    .item:hover {
+      animation: pulse 0.6s ease;
+    }
+
+    
     .item {
       flex-grow: 1; /* 自动增长填充空间 */
       flex-basis: 260px; /* 基本宽度为 300px，元素数量随可用空间调整 */