diff --git a/.eslintrc.js b/.eslintrc.js
index 09d40e3ad912050ea8e4d5bff90fcb1ebacf83b4..9c708b51874249298cdcb1020eac31321e5e2f22 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,7 +10,7 @@ module.exports = {
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no- ": process.env.NODE_ENV === "production" ? "warn" : "off",
     "prettier/prettier": [
       "error",
       {
diff --git a/package.json b/package.json
index a0e3292f8e29c5a62e02b53bde31ebbf1d76f523..50d6b92d3a99315c333ee9416b8c38f74568f6c0 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "vue-property-decorator": "^9.1.2",
     "vue-qr": "^3.2.4",
     "vue-router": "^3.2.0",
-    "vuex": "^3.5.1"
+    "vuex": "^3.5.1",
+    "element-ui": "^2.4.6"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
diff --git a/src/assets/images/Deposit.png b/src/assets/images/Deposit.png
new file mode 100644
index 0000000000000000000000000000000000000000..785d676a0858bb854030e85b52310c0fe91c1f7f
Binary files /dev/null and b/src/assets/images/Deposit.png differ
diff --git a/src/assets/images/Interest.png b/src/assets/images/Interest.png
new file mode 100644
index 0000000000000000000000000000000000000000..1aa628a3541a9ddf27ed655e4e0fd429cc8aabcb
Binary files /dev/null and b/src/assets/images/Interest.png differ
diff --git a/src/assets/images/Login.png b/src/assets/images/Login.png
new file mode 100644
index 0000000000000000000000000000000000000000..131d5a2da4caf8122585e704ec628656993de3d2
Binary files /dev/null and b/src/assets/images/Login.png differ
diff --git a/src/assets/images/backageImg.png b/src/assets/images/backageImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e698c8bd322a4c7fcc5f1c91859e875e445fe14a
Binary files /dev/null and b/src/assets/images/backageImg.png differ
diff --git a/src/assets/images/background-card.png b/src/assets/images/background-card.png
new file mode 100644
index 0000000000000000000000000000000000000000..62f7e1cb2cbb277c04f2b6e306e41b98feaba12e
Binary files /dev/null and b/src/assets/images/background-card.png differ
diff --git a/src/assets/images/coupon.png b/src/assets/images/coupon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c5cf49421ce87b1c684ddbb58ba71bcb5b1ac78
Binary files /dev/null and b/src/assets/images/coupon.png differ
diff --git a/src/assets/images/login1.png b/src/assets/images/login1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5585b9117b0b9f833ed33ed6b2d4f5e609b55da7
Binary files /dev/null and b/src/assets/images/login1.png differ
diff --git a/src/assets/images/mycard.png b/src/assets/images/mycard.png
new file mode 100644
index 0000000000000000000000000000000000000000..7aceb0e303035ce8c51408e1eb1e60a791cf8f63
Binary files /dev/null and b/src/assets/images/mycard.png differ
diff --git a/src/assets/images/stars.png b/src/assets/images/stars.png
new file mode 100644
index 0000000000000000000000000000000000000000..24d36a0eae90bddbee69c07d9ca33f447ad0eb54
Binary files /dev/null and b/src/assets/images/stars.png differ
diff --git a/src/components/common/Bottom.vue b/src/components/common/Bottom.vue
index 8133d9e82014cbf0d6f1a252c8e9a594719afe73..cba9ef616e958b40def2974ff994372a237af001 100644
--- a/src/components/common/Bottom.vue
+++ b/src/components/common/Bottom.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-07 16:13:13
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 20:43:56
+ * @LastEditTime: 2022-07-11 18:19:25
  * @FilePath: \mcep-h5\src\components\common\Bottom.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -25,15 +25,12 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
-import MainViw from "@/views/main/MainView.vue";
+//import MainViw from "@/views/main/MainView.vue";
 /*
 * title
 */
 @Component({
   name: "Bottom",
-  components: {
-    MainViw,
-  }
 })
 export default class Bottom extends Vue {
   myBtnImage: any = "#icon-a-wode24x24px-kehujinglixiaochengxu";
diff --git a/src/components/common/CardPottom.vue b/src/components/common/CardPottom.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97539efaa54032cf3b04cc2e980cbb44988af788
--- /dev/null
+++ b/src/components/common/CardPottom.vue
@@ -0,0 +1,101 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-12 10:47:05
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <!-- <div> -->
+  <div class="roolsolt" style="background-image:url(require('@/assets/images/mycard.png'))">
+    <div >
+    <van-row type="flex" class="title">
+      <van-col  span="24" >累计贷款金额（元）</van-col>
+    </van-row>
+    <van-row type="flex" class="mumMoney">
+      <van-col offset="4" span="11" class="money">100,000,00</van-col>
+      <van-col span="9" class="moneytitle">壹佰元整</van-col>
+    </van-row>
+    <van-row type="flex" justify="center" class="integral">
+      <van-col span="8">2456</van-col>
+      <van-col span="8">12</van-col>
+      <van-col span="8">10</van-col>
+    </van-row>
+    <van-row type="flex" justify="center" class="integrall">
+      <van-col span="8">我的积分</van-col>
+      <van-col span="8">卡券</van-col>
+      <van-col span="8">我的特权</van-col>
+    </van-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "CardPottom"
+})
+export default class CardPottom extends Vue {
+
+}
+</script>
+<style scoped lang="scss">
+.roolsolt{
+  background-image:url("../../assets/images/mycard.png");
+  width:100%;
+  height:40%;
+}
+.title {
+  font-size: 14px;
+  text-align: left;
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #999999;
+  margin-left: 10%;
+  margin-top: 5%;
+}
+.mumMoney{
+  margin:5% auto;
+}
+
+
+.money {
+  font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体', sans-serif;
+  font-style: normal;
+  font-size: 28px;
+  color: #FF9921;
+  margin-left: 10%;
+}
+
+.moneytitle {
+  color: #FFA121;
+  text-align: left;
+  font-size: 14px;
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-style: normal;
+  margin-top: 5%;
+}
+
+.integral {
+  text-align: center;
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  letter-spacing: normal;
+  color: #333333;
+
+}
+
+.integrall {
+  text-align: center;
+  font-size: 12px;
+  color: #999999;
+}
+</style>
diff --git a/src/components/common/CardUnLogin.vue b/src/components/common/CardUnLogin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..82426e2dc78a000242da71a6019fcc5fafb8e2bb
--- /dev/null
+++ b/src/components/common/CardUnLogin.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-12 14:40:44
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <!-- <div> -->
+  <div class="roolsolt" style="background-image:url(require('@/assets/images/mycard.png'))">
+    <div >
+    <van-row type="flex" class="unlogintitle">
+      <van-col  span="24" class="title">请登录查看您的贷款信息</van-col>
+    </van-row>
+    <van-row type="flex" justify="center" class="integral">
+      <van-col span="24"><van-button type="info" @click="loginIn()">立即登录</van-button></van-col>
+    </van-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "CardUnLogin"
+})
+export default class CardUnLogin extends Vue {
+//立即登录
+loginIn(){
+  this.$router.push({
+      path: "/login",
+  })
+}
+}
+</script>
+<style scoped lang="scss">
+.roolsolt{
+  background-image:url("../../assets/images/mycard.png");
+  width:100%;
+  height:40%;
+}
+.title{
+    margin-top: 10%;
+    font-size: 20px;
+    font-family: 'Arial Normal', 'Arial', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    color: #333333;
+    vertical-align: none;
+    text-align: center;
+    line-height: normal;
+    text-transform: none;   
+}
+.integral{
+      margin-top: 10%;
+    /* margin-left: 20%; */
+    text-align: center;
+}
+
+</style>
diff --git a/src/components/common/LittleCard.vue b/src/components/common/LittleCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c35ade92d745f9b80d2d1cf95217d8acd5c8709b
--- /dev/null
+++ b/src/components/common/LittleCard.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 16:24:00
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-12 14:08:47
+ * @FilePath: \mcep-h5\src\components\common\Tatle.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <!-- <div> -->
+  <div class="d-tattle">
+    <div class="litterParam" v-for="(item, index) in litterParam" :key="index">
+      <van-row class="vanrow">
+        <van-col span="20" class="priductName">
+          <svg class="icon" aria-hidden="true">
+            <!--图片传入进来-->>
+            <use :xlink:href="item.img"></use>
+          </svg>
+          {{ item.productname }}
+        </van-col>
+        <van-col span="4" class="imglittle">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-xiayiye24x24px"></use>
+          </svg>
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "LittleCard",
+})
+export default class LittleCard extends Vue {
+  @Prop({ default: "" }) litterParam: any | [] //列表信息
+}
+</script>
+<style scoped lang="scss">
+.d-tattle {
+  margin-top: 28%;
+}
+.priductName{
+   padding-top: 2%;
+}
+
+.imglittle{
+ padding-top: 2%;
+}
+.litterParam {
+  width: 90%;
+  margin: 0px auto;
+  background-color: rgba(255, 255, 255, 1);
+  border: none;
+  border-radius: 4px;
+  -moz-box-shadow: 0px 0px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  height: 40px;
+
+}
+
+.vanrow {
+  margin-top: 6%;
+  margin-left: 2%;
+}
+
+.tatle {
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+}
+</style>
diff --git a/src/components/common/Person.vue b/src/components/common/Person.vue
index e3f8f8906176b0cbb10ee22e03ebb8c5f1b7b014..c08655203ff999efc6fab66ae57fced937f35e9b 100644
--- a/src/components/common/Person.vue
+++ b/src/components/common/Person.vue
@@ -2,18 +2,78 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 16:24:00
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 20:47:51
+ * @LastEditTime: 2022-07-14 13:54:18
  * @FilePath: \mcep-h5\src\components\common\Tatle.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="tool">
