diff --git a/src/assets/YB_APP/images/bigglass.png b/src/assets/YB_APP/images/bigglass.png
new file mode 100644
index 000000000..600487036
Binary files /dev/null and b/src/assets/YB_APP/images/bigglass.png differ
diff --git a/src/views/YB_APP/policyList.vue b/src/views/YB_APP/policyList.vue
index 46080632a..e1e6c75f9 100644
--- a/src/views/YB_APP/policyList.vue
+++ b/src/views/YB_APP/policyList.vue
@@ -1,26 +1,77 @@
 <template>
   <div class="public_container">
     <!-- 最上方的搜索框 -->
-    <div>
+    <div style="position:relative;">
       <van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
-      <!-- 右侧搜索按钮 -->
       <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 }">
+      
+      <!-- 右侧搜索按钮 -->
+     
+    <!-- <div style="height:40px;background-color:aqua"> -->
+      <!-- <label>
+        <input type="text" value="请输入保单号" style="background-color: aliceblue;height: 30px;width: 70%;border-radius: 50px;border:0"><img src="" alt=""></input>
+        <img src="../../assets/YB_APP/images/bigglass.png" alt="">
+        <button  style="border:0;padding:17px 20px;background-color:blue;">搜索</button>
+      </label> -->
+    <!-- </div> -->
+    <!-- 无内容显示的背景 -->
+    <div v-if="filpolicyListDTOList == ''">
+      <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
+      <p class="noContentText">暂无保单</p>
+    </div>
+    <!-- 卡片列表 -->
+    <div v-if="filpolicyListDTOList != ''" style="overflow:hidden">
+      <!-- <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="rightState">
+            <img class="rightStateImg" :src="item.stateRoute"/>
+            <button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
+          </div>
+        </div>
+      </div>
+      <!-- </van-list> -->
+    </div>
+    <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 +79,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 +87,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 +95,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 }}
@@ -61,52 +112,6 @@
         <van-datetime-picker v-model="currentDate" type="year-month" title="选择日期" @cancel="handleCurrentDateCancel" @confirm="handleCurrentDateConfirm" />
       </van-popup>
     </van-popup>
-    <!-- 无内容显示的背景 -->
-    <div v-if="filpolicyListDTOList == ''">
-      <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
-      <p class="noContentText">暂无保单</p>
-    </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>
-          </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>
-        </div>
-      </van-list>
-    </div>
   </div>
 </template>
 
