From 4801309e527b1ecd7d171342b43f1a2a1d2d7abe Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Tue, 24 Sep 2024 14:38:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E9=9A=9C=E5=AF=B9=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppChildrenInfo/AppChildrenDetail.vue     | 141 +++++++---
 .../hljjm/AppChildrenInfo/AppChildrenList.vue |   3 +-
 .../hljjm/AppRecognize/AppRecognize.vue       |  45 ++--
 .../AppRecognize/AppRecognizeSearchList.vue   |   1 +
 .../AppSecurityObject/AppSecurityObject.vue   | 185 +++++++++++++
 .../AppSecurityObjectDetail.vue               | 255 ++++++++++++++++++
 6 files changed, 567 insertions(+), 63 deletions(-)
 create mode 100644 src/project/hljjm/AppSecurityObject/AppSecurityObjectDetail.vue

diff --git a/src/project/hljjm/AppChildrenInfo/AppChildrenDetail.vue b/src/project/hljjm/AppChildrenInfo/AppChildrenDetail.vue
index 3018b403..059dae6e 100644
--- a/src/project/hljjm/AppChildrenInfo/AppChildrenDetail.vue
+++ b/src/project/hljjm/AppChildrenInfo/AppChildrenDetail.vue
@@ -1,15 +1,95 @@
 <template>
   <section class="AppChildrenDetail">
     <div class="info-list">
-      <div class="item" v-for="(item, index) in list" :key="index">
+      <div class="item">
         <div class="title-flex">
-          <div class="item-title">{{item.title}}</div>
-          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="item.isView ? 'right-icon' : 'right-icon right-icon-active'" @click="view(index)">
+          <div class="item-title">基本信息</div>
+          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="isShowBasic ? 'right-icon' : 'right-icon right-icon-active'" @click="view(0)">
         </div>
