diff --git a/src/api/YB_APP/index.js b/src/api/YB_APP/index.js
index 58ad1bb6e..7b10c5710 100644
--- a/src/api/YB_APP/index.js
+++ b/src/api/YB_APP/index.js
@@ -114,3 +114,53 @@ export function getAgentInfoByAgentCode(data) {
     data
   })
 }
+
+// 查询续期列表
+export function getYBRenewalsList(data) {
+  return request({
+    url: getUrl('/renewal/renewal/getYBRenewalsList', 1,3),
+    method: 'post',
+    data
+  })
+}
+// 查询续期详情
+export function getYBRenewalInfo(data) {
+  return request({
+    url: getUrl('/renewal/renewal/getYBRenewalInfo', 1,3),
+    method: 'post',
+    data
+  })
+}
+
+// 保全申请进度列表
+export function getSaveAllList(data) {
+  return request({
+    url: getUrl('/renewal/preservation/getSaveAllList', 1,3),
+    method: 'post',
+    data
+  })
+}
+// 保全申请进度详情
+export function ybSaveAllDetail(data) {
+  return request({
+    url: getUrl('/renewal/preservation/ybSaveAllDetail', 1,3),
+    method: 'post',
+    data
+  })
+}
+// 保全现金价值列表
+export function ybSaveManyList(data) {
+  return request({
+    url: getUrl('/renewal/preservation/ybSaveManyList', 1,3),
+    method: 'post',
+    data
+  })
+}
+// 保全现金价值详情
+export function ybSaveManyDetail(data) {
+  return request({
+    url: getUrl('/renewal/preservation/ybSaveManyDetail', 1,3),
+    method: 'post',
+    data
+  })
+} 
\ No newline at end of file
diff --git a/src/assets/YB_APP/images/plaint.png b/src/assets/YB_APP/images/plaint.png
new file mode 100644
index 000000000..d9805d542
Binary files /dev/null and b/src/assets/YB_APP/images/plaint.png differ
diff --git a/src/router/YB_APP/index.js b/src/router/YB_APP/index.js
index a856a1c1d..1775e98a8 100644
--- a/src/router/YB_APP/index.js
+++ b/src/router/YB_APP/index.js
@@ -6,6 +6,11 @@ const YB_APP_performanceQuery = () => import('@/views/YB_APP/performanceQuery')
 const YB_APP_policyList = () => import('@/views/YB_APP/policyList')
 const YB_APP_policyDetail = () => import('@/views/YB_APP/policyDetail')
 const YB_APP_hitTheHeadlines = () => import('@/views/YB_APP/hitTheHeadlines')
+const YB_APP_renewalList = () => import('@/views/YB_APP/renewalList')
+const YB_APP_renewalDetail = () => import('@/views/YB_APP/renewalDetail')
+const YB_APP_saveallList = () => import('@/views/YB_APP/saveallList')
+const YB_APP_saveallDetail = () => import('@/views/YB_APP/saveallDetail')
+const YB_APP_saveallDetailTwo = () => import('@/views/YB_APP/saveallDetailTwo')
 
 export default [
   {
@@ -71,4 +76,49 @@ export default [
       index: 1
     }
   },
+  {
+    path: '/YB_APP/renewalList',
+    name: 'YB_APP_renewalList',
+    component: YB_APP_renewalList,
+    meta: {
+      title: '续期管理列表',
+      index: 1
+    }
+  },
+  {
+    path: '/YB_APP/renewalDetail',
+    name: 'YB_APP_renewalDetail',
+    component: YB_APP_renewalDetail,
+    meta: {
+      title: '续期详情 ',
+      index: 1
+    }
+  },
+  {
+    path: '/YB_APP/saveallList',
+    name: 'YB_APP_saveallList',
+    component: YB_APP_saveallList,
+    meta: {
+      title: '保全中心列表',
+      index: 1
+    }
+  },
+  {
+    path: '/YB_APP/saveallDetail',
+    name: 'YB_APP_saveallDetail',
+    component: YB_APP_saveallDetail,
+    meta: {
+      title: '保全详情 ',
+      index: 1
+          }
+  },
+  {
+    path: '/YB_APP/saveallDetailTwo',
+    name: 'YB_APP_saveallDetailTwo',
+    component: YB_APP_saveallDetailTwo,
+    meta: {
+      title: '保单现金价值详情 ',
+      index: 1
+          }
+  },
 ]
diff --git a/src/views/YB_APP/policyDetail.vue b/src/views/YB_APP/policyDetail.vue
index 1d57a7c65..5608f02d2 100644
--- a/src/views/YB_APP/policyDetail.vue
+++ b/src/views/YB_APP/policyDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="public_container">
-    <div style="height: 100%; width: 96%; background-color: white; margin: 2vh auto; overflow: hidden; border-radius: 12px">
+    <div class="listContent">
       <van-cell-group inset>
         <van-cell title="产品名称" :value="ybOrderDTOList.riskName" />
         <van-cell title="保单号" :value="ybOrderDTOList.riskCode" />
@@ -20,34 +20,32 @@
 </template>
 
 <script>
