diff --git a/src/app.config.ts b/src/app.config.ts
index 5f179da..05e474e 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -16,11 +16,15 @@ export default {
     list: [
       {
         pagePath: 'pages/index/index',
-        text: '首页'
+        text: '首页',
+        iconPath: './styles/tabbar/home.png',
+        selectedIconPath: './styles/tabbar/home_selected.png',
       },
       {
         pagePath: 'pages/user/index',
-        text: '我的'
+        text: '我的',
+        iconPath: './styles/tabbar/my.png',
+        selectedIconPath: './styles/tabbar/my_selected.png',
       }
     ],
     'color': '#707070',
diff --git a/src/common/common.ts b/src/common/common.ts
new file mode 100644
index 0000000..e92f7c6
--- /dev/null
+++ b/src/common/common.ts
@@ -0,0 +1,8 @@
+import Taro from "@tarojs/taro"
+
+export const goLink = (path?:string, params?:Object) => {
+    Taro.navigateTo({
+        url: '/pages/search/index'
+    })
+  
+}
\ No newline at end of file
diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx
index d5889ae..cf6421a 100644
--- a/src/components/product/index.tsx
+++ b/src/components/product/index.tsx
@@ -1,15 +1,20 @@
 import { Image, View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
 import styles  from './index.module.scss'
 
 type params = {
     desStatus?: true|false
 }
 export default ({desStatus = true}: params) => {
-
+    const goLink = () => {
+        Taro.navigateTo({
+            url: '/pages/details/index?id=1'
+        })
+    }
     return (
         <View className={styles.products_list}>
             {new Array(10).fill('').map(item => {
-                return <View className={styles.products_item}>
+                return <View className={styles.products_item} onClick={() => goLink()}>
                     <View className={styles.item_img}>
                         <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
                         <View className={styles.num}>230色</View>
diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss
index 6750c4e..4d6405b 100644
--- a/src/components/shopCart/index.module.scss
+++ b/src/components/shopCart/index.module.scss
@@ -144,6 +144,8 @@
         bottom: 0;
         display: flex;
         justify-content: center;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
         .buy_con{
             width: 702px;
             height: 95px;
diff --git a/src/pages/details/components/preview/index.module.scss b/src/pages/details/components/preview/index.module.scss
new file mode 100644
index 0000000..5b57efc
--- /dev/null
+++ b/src/pages/details/components/preview/index.module.scss
@@ -0,0 +1,36 @@
+.main{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    .con{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        margin-top: 200px;
+        image{
+            width:100%;
+            border-radius: 10px;
+        }
+        .name {
+            width: 488px;
+            height: 72px;
+            color: #fff;
+            text-align: center;
+            font-size: 26px;
+            border-radius: 20px;
+            line-height: 72px;
+            margin-top: 10px;
+            background-color: rgba(0,0,0, 0.5);
+            padding: 0 10px;
+            @include common_ellipsis
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/details/components/preview/index.tsx b/src/pages/details/components/preview/index.tsx
new file mode 100644
index 0000000..8b3488a
--- /dev/null
+++ b/src/pages/details/components/preview/index.tsx
@@ -0,0 +1,24 @@
+import { Image, View } from "@tarojs/components"
+import styles from './index.module.scss'
+
+export type colorItem = {
+    title: string,
+    img: string
+}
+export type colorParams = {
+    value?: colorItem,
+    show?: false|true
+    onClose?: () => void
+}
+export default ({value, show = false, onClose}: colorParams) => {
+    return (
+        <>
+            {show&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
+                <View className={styles.con}>
+                    <Image mode="aspectFill" src={value?.img as string}/>
+                    <View className={styles.name}>{value?.title}</View>
+                </View>
+            </View>}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/details/components/shopCart/index.module.scss b/src/pages/details/components/shopCart/index.module.scss
index cad68f2..25fef03 100644
--- a/src/pages/details/components/shopCart/index.module.scss
+++ b/src/pages/details/components/shopCart/index.module.scss
@@ -67,13 +67,11 @@
         }
     }
     .product_color_con{
-        
         flex:1;
         height: 0;
         padding-bottom:151px;
     }
     .color_con{
-        
         .item {
             display: flex;
             justify-content: space-between;
@@ -130,6 +128,15 @@
             }
         }
     }
+    .noData{
+        width:100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: $color_font_three;
+        font-size: $font_size_medium;
+    }
     .buy_btn{
         width: 100%;
         padding: 0 40px;
@@ -156,6 +163,9 @@
             line-height: 90px;
             border-radius: 50px;
             color: #fff;
+            background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%);
+        }
+        .select_add_cart{
             background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
         }
     }
diff --git a/src/pages/details/components/shopCart/index.tsx b/src/pages/details/components/shopCart/index.tsx
index ac38566..c0a258f 100644
--- a/src/pages/details/components/shopCart/index.tsx
+++ b/src/pages/details/components/shopCart/index.tsx
@@ -7,13 +7,13 @@ import Counter from "../counter";
 import Big from 'big.js'
 import classnames from "classnames";
 import styles from "./index.module.scss"
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 
 type param = {
     show?: true|false,
     onClose?: () => void
 }
-export default ({show = false, onClose}: param) => {
+export default memo(({show = false, onClose}: param) => {
     const selectList = [
         {step:1,  digits:2, title:'剪板', unit:'米'}, 
         {step:1,  digits:2, title:'散剪', unit:'米'}, 
@@ -27,6 +27,8 @@ export default ({show = false, onClose}: param) => {
     const [list, setList] = useState<any[]>([])
     const [loading, setLoading] = useState(false)
 
+    console.log('执行执行')
+
     useEffect(() => {
         let lists:any[] = []
         for(let i = 0; i < 20; i++) {
@@ -114,7 +116,7 @@ export default ({show = false, onClose}: param) => {
                         <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
                     </View>
                     <View className={styles.product_color_con}>
-                        <InfiniteScroll>
+                        {list.length > 0&&<InfiniteScroll>
                             <View className={styles.color_con}>
                                 {list.map(item => {
                                     return <View className={styles.item}>
@@ -141,12 +143,13 @@ export default ({show = false, onClose}: param) => {
                                     </View>
                                 })}
                             </View>
-                        </InfiniteScroll>
+                        </InfiniteScroll>||
+                        <View className={styles.noData}>暂无此商品</View>}
                     </View>
                     <View className={styles.buy_btn}>
                         <View className={styles.buy_btn_con}>
                             <View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
-                            <View className={styles.add_cart}>加入购物车</View>
+                            <View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
                         </View>
                     </View>
                 </View>
@@ -154,4 +157,4 @@ export default ({show = false, onClose}: param) => {
             </Popup>
         </View>
     )
-}
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss
index 518418e..371cbe5 100644
--- a/src/pages/details/index.module.scss
+++ b/src/pages/details/index.module.scss
@@ -30,10 +30,14 @@
             color: $color_font_three;
             .text{
                 margin-top: 10px;
+                font-size: $font_size_medium;
             }
         }
         .miconfont{
-            font-size: 27px;
+            font-size: 36px;
+        }
+        .collected{
+            color: #FFC300;
         }
     }
     .des_data{
@@ -66,7 +70,7 @@
         .list{
             margin-top: 30px;
             display: grid;
-            grid-template-columns: auto auto auto ;
+            grid-template-columns: 210px 210px 210px ;
             justify-content: space-between;
             .item {
                 width:210px;
@@ -76,6 +80,11 @@
                     height: 210px;
                     background-color: red;
                     border-radius: 20px;
+                    image{
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 20px;
+                    }
                 }
                 .item_name{
                     text-align: center;
diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx
index a5b41ea..aff6d1e 100644
--- a/src/pages/details/index.tsx
+++ b/src/pages/details/index.tsx
@@ -5,8 +5,9 @@ import classnames from "classnames";
 import DesSwiper from './components/swiper';
 import OrderCount from './components/shopCart';
 import ShopCart from '@/components/shopCart';
+import Preview,{colorItem} from './components/preview';
 import styles  from './index.module.scss'
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 type item = {title:string, img:string, url:string, id:number}
 
 type params = {
@@ -32,12 +33,53 @@ export default (props:params) => {
   ]
 
   const [showCart, setShowCart] = useState(false)
-  const [showOrderCount, setShowOrderCount] = useState(true)
+
+
+
+  const [showOrderCount, setShowOrderCount] = useState(false)
+  // const showCartmemo = useMemo(() => {
+  //   return showCart
+  // },[showCart])
 
   const html = `<h1>这里是详情</h1>
     <div style="font-size:13px">你好啊啊</div>
     <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
   `
+
+  const colorList = [
+    {
+        title:'#1', 
+        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
+        url:'', 
+        id:1
+    },
+    {
+        title:'#1', 
+        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
+        url:'', 
+        id:1
+    },
+   
+  ]
+  const [colorInfo, setColorInfo] = useState<colorItem>()
+  const [showPreview, setShowPreview] = useState(false)
+  const getColorItem = (item) => {
+    setColorInfo({
+      title: item.title,
+      img: item.img,
+    })
+    setShowPreview(true)
+  }
+
+  const [collectStatus, setCollectStatus] = useState(false)
+  const changeCollect = () => {
+    setCollectStatus(!collectStatus)
+    Taro.showToast({
+      title: '收藏成功',
+      icon: 'success',
+      duration: 2000
+    })
+  }
   return (
     <View className={styles.main}>
       <DesSwiper list={list}/>
@@ -47,11 +89,11 @@ export default (props:params) => {
           <View className={styles.des}>面料描述，疯狂描述。。。</View>
         </View>
         <View className={styles.share}>
-          <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
+          <View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
           <View className={styles.text}>分享</View>
         </View>
         <View className={styles.collect}>
-          <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
+          <View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
           <View className={styles.text}>收藏</View>
         </View>
       </View>
@@ -67,12 +109,12 @@ export default (props:params) => {
       <View className={styles.product_color}>
         <View className={styles.title}>色号 (10)</View>
         <View className={styles.list}>
-          {new Array(10).fill('').map(item => {
-            return <View className={styles.item}>
+          {colorList.map(item => {
+            return <View className={styles.item} onClick={() => getColorItem(item)}>
               <View className={styles.item_color}>
-                
+                <Image src={item.img}></Image>
               </View>
-              <View className={styles.item_name}>1#</View>
+              <View className={styles.item_name}>{item.title}</View>
             </View>
           })}
         </View>
@@ -81,14 +123,15 @@ export default (props:params) => {
           <RichText nodes={html}></RichText>
       </View>
       <View className={styles.product_buy}>
-        <View className={styles.buy_cart}>
+        <View className={styles.buy_cart}  onClick={() => setShowCart(true)}>
           <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
-          <View className={styles.text} onClick={() => setShowCart(true)}>购物车</View>
+          <View className={styles.text}>购物车</View>
         </View>
         <View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
       </View>
       <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
       <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
+      <Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
       <View className='common_safe_area_y'></View>
     </View>
   )
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 24e321c..9f4cc32 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -7,6 +7,7 @@ import MoveBtn from '@/components/moveBtn'
 import ShopCart from '@/components/shopCart'
 import styles  from './index.module.scss'
 import { useState } from 'react'
+import Taro from '@tarojs/taro'
 
 export default () => {
   const tabs_list = [
@@ -31,6 +32,12 @@ export default () => {
 
   const [showShopCart, setShowShopCart] = useState(false)
 
+  const goLink = () => {
+      Taro.navigateTo({
+          url: '/pages/search/index'
+      })
+  }
+
   return (
     <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
       <View className={styles.main}>
@@ -38,7 +45,7 @@ export default () => {
         <View className={styles.search}>
           <View className={styles.search_collect}>我的收藏</View>
           <View className={styles.search_input}>
-            <Search disabled={true} style={{width: '263rpx'}}/>
+            <Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink()}/>
           </View>
         </View>
         <View className={styles.products}>
diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss
index 76150e1..3fc43f6 100644
--- a/src/styles/iconfont.scss
+++ b/src/styles/iconfont.scss
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2987621 */
   src: 
-       url('iconfont.ttf?t=1649647915734') format('truetype');
+       url('iconfont.ttf?t=1649906813989') format('truetype');
 }
 
 .iconfont {
@@ -12,6 +12,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shoucang:before {
+  content: "\e63e";
+}
+
+.icon-fenxiang:before {
+  content: "\e63d";
+}
+
 .icon-cuo:before {
   content: "\e6c9";
 }
diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf
index 1e5aa46..08f4649 100644
Binary files a/src/styles/iconfont.ttf and b/src/styles/iconfont.ttf differ
diff --git a/src/styles/tabbar/home.png b/src/styles/tabbar/home.png
new file mode 100644
index 0000000..fc8b7d9
Binary files /dev/null and b/src/styles/tabbar/home.png differ
diff --git a/src/styles/tabbar/home_selected.png b/src/styles/tabbar/home_selected.png
new file mode 100644
index 0000000..6729b9e
Binary files /dev/null and b/src/styles/tabbar/home_selected.png differ
diff --git a/src/styles/tabbar/my.png b/src/styles/tabbar/my.png
new file mode 100644
index 0000000..225e22b
Binary files /dev/null and b/src/styles/tabbar/my.png differ
diff --git a/src/styles/tabbar/my_selected.png b/src/styles/tabbar/my_selected.png
new file mode 100644
index 0000000..1432d1e
Binary files /dev/null and b/src/styles/tabbar/my_selected.png differ