diff --git a/pages/report/component/CustomHeader/CustomHeader.vue b/pages/report/component/CustomHeader/CustomHeader.vue
index 0b236ca..dd72a79 100644
--- a/pages/report/component/CustomHeader/CustomHeader.vue
+++ b/pages/report/component/CustomHeader/CustomHeader.vue
@@ -1,20 +1,81 @@
 <template>
-  <div class="custom-header">
+  <div class="custom-header" v-if="userFaceInfo">
     <img class="new-header" src="/static/imgs/new-header.png" />
 
-    <view class="card">
-      <view class="card-main">
-        <img class="card-title" src="/static/imgs/card-title.png" />
+    <div class="custom-pic-box">
+      <div class="custom-pic-main">
+        <img class="custom-pic-main-bg" src="/static/imgs/main.png" />
 
-        <view class="card-tags">
-          <view class="card-tag">修饰五五分身、腿材</view>
-          <view class="card-tag">修饰五五分身、腿材</view>
+        <view class="card-tags" v-if="userFaceInfo?.purpose || userFaceInfo?.question">
+          <view class="card-tag" v-if="userFaceInfo.purpose">{{ userFaceInfo.purpose }}</view>
+          <view class="card-tag" v-if="userFaceInfo.question">{{ userFaceInfo.question  }}</view>
         </view>
-      </view>
-    </view>
+
+        <div class="custom-pic-info">
+          <img class="pic-border" src="/static/imgs/pic-border.png" />
+
+          <div class="real-pic">
+            <!-- <img src="/static/imgs/temp.png" class="personal-pic" /> -->
+            <img :src="userFaceInfo?.avatar_img_url" class="personal-pic" />
+
+            <!-- <div class="text">优雅风</div> -->
+            <div class="text">{{ userFaceInfo?.type }}</div>
+          </div>
+
+          <div class="tag tag1" :data-text="userFaceInfo?.feature">
+            <img src="/static/imgs/1.png" />
+          </div>
+
+          <div class="tag tag2" :data-text="userFaceInfo?.eyebrows">
+            <img src="/static/imgs/2.png" />
+          </div>
+
+          <div class="tag tag3" :data-text="userFaceInfo?.nasolabial_folds">
+            <img src="/static/imgs/3.png" />
+          </div>
+
+          <div class="tag tag4" :data-text="userFaceInfo?.ocular_form">
+            <img src="/static/imgs/4.png" />
+          </div>
+
+          <div class="tag tag5" :data-text="userFaceInfo?.three_courts_five_eyes">
+            <img src="/static/imgs/2.png" />
+          </div>
+
+          <div class="tag tag6" :data-text="userFaceInfo?.neck_length">
+            <img src="/static/imgs/6.png" />
+          </div>
+
+          <!-- <img src="/static/imgs/1.png" class="tag tag1" data-text="abc" />
+          <img src="/static/imgs/2.png" class="tag tag2" />
+          <img src="/static/imgs/3.png" class="tag tag3" />
+          <img src="/static/imgs/4.png" class="tag tag4" />
+          <img src="/static/imgs/2.png" class="tag tag5" />
+          <img src="/static/imgs/6.png" class="tag tag6" /> -->
+        </div>
+
+        <div class="user-info">
+          <div>{{userFaceInfo?.sex}}​｜{{ userFaceInfo?.birthday }}</div>
+          <div>身高：{{ userFaceInfo.height || "-" }}cm 体重：{{ userFaceInfo.weight || "-" }}kg</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  userFaceInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+</script>
+
 <style scoped lang="scss">
   .custom-header {
     .new-header {
@@ -48,12 +109,12 @@
           flex-wrap: wrap;
 
           .card-tag {
-            height: 64rpx;
+            height: 50rpx;
             padding-left: 26rpx;
             padding-right: 26rpx;
             background: rgba(239, 229, 219, 1);
             color: rgba(78, 78, 78, 1);
-            font-size: 16rpx;
+            font-size: 20rpx;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -61,6 +122,241 @@
             margin-right: 20rpx;
           }
         }
+
+        .pic {
+          width: 327rpx;
+          height: 477rpx;
+          // margin: 0 auto;
+          margin-top: 35rpx;
+          .pic-border {
+            width: 100%;
+            margin-left: 50rpx;
+          }
+        }
+      }
+    }
+
+    .custom-pic-box {
+      width: 100%;
+      background: rgba(239, 229, 219, 1);
+
+      .custom-pic-main {
+        position: relative;
+
+        .custom-pic-main-bg {
+          width: 100%;
+          display: block;
+        }
+
+        .card-tags {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-wrap: wrap;
+          //   background-color: red;
+          position: absolute;
+
+          left: 0;
+          top: 230rpx;
+          width: 100%;
+
+          .card-tag {
+            height: 50rpx;
+            padding-left: 26rpx;
+            padding-right: 26rpx;
+            background: rgba(239, 229, 219, 1);
+            color: rgba(78, 78, 78, 1);
+            font-size: 20rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 16rpx;
+            margin-right: 20rpx;
+          }
+        }
+
+        .custom-pic-info {
+          position: absolute;
+          top: 300rpx;
+          left: 80rpx;
+
+          // width: 330rpx;
+          // height: 100rpx;
+          //   background-color: red;
+
+          .tag {
+            position: absolute;
+            right: 30rpx;
+            width: 200rpx;
+            transform: translateX(100%);
+
+            > img {
+              width: 100%;
+              display: block;
+            }
+
+            &.tag1 {
+              top: 20rpx;
+
+              &::after {
+                content: attr(data-text);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                font-size: 30rpx;
+                color: white;
+                z-index: 9999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transform: rotate(-10deg);
+              }
+            }
+
+            &.tag2 {
+              top: 120rpx;
+
+              &::after {
+                content: attr(data-text);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                font-size: 30rpx;
+                color: white;
+                z-index: 9999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transform: rotate(10deg);
+              }
+            }
+
+            &.tag3 {
+              top: 200rpx;
+
+              &::after {
+                content: attr(data-text);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                font-size: 30rpx;
+                color: white;
+                z-index: 9999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transform: rotate(-10deg);
+              }
+            }
+
+            &.tag4 {
+              top: 280rpx;
+
+              &::after {
+                content: attr(data-text);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                font-size: 30rpx;
+                color: white;
+                z-index: 9999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transform: rotate(-10deg);
+              }
+            }
+
+            &.tag5 {
+              top: 380rpx;
+
+              &::after {
+                content: attr(data-text);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                font-size: 30rpx;
+                color: white;
+                z-index: 9999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transform: rotate(10deg);
+              }
+            }
+
+            &.tag6 {
+              top: 470rpx;
+
+              &::after {
+                content: attr(data-text);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                font-size: 30rpx;
+                color: white;
+                z-index: 9999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transform: rotate(-10deg);
+              }
+            }
+          }
+
+          .pic-border {
+            width: 427rpx;
+            // background-color: red;
+            z-index: 1;
+          }
+
+          .real-pic {
+            position: absolute;
+            top: 35rpx;
+            left: 55rpx;
+            width: 320rpx;
+            height: 450rpx;
+            z-index: 2;
+
+            .text {
+              position: absolute;
+              bottom: 0rpx;
+              right: 0rpx;
+              //   transform: translateX(-50%);
+              font-size: 40rpx;
+              color: #333;
+              transform: translateY(100%);
+            }
+
+            .personal-pic {
+              width: 100%;
+              display: block;
+              position: relative;
+            }
+          }
+        }
+
+        .user-info {
+          position: absolute;
+          bottom: 90rpx;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 22rpx;
+          color: #333;
+          text-align: center;
+        }
       }
     }
   }
