diff --git a/config/dev.js b/config/dev.js
index c9dc00a..4515cb8 100644
--- a/config/dev.js
+++ b/config/dev.js
@@ -10,7 +10,7 @@ module.exports = {
   h5: {
     devServer: {
       //host: '0.0.0.0',
-      host: '192.168.0.102',
+      host: '192.168.3.102',
       port: 10086,
       // 设置代理来解决 H5 请求的跨域问题
       proxy: {
diff --git a/src/pages/lobby/lobby.jsx b/src/pages/lobby/lobby.jsx
index 92e14c6..03ab39c 100644
--- a/src/pages/lobby/lobby.jsx
+++ b/src/pages/lobby/lobby.jsx
@@ -13,99 +13,71 @@ import coin1 from '@/assets/coin-1.png'
 import tabQuestion from '@/assets/tab-question.svg'
 import tabX from '@/assets/tab-x.svg'
 
-function Lobby() {
-  const count = useSelector((state) => state.counter.value)
-  const user = useSelector((state) => state.user)
-  console.log(user)
-  const dispatch = useDispatch()
-  fetchLobbyView()
-    .then(res => {
-      console.log('lobby', res)
-    })
-    .catch(err => {
-      console.error(err)
-    })
+class Lobby extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      tables: [],
+      defaultAvatar: "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    }
+    this.circleEle = [1,2,3,4,5,6,7];
+    this.circleElePos = [{x:16,y:8},{x:70,y:-3},{x:110,y:28},{x:115,y:70},{x:80,y:105},{x:20,y:100},{x:-2,y:60}];
+  }
 
-  const avatar = "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
+  componentDidMount() {
+    fetchLobbyView()
+      .then(res => {
+        console.log('lobby', res)
+        this.setState({tables: res.data})
+      })
+      .catch(err => {
+        console.error(err)
+      })
+  }
 
-  const circleEle = [1,2,3,4,5,6,7];
-  const circleElePos = [{x:16,y:8},{x:70,y:-3},{x:110,y:28},{x:115,y:70},{x:80,y:105},{x:20,y:100},{x:-2,y:60}];
+  render() {
+    // const count = useSelector((state) => state.counter.value)
+    // const user = useSelector((state) => state.user)
 
-  return (
-    <View>
-      <Title title={"Lobby!!" + count} bgColor={true}  />
-      <View className="celling"></View>
-      <View className="tab">
-        <View className="tab-wrap">
-          <View className="circle-wrap">
-            <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
-            {
-              circleEle.map((_, idx) => (
-                <View key={idx} className="circle-item" style={{
-                  position: 'absolute',
-                  left: Taro.pxTransform(circleElePos[idx].x),
-                  top: Taro.pxTransform(circleElePos[idx].y)
-                }}>
-                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
-                </View>
-              ))
-            }
-          </View>
-          <View className="tab-no-wrap">
-            <View className="tab-no">#10013</View>
-            <View className="tab-sc">5/7</View>
-          </View>
-        </View>
+    console.log('state', this.state)
+    return (
+      <View>
+        <Title title={"Lobby!!"} bgColor={true}  />
+        <View className="celling"></View>
+        <View className="tab">
+          {
+            this.state.tables.map((table, i) => (
+              <View key={table.TableNo} className="tab-wrap" onClick={() => {console.log('join', table)}}>
+              <View className="circle-wrap">
+                <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
+                {
+                  this.circleEle.map((_, idx) => (
+                    <View key={idx} className="circle-item" style={{
+                      position: 'absolute',
+                      left: Taro.pxTransform(this.circleElePos[idx].x),
+                      top: Taro.pxTransform(this.circleElePos[idx].y)
+                    }}>
+                      <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : this.state.defaultAvatar} />
+                    </View>
+                  ))
+                }
+              </View>
+              <View className="tab-no-wrap">
+                <View className="tab-no">#10013</View>
+                <View className="tab-sc">5/7</View>
+              </View>
+            </View>
+            ))
+          }
 
-        <View className="tab-wrap">
-          <View className="circle-wrap">
-            <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
-            {
-              circleEle.map((_, idx) => (
-                <View key={idx} className="circle-item" style={{
-                  position: 'absolute',
-                  left: Taro.pxTransform(circleElePos[idx].x),
-                  top: Taro.pxTransform(circleElePos[idx].y)
-                }}>
-                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
-                </View>
-              ))
-            }
-          </View>
-          <View className="tab-no-wrap">
-            <View className="tab-no">#10013</View>
-            <View className="tab-sc">5/7</View>
-          </View>
+          <View className="tab-wrap"></View>
         </View>
-
-        <View className="tab-wrap">
-          <View className="circle-wrap">
-            <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
-            {
-              circleEle.map((_, idx) => (
-                <View key={idx} className="circle-item" style={{
-                  position: 'absolute',
-                  left: Taro.pxTransform(circleElePos[idx].x),
-                  top: Taro.pxTransform(circleElePos[idx].y)
-                }}>
-                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
-                </View>
-              ))
-            }
-          </View>
-          <View className="tab-no-wrap">
-            <View className="tab-no">#10013</View>
-            <View className="tab-sc">5/7</View>
-          </View>
+        <View className="bottom-btn-wrap">
+          <Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>Create New Table</Button>
         </View>
-
-        <View className="tab-wrap"></View>
-      </View>
-      <View className="bottom-btn-wrap">
-        <Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>Create New Table</Button>
       </View>
-    </View>
-  )
+    )
+  }
 }
 
 export default Lobby