diff --git a/components/bussiness-components/packingStationItem.vue b/components/bussiness-components/packingStationItem.vue
index 33d5da8..da5eeea 100644
--- a/components/bussiness-components/packingStationItem.vue
+++ b/components/bussiness-components/packingStationItem.vue
@@ -1,228 +1,229 @@
 <template>
-  <view class="packing-area">
-    <view class="info">
-      <image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image>
-      <view class="content">
-        <view class="title">
-          <text class="text">{{ info.enterpriseName }}</text>
-          <image
-            class="icon"
-            :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"
-          ></image>
-        </view>
-        <view class="desc">
-          <text>{{ transformBusiness(info.business) }}</text>
-        </view>
-        <view v-show="info.whetherCooperation === 1" class="box-area">
-          <view class="box">
-            <view><text class="title">月采购量</text></view>
-            <view style="margin-top: 16rpx">
-              <text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text>
-            </view>
-          </view>
-          <view class="box">
-            <view><text class="title">月采购额</text></view>
-            <view style="margin-top: 16rpx">
-              <text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text>
-            </view>
-          </view>
-          <view class="box">
-            <view><text class="title">最近购买</text></view>
-            <view style="margin-top: 16rpx">
-              <text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text>
-            </view>
-          </view>
-        </view>
-        <view v-show="info.whetherCooperation === 0" class="box-area">
-          <view class="box">
-            <view><text class="title">法定代表人</text></view>
-            <view style="margin-top: 16rpx">
-              <text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text>
-            </view>
-          </view>
-          <view class="box">
-            <view><text class="title">注册资本</text></view>
-            <view style="margin-top: 16rpx">
-              <text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text>
-            </view>
-          </view>
-          <view class="box">
-            <view><text class="title">成立时间</text></view>
-            <view style="margin-top: 16rpx">
-              <text class="value">{{ transformDate(info.openingDate) || '-' }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-    <view class="other">
-      <view class="box">
-        <image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
-        <text class="text">{{ info.detailedAddress || '未知' }}</text>
-      </view>
-      <view class="divide"></view>
-      <view class="box">
-        <image class="icon" src="/static/imgs/client-list/phone-icon.png"></image>
-        <text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text>
-      </view>
-    </view>
-  </view>
+	<view class="packing-area">
+		<view class="info" @tap="goDetail">
+			<image class="image" :src="info.enterpriseLogo || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'"></image>
+			<view class="content">
+				<view class="title">
+					<text class="text">{{ info.enterpriseName }}</text>
+					<image class="icon" :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"></image>
+				</view>
+				<view class="desc">
+					<text>{{ transformBusiness(info.business) }}</text>
+				</view>
+				<view v-show="info.whetherCooperation === 1" class="box-area">
+					<view class="box">
+						<view><text class="title">月采购量</text></view>
+						<view style="margin-top: 16rpx">
+							<text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text>
+						</view>
+					</view>
+					<view class="box">
+						<view><text class="title">月采购额</text></view>
+						<view style="margin-top: 16rpx">
+							<text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text>
+						</view>
+					</view>
+					<view class="box">
+						<view><text class="title">最近购买</text></view>
+						<view style="margin-top: 16rpx">
+							<text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text>
+						</view>
+					</view>
+				</view>
+				<view v-show="info.whetherCooperation === 0" class="box-area">
+					<view class="box">
+						<view><text class="title">法定代表人</text></view>
+						<view style="margin-top: 16rpx">
+							<text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text>
+						</view>
+					</view>
+					<view class="box">
+						<view><text class="title">注册资本</text></view>
+						<view style="margin-top: 16rpx">
+							<text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text>
+						</view>
+					</view>
+					<view class="box">
+						<view><text class="title">成立时间</text></view>
+						<view style="margin-top: 16rpx">
+							<text class="value">{{ transformDate(info.openingDate) || '-' }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="other">
+			<view class="box">
+				<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
+				<text class="text">{{ info.detailedAddress || '未知' }}</text>
+			</view>
+			<view class="divide"></view>
+			<view class="box">
+				<image class="icon" src="/static/imgs/client-list/phone-icon.png"></image>
+				<text class="text">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
+import { go2 } from '@/utils/hook.js'
 export default {
-  props: {
-    info: {
-      type: Object,
-      default: () => ({
-        enterpriseName: '广州市金骏彩色印务有限公司',
-        enterpriseLogo: '',
-        business: '生产画册、书刊、包装盒、手提袋子、快递箱',
-        whetherCooperation: 1,
-        monthlyPurchaseQuantity: 100,
-        monthlyTradingQuota: 200,
-        lastTradingDate: '2020-12-12',
-        openingDate: '2020-12-12',
-        legalPerson: '张三',
-        registeredCapital: 1000,
-        contactNumber: '13888888888',
-        detailedAddress: '广州市天河区天河路'
-      })
-    }
-  },
-  methods: {
-    transformBusiness(business) {
-      let text = business?.trim() || '未知'
-      if (text.length > 17) {
-        text = text.substr(0, 17) + '...'
-      }
-      return '主营：' + text
-    },
-    transformDate(date) {
-      if (date) {
-        return date.split('-').join('/')
-      }
-      return ''
-    },
-    transformPhoneNum(phoneNum) {
-      if (phoneNum) {
-        if (this.hasLogin) {
-          return phoneNum
-        } else {
-          return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
-        }
-      }
-      return '--'
-    }
-  },
-  computed: {
-    hasLogin() {
-      return this.$store.state.qnToken != ''
-    }
-  }
+	props: {
+		info: {
+			type: Object,
+			default: () => ({
+				enterpriseName: '广州市金骏彩色印务有限公司',
+				enterpriseLogo: '',
+				business: '生产画册、书刊、包装盒、手提袋子、快递箱',
+				whetherCooperation: 1,
+				monthlyPurchaseQuantity: 100,
+				monthlyTradingQuota: 200,
+				lastTradingDate: '2020-12-12',
+				openingDate: '2020-12-12',
+				legalPerson: '张三',
+				registeredCapital: 1000,
+				contactNumber: '13888888888',
+				detailedAddress: '广州市天河区天河路'
+			})
+		}
+	},
+	methods: {
+		goDetail() {
+			go2('client-detail', { id: this.info.enterpriseId })
+		},
+		transformBusiness(business) {
+			let text = business?.trim() || '未知'
+			if (text.length > 17) {
+				text = text.substr(0, 17) + '...'
+			}
+			return '主营：' + text
+		},
+		transformDate(date) {
+			if (date) {
+				return date.split('-').join('/')
+			}
+			return ''
+		},
+		transformPhoneNum(phoneNum) {
+			if (phoneNum) {
+				if (this.hasLogin) {
+					return phoneNum
+				} else {
+					return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+				}
+			}
+			return '--'
+		}
+	},
+	computed: {
+		hasLogin() {
+			return this.$store.state.qnToken != ''
+		}
+	}
 }
 </script>
 
 <style lang="scss">
 .packing-area {
-  width: 750rpx;
-  background-color: #fff;
-  .info {
-    width: 750rpx;
-    padding: 30rpx 32rpx 48rpx;
-    border-bottom: 2rpx solid #dddddd;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    .image {
-      width: 140rpx;
-      height: 140rpx;
-      flex-grow: 0;
-      flex-shrink: 0;
-      margin-right: 20rpx;
-    }
-    .content {
-      flex-grow: 1;
-      .title {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-        .text {
-          font-size: 32rpx;
-          color: #000000;
-          font-weight: 600;
-        }
-        .icon {
-          width: 100rpx;
-          height: 32rpx;
-          flex-grow: 0;
-          flex-shrink: 0;
-          margin-left: 8rpx;
-        }
-      }
-      .desc {
-        margin-top: 14rpx;
-        font-size: 26rpx;
-        color: #333333;
-      }
-      .box-area {
-        margin-top: 30rpx;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        .box {
-          width: 170rpx;
-          .title {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            font-size: 24rpx;
-            color: #888888;
-          }
-          .value {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            font-size: 28rpx;
-            color: #333333;
-            font-weight: 500;
-          }
-        }
-      }
-    }
-  }
-  .other {
-    width: 750rpx;
-    padding: 24rpx 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    .divide {
-      width: 2rpx;
-      height: 32rpx;
-      background: #d8d8d8;
-    }
-    .box {
-      width: 340rpx;
-      margin: 0 32rpx;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      .icon {
-        width: 52rpx;
-        height: 52rpx;
-        flex-grow: 0;
-        flex-shrink: 0;
-        margin-right: 10rpx;
-      }
-      .text {
-        font-size: 24rpx;
-        color: #555555;
-      }
-    }
-  }
+	width: 750rpx;
+	background-color: #fff;
+	.info {
+		width: 750rpx;
+		padding: 30rpx 32rpx 48rpx;
+		border-bottom: 2rpx solid #dddddd;
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		.image {
+			width: 140rpx;
+			height: 140rpx;
+			flex-grow: 0;
+			flex-shrink: 0;
+			margin-right: 20rpx;
+		}
+		.content {
+			flex-grow: 1;
+			.title {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				.text {
+					font-size: 32rpx;
+					color: #000000;
+					font-weight: 600;
+				}
+				.icon {
+					width: 100rpx;
+					height: 32rpx;
+					flex-grow: 0;
+					flex-shrink: 0;
+					margin-left: 8rpx;
+				}
+			}
+			.desc {
+				margin-top: 14rpx;
+				font-size: 26rpx;
+				color: #333333;
+			}
+			.box-area {
+				margin-top: 30rpx;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-end;
+				.box {
+					width: 170rpx;
+					.title {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						font-size: 24rpx;
+						color: #888888;
+					}
+					.value {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #333333;
+						font-weight: 500;
+					}
+				}
+			}
+		}
+	}
+	.other {
+		width: 750rpx;
+		padding: 24rpx 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		.divide {
+			width: 2rpx;
+			height: 32rpx;
+			background: #d8d8d8;
+		}
+		.box {
+			width: 340rpx;
+			margin: 0 32rpx;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			.icon {
+				width: 52rpx;
+				height: 52rpx;
+				flex-grow: 0;
+				flex-shrink: 0;
+				margin-right: 10rpx;
+			}
+			.text {
+				font-size: 24rpx;
+				color: #555555;
+			}
+		}
+	}
 }
 </style>
diff --git a/pages.json b/pages.json
index 46a2131..4d1d096 100644
--- a/pages.json
+++ b/pages.json
@@ -1,161 +1,158 @@
 {
-  "pages": [
-    {
-      "path": "pages/client/index",
-      "style": {
-        "navigationBarTitleText": "客户",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/client-list/index",
-      "style": {
-        "navigationBarTitleText": "客户列表",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/search/index",
-      "style": {
-        "navigationBarTitleText": "客户搜索",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/add-user/index",
-      "style": {
-        "navigationBarTitleText": "添加客户",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/trade/index",
-      "style": {
-        "navigationBarTitleText": "交易",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/mall/index",
-      "style": {
-        "navigationBarTitleText": "商城"
-      }
-    },
-    {
-      "path": "pages/mine/index",
-      "style": {
-        "navigationBarTitleText": "我的"
-      }
-    },
-    {
-      "path": "pages/login/index",
-      "style": {
-        "navigationBarTitleText": "登录",
-        "enablePullDownRefresh": false,
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/agreement/index",
-      "style": {
-        "navigationBarTitleText": "用户与隐私协议"
-      }
-    },
-    {
-      "path": "pages/client-detail/index",
-      "style": {
-        "navigationBarTitleText": "客户详情",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/client-credit/index",
-      "style": {
-        "navigationBarTitleText": "客户授信",
-        "navigationStyle": "custom",
-        "enablePullDownRefresh": false
-      }
-    },
-    {
-      "path": "pages/client-signing/index",
-      "style": {
-        "navigationBarTitleText": "客户签约",
-        "navigationStyle": "custom",
-        "enablePullDownRefresh": false
-      }
-    },
-    {
-      "path": "pages/client-credit-limit/index",
-      "style": {
-        "navigationBarTitleText": "授信额度",
-        "navigationStyle": "custom",
-        "enablePullDownRefresh": false
-      }
-    },
-    {
-      "path": "pages/client-credit-list/index",
-      "style": {
-        "navigationBarTitleText": "客户授信列表",
-        "navigationStyle": "custom",
-        "enablePullDownRefresh": false
-      }
-    },
-    {
-      "path": "pages/my-offer/index",
-      "style": {
-        "navigationBarTitleText": "我的报价",
-        "enablePullDownRefresh": false
-      }
-    }
-  ],
-  "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8",
-    "backgroundColorTop": "#FFFFFF"
-  },
-  "tabBar": {
-    "color": "#888",
-    "selectedColor": "#007AFF",
-    "borderStyle": "white",
-    "backgroundColor": "#f9f9f9",
-    "list": [
-      {
-        "pagePath": "pages/client/index",
-        "iconPath": "static/imgs/tabbar/client-gray.png",
-        "selectedIconPath": "static/imgs/tabbar/client-blue.png",
-        "text": "客户"
-      },
-      {
-        "pagePath": "pages/trade/index",
-        "iconPath": "static/imgs/tabbar/trade-gray.png",
-        "selectedIconPath": "static/imgs/tabbar/trade-blue.png",
-        "text": "交易"
-      },
-      {
-        "pagePath": "pages/mall/index",
-        "iconPath": "static/imgs/tabbar/mall-gray.png",
-        "selectedIconPath": "static/imgs/tabbar/mall-blue.png",
-        "text": "纸商城"
-      },
-      {
-        "pagePath": "pages/mine/index",
-        "iconPath": "static/imgs/tabbar/mine-gray.png",
-        "selectedIconPath": "static/imgs/tabbar/mine-blue.png",
-        "text": "我的"
-      }
-    ]
-  },
-  "condition": {
-    //模式配置，仅开发期间生效
-    "current": 0, //当前激活的模式(list 的索引项)
-    "list": [
-      {
-        "name": "", //模式名称
-        "path": "", //启动页面，必选
-        "query": "" //启动参数，在页面的onLoad函数里面得到
-      }
-    ]
-  }
+	"pages": [{
+			"path": "pages/client/index",
+			"style": {
+				"navigationBarTitleText": "客户",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/client-list/index",
+			"style": {
+				"navigationBarTitleText": "客户列表",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/search/index",
+			"style": {
+				"navigationBarTitleText": "客户搜索",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/add-user/index",
+			"style": {
+				"navigationBarTitleText": "添加客户",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/trade/index",
+			"style": {
+				"navigationBarTitleText": "交易",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/mall/index",
+			"style": {
+				"navigationBarTitleText": "商城",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/mine/index",
+			"style": {
+				"navigationBarTitleText": "我的"
+			}
+		},
+		{
+			"path": "pages/login/index",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/agreement/index",
+			"style": {
+				"navigationBarTitleText": "用户与隐私协议"
+			}
+		},
+		{
+			"path": "pages/client-detail/index",
+			"style": {
+				"navigationBarTitleText": "客户详情",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/client-credit/index",
+			"style": {
+				"navigationBarTitleText": "客户授信",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/client-signing/index",
+			"style": {
+				"navigationBarTitleText": "客户签约",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/client-credit-limit/index",
+			"style": {
+				"navigationBarTitleText": "授信额度",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/client-credit-list/index",
+			"style": {
+				"navigationBarTitleText": "客户授信列表",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/my-offer/index",
+			"style": {
+				"navigationBarTitleText": "我的报价",
+				"enablePullDownRefresh": false
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8",
+		"backgroundColorTop": "#FFFFFF"
+	},
+	"tabBar": {
+		"color": "#888",
+		"selectedColor": "#007AFF",
+		"borderStyle": "white",
+		"backgroundColor": "#f9f9f9",
+		"list": [{
+				"pagePath": "pages/client/index",
+				"iconPath": "static/imgs/tabbar/client-gray.png",
+				"selectedIconPath": "static/imgs/tabbar/client-blue.png",
+				"text": "客户"
+			},
+			{
+				"pagePath": "pages/trade/index",
+				"iconPath": "static/imgs/tabbar/trade-gray.png",
+				"selectedIconPath": "static/imgs/tabbar/trade-blue.png",
+				"text": "交易"
+			},
+			{
+				"pagePath": "pages/mall/index",
+				"iconPath": "static/imgs/tabbar/mall-gray.png",
+				"selectedIconPath": "static/imgs/tabbar/mall-blue.png",
+				"text": "纸商城"
+			},
+			{
+				"pagePath": "pages/mine/index",
+				"iconPath": "static/imgs/tabbar/mine-gray.png",
+				"selectedIconPath": "static/imgs/tabbar/mine-blue.png",
+				"text": "我的"
+			}
+		]
+	},
+	"condition": {
+		//模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+			"name": "", //模式名称
+			"path": "", //启动页面，必选
+			"query": "" //启动参数，在页面的onLoad函数里面得到
+		}]
+	}
 }
diff --git a/pages/client-detail/base-paper-deals.vue b/pages/client-detail/base-paper-deals.vue
index d85bbbd..1088020 100644
--- a/pages/client-detail/base-paper-deals.vue
+++ b/pages/client-detail/base-paper-deals.vue
@@ -1,22 +1,204 @@
 <template>
-	<view>
-		原纸交易
+	<view class="warpper">
+		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
+			<view class="sum-box">
+				<view class="">
+					<view class="title">
+						交易金额
+					</view>
+					<view class="value">
+						458 682.00
+					</view>
+				</view>
+				<view class="">
+					<view class="title">
+						总交易量(吨)
+					</view>
+					<view class="value">
+						125.7752
+					</view>
+				</view>
+			</view>
+			<uGap></uGap>
+			<view class="card-box">
+				<view class="header">
+					<view class="left-title">
+						XJ 202112235389
+					</view>
+					<view class="right-title">
+						¥ 22045.78
+					</view>
+				</view>
+				<view class="content">
+					<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+					<view class="">
+						<view class="title">
+							金蝶蓝白卡
+						</view>
+						<view class="desc">
+							白卡纸/金蝶蓝/350g/787*1092/2200张
+						</view>
+					</view>
+				</view>
+				<view class="content">
+					<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+					<view class="">
+						<view class="title">
+							丽盈白卡
+						</view>
+						<view class="desc">
+							白卡纸/丽盈/350g/787*1092/2200张
+						</view>
+					</view>
+				</view>
+				<view class="other">
+					<view class="time">
+						2021-12-23 12:30:45
+					</view>
+					<view class="btn">
+						更多详情
+						<image class="icon" src="/static/imgs/client-detail/arrow-right-icon.png"></image>
+					</view>
+				</view>
+				<uGap></uGap>
+			</view>
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
+import uGap from '@/components/u-gap/u-gap.vue'
+export default {
+	components: { uGap },
+	data() {
+		return {
+			option: {
+				size: 10,
+				auto: true,
+				emptyText: '暂无数据~',
+				background: '#F7F8FA',
+				disabled: false
+			}
 		}
+	},
+	methods: {
+		downCallback() {},
+		upCallback() {}
 	}
+}
 </script>
 
-<style>
-
+<style lang="scss">
+.warpper {
+	width: 750rpx;
+	.sum-box {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+		// text-align: center;
+		height: 184rpx;
+		background: url('/static/imgs/client-detail/yzjy-icon.png') no-repeat;
+		background-size: 100%;
+		.title {
+			font-size: 26rpx;
+			color: #FFFFFF;
+			letter-spacing: 0;
+			font-weight: 500;
+		}
+		.value {
+			font-size: 56rpx;
+			color: #FFFFFF;
+			letter-spacing: 0;
+			text-align: left;
+			font-weight: 500;
+			margin-top: 16rpx;
+		}
+	}
+	.card-box {
+		.header {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			height: 88rpx;
+			background: #FFFFFF;
+			border-bottom: 2rpx solid #DDDDDD;
+			padding: 0rpx 32rpx;
+			.left-title {
+				font-size: 30rpx;
+				color: #000000;
+				letter-spacing: 0;
+				font-weight: 600;
+			}
+			.right-title {
+				font-size: 30rpx;
+				color: #FF5368;
+				letter-spacing: 0;
+				text-align: right;
+				font-weight: 500;
+			}
+		}
+		.content {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			height: 148rpx;
+			background: #FFFFFF;
+			border-bottom: 2rpx solid #DDDDDD;
+			padding: 0rpx 32rpx;
+			.image {
+				width: 100rpx;
+				height: 100rpx;
+				flex: 0 0 100rpx;
+				margin-right: 20rpx;
+			}
+			.title {
+				font-size: 30rpx;
+				color: #333333;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 400;
+			}
+			.desc {
+				padding-top: 26rpx;
+				font-size: 26rpx;
+				color: #888888;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 400;
+			}
+		}
+		.other {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			height: 80rpx;
+			background: #FFFFFF;
+			padding: 0rpx 32rpx;
+			.time {
+				font-size: 26rpx;
+				color: #888888;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 400;
+			}
+			.btn {
+				font-size: 28rpx;
+				color: #007AFF;
+				letter-spacing: 0;
+				text-align: center;
+				font-weight: 500;
+				display: flex;
+				align-items: center;
+			}
+			.icon {
+				width: 24rpx;
+				height: 24rpx;
+				margin-left: 6rpx;
+			}
+		}
+	}
+}
 </style>
diff --git a/pages/client-detail/basic-information.vue b/pages/client-detail/basic-information.vue
index db9e96e..8159c24 100644
--- a/pages/client-detail/basic-information.vue
+++ b/pages/client-detail/basic-information.vue
@@ -79,21 +79,21 @@
 					<view class="cf-info">
 						<view class="row">
 							<view class="left">
-								<view class="info-title"><text>产房面积：</text></view>
-								<view class="info-value"><text>{{info.plantArea}}m²</text></view>
+								<view class="title"><text>产房面积：</text></view>
+								<view class="value"><text>{{info.plantArea}}m²</text></view>
 							</view>
 							<view class="right">
-								<view class="info-title"><text>年营业额：</text></view>
-								<view class="info-value"><text>{{info.annualTurnover}}万</text></view>
+								<view class="title"><text>年营业额：</text></view>
+								<view class="value"><text>{{info.annualTurnover}}万</text></view>
 							</view>
 						</view>
 						<view class="row">
 							<view class="left">
-								<view class="info-title"><text>产房照片：</text></view>
+								<view class="title"><text>产房照片：</text></view>
 								<view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view>
 							</view>
 							<view class="right">
-								<view class="info-title"><text>租赁合同：</text></view>
+								<view class="title"><text>租赁合同：</text></view>
 								<view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view>
 							</view>
 						</view>
@@ -264,10 +264,10 @@ export default {
 			this.seemoreFlag = !this.seemoreFlag
 		},
 		transformDate(date) {
-		  if (date) {
-		    return `${date[0]}/${date[1]}/${date[2]}`
-		  }
-		  return ''
+			if (date) {
+				return date.split('-').join('/')
+			}
+			return ''
 		},
 		previewImg(index, list) {
 			uni.previewImage({
@@ -451,15 +451,29 @@ export default {
 			align-items: center;
 			margin-bottom: 16rpx;
 		}
+		.title {
+			flex: 0 0 150rpx;
+			font-size: 28rpx;
+			color: #888888;
+			letter-spacing: 0;
+			font-weight: 400;
+			margin-right: 8rpx;
+		}
+		.value {
+			font-size: 28rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
 		.left {
 			display: flex;
 			flex-direction: row;
-			justify-content: space-between;
+			width: 60%;
 		}
 		.right {
 			display: flex;
 			flex-direction: row;
-			justify-content: space-between;
+			width: 40%;
 		}
 	}
 
diff --git a/pages/client-detail/equipment-information.vue b/pages/client-detail/equipment-information.vue
index f36a8bd..e5e9e2b 100644
--- a/pages/client-detail/equipment-information.vue
+++ b/pages/client-detail/equipment-information.vue
@@ -1,22 +1,247 @@
 <template>
-	<view>
-		设备信息
+	<view class="warpper">
+		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
+			<view class="card-box">
+				<view class="header">
+					<view class="title">全自动立体糊盒机</view>
+					<view class="desc">近30天</view>
+				</view>
+				<view class="content">
+					<view class="info">
+						<view class="">
+							<view class="value">8900件</view>
+							<view class="title">
+								<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+								设备产能
+							</view>
+						</view>
+						<view class="">
+							<view class="value">89 h</view>
+							<view class="title">
+								<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+								工作时长
+							</view>
+						</view>
+						<view class="">
+							<view class="value">86%</view>
+							<view class="title">
+								<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+								开机率
+							</view>
+						</view>
+					</view>
+					<view class="shrink-box" v-if="!seemoreFlag">
+						<view class="row">
+							<view class="left">
+								<view class="title">设备图片：</view>
+								<view class="look-over">点击查看</view>
+							</view>
+							<view class="right">
+								<view class="title">购买年份：</view>
+								<view class="value">2019年</view>
+							</view>
+						</view>
+						<view class="row">
+							<view class="left">
+								<view class="title">购买金额：</view>
+								<view class="value">2000万</view>
+							</view>
+							<view class="right">
+								<view class="title">设备产能：</view>
+								<view class="value">2000个/天</view>
+							</view>
+						</view>
+						<view class="row">
+							<view class="left">
+								<view class="title">成色：</view>
+								<view class="value">9成新</view>
+							</view>
+							<view class="right">
+								<view class="title">设备类型：</view>
+								<view class="value">糊盒机</view>
+							</view>
+						</view>
+						<view class="row">
+							<view class="left">
+								<view class="title">最大输纸 长度：</view>
+								<view class="value">2000mm</view>
+							</view>
+							<view class="right">
+								<view class="title">最大输纸 宽度：</view>
+								<view class="value">2000mm</view>
+							</view>
+						</view>
+						<view class="row">
+							<view class="left">
+								<view class="title">最大输纸 厚度：</view>
+								<view class="value">2000mm</view>
+							</view>
+							<view class="right">
+								<view class="title">咬口：</view>
+								<view class="value">2000mm</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="see-more">
+					<view class="" @tap="seemoreTap">
+						<text>设备详情</text>
+						<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image>
+					</view>
+				</view>
+				<uGap></uGap>
+			</view>
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
+import lvSelect from './lv-select.vue'
+import uGap from '@/components/u-gap/u-gap.vue'
+export default {
+	components: { lvSelect, uGap },
+	data() {
+		return {
+			option: {
+				size: 10,
+				auto: true,
+				emptyText: '暂无数据~',
+				background: '#F7F8FA',
+				disabled: false
+			},
+			seemoreFlag: true
 		}
+	},
+	methods: {
+		seemoreTap() {
+			this.seemoreFlag = !this.seemoreFlag
+		},
+		downCallback() {},
+		upCallback() {}
 	}
+}
 </script>
 
-<style>
-
+<style lang="scss">
+.warpper {
+	.card-box {
+		.header {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			height: 88rpx;
+			background: #ffffff;
+			padding: 0rpx 36rpx 0rpx 32rpx;
+			.title {
+				font-size: 30rpx;
+				color: #000000;
+				letter-spacing: 0;
+				font-weight: 600;
+			}
+			.desc {
+				font-size: 28rpx;
+				color: #888888;
+				letter-spacing: 0;
+				text-align: right;
+				font-weight: 400;
+			}
+		}
+		.content {
+			border-bottom: 2rpx solid #dddddd;
+			border-top: 2rpx solid #dddddd;
+			.info {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-around;
+				align-items: center;
+				text-align: center;
+				height: 148rpx;
+				background: #ffffff;
+				.value {
+					font-size: 28rpx;
+					color: #333333;
+					letter-spacing: 0;
+					text-align: center;
+					font-weight: 500;
+				}
+				.title {
+					margin-top: 16rpx;
+					font-size: 24rpx;
+					color: #888888;
+					letter-spacing: 0;
+					text-align: center;
+					font-weight: 400;
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+				}
+				.icon {
+					width: 32rpx;
+					height: 32rpx;
+					padding-right: 6rpx;
+				}
+			}
+			.shrink-box {
+				background: #f7f8fa;
+				padding: 8rpx 36rpx 16rpx 32rpx;
+				.row {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+					margin-top: 16rpx;
+					.left {
+						display: flex;
+						flex-direction: row;
+						width: 60%;
+					}
+					.right {
+						display: flex;
+						flex-direction: row;
+						width: 40%;
+					}
+					.title {
+						flex: 0 0 140rpx;
+						font-size: 28rpx;
+						color: #888888;
+						letter-spacing: 0;
+						font-weight: 400;
+					}
+					.value {
+						font-size: 28rpx;
+						color: #333333;
+						letter-spacing: 0;
+						font-weight: 400;
+					}
+					.look-over {
+						font-size: 28rpx;
+						color: #007aff;
+						letter-spacing: 0;
+						font-weight: 400;
+					}
+				}
+			}
+		}
+		.see-more {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			height: 80rpx;
+			line-height: 80rpx;
+			background: #ffffff;
+			padding: 0rpx 32rpx;
+			font-size: 28rpx;
+			color: #007aff;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+			.icon {
+				width: 24rpx;
+				height: 24rpx;
+			}
+		}
+	}
+}
 </style>
diff --git a/pages/client-detail/index.vue b/pages/client-detail/index.vue
index ecb4a44..cd4c837 100644
--- a/pages/client-detail/index.vue
+++ b/pages/client-detail/index.vue
@@ -7,7 +7,7 @@
 			<!-- </view> -->
 		</qnHeader>
 		<view>
-			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
+			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF" class="segmented"></uni-segmented-control>
 			
 				<view class="content">
 					<view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view>
@@ -78,5 +78,13 @@ export default {
 		line-height: 40rpx;
 		font-weight: 500;
 	}
+	.segmented {
+		height: 88rpx;
+		border-bottom: 2rpx solid #ECECEC;
+		font-size: 28rpx;
+		color: #333333;
+		text-align: center;
+		font-weight: 400;
+	}
 }
 </style>
diff --git a/pages/client-detail/lv-select.vue b/pages/client-detail/lv-select.vue
new file mode 100644
index 0000000..5f5bbf0
--- /dev/null
+++ b/pages/client-detail/lv-select.vue
@@ -0,0 +1,291 @@
+<template>
+	<view style="position: relative;" :class="size === 'small' ? 'small' : ''">
+		<view class="uni-flex" :class="{unishadow :uniShadow}">
+			<view class="uni-search-form uni-circular uni-background">
+				<icon type="search" size="14" class="uni-icon-position"/>
+				<input 
+					type="text" 
+					:placeholder="placeholder" 
+					v-model="inputVal" 
+					@input="onInput"
+					@focus="onFocus"
+				></input>
+				<icon v-if="isShowClearIcon" type="clear" size="16" class="uni-icon-clear" @tap="clearInputValue"/>
+			</view>
+			<view class="uni-action">
+				<button 
+					:disabled="loading" 
+					class="uni-cu-btn uni-bg-gradual-green uni-shadow-blur uni-round" 
+					:class="[type === 'primary' ? 'uni-primary' : (type === 'success' ? 'uni-success' : (type === 'warning' ? 'uni-warning' : 'uni-error'))]" 
+					hover-class="hover" 
+					@click="handleSearch"
+				>搜索</button>
+			</view>
+		</view>
+		<view v-if="isShowSelect">
+			<view class="uni-combox__selector" v-if="inputIsShow">
+				<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
+					<view class="uni-combox__selector-empty " v-if="loading">
+						<view>加载中··· </view>
+					</view>
+					<view class="uni-combox__selector-empty " v-if="!loading && dataListLength === 0" @tap="closeDielog">
+						<view>{{emptyTips}}</view>
+					</view>
+					<view class="uni-combox__selector-item" v-for="(item,index) in dataList" :key="index" @tap="onSelectorClick(index)">
+						<text>{{item[showValue]}}</text>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'select',
+		props: {
+			// placeholder: {
+			// 	type: String,
+			// 	default: '请输入信息'
+			// },
+			infoList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			value: {
+				type: String,
+				default: ''
+			},
+			showValue: {
+				type: String,
+				default: 'name'
+			},
+			emptyTips: {
+				type: String,
+				default: '暂无数据'
+			},
+			loading: {
+				type: Boolean,
+				default: false
+			},
+			btnStyleColor: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			uniShadow: {
+				type: Boolean,
+				default: true
+			},
+			type: {
+				type: String,
+				default: 'primary'
+			},
+			size: {
+				type: String,
+				default: 'medium'
+			},
+			isShowSelect: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				inputIsShow: false,
+				inputVal: '',
+				dataList: [],
+				placeholder: '请输入信息',
+				isShowClearIcon: false
+			}
+		},
+		computed: {
+			dataListLength() {
+				return this.dataList.length
+			}
+		},
+		watch: {
+			value: {
+				handler(newVal) {
+					this.inputVal = newVal
+				},
+				immediate: true
+			},
+			infoList: {
+				handler(newVal) {
+					this.dataList = newVal
+				},
+				deep: true,
+				immediate: true
+			},
+			inputVal(val) {
+				if(!val.length) {
+					this.isShowClearIcon = false
+				}
+			}
+		},
+		methods: {
+			closeDielog() {
+				this.inputIsShow = false
+			},
+			onFocus() {
+				if(this.dataList.length) {
+					this.inputIsShow = true
+					this.isShowClearIcon = !!this.inputVal
+				}
+			},
+			onSelectorClick(index) {
+				this.inputIsShow = false
+				this.isShowClearIcon = false
+				this.inputVal = this.dataList[index][this.showValue]
+				this.$emit('input', this.inputVal)
+				this.$emit('change', this.dataList[index])
+			},
+			onInput() {
+				this.$emit('input', this.inputVal)
+			},
+			handleSearch() {
+				this.inputIsShow = true
+				this.$emit('handleSearch')
+			},
+			clearInputValue() {
+				this.inputVal = ''
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	// $selectWidth: 75%; // 下拉选择框宽度
+	.small {
+		transform: scale(.9, .9);
+	}
+	.uni-primary {
+		background-color: $uni-color-primary;
+	}
+	.uni-success {
+		background-color: #67c23a;
+	}
+	.uni-warning {
+		background-color: $uni-color-warning;
+	}
+	.uni-error {
+		background-color: $uni-color-error;
+	}
+	.hover{
+		transition: all .6s;
+		transform: scale(0.8,0.8);
+	}
+	.uni-flex{
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 10rpx 20rpx;
+		box-sizing: border-box;
+	}
+	.unishadow{
+		box-shadow: 0rpx 1rpx 5rpx #DDDDDD;
+	}
+	.uni-search-form{
+		position: relative;
+		width: 60%;
+		margin: 10rpx;
+		padding: 10rpx 80rpx;
+		font-size: 30rpx;
+		color: #999999;
+	}
+	.uniRound{
+		border-radius: 5px;
+	}
+	.uni-circular{
+		border-radius: 100rpx;
+	}
+	.uni-icon-position{
+		position: absolute;
+		top: 50%;
+		left: 26rpx;
+		transform: translate(0,-50%);
+	}
+	.uni-icon-clear{
+		position: absolute;
+		top: 50%;
+		right: 26rpx;
+		transform: translate(0,-50%);
+	}
+	.uni-background{
+		background-color: #F5F5F5;
+	}
+	/* button */
+	.uni-action{
+		width:120rpx;
+		height: 66rpx; 
+	}
+	.uni-cu-btn{
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #FFFFFF;
+		font-size: 28rpx;
+		border: none;
+		// background-color: $uni-color-primary;
+	}
+	.uni-shadow-blur{
+		box-shadow: 0rpx 1rpx 10rpx #C8C7CC;
+	}
+	.uni-round{
+		border-radius: 100rpx;
+	}
+	.uni-combox__selector {
+		position: absolute;
+		top: 100rpx;
+		left: 40rpx;
+		box-sizing: border-box;
+		width: 75%; // 下拉框宽度
+		background-color: #FFFFFF;
+		border-radius: 6px;
+		box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
+		z-index: 999;
+	}
+	.uni-combox__selector-scroll {
+		max-height: 200px;
+		box-sizing: border-box;
+	}
+	.uni-combox__selector::before {
+		content: '';
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-bottom: solid 6px #FFFFFF;
+		border-right: solid 6px transparent;
+		border-left: solid 6px transparent;
+		left: 50%;
+		top: -6px;
+		margin-left: -6px;
+	}
+	.uni-combox__selector-empty{
+		text-align: center;
+		color: #8F8F94;
+		padding: 20rpx 0;
+		font-size: 28rpx;
+	}
+	.uni-combox__selector-item {
+		/* #ifdef APP-NVUE */
+		display: flex;
+		/* #endif */
+		font-size: 24rpx;
+		margin: 0px 10px;
+		padding: 20rpx 10rpx;
+		color: #808080;
+	}
+	.uni-combox__selector-item:hover {
+		background-color: #DDDDDD;
+	}
+	.uni-combox__selector-empty:last-child,
+	.uni-combox__selector-item:last-child {
+		border-bottom: none;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/client-detail/no-data.vue b/pages/client-detail/no-data.vue
new file mode 100644
index 0000000..b700409
--- /dev/null
+++ b/pages/client-detail/no-data.vue
@@ -0,0 +1,49 @@
+<template>
+	<view class="warpper">
+		<image class="icon" src="/static/imgs/client-detail/no-data-icon.png"></image>
+		<view class="text">
+			{{ title }}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			title:{
+				type: String,
+				default: null
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+.warpper {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	margin-top: 25%;
+	.icon {
+		width: 560rpx;
+		height: 320rpx;
+	}
+	.text {
+		font-size: 30rpx;
+		color: #333333;
+		letter-spacing: 0;
+		text-align: center;
+		font-weight: 400;
+	}
+}
+</style>
diff --git a/pages/client-detail/waste-paper-trading.vue b/pages/client-detail/waste-paper-trading.vue
index 5b96d08..e9529e9 100644
--- a/pages/client-detail/waste-paper-trading.vue
+++ b/pages/client-detail/waste-paper-trading.vue
@@ -1,11 +1,13 @@
 <template>
 	<view>
-		废纸交易
+		<noData title="暂无废纸交易数据"></noData>
 	</view>
 </template>
 
 <script>
+	import noData from './no-data'
 	export default {
+		components:{noData},
 		data() {
 			return {
 				
diff --git a/pages/mall/index.vue b/pages/mall/index.vue
index 56fa7ac..158c90c 100644
--- a/pages/mall/index.vue
+++ b/pages/mall/index.vue
@@ -1,40 +1,254 @@
 <template>
-	<view class="content">
-		mall
+	<view class="warpper">
+		<uni-nav-bar>
+			<view slot="left" class="left-title">纸商城</view>
+			<view slot="right" class="right-title">分享</view>
+		</uni-nav-bar>
+		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
+			<view class="top-box">
+				<view class="">
+					<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+				</view>
+				<view class="center">
+					<view class="title">
+						东莞市隆兴纸业有限公司
+					</view>
+					<view class="desc">
+						全部商品 39 &nbsp; | &nbsp;上新 9
+					</view>
+				</view>
+				<view class="right">
+					<view class="cut">
+						切换商城
+						<image class="cut-icon" src="/static/imgs/mall/cut-icon.png" mode=""></image>
+					</view>
+					<view class="set">
+						设置
+					</view>
+				</view>
+			</view>
+			<uGap></uGap>
+			<view v-for="(item,index) in 6" :key="index">
+				<view class="content">
+					<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+					<view class="">
+						<view class="title">
+							<view class="">
+								金蝶蓝白卡
+							</view>
+							<view class="">
+								<image class="icon" :src="1 === 1 ? '/static/imgs/mall/grounding-icon.png' : '/static/imgs/mall/sold-out-icon.png'" mode=""></image>
+							</view>
+						</view>
+						<view class="sub-title">
+							金桂/白卡纸/金蝶蓝
+						</view>
+						<view class="desc">
+							克重(价格)：200(3900) 235(3900) 255(390
+							0)255(390
+						</view>
+					</view>
+				</view>
+				<view class="other">
+					<view class="time">
+						5分钟前
+					</view>
+					<view class="btn">
+						<view class="">
+							编辑
+						</view>
+						<view class="divide"></view>
+						<view class="">
+							下架
+						</view>
+					</view>
+				</view>
+				<uGap></uGap>
+			</view>
+			
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-
-	export default {
-		
+import uGap from '@/components/u-gap/u-gap.vue'
+export default {
+	components: { uGap },
+	data() {
+		return {
+			option: {
+				size: 10,
+				auto: true,
+				emptyText: '暂无数据~',
+				background: '#F7F8FA',
+				disabled: false
+			}
+		}
+	},
+	methods: {
+		downCallback() {},
+		upCallback() {}
 	}
+}
 </script>
 
-<style>
-	.content {
+<style lang="scss">
+.warpper {
+	width: 750rpx;
+	.left-title {
+		font-size: 40rpx;
+		color: #000000;
+		letter-spacing: 0;
+		font-weight: 500;
+	}
+	.right-title {
+		font-size: 28rpx;
+		color: #007aff;
+		text-align: right;
+		font-weight: 500;
+	}
+	.top-box {
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+		justify-content: space-around;
+		height: 180rpx;
+		background: url('/static/imgs/mall/zsc-bg-icon.png') no-repeat;
+		background-size: 100%;
+		.image {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+		}
+		.right {
+			width: 140rpx;
+		}
+		.center {
+			position: relative;
+			left: -20rpx;
+		}
+		.title {
+			
+			font-size: 34rpx;
+			color: #FFFFFF;
+			letter-spacing: 2rpx;
+			font-weight: 600;
+			margin-bottom: 12rpx;
+			
+		}
+		.desc {
+			opacity: 0.75;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			letter-spacing: 0;
+			font-weight: 500;
+			padding-right: 32rpx;
+		}
+		.cut {
+			display: flex;
+			align-items: center;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+			.cut-icon {
+				width: 29.42rpx;
+				height: 26.67rpx;
+				margin-left: 10rpx;
+			}
+		}
+		.set {
+			opacity: 0.75;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			letter-spacing: 0;
+			font-weight: 500;
+			position: relative;
+			top: 39rpx;
+			left: 60rpx;
+		}
 	}
-
-	.text-area {
+	.content {
+		background: #FFFFFF;
+		border-bottom: 2rpx solid #DDDDDD;
 		display: flex;
-		justify-content: center;
+		flex-direction: row;
+		padding: 24rpx 0rpx 24rpx 32rpx;
+		.image {
+			width: 100rpx;
+			height: 100rpx;
+			flex: 0 0 100rpx;
+			margin-right: 18rpx;
+		}
+		.title {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			font-size: 32rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 500;
+			.icon {
+				position: relative;
+				top: -22rpx;
+				width: 150rpx;
+				height: 50rpx;
+			}
+		}
+		.sub-title {
+			position: relative;
+			font-size: 28rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 400;
+			top: -4rpx;
+		}
+		.desc {
+			font-size: 28rpx;
+			color: #555555;
+			letter-spacing: 0;
+			font-weight: 400;
+			padding-top: 10rpx;
+			line-height: 1.4;
+		}
 	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.other {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		height: 80rpx;
+		background: #FFFFFF;
+		padding: 0rpx 32rpx;
+		.time {
+			font-size: 28rpx;
+			color: #888888;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
+		.btn {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 28rpx;
+			color: #007AFF;
+			letter-spacing: 0;
+			text-align: right;
+			font-weight: 400;
+		}
+		.divide {
+			width: 2rpx;
+			height: 32rpx;
+			background: #d8d8d8;
+			margin: 0 32rpx;
+		}
+		.icon {
+			width: 24rpx;
+			height: 24rpx;
+			margin-left: 6rpx;
+		}
 	}
+}
 </style>
diff --git a/static/imgs/client-detail/arrow-right-icon.png b/static/imgs/client-detail/arrow-right-icon.png
new file mode 100644
index 0000000..08fce70
Binary files /dev/null and b/static/imgs/client-detail/arrow-right-icon.png differ
diff --git a/static/imgs/client-detail/no-data-icon.png b/static/imgs/client-detail/no-data-icon.png
new file mode 100644
index 0000000..e13ea10
Binary files /dev/null and b/static/imgs/client-detail/no-data-icon.png differ
diff --git a/static/imgs/client-detail/yzjy-icon.png b/static/imgs/client-detail/yzjy-icon.png
new file mode 100644
index 0000000..47cf92d
Binary files /dev/null and b/static/imgs/client-detail/yzjy-icon.png differ
diff --git a/static/imgs/mall/cut-icon.png b/static/imgs/mall/cut-icon.png
new file mode 100644
index 0000000..7b943e4
Binary files /dev/null and b/static/imgs/mall/cut-icon.png differ
diff --git a/static/imgs/mall/grounding-icon.png b/static/imgs/mall/grounding-icon.png
new file mode 100644
index 0000000..6aaa21e
Binary files /dev/null and b/static/imgs/mall/grounding-icon.png differ
diff --git a/static/imgs/mall/sold-out-icon.png b/static/imgs/mall/sold-out-icon.png
new file mode 100644
index 0000000..fbb9b7c
Binary files /dev/null and b/static/imgs/mall/sold-out-icon.png differ
diff --git a/static/imgs/mall/zsc-bg-icon.png b/static/imgs/mall/zsc-bg-icon.png
new file mode 100644
index 0000000..d94e257
Binary files /dev/null and b/static/imgs/mall/zsc-bg-icon.png differ