diff --git a/pages/report/index.vue b/pages/report/index.vue
index 199e916..131c89e 100644
--- a/pages/report/index.vue
+++ b/pages/report/index.vue
@@ -1,16 +1,16 @@
 <template>
   <view style="overflow-x: hidden; font-size: 0">
 
-    <!-- <Custom-Header></Custom-Header> -->
+    <Custom-Header :userFaceInfo="collect" v-if="isInPptr" />
 
 
-    <img
+    <!-- <img
       v-if="isInPptr"
       src="/static/header.png"
       style="width: 100%; display: block; margin-bottom: -600rpx"
-    />
+    /> -->
 
-    <view id="headerBox">
+    <view id="headerBox" v-if="!isInPptr">
       <!-- <Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" /> -->
       <Header v-if="collect" :userFaceInfo="collect" />
 
diff --git a/static/imgs/1.png b/static/imgs/1.png
new file mode 100644
index 0000000..ec26432
Binary files /dev/null and b/static/imgs/1.png differ
diff --git a/static/imgs/2.png b/static/imgs/2.png
new file mode 100644
index 0000000..94e8a53
Binary files /dev/null and b/static/imgs/2.png differ
diff --git a/static/imgs/3.png b/static/imgs/3.png
new file mode 100644
index 0000000..37359e5
Binary files /dev/null and b/static/imgs/3.png differ
diff --git a/static/imgs/4.png b/static/imgs/4.png
new file mode 100644
index 0000000..5b43542
Binary files /dev/null and b/static/imgs/4.png differ
diff --git a/static/imgs/6.png b/static/imgs/6.png
new file mode 100644
index 0000000..ec26432
Binary files /dev/null and b/static/imgs/6.png differ
diff --git a/static/imgs/main.png b/static/imgs/main.png
new file mode 100644
index 0000000..3bbaa6a
Binary files /dev/null and b/static/imgs/main.png differ
diff --git a/static/imgs/pic-border.png b/static/imgs/pic-border.png
new file mode 100644
index 0000000..e0cc1c2
Binary files /dev/null and b/static/imgs/pic-border.png differ
diff --git a/static/imgs/temp.png b/static/imgs/temp.png
new file mode 100644
index 0000000..bf2deed
Binary files /dev/null and b/static/imgs/temp.png differ