-        <div class="item-content" v-if="item.isView">
-          <div class="item-form" v-for="(items, indexs) in item.infoList" :key="indexs">
-            <div class="label">{{items.label}}</div>
-            <div class="value">{{items.value}}</div>
+        <div class="item-content" v-if="isShowBasic">
+          <div class="item-form">
+            <div class="label">儿童类别</div>
+            <div class="value">{{$dict.getLabel('CHILD_CATEGORY_CODE', info.childType) || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">儿童名称</div>
+            <div class="value">{{info.childName || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">身份证号</div>
+            <div class="value">{{info.idNumber || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">儿童编号</div>
+            <div class="value">{{info.childNumber || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">性别</div>
+            <div class="value">{{$dict.getLabel('GENDER_CODE', info.gender) || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">年龄</div>
+            <div class="value">{{info.age || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">福利证号</div>
+            <div class="value">{{info.welfareCertificateNumber || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">现住址</div>
+            <div class="value">{{info.presentAddress || '-'}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="title-flex">
+          <div class="item-title">生活费信息</div>
+          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="isShowLifeMoney ? 'right-icon' : 'right-icon right-icon-active'" @click="view(1)">
+        </div>
+        <div class="item-content" v-if="isShowLifeMoney">
+          <div class="item-form">
+            <div class="label">起领年月</div>
+            <div class="value">{{info.startingDate || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">末领年月</div>
+            <div class="value">{{info.lastDate || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">领取人</div>
+            <div class="value">{{info.personName || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">领取人与儿童关系</div>
+            <div class="value">{{info.relationshipChildren || '-'}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="title-flex">
+          <div class="item-title">福利机构信息</div>
+          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="isShowInstitution ? 'right-icon' : 'right-icon right-icon-active'" @click="view(2)">
+        </div>
+        <div class="item-content" v-if="isShowInstitution">
+          <div class="item-form">
+            <div class="label">机构名称</div>
+            <div class="value">{{info.institutionName || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">负责人</div>
+            <div class="value">{{info.legalPersonName || '-'}}</div>
+          </div>
+          <!-- <div class="item-form">
+            <div class="label">固定电话</div>
+            <div class="value">{{info.value || '-'}}</div>
+          </div> -->
+          <div class="item-form">
+            <div class="label">联系电话</div>
+            <div class="value">{{info.institutionTelephone || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">机构地址</div>
+            <div class="value">{{info.houseAddress || '-'}}</div>
           </div>
         </div>
       </div>
@@ -27,38 +107,12 @@ export default {
   appName: "儿童信息详情",
   data() {
     return {
-      list: [
-        {
-          title: '基本信息',
-          isView: true,
-          infoList: [
-            {
-              label: '儿童类别',
-              value: '事实无人抚养儿童'
-            },
-            {
-              label: '儿童类别',
-              value: '事实无人抚养儿童'
-            }
-          ]
-        },
-        {
-          title: '基本信息',
-          isView: true,
-          infoList: [
-            {
-              label: '儿童类别',
-              value: '事实无人抚养儿童'
-            },
-            {
-              label: '儿童类别',
-              value: '事实无人抚养儿童'
-            }
-          ]
-        }
-      ],
       childType: '',
-      synId: ''
+      synId: '',
+      info: {},
+      isShowBasic: false,
+      isShowLifeMoney: false,
+      isShowInstitution: false
     }
   },
   onLoad(option) {
@@ -76,8 +130,14 @@ export default {
     })
   },
   methods: {
-    view(index) {
-      this.list[index].isView = !this.list[index].isView
+    view(type) {
+      if(!type) {
+        this.isShowBasic = !this.isShowBasic
+      }else if(type == 1) {
+        this.isShowLifeMoney = !this.isShowLifeMoney
+      }else {
+        this.isShowInstitution = !this.isShowInstitution
+      }
     },
     toView() {
       uni.navigateTo({url: `./AppChildrenDetailView`})
@@ -88,6 +148,7 @@ export default {
           withoutToken: true
         }).then((res) => {
         if (res.code == 200) {
+
           this.info = {...res.data}
         }else {
           this.$u.toast(res.msg)
diff --git a/src/project/hljjm/AppChildrenInfo/AppChildrenList.vue b/src/project/hljjm/AppChildrenInfo/AppChildrenList.vue
index ce7e2800..fdf0d2ae 100644
--- a/src/project/hljjm/AppChildrenInfo/AppChildrenList.vue
+++ b/src/project/hljjm/AppChildrenInfo/AppChildrenList.vue
@@ -14,6 +14,7 @@
           <span>{{item.age}}岁</span>
         </div>
       </div>
+      <AiEmpty v-if="!list.length"></AiEmpty>
     </div>
   </section>
 </template>
@@ -53,7 +54,7 @@ export default {
       if(this.current > this.pageTotal) return
       this.$http.post(`/mobile/childrenInfo/findListPage`, 
         {
-          childName: this.childName,
+          // childName: this.childName,
           // childType: this.childType,
           pageNum: this.current,
           pageSize: 10,
diff --git a/src/project/hljjm/AppRecognize/AppRecognize.vue b/src/project/hljjm/AppRecognize/AppRecognize.vue
index 105b9a04..0c112425 100644
--- a/src/project/hljjm/AppRecognize/AppRecognize.vue
+++ b/src/project/hljjm/AppRecognize/AppRecognize.vue
@@ -1,28 +1,29 @@
 <template>
   <section class="AppRecognize">
-  <u-navbar title="认亲助养" title-color="#fff" title-width="300" title-size="34" 
-    :title-bold="true" :background="backgroundNavbar" :height="44" back-icon-color="#fff">
-    <div slot="right" class="btn-right" @click="showAdd=true">查询/新增</div>
-  </u-navbar>
-  <div class="select-content" v-if="showAdd">
-    <span class="triangle-up"></span>
-    <div class="item" @click="linkTo('./AppRecognizeSearchTab')">查询</div>
-    <div class="item" @click="linkTo(`./AppRecognizeAdd?assistanceMethod=${tabList[tabIndex].val}`)">新增认清助养</div>
-  </div>
-  <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="change" height="112" :bar-style="barStyle"
-    bg-color="#fff" inactive-color="#666" active-color="#222" :active-item-style="activeStyle"></u-tabs>
-  <div class="user-list">
-    <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
-      <div class="item-top">
-        <div class="title">助养方：{{item.sponsorName}}</div>
-        <div class="info">助养对象：{{item.sponsoredChildName}}</div>
-        <div class="info">相信描述：{{item.details}}</div>
-      </div>
-      <div class="item-bottom">
-        <div class="time">{{item.processingDate}}</div>
-      </div>
+    <u-navbar title="认亲助养" title-color="#fff" title-width="300" title-size="34" 
+      :title-bold="true" :background="backgroundNavbar" :height="44" back-icon-color="#fff">
+      <div slot="right" class="btn-right" @click="showAdd=true">查询/新增</div>
+    </u-navbar>
+    <div class="select-content" v-if="showAdd">
+      <span class="triangle-up"></span>
+      <div class="item" @click="linkTo('./AppRecognizeSearchTab')">查询</div>
+      <div class="item" @click="linkTo(`./AppRecognizeAdd?assistanceMethod=${tabList[tabIndex].val}`)">新增认清助养</div>
+    </div>
+    <u-tabs u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="change" height="112" :bar-style="barStyle"
+    bg-color="#fff" inactive-color="#666" active-color="#222" :active-item-style="activeStyle"></u-tabs>
+    <div class="user-list">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+        <div class="item-top">
+          <div class="title">助养方：{{item.sponsorName}}</div>
+          <div class="info">助养对象：{{item.sponsoredChildName}}</div>
+          <div class="info">相信描述：{{item.details}}</div>
+        </div>
+        <div class="item-bottom">
+          <div class="time">{{item.processingDate}}</div>
+        </div>
+      </div>
+      <AiEmpty v-if="!list.length"></AiEmpty>
     </div>
-  </div>
   </section>
 </template>
 
diff --git a/src/project/hljjm/AppRecognize/AppRecognizeSearchList.vue b/src/project/hljjm/AppRecognize/AppRecognizeSearchList.vue
index 8d3f01be..94e4c9f4 100644
--- a/src/project/hljjm/AppRecognize/AppRecognizeSearchList.vue
+++ b/src/project/hljjm/AppRecognize/AppRecognizeSearchList.vue
@@ -11,6 +11,7 @@
           <div class="time">{{item.processingDate}}</div>
         </div>
       </div>
+      <AiEmpty v-if="!list.length"></AiEmpty>
     </div>
   </section>
 </template>
diff --git a/src/project/hljjm/AppSecurityObject/AppSecurityObject.vue b/src/project/hljjm/AppSecurityObject/AppSecurityObject.vue
index e69de29b..2f895389 100644
--- a/src/project/hljjm/AppSecurityObject/AppSecurityObject.vue
+++ b/src/project/hljjm/AppSecurityObject/AppSecurityObject.vue
@@ -0,0 +1,185 @@
+<template>
+  <section class="AppSecurityObject">
+    <div class="tab-content">
+      <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="change" height="112" :bar-style="barStyle"
+        bg-color="#fff" inactive-color="#666" active-color="#222" :active-item-style="activeStyle"></u-tabs>
+    </div>
+    <div class="select-type">
+      {{$dict.getLabel('CHILD_CATEGORY_CODE', childTypeCode) || '儿童类别'}}<u-icon name="arrow-down" color="#999" size="28"></u-icon>
+    </div>
+    <div class="user-list">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+        <div class="item-top">
+          <div class="title">儿童姓名：{{item.name}}</div>
+          <div class="info">身份证号：{{item.idNumber}}</div>
+          <div class="info">儿童类别：{{item.childType}}</div>
+          <div class="type">{{item.itemName}}</div>
+        </div>
+        <div class="item-bottom">
+          <div class="time">{{item.applicationDate}}</div>
+        </div>
+      </div>
+      <AiEmpty v-if="!list.length"></AiEmpty>
+    </div>
+    <u-select v-model="isShowType" :list="$dict.getDict('CHILD_CATEGORY_CODE')" value-name="dictValue" label-name="dictName"  @confirm="typeChange"></u-select>
+  </section>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: "AppSecurityObject",
+  appName: "保障对象管理",
+  data() {
+    return {
+      tabList: [{name: '全部', val: ''}, {name: '助医', val: 2}, {name: '助学', val: 1}, {name: '基本生活费', val: 3}],
+			tabIndex: 0,
+      barStyle: {
+        'width': '20px', 
+        'bottom': '-3px', 
+        'background': '#4181FF', 
+        'border-radius': '2px'
+      },
+      activeStyle: {
+        'font-weight' : '400',
+        'color': '#222'
+      },
+      current: 1,
+      pageTotal: 2,
+      list: [],
+      isShowType: false,
+      childTypeCode: ''
+    }
+  },
+  onLoad() {
+    uni.setNavigationBarColor({
+      frontColor: '#ffffff',
+      backgroundColor: '#2183FF'
+    })
+    uni.setNavigationBarTitle({
+      title: '保障对象管理'
+    })
+    this.$dict.load(['item_Type', 'CHILD_CATEGORY_CODE']).then(() => {
+      this.getList()
+    })
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    change(e) {
+      this.tabIndex = e
+      this.current = 1
+      this.pageTotal = 2
+      this.list = []
+      this.getList()
+    },
+    getList() {
+      if(this.current > this.pageTotal) return
+      this.$http.post(`/mobile/guaranteeObject/findListPage`, 
+        {
+          itemType: this.tabList[this.tabIndex].val,
+          pageNum: this.current,
+          pageSize: 10,
+          divisionCode: this.user.divisionCode || '',
+          childTypeCode: this.childTypeCode
+        },
+        {
+          withoutToken: true
+        }).then((res) => {
+        if (res.code == 200) {
+          this.list = this.current > 1 ? [...this.datas, ...res.data.rows] : res.data.rows
+          this.pageTotal = Math.ceil(res.data.total/10)
+        }else {
+          this.$u.toast(res.msg)
+        }
+      })
+    },
+    toDetail(row) {
+      uni.navigateTo({url: `./AppSecurityObjectDetail?childrenId=${row.childrenId}&childTypeCode=${row.childTypeCode}&itemType=${row.itemType}`})
+    },
+    typeChange(e) {
+      this.childTypeCode = e[0].value
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  background-color: #F5F6F7;
+}
+.AppSecurityObject {
+  .tab-content {
+    padding-right: 120px;
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+  .select-type {
+    width: 100%;
+    line-height: 40px;
+    background: #FFF;
+    border-top: 1px solid #ddd;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    font-family: PingFangSC-Regular;
+    font-size: 8px;
+    color: #222;
+    .u-icon {
+      margin-left: 14px;
+    }
+  }
+  .user-list {
+    padding: 24px 32px 0 32px;
+    box-sizing: border-box;
+    .item {
+      width: 100%;
+      background: #FFF;
+      border-radius: 16px;
+      margin-bottom: 24px;
+      .item-top {
+        padding: 24px;
+        position: relative;
+        .title {
+          line-height: 48px;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 34px;
+          color: #333;
+          margin-bottom: 12px;
+          word-break: break-all;
+        }
+        .info {
+          line-height: 48px;
+          font-family: PingFangSC-Regular;
+          font-size: 26px;
+          color: #666;
+        }
+        .type {
+          position: absolute;
+          top: 24px;
+          right: 24px;
+          padding: 6px 16px;
+          line-height: 36px;
+          font-family: PingFangSC-Regular;
+          font-size: 26px;
+          color: #2A6DF4;
+          background: #F5F7FC;
+          border: 1px solid #E1E8F6;
+          border-radius: 8px;
+        }
+      }
+      .item-bottom {
+        padding: 14px 0 10px 24px;
+        border-top: 1px solid #E4E5E6;
+        .time {
+          line-height: 48px;
+          font-family: PingFangSC-Regular;
+          font-size: 24px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/hljjm/AppSecurityObject/AppSecurityObjectDetail.vue b/src/project/hljjm/AppSecurityObject/AppSecurityObjectDetail.vue
new file mode 100644
index 00000000..7eeee902
--- /dev/null
+++ b/src/project/hljjm/AppSecurityObject/AppSecurityObjectDetail.vue
@@ -0,0 +1,255 @@
+<template>
+  <section class="AppSecurityObjectDetail">
+    <div class="info-list">
+      <div class="item">
+        <div class="title-flex">
+          <div class="item-title">基本信息</div>
+          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="isShowBasic ? 'right-icon' : 'right-icon right-icon-active'" @click="view(0)">
+        </div>
+        <div class="item-content" v-if="isShowBasic">
+          <div class="item-form">
+            <div class="label">儿童类别</div>
+            <div class="value">{{$dict.getLabel('CHILD_CATEGORY_CODE', info.childType) || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">儿童名称</div>
+            <div class="value">{{info.name || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">身份证号</div>
+            <div class="value">{{info.idNumber || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">性别</div>
+            <div class="value">{{$dict.getLabel('GENDER_CODE', info.gender) || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">户籍地址</div>
+            <div class="value">{{info.householdAddress|| '-'}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="title-flex">
+          <div class="item-title">事项信息</div>
+          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="isShowMatter ? 'right-icon' : 'right-icon right-icon-active'" @click="view(1)">
+        </div>
+        <div class="item-content" v-if="isShowMatter">
+          <div class="item-form">
+            <div class="label">事项名称</div>
+            <div class="value">{{info.itemName || '-'}}</div>
+          </div>
+          <div class="item-form">
+            <div class="label">申请时间</div>
+            <div class="value">{{info.applicationDate || '-'}}</div>
+          </div>
+
+
+          <div v-if="info.itemType == 2">
+            <div class="item-form">
+              <div class="label">住院日期</div>
+              <div class="value">{{info.hospitalizationDate || '-'}}</div>
+            </div>
+            <div class="item-form">
+              <div class="label">出院日期</div>
+              <div class="value">{{info.dischargeDate || '-'}}</div>
+            </div>
+            <div class="item-form">
+              <div class="label">医疗费用</div>
+              <div class="value">{{info.medicalExpenses || '-'}}</div>
+            </div>
+          </div>
+
+          <div v-if="info.itemType == 1">
+            <div class="item-form">
+              <div class="label">就读学校</div>
+              <div class="value">{{info.school || '-'}}</div>
+            </div>
+            <div class="item-form">
+              <div class="label">学历</div>
+              <div class="value">{{info.education || '-'}}</div>
+            </div>
+            <div class="item-form">
+              <div class="label">助学开始日期</div>
+              <div class="value">{{info.educationStartDate || '-'}}</div>
+            </div>
+            <div class="item-form">
+              <div class="label">助学结束日期</div>
+              <div class="value">{{info.educationEndDate || '-'}}</div>
+            </div>
+          </div>
+
+          <div v-if="info.itemType == 3">
+            <!-- <div class="item-form">
+              <div class="label">起领年月</div>
+              <div class="value">{{info.startingDate || '-'}}</div>
+            </div>
+            <div class="item-form">
+              <div class="label">末领年月</div>
+              <div class="value">{{info.lastDate || '-'}}</div>
+            </div> -->
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <!-- <div class="footer-btn">
+      <div class="btn primary" @click="toView()">查看儿童详细信息</div>
+      <div class="btn">返回</div>
+    </div> -->
+  </section>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: "AppSecurityObjectDetail",
+  appName: "保障对象详情",
+  data() {
+    return {
+      childrenId: '',
+      childTypeCode: '',
+      itemType: '',
+      info: {},
+      isShowBasic: false,
+      isShowMatter: false,
+    }
+  },
+  onLoad(option) {
+    uni.setNavigationBarColor({
+      frontColor: '#ffffff',
+      backgroundColor: '#2183FF'
+    })
+    uni.setNavigationBarTitle({
+      title: '保障对象详情'
+    })
+    this.childrenId = option.childrenId
+    this.childTypeCode = option.childTypeCode
+    this.itemType = option.itemType
+    // this.$dict.load(['CHILD_CATEGORY_CODE', 'GENDER_CODE']).then(() => {
+    //   this.getDetail()
+    // })
+    this.getDetail()
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    view(type) {
+      if(!type) {
+        this.isShowBasic = !this.isShowBasic
+      }else if(type == 1) {
+        this.isShowMatter = !this.isShowMatter
+      }
+    },
+    getDetail() {
+      this.$http.post(`/mobile/guaranteeObject/findDetails`, 
+        {
+          childrenId: this.childrenId,
+          childTypeCode: this.childTypeCode,
+          divisionCode: this.user.divisionCode || "230000000000",
+          itemType: this.itemType
+        },
+        {
+          withoutToken: true
+        }).then((res) => {
+        if (res.code == 200) {
+
+          this.info = {...res.data}
+        }else {
+          this.$u.toast(res.msg)
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  background-color: #F5F6F7;
+}
+.AppSecurityObjectDetail {
+  .info-list {
+    
+    .item {
+      padding-left: 32px;
+      box-sizing: border-box;
+      margin-bottom: 24px;
+      background-color: #fff;
+      .title-flex {
+        width: 100%;
+        display: flex;
+        line-height: 42px;
+        .item-title {
+          width: calc(100% - 80px);
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 32px;
+          color: #222;
+          padding: 20px 0;
+        }
+        .right-icon {
+          width: 40px;
+          height: 40px;
+          padding: 20px;
+          transform: rotate(-90deg);
+          transition: all 0.3s ease-in-out;
+        }
+        .right-icon-active {
+          transform: rotate(90deg);
+        }
+      }
+      .item-content {
+        .item-form {
+          width: 100%;
+          padding: 16px 20px 16px 0;
+          border-bottom: 1px solid #E4E5E6;
+          box-sizing: border-box;
+          word-break: break-all;
+          font-family: PingFangSC-Regular;
+          .label {
+            height: 44px;
+            font-size: 32px;
+            color: #999;
+            margin-bottom: 20px;
+          }
+          .value {
+            line-height: 40px;
+            font-size: 28px;
+            color: #222;
+            letter-spacing: 0;
+          }
+        }
+      }
+    }
+  }
+  .footer-btn {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 16px 32px 52px 16px;
+    box-sizing: border-box;
+    background-color: #fff;
+    z-index: 9;
+    .btn {
+      width: 100%;
+      text-align: center;
+      height: 96px;
+      line-height: 94px;
+      border: 1px solid #2183FF;
+      border-radius: 8px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      color: #2183FF;
+      margin-bottom: 16px;
+    }
+    .primary {
+      background-color: #2183FF;
+      color: #fff;
+    }
+  }
+}
+</style>