diff --git a/src/app.config.ts b/src/app.config.ts
index 75c4777..26a8cf1 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -206,6 +206,24 @@ export default {
         'index',
       ],
     },
+    {
+      root: 'pages/colorCard',
+      pages: [
+        'index',
+      ],
+    },
+    {
+      root: 'pages/getColorCard',
+      pages: [
+        'index',
+      ],
+    },
+    {
+      root: 'pages/colorCardOrder',
+      pages: [
+        'index',
+      ],
+    },
 
   ],
 }
diff --git a/src/common/constant.ts b/src/common/constant.ts
index 52a5e1f..dea2b0c 100644
--- a/src/common/constant.ts
+++ b/src/common/constant.ts
@@ -5,7 +5,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
 // export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
-// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
+export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
@@ -30,6 +30,7 @@ export const COLLECTION_EMPTY_IMAGE = `${IMG_CND_Prefix}/mall/collection_empty.p
 // 在线支付图片baseUrl
 export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL
 // export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081'
+
 // 获取CND资源
 export const getCDNSource = (suffix: string) => {
   return IMG_CND_Prefix + suffix
diff --git a/src/components/empty/index.module.scss b/src/components/empty/index.module.scss
index 97da4bd..d96d966 100644
--- a/src/components/empty/index.module.scss
+++ b/src/components/empty/index.module.scss
@@ -1,20 +1,20 @@
 .mainBox {
-    height: calc(100vh - 200px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 
-    .pic {
-        width: 522px;
-        height: 322px; 
-        // opacity: 0.3;
-        margin-bottom: 24px;
-    }
+  .pic {
+    width: 522px;
+    height: 322px;
+    // opacity: 0.3;
+    margin-bottom: 24px;
+  }
 
-    .text {
-        font-size: 26px;
-        color: $color_font_two;
-        font-weight: 400;
-    }
+  .text {
+    font-size: 26px;
+    color: $color_font_two;
+    font-weight: 400;
+  }
 }
diff --git a/src/components/selectAddress/index.tsx b/src/components/selectAddress/index.tsx
new file mode 100644
index 0000000..e66c545
--- /dev/null
+++ b/src/components/selectAddress/index.tsx
@@ -0,0 +1,17 @@
+import { View } from '@tarojs/components'
+import { useState } from 'react'
+import AddressList from '../AddressList'
+import styles from './index.module.scss'
+import Popup from '@/components/popup'
+
+export default () => {
+  const [showAddressList, setShowAddressList] = useState(false)
+  return <Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
+    <View className={styles.order_address_list}>
+      <View className={styles.order_address_title}>请选择收货地址</View>
+      <View className={styles.addressList_con}>
+        <AddressList />
+      </View>
+    </View>
+  </Popup>
+}
diff --git a/src/pages/colorCard/components/productItem/index.module.scss b/src/pages/colorCard/components/productItem/index.module.scss
new file mode 100644
index 0000000..e5d99ee
--- /dev/null
+++ b/src/pages/colorCard/components/productItem/index.module.scss
@@ -0,0 +1,78 @@
+.list_item {
+  padding: 0 24px;
+  margin-top: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 16px;
+  .item_header {
+    height: 82px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #000000ff;
+    font-size: 28px;
+    font-weight: 500;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    text {
+      &:nth-child(2) {
+        color: #0d7cffff;
+      }
+    }
+  }
+  .item_con {
+    display: flex;
+    padding: 24px 0;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    .image {
+      width: 134px;
+      height: 134px;
+    }
+    .item_con_desc {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      font-size: 28px;
+      .item_con_name {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding-left: 24px;
+        box-sizing: border-box;
+      }
+      .item_con_count {
+        text-align: right;
+        color: rgba(0, 0, 0, 0.6);
+      }
+    }
+  }
+  .card_info {
+    font-size: 24px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 16px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+  .express {
+    color: #f64861ff;
+    font-size: 28px;
+    text-align: right;
+    margin-top: 16px;
+  }
+  .btns {
+    padding: 16px 0;
+    display: flex;
+    justify-content: flex-end;
+    text {
+      display: inline-block;
+      width: 195px;
+      height: 72px;
+      border-radius: 40px;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      text-align: center;
+      line-height: 72px;
+    }
+  }
+}
diff --git a/src/pages/colorCard/components/productItem/index.tsx b/src/pages/colorCard/components/productItem/index.tsx
new file mode 100644
index 0000000..48b1f1d
--- /dev/null
+++ b/src/pages/colorCard/components/productItem/index.tsx
@@ -0,0 +1,32 @@
+import { Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+import LabAndImg from '@/components/LabAndImg'
+
+export default () => {
+  return <View className={styles.list_item}>
+    <View className={styles.item_header}>
+      <Text>单号：XS-LY-2208220092</Text>
+      <Text>申请中</Text>
+    </View>
+    <View className={styles.item_con}>
+      <View className={styles.image}>
+        <LabAndImg value={{}} showStatus={false} />
+      </View>
+
+      <View className={styles.item_con_desc}>
+        <View className={styles.item_con_name}>
+          <Text>9265# 26S全棉双卫衣</Text>
+          <Text>物流</Text>
+        </View>
+        <Text className={styles.item_con_count}>x1本</Text>
+      </View>
+
+    </View>
+    <View className={styles.card_info}>
+      <Text>色卡信息:</Text>
+      <Text>3 种色卡，共 3 本</Text>
+    </View>
+    <View className={styles.express}>快递到付</View>
+    <View className={styles.btns}><Text>取消订单</Text></View>
+  </View>
+}
diff --git a/src/pages/colorCard/index.config.ts b/src/pages/colorCard/index.config.ts
new file mode 100644
index 0000000..546f8f7
--- /dev/null
+++ b/src/pages/colorCard/index.config.ts
@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '色卡剪样',
+  enableShareAppMessage: true,
+}
diff --git a/src/pages/colorCard/index.module.scss b/src/pages/colorCard/index.module.scss
new file mode 100644
index 0000000..6600ab7
--- /dev/null
+++ b/src/pages/colorCard/index.module.scss
@@ -0,0 +1,73 @@
+.main {
+  min-height: 100vh;
+  background-color: #f7f7f7ff;
+  display: flex;
+  flex-direction: column;
+  .btn_list {
+    height: 116px;
+    background: #ffffff;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24px;
+    .btn_item {
+      width: 224px;
+      height: 68px;
+      text-align: center;
+      line-height: 68px;
+      font-size: 28px;
+      border-radius: 68px;
+      background-color: #e9e9e9ff;
+      color: rgba(0, 0, 0, 0.6);
+      box-sizing: border-box;
+    }
+    .select_ed {
+      background-color: #337fff1a;
+      border: 1px solid #337fffff;
+      color: #337fffff;
+    }
+  }
+  .con {
+    height: calc(100vh - 376px);
+    display: flex;
+    .kong_image {
+      width: 410px;
+      height: 268px;
+      text-align: center;
+      image {
+        width: 100%;
+        height: 100%;
+        margin-bottom: 37px;
+      }
+      text {
+        font-size: 28px;
+        color: rgba(0, 0, 0, 0.4);
+      }
+    }
+    .con_list {
+      width: 100%;
+      padding: 0 24px;
+    }
+  }
+  .get_card_btn {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px 24px 66px 24px;
+    box-sizing: border-box;
+    background-color: #fff;
+    box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
+    text {
+      display: inline-block;
+      width: 702px;
+      height: 80px;
+      background: #4581ff;
+      border-radius: 40px;
+      color: #fff;
+      text-align: center;
+      line-height: 80px;
+    }
+  }
+}
diff --git a/src/pages/colorCard/index.tsx b/src/pages/colorCard/index.tsx
new file mode 100644
index 0000000..40ab910
--- /dev/null
+++ b/src/pages/colorCard/index.tsx
@@ -0,0 +1,62 @@
+import { Image, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useRef, useState } from 'react'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+import ProductItem from './components/productItem'
+import SelectList from '@/components/selectList'
+import kong from '@/styles/image/kong.png'
+import LabAndImg from '@/components/LabAndImg'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { goLink } from '@/common/common'
+
+export default () => {
+  const [selectIndex, setSelectIndex] = useState(1)
+  const selectList = [
+    { value: 1, label: '色卡记录' },
+    { value: 2, label: '剪样记录' },
+  ]
+
+  const [statusIndex, setStatusIndex] = useState(1)
+  const selectStatus = [
+    { value: 1, label: '全部记录' },
+    { value: 2, label: '申请中' },
+    { value: 3, label: '已完成' },
+  ]
+
+  const changeStatus = (index: number) => {
+    setStatusIndex(index)
+  }
+  return <View className={styles.main}>
+    <SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />
+    <View className={styles.btn_list}>
+      {selectStatus.map(item => <View key={item.value} onClick={() => changeStatus(item.value)} className={classNames(styles.btn_item, statusIndex === item.value && styles.select_ed)}>{item.label}</View>)}
+    </View>
+    <View className={styles.con}>
+      {false && <View className={styles.kong_image}>
+        <Image src={kong}></Image>
+        <Text>还没有领取过色卡</Text>
+      </View>}
+      <View className={styles.con_list}>
+        <InfiniteScroll
+          statusMore={2}
+          refresherEnabled
+          // selfonScrollToLower={getScrolltolower}
+          // refresherTriggered={refresherTriggeredStatus}
+          // selfOnRefresherRefresh={getRefresherRefresh}
+        >
+          {new Array(10).fill('').map((item) => {
+            return (
+              <View key={item.id} className={styles.order_item_con}>
+                <ProductItem />
+              </View>
+            )
+          })}
+        </InfiniteScroll>
+      </View>
+    </View>
+    <View className={styles.get_card_btn} onClick={() => goLink('/pages/getColorCard/index')}>
+      <Text>领取色卡</Text>
+    </View>
+  </View>
+}
diff --git a/src/pages/colorCardOrder/components/address/index.module.scss b/src/pages/colorCardOrder/components/address/index.module.scss
new file mode 100644
index 0000000..ed1e78e
--- /dev/null
+++ b/src/pages/colorCardOrder/components/address/index.module.scss
@@ -0,0 +1,39 @@
+.address_con {
+  display: flex;
+  padding: 32px;
+  background-color: #ffffffff;
+  border-radius: 16px;
+  .message {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-left: 24px;
+    .info_address {
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding-bottom: 16px;
+      .address_name {
+        color: rgba(0, 0, 0, 0.8);
+        width: 461px;
+      }
+    }
+    .info_phone {
+      display: flex;
+      padding-top: 32px;
+      justify-content: space-between;
+      font-size: 28px;
+      color: rgba(0, 0, 0, 0.8);
+      text {
+        display: flex;
+        align-items: center;
+        &:nth-child(2) {
+          color: #337fffff;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/colorCardOrder/components/address/index.tsx b/src/pages/colorCardOrder/components/address/index.tsx
new file mode 100644
index 0000000..a9ead27
--- /dev/null
+++ b/src/pages/colorCardOrder/components/address/index.tsx
@@ -0,0 +1,44 @@
+import { Text, View } from '@tarojs/components'
+import { useState } from 'react'
+import styles from './index.module.scss'
+import IconFont from '@/components/iconfont/iconfont'
+import AddressList from '@/components/AddressList'
+import Popup from '@/components/popup'
+
+interface Param {
+  address_title: string
+  address_name: string
+  address_phone: string
+  address_mode: string
+}
+export default (props: Param) => {
+  const {
+    address_title = '广东省佛山市禅城区南庄镇吉利大道872巷备份',
+    address_name = '谭先生',
+    address_phone = '13334726540',
+    address_mode = '物流',
+  } = props
+
+  const [showList, setShowList] = useState(true)
+  return <View className={styles.address_con}>
+    <IconFont name="icon-dizhiguanli" size={50} />
+    <View className={styles.message}>
+      <View className={styles.info_address}>
+        <View className={styles.address_name}>{address_title}</View>
+        <IconFont name="icon-rukou" color="#979797FF" />
+      </View>
+      <View className={styles.info_phone}>
+        <Text>{address_name + address_phone}</Text>
+        <Text>{address_mode}</Text>
+      </View>
+    </View>
+    <Popup show={showList} showTitle={false} onClose={() => setShowList(false)}>
+      <View className={styles.order_address_list}>
+        <View className={styles.order_address_title}>请选择收货地址</View>
+        <View className={styles.addressList_con}>
+          <AddressList />
+        </View>
+      </View>
+    </Popup>
+  </View>
+}
diff --git a/src/pages/colorCardOrder/components/productCard/index.module.scss b/src/pages/colorCardOrder/components/productCard/index.module.scss
new file mode 100644
index 0000000..cd603cf
--- /dev/null
+++ b/src/pages/colorCardOrder/components/productCard/index.module.scss
@@ -0,0 +1,51 @@
+.card_con {
+  background-color: #ffffff;
+  padding: 0 24px;
+  margin-top: 24px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  .card_header {
+    height: 82px;
+    font-size: 28px;
+    color: rgba(0, 0, 0, 0.8);
+    font-weight: 500;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    line-height: 82px;
+  }
+  .card_list {
+    .card_item {
+      height: 140px;
+      display: flex;
+      padding-top: 24px;
+      color: rgba(0, 0, 0, 0.8);
+
+      .img {
+        width: 108px;
+        height: 108px;
+      }
+      .name_count {
+        width: 100%;
+        margin-left: 42px;
+        flex: 1;
+        font-size: 28px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        .btns {
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+        }
+        .count_btn {
+          margin-top: 27px;
+          width: 170px;
+        }
+      }
+    }
+    .express_btn {
+      font-size: 28px;
+      color: #f64861;
+      width: 100%;
+      text-align: right;
+      padding: 32px 0 24px 0;
+    }
+  }
+}
diff --git a/src/pages/colorCardOrder/components/productCard/index.tsx b/src/pages/colorCardOrder/components/productCard/index.tsx
new file mode 100644
index 0000000..68a6b4f
--- /dev/null
+++ b/src/pages/colorCardOrder/components/productCard/index.tsx
@@ -0,0 +1,49 @@
+import { Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+import Counter from '@/components/counter'
+import LabAndImg from '@/components/LabAndImg'
+
+export default () => {
+  return <View className={styles.card_con}>
+    <View className={styles.card_header}>色卡信息</View>
+    <View className={styles.card_list}>
+      <View className={styles.card_item}>
+        <View className={styles.img}><LabAndImg value={{}} /></View>
+        <View className={styles.name_count}>
+          <Text>秋季平纹卫衣(食毛)系列</Text>
+          <View className={styles.btns}>
+            <View className={styles.count_btn}>
+              <Counter
+                minNum={1}
+                maxNum={2}
+                defaultNum={1}
+                unit="米"
+                returnZero
+              />
+            </View>
+          </View>
+
+        </View>
+      </View>
+      <View className={styles.card_item}>
+        <View className={styles.img}><LabAndImg value={{}} /></View>
+        <View className={styles.name_count}>
+          <Text>秋季平纹卫衣(食毛)系列</Text>
+          <View className={styles.btns}>
+            <View className={styles.count_btn}>
+              <Counter
+                minNum={1}
+                maxNum={2}
+                defaultNum={1}
+                unit="米"
+                returnZero
+              />
+            </View>
+          </View>
+
+        </View>
+      </View>
+      <View className={styles.express_btn}>快递到付</View>
+    </View>
+  </View>
+}
diff --git a/src/pages/colorCardOrder/components/remark/index.module.scss b/src/pages/colorCardOrder/components/remark/index.module.scss
new file mode 100644
index 0000000..2d34c54
--- /dev/null
+++ b/src/pages/colorCardOrder/components/remark/index.module.scss
@@ -0,0 +1,25 @@
+.remarks {
+  height: 165px;
+  background: #ffffff;
+  border-radius: 16px;
+  margin-top: 24px;
+  padding: 0 32px;
+  font-size: 28px;
+  .remarks_header {
+    display: flex;
+    height: 80px;
+    line-height: 80px;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    text {
+      &:nth-child(2) {
+        color: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+  .remarks_message {
+    height: 82px;
+    line-height: 82px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
diff --git a/src/pages/colorCardOrder/components/remark/index.tsx b/src/pages/colorCardOrder/components/remark/index.tsx
new file mode 100644
index 0000000..6571567
--- /dev/null
+++ b/src/pages/colorCardOrder/components/remark/index.tsx
@@ -0,0 +1,14 @@
+import { Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+
+export default () => {
+  return <View className={styles.remarks}>
+    <View className={styles.remarks_header}>
+      <Text>备注信息</Text>
+      <Text>填写/修改备注</Text>
+    </View>
+    <View className={styles.remarks_message}>
+      <Text>尚未备注信息</Text>
+    </View>
+  </View>
+}
diff --git a/src/pages/colorCardOrder/index.config.ts b/src/pages/colorCardOrder/index.config.ts
new file mode 100644
index 0000000..b6f5435
--- /dev/null
+++ b/src/pages/colorCardOrder/index.config.ts
@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '领取色卡',
+  enableShareAppMessage: true,
+}
diff --git a/src/pages/colorCardOrder/index.module.scss b/src/pages/colorCardOrder/index.module.scss
new file mode 100644
index 0000000..0834df3
--- /dev/null
+++ b/src/pages/colorCardOrder/index.module.scss
@@ -0,0 +1,50 @@
+.main {
+  min-height: 100vh;
+  background-color: #f7f7f7ff;
+  padding: 24px;
+  .add_card_btn {
+    height: 82px;
+    background: #ffffff;
+    border-radius: 16px;
+    border: 1px solid #337fff;
+    text-align: center;
+    line-height: 82px;
+    color: #337fff;
+    margin-top: 24px;
+  }
+
+  .order_btn {
+    position: fixed;
+    height: 162px;
+    background: #ffffff;
+    box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    padding: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    .btn_con {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100px;
+    }
+    text {
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.4);
+      margin-left: 15px;
+    }
+    .btn {
+      width: 293px;
+      height: 80px;
+      background: #4581ff;
+      border-radius: 40px;
+      text-align: center;
+      line-height: 80px;
+      color: #fff;
+    }
+  }
+}
diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx
new file mode 100644
index 0000000..37e6b2c
--- /dev/null
+++ b/src/pages/colorCardOrder/index.tsx
@@ -0,0 +1,20 @@
+import { Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+import Address from './components/address'
+import ProductCard from './components/productCard'
+import Remark from './components/remark'
+
+export default () => {
+  return <View className={styles.main}>
+    <Address />
+    <View className={styles.add_card_btn}>添加色卡</View>
+    <ProductCard />
+    <Remark />
+    <View className={styles.order_btn}>
+      <View className={styles.btn_con}>
+        <Text>当前共 1 种色卡, 共 3 本</Text>
+        <View className={styles.btn}>提交订单</View>
+      </View>
+    </View>
+  </View>
+}
diff --git a/src/pages/getColorCard/components/productItem/index.module.scss b/src/pages/getColorCard/components/productItem/index.module.scss
new file mode 100644
index 0000000..6dc5f36
--- /dev/null
+++ b/src/pages/getColorCard/components/productItem/index.module.scss
@@ -0,0 +1,37 @@
+.get_card_item {
+  padding: 24px 16px;
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  .image {
+    width: 144px;
+    height: 144px;
+  }
+  .card_info {
+    margin-left: 24px;
+    flex: 1;
+    .card_info_name {
+      font-size: 28px;
+      color: rgba(0, 0, 0, 0.8);
+    }
+    .card_info_label {
+      display: grid;
+      grid-template-columns: repeat(3, 85px);
+      grid-gap: 10px 10px;
+      margin-top: 10px;
+      text {
+        font-size: 24px;
+        color: #4581ff;
+        width: 85px;
+        height: 34px;
+        text-align: center;
+        line-height: 34px;
+        background-color: rgba(69, 129, 255, 0.15);
+        border-radius: 8px;
+      }
+    }
+  }
+  .checkBox {
+    display: flex;
+    align-items: center;
+  }
+}
diff --git a/src/pages/getColorCard/components/productItem/index.tsx b/src/pages/getColorCard/components/productItem/index.tsx
new file mode 100644
index 0000000..e16ac62
--- /dev/null
+++ b/src/pages/getColorCard/components/productItem/index.tsx
@@ -0,0 +1,29 @@
+import { Text, View } from '@tarojs/components'
+import { useState } from 'react'
+import styles from './index.module.scss'
+import LabAndImg from '@/components/LabAndImg'
+import Checkbox from '@/components/checkbox'
+
+export default () => {
+  const [checkStatus, setCheckStatus] = useState(false)
+  const changeSelect = () => {
+    setCheckStatus(!checkStatus)
+  }
+  return <View className={styles.get_card_item} onClick={changeSelect}>
+    <View className={styles.image}>
+      <LabAndImg value={{}} />
+    </View>
+    <View className={styles.card_info}>
+      <View className={styles.card_info_name}>冬季平纹卫衣(食毛)系列</View>
+      <View className={styles.card_info_label}>
+        <Text>0042</Text>
+        <Text>0042</Text>
+        <Text>0042</Text>
+        <Text>0042</Text>
+      </View>
+    </View>
+    <View className={styles.checkBox}>
+      <Checkbox status={checkStatus} onSelect={() => setCheckStatus(true)} onClose={() => setCheckStatus(false)} />
+    </View>
+  </View>
+}
diff --git a/src/pages/getColorCard/index.config.ts b/src/pages/getColorCard/index.config.ts
new file mode 100644
index 0000000..9d45219
--- /dev/null
+++ b/src/pages/getColorCard/index.config.ts
@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '添加色卡',
+  enableShareAppMessage: true,
+}
diff --git a/src/pages/getColorCard/index.module.scss b/src/pages/getColorCard/index.module.scss
new file mode 100644
index 0000000..a1e763e
--- /dev/null
+++ b/src/pages/getColorCard/index.module.scss
@@ -0,0 +1,49 @@
+.main {
+  min-height: 100vh;
+  background-color: #f7f7f7ff;
+  display: flex;
+  flex-direction: column;
+  .search {
+    width: 100%;
+    height: 96px;
+    background-color: #fff;
+    padding: 16px 24px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    .btn_reset {
+      display: flex;
+      width: 100px;
+      font-size: 28px;
+      align-items: center;
+      justify-content: flex-end;
+      color: rgba(0, 0, 0, 0.6);
+    }
+  }
+  .get_card_con {
+    background-color: #fff;
+    box-sizing: border-box;
+    height: calc(100vh - 260px);
+    .get_card_list {
+      padding: 0 16px;
+    }
+  }
+  .get_card_btn {
+    height: 161px;
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
+    text {
+      width: 702px;
+      height: 80px;
+      background: #4581ff;
+      border-radius: 40px;
+      text-align: center;
+      line-height: 80px;
+      color: #fff;
+    }
+  }
+}
diff --git a/src/pages/getColorCard/index.tsx b/src/pages/getColorCard/index.tsx
new file mode 100644
index 0000000..45c2059
--- /dev/null
+++ b/src/pages/getColorCard/index.tsx
@@ -0,0 +1,40 @@
+import { Image, Text, View } from '@tarojs/components'
+import { useRef, useState } from 'react'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+import ProductItem from './components/productItem'
+import InfiniteScroll from '@/components/infiniteScroll'
+import Search from '@/components/search'
+
+export default () => {
+  const [search, setSearch] = useState<string>()
+  const getSearch = (con) => {
+    setSearch(con)
+  }
+  const onReset = () => {
+    setSearch('')
+  }
+  return <View className={styles.main}>
+    <View className={styles.search}>
+      <Search defaultValue={search} placeholder="请输入搜索面料/色卡" changeOnSearch={getSearch} />
+      <View className={styles.btn_reset} onClick={onReset}>取消</View>
+    </View>
+    <View className={styles.get_card_con}>
+      <InfiniteScroll
+        statusMore={2}
+        refresherEnabled
+      >
+        {new Array(10).fill('').map((item) => {
+          return (
+            <View className={styles.get_card_list} key={item.id}>
+              <ProductItem />
+            </View>
+          )
+        })}
+      </InfiniteScroll>
+    </View>
+    <View className={styles.get_card_btn} >
+      <Text>确认</Text>
+    </View>
+  </View>
+}
diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx
index d442bbc..84cee29 100644
--- a/src/pages/user/index.tsx
+++ b/src/pages/user/index.tsx
@@ -59,7 +59,8 @@ export default () => {
 
   const menuList = [
     { label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
-    // { label: '码单管理', icon: 'icon-mdgl', icon_status: 'local', callback: () => goLink('/pages/codeList/index') },
+    { label: '码单管理', icon: 'icon-mdgl', icon_status: 'local', callback: () => goLink('/pages/codeList/index') },
+    { label: '色卡剪样', icon: 'icon-yanseduibi', callback: () => goLink('/pages/colorCard/index') },
     { label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
     { label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', callback: () => (set_customer_service_show(true)) },
   ]
diff --git a/src/styles/image/kong.png b/src/styles/image/kong.png
new file mode 100644
index 0000000..4a9f41f
Binary files /dev/null and b/src/styles/image/kong.png differ