diff --git a/package.json b/package.json
index 3765ef1bc..25f358c16 100644
--- a/package.json
+++ b/package.json
@@ -55,4 +55,4 @@
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.10"
   }
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index 385b4a26b..23b59b22b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,5 +17,6 @@
     <!-- built files will be auto injected -->
     <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> -->
     <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
+   
   </body>
 </html>
diff --git a/src/assets/images/u10211.jpg b/src/assets/images/u10211.jpg
new file mode 100644
index 000000000..106bd78d2
Binary files /dev/null and b/src/assets/images/u10211.jpg differ
diff --git a/src/assets/images/u10213.png b/src/assets/images/u10213.png
new file mode 100644
index 000000000..0d9a2f2d9
Binary files /dev/null and b/src/assets/images/u10213.png differ
diff --git a/src/assets/images/u10247.png b/src/assets/images/u10247.png
new file mode 100644
index 000000000..94fdf1c37
Binary files /dev/null and b/src/assets/images/u10247.png differ
diff --git a/src/assets/images/u10280.png b/src/assets/images/u10280.png
new file mode 100644
index 000000000..654bed3bb
Binary files /dev/null and b/src/assets/images/u10280.png differ
diff --git a/src/assets/images/u10608.svg b/src/assets/images/u10608.svg
new file mode 100644
index 000000000..3b038fea8
--- /dev/null
+++ b/src/assets/images/u10608.svg
@@ -0,0 +1 @@
+<svg t="1567079553293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20073" width="200" height="200"><path d="M358.419788 392.527249c0-37.683671-30.557838-68.26503-68.256849-68.26503-37.700034 0-68.257872 30.582382-68.257872 68.26503 0 37.715373 30.557838 68.26503 68.257872 68.26503C327.86195 460.793302 358.419788 430.242622 358.419788 392.527249zM733.847287 324.262218c-37.699011 0-68.267076 30.582382-68.267076 68.26503 0 37.715373 30.568065 68.26503 68.267076 68.26503s68.256849-30.55068 68.256849-68.26503C802.104137 354.843577 771.546298 324.262218 733.847287 324.262218zM511.999489 0c-282.737469 0-511.94222 229.212932-511.94222 511.991307s229.204751 512.008693 511.94222 512.008693 511.943243-229.229295 511.943243-512.008693S794.736958 0 511.999489 0zM511.999489 972.783586c-254.462188 0-460.743192-206.313728-460.743192-460.792279 0-254.478551 206.279981-460.775917 460.743192-460.775917 254.463211 0 460.75035 206.297366 460.75035 460.775917C972.749839 766.469858 766.463722 972.783586 511.999489 972.783586zM512.066984 597.339725c-154.214767 0-204.796114 136.532106-204.796114 136.532106l51.199028 0c0 0 39.032548-85.331032 153.597085-85.331032 116.072948 0 153.597085 85.331032 153.597085 85.331032l51.198006 0C716.863098 733.871831 666.28175 597.339725 512.066984 597.339725z" p-id="20074" fill="#1296db"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 0172d03f1..59c61558d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,8 @@ import noMoreClick from '@/directive/noMoreClick'
 //全局注册vant常用组件
 import { Toast, Button, Dialog, Icon } from 'vant'
 
+
+
 Vue.use(Icon)
 
 Vue.use(Toast)
diff --git a/src/router/ebiz/cardList.js b/src/router/ebiz/cardList.js
index e65351aae..c5237ea8a 100644
--- a/src/router/ebiz/cardList.js
+++ b/src/router/ebiz/cardList.js
@@ -1,5 +1,10 @@
 // 卡单路由
 const information = () => import('@/views/ebiz/cardList/information')