-
 import { YBpolicyDetail } from '@/api/YB_APP/index'
 export default {
   name: 'policyDetail',
   components: {},
   data() {
     return {
-      ybOrderDTOList:'',
-      policyNo:'',
+      ybOrderDTOList: '',
+      policyNo: ''
     }
   },
   mounted() {
     this.policyNo = this.$route.query.policyNo
-    console.log(this.policyNo,'avc')
+    console.log(this.policyNo, 'avc')
     this.YBpolicyDetail()
   },
   methods: {
-    YBpolicyDetail(){
+    YBpolicyDetail() {
       let params = {
-        policyNo : this.policyNo
+        policyNo: this.policyNo
       }
-      console.log('我是log');
-      YBpolicyDetail(params).then(res => {
-        console.log(res,'我是res')
+      console.log('我是log')
+      YBpolicyDetail(params).then((res) => {
+        console.log(res, '我是res')
         if (res.result == 0) {
           this.ybOrderDTOList = res.content.ybOrderDTO
           console.log(this.ybOrderDTOList, '请求成功的res')
-
         }
       })
     }
@@ -60,13 +58,20 @@ export default {
   height: 100vh;
   width: 100vw;
 }
-/deep/ .van-cell__title{
-  color:#0a0808;
+/deep/ .van-cell__title {
+  color: #0a0808;
   max-width: 30%;
 }
-/deep/ .van-cell__value{
+/deep/ .van-cell__value {
   color: #777676;
   // text-align: left;
 }
-// /deep/ .van-cell-group > 
+// /deep/ .van-cell-group >
+.listContent {
+  width: 96%;
+  background-color: white;
+  margin: 12px auto;
+  overflow: hidden;
+  border-radius: 12px;
+}
 </style>
diff --git a/src/views/YB_APP/policyList.vue b/src/views/YB_APP/policyList.vue
index 46080632a..60f9df8f7 100644
--- a/src/views/YB_APP/policyList.vue
+++ b/src/views/YB_APP/policyList.vue
@@ -6,21 +6,18 @@
       <!-- 右侧搜索按钮 -->
       <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
     </div>
-    <van-popup v-model="showSideBar" position="right" style="width: 80%;height: 100%;" :overlay-style="{ opacity: 0.7 }">
+    <van-popup v-model="showSideBar" position="right" style="width: 80%; height: 100%" :overlay-style="{ opacity: 0.7 }">
       <div class="state-content">
         <div>
           <p>承保日期</p>
           <div class="underwriteDateClass">
             <span class="underwriteDateSpan">{{ underwriteDate }}</span
-            ><img class="underwriteDateImg" 
-              @click="datechange"
-              src="../../assets/YB_APP/images/date.png"
-            />
+            ><img class="underwriteDateImg" @click="datechange" src="../../assets/YB_APP/images/date.png" />
           </div>
         </div>
         <div>
           <p>保单状态</p>
-          <div style="display: flex; flex-wrap: wrap">
+          <div class="chooseMessage">
             <div v-for="(item, index) in list1" :key="index">
               <button @click="warrantyState(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangewarranty == index }">{{ item.name }}</button>
             </div>
@@ -28,7 +25,7 @@
         </div>
         <div>
           <p>渠道名称</p>
-          <div style="display: flex; flex-wrap: wrap">
+          <div class="chooseMessage">
             <div v-for="(item, index) in list2" :key="index">
               <button @click="channelName(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangechannel == index }">{{ item.name }}</button>
             </div>
@@ -36,7 +33,7 @@
         </div>
         <div>
           <p>回访成功</p>
-          <div style="display: flex; flex-wrap: wrap">
+          <div class="chooseMessage">
             <div v-for="(item, index) in list3" :key="index">
               <button @click="visitSucceed(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangevisitSucceed == index }">{{ item.name }}</button>
             </div>
@@ -44,7 +41,7 @@
         </div>
         <div>
           <p>回访完成</p>
-          <div style="display: flex; flex-wrap: wrap">
+          <div class="chooseMessage">
             <div v-for="(item, index) in list3" :key="index">
               <button @click="visitAccomplish(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangevisitAccomplish == index }">
                 {{ item.name }}
@@ -68,44 +65,43 @@
     </div>
     <!-- 卡片列表 -->
     <div v-if="filpolicyListDTOList != ''">
-      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-        <div class="cardList" v-for="(item, index) in filpolicyListDTOList" :key="index">
-          <div :class="[item.orderStatus == 1 ? 'topbackground1' : 'topbackground2']">
-            <img class="cardListImg" v-if="item.orderStatus == 1" src="../../assets/YB_APP/images/sign1.png" />
-            <!-- 字左边小对号图片  -->
-            <img class="cardListImg" v-if="item.orderStatus != 1" src="../../assets/YB_APP/images/sign2.png" />
-            <span class="cardListText">{{ item.riskName }}</span>
+      <!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> -->
+      <div class="cardList" v-for="(item, index) in filpolicyListDTOList" :key="index">
+        <div :class="[item.orderStatus == 1 ? 'topbackground1' : 'topbackground2']">
+          <img class="cardListImg" v-if="item.orderStatus == 1" src="../../assets/YB_APP/images/sign1.png" />
+          <!-- 字左边小对号图片  -->
+          <img class="cardListImg" v-if="item.orderStatus != 1" src="../../assets/YB_APP/images/sign2.png" />
+          <span class="cardListText">{{ item.riskName }}</span>
+        </div>
+        <!-- 卡片内容 -->
+        <div class="cardConetent">
+          <div class="textList">
+            <p class="policyNo">
+              <span>保单号</span><span>{{ item.policyNo }}</span>
+            </p>
+            <p>
+              <span>被保人</span><span>{{ item.insuredName }}</span>
+            </p>
+            <p>
+              <span>承保日期</span><span>{{ item.cvaliDate }}</span>
+            </p>
+            <p>
+              <span>销售渠道</span><span>{{ item.bankChannel }}</span>
+            </p>
+            <!-- 根据0,1状态判断显示是否和文字颜色 -->
+            <p v-if="item.visitSuccess == 0"><span>回访成功</span><span class="visitNo">否</span></p>
+            <p v-if="item.visitSuccess == 1"><span>回访成功</span><span>是</span></p>
+            <p v-if="item.visitFinish == 0"><span>回访完成</span><span class="visitNo">否</span></p>
+            <p v-if="item.visitFinish == 1"><span>回访完成</span><span>是</span></p>
           </div>
-          <!-- 卡片内容 -->
-          <div class="cardConetent">
-            <div class="textList">
-              <p class="policyNo">
-                <span>保单号</span><span>{{ item.policyNo }}</span>
-              </p>
-              <p>
-                <span>被保人</span><span>{{ item.insuredName }}</span>
-              </p>
-              <p>
-                <span>承保日期</span><span>{{ item.cvaliDate }}</span>
-              </p>
-              <p>
-                <span>销售渠道</span><span>{{ item.bankChannel }}</span>
-              </p>
-              <!-- 根据0,1状态判断显示是否和文字颜色 -->
-              <p v-if="item.visitSuccess == 0"><span>回访成功</span><span class="visitNo">否</span></p>
-              <p v-if="item.visitSuccess == 1"><span>回访成功</span><span>是</span></p>
-              <p v-if="item.visitFinish == 0"><span>回访完成</span><span class="visitNo">否</span></p>
-              <p v-if="item.visitFinish == 1"><span>回访完成</span><span>是</span></p>
-            </div>
-            <!-- 右边状态图片 -->
-            <div class="rightState">
-              <!-- 有效 -->
-              <img class="rightStateImg" :src="item.stateRoute" alt="" />
-              <button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
-            </div>
+          <!-- 右边状态图片 -->
+          <div class="rightState">
+            <img class="rightStateImg" :src="item.stateRoute" alt="" />
+            <button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
           </div>
         </div>
-      </van-list>
+      </div>
+      <!-- </van-list> -->
     </div>
   </div>
 </template>
@@ -160,8 +156,6 @@ export default {
       calendarShow: false,
       currentDate: new Date(),
       underwriteDate: '', // 承保日期的时间
-      loading: false,
-      finished: false,
       params: {
         signDate: '', // 日期
         riskCode: '', // 保单号
@@ -208,21 +202,6 @@ export default {
     datechange() {
       this.calendarShow = true
     },
-    onLoad() {
-      console.log('onLoad')
-      setTimeout(() => {
-        // for (let i = 0; i < 10; i++) {
-        //   list.value.push(list.value.length + 1)
-        // }
-        // console.log(this.filpolicyListDTOList, '过滤后卡片')
-        // 加载状态结束
-        // loading.value = false
-        // 数据全部加载完成
-        if (this.filpolicyListDTOList.length >= 4) {
-          ;(this.finished = true), (this.loading = false)
-        }
-      }, 500)
-    },
     // 四个选择的状态
     warrantyState(val) {
       this.clickChangewarranty = val
@@ -372,25 +351,25 @@ export default {
 .searchButton {
   position: absolute;
   top: 10px;
-  right: 0px;
+  right: 12px;
   background-color: #2154cc;
   color: #ffffff;
   border-radius: 120px;
-  padding:9px 15px;
+  padding: 9px 15px;
   font-size: 12px;
   border: 0px;
 }
 .noContentImg {
   height: 216px;
-  width: 285px;
+  // width: 285px;
   position: absolute;
-  top: 18%;
+  top: 120px;
   left: calc(50% - 142px);
 }
 .noContentText {
   font-size: 12px;
   position: absolute;
-  top: 37%;
+  top: 279px;
   left: calc(50% - 24px);
   color: #b3b5ca;
 }
@@ -433,12 +412,12 @@ export default {
   font-size: 12px;
 }
 .cardListText {
-  line-height: 5vh;
+  line-height: 6px;
   font-weight: 600;
   font-size: 14px;
 }
 .cardConetent {
-  height: 22.5vh;
+  // height: 22.5vh;
   width: 100%;
   padding: 0px 20px;
   display: flex;
@@ -463,7 +442,7 @@ export default {
 .textList > p > span:nth-of-type(2) {
   // width: 5vh;
   // background-color: rgb(65, 214, 77);
-  margin-left: 8vw;
+  margin-left: 28px;
   width: 164px;
   // background-color: chartreuse;
   overflow: hidden;
@@ -478,14 +457,16 @@ export default {
   height: 34px;
   width: 100%;
   color: white;
-  display:flex;
-  align-items:center;
+  display: flex;
+  align-items: center;
 }
 .topbackground2 {
   background: linear-gradient(to right, #fcfcfc, #e8e5e6);
-  height: 4.5vh;
+  height: 34px;
   width: 100%;
   color: #323232;
+  display: flex;
+  align-items: center;
 }
 .state-content {
   padding: 14px;
@@ -497,10 +478,10 @@ export default {
   font-size: 14px;
 }
 .bottom-area {
-  display:flex;
-  justify-content:center;
-  margin-top:20px;
-  margin-bottom:20px;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
   /deep/.m-btn-left {
     width: 40%;
     border-color: transparent;
@@ -539,16 +520,32 @@ export default {
   background-color: #fbe7e4;
   color: #be5759;
 }
-.policyNo{
-  font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353;
+.policyNo {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 13px;
+  color: #535353;
 }
-.underwriteDateClass{
-  width: 96%; height: 30px; background-color: #f8f8fa; border-radius: 30px; position: relative;
+.underwriteDateClass {
+  width: 96%;
+  height: 30px;
+  background-color: #f8f8fa;
+  border-radius: 30px;
+  position: relative;
 }
-.underwriteDateSpan{
-  line-height: 30px; margin-left: 10px;
+.underwriteDateSpan {
+  line-height: 30px;
+  margin-left: 10px;
 }
-.underwriteDateImg{
-  height: 16px; align-items: center; position: absolute; right: 10px; top: 7px;
+.underwriteDateImg {
+  height: 16px;
+  align-items: center;
+  position: absolute;
+  right: 10px;
+  top: 7px;
+}
+.chooseMessage {
+  display: flex;
+  flex-wrap: wrap;
 }
 </style>
diff --git a/src/views/YB_APP/renewalDetail.vue b/src/views/YB_APP/renewalDetail.vue
new file mode 100644
index 000000000..4b3935c8d
--- /dev/null
+++ b/src/views/YB_APP/renewalDetail.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="public_container">
+    <!-- 上方小图标 -->
+    <div class="topTitle">
+      <div v-if="abc == 1">
+        <van-icon name="underway-o" color="#EA070A" size="30" />
+        <p class="topTitleText">{{ ybOrderDTOList.defaultReson }}</p>
+      </div>
+      <div v-if="abc == 2">
+        <van-icon name="passed" color="#2451C1" size="30" />
+        <p class="topTitleText">续期扣款成功</p>
+      </div>
+    </div>
+    <!-- 中间内容 -->
+    <div class="listContent">
+      <van-cell-group inset>
+        <van-cell title="保单号" :value="ybOrderDTOList.contNo" />
+        <van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
+        <van-cell title="首期保费/元" :value="ybOrderDTOList.money" />
+        <van-cell title="保额/元" :value="ybOrderDTOList.amnt" />
+        <van-cell title="投保人" :value="ybOrderDTOList.appntName" />
+        <van-cell title="被保险人" :value="ybOrderDTOList.insuredName" />
+        <van-cell title="转账银行" :value="ybOrderDTOList.bankCode" />
+        <van-cell title="转账帐号" :value="ybOrderDTOList.bankAccNo" />
+        <van-cell title="交费次数" :value="ybOrderDTOList.payTimes" />
+        <van-cell title="应交日" :value="ybOrderDTOList.chargeDate" />
+        <van-cell title="归属网点" :value="ybOrderDTOList.netWorkName" />
+        <van-cell title="归属地市" :value="ybOrderDTOList.city" />
+        <van-cell title="保单生效日" :value="ybOrderDTOList.payToDate" />
+        <van-cell title="归属指标" :value="ybOrderDTOList.rnewIndex" />
+      </van-cell-group>
+    </div>
+    <!-- 下方拨打电话 -->
+    <div class="bottomPhone">
+      <button class="bottomPhoneBut" @click="showDialog">拨打电话</button>
+    </div>
+
+<van-dialog
+      v-model="show"
+      title="服务热线"
+      :message="`确认拨打8888410服务热线吗?`"
+      show-cancel-button
+      @cancel="cancel"
+      @confirm="contact"
+    >
+  </van-dialog>
+  </div>
+</template>
+
+<script>
+import { getYBRenewalInfo } from '@/api/YB_APP/index'
+export default {
+  name: 'policyDetail',
+  components: {},
+  data() {
+    return {
+      ybOrderDTOList: '',
+      policyNo: '',
+      abc: 2,
+      show: false,
+    }
+  },
+  mounted() {
+    this.policyNo = this.$route.query.policyNo
+    console.log(this.policyNo, 'avc')
+    this.getYBRenewalInfo()
+  },
+  methods: {
+    cancel(){
+      this.show = false
+    },
+  showDialog() {
+      this.show = true;// 显示确认对话框
+  },
+   contact() {
+      const a = document.createElement("a");
+      a.href = "tel:8888410"
+      a.click();
+      this.show = false;
+   },
+    callPhone (phoneNumber) {
+     window.location.href = 'tel://' + phoneNumber},
+    getYBRenewalInfo() {
+      let params = {
+        policyNo: this.policyNo
+      }
+      console.log('我是log')
+      getYBRenewalInfo(params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          this.ybOrderDTOList = res.content
+          console.log(this.ybOrderDTOList, '请求成功的res')
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+/deep/ .van-cell__title {
+  color: #0a0808;
+  max-width: 30%;
+}
+/deep/ .van-cell__value {
+  color: #777676;
+  // text-align: left;
+}
+// /deep/ .van-cell-group >
+.topTitle {
+  text-align: center;
+  margin: 22px;
+}
+.topTitleText {
+  font-weight: 700;
+  margin-top: 4px;
+  font-size: 14px;
+}
+.listContent {
+  width: 96%;
+  background-color: white;
+  margin: 12px auto;
+  overflow: hidden;
+  border-radius: 12px;
+}
+.bottomPhone {
+  text-align: center;
+  margin-top: 30px;
+}
+.bottomPhoneBut {
+  padding: 8px 40px;
+  background-color: #fd3841;
+  color: #ffffff;
+  border: 0;
+  border-radius: 24px;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/YB_APP/renewalList.vue b/src/views/YB_APP/renewalList.vue
new file mode 100644
index 000000000..3dce26317
--- /dev/null
+++ b/src/views/YB_APP/renewalList.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="public_container">
+    <!-- 最上方的搜索框 -->
+    <div>
+      <van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
+      <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
+    </div>
+    <!-- 标签选择 -->
+    <div>
+      <van-tabs
+        v-model="active"
+        sticky
+        color="#2551CA"
+        line-width="20px"
+        line-height="5px"
+        title-active-color="#000000"
+        title-inactive-color="#6A6A6A"
+        title-active-font-width="14px"
+      >
+        <van-tab title="应收未收"></van-tab>
+        <van-tab title="已交费"></van-tab>
+        <van-tab title="扣费失败"></van-tab>
+        <van-tab title="终止"></van-tab>
+      </van-tabs>
+    </div>
+    <!-- 内容 -->
+    <div>
+      <!-- 应交月选择 -->
+      <div class="beMonth">
+        <p class="beMonthLeft">应交月 <span class="beMonthLeftSpan">(查询范围: 当前月份前期前溯3月~后推1月)</span></p>
+        <p class="beMonthRight" @click="clickCalendar"><span class="beMonthRightSpan">{{calendarValue}}</span>▼</p>
+      </div>
+      <!-- 无内容显示的背景 -->
+      <div v-if="policyListDTOList == ''">
+        <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
+        <p class="noContentText">暂无保单</p>
+      </div>
+      <!-- 卡片列表 -->
+      <div v-if="policyListDTOList != ''">
+        <!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> -->
+          <div :class="[active == 3 ? 'cardList2' : 'cardList']" v-for="(item, index) in policyListDTOList" :key="index">
+            <div :class="[item.state == 2 ? 'topbackground1' : 'topbackground2']">
+              <img class="cardListImg" v-if="item.state == 2" src="../../assets/YB_APP/images/sign1.png" />
+              <img class="cardListImg" v-if="item.state != 2" src="../../assets/YB_APP/images/sign2.png" />
+              <span class="cardListText">{{ item.riskName }}</span>
+            </div>
+            <div class="cardConetent">
+              <div class="textList">
+                <p>
+                  <span>保单号</span><span>{{ item.contNo }}</span>
+                </p>
+                <p>
+                  <span>被保人</span><span>{{ item.insuredName }}</span>
+                </p>
+                <p>
+                  <span>被保险人</span><span>{{ item.appntName }}</span>
+                </p>
+                <p v-if="active == 3">
+                  <span>转账银行</span><span>{{ item.bankName }}</span>
+                </p>
+                <p v-if="active == 3">
+                  <span>转账帐号</span><span>{{ item.accNo }}</span>
+                </p>
+                <p>
+                  <span>应交日</span><span>{{ item.payToDate }}</span>
+                </p>
+                <p v-if="active != 3">
+                  <span>归属指标</span><span>{{ item.rnewIndex }}</span>
+                </p>
+                <p v-if="active == 3">
+                  <span>所属渠道</span><span>{{ item.policySource }}</span>
+                </p>
+                <p>
+                  <span>终止原因</span><span>{{ item.contState }}</span>
+                </p>
+                <p>
+                  <span>金额/元</span><span class="redword">{{ item.money }}</span>
+                </p>
+              </div>
+              <div class="rightState">
+                <img class="rightStateImg" :src="item.stateRoute" alt="" />
+                <button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item.contNo)">查看详情</button>
+              </div>
+            </div>
+          </div>
+        <!-- </van-list> -->
+      </div>
+    </div>
+    <van-popup v-model="calendarShow" position="bottom">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="year-month"
+        title="选择日期"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @cancel="handleCurrentDateCancel"
+        @confirm="handleCurrentDateConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Button, Search } from 'vant'
+import { ref } from 'vue'
+import { getYBRenewalsList } from '@/api/YB_APP/index'
+import utils from '@/assets/js/utils/date-utils'
+
+export default {
+  name: 'renewalList',
+  components: {
+    [Button.name]: Button,
+    [Search.name]: Search
+  },
+  setup() {
+    const value = ref('')
+    return { value }
+  },
+  data() {
+    return {
+      findValue: '', // 上面搜索框的value
+      active: '', // 四个选项卡的v-model
+      policyListDTOList: [], // 卡片列表内容
+      calendarValue:'',
+      calendarShow:false,
+      currentDate:new Date(),
+      minDate: new Date(2022, 2, 0),
+      maxDate: new Date(2022, 12, 0),
+      params: {
+        contNo: '', // 保单号
+        idNo: '', // 身份证号
+        payToDate: '', // 时间
+        state: '' // 状态
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    let yearNum = new Date().getFullYear()
+      let monthNum = new Date().getMonth()+1
+      this.calendarValue = yearNum+'-'+monthNum
+    this.getYBRenewalsList()
+  },
+  methods: {
+    // 上方关键词搜索按钮
+    keywordSearch(value) {
+      console.log('点击搜索了')
+      this.params.idNo = value
+      this.params.contNo = value
+      this.getYBRenewalsList()
+    },
+    getYBRenewalsList() {
+      let that = this
+      getYBRenewalsList(that.params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          that.policyListDTOList = res.content.list
+          console.log(res.content.list, 'data里的policyListDTOList')
+        } else {
+          that.policyListDTOList = ''
+        }
+      })
+    },
+    // (查看详情)按钮跳转
+    goPolicyDetail(data) {
+      console.log(data)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/YB_APP/renewalDetail?policyNo=' + data
+        },
+        routerInfo: {
+          path: '/YB_APP/renewalDetail?policyNo=' + data
+        }
+      })
+    },
+    clickCalendar(){
+        this.calendarShow = true
+      },
+    handleCurrentDateCancel() {
+        this.calendarShow = false
+      },
+    handleCurrentDateConfirm(e) {
+        this.calendarShow = false
+        // let titleTime = utils.formatDate(e, 'yyyy-MM')
+        // this.calendarValue = utils.formatDate(e, 'MM-dd')
+        let yearNum = utils.formatDate(e, 'yyyy')
+        let monthNum = utils.formatDate(e, 'MM')
+        this.calendarValue = yearNum+'-'+monthNum
+        // this.getYBRenewalsList()
+      },
+  },
+  watch: {
+    active: {
+      deep: true,
+      handler(newvalue) {
+        this.params.state = newvalue
+        this.getYBRenewalsList()
+      }
+    },
+    calendarValue: {
+      deep: true,
+      handler(newvalue) {
+        this.params.payToDate = newvalue
+        this.getYBRenewalsList()
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+
+/deep/ .van-hairline--top-bottom::after {
+  border: 0px;
+}
+/deep/ .van-tab--active {
+  font-weight: 800;
+  font-size: 15px;
+}
+.searchButton {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background-color: #2154cc;
+  color: #ffffff;
+  border-radius: 120px;
+  padding: 9px 15px;
+  font-size: 12px;
+  border: 0px;
+}
+.beMonth {
+  width: 94%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  height: 50px;
+  line-height: 50px;
+}
+.beMonthLeft {
+  font-size: 14px;
+  color: #323232;
+  font-weight: 600;
+}
+.beMonthLeftSpan {
+  font-weight: 500;
+  font-size: 12px;
+  color: #929292;
+}
+.beMonthRight {
+  background-color: #ffffff;
+  height: 24px;
+  padding: 2px 5px;
+  margin-top: 12px;
+  line-height: 24px;
+}
+.beMonthRightSpan {
+  margin-right: 5px;
+}
+.noContentImg {
+  height: 216px;
+  // width: 285px;
+  position: absolute;
+  top: 156px;
+  left: calc(50% - 142px);
+}
+.noContentText {
+  font-size: 12px;
+  position: absolute;
+  top: 315px;
+  left: calc(50% - 24px);
+  color: #b3b5ca;
+}
+.cardList {
+  height: 244px;
+  // height: 300px;
+  width: 96%;
+  border-radius: 12px;
+  background-color: white;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.cardList2 {
+  // height: 244px;
+  height: 300px;
+  width: 96%;
+  border-radius: 12px;
+  background-color: white;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.cardListImg {
+  height: 18px;
+  width: 14px;
+  margin: 12px 7px;
+  /*position: absolute;*/
+}
+.rightState {
+  height: 100%;
+  width: 32%;
+  background-color: white;
+}
+.rightStateImg {
+  height: 100px;
+  width: 100px;
+}
+.rightStateButton {
+  height: 30px;
+  width: 78px;
+  color: #d7523b;
+  border: #d7523b 1px solid;
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 57px;
+  // margin-top: 113px;
+  margin-left: 10px;
+  font-size: 12px;
+}
+.rightStateButton2 {
+  height: 30px;
+  width: 78px;
+  color: #d7523b;
+  border: #d7523b 1px solid;
+  border-radius: 30px;
+  background-color: white;
+  // margin-top: 57px;
+  margin-top: 113px;
+  margin-left: 10px;
+  font-size: 12px;
+}
+.cardListText {
+  line-height: 6px;
+  font-weight: 600;
+  font-size: 14px;
+}
+.cardConetent {
+  // height: 22.5vh;
+  width: 100%;
+  padding: 0px 20px;
+  display: flex;
+}
+.textList {
+  height: 90%;
+  width: 68%;
+  color: #9d9d9d;
+  padding-top: 16px;
+  font-size: 12px;
+}
+.textList > p {
+  display: flex;
+  margin-bottom: 11px;
+}
+.textList > p > span:nth-of-type(1) {
+  display: block;
+  // float:left;
+  width: 50px;
+  // background-color: blueviolet;
+  color: #373737;
+}
+.textList > p > span:nth-of-type(2) {
+  // width: 5vh;
+  // background-color: rgb(65, 214, 77);
+  margin-left: 28px;
+  width: 164px;
+  // background-color: chartreuse;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+// .active {
+//   color: #f22220;
+// }
+.topbackground1 {
+  background: linear-gradient(to right, #435898, #6581c6);
+  height: 34px;
+  width: 100%;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+.topbackground2 {
+  background: linear-gradient(to right, #fcfcfc, #e8e5e6);
+  height: 34px;
+  width: 100%;
+  color: #323232;
+  display: flex;
+  align-items: center;
+}
+.redword {
+  color: #e72611;
+  font-weight: 700;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/YB_APP/saveallDetail.vue b/src/views/YB_APP/saveallDetail.vue
new file mode 100644
index 000000000..385a4839c
--- /dev/null
+++ b/src/views/YB_APP/saveallDetail.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="public_container">
+    <!-- 中间内容 -->
+    <div class="listContent">
+      <van-cell-group inset>
+        <van-cell title="保单号" :value="ybOrderDTOList.contNo" />
+        <van-cell title="保全项目" :value="ybOrderDTOList.edorName" />
+        <van-cell title="投保人" :value="ybOrderDTOList.appntName" />
+        <van-cell title="网点名称" :value="ybOrderDTOList.networdName" />
+        <van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
+        <van-cell title="首期规模保费/元" :value="ybOrderDTOList.prem" />
+        <van-cell title="保单累计已交保费/元" :value="ybOrderDTOList.sumPrem" />
+        <van-cell title="承保日期" :value="ybOrderDTOList.signDate" />
+        <van-cell title="保全申请日期" :value="ybOrderDTOList.edorAppDate" />
+        <van-cell title="保全生效日期" :value="ybOrderDTOList.edorValiDate" />
+        <van-cell title="保单状态" :value="ybOrderDTOList.contState" />
+        <van-cell title="申请渠道" :value="ybOrderDTOList.appChannel" />
+        <van-cell title="办理类型" :value="ybOrderDTOList.appType" />
+        <van-cell title="代办顾问姓名" :value="ybOrderDTOList.agencyName" />
+        <van-cell title="代办顾问工号" :value="ybOrderDTOList.agencyCode" />
+        <van-cell title="保全进度" :value="ybOrderDTOList.edorState" />
+        <van-cell title="交易状态" :value="ybOrderDTOList.transState" />
+        <van-cell title="交易账户银行" :value="ybOrderDTOList.transBank" />
+        <van-cell title="交易账户" :value="ybOrderDTOList.transCardNo" />
+        <van-cell title="退保金额/元" :value="ybOrderDTOList.transMoney" />
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ybSaveAllDetail } from '@/api/YB_APP/index'
+export default {
+  name: 'policyDetail',
+  components: {},
+  data() {
+    return {
+      ybOrderDTOList: '',
+      policyNo: ''
+    }
+  },
+  mounted() {
+    this.policyNo = this.$route.query.policyNo
+    console.log(this.policyNo, 'avc')
+    this.ybSaveAllDetail()
+  },
+  methods: {
+    ybSaveAllDetail() {
+      let params = {
+        policyNo: this.policyNo
+      }
+      console.log('我是log')
+      ybSaveAllDetail(params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          this.ybOrderDTOList = res.content
+          console.log(this.ybOrderDTOList, '请求成功的res')
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+/deep/ .van-cell__title {
+  color: #0a0808;
+  max-width: 30%;
+}
+/deep/ .van-cell__value {
+  color: #777676;
+  // text-align: left;
+}
+// /deep/ .van-cell-group >
+.listContent {
+  width: 96%;
+  background-color: white;
+  margin: 12px auto;
+  overflow: hidden;
+  border-radius: 12px;
+}
+</style>
diff --git a/src/views/YB_APP/saveallDetailTwo.vue b/src/views/YB_APP/saveallDetailTwo.vue
new file mode 100644
index 000000000..548e1a3d6
--- /dev/null
+++ b/src/views/YB_APP/saveallDetailTwo.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="public_container">
+    <!-- 中间内容 -->
+    <div class="listContent">
+      <van-cell-group inset>
+        <van-cell title="保单号" :value="ybOrderDTOList.contNo" />
+        <van-cell title="投保人" :value="ybOrderDTOList.appntName" />
+        <van-cell title="投保人身份证号" :value="ybOrderDTOList.appntIdNo" />
+        <van-cell title="投保人年龄/周岁" :value="ybOrderDTOList.appntAge" />
+        <van-cell title="网点名称" :value="ybOrderDTOList.networkName" />
+        <van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
+        <van-cell title="首期规模保费/元" :value="ybOrderDTOList.prem" />
+        <van-cell title="交费期间" :value="ybOrderDTOList.payEndYear" />
+        <van-cell title="保险期间" :value="ybOrderDTOList.insuYear" />
+        <van-cell title="保全状态" :value="ybOrderDTOList.contState" />
+        <van-cell title="承保日期" :value="ybOrderDTOList.signDate" />
+        <van-cell title="保单现金价值/元" :value="ybOrderDTOList.cashValue" />
+        <van-cell title="累计账户红利余额/元 (含本期)" :value="ybOrderDTOList.bonusMoney" />
+        <van-cell title="累计账户生存金余额/元 (含本期)" :value="ybOrderDTOList.survivalMoney" />
+        <van-cell title="满期生存金/元" :value="ybOrderDTOList.getMoney" />
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ybSaveManyDetail } from '@/api/YB_APP/index'
+export default {
+  name: 'policyDetail',
+  components: {},
+  data() {
+    return {
+      ybOrderDTOList: '',
+      policyNo: ''
+    }
+  },
+  mounted() {
+    this.policyNo = this.$route.query.policyNo
+    console.log(this.policyNo, 'avc')
+    this.ybSaveManyDetail()
+  },
+  methods: {
+    ybSaveManyDetail() {
+      let params = {
+        policyNo: this.policyNo
+      }
+      console.log('我是log')
+      ybSaveManyDetail(params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          this.ybOrderDTOList = res.content
+          console.log(this.ybOrderDTOList, '请求成功的res')
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+/deep/ .van-cell__title {
+  color: #0a0808;
+  max-width: 50%;
+}
+/deep/ .van-cell__value {
+  color: #777676;
+  // text-align: left;
+}
+// /deep/ .van-cell-group >
+.listContent {
+  width: 96%;
+  background-color: white;
+  margin: 12px auto;
+  overflow: hidden;
+  border-radius: 12px;
+}
+</style>
diff --git a/src/views/YB_APP/saveallList.vue b/src/views/YB_APP/saveallList.vue
new file mode 100644
index 000000000..b40c06def
--- /dev/null
+++ b/src/views/YB_APP/saveallList.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="public_container">
+    <!-- 最上方的搜索框 -->
+    <div>
+      <van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
+      <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
+    </div>
+    <!-- 标签选择 -->
+    <div>
+      <van-tabs
+        v-model="active"
+        color="#2551CA"
+        line-width="20px"
+        line-height="5px"
+        title-active-color="#000000"
+        title-inactive-color="#6A6A6A"
+        title-active-font-width="14px"
+      >
+        <!-- 保全申请进度第一个标签内容 -->
+        <van-tab title="保全申请进度">
+          <!-- 温馨提示 -->
+          <div>
+            <p class="warmTip">
+              <img class="warmImg" src="../../assets/YB_APP/images/plaint.png" /><span>温馨提示: 支持保单号或投保人身份证号查询保全申请进度。</span>
+            </p>
+          </div>
+          <!-- 无内容显示的背景 -->
+          <div v-if="policyListDTOList == ''">
+            <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
+            <p class="noContentText">暂无保单</p>
+          </div>
+          <!-- 卡片列表 -->
+          <div v-if="policyListDTOList != ''">
+            <!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> -->
+              <div class="cardList" v-for="(item, index) in policyListDTOList" :key="index">
+                <div :class="[item.edorState == 1 ? 'topbackground1' : 'topbackground2']">
+                  <img class="cardListImg" v-if="item.edorState == 1" src="../../assets/YB_APP/images/sign1.png" />
+                  <img class="cardListImg" v-if="item.edorState != 1" src="../../assets/YB_APP/images/sign2.png" />
+                  <span class="cardListText">{{ item.riskName }}</span>
+                </div>
+                <div class="cardConetent">
+                  <div class="textList">
+                    <p>
+                      <span>保单号</span><span>{{ item.contNo }}</span>
+                    </p>
+                    <p>
+                      <span>保全项目</span><span>{{ item.edorName }}</span>
+                    </p>
+                    <p>
+                      <span>投保人</span><span>{{ item.appntName }}</span>
+                    </p>
+                    <p>
+                      <span>网点名称</span><span>{{ item.networkName }}</span>
+                    </p>
+                    <p>
+                      <span>转账帐号</span><span>{{ item.edorAcceptNo }}</span>
+                    </p>
+                    <p>
+                      <span>申请日期</span><span>{{ item.edorAppDate }}</span>
+                    </p>
+                  </div>
+                  <div class="rightState">
+                    <img class="rightStateImg" :src="item.stateRoute" alt="" />
+                    <button class="rightStateButton" @click="goPolicyDetail(item.contNo)">查看详情</button>
+                  </div>
+                </div>
+              </div>
+            <!-- </van-list> -->
+          </div>
+        </van-tab>
+        <!-- 现金价值第二个标签内容 -->
+        <van-tab title="现金价值"
+          ><div>
+            <p class="warmTip">
+              <img class="warmImg" src="../../assets/YB_APP/images/plaint.png" /><span>温馨提示: 支持保单号或投保人身份证号查询保全申请进度。</span>
+            </p>
+          </div>
+          <!-- 无内容显示的背景 -->
+          <div v-if="policyListDTOListTwo == ''">
+            <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
+            <p class="noContentText">暂无保单</p>
+          </div>
+          <!-- 卡片列表 -->
+          <div v-if="policyListDTOListTwo != ''">
+            <!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip2" @load="onLoad"> -->
+              <div class="cardList2" v-for="(item, index) in policyListDTOListTwo" :key="index">
+                <div :class="[item.contState == 1 ? 'topbackground1' : 'topbackground2']">
+                  <img class="cardListImg" v-if="item.contState == 1" src="../../assets/YB_APP/images/sign1.png" />
+                  <img class="cardListImg" v-if="item.contState != 1" src="../../assets/YB_APP/images/sign2.png" />
+                  <span class="cardListText">{{ item.riskName }}</span>
+                </div>
+                <div class="cardConetent">
+                  <div class="textList">
+                    <p>
+                      <span>保单号</span><span>{{ item.contNo }}</span>
+                    </p>
+                    <p>
+                      <span>被保人</span><span>{{ item.appntName }}</span>
+                    </p>
+                    <p>
+                      <span>承保日期</span><span>{{ item.signDate }}</span>
+                    </p>
+                  </div>
+                  <div class="rightState">
+                    <button class="rightStateButton2" @click="goPolicyDetail2(item.policyNo)">查看详情</button>
+                  </div>
+                </div>
+              </div>
+            <!-- </van-list> -->
+          </div></van-tab
+        >
+      </van-tabs>
+    </div>
+    <!-- 内容 -->
+    <div></div>
+  </div>
+</template>
+
+<script>
+import { Button, Search } from 'vant'
+import { ref } from 'vue'
+import { getSaveAllList, ybSaveManyList } from '@/api/YB_APP/index'
+
+export default {
+  name: 'renewalList',
+  components: {
+    [Button.name]: Button,
+    [Search.name]: Search
+  },
+  setup() {
+    const value = ref('')
+    return { value }
+  },
+  data() {
+    return {
+      findValue: '', // 上面搜索框的value
+      active: '', // 四个选项卡的v-model
+      policyListDTOList: [], // 保全申请进度卡片列表内容
+      policyListDTOListTwo: [], // 现金价值卡片列表内容
+      params: {
+        contNo: '',
+        idNo: ''
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.getSaveAllList()
+  },
+  methods: {
+    getSaveAllList() {
+      let that = this
+      console.log('我是log123')
+      // 保全申请列表
+      getSaveAllList(that.params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          that.policyListDTOList = res.content.list
+          console.log(this.policyListDTOList, 'data里的policyListDTOList')
+        } else {
+          that.policyListDTOList = ''
+        }
+      })
+      // 现金价值
+      ybSaveManyList(that.params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          that.policyListDTOListTwo = res.content.ybQuerySaveMoneyDTOList
+          console.log(this.policyListDTOList, 'data里的policyListDTOList')
+        } else {
+          that.policyListDTOList = ''
+        }
+      })
+    },
+    // 上方关键词搜索按钮
+    keywordSearch(value) {
+      console.log('点击搜索了')
+      this.params.idNo = value
+      this.params.contNo = value
+      this.getSaveAllList()
+    },
+    // (查看详情)按钮跳转
+    goPolicyDetail(data) {
+      console.log(data)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/YB_APP/saveallDetail?policyNo=' + data
+        },
+        routerInfo: {
+          path: '/YB_APP/saveallDetail?policyNo=' + data
+        }
+      })
+    },
+    goPolicyDetail2(data) {
+      console.log(data)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/YB_APP/saveallDetailTwo?policyNo=' + data
+        },
+        routerInfo: {
+          path: '/YB_APP/saveallDetailTwo?policyNo=' + data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+
+/deep/ .van-hairline--top-bottom::after {
+  border: 0px;
+}
+/deep/ .van-tab--active {
+  font-weight: 800;
+  font-size: 15px;
+}
+.searchButton {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background-color: #2154cc;
+  color: #ffffff;
+  border-radius: 120px;
+  padding: 9px 15px;
+  font-size: 12px;
+  border: 0px;
+}
+.noContentImg {
+  height: 216px;
+  // width: 285px;
+  position: absolute;
+  top: 124px;
+  left: calc(50% - 142px);
+}
+.noContentText {
+  font-size: 12px;
+  position: absolute;
+  top: 283px;
+  left: calc(50% - 24px);
+  color: #b3b5ca;
+}
+.cardList {
+  // height: 244px;
+  height: 224px;
+  width: 96%;
+  border-radius: 12px;
+  background-color: white;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.cardList2 {
+  height: 136px;
+  width: 96%;
+  border-radius: 12px;
+  background-color: white;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.cardListImg {
+  height: 18px;
+  width: 14px;
+  margin: 12px 7px;
+  /*position: absolute;*/
+}
+.rightState {
+  height: 100%;
+  width: 32%;
+  background-color: white;
+}
+.rightStateImg {
+  height: 100px;
+  width: 100px;
+}
+.rightStateButton {
+  height: 30px;
+  width: 78px;
+  color: #d7523b;
+  border: #d7523b 1px solid;
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 31px;
+  margin-left: 10px;
+  font-size: 12px;
+}
+.rightStateButton2 {
+  height: 30px;
+  width: 78px;
+  color: #d7523b;
+  border: #d7523b 1px solid;
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 52px;
+  margin-left: 10px;
+  font-size: 12px;
+}
+.cardListText {
+  line-height: 6px;
+  font-weight: 600;
+  font-size: 14px;
+}
+.cardConetent {
+  // height: 22.5vh;
+  width: 100%;
+  padding: 0px 20px;
+  display: flex;
+}
+.textList {
+  height: 90%;
+  width: 68%;
+  color: #9d9d9d;
+  padding-top: 16px;
+  font-size: 12px;
+}
+.textList > p {
+  display: flex;
+  margin-bottom: 11px;
+}
+.textList > p > span:nth-of-type(1) {
+  display: block;
+  // float:left;
+  width: 50px;
+  // background-color: blueviolet;
+  // color: #373737;
+}
+.textList > p > span:nth-of-type(2) {
+  // width: 5vh;
+  // background-color: rgb(65, 214, 77);
+  margin-left: 28px;
+  width: 164px;
+  // background-color: chartreuse;
+  // overflow: hidden;
+  // white-space: nowrap;
+  // text-overflow: ellipsis;
+}
+.topbackground1 {
+  background: linear-gradient(to right, #435898, #6581c6);
+  height: 34px;
+  width: 100%;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+.topbackground2 {
+  background: linear-gradient(to right, #fcfcfc, #e8e5e6);
+  height: 34px;
+  width: 100%;
+  color: #323232;
+  display: flex;
+  align-items: center;
+}
+.warmTip {
+  padding: 5px 0;
+  height: 28px;
+  background-color: #fff8ed;
+  color: #c88b40;
+  border: 1px solid #f8e7d7;
+  margin: 10px;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 28px;
+}
+.warmImg {
+  height: 14px;
+  vertical-align: middle;
+  margin-right: 6px;
+  margin-bottom: 2px;
+}
+</style>