宋凯琪--保单列表样式修改

src/views/YB_APP/policyList.vue

@@ -4,53 +4,25 @@
     <div>
       <van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
       <!-- 右侧搜索按钮 -->
-      <button
-        @click="keywordSearch(findValue)"
-        style="
-          position: absolute;
-          top: 10px;
-          right: 18px;
-          background-color: #2154cc;
-          color: #ffffff;
-          height: 39px;
-          width: 68px;
-          border-radius: 120px;
-          font-size: 14px;
-          border: 0px;
-        "
-      >
-        搜索
-      </button>
+      <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
     </div>
     <!-- 无内容显示的背景 -->
     <div v-if="filpolicyListDTOList == ''">
-      <img style="height: 216px; width: 285px; position: absolute; top: 18%; left: calc(50% - 142px)" src="../../assets/YB_APP/images/noguarantee.png" alt="" />
-      <p style="font-size: 9px; position: absolute; top: 37%; left: 44.5%; color: #b3b5ca">暂无保单</p>
+      <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
+      <p class="noContentText">暂无保单</p>
     </div>
     <!-- 卡片列表 -->
     <div v-if="filpolicyListDTOList != ''">
-      <div
-        v-for="(item, index) in filpolicyListDTOList"
-        :key="index"
-        style="height: 28vh; width: 96%; border-radius: 12px; background-color: white; margin: 2vh auto; overflow: hidden"
-      >
+      <div class="cardList" v-for="(item, index) in filpolicyListDTOList" :key="index">
         <div :class="[item.orderStatus == 0 ? 'topbackground1' : 'topbackground2']">
-          <img
-            v-if="item.orderStatus == 0"
-            style="height: 18px; width: 14px; margin: 12px 7px; position: absolute"
-            src="../../assets/YB_APP/images/sign1.png"
-          />
+          <img class="cardListImg" v-if="item.orderStatus == 0" src="../../assets/YB_APP/images/sign1.png" />
           <!-- 字左边小对号图片  -->
-          <img
-            v-if="item.orderStatus != 0"
-            style="height: 18px; width: 14px; margin: 12px 7px; position: absolute"
-            src="../../assets/YB_APP/images/sign2.png"
-          />
-          <span style="line-height: 5vh; margin-left: 27px; font-weight: 600; font-size: 16px">{{ item.riskName }}</span>
+          <img class="cardListImg" v-if="item.orderStatus != 0" src="../../assets/YB_APP/images/sign2.png" />
+          <span class="cardListText">{{ item.riskName }}</span>
         </div>
         <!-- 卡片内容 -->
-        <div style="height: 22.5vh; width: 100%; padding: 0px 20px; display: flex">
-          <div class="textList" style="height: 90%; width: 70%; color: #9d9d9d; padding-top: 14px; font-size: 12px">
+        <div class="cardConetent">
+          <div class="textList">
             <p style="font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353">
               <span>保单号</span><span>{{ item.policyNo }}</span>
             </p>
@@ -64,43 +36,28 @@
               <span>销售渠道</span><span>{{ item.bankChannel }}</span>
             </p>
             <!-- 根据0,1状态判断显示是否和文字颜色 -->
-            <p v-if="item.visitSuccess == 0"><span>回访成功</span><span style="color: #f22220; font-weight: 600">否</span></p>
+            <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 style="color: #f22220; font-weight: 600">否</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 style="height: 100%; width: 30%; background-color: white">
+          <div class="rightState">
             <!-- 有效 -->
-            <img v-if="item.orderStatus == 0" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp1.png" alt="" />
+            <img v-if="item.orderStatus == 0" class="rightStateImg" src="../../assets/YB_APP/images/stamp1.png" alt="" />
             <!-- 退保终止 -->
-            <img v-if="item.orderStatus == 1" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp2.png" alt="" />
+            <img v-if="item.orderStatus == 1" class="rightStateImg" src="../../assets/YB_APP/images/stamp2.png" alt="" />
             <!-- 犹退终止 -->
-            <img v-if="item.orderStatus == 2" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp3.png" alt="" />
+            <img v-if="item.orderStatus == 2" class="rightStateImg" src="../../assets/YB_APP/images/stamp3.png" alt="" />
             <!-- 协退终止 -->
-            <img v-if="item.orderStatus == 3" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp4.png" alt="" />
+            <img v-if="item.orderStatus == 3" class="rightStateImg" src="../../assets/YB_APP/images/stamp4.png" alt="" />
             <!-- 当日撤单 -->
-            <img v-if="item.orderStatus == 4" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp5.png" alt="" />
+            <img v-if="item.orderStatus == 4" class="rightStateImg" src="../../assets/YB_APP/images/stamp5.png" alt="" />
             <!-- 理赔终止 -->