+const CardTotreasure  = () => import('@/views/ebiz/cardList/CardTotreasure')
+const productDetails  = () => import('@/views/ebiz/cardList/productDetails')
+const Pay  = () => import('@/views/ebiz/cardList/Pay')
+const PaySuccess  = () => import('@/views/ebiz/cardList/PaySuccess')
+const PayLoser  = () => import('@/views/ebiz/cardList/PayLoser')
 export default [
   {
     path: '/cardList/information',
@@ -9,5 +14,50 @@ export default [
       title: '投被保人信息',
       index: 1
     }
+  },
+  {
+    path: '/cardList/CardTotreasure',
+    name: 'CardTotreasure',
+    component: CardTotreasure,
+    meta: {
+      title: '卡单列表'
+      
+    }
+  },
+  {
+    path: '/cardList/productDetails',
+    name: 'productDetails',
+    component: productDetails,
+    meta: {
+      title: '卡单详情'
+      
+    }
+  },
+  {
+    path: '/cardList/Pay',
+    name: 'Pay',
+    component: Pay,
+    meta: {
+      title: '支付信息'
+      
+    }
+  },
+  {
+    path: '/cardList/PaySuccess',
+    name: 'PaySuccess',
+    component: PaySuccess,
+    meta: {
+      title: '支付成功'
+      
+    }
+  },
+  {
+    path: '/cardList/PayLoser',
+    name: 'PayLoser',
+    component: PayLoser,
+    meta: {
+      title: '支付失败'
+      
+    }
   }
 ]
diff --git a/src/router/index.js b/src/router/index.js
index 5dbe9258e..a0e5531e2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,8 +2,11 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import App from './app'
 import Example from './example'
+
 import Ebiz from './ebiz'
 
+
+
 Vue.use(Router)
 
 const constantRouterMap = [...App, ...Example, ...Ebiz] //后续可以删减模块
