Merge branch 'liuxin' into develop

src/pages/userBindNew/np/accessory-info.vue

@@ -16,7 +16,7 @@
         :key="index"
         class="card"
       >
-        <span>{{ list.description }}</span>
+        <span style="color:#1D3FFF">{{ list.description }}</span>
         <div class="img-content">
           <!--待上传图片列表-->
           <div v-if="list.cdd_item==='ASSETS_CARD'">
@@ -49,24 +49,24 @@
             </div>
           </div>
           <div v-if="list.cdd_item==='CAR_CARD'">
-            <div v-if="!isUploadCar" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+            <div v-if="!carImg" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
               <img src="@/assets/userBind/camera.png" class="upload-btn" >
             </div>
-            <div v-if="isUploadCar&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+            <div v-if="carImg&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
               <img :src="carImg" style="width:100%;height:100%">
             </div>
-            <div v-if="isUploadCar&&isApproved" class="card-upload plus" @click="showBigPicture(carImg)">
+            <div v-if="carImg&&isApproved" class="card-upload plus" @click="showBigPicture(carImg)">
               <img :src="carImg" style="width:100%;height:100%">
             </div>
           </div>
           <div v-if="list.cdd_item==='HOUSE_CARD'">
-            <div v-if="!isUploadHouse" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+            <div v-if="!houseImg" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
               <img src="@/assets/userBind/camera.png" class="upload-btn" >
             </div>
-            <div v-if="isUploadHouse&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+            <div v-if="houseImg&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
               <img :src="houseImg" style="width:100%;height:100%">
             </div>
-            <div v-if="isUploadHouse&&isApproved" class="card-upload plus" @click="showBigPicture(houseImg)">
+            <div v-if="houseImg&&isApproved" class="card-upload plus" @click="showBigPicture(houseImg)">
               <img :src="houseImg" style="width:100%;height:100%">
             </div>
           </div>