@@ -160,8 +165,6 @@ export default {
       calendarShow: false,
       currentDate: new Date(),
       underwriteDate: '', // 承保日期的时间
-      loading: false,
-      finished: false,
       params: {
         signDate: '', // 日期
         riskCode: '', // 保单号
@@ -208,21 +211,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
@@ -336,7 +324,7 @@ export default {
   },
 
   // 关键词搜索过滤
-  watch: {
+  // watch: {
     // findValue: {
     //   handler(value) {
     //       this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
@@ -348,7 +336,7 @@ export default {
     // }
     // }
     // }
-  }
+  // }
 }
 </script>
 <style lang="scss" scoped>
@@ -363,39 +351,41 @@ export default {
   border-bottom-right-radius: 12px;
   /*height: 6vh;*/
 }
-/deep/ .van-cell--borderless {
-  height: 32px;
+// /deep/ .van-cell--borderless {
+  // height: 32px;
   // background-color: #f7f7f7;
-  font-size: 12px;
-  line-height: 30px;
-}
+  // font-size: 12px;
+  // line-height: 30px;
+// }
 .searchButton {
   position: absolute;
-  top: 10px;
-  right: 0px;
+  top: 2.67vw;
+  right: 3.2vw;
   background-color: #2154cc;
   color: #ffffff;
-  border-radius: 120px;
-  padding:9px 15px;
+  border-radius: 18px;
+  // padding: 8px 15px;
   font-size: 12px;
   border: 0px;
+  height: 34px;
+  width: 56px;
 }
 .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;
 }
 .cardList {
-  height: 225px;
+  // height: 225px;
   width: 96%;
   border-radius: 12px;
   background-color: white;
@@ -403,9 +393,10 @@ export default {
   overflow: hidden;
 }
 .cardListImg {
-  height: 18px;
-  width: 14px;
-  margin: 12px 7px;
+  height: 16px;
+  // width: 14px;
+  // margin: 12px 7px;
+  margin: 0 7px;
   /*position: absolute;*/
 }
 .visitNo {
@@ -414,8 +405,9 @@ export default {
 }
 .rightState {
   height: 100%;
-  width: 32%;
+  // width: 32%;
   background-color: white;
+  overflow: hidden;
 }
 .rightStateImg {
   height: 100px;
@@ -428,42 +420,47 @@ export default {
   border: #d7523b 1px solid;
   border-radius: 30px;
   background-color: white;
-  margin-top: 36px;
+  margin-top: 62px;
   margin-left: 10px;
   font-size: 12px;
 }
 .cardListText {
-  line-height: 5vh;
+  line-height: 34px;
   font-weight: 600;
   font-size: 14px;
+  height: 100%;
+  width: 100%;
 }
 .cardConetent {
-  height: 22.5vh;
+  // height: 22.5vh;
   width: 100%;
-  padding: 0px 20px;
+  // padding: 0px 20px;
   display: flex;
 }
 .textList {
-  height: 90%;
-  width: 68%;
+  // height: 90%;
+  // width: 68%;
   color: #9d9d9d;
   padding-top: 14px;
   font-size: 12px;
+  padding-left: 20px ;
 }
 .textList > p {
   display: flex;
   margin-bottom: 11px;
+  line-height: 20px;
 }
 .textList > p > span:nth-of-type(1) {
   display: block;
   // float:left;
   width: 50px;
+  white-space:nowrap;
   // background-color: blueviolet;
 }
 .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 +475,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 +496,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 +538,34 @@ export default {
   background-color: #fbe7e4;
   color: #be5759;
 }
-.policyNo{
-  font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353;
+.policyNo {
+  line-height: 14px;
+  font-size: 14px;
+  font-weight: 600;
+  // margin-bottom: 16px;
+  margin-top: 6px;
+  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..52a1fdbbc
--- /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(ybOrderDTOList.appntPhone)">拨打电话</button>
+    </div>
+
+<van-dialog
+      v-model="show"
+      title="拨打电话"
+      :message="`确认要拨打电话吗?(${ybOrderDTOList.appntPhone})`"
+      show-cancel-button
+      @cancel="cancel"
+      @confirm="contact(ybOrderDTOList.appntPhone)"
+    >
+  </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..5d7c9224a
--- /dev/null
+++ b/src/views/YB_APP/renewalList.vue
@@ -0,0 +1,408 @@
+<template>
+  <div class="public_container">
+    <!-- 最上方的搜索框 -->
+    <div style="position:relative;">
+      <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="topbackground1">
+              <img class="cardListImg" src="../../assets/YB_APP/images/sign1.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">
+                <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: '',
+      maxDate: '',
+      params: {
+        contNo: '', // 保单号
+        idNo: '', // 身份证号
+        payToDate: '', // 时间
+        state: '' // 状态
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    let aaa = new Date().getMonth()+1
+    let bbb = aaa - 3
+    let ccc = aaa + 1
+    this.minDate = new Date(2022,bbb,0)
+    this.maxDate = new Date(2022,ccc,0)
+    console.log(this.minDate,1111)
+    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: 2.67vw;
+  right: 3.2vw;
+  background-color: #2154cc;
+  color: #ffffff;
+  border-radius: 18px;
+  // padding: 8px 15px;
+  font-size: 12px;
+  border: 0px;
+  height: 34px;
+  width: 56px;
+}
+.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: 16px;
+  // width: 14px;
+  margin: 0 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: 157px;
+  // margin-top: 113px;
+  margin-left: 4px;
+  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: 213px;
+  margin-left: 4px;
+  font-size: 12px;
+}
+.cardListText {
+  line-height: 34px;
+  font-weight: 600;
+  font-size: 14px;
+  height: 100%;
+  width: 100%;
+}
+.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..09b8f3ce6
--- /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 = {
+        edorAcceptNo: 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: 40%;
+}
+/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..b32c70eb3
--- /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 = {
+        contNo: 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..036813824
--- /dev/null
+++ b/src/views/YB_APP/saveallList.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="public_container">
+    <!-- 最上方的搜索框 -->
+    <div style="position:relative;">
+      <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="topbackground1">
+                  <img class="cardListImg"  src="../../assets/YB_APP/images/sign1.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">
+                    <button class="rightStateButton" @click="goPolicyDetail(item.edorAcceptNo)">查看详情</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="cardList" v-for="(item, index) in policyListDTOListTwo" :key="index">
+                <div class="topbackground1">
+                  <img class="cardListImg"  src="../../assets/YB_APP/images/sign1.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.contNo)">查看详情</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: {
+        otherNo: '', // 搜索按钮入参
+      }
+    }
+  },
+  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
+          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
+          console.log(this.policyListDTOListTwo, 'data里的policyListDTOListTwo')
+        } else {
+          that.policyListDTOListTwo = ''
+        }
+      })
+    },
+    // 上方关键词搜索按钮
+    keywordSearch(value) {
+      console.log('点击搜索了')
+      // this.params.idNo = value
+      this.params.otherNo = 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: 2.67vw;
+  right: 3.2vw;
+  background-color: #2154cc;
+  color: #ffffff;
+  border-radius: 18px;
+  // padding: 8px 15px;
+  font-size: 12px;
+  border: 0px;
+  height: 34px;
+  width: 56px;
+}
+.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: 226px;
+  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: 16px;
+  // width: 14px;
+  margin: 0 7px;
+  /*position: absolute;*/
+}
+// .rightState {
+  // height: 100%;
+  // width: 32%;
+//   background-color: rgb(236, 9, 9);
+// }
+.rightStateImg {
+  height: 100px;
+  width: 100px;
+}
+.rightStateButton {
+  height: 30px;
+  width: 78px;
+  color: #d7523b;
+  border: #d7523b 1px solid;
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 124px;
+  margin-left: 4px;
+  font-size: 12px;
+}
+.rightStateButton2 {
+  height: 30px;
+  width: 78px;
+  color: #d7523b;
+  border: #d7523b 1px solid;
+  border-radius: 30px;
+  background-color: white;
+  margin-top: 46px;
+  margin-left: 4px;
+  font-size: 12px;
+}
+.cardListText {
+  line-height: 34px;
+  font-weight: 600;
+  font-size: 14px;
+  height: 100%;
+  width: 100%;
+}
+.cardConetent {
+  // height: 22.5vh;
+  width: 100%;
+  // padding: 0px 20px;
+  display: flex;
+}
+.textList {
+  // height: 90%;
+  // width: 68%;
+  padding-left: 20px;
+  color: #9d9d9d;
+  padding-top: 16px;
+  font-size: 12px;
+}
+.textList > p {
+  display: flex;
+  margin-bottom: 11px;
+  line-height: 12px;
+}
+.textList > p > span:nth-of-type(1) {
+  display: block;
+  // float:left;
+  width: 50px;
+  overflow: hidden;
+  white-space:nowrap;
+  // 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;
+}
+
+.warmTip {
+  white-space:nowrap;
+  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>