Account page

miniprogram/app.scss

@@ -16,11 +16,36 @@ $black-filter: brightness(0) opacity(.65);
 $white-filter: brightness(100) opacity(.65);
 $blue-filter: opacity(.65);
 
+// 页面容器外边距
 view.container {
     width: 88%;
     padding: 0 6%;
 }
 
+// 带阴影的 card
+view.card {
+    width: calc( 100% - 36px );
+    padding: 0 18px;
+    border-radius: 15px;
+    background-color: $theme-color-light-layout;
+    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .08), 
+                0 0.3px 0.9px 0 rgba(0, 0, 0, .05);
+}
+
+// 顶部导航栏阴影
+view.top-shadow {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    height: 10px;
+    top: -10px;
+    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .05);
+}
+
+view.text {
+    
+}
+
 page {
     background-color: $theme-color-light-background;
     color: $theme-color-light-text;
@@ -31,7 +56,11 @@ page {
   
 @media (prefers-color-scheme: dark){
     page {
-      background-color: $theme-color-dark-background;
+        background-color: $theme-color-dark-background;
-      color: $theme-color-dark-text;
+        color: $theme-color-dark-text;
+    }
+
+    view.card {
+        background-color: $theme-color-dark-layout;
     }
 }

miniprogram/pages/Account/Account.scss

@@ -1,9 +1,29 @@
+@import "../../app.scss";
+
 view.container {
 
     // 用户卡片
     view.user-card {
-        width: 100%;
+        margin-top: 20px;
-        height: 200px;
+        height: 100px;
-        background-color: aqua;
+        display: flex;
+        padding-top: 20px;
+        padding-bottom: 20px;
+
+        view.avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 1000px;
+            overflow: hidden;
+        }
+        
+        view.info {
+            width: calc(100% - 80px - 20px);
+            padding-left: 20px;
+            
+            view.nick {
+                color: $theme-color-light-title;
+            }
+        }
     }
 }

miniprogram/pages/Account/Account.wxml

@@ -1,8 +1,22 @@
+
+<!-- 顶部的阴影 -->
+<view class="top-shadow"></view>
+
+<!-- 页面容器 -->
 <view class="container">
 
     <!-- 用户卡片 -->
-    <view class="user-card">
+    <view class="user-card card">
-        
+        <view class="avatar">
+            <open-data type="userAvatarUrl" />
+        </view>
+        <view class="info">
+            <view class="nick">
+                <open-data type="userNickName" />
+            </view>
+            <view class="student">秦浩轩</view>
+            <view class="student">1806240113</view>
+        </view>
     </view>
 
 </view>