@@ -189,9 +189,14 @@ export default {
       list: {},
       houseImg: '',
       carImg: '',
-      isApproved: window.localStorage.isApproved,
-      isUploadHouse: false,
-      isUploadCar: false,
+      house_id: '',
+      car_id: '',
+      houseFlag: false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
+      carFlag: false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
+      isUploadHouse: false, // 房产证修改标识
+      isUploadCar: false, // 行驶证修改标识
+      houseAttachmentId: '',
+      carAttachmentId: '',
       hauseInfo: {
         house_owner: '',
         public_situation: '',
@@ -214,6 +219,11 @@ export default {
       dowload_list: [],
     }
   },
+  computed: {
+    isApproved () {
+      return window.localStorage.user_bp_status === 'APPROVED'
+    },
+  },
   beforeRouteEnter (to, from, next) {
     next(vm => {
       if (from.name === 'NPInvoiceInfo' && window.localStorage.from) {
@@ -224,6 +234,43 @@ export default {
   },
   methods: {
     save () {
+      let vm = this
+      if (vm.isUploadHouse) {
+        vm.houseFlag = true
+        vm.delete_pic_to_ocr(vm.houseAttachmentId)// 房产证修改，重新上传
+        let list = []
+        let obj = {
+          pkvalue: vm.house_id,
+          source_type: 'PRJ_CDD_ITEM_CHECK',
+          picture: '',
+          check_id: vm.house_id,
+          filePath: vm.houseImg,
+          attachment_id: '',
+          user_id: 1,
+          fileName: '房产证',
+        }
+        list.push(obj)
+        vm.save_picture(list)
+        vm.isUploadHouse = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
+      }
+      if (vm.isUploadCar) {
+        vm.carFlag = true
+        vm.delete_pic_to_ocr(vm.carAttachmentId)// 房产证修改，重新上传
+        let list = []
+        let obj = {
+          pkvalue: vm.car_id,
+          source_type: 'PRJ_CDD_ITEM_CHECK',
+          picture: '',
+          check_id: vm.car_id,
+          filePath: vm.carImg,
+          attachment_id: '',
+          user_id: 1,
+          fileName: '行驶证',
+        }
+        list.push(obj)
+        vm.save_picture(list)
+        vm.isUploadCar = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
+      }
       this.$router.push({
         name: 'NPBankInfo',
       })
@@ -281,8 +328,10 @@ export default {
         } else {
           if (ocrType === 'HOUSE_CARD') {
             vm.houseImg = imgUrl[0]
+            vm.isUploadHouse = true
           } else if (ocrType === 'CAR_CARD') {
             vm.carImg = imgUrl[0]
+            vm.isUploadCar = true
           }
         }
       }
@@ -467,6 +516,19 @@ export default {
       vm.hlsHttp.post(url, param).then(function (res) {
         // vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
+          var listTemp = [...res.lists]
+          listTemp.forEach(item => {
+            switch (item.cdd_item) {
+              case 'HOUSE_CARD': // 房产证
+                vm.house_id = item.check_id
+                break
+              case 'CAR_CARD': // 承租人身份证背面
+                vm.car_id = item.check_id
+                break
+              default:
+                break
+            }
+          })
           vm.cddItemList = res.lists.filter(i => {
             return i.description.indexOf('身份证') === -1
           })
@@ -477,6 +539,24 @@ export default {
         }
       })
     },
+    delete_pic_to_ocr (attachment_id) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+
+        } else if (res.result === 'E') {
+
+        }
+      })
+    },
     load_picture (check_id, index, cdd_item) {
       let vm = this
       let url =
@@ -495,8 +575,23 @@ export default {
               item.attachment_id +
               '&access_token=' +
               window.localStorage.access_token
-            vm.dowload_list.push(item)
           })
+          switch (cdd_item) {
+            case 'HOUSE_CARD': // 房产证
+              if (!vm.houseFlag) {
+                vm.houseImg = res.lists[0].url
+              }
+              vm.houseAttachmentId = res.lists[0].attachment_id
+              break
+            case 'CAR_CARD': // 行驶证
+              if (!vm.carFlag) {
+                vm.carImg = res.lists[0].url
+              }
+              vm.carAttachmentId = res.lists[0].attachment_id
+              break
+            default:
+              vm.dowload_list.push(res.lists)
+          }
         } else {
           hlsPopup.showLongCenter(res.message)
         }

src/pages/userBindNew/np/new.vue

-<template>
-  <h-view id="accessory">
-    <h-header :proportion="[5,1,1]" class="bar-custom">
-      <div slot="left" class="h-header-btn" @click="$routeGo()">
-        <img src="@/assets/userBind/arrow.png" >
-        <span>附件信息</span>
-      </div>
-    </h-header>
-    <h-content>
-      <div
-        class="userInfo"
-      >附件信息
-      </div>
-      <div
-        v-for="(list, index) in cddItemList"
-        :key="index"
-        class="card"
-      >
-        <span>{{ list.description }}</span>
-        <div class="img-content">
-          <div class="card-upload">
-            <img v-if="" :src="houseImg.picture" @click="showBigPicture(item.picture)" >
-            <img :src="carImg.picture" @click="showBigPicture(item.picture)" >
-          </div>
-          <div class="card-upload plus" @click="imgUploadShow(list.description,list.check_id,list.cdd_item)">
-            <img src="@/assets/userBind/camera.png" class="upload-btn" >
-          </div>
-          <div v-if="list.cdd_item==='HOUSE_CARD'">
-            <list-item :item-height="44" class="card-Info">
-              <item>
-                <div slot="name">房屋所有权人</div>
-                <input
-                  slot="content"
-                  v-model="hauseInfo.house_owner"
-                  readonly
-                  placeholder="识别房产证自动填充"
-                >
-              </item>
-              <item>
-                <div slot="name">共有情况</div>
-                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">房屋坐落</div>
-                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">登记时间</div>
-                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">房屋性质</div>
-                <input slot="content" v-model="hauseInfo.house_property" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">规划用途</div>
-                <input slot="content" v-model="hauseInfo.plan_purpose" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">总层数</div>
-                <input slot="content" v-model="hauseInfo.house_layers" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">建筑面积</div>
-                <input slot="content" v-model="hauseInfo.built_area" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">套内建筑面积</div>
-                <input slot="content" v-model="hauseInfo.built_in_area" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">其他</div>
-                <input slot="content" v-model="hauseInfo.others" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">地号</div>
-                <input slot="content" v-model="hauseInfo.land_number" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item :proportion="[1,1]">
-                <div slot="name">土地使用权取得方式</div>
-                <input slot="content" v-model="hauseInfo.land_get_method" readonly placeholder="识别房产证自动填充" >
-              </item>
-              <item>
-                <div slot="name">土地使用年限</div>
-                <input slot="content" v-model="hauseInfo.land_use_limit" readonly placeholder="识别房产证自动填充" >
-              </item>
-            </list-item>
-          </div>
-          <div v-if="list.cdd_item==='CAR_CARD'">
-            <list-item :item-height="44" class="card-Info">
-              <item>
-                <div slot="name">车辆识别代号</div>
-                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">住址</div>
-                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">品牌型号</div>
-                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">发证日期"</div>
-                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">车辆类型</div>
-                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">所有人</div>
-                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">使用性质</div>
-                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">发动机号码</div>
-                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">号牌号码</div>
-                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
-              </item>
-              <item>
-                <div slot="name">注册日期</div>
-                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
-              </item>
-            </list-item>
-          </div>
-    </div></div></h-content>
-    <bottom-tab class="footer-button">
-      <tab-button class="save" @click.native="save">下一步</tab-button>
-    </bottom-tab>
-  </h-view>
-</template>
-<script>
-export default {
-  data () {
-    return {
-      bp_type: '',
-      houseImg: {},
-      carImg: {},
-      list: {},
-      hauseInfo: {
-        house_owner: '',
-        public_situation: '',
-        house_located: '',
-        regist_date: '',
-        house_property: '',
-        plan_purpose: '',
-        house_layers: '',
-        built_area: '',
-        built_in_area: '',
-        others: '',
-        land_number: '',
-        land_get_method: '',
-        land_use_limit: '',
-      },
-      carInfo: {
-      },
-      upload_list: {},
-      cddItemList: [], // 资料清单列表
-      dowload_list: [],
-    }
-  },
-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-      if (from.name === 'NPInvoiceInfo' && window.localStorage.from) {
-        vm.bp_type = window.localStorage.bp_type
-        vm.loadItemList()
-      }
-    })
-  },
-  methods: {
-    save () {
-      this.$router.push({
-        name: 'NPBankInfo',
-      })
-    },
-    imgUploadOpenCamera (description, check_id, cdd_item) {
-      let vm = this
-      let obj = {
-        pkvalue: check_id,
-        source_type: 'PRJ_CDD_ITEM_CHECK',
-        picture: '',
-        check_id: check_id,
-        filePath: '',
-        attachment_id: '',
-        user_id: 1,
-        fileName: description + '_' + new Date().getTime(),
-      }
-      let cameraoptions = {
-        quality: 100,
-      }
-      let success = function (imgdata) {
-        obj.picture = imgdata
-        obj.filePath = imgdata
-        if (cdd_item === 'CAR_CARD') {
-          vm.carImg = obj
-        } else if (cdd_item === 'HOUSE_CARD') {
-          vm.houseImg = obj
-        }
-      }
-      let error = function () {
-        hlsPopup.showLongCenter('请拍照')
-      }
-      hlsUtil.openCamera(cameraoptions, success, error)
-    },
-    imgUploadTakePicture (description, check_id, cdd_item) {
-      let vm = this
-      let cameraoptions = {
-        quality: 100,
-      }
-      let success = function (imgUrl) {
-        let obj = {
-          pkvalue: check_id,
-          source_type: 'PRJ_CDD_ITEM_CHECK',
-          picture: '',
-          check_id: check_id,
-          filePath: '',
-          attachment_id: '',
-          user_id: 1,
-          fileName: description + '_' + new Date().getTime(),
-        }
-        obj.picture = imgUrl[0]
-        obj.filePath = imgUrl[0]
-        if (cdd_item === 'CAR_CARD') {
-          vm.carImg = obj
-        } else if (cdd_item === 'HOUSE_CARD') {
-          vm.houseImg = obj
-        }
-      }
-      let error = function () {}
-      vm.hlsUtil.takePicture(cameraoptions, success, error)
-    },
-    // 图片保存
-    save_picture () {
-      let vm = this
-      let uploadSuccess = function (res) {
-        if (res.result === 'S') {
-        } else {
-          hlsPopup.hideLoading()
-        }
-      }
-      if (vm.hauseInfo) {
-        hlsUtil.fileUploadSvc(vm.hauseInfo, uploadSuccess)
-      }
-      if (vm.carInfo) {
-        hlsUtil.fileUploadSvc(vm.hauseInfo, uploadSuccess)
-      }
-    },
-    // 移除图片
-    remove_pic (attachment_id, index) {
-      let vm = this
-      var delete_list = []
-      let obj = { attachment_id: attachment_id }
-      delete_list.push(obj)
-      let url = process.env.basePath + 'app_delete_attment' // 附件删除
-      let param = {
-        picturelist: delete_list,
-      }
-      hlsPopup.showLoading('请稍候')
-      vm.hlsHttp.post(url, param).then(function (res) {
-        hlsPopup.hideLoading()
-        if (res.result === 'S') {
-          hlsPopup.showLongCenter('删除成功!')
-          vm.remove_upload_list(attachment_id, index)
-        } else if (res.result === 'E') {
-          hlsPopup.showShortCenter(res.message)
-        }
-      })
-    },
-    // 图片上传入口
-    imgUploadShow (description, check_id, cdd_item) {
-      let vm = this
-      // vm.upload_list = []
-      hlsPopup.showActionSheet({
-        titleText: '请选择照片',
-        buttonArray: ['拍照', '从相册取'],
-        callback: index => {
-          if (index === 0) {
-            vm.imgUploadOpenCamera(description, check_id, cdd_item)
-          } else {
-            vm.imgUploadTakePicture(description, check_id, cdd_item)
-          }
-        },
-      })
-    },
-    // 查看大图
-    showBigPicture (pic) {
-      let vm = this
-      vm.hlsPopup.showBigPicture({
-        imgUrl: pic,
-        width: '100% !important',
-      })
-    },
-    delete_pic (attachment_id) {
-      let vm = this
-      var delete_list = []
-      let obj = { attachment_id: attachment_id }
-      delete_list.push(obj)
-      let url = process.env.basePath + 'app_delete_attment' // 附件删除
-      let param = {
-        picturelist: delete_list,
-      }
-      hlsPopup.showLoading('请稍候')
-      vm.hlsHttp.post(url, param).then(function (res) {
-        hlsPopup.hideLoading()
-        if (res.result === 'S') {
-          hlsPopup.showLongCenter('删除成功!')
-          vm.remove_dowload_list(attachment_id)
-        } else if (res.result === 'E') {
-          hlsPopup.showShortCenter(res.message)
-        }
-      })
-    },
-    loadItemList () {
-      let vm = this
-      vm.dowload_list = []
-      let bpId = window.localStorage.getItem('bp_id')
-      let url = process.env.basePath + 'prj_cdd_check_list'
-      let param = {
-        master: {
-          document_id: bpId,
-          document_table: 'HLS_BP_MASTER',
-          tab_group: 'HLS_NP',
-        },
-      }
-      // vm.hlsPopup.showLoading('请稍候')
-      vm.hlsHttp.post(url, param).then(function (res) {
-        // vm.hlsPopup.hideLoading()
-        if (res.result === 'S') {
-          vm.cddItemList = res.lists.filter(i => {
-            return i.description.indexOf('身份证') === -1
-          })
-          // 查询图片
-          vm.cddItemList.forEach((item, index) => {
-            vm.load_picture(item.check_id, index, item.cdd_item)
-          })
-        }
-      })
-    },
-    load_picture (check_id, index, cdd_item) {
-      let vm = this
-      let url =
-        process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
-      let param = {
-        check_id: check_id,
-      }
-      hlsPopup.showLoading('请稍候')
-      vm.$post(url, param).then(function (res) {
-        vm.hlsPopup.hideLoading()
-        if (res.result === 'S') {
-          res.lists.forEach(item => {
-            item['url'] =
-              process.env.filePath +
-              'attachment_id=' +
-              item.attachment_id +
-              '&access_token=' +
-              window.localStorage.access_token
-            vm.dowload_list.push(item)
-          })
-        } else {
-          hlsPopup.showLongCenter(res.message)
-        }
-      })
-    },
-  },
-}
-</script>
-<style lang="less" scoped>
-#accessory{
-      .userInfo {
-      height: 45px;
-      line-height: 45px;
-      color: @headerColor;
-      margin-top: -10px;
-      font-size: 15px;
-      margin-left: 16px;
-      position: relative;
-    }
-    .userInfo::before {
-      content: "";
-      display: block;
-      width: 4px;
-      height: 20px;
-      background-color: @headerColor;
-      position: absolute;
-      left: -15px;
-      top: 12px;
-    }
-      .card {
-      padding-bottom: 8px;
-      height: auto;
-      background-color: #fff;
-      margin-bottom: 10px;
-
-      display: flex;
-      flex-direction: column;
-      span {
-        color: #656464;
-        font-size: 13px;
-        line-height: 18px;
-        padding-top: 8px;
-        display: block;
-        margin-left: 16px;
-      }
-      .img-content {
-        /*display: flex;
-        flex-flow: row wrap;
-        justify-content: flex-start;
-        align-items: center;*/
-      }
-      .plus {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .card-upload {
-        position: relative;
-        width: 80px;
-        height: 80px;
-        border: 1px dashed #dcdcdd;
-        /* display: flex;
-         justify-content: center;
-         align-items: center;*/
-        margin-top: 12px;
-        margin-left: 16px;
-        float: left;
-        .close {
-          /* position: relative;
-          color: #F96F68;
-          margin-top: -100%;
-          margin-left: -10%;*/
-          position: absolute;
-          color: #f96f68;
-          top: -6px;
-          right: -6px;
-          img {
-            width: 14px;
-            height: 14px;
-          }
-        }
-        img {
-          /*width: 88px;
-          height: 88px;*/
-          width: 100%;
-          height: 100%;
-        }
-        .upload-btn {
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-     .save {
-    color: #fff;
-    border-radius: 4px;
-    background-color: @headerColor;
-  }
-}
-</style>

src/pages/userBindNew/userBind.vue

+<template>
+  <h-view id="user-bind" class="public-style" title="用户绑定">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo(-1)">
+        <span>用户绑定</span>
+      </div>
+    </h-header>
+    <h-content class="content">
+      <div class="info">
+        <div class="info-icon">
+          <img src="@/assets/userBind/info.png" >
+          <span @click="goEnterprise">温馨提示</span>
+        </div>
+        <p>绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
+      </div>
+      <p>选择用户类型</p>
+      <!--<h-button :class="flag==0?'nature':'org'" @click.native="flag = 0">
+        <img src="@/assets/userBind/np.png" class="n-img" >自然人
+      </h-button>
+      <h-button :class="flag==1?'nature':'org'" @click.native="flag = 1">
+        <img src="@/assets/userBind/entr.png" class="o-img" >企业
+      </h-button>-->
+      <div class="bind-wrap" @click="flag = 0">
+        <img :src="flag==0? bindnped:bindnp">
+      </div>
+      <div class="bind-wrap" @click="flag = 1">
+        <img :src="flag==1? bindorged:bindorg">
+      </div>
+      <h-button class="enter" @click.native="changePage">
+        进入
+        <img src="@/assets/userBind/right.png" >
+      </h-button>
+    </h-content>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      flag: 0,
+      bindnp: require('@/assets/userBind/bindnp.png'),
+      bindnped: require('@/assets/userBind/bindnped.png'),
+      bindorg: require('@/assets/userBind/bindorg.png'),
+      bindorged: require('@/assets/userBind/bindorged.png'),
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    changePage () {
+      let name
+      let bpClass
+      if (this.flag === 0) {
+        name = 'NPBaseInfo'
+        bpClass = 'NP'
+      } else if (this.flag === 1) {
+        name = 'EnterpriseNew'
+        bpClass = 'ORG'
+      }
+      this.$router.push({
+        name: name,
+        params: {
+          'bp_class': bpClass,
+        },
+      })
+    },
+    goEnterprise () {
+      this.$router.push({
+        name: 'EnterpriseNew',
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped type="text/less">
+#user-bind {
+  .content {
+    .info {
+      height: 88px;
+      line-height: 88px;
+      background-color: rgba(142, 195, 30, 0.1);
+      .info-icon {
+        height: 30px;
+        padding-top: 20px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 15.8px;
+          height: 15.8px;
+          margin-left: 17.1px;
+        }
+        span {
+          color: rgba(142, 195, 30, 1);
+          font-family: PingFangSC-Semibold;
+          font-size: 14px;
+          margin-left: 9px;
+          letter-spacing: 0.5px;
+          line-height: 20px;
+        }
+      }
+      p {
+        font-size: 13px;
+        font-family: PingFangSC-Regular;
+        color: rgba(101, 100, 100, 0.8);
+        width: 310px;
+        margin-left: 42px;
+        letter-spacing: 0.4px;
+        line-height: 18px;
+        margin-top: 8px;
+      }
+    }
+    p {
+      color: rgba(101, 100, 100, 0.4);
+      font-family: PingFangSC-Regular;
+      letter-spacing: 0.5px;
+      line-height: 24px;
+      margin-left: 16px;
+      margin-top: 24px;
+    }
+    .bind-wrap{
+      width: 92%;
+      margin: 10px auto;
+      img{
+        width: 100%;
+      }
+    }
+    .enter {
+      display: block;
+      width: 343px;
+      height: 56px;
+      font-size: 15px;
+      letter-spacing: 0.5px;
+      line-height: 20px;
+      margin: 0 auto;
+      margin-top: 16px;
+      font-family: PingFangSC-Regular;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .enter {
+      background-color: @headerColor;
+      color: #fff;
+      margin-top: 80px;
+      img {
+        width: 18px;
+        margin-left: 6.3px;
+      }
+    }
+  }
+}
+
+</style>