个人中心

pages/me/index.vue

@@ -1,17 +1,101 @@
 <template>
-  <section class="container">
+  <div>
+    <!-- 顶部个人消息 -->
     <div class="top_info">
-      
+      <!-- 头像名字 -->
+      <div class="user_info clear-both">
+        <h2>
+          <img src="../../static/img/img_head.png" alt="">
+        </h2>
+        <div>
+          <p class="user_name">用户名-已登录</p>
+          <p>当前在线（扩展使用）</p>
+        </div>
+      </div>
+      <!-- end:头像名字结束 -->
+
+      <div class="verify">
+        <p>VIP会员尊享</p>
+        <a href="#" class="grad">立即开通</a>
+      </div>
+      <div class="real_name">
+        <p class="list_item">实名认证</p>
+      </div>
     </div>
-  </section>
+    <!-- end:顶部个人消息结束 -->
+    
+    <!-- 带单列表 -->
+    <ul class="menu-list">
+      <li>
+        <a href="#"></a>
+        <img src="../../static/img/img_head.png" alt="">
+        <p class="list_item">我的会员</p>
+      </li>
+      <li>
+        <a href="#"></a>
+         <img src="../../static/img/hide.png" alt="">
+        <p class="list_item">我的账户</p>
+      </li>
+      <li>
+        <a href="#"></a>
+         <img src="../../static/img/img_head.png" alt="">
+        <p class="list_item">我的购买</p>
+      </li>
+      <li>
+        <a href="#"></a>
+         <img src="../../static/img/img_head.png" alt="">
+        <p class="list_item">我的收藏</p>
+      </li>
+      <li>
+        <a href="#"></a>
+         <img src="../../static/img/img_head.png" alt="">
+        <p class="list_item">我的记录</p>
+      </li>
+    </ul>
+    <!-- end:带单列表 -->
+    <!-- 带单列表 -->
+    <ul class="menu-list">
+      <li>
+        <a href="#"></a>
+        <img src="../../static/img/icon_V.png" alt="">
+        <p class="list_item">退出登录</p>
+      </li>
+      
+    </ul>
+    <!-- end:带单列表 -->
+    
+  </div>
+
 </template>
 
+
 <script>
+import '~/assets/new.scss' // 引入
+import '~/static/css/style.css' // 引入
+
 export default {
  
 }
 </script>
 
 <style>
+html{
+ 
+}
+body{
+  padding: 0;
+  padding-bottom: 6rem;
+  background-color: #f8f9fa
+}
+.list_item{
+  font-size: 1.6rem;
+  font-weight: bold;
+  color: #202020;
+  line-height: 5.5rem;
+}
+.user_name{
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
 
 </style>