diff --git a/.cloudbase/container/debug.json b/.cloudbase/container/debug.json
new file mode 100644
index 0000000..0d44458
--- /dev/null
+++ b/.cloudbase/container/debug.json
@@ -0,0 +1 @@
+{"containers":[],"config":{}}
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.scss b/miniprogram/pages/index/index.scss
index a8460ed..2d26041 100644
--- a/miniprogram/pages/index/index.scss
+++ b/miniprogram/pages/index/index.scss
@@ -1,5 +1,6 @@
 /**index.wxss**/
 
+
 .container{
     display: flex;
     position: absolute;
@@ -205,31 +206,175 @@
 
 // 知识库界面
 #page_lib{
-    background-color: rgb(28, 41, 212);
+    background-color: rgba($color: #fff5d2, $alpha: 1.0);
     display: flex;
     align-items: center;
     justify-content: center;
     translate:0 100%;
+    .content{
+        display: flex;
+        flex-direction: column;
+        .node{
+            background-color: rgba($color: #ffffff, $alpha: 1);
+            border-radius: 15rpx;
+            height: 200rpx;
+            width: auto;
+            margin:30rpx 20rpx 30rpx 10rpx;
+            .node_content{
+                position: relative;
+                display: block;
+                height: 100%;
+                width: auto;
+                margin-left: 25rpx;
+                border-radius: 15rpx;
+                background-color: rgba($color: #ffffff, $alpha: 1);
+                // overflow: hidden;
+                ::-webkit-scrollbar {
+                    width: 0;
+                    height: 0;
+                    color: transparent;   
+                }
+                // .node_nameBar{
+                //     background-color: teal;
+                //     position: absolute;
+                //     top:20rpx;
+                //     left:20rpx;
+                //     overflow: scroll;
+                //     height: 500rpx;
+                //     width: 350rpx;
+                //     display:flex;
+                //     // flex-direction: column;
+                //     justify-content: center;
+                //     align-items: flex-start;
+                // }
+                .node_name{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width:max-content;
+                    background-color: rgba(150, 145, 138, 0.5);
+                    padding:0rpx 10rpx;
+                    display: flex;
+                    align-items: center;
+                    border-radius: 15rpx;
+                    position: relative;
+                    top:15rpx;
+                    left:20rpx;
+                    // justify-content: center;
+                }
+                .node_danger{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 80rpx;
+                    background-color:  rgba(150, 145, 138, 0.5);
+                    position: absolute;
+                    left:299rpx;
+                    top:15rpx;
+                    // padding: 10rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 15rpx;
+                    background-color: tomato;
+                    // view{
+                    //     position: relative;
+                    //     top:-0.5rpx;
+                    // }
+                }
+                .node_safe{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 80rpx;
+                    background-color:  rgba(150, 145, 138, 0.5);
+                    position: absolute;
+                    left:299rpx;
+                    top:15rpx;
+                    // padding: 10rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 15rpx;
+                    background-color:springgreen;
+                    // view{
+                    //     position: relative;
+                    //     top:-0.5rpx;
+                    // }
+                }
+                .node_scores{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 135rpx;
+                    background-color:  rgba(150, 145, 138, 0.5);
+                    position: absolute;
+                    left:399rpx;
+                    top:15rpx;
+                    // padding: 4rpx 0rpx 6rpx 10rpx;
+                    padding-left: 10rpx;
+                    display: flex;
+                    align-items: center;
+                    // justify-content: center;
+                    border-radius: 15rpx;
+                }
+                .node_risk{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 120rpx;
+                    position: absolute;
+                    left:560rpx;
+                    top:15rpx;
+                    // padding: 0rpx 6rpx 6rpx 13rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 15rpx;
+                    overflow: hidden;
+                }
+                .node_remark{
+                    height: 40%;
+                    width: 460rpx;
+                    background-color: tan;
+                    position: absolute;
+                    left:200rpx;
+                    bottom:20rpx;
+                    padding: 5rpx 10rpx 10rpx 10rpx;
+                    border-radius: 15rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 60rpx;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
 }
 
+
 // 历史记录
 #page_history{
     background-color: rgba($color: #fff5d2, $alpha: 1.0);
-    .date1{
-        background-color: rgba($color: #fff5d2, $alpha: 1);
-        height: 50rpx;
-        width: 50%;
-        position: absolute;
-        top: 160rpx;
-        left: 10%;
-    }
+    // .date1{
+    //     background-color: rgba($color: #fff5d2, $alpha: 1);
+    //     height: 50rpx;
+    //     width: 50%;
+    //     position: absolute;
+    //     top: 160rpx;
+    //     left: 10%;
+    // }
     .content{
+        display:flex;
         flex-direction: column;
-        justify-items: center;
-        align-items: flex-start;
+        ::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+            color: transparent;   
+        }
+        
+        // justify-items: center;
+        // align-items: flex-start;
         .history_part{
             height: 210rpx;
             width: auto;
+            border-radius: 15rpx;
             background-color: violet;
             margin:30rpx;
             // margin-top:30rpx;
@@ -240,8 +385,10 @@
                 // height: 30rpx;
                 width:fit-content;
                 // margin-left: 10rpx;
-                padding:5rpx;
+                border-radius: 15rpx;
+                padding:4rpx 10rpx;
                 background-color: whitesmoke;
+                font-size: 25rpx;
             }
             .history_content{
                 display: flex;
@@ -251,6 +398,7 @@
                     margin-left: 0;
                     height: auto;
                     width: auto;
+                    border-radius: 15rpx;
                 }
             }
         }
@@ -297,38 +445,119 @@
 // 收藏界面
 #page_collect{
     background-color: rgba($color: #fff5d2, $alpha: 1.0);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .collect1{
-        background-color: rgba($color: #ffffff, $alpha: 1);
-        height: 170rpx;
-        width: 25%;
-        position: absolute;
-        top: 200rpx;
-        left: 10%;
-    }
-    .collect2{
-        background-color: rgba($color: #ffffff, $alpha: 1);
-        height: 170rpx;
-        width: 25%;
-        position: absolute;
-        top: 200rpx;
-        left: 38%;
-    }
-    #page_collect_back{
-        height: 90rpx;
-        width: 90rpx;
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        // background-color: aquamarine;
-        top: 65rpx;
-        left:70rpx;
-        // font-size: 150rpx;
-        // font-weight: 900;
-        // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    }
     translate:0 100%;
+    .content{
+        display: flex;
+        flex-direction: column;
+        .node{
+            background-color: rgba($color: #ffffff, $alpha: 1);
+            border-radius: 15rpx;
+            height: 200rpx;
+            width: auto;
+            margin:30rpx 20rpx 30rpx 10rpx;
+            .node_content{
+                position: relative;
+                display: block;
+                height: 100%;
+                width: auto;
+                margin-left: 25rpx;
+                border-radius: 15rpx;
+                background-color: rgba($color: #ffffff, $alpha: 1);
+                // overflow: hidden;
+                .node_img{
+                    border:3rpx solid slategrey;
+                    border-radius: 15rpx;
+                    height: 160rpx;
+                    width: 160rpx;
+                    position: absolute;
+                    left: 20rpx;
+                    top: 20rpx;
+                }
+                .node_date{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 170rpx;
+                    background-color: rgba(150, 145, 138, 0.5);
+                    position: absolute;
+                    left:200rpx;
+                    top:20rpx;
+                    // padding: 4rpx 0rpx 6rpx 10rpx;
+                    padding-left: 10rpx;
+                    display: flex;
+                    align-items: center;
+                    // justify-content: center;
+                    border-radius: 15rpx;
+                }
+                .node_scores{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 135rpx;
+                    background-color:  rgba(150, 145, 138, 0.5);
+                    position: absolute;
+                    left:399rpx;
+                    top:20rpx;
+                    // padding: 4rpx 0rpx 6rpx 10rpx;
+                    padding-left: 10rpx;
+                    display: flex;
+                    align-items: center;
+                    // justify-content: center;
+                    border-radius: 15rpx;
+                }
+                .node_risk{
+                    font-size: 31rpx;
+                    height:50rpx;
+                    width: 120rpx;
+                    position: absolute;
+                    left:560rpx;
+                    top:20rpx;
+                    // padding: 0rpx 6rpx 6rpx 13rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 15rpx;
+                    overflow: hidden;
+                }
+                .node_remark{
+                    height: 40%;
+                    width: 460rpx;
+                    background-color: tan;
+                    position: absolute;
+                    left:200rpx;
+                    bottom:20rpx;
+                    padding: 5rpx 10rpx 10rpx 10rpx;
+                    border-radius: 15rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 60rpx;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+
+
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    
+    // .collect2{
+    //     background-color: rgba($color: #ffffff, $alpha: 1);
+    //     height: 170rpx;
+    //     width: 25%;
+    // }
+    // #page_collect_back{
+    //     height: 90rpx;
+    //     width: 90rpx;
+    //     position: absolute;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: center;
+    //     // background-color: aquamarine;
+    //     top: 65rpx;
+    //     left:70rpx;
+    //     // font-size: 150rpx;
+    //     // font-weight: 900;
+    //     // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    // }
 }
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts
index 434c5d2..c065fbd 100644
--- a/miniprogram/pages/index/index.ts
+++ b/miniprogram/pages/index/index.ts
@@ -3,18 +3,25 @@
 
 const app = getApp<IAppOption>()
 
+// class stack{
+//     data=[]
+//     push=(d: any) =>{
+//         this.data.push(d);
+//     }
+// }
+
 Page({
     ctx:wx.createCameraContext(),
     data: {
-        motto: 'Hello World',
+        // motto: 'Hello World',
         text_startPage1: "知识库",
-        text_startPage4: "个性化",
         imgUrl_startPage1:"./static/icons/lib.svg",
-        function_startPage1:"",
+        function_startPage1:"popup_lib",
         imgUrl_startPage2:"./static/icons/history.svg",
         function_startPage2:"popup_history",
         imgUrl_startPage3:"./static/icons/heart.svg",
         function_startPage3:"popup_collect",
+        text_startPage4: "个性化",
         imgUrl_startPage4:"./static/icons/self.svg",
         tip_content: "不吃饭会饿死",
         tip_hidden: false,
@@ -31,11 +38,78 @@ Page({
             "2023.2.36":["test9","test0"],
             "2023.12.37":["test9","test0"],
         },
-        // userInfo: {},
-        // hasUserInfo: false,
-        // canIUse: wx.canIUse('button.open-type.getUserInfo'),
-        // canIUseGetUserProfile: false,
-        // canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
+        data_collect_test:[
+            {   "date":"2023.15.16",
+                "scores":"99",
+                "imgUrl":"./static/icons/history.svg",
+                "remark":"方师傅康便面",
+                "riskBgColor":"springgreen",
+                "riskStr":"低风险"
+            },
+            {   "date":"2023.5.6",
+                "scores":"1",
+                "imgUrl":"./static/icons/history.svg",
+                "remark":"一二三四五六七",
+                "riskBgColor":"tomato",
+                "riskStr":"高风险"
+            },
+            {   "date":"2023.5.6",
+                "scores":"100",
+                "imgUrl":"./static/icons/history.svg",
+                "remark":"一二三四五六七",
+                "riskBgColor":"tomato",
+                "riskStr":"高风险"
+            },
+            {   "date":"2023.15.16",
+                "scores":"99",
+                "imgUrl":"./static/icons/history.svg",
+                "remark":"方师傅康便面",
+                "riskBgColor":"springgreen",
+                "riskStr":"低风险"
+            },
+            {   "date":"2023.5.6",
+                "scores":"1",
+                "imgUrl":"./static/icons/history.svg",
+                "remark":"一二三四五六七",
+                "riskBgColor":"tomato",
+                "riskStr":"高风险"
+            },
+            {   "date":"2023.5.6",
+                "scores":"100",
+                "imgUrl":"./static/icons/history.svg",
+                "remark":"一二三四五六七",
+                "riskBgColor":"tomato",
+                "riskStr":"高风险"
+            },
+        ],
+        data_lib_test:[
+            {
+                name:{
+                    zh:"山梨酸钾",
+                    en:"potassium sorbate"
+                },
+                scores:73,
+                info:"山梨酸钾，又名2，4-己二烯酸钾，是山梨酸的钾盐，分子式为C6H7O2K，无色或白色鳞片状结晶或结晶性粉末。 [1] 无臭或微有臭味，长期暴露在空气中易吸潮、被氧化分解而变色。易溶于水（67.6g／100mL 20℃），溶于丙二醇（5．8g／100mL）和乙醇（0．3g／10 mL）。山梨酸钾和山梨酸是常用的有机防腐剂，广泛用于食品、化状品、饲料的防腐。易于被人体吸收代谢，在体内无残留，无毒性。",
+                risk:[],
+                "riskBgColor":"springgreen",
+                "riskStr":"低风险"
+            },{
+                name:{
+                    zh:"丁基羟基茴香醚",
+                    en:"Butyl hydroxyanisole（BHA）"
+                },
+                scores:21,
+                info:"丁基羟基茴香醚（BHA），又名叔丁基-4-羟基茴香醚，化学式为C11H16O2，有两种异构体：3-BHA和2-BHA，一般指二者的混合物。2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，叔丁基对羟基茴香醚（BHA）在2B类致癌物清单中。",
+                risk:["2B类致癌物"],
+                "riskBgColor":"tomato",
+                "riskStr":"高风险"
+            }
+        ],
+        userInfo: {},
+        hasUserInfo: false,
+        canIUse: wx.canIUse('button.open-type.getUserInfo'),
+        canIUseGetUserProfile: false,
+        canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
     },
     onLoad() {
         // @ts-ignore
@@ -169,6 +243,22 @@ Page({
         ], 1000)
     },
 
+    popup_lib(){
+        this.startPage_Bottons_leave()
+        this.animate('#page_lib', [
+            { opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
+        ], 1000,()=>{
+            this.selectComponent('#page_collect')
+        })
+    },
+
+    exit_lib(){
+        this.startPage_Bottons_in()
+        this.animate('#page_lib', [
+            { opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
+        ], 1000)
+    },
+
     takePhoto() {
         // ctx = wx.createCameraContext()
         console.log('takePhoto..')
@@ -182,6 +272,33 @@ Page({
         })
     },
 
+    scores2risk(scores: Number){
+        if(scores < 33){
+            return "high";
+        }else if(scores < 66){
+            return "middle";
+        }else{
+            return "low";
+        }
+    },
+
+    //将risk转为存储color和content的map
+    scores2map(scores: Number){
+        var risk=this.scores2risk(scores)
+        switch(risk){
+            case "low":{
+                return {"color":"springgreen","content":"低风险"};
+            }
+            case "middle":{
+                return {"color":"yellow","content":"中风险"};
+            }
+            case "high":{
+                return {"color":"tomato","content":"高风险"};
+            }
+        }
+        return {"color":"tomato","content":"高风险"};
+    },
+
 
 
     // 事件处理函数
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index 565d342..fc3bd0f 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -8,7 +8,7 @@
             <image src="./static/icons/camera.svg" mode="'aspectFit'" style="height: 180rpx;width: 180rpx;margin-right:50rpx;" />
             <view class="text_startPage">立即搜索</view>
         </view>
-        <view class='buttom_startPage' id="buttom_startPage1">
+        <view class='buttom_startPage' id="buttom_startPage1" bind:tap="{{function_startPage1}}">
             <image src="{{imgUrl_startPage1}}" mode="'aspectFit'" style="height: 100rpx;width: 100rpx;margin-right:30rpx;" />
             <view class="text_startPage">{{text_startPage1}}</view>
         </view>
@@ -48,8 +48,26 @@
 
     <!-- 知识库界面 -->
     <view id="page_lib" class="miao_page">
-        <view class="title">nmsl</view>
-        <view class="serach">serach</view>
+        <view class="title">
+            <view>知识库</view>
+            <view class="page_back" bind:tap="exit_lib">
+                <image src="./static/icons/back.svg" mode="aspectFit" />
+            </view>
+        </view>
+        <view class="content">
+            <view wx:for="{{ data_lib_test }}" wx:for-item="n">
+                <view class="node" style="background-color: {{ n.riskBgColor }};">
+                    <view class="node_content">
+                        <view class="node_name">{{ n.name.zh }}</view>
+                        <!-- <image class="node_img" src="{{ n.imgUrl }}" mode="'aspectFit'"/> -->
+                        <view class="node_safe" wx:if="{{ n.scores > 66 }}"><view>安全</view></view>
+                        <view class="node_danger" wx:if="{{ n.scores < 33 }}"><view>危险</view></view>
+                        <view class="node_scores">评分: {{ n.scores }}</view>
+                        <view class="node_risk" style="background-color: {{ n.riskBgColor }};">{{ n.riskStr }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
     </view>
 
     <!-- 历史记录界面 -->
@@ -85,8 +103,19 @@
                 <image src="./static/icons/back.svg" mode="aspectFit" />
             </view>
         </view>
-        <view class="collect1">收藏1</view>
-        <view class="collect2">收藏2</view>
+        <view class="content">
+            <view wx:for="{{ data_collect_test }}" wx:for-item="n">
+                <view class="node" style="background-color: {{ n.riskBgColor }};">
+                    <view class="node_content">
+                        <view class="node_date">{{ n.date }}</view>
+                        <image class="node_img" src="{{ n.imgUrl }}" mode="'aspectFit'"/>
+                        <view class="node_scores">评分: {{ n.scores }}</view>
+                        <view class="node_risk" style="background-color: {{ n.riskBgColor }};">{{ n.riskStr }}</view>
+                        <view class="node_remark">{{ n.remark }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
     </view>
 
 </view>
\ No newline at end of file