diff --git a/src/assets/main.css b/src/assets/main.css
index d6e0d43a74f7c8adbf0c2f4e3fc77502f0761180..1f394c0e431d762a4079c565fb056403c88ecb78 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,10 +1,7 @@
 @import "./base.css";
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
   padding: 2rem;
-
   font-weight: normal;
 }
 
@@ -23,13 +20,10 @@ a,
 
 @media (min-width: 1024px) {
   body {
-    display: flex;
     place-items: center;
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
 }
@@ -51,7 +45,7 @@ a,
 .match-width {
     width: 100%;
 }
-fixtop {
+.fix-top {
     position: fixed;
     top: 20px;
     right: 20px;
diff --git a/src/views/lesson-1.vue b/src/views/lesson-1.vue
index ac592018ce711c7a275a6d5bf86758d142a90172..e1e553af3087c4a7ea0e003b9621a582bd65159c 100644
--- a/src/views/lesson-1.vue
+++ b/src/views/lesson-1.vue
@@ -5,125 +5,143 @@
     <main class="flex-col">
         <Divider>基本数据类型</Divider>
         <h2><code>num: {{num}}</code></h2>
-        <item class="head">
-            <name>变量名</name>
-            <lable>变量引用</lable>
-            <value>变量值</value>
-        </item>
-        <item>
-            <name>refNum</name>
-            <lable>ref(num)</lable>
-            <value>{{refNum}}</value>
+        <div class="item head">
+            <div class="name">变量名</div>
+            <div class="lable">变量引用</div>
+            <div class="value">变量值</div>
+            <div class="input"></div>
+        </div>
+        <div class="item">
+            <div class="name">refNum</div>
+            <div class="lable">ref(num)</div>
+            <div class="value">{{refNum}}</div>
             <Input type="number" class="input" v-model="refNum" controls-outside />
-        </item>
-        <item>
-            <name>reactNum</name>
-            <lable>reactive(num)</lable>
-            <value>{{reactNum}}</value>
+        </div>
+        <div class="item">
+            <div class="name">reactNum</div>
+            <div class="lable">reactive(num)</div>
+            <div class="value">{{reactNum}}</div>
             <Input type="number" class="input" v-model="reactNum" controls-outside />
-        </item>
+        </div>
 
         <Divider>对象类型</Divider>
-        <Affix :offset-top="0">
-            <div style="background: #ffffff;">
-                <div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
-                    <pre style="flex: 3">obj: {{obj}}</pre>
-                    <pre style="flex: 4">refObj = ref(obj): {{refObj}}</pre>
-                    <pre style="flex: 4">reactObj = reactive(obj): {{reactObj}}</pre>
-                </div>
-                <Divider dashed />
-                <item class="head mt10px">
-                    <name>变量名</name>
-                    <lable>变量引用</lable>
-                    <value>变量值</value>
-                </item>
-                <Divider dashed />
-            </div>
-        </Affix>
-
-        <item>
-            <name>refObj.num</name>
-            <lable></lable>
-            <value>{{'' + refObj.num}}</value>
+        <div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
+            <pre style="flex: 1">obj: {{obj}}</pre>
+            <pre style="flex: 1">refObj = ref(obj): {{refObj}}</pre>
+            <pre style="flex: 1">reactObj= reactive(obj): {{reactObj}}</pre>
+        </div>
+        <Divider dashed />
+        <div class="item head mt10px">
+            <div class="name">变量名</div>
+            <div class="lable">变量引用</div>
+            <div class="value">变量值</div>
+            <div class="input"></div>
+        </div>
+        <div class="item">
+            <div class="name">refObj.num</div>
+            <div class="lable"></div>
+            <div class="value">{{'' + refObj.num}}</div>
             <Input type="number" class="input" v-model="refObj.num" controls-outside />
-        </item>
-        <item>
-            <name>reactObj.num</name>
-            <lable></lable>
-            <value>{{'' + reactObj.num}}</value>
+        </div>
+        <div class="item">
+            <div class="name">reactObj.num</div>
+            <div class="lable"></div>
+            <div class="value">{{'' + reactObj.num}}</div>
             <Input type="number" class="input" v-model="reactObj.num" controls-outside />
-        </item>
+        </div>
 
         <Divider dashed />
-        <item>
-            <name>refObjNum</name>
-            <lable>ref(obj).num</lable>
-            <value>{{'' + refObjNum}}</value>
+        <div class="item">
+            <div class="name">refObjNum</div>
+            <div class="lable">ref(obj).num</div>
+            <div class="value">{{'' + refObjNum}}</div>
             <Input type="number" class="input" v-model="refObjNum" controls-outside />
-        </item>
-        <item>
-            <name>reactObjNum</name>
-            <lable>reactObj.num</lable>
-            <value>{{'' + reactObjNum}}</value>
+        </div>
+        <div class="item">
+            <div class="name">reactObjNum</div>
+            <div class="lable">reactObj.num</div>
+            <div class="value">{{'' + reactObjNum}}</div>
             <Input type="number" class="input" v-model="reactObjNum" controls-outside />
-        </item>
-        <item>
-            <name>refObjValueNum</name>
-            <lable>refObj.value.num</lable>
-            <value>{{'' + refObjValueNum}}</value>
+        </div>
+        <div class="item">
+            <div class="name">refObjValueNum</div>
+            <div class="lable">refObj.value.num</div>
+            <div class="value">{{'' + refObjValueNum}}</div>
             <Input type="number" class="input" v-model="refObjValueNum" controls-outside />
-        </item>
-        <item>
-            <name>reactObjValueNum</name>
-            <lable>reactObj.value.num</lable>
-            <value>代码错误</value>
-            <Input type="number" disabled="true" class="input" v-model="reactObjValueNum" controls-outside />
-        </item>
-        <item>
-            <name>reactObjChild.a</name>
-            <lable>reactObj.child.a</lable>
-            <value>{{'' + reactObjChild.a}}</value>
-            <Input type="number" class="input" v-model="reactObjChild.a" controls-outside />
-        </item>
+        </div>
+        <div class="item">
+            <div class="name">reactObjValueNum</div>
+            <div class="lable">reactObj.value.num</div>
+            <div class="value">代码错误</div>
+            <span class="input" />
+        </div>
 
+        <Divider>对象类型</Divider>
+        <div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
+            <pre style="flex: 1">refObj = ref(obj): {{refObj}}</pre>
+            <pre style="flex: 1">reactObj = reactive(obj): {{reactObj}}</pre>
+            <pre style="flex: 1">refObjChild = refObj.child: {{refObjChild}}</pre>
+            <pre style="flex: 1">reactObjChild = reactObj.child: {{reactObjChild}}</pre>
+        </div>
         <Divider dashed />
-        <item>
-            <name>refObjNumToRef</name>
-            <lable>toRef(refObj.num)</lable>
-            <value>{{'' + refObjNumToRef}}</value>
+        <div class="item head mt10px">
+            <div class="name">变量名</div>
+            <div class="lable">变量引用</div>
+            <div class="value">变量值</div>
+            <div class="input"></div>
+        </div>
+        <div class="item">
+            <div class="name">refObjChild.a</div>
+            <div class="lable">refObj.child.a</div>
+            <div class="value">{{'' + refObjChild.a}}</div>
+            <Input type="number" class="input" v-model="refObjChild.a" controls-outside />
+        </div>
+        <div class="item">
+            <div class="name">reactObjChild.a</div>
+            <div class="lable">reactObj.child.a</div>
+            <div class="value">{{'' + reactObjChild.a}}</div>
+            <Input type="number" class="input" v-model="reactObjChild.a" controls-outside />
+        </div>
+
+        <!-- <Divider dashed />
+        <div class="item">
+            <div class="name">refObjNumToRef</div>
+            <div class="lable">toRef(refObj.num)</div>
+            <div class="value">{{'' + refObjNumToRef}}</div>
             <Input type="number" class="input" v-model="refObjNumToRef" controls-outside />
-        </item>
-        <item>
-            <name>reactObjNumToRef</name>
-            <lable>toRef(reactObj.num)</lable>
-            <value>{{'' + reactObjNumToRef}}</value>
+        </div>
+        <div class="item">
+            <div class="name">reactObjNumToRef</div>
+            <div class="lable">toRef(reactObj.num)</div>
+            <div class="value">{{'' + reactObjNumToRef}}</div>
             <Input type="number" class="input" v-model="reactObjNumToRef" controls-outside />
-        </item>
-        <item>
-            <name>refObjValueNumToRef</name>
-            <lable>toRef(reactObj.value.num)</lable>
-            <value>{{'' + refObjValueNumToRef}}</value>
+        </div>
+        <div class="item">
+            <div class="name">refObjValueNumToRef</div>
+            <div class="lable">toRef(reactObj.value.num)</div>
+            <div class="value">{{'' + refObjValueNumToRef}}</div>
             <Input type="number" class="input" v-model="refObjValueNumToRef" controls-outside />
-        </item>
-        <item>
-            <name>reactObjValueNumToRef</name>
-            <lable>toRef(reactObj.value.num)</lable>
-            <value>{{'' + reactObjValueNumToRef}}</value>
+        </div>
+        <div class="item">
+            <div class="name">reactObjValueNumToRef</div>
+            <div class="lable">toRef(reactObj.value.num)</div>
+            <div class="value">{{'' + reactObjValueNumToRef}}</div>
             <Input type="number" class="input" v-model="reactObjValueNumToRef" controls-outside />
-        </item>
+        </div> -->
 
         <Divider dashed />
     </main>
     
-    <fixtop>
+    <div class="fix-top">
         <Button class="float-right" type="error" @click="forceUpdate">强制更新</Button>
-    </fixtop>
+    </div>
 </template>
 
 <script setup>
 import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps, getCurrentInstance } from 'vue'
 const inst = getCurrentInstance()
 function forceUpdate() {
+    console.log(obj)
     inst.ctx.$forceUpdate()
 }
 
@@ -152,9 +170,10 @@ const reactObjNum = reactObj.num
 const refObjValueNum = refObj.value.num
 // const reactObjValueNum = reactObj.value.num // error
 
-const refObjChild = refObj.child
+const refObjChild = refObj.value.child
 const reactObjChild = reactObj.child
-console.log('reactfObjChild', reactObjChild)
+console.log('refObjChild', refObjChild)
+console.log('reactObjChild', reactObjChild)
 
 console.log('----------------------------------------')
 const refObjNumToRef = toRef(refObj, 'num')
@@ -170,26 +189,32 @@ const reactObjValueNumToRef = toRef(reactObj.value, 'num')
 </script>
 
 <style scoped>
-    main item {
+    main .item {
+        display: flex;
+        align-item: center;
         margin: 2px 20px;
     }
-    main item > * {
+    main .item > * {
         display: inline-block;
         margin-right: 10px;
     }
-    main item > name {
-        width: 200px;
+    main .item > .name {
+        flex: 1;
+        min-width: 200px;
     }
-    main item > lable {
-        width: 200px;
+    main .item > .lable {
+        flex: 1;
+        min-width: 200px;
     }
-    main item > value {
-        width: 100px;
+    main .item > .value {
+        flex: 1;
+        min-width: 100px;
         text-align: center;
     }
-    main item > .input {
+    main .item > .input {
+        flex: 1;
         margin: 0px 20px;
-        width: 80px;
+        min-width: 80px;
         text-align: center;
     }