-    <van-row class="titleNo">
-      <van-col span="24" class="title">{{ title }}</van-col>
-    </van-row>
-     <van-row class="titleNo">
-      <van-col span="24" class="title">{{ title }}</van-col>
-    </van-row>
+
+    <!-- <van-row class="titlelperson">
+      <van-col span="24" class="title">{{ title }}</van-col> -->
+
+    <!-- <van-row>
+        <van-col span="8">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-touxiang"></use>
+          </svg>
+        </van-col>
+         <van-row>
+          <van-col span="8">{{ param.name }}</van-col>
+          <van-col span="8">{{ param.live }}</van-col>
+          <van-col span="8">成长值{{ param.grow }}</van-col>
+        </van-row> 
+        
+         <van-row>
+          <van-col span="24">
+            <svg class="icon" aria-hidden="true">
+               <use xlink:href="#icon-touxiang"></use>
+           </svg>
+        </van-col>
+        </van-row>
+        
+      </van-row> -->
+    <!-- 两端对齐 -->
+    <div class="d-flex flex-column">
+      <div class="p-2 " style="margin: 0px auto;font-size: 18px;color: #ffffff;">{{ title }}</div>
+      <div class="d-flex p-3  text-white" v-if="!login">
+        <div class="p-2 " style="width: 62px;height: 62px;">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-touxiang"></use>
+          </svg>
+        </div>
+        <div class="" style="width: 100%;margin-top: 10%;margin-left: 3%;">
+          <div class="d-flex flex-column">
+            <div class="" style="font-size: 16px;font-weight: 900;">{{ param.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex p-3  text-white" v-if="login">
+        <div class="p-2 " style="width: 62px;height: 62px;">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-touxiang"></use>
+          </svg>
+        </div>
+        <div class="" style="width: 100%;margin-top: 2%;margin-left: 6%;">
+          <div class="d-flex flex-column">
+            <div class="" style="font-size: 16px;font-weight: 900;">{{ param.name }}
+            </div>
+            <div class="d-flex  " style="width: 100%;">
+              <div class="live ">
+                {{ param.live }}</div>
+              <div class=" ml-auto " @click="pushStarts()"><img class="imgstar" src="../../assets/images/stars.png" alt=""></div>
+            </div>
+            <div class=""
+              style="background-color: #ffffff;  border-radius: 4px; color: #FE6B1B; width: 90px; font-size: 12px;text-align: center;margin-top: 4px;">
+              成长值{{ param.grow }}
+              <van-icon name="arrow" class="arrow" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -27,16 +87,50 @@ import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 })
 export default class Person extends Vue {
   @Prop({ default: "" }) title: string | undefined; // 页面标题
+  @Prop({ default: "" }) param: any | undefined; // Name
+  @Prop({ default: "" }) starname: string | undefined; // 星星
+  @Prop({ default: "" }) grow: string | undefined; // 成长
+  @Prop({ default: false }) login: boolean | undefined; // 是否登录
+
+  //星星的点击事件
+  pushStarts(){
+    this.$router.push({
+      name:"level"
+    })
+  }
 
 }
 </script>
 <style scoped lang="scss">
+.live {
+  background-color: rgb(255, 187, 21);
+  border-radius: 4px;
+  line-height: 26px;
+  width: 70px;
+  font-size: 12px;
+  text-align: center;
+  height: 25px;
+}
+
 .tool {
 
   height: 100%;
   background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
 }
 
