diff --git a/src/app.tsx b/src/app.tsx
index f5e6821..98430a8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -8,7 +8,7 @@ import "./app.less";
 
 import { Provider } from "react-redux";
 import store from "./store";
-
+import './iconfont/iconfont.css'
 import "taro-ui/rn/style/components/icon.scss";
 
 import { go } from "./utils/traoAPI";
diff --git a/src/pages/recording/recording.less b/src/pages/recording/recording.less
index 46fe1c8..05b752c 100644
--- a/src/pages/recording/recording.less
+++ b/src/pages/recording/recording.less
@@ -15,6 +15,10 @@ page {
   font-weight: 400;
   color: #666;
   padding: 0 32rpx;
+  position: sticky;
+  top: 176rpx;
+  z-index: 9;
+
 }
 
 .tab {
@@ -71,6 +75,9 @@ page {
   background: #f8f8f8;
   padding-top: 25rpx;
   padding-bottom: 29rpx;
+  position: sticky;
+  top: 286rpx;
+  z-index: 9;
 }
 
 .all {
@@ -143,6 +150,7 @@ page {
 
 .statistic_item {
   flex: 1;
+  text-align: center;
 }
 
 .border {
@@ -168,84 +176,90 @@ page {
   color: #999;
 }
 
-.instrument_item {
-  margin-top: 20rpx;
-  background: #ffffff;
-  border-radius: 30rpx;
-  padding: 46rpx 36rpx;
-}
+// .instrument_item {
+//   margin-top: 20rpx;
+//   background: #ffffff;
+//   border-radius: 30rpx;
+//   padding: 46rpx 36rpx;
+//   margin: 0 auto 20rpx;
+//   width: 690rpx;
+//   height: 290rpx;
+//   box-sizing: border-box;
+//   padding: 41rpx 33rpx;
+// }
 
-.time {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #000;
-  margin-right: 23rpx;
-}
+// .time {
+//   font-size: 28rpx;
+//   font-weight: bold;
+//   color: #000;
+//   margin-right: 23rpx;
+// }
 
-.tag {
-  width: 90rpx;
-  height: 36rpx;
-  line-height: 36rpx;
-  background: #e5f9ee;
-  border-radius: 18rpx;
-  font-size: 24rpx;
-  font-weight: 400;
-  color: #57bc81;
-}
+// .tag {
+//   width: 90rpx;
+//   height: 36rpx;
+//   line-height: 36rpx;
+//   background: #e5f9ee;
+//   border-radius: 18rpx;
+//   font-size: 24rpx;
+//   font-weight: 400;
+//   color: #57bc81;
+//   text-align: center;
+// }
 
-.tag_active {
-  background: #f8f8f8;
-  color: #999;
-}
+// .tag_active {
+//   background: #f8f8f8;
+//   color: #999;
+// }
 
-.report_btn {
-  font-size: 26rpx;
-  font-weight: 400;
-  color: #666;
-  align-items: baseline;
-}
+// .report_btn {
+//   font-size: 26rpx;
+//   font-weight: 400;
+//   color: #666;
+//   align-items: baseline;
+// }
 
-.arrow_icon {
-  width: 10rpx;
-  height: 20rpx;
-  margin-left: 14rpx;
-}
+// .arrow_icon {
+//   width: 10rpx;
+//   height: 20rpx;
+//   margin-left: 14rpx;
+// }
 
-.instrument_middle {
-  margin-top: 40rpx;
-  text-align: left;
-}
+// .instrument_middle {
+//   margin-top: 40rpx;
+//   text-align: left;
+// }
 
-.instrument_cover {
-  width: 140rpx;
-  height: 140rpx;
-  border-radius: 20rpx;
-  margin-right: 37rpx;
-}
+// .instrument_cover {
+//   width: 140rpx;
+//   height: 140rpx;
+//   border-radius: 20rpx;
+//   margin-right: 37rpx;
+// }
 
-.instrument_content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
+// .instrument_content {
+//   display: flex;
+//   flex-direction: column;
+//   flex: 1;
+// }
 
-.instrument_title {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #000;
-  padding-top: 3rpx;
-}
+// .instrument_title {
+//   font-size: 28rpx;
+//   font-weight: bold;
+//   color: #000;
+//   padding-top: 3rpx;
+// }
 
-.instrument_desc_box {
-  margin-top: 25rpx;
-  min-height: 73rpx;
-}
+// .instrument_desc_box {
+//   margin-top: 25rpx;
+//   min-height: 73rpx;
+// }
 
-.instrument_desc {
-  font-size: 24rpx;
-  font-weight: 400;
-  color: #999;
-}
+// .instrument_desc {
+//   font-size: 24rpx;
+//   font-weight: 400;
+//   color: #999;
+// }
 
 .instrument_bottom {
   position: relative;
@@ -378,7 +392,7 @@ page {
 .month_statistics {
   background: #fff;
   border-radius: 30rpx;
-  margin-top: 30rpx;
+  margin: 30rpx auto;
   padding: 46rpx 36rpx;
 }
 
@@ -495,3 +509,92 @@ page {
     color: #666666;
   }
 }
+
+.recording-box {
+  box-sizing: border-box;
+  width: 690rpx;
+  height: 290rpx;
+  background-color: #fff;
+  padding: 41rpx 33rpx;
+  margin: 0 auto 20rpx;
+  border-radius: 30rpx;
+
+  .box-top {
+    display: flex;
+    margin-bottom: 36rpx;
+    align-items: center;
+    justify-content: space-between;
+    .top-left {
+      display: flex;
+      .date {
+        width: 131rpx;
+        height: 22rpx;
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #000000;
+      }
+      .tip {
+        width: 90rpx;
+        height: 36rpx;
+        background: #e5f9ee;
+        border-radius: 18rpx;
+        line-height: 36rpx;
+        text-align: center;
+        font-size: 24rpx;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #57bc81;
+        margin-left: 23rpx;
+      }
+    }
+    .top-right {
+      font-size: 26rpx;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #666666;
+      display: flex;
+      align-items: center;
+
+      .arrow-icon {
+        font-size: 20rpx;
+        color: #999;
+      }
+      .arrow_icon {
+        width: 10rpx;
+        height: 20rpx;
+        margin-left: 14rpx;
+      }
+    }
+  }
+  .box-bottom {
+    display: flex;
+    .recording_img {
+      width: 140rpx;
+      height: 140rpx;
+      margin-right: 38rpx;
+    }
+    .bottom-right {
+      padding: 4rpx 0 3rpx;
+      .title {
+        font-size: 28rpx;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #000000;
+        margin-bottom: 10rpx;
+      }
+      .subtitle-box {
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        height: 65rpx;
+        .subtitle {
+          font-size: 24rpx;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #999999;
+          margin-top: 11rpx;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/recording/recording.tsx b/src/pages/recording/recording.tsx
index 0e27fc5..7c5c936 100644
--- a/src/pages/recording/recording.tsx
+++ b/src/pages/recording/recording.tsx
@@ -2,7 +2,7 @@ import Taro from "@tarojs/taro";
 import classnames from "classnames";
 import { Component, PropsWithChildren, useEffect, useState } from "react";
 
-import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
+import { Block, View, Text, Image, Input, Button, ScrollView, Picker } from "@tarojs/components";
 
 import { Tab, Tabs } from "@antmjs/vantui";
 
@@ -19,19 +19,22 @@ export default class Recording extends Component<any, any> {
     this.state = {
       name: "护理历程",
       current: 0,
+      array: [1, 2, 3, 4, 5],
     };
   }
 
-  async onLoad() {}
-  componentDidMount() {}
+  async onLoad() { }
+  componentDidMount() { }
 
-  componentWillUnmount() {}
+  componentWillUnmount() { }
 
-  componentDidShow() {}
+  componentDidShow() { }
 
-  componentDidHide() {}
+  componentDidHide() { }
 
-  async initData() {}
+  async initData() { }
+
+  onChangeYear() { }
 
   onTab = async (event) => {
     const { current } = event.currentTarget.dataset;
@@ -40,11 +43,11 @@ export default class Recording extends Component<any, any> {
   };
 
   render() {
-    let { current } = this.state;
+    let { current, array, name } = this.state;
     return (
       <Block>
-        <Navbar isBack={true} titleSlot="护理记录"></Navbar>
-        <View className="tabs">
+        <Navbar isBack titleSlot='护理记录'></Navbar>
+        <View className='tabs'>
           <View
             className={classnames("tab", {
               tab_active: current === 0,
@@ -64,26 +67,154 @@ export default class Recording extends Component<any, any> {
             打卡统计
           </View>
         </View>
+        {current === 0 && <ScrollView className='products_list' scroll-x='true' >
+          <View className="{{!curIndex ? 'all products_item_active' : 'all'}}" data-id='{{0}}' >全部
+          </View>
+          <View className="{{curIndex === item.id ? 'products_item products_item_active' : 'products_item'}}"
+            data-id='{{item.id}}'
+          >
+            <Image className='products_cover'
+              src={require("../../img/test/1706692819894.jpg")} mode='aspectFit'
+            ></Image>
+            <View className='products_title'>画质抗老射频仪</View>
+          </View>
+        </ScrollView>}
 
+        {current === 0 &&
+          array.length ===
+          0 && (
+            <View>
+              <View className='nodata'>
+                <Image
+                  className='nodata_img'
+                  src={require("../../img/nodata.png")}
+                ></Image>
+                <View className='nodata_text'>暂无数据</View>
+              </View>
+            </View>
+          )}
         {current === 0 && (
           <View>
-            <View className="nodata">
-              <Image
-                className="nodata_img"
-                src={require("../../img/nodata.png")}
-              ></Image>
-              <View className="nodata_text">暂无数据</View>
-            </View>
+            {/* <View className='instrument_item' >
+              <View className='instrument_top flex sb aitems'>
+                <View className='time_box flex aitems'>
+                  <View className='time'>2024.1.23</View>
+                  <View className={classnames("tag", {
+                    tag_active: current === 1,
+                  })}
+                  > 在线</View>
+                </View>
+                <View  className='report_btn flex'>
+                  <View>回看报告</View>
+                  <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
+                </View>
+              </View>
+              <View className='instrument_middle flex'>
+                <Image className='instrument_cover' src={require("../../img/test/1706667011027.jpg")}></Image>
+                <View className='instrument_content'>
+                  <View className='instrument_title'>小子弹智能射频仪</View>
+                  <View className='instrument_desc_box flex fc sb'>
+                    <View className='instrument_desc'>模式：基础场景版</View>
+                    <View className='instrument_desc'>护理时间：15分00秒</View>
+                  </View>
+                </View>
+              </View>
+            </View> */}
+
+
+
+            {array.map((item: any, index: any) => (
+              <View className='recording-box' key={index}>
+                <View className='box-top'>
+                  <View className='top-left'>
+                    <View className='date'>2024.1.31</View>
+                    <View className='tip'>在线</View>
+                  </View>
+                  <View className='top-right'>
+                    回看报告
+                    <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
+                  </View>
+                </View>
+                <View className='box-bottom'>
+                  <Image
+                    className='recording_img'
+                    src={require("../../img/test/1706667011027.jpg")}
+                  ></Image>
+                  <View className='bottom-right'>
+                    <View className='title'>小紫单智能射频仪</View>
+                    <View className='subtitle-box'>
+                      <View className='subtitle'>模式：基础场景版</View>
+                      <View className='subtitle'>护理时间：15分00秒</View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            ))}
           </View>
         )}
         {current === 1 && (
-          <View>
-            <View className="nodata">
+          <View >
+            {/* <View className='nodata'>
               <Image
-                className="nodata_img"
+                className='nodata_img'
                 src={require("../../img/nodata.png")}
               ></Image>
-              <View className="nodata_text">暂无数据</View>
+              <View className='nodata_text'>暂无数据</View>
+            </View> */}
+            <View style='height: 30rpx; background: #F8F8F8'></View>
+            <View className='clock_in_statistics m-x-30 flex sb'>
+              <View className='flex sb ab'>
+                <View className='clock_in_statistics_title'>年度打卡统计</View>
+                <Picker mode='date' fields='year' onChange={this.onChangeYear} value='2024' end='{{today}}'>
+                  <View className='clock_in_statistics_date flex aitems'>
+                    <View>2024年</View>
+                    <Image className='more_icon' src={require('../../img/arrow-down.png')} mode='widthFix'></Image>
+                  </View>
+                </Picker>
+              </View>
+              <View className='chart flex sb'>
+                <View className='flex fc aitems' >
+                  <View className='buoy' >5天</View>
+                  <View className='column' style='height: calc(186/31*{{item.total}}rpx)'></View>
+                  <View className='month'>1</View>
+                </View>
+              </View>
+            </View>
+            <View style='padding-bottom: env(safe-area-inset-bottom)' >
+              <View className='month_box m-x-30'>
+                <View className='month_statistics'>
+                  <View className='flex aitems sb'>
+                    <View className='time'>2024年1月</View>
+                    <View data-item='{{item}}' data-index='{{index}}' className='more_box flex aitems' >
+                      <View className='more_text'> 展开更多</View>
+                      <Image style='transform: rotate({{ item.isMore ? 180 : 0 }}deg)' className='more_icon'
+                        src={require("../../img/arrow-down.png")} mode='widthFix'
+                      ></Image>
+                    </View>
+                  </View>
+                  <View style='height: 59rpx'></View>
+                  <View className='statistic'>
+                    <View className='statistic_item'>
+                      <View className='statistic_num'>10</View>
+                      <View className='statistic_desc'>本月打卡天数</View>
+                    </View>
+                    <View className='statistic_item'>
+                      <View className='statistic_num'>80%</View>
+                      <View className='statistic_desc'>超越花至用户</View>
+                    </View>
+                    <View className='border'></View>
+                  </View>
+                  <View style='height: 57rpx'></View>
+                  <View className='month_item'>
+                    <View className='month_item_date'>2024.5.23</View>
+                    <View className='month_image_box flex sb'>
+                      <Image className='month_item_cover' src={require("../../img/test/1706667011027.jpg")} ></Image>
+                    </View>
+                    <View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
+                    <View className='month_item_note'>护理心得：真棒真棒真棒真棒真棒真棒真棒真棒真棒真棒</View>
+                  </View>
+                </View>
+              </View>
             </View>
           </View>
         )}