From 366e824545937fbb5c0a62f5c0965e27f76d9535 Mon Sep 17 00:00:00 2001
From: HuaYu <15600557119@163.com>
Date: Sat, 14 Jan 2023 16:39:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html        |  2 +-
 src/pages/Home/index.css |  3 +++
 src/pages/Home/index.js  | 35 +++++++++++++++++++++++------------
 3 files changed, 27 insertions(+), 13 deletions(-)
diff --git a/public/index.html b/public/index.html
index 447c99d..c1f9e52 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
     <title>华宇平台</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/pages/Home/index.css b/src/pages/Home/index.css
index f8f780b..9140ea7 100644
--- a/src/pages/Home/index.css
+++ b/src/pages/Home/index.css
@@ -6,6 +6,9 @@
     user-select: none;
     align-items: top;
 } */
+.context-swapper{
+    height: 212px;
+}
 .adm-grid-item {
     text-align: center;
 }
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
index 3e9b2b3..cb4ab6d 100644
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@@ -9,20 +9,24 @@ import ImgDTZF from './../../assets/images/nav-3.png'
 import ImgQCZ from './../../assets/images/nav-4.png'
 
 const localCatalog = [
-    { "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"},
-    { "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"},
-    { "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"},
-    { "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"}
+    { "imgSrc": ImgZZ, "title": "整租", "path": "/todo" },
+    { "imgSrc": ImgHZ, "title": "合租", "path": "/todo" },
+    { "imgSrc": ImgDTZF, "title": "地图找房", "path": "/message" },
+    { "imgSrc": ImgQCZ, "title": "去出租", "path": "/me" }
 ]
 class HomeInner extends React.Component {
     state = {
-        swipers: []
+        swipers: [],
+        isSwiperLoaded: false
     }
     async getSwitpers() {
         const res = await axios.get('http://localhost:8080/home/swiper')
-        console.log('轮播图信息' + res.data.body)
         this.setState(
-            { swipers: res.data.body }
+            {
+                swipers: res.data.body,
+                isSwiperLoaded: true
+            },
+
             //     ()=>{
             //     return{swipers:res.data.body}
             // }
@@ -34,7 +38,7 @@ class HomeInner extends React.Component {
 
     renderSwipers() {
         return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
-            <img
+            <img height='212'
                 src={'http://localhost:8080' + item.imgSrc}
                 style={{ width: '100%', verticalAlign: 'top' }}
             />
@@ -43,13 +47,20 @@ class HomeInner extends React.Component {
 
     render() {
         return <div className='context'>
-            <Swiper autoplay loop>{this.renderSwipers()}</Swiper>
+            <div className='context-swapper'>
+                {
+                    this.state.isSwiperLoaded ? <Swiper autoplay loop autoplayInterval='1500'>{this.renderSwipers()}</Swiper> : ""
+                }
+            </div>
+
+
             <Grid columns={4}>
                 {
-                    localCatalog.map((item,index) => (
-                        <Grid.Item key={index} onClick={()=>{
+                    localCatalog.map((item, index) => (
+                        <Grid.Item key={index} onClick={() => {
                             console.log("点击跳转")
-                            this.props.to(item.path)}}>
+                            this.props.to(item.path)
+                        }}>
                             <div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
                         </Grid.Item>
                     ))