+.namePerson {
+  text-align: left;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-left: 4%;
+  margin-top: 3%;
+}
+
+.imgstar {
+  width: 30px;
+  height: 30px;
+}
+
 .title {
   margin: 4% auto 5% 0%;
   font-size: 18px;
@@ -48,16 +142,34 @@ export default class Person extends Vue {
   height: 100%;
   text-align: center;
 }
-.icon{
-    width: 32px;
-    height: 32px;
+
+.arrow {
+  font-size: 12px;
+  color: #FE6B1B;
+  text-align: left;
+}
+
+.icon {
+  //    width: 62px;
+  //   height: 62px;
+  // padding-bottom: 50%;
+  // padding-left: 2%;
+  width: 62px;
+  height: 62px;
+  // padding-bottom: 50%;
+  /* padding-left: 2%; */
+  //margin: 14% auto;
 }
 
 .imglocal {
-  text-align: center;
-  font-size: 12px;
+  text-align: right;
   font-size: 12px;
-   color: #FFFFFF;
+  color: #FFFFFF;
+}
+
+.wiandle {
+  margin-left: 24%;
+  width: 30%;
 }
 
 .img {
diff --git a/src/components/common/Picket.vue b/src/components/common/Picket.vue
index e51ba83177181f3295de36993641891d0b295a80..6f8a3695e61ab8d4d4066f6e1a58a9173be8b370 100644
--- a/src/components/common/Picket.vue
+++ b/src/components/common/Picket.vue
@@ -2,14 +2,14 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 16:24:00
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 18:42:19
+ * @LastEditTime: 2022-07-12 15:54:23
  * @FilePath: \mcep-h5\src\components\common\Tatle.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <!-- <div> -->
   <div class="d-tatle">
-    <div class="card">
+    <div class="card" @click="onClickPicket()">
       <van-row>
         <van-col span="24" class="priductName">{{ productname }}</van-col>
       </van-row>
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
 /*
 * title
 */
@@ -44,6 +44,9 @@ export default class Picket extends Vue {
   @Prop({ default: "" }) limitrange: string | undefined //额度范围
   @Prop({ default: "" }) interestrate: string | undefined //利率
   @Prop({ default: "" }) loanterm: string | undefined //贷款期限
+  //调用父组件的值
+  @Emit("onClickPicket")
+  onClickPicket(){}
 
 }
 </script>
@@ -51,7 +54,7 @@ export default class Picket extends Vue {
 .card { 
   height: 130px;
         width: 98%;
-    margin: 10px auto;
+    margin: 0% auto;
     background: inherit;
     background-color: rgba(255, 255, 255, 1);
     border: none;
diff --git a/src/components/common/ProductCard.vue b/src/components/common/ProductCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f051b949d3b1d137ab4c2a237a8ad2c553201e2
--- /dev/null
+++ b/src/components/common/ProductCard.vue
@@ -0,0 +1,115 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-13 17:58:57
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <!-- <div> -->
+  <div class="roolsolt">
+    <div class="rool">
+      <van-row type="flex" >
+        <van-col span="24" class="title">最高贷款额度</van-col>
+      </van-row>
+      <van-row type="flex" justify="center" class="integral">
+        <van-col span="24" style="font-size: 24px;font-weight: 900;">{{ money }}</van-col>
+      </van-row>
+      <van-row type="flex" justify="center" class="integrall">
+        <van-col span="24">{{ moneyName }}</van-col>
+      </van-row>
+      <van-row type="flex" justify="center" class="button">
+        <van-col span="24">
+          <van-button type="info" @click="lodiing()">立即申请</van-button>
+        </van-col>
+      </van-row>
+    </div>
+    <div>
+      <van-collapse v-model="activeNames" style="    margin-top: 20%;
+    border: 1px solid;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    margin: 20% auto;
+    box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);
+    ">
+          <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
+          <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
+          <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
+        </van-collapse>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "ProductCard"
+})
+export default class ProductCard extends Vue {
+  @Prop({ default: "" }) money: string | undefined; //额度
+  @Prop({ default: "" }) moneyName: string | undefined;//额度大写
+  //立即登录
+activeNames=["1"];
+  lodiing() {
+    this.$router.push({
+      path: "/Recognition",
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.div{
+  
+}
+.roolsolt {
+  width: 90%;
+  margin: 0px auto;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.title {
+  margin-top: 10%;
+  font-size: 14px;
+  text-align: center;
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  color: #999999;
+  vertical-align: none;
+  text-align: center;
+  line-height: normal;
+  text-transform: none;
+}
+
+.integral {
+  //margin-top: 10%;
+  /* margin-left: 20%; */
+  text-align: center;
+
+  font-size: 36px;
+  color: #FFA121;
+}
+
+.integrall {
+  //margin-top: 10%;
+  /* margin-left: 20%; */
+  text-align: center;
+  color: #FFA121;
+  font-size: 14px;
+}
+
+.button {
+  //margin-top: 10%;
+  /* margin-left: 20%; */
+  text-align: center;
+  font-size: 14px;
+  color: #FFFFFF;
+}
+</style>
diff --git a/src/components/common/ProductDetail.vue b/src/components/common/ProductDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28230d68478026fb065ec11160374bef59b61744
--- /dev/null
+++ b/src/components/common/ProductDetail.vue
@@ -0,0 +1,61 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-04 16:24:00
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-13 16:04:20
+ * @FilePath: \mcep-h5\src\components\common\Tatle.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <!-- <div class="d-flex ">
+     <van-row type="flex" class="vanrow">
+      <van-col span="24" class="productName" style="margin-left: 10%; margin-top:10%">金融消费贷</van-col>
+    </van-row>
+    <div class="producy">
+      <van-collapse v-model="activeNames">
+        <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
+        <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
+        <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
+      </van-collapse>
+    </div>  
+  </div> -->
+  <div class="d-flex flex-column loop" >
+      <div class="p-2 " ><van-icon name="arrow-left" /></div>
+      <div class="p-2 " style="width:100%;height:70%;">{{productName}}</div>
+      
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "ProductDetail",
+})
+export default class ProductDetail extends Vue {
+  //路由传值产品名称
+  @Prop({ default: "" }) productName: string | undefined;
+  
+  imagenAME: any=require('@/assets/images/background-card.png');
+}
+</script>
+<style scoped lang="scss">
+// .vanrow{
+//   margin-top: 5%;
+//   margin-left: 5%;
+// }
+.loop {
+  background-image: url("../../assets/images/background-card.png");
+  background-size: 100%;
+}
+.productName{
+   font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    color: rgb(255, 255, 255);
+    border-width: 0px;
+}
+</style>
diff --git a/src/components/common/Tatle.vue b/src/components/common/Tatle.vue
index 0f495245b53eeb77a7fbc95f26f7ea83c13c2546..88fafff97235d47a9389cc7fb2f1b526ddd48a41 100644
--- a/src/components/common/Tatle.vue
+++ b/src/components/common/Tatle.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 16:24:00
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-05 17:52:47
+ * @LastEditTime: 2022-07-08 14:23:56
  * @FilePath: \mcep-h5\src\components\common\Tatle.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -35,9 +35,13 @@ export default class Tatle extends Vue {
 <style scoped lang="scss">
 .van-col--9{
   margin-top: 5%;
+  font-size: 18px;
+    color: #ffffff;
 }
 .van-col--15{
   margin-top: 5%;
+  font-size: 18px;
+    color: #ffffff;
 }
 
 .d-tatle{
diff --git a/src/constants/api/login/common.api.ts b/src/constants/api/login/common.api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33670739854d27a0ff128539efb40175ba176fd2
--- /dev/null
+++ b/src/constants/api/login/common.api.ts
@@ -0,0 +1,22 @@
+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 14:56:29
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-08 14:45:54
+ * @FilePath: \mcep-h5\src\constants\api\login\login-mgt.api.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { MethodType } from "@/constants/enum/general/method-type.enum";
+import { HeaderType } from "@/constants/enum/general/header-type.enum";
+
+const prefix = "http://10.2.3.118:9165/online-financial-service/api/v1/cust-info/permit_endpoint"
+const commonApi = {
+  getPicCode: {
+    url: prefix + "/get_phone_verify_code",
+    method: MethodType.POST.code,
+    header: HeaderType.AUTH.code,
+  },
+ 
+};
+
+export default commonApi;
diff --git a/src/main.ts b/src/main.ts
index ff03a26682ba459c92c737ce9fa30d5af055db22..619f32c30a2f44168c3029aede4b306ba883752f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-06 18:25:11
+ * @LastEditTime: 2022-07-14 19:54:20
  * @FilePath: \mcep-h5\src\main.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -31,7 +31,10 @@ import { Step, Steps } from 'vant';
 import vueEsign from 'vue-esign';
 import Vconsole from 'vconsole';
 import  Vant  from 'vant';
-// import { VanComponent } from "vant/types/component"
+import Element from 'element-ui'
+ import { VanComponent } from "vant/types/component"
+ import 'element-ui/lib/theme-chalk/index.css';
+ Vue.use(Element);
 Vue.use(Vant);
 Vue.use(vueEsign);
 Vue.use(Step);
diff --git a/src/router/index.ts b/src/router/index.ts
index f7d48c48cb647665826558fe95bd682d979de125..d10384bcd4da078e4418aecd32e511ec8224a7ed 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-05 14:04:06
+ * @LastEditTime: 2022-07-14 13:59:06
  * @FilePath: \mcep-h5\src\router\index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -15,6 +15,10 @@ import { Code } from "@/constants/enum/general/code.enum";
 // import marketingRoutes from "@/router/marketing.mgt.routing";
 // import workbenchRoutes from "@/router/workbench.routing";
 import loginRoutes from "./login.mgt.routing";
+import productRoutes from "./product.mgt.routing";
+import mypageRoutes from "./mypage.mgt.routing";
+
+
 
 Vue.use(VueRouter);
 
@@ -34,6 +38,8 @@ const routes: Array<RouteConfig> = [
   // ...marketingRoutes,
   // ...workbenchRoutes,
   ...loginRoutes,
+  ...productRoutes,
+  ...mypageRoutes,
 ];
 
 const router = new VueRouter({
diff --git a/src/router/login.mgt.routing.ts b/src/router/login.mgt.routing.ts
index 8c3744c20497987035bfc29ade158affe38af4fa..ac85c851f3a841c5888c06b88304f4e95480e98b 100644
--- a/src/router/login.mgt.routing.ts
+++ b/src/router/login.mgt.routing.ts
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 10:08:57
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-05 17:10:29
+ * @LastEditTime: 2022-07-12 14:30:24
  * @FilePath: \mcep-h5\src\router\login.mgt.routing.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,14 +23,14 @@ const loginRoutes = [
     name: 'Register',
     component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/login/Register.vue"),
     props: propsConvert,
-    meta: { keepAlive: false, requiresAuth: true, name: "忘记密码" },
+    meta: { keepAlive: false, requiresAuth: true, name: "注册" },
   },
   {
     path: `/Mianview`,
     name: 'Mianview',
     component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/main/MainView.vue"),
     props: propsConvert,
-    meta: { keepAlive: false, requiresAuth: true, name: "忘记密码" },
+    meta: { keepAlive: false, requiresAuth: true, name: "主页" },
   }
 ]
 export default loginRoutes;
diff --git a/src/router/mypage.mgt.routing.ts b/src/router/mypage.mgt.routing.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6a6744ef5839cb39457890cf51b3b6c02de33ec
--- /dev/null
+++ b/src/router/mypage.mgt.routing.ts
@@ -0,0 +1,23 @@
+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 10:08:57
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-14 13:59:10
+ * @FilePath: \mcep-h5\src\router\login.mgt.routing.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { propsConvert } from "@/services/props-convert";
+
+
+const mypageRoutes = [
+  {
+    path: `/level`,
+    name: 'level',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/MyView/LevelSent.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "产品详情" },
+  }
+  
+  
+]
+export default mypageRoutes;
diff --git a/src/router/product.mgt.routing.ts b/src/router/product.mgt.routing.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3337abb0b6ddd89e8c1805fc505bf2faac704271
--- /dev/null
+++ b/src/router/product.mgt.routing.ts
@@ -0,0 +1,36 @@
+/*
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 10:08:57
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-13 19:03:44
+ * @FilePath: \mcep-h5\src\router\login.mgt.routing.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { propsConvert } from "@/services/props-convert";
+
+
+const productRoutes = [
+  {
+    path: `/product`,
+    name: 'product',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/ProductDetail/ProductDetails.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "产品详情" },
+  },
+  {
+    path: `/Recognition`,
+    name: 'Recognition',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/recognition/Recognition.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "实名认证" },
+  },
+  {
+    path: `/Agreement`,
+    name: 'Agreement',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/recognition/Agreement.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "服务协议" },
+  },
+  
+]
+export default productRoutes;
diff --git a/src/services/component-vue.service.ts b/src/services/component-vue.service.ts
index 38ad5955be837a59d2835ba8d9ac1b5f0689dda2..e853df76931d0c9767dd05c282147b4f9060fb57 100644
--- a/src/services/component-vue.service.ts
+++ b/src/services/component-vue.service.ts
@@ -2,12 +2,12 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 16:21:43
+ * @LastEditTime: 2022-07-14 19:59:12
  * @FilePath: \mcep-h5\src\services\component-vue.service.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import Vue from "vue";
-import { Button, Cell, CellGroup, Icon, Col, Row, Popup, Toast, Form, Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Search, Picker, DatetimePicker, Loading, Dialog, NavBar, Tab, Tabs, IndexBar, IndexAnchor, Switch, List, PullRefresh } from "vant";
+import { Button, Cell, CellGroup, Icon, Col, Row, Popup, Toast, Form, Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Search, Picker, DatetimePicker, Loading, Dialog, NavBar, Tab, Tabs, IndexBar, IndexAnchor, Switch, List, PullRefresh, Card } from "vant";
 import TitleBar from "@/components/general/TitleBar.vue";
 import DSelect from "@/components/general/form/DSelect.vue";
 import ScrollerView from "@/components/general/ScrollerView.vue";
@@ -20,19 +20,25 @@ import TabNav from "@/components/general/TabNav.vue";
 import BaseList from "@/components/general/BaseList.vue";
 import AnchorNav from "@/components/general/AnchorNav.vue";
 import * as echarts from "echarts";
-import Tatle  from "@/components/common/Tatle.vue";
-import picket  from "@/components/common/Picket.vue";
+import Tatle from "@/components/common/Tatle.vue";
+import picket from "@/components/common/Picket.vue";
 import ant from "ant-design-vue/es/locale/zh_CN"
 import Tool from "@/components/common/Tool.vue";
 import Bottom from "@/components/common/Bottom.vue";
+import Person from "@/components/common/Person.vue";
+import CardPottom from "@/components/common/CardPottom.vue";
+import LittleCard from "@/components/common/LittleCard.vue";
+import CardUnLogin from "@/components/common/CardUnLogin.vue";
+import ProductDetail from "@/components/common/ProductDetail.vue";
 
+import ProductCard from "@/components/common/ProductCard.vue";
 
+ProductCard
 declare module "vue/types/vue" {
   interface Vue {
     $message: any;
     $success: any;
     $error: any;
-    $loading: any;
     $confirm: any;
     $alert: any;
     $IF: any;
@@ -91,10 +97,15 @@ class ComponentVueService {
     Vue.component("base-list", BaseList);
     Vue.component("anchor-nav", AnchorNav);
     Vue.component("tatle-bar", Tatle);
-    Vue.component("picket-bar", picket);Tool
+    Vue.component("picket-bar", picket); Tool
     Vue.component("tools-bar", Tool);
     Vue.component("bottom-bar", Bottom);
-    
+    Vue.component("person-bar", Person);
+    Vue.component("card-bar", CardPottom);
+    Vue.component("little-bar", LittleCard);
+    Vue.component("uncard-bar", CardUnLogin);
+    Vue.component("product-detail", ProductDetail);
+    Vue.component("product-card", ProductCard);
   }
 }
 const componentService = new ComponentVueService();
diff --git a/src/views/MyView/LevelSent.vue b/src/views/MyView/LevelSent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa59968a7b201df2ea836282069ee044e3b6975a
--- /dev/null
+++ b/src/views/MyView/LevelSent.vue
@@ -0,0 +1,310 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-14 13:57:33
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-14 20:16:36
+ * @FilePath: \mcep-h5\src\views\MyView\LevelSent.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="rarle">
+    <van-row class="el-icon-arrow-down">
+      <van-col span="9">
+        <van-icon name="arrow-left" @click="retyen()" />
+      </van-col>
+      <van-col span="15">{{ tatleName }}</van-col>
+    </van-row>
+    <div class="card">
+      <div class="d-flex flex-column">
+        <div class="d-flex p-3  text-white">
+          <div class="p-2 " style="width: 62px;height: 62px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-touxiang"></use>
+            </svg>
+          </div>
+          <div style="width: 100%;margin-top: 2%;margin-left: 6%;">
+            <div class="d-flex flex-column">
+              <div class="lusspolid">大熊仔
+              </div>
+              <div class="d-flex  " style="width: 100%;">
+                <div class="live ">
+                  二星级用户|当前成长值535</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="frist_type">
+      <van-row type="flex" class="vanrowFlex">
+        <van-col span="24" class="vanclo">我的特权</van-col>
+        <van-row type="flex" gutter="10" justify="center" style="width: 90%; margin: 0px auto;">
+          <van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
+          <van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
+          <van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
+          <van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
+        </van-row>
+        <van-row type="flex" gutter="10" style="width: 90%; margin: 0px auto;">
+          <van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
+          <van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
+          <van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
+          <van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
+        </van-row>
+        <van-row type="flex" gutter="10" style="width: 90%; margin: 0px auto;">
+          <van-col span="6" class="third-style">
+          </van-col>
+          <van-col span="6" class="third-style">
+            +0.01</van-col>
+          <van-col span="6" class="third-style">
+            -0.01</van-col>
+          <van-col span="6" class="third-style">专属
+          </van-col>
+        </van-row>
+      </van-row>
+      <van-row type="flex" class="">
+        <van-col span="24" >我的特权</van-col>
+        <div>
+        <template>
+        <el-table :data="tableData" :border="true" :stripe="true" >
+          <el-table-column fixed prop="level" label="等级权限" width="30">
+          </el-table-column>
+          <el-table-column prop="name" label="姓名"  width="30">
+          </el-table-column>
+          <el-table-column prop="province" label="省份"   width="30">
+          </el-table-column>
+          <el-table-column prop="city" label="市区"  width="30">
+          </el-table-column>
+          <el-table-column prop="address" label="地址"  width="30">
+          </el-table-column>
+        </el-table>
+      </template>
+      </div>
+      </van-row>
+      
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { ProductData } from '@/model/entity/ProductData'
+//import { defineComponent } from 'vue';
+@Component({
+  name: "LevelSent",
+})
+export default class LevelSent extends Vue {
+  tatleName = "等级权限详情";
+  imageBackage: any = require('@/assets/images/backageImg.png');
+  //返回上一级
+  retyen() {
+    this.$router.back();
+  }
+  //数表
+   tableData= [{
+          level: '免费转账',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+         level: '客户',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          level: '存款加息',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+           level: '贷款减息',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+  data: any = [
+    {
+      key: 1,
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
+    },
+    {
+      key: 2,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
+    },
+    {
+      key: 3,
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park',
+      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
+    },
+  ];
+}
+</script>
+<style scoped lang="scss">
+.card {
+  //background-image: url("../../assets/images/mycard.png");
+  background-color: #ffc14a;
+  position: absolute;
+  top: 12%;
+  left: 4%;
+  right: 3%;
+  width: 89%;
+  height: 11%;
+  margin: 2% auto;
+  border-radius: 15px;
+  display: flex;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.last {
+  position: absolute;
+  height: 100-20vh;
+  background: #ffffff;
+  overflow: visible;
+}
+
+// .frist_type {
+//   // border: 1px solid;
+//   width: 100%;
+//   height: 100%;
+//   border-radius: 70px 70px 0px 0px;
+//   position: absolute;
+//   top: 20%;
+//   background-color: #fff;
+// }
+.frist_type {
+  margin-top: 15%;
+  background-image: url('../../assets/images/backageImg.png');
+  background-size: 100% 100%;
+  height: 85%;
+}
+
+.frist {
+  margin-left: 6%;
+  text-rendering: optimizelegibility;
+  font-feature-settings: "kern";
+  font-kerning: normal;
+  font-size: 14px;
+}
+
+.second {
+  //margin-left: 6%;
+  width: 90%;
+  margin: 0px auto;
+}
+
+.third {
+  width: 90%;
+  margin: 0px auto;
+  // margin-left: 6%;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.8);
+  text-rendering: optimizelegibility;
+  font-feature-settings: "kern";
+  font-kerning: normal;
+}
+
+.img {
+  width: 85%;
+}
+
+.van-col--9 {
+  margin-top: 5%;
+  font-size: 18px;
+  color: #ffffff;
+}
+
+.van-col--15 {
+  margin-top: 5%;
+  font-size: 18px;
+  color: #ffffff;
+}
+
+.rarle {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(118, 190, 250, 1) 0%, rgba(54, 114, 241, 1) 99%);
+}
+
+.third-style {
+  font-size: 10px;
+  text-align: center;
+  color: rgb(255, 193, 74)
+}
+
+.vanrowFlex {
+  margin-top: 2%;
+}
+
+.lusspolid {
+  color: #976401;
+  font-size: 14px;
+}
+
+.vanclo {
+  margin: 20% 0% 4% 6%;
+  /* margin-left: 2%; */
+  /* margin-top: 20%; */
+  font-weight: 500;
+  font-size: 14px;
+  text-align: left;
+}
+
+.d-tattle {
+  margin-top: 28%;
+}
+
+.priductName {
+  padding-top: 2%;
+}
+
+.imglittle {
+  padding-top: 2%;
+}
+
+.litterParam {
+  width: 90%;
+  margin: 0px auto;
+  background-color: rgba(255, 255, 255, 1);
+  border: none;
+  border-radius: 4px;
+  -moz-box-shadow: 0px 0px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  height: 40px;
+
+}
+
+.vanrow {
+  margin-top: 6%;
+  margin-left: 2%;
+}
+
+.tatle {
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+}
+
+.live {
+  font-size: 12px;
+  color: #CE8B0B;
+}
+</style>
diff --git a/src/views/MyView/MyPage.vue b/src/views/MyView/MyPage.vue
index f996614b81ee34b6bfab7185130dedf3edb11297..3e9ce51bb4ec492587ee6a1bd26a5bf76e780137 100644
--- a/src/views/MyView/MyPage.vue
+++ b/src/views/MyView/MyPage.vue
@@ -2,13 +2,23 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 14:05:30
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 19:00:04
+ * @LastEditTime: 2022-07-14 13:48:42
  * @FilePath: \mcep-h5\src\views\main\MainView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
-    <div>我的页面</div>
+    <div class="rarl">
+      <person-bar :title="tatleName" :param="param" :login="true" style="width:100%;height: calc(35vh);">
+      </person-bar>
+    </div>
+    <div>
+       <card-bar class="card"></card-bar> 
+      <!-- <uncard-bar class="card"></uncard-bar> -->
+    </div>
+    <div class="prudect">
+      <little-bar :litterParam="litterParam"></little-bar>
+    </div>
   </div>
 
 </template>
@@ -20,9 +30,84 @@ import { ProductData } from '@/model/entity/ProductData'
   name: "MyPage",
 })
 export default class MyPage extends Vue {
-  tatleName = "我的"
-  
+  tatleName = "个人中心"
+  loginFlag = true;
+  param: any = {}
+  //判断是否登录
+  created() {
+    //判断登录登陆状态
+    //this.loginFlag=localStorage.getItem("loginFlag")
+    if(this.loginFlag){
+      this.param = {
+        name:"孙旭东",
+        live:"二星级",
+        grow:"531"
+      }
+    }else{
+      this.param={
+        name:"登录/注册"
+      }
+    }
+   
+  }
+  //列表信息
+  litterParam: any = [{
+    productname: "个人信息",
+    //个人信息
+    img: "#icon-a-gerenxinxi16x16px"
+  },
+  {
+    productname: "我的贷款",
+    //图片信息
+    img: "#icon-a-wodedaikuan16x16px"
+  },
+  {
+    productname: "兑换记录",
+    //图片信息
+    img: "#icon-a-duihuanjilu16x16px"
+  },
+  {
+    productname: "合作企业",
+    //图片信息
+    img: "#icon-a-hezuoqiye16x16px"
+  }]
 }
 </script>
 <style scoped lang="scss">
+.roll {
+  background: #ecf9ff;
+}
+
+.card {
+  position: absolute;
+  top: 21%;
+  left: 3%;
+  right: 3%;
+  width: 90%;
+  height: 25%;
+  margin: 2% auto;
+  border-radius: 15px;
+  display: flex;
+  font-weight: 400;
+  font-style: normal
+}
+
+.titleName {
+  float: inline-end;
+  height: 34px;
+  margin: 7px auto 0px 8px;
+  border-radius: 12px;
+  color: #a2d2f4;
+}
+
+.icon {
+  width: 90px;
+  height: 90px;
+}
+
+.prudect {
+  background: white;
+  height: 100-35vh;
+
+}
 </style>
diff --git a/src/views/ProductDetail/ProductDetails.vue b/src/views/ProductDetail/ProductDetails.vue
new file mode 100644
index 0000000000000000000000000000000000000000..033fe925416c9b56b09e3414047dcbea5cfd3524
--- /dev/null
+++ b/src/views/ProductDetail/ProductDetails.vue
@@ -0,0 +1,74 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-05 14:05:30
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-13 17:42:26
+ * @FilePath: \mcep-h5\src\views\main\MainView.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div>
+    <product-detail class="productName" :productName="productName"></product-detail>
+    <product-card :money="money" :moneyName="moneyName" class="productCard"> </product-card>
+     
+  </div>
+
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { ProductData } from '@/model/entity/ProductData'
+
+@Component({
+  name: "ProductDetails",
+})
+export default class ProductDetails extends Vue {
+  productName="小微企业---互助贷款"
+  money: string = "￥5000000" //最高额度
+  moneyName: string = "五百万元整" //最高额度汉字
+  activeNames=["1"]
+}
+</script>
+<style scoped lang="scss">
+.productName {
+ height: 38vh;
+}
+
+.productCard {
+  // position: absolute;
+  // top: 10%;
+  // left: 4%;
+  // right: 4%;
+  // width: 100%;
+  // height: 31%;
+  // margin: 2% auto;
+  // border-radius: 15px;
+  // display: flex;
+  // font-weight: 400;
+  // font-style: normal;
+    position: absolute;
+    top: 13%;
+    /* left: calc(100vh - -15px); */
+    margin: 0px auto;
+    right: 4%;
+    width: 90%;
+    height: 30%;
+    /* margin: 2% auto; */
+    border-radius: 15px;
+    /* display: flex; */
+    font-weight: 400;
+    font-style: normal;
+}
+// .producy{
+//   position: absolute;
+//   top: 10%;
+//   left: 4%;
+//   right: 4%;
+//   width: 100%;
+//   height: 31%;
+//   margin: 2% auto;
+//   border-radius: 15px;
+//   display: flex;
+//   font-weight: 400;
+//   font-style: normal;
+// }
+</style>
diff --git a/src/views/authentication/LoginView.vue b/src/views/authentication/LoginView.vue
index cad36b0c657ed8051df370d9d1dd23b55533ffce..4caa1b2fce38eae88f301fca4b39c6113325bd19 100644
--- a/src/views/authentication/LoginView.vue
+++ b/src/views/authentication/LoginView.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-06 15:57:44
+ * @LastEditTime: 2022-07-12 14:53:10
  * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -53,7 +53,7 @@
               <!-- <van-divider /> -->
             </van-field>
           </van-col>
-          <van-col span="8"><a style="color:#3672F1" @click="changeCmstotal()">{{ getCmstotal }}</a></van-col>
+          <van-col span="8"><a style="color:#3672F1" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
         </van-row>
         <div style="margin: 16px;">
           <van-button square block type="info" native-type="submit" @click="loginSystem()">登录</van-button>
@@ -76,12 +76,12 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Image as VanImage } from 'vant';
+import { Image as VanImage, Toast } from 'vant';
 import apiService from "@/services/api.service";
 import loginApi from "@/constants/api/login/login-mgt.api";
 import { Code } from "@/constants/enum/general/code.enum";
 import { RestfulResponse } from "@/model/domain/RestfulResponse";
-import { log } from "mathjs";
+import commonApi from "@/constants/api/login/common.api";
 import { sys } from "typescript";
 
 
@@ -99,14 +99,15 @@ export default class LoginView extends Vue {
   sms: string = "";//短信验证
   timer: any = "";//定时器
   time: number = 60;//计数
+  imageVerifyKey: string = ""//验证码Key
   //获取图形验证码
   _updatePicCode() {
     //请求图形验证码
     apiService.general(loginApi.updatePicCode, undefined, undefined, undefined).then((response: RestfulResponse) => {
-      console.log(response);
+
       if (response.code == Code.SUCCESS.code) {
-        this.imageSrc = 'data:image/png;base64,' + response.data.replace(/[\r\n]/g, "");
-        console.log(this.imageSrc);
+        this.imageSrc = 'data:image/png;base64,' + response.data.imageVerifyCodeStr.replace(/[\r\n]/g, "");
+        this.imageVerifyKey = response.data.imageVerifyKey
       }
     });
   }
@@ -123,33 +124,51 @@ export default class LoginView extends Vue {
     }, 1000)
 
   }
+  //获取短信验证码
+  getPhonePost() {
+    let param = {
+      phoneCode: this.phone
+    }
+    apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
+
+      if (response.code == Code.SUCCESS.code) {
+        Toast('短信发送成功，5分钟有效');
+        this.changeCmstotal()
+      } else {
+        Toast('短信发送失败,请重试');
+      }
+    })
+  }
   loginSystem() {
     //TODO
     //登录失败刷新
     //验证码失败刷新
     //this._updatePicCode();
-    let param={
-      phone:this.phone,
+    let param = {
+      phone: this.phone,
+      //图形Key
+      imageVerifyKey: this.imageVerifyKey,
       //图形验证码
-      imgVerifyCode:this.imageSrcValue,
+      imgVerifyCode: this.imageSrcValue,
       //渠道
-      loginType:"3",
+      loginType: "3",
       //手机验证码
-      phoneVerifyCode:this.sms,
+      phoneVerifyCode: this.sms,
       //密码
-      credential:this.password
+      credential: this.password
     }
-     apiService.general(loginApi.loginSystem, undefined, param, undefined).then((response: RestfulResponse) => {
+    apiService.general(loginApi.loginSystem, undefined, param, undefined).then((response: RestfulResponse) => {
       console.log(response);
       if (response.code == Code.SUCCESS.code) {
-       this.$router.push({
-            name: `Mianview`,
-            params: {
-              data: response.data
-            }
-          })
-      }else{
+        this.$router.push({
+          name: `Mianview`,
+          params: {
+            data: response.data
+          }
+        })
+      } else {
         this._updatePicCode();
+        Toast(response.msg + "");
       }
     });
   }
diff --git a/src/views/login/ForgetPassView.vue b/src/views/login/ForgetPassView.vue
index 6de03a5b0798623deff84a3d1268e3cfd837d220..82de382935c1d5015b2afe11bf6657713ac6c9fc 100644
--- a/src/views/login/ForgetPassView.vue
+++ b/src/views/login/ForgetPassView.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-05 10:42:36
+ * @LastEditTime: 2022-07-08 15:28:45
  * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -46,7 +46,7 @@
                 <!-- <van-divider /> -->
               </van-field>
             </van-col>
-            <van-col span="8"><a href="javascript">获取短信验证码</a></van-col>
+            <van-col span="8"><a href="#" @click="getPhonePost()">获取短信验证码</a></van-col>
           </van-row>
 
 
@@ -60,7 +60,11 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Image as VanImage } from 'vant';
+import { Image as VanImage, Toast } from 'vant';
+import apiService from "@/services/api.service";
+import { Code } from "@/constants/enum/general/code.enum";
+import { RestfulResponse } from "@/model/domain/RestfulResponse";
+import commonApi from "@/constants/api/login/common.api";
 
 
 @Component({
@@ -68,18 +72,49 @@ import { Image as VanImage } from 'vant';
   [VanImage.name]: VanImage,
 })
 export default class ForgetPassView extends Vue {
+  getCmstotal = "获取短信验证码";
   tatleName = "密码重置"
   phone: string = "" //电话
   newpassword: string = ""//密码
   restpassword:string = ""//密码
   imageSrc: string = ""//图形
   sms: string = ""//短信
+  timer: any = "";//定时器
+  time: number = 60;//计数
+  radio: string = "0"
   //获取图形验证码
   _updatePicCode() {
     //请求图形验证码
     this.imageSrc = 'http://localhost:8080/users/sendPicCode?=' + Math.random();
     //this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random()
   }
+  //计时器
+  changeCmstotal() {
+    this.getCmstotal = this.time + "s重发验证码";
+    this.timer = setInterval(() => {
+      this.time--;
+      this.getCmstotal = this.time + "s重发验证码";
+      if (this.time < 0) {
+        clearInterval(this.time)
+        this.getCmstotal = "获取短信验证码";
+      }
+    }, 1000)
+
+  }
+getPhonePost(){
+ let param={
+    phoneCode:this.phone
+ }
+ apiService.general(commonApi.getPicCode,param,undefined,undefined).then((response: RestfulResponse) => {
+       
+        if (response.code == Code.SUCCESS.code) {
+          Toast('短信发送成功，5分钟有效');
+          this.changeCmstotal()
+        }else{
+           Toast('短信发送失败,请重试');
+        }
+    })
+}
   onSubmit(values: any) {
     console.log('submit', values);
   }
diff --git a/src/views/login/Register.vue b/src/views/login/Register.vue
index 4b962ed5279db592bf50a9486ddd69ba1f6f6753..a070e1e9010097a074d0a3225b630eccb0bb0215 100644
--- a/src/views/login/Register.vue
+++ b/src/views/login/Register.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-04 15:41:06
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-06 15:10:12
+ * @LastEditTime: 2022-07-08 15:04:25
  * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -35,7 +35,7 @@
                 <!-- <van-divider /> -->
               </van-field>
             </van-col>
-            <van-col span="8"><a href="javascript">获取短信验证码</a></van-col>
+            <van-col span="8"><a @click="getPhonePost()">{{getCmstotal}}</a></van-col>
           </van-row>
 
           <div class="logindiv">
@@ -61,7 +61,7 @@
         </van-radio> -->
       <div>
         <van-checkbox v-model="checked" shape="square" style="padding:0% 4%;">
-          <span>本人已阅读<a href="javascpt">《线上金融服务平台注册服务协议》</a></span>
+          <span>本人已阅读<a href="#">《线上金融服务平台注册服务协议》</a></span>
         </van-checkbox>
       </div>
     </div>
@@ -73,28 +73,35 @@ import apiService from "@/services/api.service";
 import { Code } from "@/constants/enum/general/code.enum";
 import { RestfulResponse } from "@/model/domain/RestfulResponse";
 import registApi from "@/constants/api/login/regist-mgt.api";
+import commonApi from "@/constants/api/login/common.api";
+import { Toast } from "vant";
 
 @Component({
   name: "ForgetPassView",
 })
 export default class ForgetPassView extends Vue {
-  tatleName = "密码重置"
+  tatleName = "用户注册"
   phone: string = "" //电话
   password: string = ""//密码
   restpassword: string = ""//确认密码
+  getCmstotal = "获取短信验证码";
   sms: string = ""//短信
   // radio: boolean = false
+    timer: any = "";//定时器
+  time: number = 60;//计数
   radio: string = "0"
   checked: boolean = false;
+
   registSystem() {
     if (this.password === this.restpassword && this.checked) {
       let param = {
         phone: this.phone,
         //短信验证码TODO
-        //phoneVerifyCode: "",
+        phoneVerifyCode: this.sms,
         //数字渠道
         method:"3",
-        pwd: this.password
+        pwd: this.password,
+        serviceAgreeStatus:this.checked
       }
       apiService.general(registApi.registSystem, undefined, param, undefined).then((response: RestfulResponse) => {
         console.log(response);
@@ -110,6 +117,35 @@ export default class ForgetPassView extends Vue {
     }
   }
 
+//计时器
+  changeCmstotal() {
+    this.getCmstotal = this.time + "s重发验证码";
+    this.timer = setInterval(() => {
+      this.time--;
+      this.getCmstotal = this.time + "s重发验证码";
+      if (this.time < 0) {
+        clearInterval(this.time)
+        this.getCmstotal = "获取短信验证码";
+      }
+    }, 1000)
+
+  }
+getPhonePost(){
+ let param={
+    phoneCode:this.phone
+ }
+ apiService.general(commonApi.getPicCode,param,undefined,undefined).then((response: RestfulResponse) => {
+       
+        if (response.code == Code.SUCCESS.code) {
+          Toast('短信发送成功，5分钟有效');
+          this.changeCmstotal()
+        }else{
+           Toast('短信发送失败,请重试');
+        }
+    })
+    
+
+}
 
 
   created() {
diff --git a/src/views/main/Main.vue b/src/views/main/Main.vue
index 6c58bbc19031bc5e1220ba39879221a1a22e3326..b2311da988704bc9c4467a9e74980022b110b255 100644
--- a/src/views/main/Main.vue
+++ b/src/views/main/Main.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 14:05:30
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 20:21:56
+ * @LastEditTime: 2022-07-14 11:23:46
  * @FilePath: \mcep-h5\src\views\main\MainView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -40,84 +40,184 @@
           <van-tab title="期限" name="c"></van-tab>
           <van-tab title="利率" name="d"></van-tab>
         </van-tabs> -->
-        <van-dropdown-menu>
-  <van-dropdown-item title="综合排序" ref="item">
-    <van-cell center title="包邮">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <van-cell center title="团购">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <div style="padding: 5px 16px;">
-      <van-button type="danger" block  >
-        确认
-      </van-button>
-    </div>
-  </van-dropdown-item>
-  <van-dropdown-item title="金额" ref="item">
-    <van-cell center title="包邮">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <van-cell center title="团购">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <div style="padding: 5px 16px;">
-      <van-button type="danger" block round >
-        确认
-      </van-button>
-    </div>
-  </van-dropdown-item>
-  <van-dropdown-item title="期限" ref="item">
-    <van-cell center title="包邮">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <van-cell center title="团购">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <div style="padding: 5px 16px;">
-      <van-button type="danger" block round >
-        确认
-      </van-button>
-    </div>
-  </van-dropdown-item>
-  <van-dropdown-item title="利率" ref="item">
-    <van-cell center title="包邮">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <van-cell center title="团购">
-      <template #right-icon>
-        <van-switch  size="24" active-color="#ee0a24" />
-      </template>
-    </van-cell>
-    <div style="padding: 5px 16px;">
-      <van-button type="danger" block round >
-        确认
-      </van-button>
-    </div>
-  </van-dropdown-item>
-</van-dropdown-menu>
-      </div>
-      <scroller-view v-calculate-height >
-         <div v-for="(item, index) in productList" :key="index">
-        <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
-          :interestrate="item.interestrate" :loanterm="item.loanterm"></picket-bar>
+        <van-dropdown-menu style="height:100%;">
+          <van-dropdown-item title="综合排序" ref="item" style="height:100%">
+            <div class="application" v-for="(item, index) in applicaList" :key="index">
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
+                <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+                <van-col span="6">
+                  <div class="vandilote">{{ item.fristsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.thirdsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+            </div>
+            <div style="margin-top: 4%;">
+               <van-row type="flex" >
+                  <van-col span="12">
+                    <van-button square block type="default">重置</van-button>
+                  </van-col>
+                  <van-col span="12">
+                    <van-button square block type="info">确定</van-button>
+                  </van-col>
+                </van-row>
+            </div>
+          </van-dropdown-item>
+          <van-dropdown-item title="金额" ref="item">
+            <div class="application" v-for="(item, index) in applicaform" :key="index">
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
+                <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+                <van-col span="6">
+                  <div class="vandilote">{{ item.fristsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.thirdsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+            </div>
+            <div style="margin-top: 4%;">
+               <van-row type="flex" >
+                  <van-col span="12">
+                    <van-button square block type="default">重置</van-button>
+                  </van-col>
+                  <van-col span="12">
+                    <van-button square block type="info">确定</van-button>
+                  </van-col>
+                </van-row>
+            </div>
+          </van-dropdown-item>
+          <van-dropdown-item title="期限" ref="item">
+             <div class="application" v-for="(item, index) in applicaform" :key="index">
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
+                <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+                <van-col span="6">
+                  <div class="vandilote">{{ item.fristsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.thirdsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+            </div>
+            <div style="margin-top: 4%;">
+               <van-row type="flex" >
+                  <van-col span="12">
+                    <van-button square block type="default">重置</van-button>
+                  </van-col>
+                  <van-col span="12">
+                    <van-button square block type="info">确定</van-button>
+                  </van-col>
+                </van-row>
+            </div>
+          </van-dropdown-item>
+          <van-dropdown-item title="利率" ref="item">
+              <div class="application" v-for="(item, index) in applicaform" :key="index">
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
+                <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+                <van-col span="6">
+                  <div class="vandilote">{{ item.fristsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.thirdsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div class="vandilote">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+            </div>
+            <div style="margin-top: 4%;">
+               <van-row type="flex" >
+                  <van-col span="12">
+                    <van-button square block type="default">重置</van-button>
+                  </van-col>
+                  <van-col span="12">
+                    <van-button square block type="info">确定</van-button>
+                  </van-col>
+                </van-row>
+            </div>
+          </van-dropdown-item>
+        </van-dropdown-menu>
       </div>
+      <scroller-view v-calculate-height>
+        <div v-for="(item, index) in productList" :key="index" style="margin: 4% auto;">
+          <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
+            :interestrate="item.interestrate" :loanterm="item.loanterm" @onClickPicket="onClickPicket"></picket-bar>
+        </div>
       </scroller-view>
-      
+
     </div>
   </div>
 
@@ -132,6 +232,92 @@ import { ProductData } from '@/model/entity/ProductData'
 export default class Main extends Vue {
   tatleName = "线上金融服务平台"
   notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+  //div列表
+  applicaList: any = [
+    {
+      name: "产品金额（万元）",
+      max: "最高",
+      min: "最低",
+      fristsize: "1-100",
+      secondsize: "100-500",
+      thirdsize: "500-1000",
+      foursize: "1000-2000"
+    },
+    {
+      name: "产品期限(月)",
+      max: "最高",
+      min: "最低",
+      fristsize: "1-100",
+      secondsize: "100-500",
+      thirdsize: "500-1000",
+      foursize: "1000-2000"
+    },
+    {
+      name: "产品利率(%)",
+      max: "最高",
+      min: "最低",
+      fristsize: "1-100",
+      secondsize: "100-500",
+      thirdsize: "500-1000",
+      foursize: "1000-2000"
+    },
+    {
+      name: "担保方式",
+      max: "最高",
+      min: "最低",
+      fristsize: "抵押",
+      secondsize: "质押",
+      thirdsize: "信用",
+      foursize: "保证"
+    },
+    // {
+    //   name: "产品金额（万元）",
+    //   max: "最高",
+    //   min: "最低",
+    //   fristsize: "1-100",
+    //   secondsize: "100-500",
+    //   thirdsize: "500-1000",
+    //   foursize: "1000-2000"
+    // },
+    // {
+    //   name: "产品金额（万元）",
+    //   max: "最高",
+    //   min: "最低",
+    //   fristsize: "1-100",
+    //   secondsize: "100-500",
+    //   thirdsize: "500-1000",
+    //   foursize: "1000-2000"
+    // },
+    // {
+    //   name: "产品金额（万元）",
+    //   max: "最高",
+    //   min: "最低",
+    //   fristsize: "1-100",
+    //   secondsize: "100-500",
+    //   thirdsize: "500-1000",
+    //   foursize: "1000-2000"
+    // }
+  ]
+  //金额
+  applicaform: any = [
+    {
+      name: "产品金额（万元）",
+      max: "最高",
+      min: "最低",
+      fristsize: "1-100",
+      secondsize: "100-500",
+      thirdsize: "500-1000",
+      foursize: "1000-2000"
+    }
+  ]
+
+  //按钮
+  tabbarlist: any = {
+    name: "首页",
+    flag: true
+  }
+
+
   productList: ProductData[] = [{
     productname: "金融消费贷", //产品名称
     describe: "1年100万",//描述
@@ -146,7 +332,17 @@ export default class Main extends Vue {
     interestrate: "19%~20%",//利率
     loanterm: "89个月",//贷款期限
   }];
-  activeName: string = "a"
+  //点击picket跳转界面
+  onClickPicket() {
+    debugger
+    this.$router.push({
+      path: "/product",
+      //路由传值
+      // params:{
+      //   data:""
+      // }
+    })
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -167,4 +363,71 @@ export default class Main extends Vue {
   margin-top: 40px;
   margin-bottom: 10px;
 }
+
+.vandiv {
+  text-align: center;
+  border-color: rgba(204, 204, 204, 1);
+  font-size: 12px;
+  color: #999999;
+  border: 1px solid #999999;
+  width: 80%;
+  border-radius: 4px;
+  //background-color: #a2d2f4;
+}
+
+.application {
+  height: 20%;
+}
+
+.applicationName {
+   //margin-left: 6%;
+       margin: 2% 6%;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "kern" 1;
+    -webkit-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern";
+    -moz-font-feature-settings: "kern=1";
+    font-kerning: normal;
+}
+
+.applicationfole {
+  margin: 0 auto;
+  font-size: 14px;
+  color: #333333;
+  // margin-top: 2%;
+  // margin-left: 5%;
+  // margin-right: 5%;
+      margin: 4% 6% 0% 6%;
+}
+
+.applicationfale {
+  //margin-left: 5%;
+  margin: 4% 6%;
+}
+
+.vandilote {
+  text-align: center;
+  background-color: rgba(242, 242, 242, 1);
+  font-size: 12px;
+  line-height: 40px;
+  border-radius: 4px;
+  // color: #999999;
+  // border: 1px solid #999999;
+}
+
+.applicationbutton {
+  text-align: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 72px;
+}
+.van-dropdown-item {
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: 10;
+    overflow: hidden;
+    height: 100%;
+}
 </style>
diff --git a/src/views/main/MainView.vue b/src/views/main/MainView.vue
index af296986e1b399fa09e900f7f43a6f1c6e83e875..c20aab7d58dc19b127d3813130ef256c20d5672b 100644
--- a/src/views/main/MainView.vue
+++ b/src/views/main/MainView.vue
@@ -2,7 +2,7 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 14:05:30
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-07-07 20:43:35
+ * @LastEditTime: 2022-07-08 14:28:26
  * @FilePath: \mcep-h5\src\views\main\MainView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -10,7 +10,7 @@
   <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
      <Main v-if="showFlag"></Main>
      <MyPage  v-if="!showFlag"></MyPage>
-     <div class="boottom">
+     <div >
       <bottom-bar  @onchangebtn="onchangebtn" ></bottom-bar>
     </div>
   </div>
diff --git a/src/views/recognition/Agreement.vue b/src/views/recognition/Agreement.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f182ab6f066f4050234c56e4bf46c541571f0982
--- /dev/null
+++ b/src/views/recognition/Agreement.vue
@@ -0,0 +1,63 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-13 19:24:02
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <!-- <div> -->
+  <div class="roolsolt">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+    <div style="width:90%;margin: 10% auto;">
+      <span style="font-size: 18px;
+    font-weight: 900;
+    /* margin-top: 10%; */
+    line-height: 6;
+    margin-left: 12%;">
+        尊敬的用户您好：
+      </span>
+      <br />
+      <span style="    font-size: 16px; line-height: 3;">
+        &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
+        欢迎使用视频互动审核服务，为了保障您的合法权益，请您务必审慎阅读，充分理解协议条款内容。在您选择并同意本协议之后，即表示您已详细阅读如下条款，并同意服务提供者及XXX使用并传送相关数据用于业务办理。
+      </span>
+    </div>
+    <div>
+      <van-checkbox v-model="checked" style="padding:0% 4%;">
+        <span>同意授权，查看<a href="#">协议内容</a></span>
+      </van-checkbox>
+    </div>
+    <div class="info">
+      <van-button class="vbutton" :disabled="!checked" block type="info">发起视频</van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Agreement"
+})
+export default class Agreement extends Vue {
+  //实名认证
+  tatleName = "实名认证"
+  checked: boolean = false;
+}
+</script>
+<style scoped lang="scss">
+.vbutton {
+  border-radius: 4%;
+}
+.info {
+  width: 90%;
+  margin: 6% auto;
+}
+</style>
diff --git a/src/views/recognition/Recognition.vue b/src/views/recognition/Recognition.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b6d3385930a4b23cacc16098851d2be24667f18b
--- /dev/null
+++ b/src/views/recognition/Recognition.vue
@@ -0,0 +1,122 @@
+<!--
+ * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @Date: 2022-07-07 16:13:13
+ * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
+ * @LastEditTime: 2022-07-13 19:05:41
+ * @FilePath: \mcep-h5\src\components\common\Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <!-- <div> -->
+  <div class="roolsolt">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+    <van-row type="flex" class="CardRules">
+      <van-col span="24">拍摄您的二代身份证原件，请确保图片清晰，四角完整</van-col>
+    </van-row>
+    <van-row type="flex" class="Card">
+      <van-col span="12"><img class="id-card" src="../../assets/images/idcardpeople.png"></van-col>
+      <van-col span="12"><img class="id-card" src="../../assets/images/idcardcountry.png"></van-col>
+    </van-row>
+    <van-row type="flex" class="CardName">
+      <van-col span="12">拍摄人像面</van-col>
+      <van-col span="12">拍摄国徽面</van-col>
+    </van-row>
+    <van-row type="flex" class="position">
+      <van-col span="24">拍摄人注意事项</van-col>
+    </van-row>
+    <van-row type="flex" class="RuleCard">
+      <van-col span="8"><img class="idcardp" src="../../assets/images/idcardpeople.png"></van-col>
+      <van-col span="8"><img class="idcardp" src="../../assets/images/idcardpeople.png"></van-col>
+      <van-col span="8"><img class="idcardp" src="../../assets/images/idcardpeople.png"></van-col>
+    </van-row>
+    <van-row type="flex" class="CardRule">
+      <van-col span="8">四角完整</van-col>
+      <van-col span="8">无明显高光</van-col>
+      <van-col span="8">照片清晰</van-col>
+    </van-row>
+    <van-form style="margin-top:4%">
+      <van-field v-model="pointCard" name="身份证号" label="身份证号" placeholder="身份证号"
+        :rules="[{ required: true, message: '请填写身份证号' }]" />
+      <van-field v-model="name" name="姓名" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
+      <div style="margin: 16px;">
+        <van-button class="vbutton" square block type="info" native-type="submit" @click="volick()">下一步</van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
+/*
+* title
+*/
+@Component({
+  name: "Recognition"
+})
+export default class Recognition extends Vue {
+  //身份证号
+  pointCard: string = "";
+  //姓名
+  name: string = "";
+  //实名认证
+  tatleName = "实名认证"
+  //button
+  volick(){
+      this.$router.push({
+          name: `Agreement`,
+        })
+  }
+}
+</script>
+<style scoped lang="scss">
+.CardRules {
+  font-size: 12px;
+  color: #F59A23;
+  text-align: center;
+  margin-top: 5%;
+}
+
+.id-card {
+  width: 85%;
+}
+
+.CardName {
+  margin-top: 2%;
+  text-align: center;
+  font-size: 14px;
+}
+
+.Card {
+  text-align: center;
+  margin-top: 5%;
+}
+
+.position {
+  margin-top: 7%;
+  margin-left: 5%;
+  font-size: 14px;
+}
+
+.idcardp {
+  width: 85%;
+}
+
+.RuleCard {
+  margin-left: 5%;
+  margin-top: 2%;
+}
+
+.CardRule {
+  text-align: center;
+  margin-left: 2%;
+  margin-top: 2%;
+  font-size: 14px;
+  color: #999999;
+}
+.vbutton{
+  border-radius: 4%;
+}
+</style>
diff --git a/src/views/workbench/products-recommended/ProductsRecommended.vue b/src/views/workbench/products-recommended/ProductsRecommended.vue
deleted file mode 100644
index 586399e607d0ee301a20cd28f7d74e4c07ff5a17..0000000000000000000000000000000000000000
--- a/src/views/workbench/products-recommended/ProductsRecommended.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div>
-    <title-bar title="产品推介">
-      <van-icon slot="left" name="cross" size="24" />
-      <div class="iconfont icon-erweima" style="color: #FFFFFF;" @click="popER" slot="right"></div>
-    </title-bar>
-    <van-dialog v-model="show" title="专属产品二维码" style="width: 24%;height: auto">
-      <div style="display: flex;justify-content: center;margin-top: 10px">
-        <img :src="basePhoto" style="width: 180px;height: 180px" />
-      </div>
-    </van-dialog>
-    <div class="products-recommended-content">
-      <div class="products-recommended-content-upper-part"><img style="height: 100%;width: 100%" src="../../../assets/images/product-recommendation-big-picture.png" alt="" /></div>
-      <div class="products-recommended-content-lower-part">
-        <van-tabs v-model="active">
-          <van-tab title="贷款类产品">
-            <loan-products></loan-products>
-          </van-tab>
-          <van-tab title="存款类产品">
-            <deposit-products></deposit-products>
-          </van-tab>
-          <van-tab title="理财类产品">
-            <financial-products></financial-products>
-          </van-tab>
-        </van-tabs>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import TitleBar from "@/components/general/TitleBar.vue";
-import { Tab, Tabs } from "vant";
-import LoanProducts from "@/components/workbench/products-recommended/LoanProducts.vue";
-import DepositProducts from "@/components/workbench/products-recommended/DepositProducts.vue";
-import FinancialProducts from "@/components/workbench/products-recommended/FinancialProducts.vue";
-import nettyApi from "@/constants/api/ms-netty/netty.api";
-import { NativeUI } from "@/public/ts/NativeUI";
-import IF from "@/public/factory/InterFaceFactory";
-import { Grid, GridItem } from 'vant';
-Vue.use(Grid);
-Vue.use(GridItem);
-
-Vue.use(Tab);
-Vue.use(Tabs);
-/**
- * @Description 产品推荐
- * @Author JiangTao
- * @Date 2021-11-10 下午 03:42
- */
-@Component({
-  name: "ProductsRecommended",
-  components: { TitleBar, LoanProducts, DepositProducts, FinancialProducts },
-})
-export default class ProductsRecommended extends Vue {
-  active = 0;
-  pageTitle = ""; // 页面标题
-  show = false;
-  basePhoto = '';
-
-  onClick() {
-    console.log(111111);
-  }
-  mounted() {
-    this.pageTitle = this.$route.meta?.name;
-  }
-  popER() {
-    let param = {
-      tc: nettyApi.TRADE_CODE.selectEWM
-    };
-    NativeUI.showWaiting('正在查询...');
-    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
-      NativeUI.closeWaiting();
-      if (res.rc === '1') {
-        if (res.QRCODE) {
-          this.basePhoto = 'data:image/png;base64,' + res.QRCODE;
-          this.show = true;
-        } else {
-          NativeUI.toast('暂无数据!');
-        }
-      } else {
-        if (res.ret_code != '4999999') {
-          NativeUI.toast(res.msg);
-        }
-      }
-    });
-  };
-}
-</script>
-
-<style scoped>
-.products-recommended-content {
-  width: 100%;
-  height: calc(100vh - 60px);
-  background-color: #f2f2f2;
-  padding-top: 0.7%;
-}
-.products-recommended-content-upper-part {
-  width: 100%;
-  height: 45%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 1%;
-}
-.products-recommended-content-lower-part {
-  height: 51%;
-  margin-top: 0.5%;
-  background-color: white;
-}
-.products-recommended-content-lower-part > div:nth-child(1) {
-  margin-top: 1%;
-}
-::v-deep .van-tabs__wrap {
-  width: 30%;
-  margin: 0 auto;
-  margin-bottom: 1.5%;
-}
-::v-deep .van-tab__text--ellipsis {
-  font-size: 16px;
-  font-family: "Arial Normal", "Arial";
-}
-::v-deep .van-tab--active {
-  color: #fd5065;
-  font-weight: bold;
-  font-family: "Arial Normal", "Arial";
-}
-::v-deep .van-tabs__line {
-  width: 23%;
-}
-::v-deep .van-tab__pane {
-  height: 88%;
-}
-::v-deep .van-tabs {
-  height: 100%;
-}
-::v-deep .van-tabs__content {
-  height: 80%;
-}
-::v-deep .van-nav-bar__right {
-  padding-top: 16px;
-}
-</style>
diff --git a/src/views/workbench/products-recommended/loan-products/ProductDetails.vue b/src/views/workbench/products-recommended/loan-products/ProductDetails.vue
deleted file mode 100644
index ce411afdb6dba95c9daa4a761d5525cce6b53000..0000000000000000000000000000000000000000
--- a/src/views/workbench/products-recommended/loan-products/ProductDetails.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<template>
-  <div>
-    <title-bar :title="title">
-      <van-icon slot="left" name="cross" size="24" />
-    </title-bar>
-    <div class="details">
-      <div class="details-top">
-        <div class="details-top-left"><img :src="img" alt="" /></div>
-        <div class="details-top-right">
-          <div :style="detailsDisplay">
-            <sub-title>产品介绍</sub-title>
-            <div>
-              {{productDescribe}}
-            </div>
-          </div>
-          <div :style="detailsQR" class="QR-code">
-            <div style="color: black;height: calc(100% - 30px);display: flex;align-items: center;justify-content: center" v-if="!QRdata">暂无数据!</div>
-            <div v-if="QRdata">
-              <vue-qr :logoSrc="imageLogURL" :text="qrUrlText"></vue-qr>
-            </div>
-            <div>扫描二维码申请</div>
-          </div>
-        </div>
-      </div>
-
-      <div class="details-bottom">
-      <div class="details-bottom">
-        <sub-title>产品特点</sub-title>
-        <div class="details-bottom-content">
-          <span
-            style="font-size: 14px;line-height: 32px"
-            v-for="(item, index) in arrayFeature"
-            :key="index"
-          >
-            <ul>
-              <li>{{ item }}</li>
-            </ul>
-          </span>
-        </div>
-        <sub-title>办理流程</sub-title>
-        <div class="details-bottom-content">
-            <span
-              style="font-size: 14px;line-height: 32px"
-              v-for="(item, index) in productProcess"
-              :key="index"
-            >{{ item }}</span
-            >
-        </div>
-      </div>
-    </div>
-  </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import TitleBar from "@/components/general/TitleBar.vue";
-import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
-import IF from "@/public/factory/InterFaceFactory";
-import { NativeUI } from "@/public/ts/NativeUI";
-import vueQr from "vue-qr";
-/**
- * @Description 产品详情
- * @Author JiangTao
- * @Date 2021-11-10 下午 03:42
- */
-@Component({
-  name: "ProductDetails",
-  components: { TitleBar, vueQr },
-})
-export default class ProductDetails extends Vue {
-  data = "";
-  img = "";
-  QRdata = true;
-  title = "";
-  qrUrlText = ''; //产品二维码链接
-  imageLogURL = ''; //二维码logo链接
-  productDescribe = "";
-  arrayFeature = [];
-  productProcess = [];
-  qrcodeTitle = '二维码"'
-  detailsDisplay = {};
-  detailsQR = {};
-  onClick() {
-    console.log(111111);
-  }
-  mounted() {
-    this.detailsDisplay = {
-      'height': '96%'
-    };
-    this.detailsQR = {
-      'display': 'none'
-    };
-    this.data = this.$store.getters.getCusInfo;
-    this.productDescribe = this.$store.getters.getCusInfo.productDescribe;
-    this.title = this.$store.getters.getCusInfo.productName;
-    this.img = (this.$store.getters.getCusInfo as any).productPicture;
-    this.arrayFeature = (this.data as any).productFeatures.split('▓');
-    this.productProcess = (this.data as any).productProcess.split('▓');
-    this.qrcodeTitle = (this.data as any).productName + '-进件二维码';
-    /**
-     * @zmk
-     * @2022年02月11日16:00:19
-     * 根据返回的产品编号判断是否需要展示二维码：产品为：随意分、优益买、惠税贷、惠抵贷 、综合消费
-     * 在 Products 补充产品编号
-     * 给 this.item.productNum 赋值产品字段
-     */
-    const Products = ['303131', '303132', '999115', '999114', '140111']; //产品编号
-    if ((this.data as any).productNum && Products.indexOf((this.data as any).productNum) > -1) {
-      this.detailsDisplay = {};
-      this.detailsQR = {};
-      this.QRdata = true;
-      this.showPhoto();
-    }
-  }
-  showPhoto() {
-    let param = {
-      tc: nettyApi.TRADE_CODE.selectEWM
-    };
-    NativeUI.showWaiting('正在查询...');
-    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
-      NativeUI.closeWaiting();
-      if (res.rc == '1') {
-        if (res.QRSERIALNO) {
-          const hearUrlPrefix = `${process.env.VUE_APP_PRODUCT_QRCODE}`;
-          /**
-           * @zmk
-           * @2022年02月11日16:00:44
-           * 缺参数产品ID
-           * 给 productId  赋值产品字段
-           * switch 的判断条件
-           */
-          this.qrUrlText = hearUrlPrefix + '?USERNO=' + res.QRSERIALNO + '&PRODUCTID=' + (this.data as any).productNum;
-          console.log("tgg", this.qrUrlText);
-        } else {
-          this.QRdata = false;
-          // NativeUI.toast('暂无数据!');
-        }
-      } else {
-        if (res.ret_code != '4999999') {
-          NativeUI.toast(res.msg);
-        }
-      }
-    });
-  }
-}
-</script>
-
-<style scoped>
-.details {
-  width: 100%;
-  height: calc(100vh - 60px);
-  overflow-y: auto;
-}
-.details-top {
-  width: 100%;
-  height: 66%;
-  display: flex;
-  align-items: center;
-  border: 1px solid rgba(228, 228, 228, 1);
-}
-.details-top-left {
-  width: 50%;
-  height: 100%;
-  border-right: 1px solid rgba(228, 228, 228, 1);
-  padding: 1%;
-}
-.details-top-left img {
-  width: 100%;
-  height: 100%;
-}
-.details-top-right {
-  width: 50%;
-  height: 100%;
-  padding: 5px 2% 0 2%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.details-top-right > div:nth-child(1) {
-  height: 50%;
-}
-.details-top-right > div:nth-child(1) > div:nth-child(2) {
-  height: calc(100% - 56px);
-  overflow-y: auto;
-}
-.details-top-right > div:nth-child(2) {
-  font-size: 16px;
-  color: #333333;
-  line-height: 30px;
-  height: 50%;
-  max-height: 160px;
-}
-.details-top-right > div:nth-child(3) {
-  width: 85%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  position: absolute;
-  bottom: 0;
-}
-.QR-code {
-  width: 46%;
-  background-color: rgba(248, 248, 248, 0.298039215686275);
-  border: 1px solid rgba(242, 242, 242, 1);
-}
-.QR-code > div:nth-child(1) {
-  width: 43%;
-  margin: 0 auto;
-}
-.QR-code > div:nth-child(1) img {
-  width: 100%;
-}
-.QR-code > div:nth-child(2) {
-  width: 100%;
-  line-height: 30px;
-  text-align: center;
-}
-.application {
-  width: 23.6%;
-}
-.application button {
-  width: 100%;
-  color: white;
-  padding: 5.6% 0;
-  text-align: center;
-  background-color: #fd5065;
-  border: 1px solid #fd5065;
-  border-radius: 25px;
-  font-family: "Arial Normal", "Arial";
-  font-size: 16px;
-  margin-bottom: 20%;
-}
-.details-bottom {
-  width: 100%;
-  padding-top: 2%;
-  padding-left: 1.5%;
-}
-.details-bottom-title {
-  width: 16%;
-  margin-bottom: 1%;
-  display: flex;
-  justify-content: flex-start;
-}
-.details-bottom-title > div:nth-child(1) {
-  width: 3%;
-  margin-right: 4%;
-  background-color: #f3990f;
-}
-.details-bottom-title > div:nth-child(2) {
-  font-family: "Arial Normal", "Arial";
-  font-size: 18px;
-}
-.details-bottom-content {
-  margin-left: 2%;
-}
-.details-bottom-content span {
-  font-size: 16px;
-  color: #333333;
-  line-height: 35px;
-}
-</style>