diff --git a/src/views/ebiz/cardList/CardTotreasure.vue b/src/views/ebiz/cardList/CardTotreasure.vue
new file mode 100644
index 000000000..d785883ca
--- /dev/null
+++ b/src/views/ebiz/cardList/CardTotreasure.vue
@@ -0,0 +1,228 @@
+<template>
+	<div class="kadantoubao-wxa">
+		<!-- <div class="header"><img src="../../static/shouye/u1.png" /></div> -->
+		<div class="kadantaobao-box">
+
+			<div class="kadantoubao-wxa-header">
+
+				<div class="nav">
+					<van-icon name="arrow-left" />
+					<p><span>卡单产品</span></p>
+				</div>
+				<div class="Tab">
+					<div class="tab" v-for="(item,index) in arr" :key='index' @click="fnTab(index)">
+						<span :class="{ac:iNow==index}">{{item}}</span>
+					</div>
+				</div>
+
+				<div class="show">
+				<ul class="kadanchanping-ul" :style="(this.iNow==0) ? 'display:inline-block':'display:none' " >
+					<li v-for="(itemIcon,index) in list" :key='index'>
+						<div>
+						 
+						 <img src="../../../assets/images/u10247.png" alt="">
+						</div>
+						<div>
+							<p>{{itemIcon.p}}</p>
+							<span>{{itemIcon.span}}</span>
+						</div>
+					</li>
+				</ul>
+				<ul class="wodekadan-ul" :style="(this.iNow==1) ? 'display:inline-block':'display:none' ">
+					<li v-for="(itemiNow,index) in tAb" :key='index'>
+						<p>{{itemiNow.h}}</p>
+						<span>{{itemiNow.span1}}</span>
+						<span>{{itemiNow.span2}}</span>
+						<span>{{itemiNow.span3}}</span>
+						<span>{{itemiNow.span4}}</span>
+					</li>
+				</ul>
+			</div>
+
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'kadantoubao.vue',
+		data() {
+			return {
+				arr: [
+					'产品列表',
+					'我的卡单'
+				],
+				list: [{
+						url: 'img/u10247.png',
+						p: '学生平安保险（小学，初中）',
+						span: '保险费地，为孩子提供全方位的风险保障'
+					},
+					{
+						url: 'images/u10247.png',
+						p: '学生平安保险（高中，高等教育）',
+						span: '保险费地，为孩子提供全方位的风险保障'
+					}
+
+				],
+				iNow: 0,
+				tAb: [
+				{
+					h: '国家安全出行2.0',
+					span1: '保单号：1297793740298',
+					span2: '卡号：1297793740298',
+					span3: '生效日期：2019-08-22',
+					span4: '出单日期：2019-08-22  17:19:22'
+				},
+				{
+					h: '国家安全出行2.0',
+					span1: '保单号：1297793740298',
+					span2: '卡号：1297793740298',
+					span3: '生效日期：2019-08-22',
+					span4: '出单日期：2019-08-22  17:19:22'
+				},
+				{
+					h: '国家安全出行2.0',
+					span1: '保单号：1297793740298',
+					span2: '卡号：1297793740298',
+					span3: '生效日期：2019-08-22',
+					span4: '出单日期：2019-08-22  17:19:22'
+				}
+				]
+			}
+		},
+		methods: {
+			fnTab(index) {
+        this.iNow = index;
+        console.log(this.iNow);
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style scoped>
+	.wodekadan-ul{
+		width:100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.wodekadan-ul li{
+		display: flex;
+		flex-direction: column;
+		width: 7.2rem;
+		height: 2.48rem;
+		border: 0.02rem solid #DADADA;
+		padding-left: 0.3rem;
+		padding-top: 0.3rem;
+		
+	}
+	.wodekadan-ul li p{
+		font-size: 0.3rem;
+		margin-bottom: 0.24rem;
+	}
+	.wodekadan-ul li span{
+		font-size: 0.22rem;
+		color: #999999;
+	}
+	.Tab {
+		width: 100%;
+		display: flex;
+		height: 0.6rem;
+		background-color: #F2F2F2;
+	}
+	
+	.tab {
+		width: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.kadanchanping-ul {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.kadanchanping-ul>li {
+		width: 100%;
+		display: flex;
+		height: 2rem;
+		border: 0.02rem solid #CCCCCC;
+	}
+	
+	.kadanchanping-ul>li img {
+		width: 2.34rem;
+		height: 1.3rem;
+	}
+	
+	.kadanchanping-ul li div:nth-of-type(1) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.kadanchanping-ul li>div:nth-of-type(2) {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		justify-content: space-between;
+		padding: 0.3rem 0.1rem;
+	}
+	
+	.kadanchanping-ul li>div:nth-of-type(2) p {
+		font-weight: bold;
+		font-size: 0.3rem;
+	}
+	
+	.kadanchanping-ul li>div:nth-of-type(2) span {
+		color: #B5B5B5;
+		font-size: 0.22rem;
+	}
+	
+	.ac {
+		border-bottom: 0.04rem solid #1296DB;
+		color: #1296DB;
+	}
+	
+	.nav {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding-left: 0.2rem;
+		height: 0.9rem;
+	}
+	
+	.kadantoubao-wxa {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.header>img {
+		width: 100%;
+	}
+	
+	.kadantaobao-box {
+		width: 95%;
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto;
+	}
+	
+	.kadantoubao-wxa-header {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+		font-size: 0.26rem;
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/ebiz/cardList/Pay.vue b/src/views/ebiz/cardList/Pay.vue
new file mode 100644
index 000000000..7c7836047
--- /dev/null
+++ b/src/views/ebiz/cardList/Pay.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="pay">
+ 
+    <van-cell-group>
+      <van-field v-model="productName" clearable label="产品名称" placeholder="请输入产品名称"  class="projuct"/>
+      <van-field v-model="paymentAmount" clearable label="支付金额" placeholder="请输入支付金额" />
+      <!-- 银行卡支付开始 -->
+      <van-cell-group>
+  <van-field v-model="value" placeholder="请输入用户名" />
+
+           <div class="money">
+          <div><img src="../../../assets/images/u10280.png" alt="">
+           <span>银行卡支付</span>
+           </div>
+           <van-checkbox v-model="checked" style="margin-right:0.3rem;margin-top:0.1rem;"></van-checkbox>
+           </div>
+           </van-cell-group>
+      </van-radio-group>
+      <!-- 银行卡支付结束 -->
+      <van-field v-model="userName" type="text" label="账户姓名" placeholder="请输入" required />
+      
+      <van-cell-group>
+  <van-field
+    v-model="sms"
+    center
+    clearable
+    label="银行卡号"
+    placeholder="请输入"
+  >
+    <van-button slot="button" size="small" type="info" class="btn">银行卡扫描</van-button>
+  </van-field>
+</van-cell-group>
+      <van-field v-model="bankDeposit" type="text" label="开户银行" placeholder="请选择" required />
+
+ 
+      
+     
+     
+    
+  </van-field>
+
+    </van-cell-group>
+    
+ 
+    <van-button type="info" size="large" class="payBtn"   @click="Pay()">支付</van-button>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { Field } from 'vant';
+import { Checkbox, CheckboxGroup } from 'vant';
+
+Vue.use(Checkbox).use(CheckboxGroup);
+Vue.use(Field);
+export default {
+  name: "pay",
+  data() {
+    return {
+      productName: "国家安全富兴2.0",
+      paymentAmount: "",
+      radio: "",
+      userName:"",
+      bankCardNumber:"",
+      bankDeposit:"",
+      checked:true
+    };
+  },
+  methods:{
+  	Pay(){
+  		this.$router.push('/cardList/PaySuccess')
+  	}
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.btn{
+  border-radius: 10em;
+}
+.projuct{
+  input{
+    font-weight: bold;
+  }
+}
+.money{
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 1.8rem;
+  z-index: 10;
+  left: 0rem;
+width: 100%;
+background: white;
+justify-content: space-between;
+ 
+}
+
+.money>div:nth-of-type(1){
+  display: flex;
+  align-items: center;
+  margin-left: 0.4rem;
+  justify-content: center;
+  img{
+     width: 0.64rem;
+     height: 0.64rem;
+  }
+  span{
+    padding-top: 0.15rem;
+    box-sizing: border-box;
+  }
+}
+span{
+  font-size: 0.3rem;
+}
+a {
+  font-size: 0.38rem;
+}
+.payBtn{
+  margin-top:4.5rem;
+}
+</style>
diff --git a/src/views/ebiz/cardList/PayLoser.vue b/src/views/ebiz/cardList/PayLoser.vue
new file mode 100644
index 000000000..bdf2d23dd
--- /dev/null
+++ b/src/views/ebiz/cardList/PayLoser.vue
@@ -0,0 +1,32 @@
+<template>
+   <div class="PayLo
+   ser">
+       <div>
+       <img src="../../../assets/images/u10608.svg" alt="">
+       <p>支付失败</p>
+       </div>
+        <van-button type="info" size="large" class="payBtn">返回首页</van-button>
+       </div> 
+</template>
+
+<script>
+export default {
+      
+}
+</script>
+
+<style scoped>
+*{
+    margin: 0;
+    padding: 0;
+}
+ .PayLoser{
+     display: flex;
+     flex-direction:column;
+    justify-content: space-between;
+ }
+    img{
+        width:2rem;
+        height: 2rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/ebiz/cardList/PaySuccess.vue b/src/views/ebiz/cardList/PaySuccess.vue
new file mode 100644
index 000000000..4d7f9345f
--- /dev/null
+++ b/src/views/ebiz/cardList/PaySuccess.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="paySuccess">
+   <!-- <a href="javascript:;">＜ 支付结果</a>-->
+    <div class="paySucc">
+      <van-icon name="passed" size="1.5rem" color="blue"/>
+    </div>
+    <van-cell-group>
+      <van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
+      <van-field v-model="paymentAmount" clearable label="支付金额" placeholder="100.00元" />
+      <van-field v-model="bankCardNumber" clearable label="卡号" placeholder="1297793740298" />
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'paySuccess',
+  data () {
+    return {
+      productName: "",
+      paymentAmount: "",
+      bankCardNumber:""
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+a {
+  font-size: 0.38rem;
+}
+.paySucc{
+  width: 100%;
+  height: 5rem;
+  text-align:center;
+  line-height:5rem;
+  border-top: 0.01rem solid #ccc;
+  border-bottom: 0.15rem solid rgb(235, 233, 233);
+}
+
+</style>
diff --git a/src/views/ebiz/cardList/productDetails.vue b/src/views/ebiz/cardList/productDetails.vue
new file mode 100644
index 000000000..5c17613f7
--- /dev/null
+++ b/src/views/ebiz/cardList/productDetails.vue
@@ -0,0 +1,160 @@
+<template>
+	<div class="chanpingxiangqing-wxa">
+		<div class="nav">
+					<van-icon name="arrow-left" />
+					<p><span>卡单产品</span></p>
+		</div>
+		<div class="header">
+			
+
+			<img src="../../../assets/images/u10211.jpg"/>
+			<img src="../../../assets/images/u10213.png"/>
+		</div>
+		<div class="tit">
+			<div class="tit-header"><p class="shuGang"></p><figure>理赔流程</figure></div>
+			<ul>
+				<li v-for="(item,index) in oUl" :key='index'>
+					<div>
+						<span>{{item.num}}</span>
+					</div>
+					<div>
+						<p>{{item.tiaojian}}</p>
+						<span>{{item.iCon}}</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+		<footer>
+			 <div><span>保险条款</span><a href="javascipt:">查看</a></div>
+			<van-button  type="danger" size="large">下一步</van-button>
+		</footer>
+	</div>
+</template>
+
+<script>
+	export default{
+		name:'Chanpingxiangqing.vue',
+		data(){
+			return{
+				oUl:[
+				{
+					num:'1',
+					tiaojian:'申请理赔',
+					iCon:'致电保险公司客服申请理赔'
+				},
+				{
+					num:'2',
+					tiaojian:'提交材料',
+					iCon:'按保险条约约定准备相应理赔资料'
+				},
+				{
+					num:'3',
+					tiaojian:'理赔审核',
+					iCon:'保险公司进行理赔资料审核'
+				},
+				{
+					num:'4',
+					tiaojian:'获得赔款',
+					iCon:'保险公司支付客户赔款'
+				}
+				]
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	footer{
+		display: flex;
+		flex-direction: column;
+	}
+	footer a{
+		color: #949494;
+	}
+	footer>div{
+		display: flex;
+		height:0.7rem;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0rem 0.3rem;
+	}
+	figure{
+		margin-left: 0.3rem;
+	}
+	.tit-header{
+		display: flex;
+		align-items: center;
+		margin: 0.2rem 0.3rem;
+	}
+	.tit ul{
+		display: flex;
+		flex-direction: column;
+	}
+	.tit li{
+		display: flex;
+		margin: 0.2rem;
+	}
+	.tit li >div:nth-of-type(2) p{
+	color: #6A7C90;
+	font-size: 0.28rem;	
+	font-weight: bold;
+	}
+	.tit li>div:nth-of-type(2){
+		margin-left: 0.3rem;
+	}
+	.tit li >div:nth-of-type(2) span{
+		color: #B1BFCE;
+		
+	}
+	.tit li>div:nth-of-type(1) >span{
+		box-sizing: content-box !important;
+		padding: 0.1rem 0.2rem;
+		border: 1px solid red;
+		border-radius: 50%;
+		background-color: #DFEAF8;
+		border: 0.04rem solid #9CC2EE;
+		color: #84B4EB;
+			}
+	.shuGang{
+		width: 0.08rem;
+		height: 0.5rem;
+		background-color: #4A90E2;
+	}
+	.nav{
+			width: 100%;
+		display: flex;
+		align-items: center;
+		padding-left: 0.2rem;
+		height: 0.9rem;
+	}
+	*{
+		font-size: 0.3rem;
+		margin: 0;
+		padding: 0;
+	}
+	html,body,.chanpingxiangqing-wxa{
+		margin: 0;padding: 0;
+		box-sizing: border-box;
+		
+	}
+	.chanpingxiangqing-wxa{
+		display: flex;
+		width: 7.5rem;
+		flex-direction: column;
+	}
+	.header{
+		width: 100%;
+		
+	}
+	.header>img{
+		width: 100%;
+		
+	}
+	.header>img:nth-of-type(1){
+		height: 6.9rem;
+	}
+	.header>img:nth-of-type(2){
+		height: 38rem;
+	}
+	
+</style>
\ No newline at end of file