unsucces try on name

src/pages/personal-page/my-setting-page/my-setting-page.component.html

@@ -3,6 +3,15 @@
     <h1 class="recent_title">
       个人设置
     </h1>
+
+    <h4>当前用户名：{{ name }}</h4>
+    <h4>修改用户名：{{changedName}}</h4>
+    <input
+      class="search-box"
+      placeholder="输入要修改的用户名"
+      ng-model="changedName"
+    />
+
   </div>
 
   <div class="right_part">
@@ -20,7 +29,7 @@ <h1 class="recent_title">
       <a routerLink="../follow">我的关注</a>
     </div>
     <div class="func_t">
-      <a routerLink="."  class="func_t">个人设置</a>
+      <a routerLink="." class="func_t">个人设置</a>
     </div>
     <div class="func_h">
       <a routerLink="../payment">财务管理</a>

src/pages/personal-page/my-setting-page/my-setting-page.component.styl

@@ -5,13 +5,29 @@
 
 .left_part {
     lost-column: 4 / 5
+
+    .search-box {
+        display: flex
+        padding: var(--theme-pad-03) var(--theme-pad-03)
+        color: var(--searchbar-text-color, searchbar-default-text-color)
+        background-color: transparent
+        font-size: inherit
+        border-style: solid
+        border-width: 2px
+        border-color: #27a881
+        flex-grow: 1
+
+        &::placeholder {
+            color: var(--palette-base04)
+        }
+    }
 }
 
 .right_part {
     lost-column: 1 / 5
     position: sticky
     top: var(--theme-pad-05)
-    
+
     .line {
         width = 100%
     }

src/pages/personal-page/my-setting-page/my-setting-page.component.ts

@@ -6,10 +6,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./my-setting-page.component.styl']
 })
 export class MySettingPageComponent implements OnInit {
+  name;
+  changedName;
 
   constructor() { }
 
   ngOnInit() {
+    this.name = 'Dio';
+    this.changedName = '';
   }
 
+
+
 }