【银保app】修改保单详情页面样式

src/views/YB_APP/performanceQuery.vue

@@ -507,10 +507,10 @@
         this.$jump({
           flag: 'h5',
           extra: {
-            url: location.origin + '/#/YB_APP/policyList',
+            url: location.origin + '/#/YB_APP/policyList?date=' + this.calendarValue,
           },
           routerInfo: {
-            path: '/YB_APP/policyList',
+            path: '/YB_APP/policyList?date=' + this.calendarValue,
           },
         })
       },

src/views/YB_APP/policyList.vue

@@ -6,15 +6,14 @@
       <!-- 右侧搜索按钮 -->
       <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 style="width: 96%; height: 30px; background-color: #f8f8fa; border-radius: 30px; position: relative">
+          <div class="underwriteDateClass">
-            <span style="line-height: 30px; margin-left: 10px">{{ underwriteDate }}</span
+            <span class="underwriteDateSpan">{{ underwriteDate }}</span
-            ><img
+            ><img class="underwriteDateImg" 
               @click="datechange"
-              style="height: 16px; align-items: center; position: absolute; right: 10px; top: 7px"
               src="../../assets/YB_APP/images/date.png"
             />
           </div>
@@ -54,12 +53,12 @@
           </div>
         </div>
       </div>
-      <div class="bottom-area bottom-btn">
+      <div class="bottom-area">
         <van-button class="m-btn-left" @click="reset">重置</van-button>
         <van-button class="m-btn-right" @click="submit">确定</van-button>
       </div>
       <van-popup v-model="calendarShow" position="bottom">
-        <van-datetime-picker v-model="currentDate" type="date" title="选择日期" @cancel="handleCurrentDateCancel" @confirm="handleCurrentDateConfirm" />
+        <van-datetime-picker v-model="currentDate" type="year-month" title="选择日期" @cancel="handleCurrentDateCancel" @confirm="handleCurrentDateConfirm" />
       </van-popup>
     </van-popup>
     <!-- 无内容显示的背景 -->
@@ -80,7 +79,7 @@
           <!-- 卡片内容 -->
           <div class="cardConetent">
             <div class="textList">
-              <p style="font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353">
+              <p class="policyNo">
                 <span>保单号</span><span>{{ item.policyNo }}</span>
               </p>
               <p>
@@ -132,7 +131,7 @@ export default {
       findValue: '', // 上面搜索框的value
       policyListDTOList: [],
       filpolicyListDTOList: [], // 结合watch过滤后的卡片数据
-      showSideBar: false, // 侧边栏展开否
+      showSideBar: true, // 侧边栏展开否
       list1: [
         { id: 0, name: '全部' },
         { id: 1, name: '有效' },
@@ -183,6 +182,8 @@ export default {
     this.YBpolicyListAgent()
     // 筛选按钮的点击事件
     window.appCallBack = this.appCallBack
+    this.underwriteDate = this.$route.query.date
+    // this.params.signDate = this.$route.query.date
   },
 
   methods: {
@@ -330,7 +331,7 @@ export default {
     },
     handleCurrentDateConfirm(e) {
       this.calendarShow = false
-      this.underwriteDate = utils.formatDate(e, 'yyyy-MM-dd')
+      this.underwriteDate = utils.formatDate(e, 'yyyy-MM')
     }
   },
 
@@ -360,23 +361,22 @@ export default {
   // background-color: rgb(0, 255, 255);
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
-  height: 6vh;
+  /*height: 6vh;*/
 }
 /deep/ .van-cell--borderless {
-  height: 4vh;
+  height: 32px;
   // background-color: #f7f7f7;
   font-size: 12px;
-  line-height: 3.4vh;
+  line-height: 30px;
 }
 .searchButton {
   position: absolute;
   top: 10px;
-  right: 3.3vw;
+  right: 0px;
   background-color: #2154cc;
   color: #ffffff;
-  height: 3.7vh;
-  width: 14vw;
   border-radius: 120px;
+  padding:9px 15px;
   font-size: 12px;
   border: 0px;
 }
@@ -395,18 +395,18 @@ export default {
   color: #b3b5ca;
 }
 .cardList {
-  height: 28vh;
+  height: 225px;
   width: 96%;
   border-radius: 12px;
   background-color: white;
-  margin: 2vh auto;
+  margin: 15px auto;
   overflow: hidden;
 }
 .cardListImg {
   height: 18px;
   width: 14px;
   margin: 12px 7px;
-  position: absolute;
+  /*position: absolute;*/
 }
 .visitNo {
   color: #f22220;
@@ -434,9 +434,8 @@ export default {
 }
 .cardListText {
   line-height: 5vh;
-  margin-left: 27px;
   font-weight: 600;
-  font-size: 16px;
+  font-size: 14px;
 }
 .cardConetent {
   height: 22.5vh;
@@ -476,9 +475,11 @@ export default {
 // }
 .topbackground1 {
   background: linear-gradient(to right, #435898, #6581c6);
-  height: 4.5vh;
+  height: 34px;
   width: 100%;
   color: white;
+  display:flex;
+  align-items:center;
 }
 .topbackground2 {
   background: linear-gradient(to right, #fcfcfc, #e8e5e6);
@@ -495,11 +496,11 @@ export default {
   font-weight: 700;
   font-size: 14px;
 }
-.bottom-btn {
-  text-align: center;
-  margin-bottom: 24px;
-}
 .bottom-area {
+  display:flex;
+  justify-content:center;
+  margin-top:20px;
+  margin-bottom:20px;
   /deep/.m-btn-left {
     width: 40%;
     border-color: transparent;
@@ -538,4 +539,16 @@ export default {
   background-color: #fbe7e4;
   color: #be5759;
 }
+.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;
+}
+.underwriteDateSpan{
+  line-height: 30px; margin-left: 10px;
+}
+.underwriteDateImg{
+  height: 16px; align-items: center; position: absolute; right: 10px; top: 7px;
+}
 </style>