a1300399510@qq.com 提交于 2023/03/30 -12:40:01

src/views/user/UserIndex.vue

@@ -1,6 +1,14 @@
 <template>
-    <div>
+    <div class="container">
-        发给规范化  
+        <div class="header flexcenter flexcolumn">
+
+            <div class="portrait flexcenter shadow">
+                <img class="portrait-icom" :src="info.avatar" />
+            </div>
+            <div class="header-username flexacenter">{{ info.nickname }}</div>
+
+        </div>
+
     </div>
 </template>
 
@@ -10,7 +18,10 @@ export default {
 
     data() {
         return {
-            
+            info: {
+                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
+                nickname: "Ada.Wu"
+            }
         };
     },
 
@@ -25,5 +36,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.container {
+    padding-top: 1.3rem;
 
+    .header {
+        padding: 1rem 0 .3733rem;
+
+
+        .portrait {
+            width: 2rem;
+            height: 2rem;
+            border-radius: 50%;
+            background-color: #fff;
+            position: relative;
+        }
+
+        .portrait-icom {
+            width: 1.8rem;
+            height: 1.8rem;
+            border-radius: 50%;
+        }
+
+        .header-username {
+            color: #000;
+            font-size: .48rem;
+            line-height: normal;
+            margin-top: .24rem;
+            margin-bottom: .14rem;
+            font-weight: 650;
+        }
+
+
+    }
+
+}
 </style>

src/views/user/user.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <header-nav :issearch="false" :needgetuser="true">
+        <header-nav :issearch="true" :needgetuser="true">
             <template slot="header-title">我的寄托</template>
         </header-nav>
         <router-view />
@@ -10,7 +10,7 @@
 <script>
 import HeaderNav from "@/components/HeaderNav";
 export default {
-    name: 'GterforumwebUser',
+    name: 'user',
 
     data() {
         return {
@@ -25,6 +25,9 @@ export default {
     methods: {
 
     },
+    components: {
+        HeaderNav
+    }
 };
 </script>