diff --git a/src/pages.json b/src/pages.json
index abb88912..e81554e5 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -2,7 +2,8 @@
   "easycom": {
     "autoscan": true,
     "custom": {
-      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+      "^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
     }
   },
   "pages": [
diff --git a/src/pages/profile/userinfo.vue b/src/pages/profile/userinfo.vue
index 245d1026..6507c1d5 100644
--- a/src/pages/profile/userinfo.vue
+++ b/src/pages/profile/userinfo.vue
@@ -5,54 +5,202 @@
         <uni-icons type="back" size="30" color="#ffcd32" @click="back"></uni-icons>
       </template>
       <template #right>
-        <view class="save-info" @click="saveUserInfo">
-          <text class="text">保存</text>
+        <view class="bg-color-theme px-2 py-1 rounded-full c-black" @click="saveUserInfo">
+          保存
         </view>
       </template>
     </van-nav-bar>
 
-    <view class="content">
+    <view class="my-100rpx">
       <scroll-view scroll-y>
-        <view class="section">语音签名</view>
+        <view class="flex-row-center my-8">
+          <s-uploader
+            v-model:url="userinfo.avatar"
+            fileMediatype="image"
+            limit="1"
+            mode="grid"
+            :imageStyles="{ width: '168rpx', height: '168rpx', borderRadius: '168rpx' }"
+          />
+        </view>
+
+        <view class="ml-5 mb-3">语音签名</view>
         <van-cell-group inset>
-          <van-cell title="单元格" value="内容" is-link>
+          <van-cell title="单元格" value="去录制" is-link>
             <template #title>
-              <view class="flex items-center c-amber">
+              <view class="flex items-center">
                 <uni-icons type="mic" size="30" color="#ffcd32"></uni-icons>
-                <text>添加语音签名，让你更受关注</text>
+                <text class="truncate">添加语音签名，让你更受关注</text>
               </view>
             </template>
           </van-cell>
         </van-cell-group>
-        <view class="text-red">qqq</view>
+
+        <view class="ml-5 my-3">基本资料</view>
         <van-cell-group inset>
-          <van-cell title="单元格" value="内容" />
-          <van-cell title="单元格" value="内容" label="描述信息" />
+          <van-cell title="昵称" value="输入">
+            <template #value>
+              <input type="text" :maxlength="12" :value="userinfo.nickname" />
+            </template>
+          </van-cell>
+          <van-cell
+            title="生日"
+            :value="userinfo.birthday || '未填写'"
+            is-link
+            @click="showPopupPicker('birthday')"
+          />
+          <van-cell
+            title="身高"
+            :value="userinfo.height ? userinfo.height + 'cm' : '未填写'"
+            is-link
+            @click="showPopupPicker('height')"
+          />
+          <van-cell
+            title="体重"
+            :value="userinfo.weight ? userinfo.weight + 'kg' : '未填写'"
+            is-link
+            @click="showPopupPicker('weight')"
+          />
+          <van-cell
+            title="从事职业"
+            :value="userinfo.occ || '未填写'"
+            is-link
+            @click="showPopupPicker('occ')"
+          />
         </van-cell-group>
+
+        <view class="ml-5 my-3">个人简介</view>
+        <van-cell-group inset>
+          <van-field
+            v-model="userinfo.description"
+            rows="2"
+            autosize
+            type="textarea"
+            maxlength="50"
+            placeholder="说点什么吧..."
+            show-word-limit
+          />
+        </van-cell-group>
+
+        <view class="mx-5 my-3 flex justify-between">
+          <text>个人相册</text>
+          <text>{{ userinfo.photos.length }}/9</text>
+        </view>
+        <view class="px-4">
+          <s-uploader v-model:url="userinfo.photos" fileMediatype="image" limit="9" mode="grid" />
+        </view>
+        <view class="h-100"></view>
       </scroll-view>
     </view>
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-date-picker
+        v-if="pickerFiled === 'birthday'"
+        :model-value="userinfo.birthday?.split('-') || []"
+        title="生日"
+        :min-date="new Date(1980, 1, 1)"
+        :max-date="new Date()"
+        @confirm="(e) => onConfirm(e, 'birthday')"
+        @cancel="showPicker = false"
+      />
+      <van-picker
+        v-else-if="pickerFiled === 'height'"
+        :model-value="[userinfo.height]"
+        title="身高"
+        :columns="columnsHeight"
+        @confirm="(e) => onConfirm(e, 'height')"
+        @cancel="showPicker = false"
+      />
+      <van-picker
+        v-else-if="pickerFiled === 'weight'"
+        :model-value="[userinfo.weight]"
+        title="体重"
+        :columns="columnsWeight"
+        @confirm="(e) => onConfirm(e, 'weight')"
+        @cancel="showPicker = false"
+      />
+      <van-picker
+        v-else-if="pickerFiled === 'occ'"
+        :model-value="[userinfo.occ]"
+        title="选择职业"
+        :columns="columnsOcc"
+        @confirm="(e) => onConfirm(e, 'occ')"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
   </van-config-provider>
 </template>
 
+<script lang="ts">
+  // 身高选择器选项
+  const columnsHeight = Array.from({ length: 100 }, (_, i) => ({
+    text: i + 100 + 'cm',
+    value: i + 100,
+  }));
+  // 体重选择器选项
+  const columnsWeight = Array.from({ length: 100 }, (_, i) => ({
+    text: i + 20 + 'kg',
+    value: i + 20,
+  }));
+  // 职业选择器选项
+  const columnsOcc = [
+    { text: '互联网', value: '互联网' },
+    { text: '金融', value: '金融' },
+    { text: '娱乐', value: '娱乐' },
+    { text: 'CEO', value: 'CEO' },
+    { text: '高管', value: '高管' },
+    { text: '投资人', value: '投资人' },
+    { text: '学生', value: '学生' },
+    { text: '其他', value: '其他' },
+  ];
+</script>
+
 <script setup lang="ts">
   import { onLoad } from '@dcloudio/uni-app';
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
+  // @ts-ignore
   import UserApi from '@/sheep/api/member/user';
+  import sUploader from '@/sheep/components/s-uploader/s-uploader.vue';
 
   onLoad(async () => {
+    // 获取用户信息
     const { data } = await UserApi.getUserInfo();
-    Object.assign(userinfo, data);
+    Object.assign(userinfo, data, {
+      birthday: data.birthday ?? '',
+      height: data.height ?? '',
+      weight: data.weight ?? '',
+    });
   });
 
-  const userinfo = reactive({
-    avatar: {},
+  // 用户信息
+  const userinfo = reactive<any>({
+    avatar: [],
     nickname: '',
-    mobile: '',
-    email: '',
-    gender: '',
     birthday: '',
-    address: '',
+    height: '',
+    weight: '',
+    occ: '',
+    description: '',
+
+    photos: [],
   });
+  const showPicker = ref(false); // 选择器显隐
+  const pickerFiled = ref<'' | 'birthday' | 'height' | 'weight' | 'occ'>('');
+
+  // 显示选择器
+  const showPopupPicker = (filed: '' | 'birthday' | 'height' | 'weight' | 'occ') => {
+    pickerFiled.value = filed;
+    showPicker.value = true;
+  };
+
+  // 选择器确定
+  const onConfirm = ({ selectedValues }: { selectedValues: string[] }, filed: string) => {
+    if (filed === 'birthday') {
+      userinfo[filed] = selectedValues.join('-');
+    } else {
+      userinfo[filed] = selectedValues.join(',');
+    }
+    showPicker.value = false;
+  };
 
   function saveUserInfo() {}
 
@@ -60,21 +208,3 @@
     uni.navigateBack();
   }
 </script>
-
-<style scoped lang="scss">
-  .save-info {
-    background-color: $color-theme;
-    border-radius: 40rpx;
-    padding: 6rpx 20rpx;
-    .text {
-      font-size: $font-size-medium;
-      color: #333;
-    }
-  }
-  .content {
-    margin: 100rpx 0;
-    .section {
-      margin: 0 0 20rpx 40rpx;
-    }
-  }
-</style>
diff --git a/unocss.config.ts b/unocss.config.ts
index 6ac5a110..582b6277 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -37,65 +37,49 @@ export default {
   },
   rules: [
     [
-      /^main-text-(\d+)$/,
-      ([, d]) => ({
-        'font-size': `${d}rpx`,
-        'font-weight': 800,
-        color: '#000',
-        'line-height': `1.4em`,
-      }),
+      'bg-color-theme',
+      {
+        'background-color': '#ffcd32',
+      },
     ],
     [
-      /^sub-text-(\d+)$/,
-      ([, d]) => ({
-        'font-size': `${d}rpx`,
-        'font-weight': 500,
-        color: '#333',
-        'line-height': `1.4em`,
-      }),
+      'bg-color-theme-dark',
+      {
+        'background-color': 'rgba(255, 205, 49, 0.5)',
+      },
     ],
     [
-      /^second-text-(\d+)$/,
-      ([, d]) => ({
-        'font-size': `${d}rpx`,
-        'font-weight': 500,
-        color: '#999',
-        'line-height': `1.4em`,
-      }),
+      'text-color-theme',
+      {
+        color: '#ffcd32',
+      },
+    ],
+    [
+      'bg-color',
+      {
+        'background-color': '#222222',
+      },
+    ],
+    [
+      'bg-color-dark',
+      {
+        'background-color': 'rgba(0, 0, 0, 0.3)',
+      },
+    ],
+    [
+      'bg-color-light',
+      {
+        'background-color': '#333333',
+      },
     ],
     [
       'card',
       {
-        'background-color': 'white',
+        'background-color': 'rgba(0, 0, 0, 0.3)',
         'box-shadow': '0rpx 8rpx 26rpx -4rpx rgba(210,210,210,0.5)',
         'border-radius': '16rpx',
       },
     ],
-    [
-      'shadow-main',
-      {
-        'box-shadow': '0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1)',
-      },
-    ],
-    [
-      /^show-line$/,
-      ([, d]) => ({
-        overflow: 'hidden',
-        'white-space': 'nowrap',
-        'text-overflow': 'ellipsis',
-      }),
-    ],
-    [
-      /^show-line-(\d+)$/,
-      ([, d]) => ({
-        display: '-webkit-box !important',
-        overflow: 'hidden',
-        'text-overflow': 'ellipsis !important',
-        'word-break': 'break-all',
-        '-webkit-line-clamp': d,
-        '-webkit-box-orient': 'vertical !important',
-      }),
-    ],
   ],
 
   transformers: [transformerAttributify(), transformerClass()],