-            <img v-if="item.orderStatus == 5" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp6.png" alt="" />
+            <img v-if="item.orderStatus == 5" class="rightStateImg" src="../../assets/YB_APP/images/stamp6.png" alt="" />
             <!-- 失效终止 -->
-            <img v-if="item.orderStatus == 6" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp7.png" alt="" />
-            <button
-              @click="goPolicyDetail(item.policyNo)"
-              style="
-                height: 30px;
-                width: 80px;
-                color: #d7523b;
-                border: #d7523b 1px solid;
-                border-radius: 30px;
-                background-color: white;
-                margin-top: 36px;
-                margin-left: 10px;
-                font-size: 12px;
-              "
-            >
-              查看详情
-            </button>
+            <img v-if="item.orderStatus == 6" class="rightStateImg" src="../../assets/YB_APP/images/stamp7.png" alt="" />
+            <button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
           </div>
         </div>
       </div>
@@ -109,7 +66,7 @@
 </template>
 
 <script>
-import { Button, Search  } from 'vant'
+import { Button, Search } from 'vant'
 import { ref } from 'vue'
 import { YBpolicyListAgent } from '@/api/YB_APP/index'
 
@@ -133,7 +90,7 @@ export default {
   mounted() {
     this.YBpolicyListAgent()
   },
-  methods: { 
+  methods: {
     YBpolicyListAgent() {
       let params = {
         signDate: '2022-09',
@@ -171,20 +128,20 @@ export default {
         return p.policyNo.indexOf(value) !== -1
       })
     }
-  },
+  }
   // 关键词搜索过滤
   // watch: {
-    // findValue: {
-    //   handler(value) {
-        //       this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
-        //         // return p.policyNo.indexOf(value) !== -1  ||  p.insuredName.indexOf(value) !== -1
-        //         return p.policyNo.indexOf(value) !== -1
-        //       })
-        // if (value == '') {
-        //   this.filpolicyListDTOList = this.policyListDTOList
-        // }
-      // }
-    // }
+  // findValue: {
+  //   handler(value) {
+  //       this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
+  //         // return p.policyNo.indexOf(value) !== -1  ||  p.insuredName.indexOf(value) !== -1
+  //         return p.policyNo.indexOf(value) !== -1
+  //       })
+  // if (value == '') {
+  //   this.filpolicyListDTOList = this.policyListDTOList
+  // }
+  // }
+  // }
   // }
 }
 </script>
@@ -198,13 +155,96 @@ export default {
   // background-color: rgb(0, 255, 255);
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
-  height: 7vh;
+  height: 6vh;
 }
 /deep/ .van-cell--borderless {
-  height: 5vh;
+  height: 4vh;
   // background-color: #f7f7f7;
   font-size: 12px;
-  line-height: 4vh;
+  line-height: 3.4vh;
+}
+.searchButton {
+  position: absolute;
+  top: 10px;
+  right: 3.3vw;
+  background-color: #2154cc;
+  color: #ffffff;
+  height: 3.7vh;
+  width: 14vw;
+  border-radius: 120px;
+  font-size: 12px;
+  border: 0px;
+}
+.noContentImg {
+  height: 216px;
+  width: 285px;
+  position: absolute;
+  top: 18%;
+  left: calc(50% - 142px);
+}
+.noContentText {
+  font-size: 9px;
+  position: absolute;
+  top: 37%;
+  left: 44.5%;
+  color: #b3b5ca;
+}
+.cardList {
+  height: 28vh;
+  width: 96%;
+  border-radius: 12px;
+  background-color: white;
+  margin: 2vh auto;
+  overflow: hidden;
+}
+.cardListImg {
+  height: 18px;
+  width: 14px;
+  margin: 12px 7px;
+  position: absolute;
+}
+.visitNo {
+  color: #f22220;
+  font-weight: 600;
+}
+.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: 36px;
+  margin-left: 10px;
+  font-size: 12px;
+}
+.cardListText {
+  line-height: 5vh;
+  margin-left: 27px;
+  font-weight: 600;
+  font-size: 16px;
+}
+.cardConetent {
+  height: 22.5vh;
+  width: 100%;
+  padding: 0px 20px;
+  display: flex;
+}
+.textList {
+  height: 90%;
+  width: 68%;
+  color: #9d9d9d;
+  padding-top: 14px;
+  font-size: 12px;
 }
 .textList > p {
   display: flex;
@@ -219,7 +259,7 @@ export default {
 .textList > p > span:nth-of-type(2) {
   // width: 5vh;
   // background-color: rgb(65, 214, 77);
-  margin-left: 10vw;
+  margin-left: 8vw;
   width: 164px;
   // background-color: chartreuse;
   overflow: hidden;