task#10094,司机app静态页

src/views/driverCaseList/driverCaseList.vue

@@ -18,15 +18,38 @@
       </div>
     </div>
     <div class="listWrap">
-      <div class="listItem">
-        <div class="item">
-          <div><span>审核批次</span><span>PC1234123443243232131</span></div>
-          <div><span>报销金额</span><span>300</span></div>
-          <div><span>案件数量</span><span>30</span></div>
-          <div><span>提交人员</span><span>张三</span></div>
-          <div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
+      <div class="itemWrap" @click="isCheck = !isCheck">
+        <div class="contentWrap">
+            <div class="left">
+              <div><span>订单编号:</span><span>PC230626124283</span></div>
+              <div><span>报销金额:</span><span>1238元</span></div>
+            </div>
+            <div class="right">
+              <img class="commonImg" src="@/assets/waitSubmit.png">
+              <div>待提交</div>
+              <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+            </div>
         </div>
+        <img class="checkImg" :src="isCheck ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
       </div>
+      <div class="itemWrap" @click="isCheck = !isCheck">
+        <div class="contentWrap">
+          <div class="left">
+            <div><span>订单编号:</span><span>PC230626124283</span></div>
+            <div><span>报销金额:</span><span>1238元</span></div>
+            <div><span>审核备注:</span><span>缺失凭证照片</span></div>
+            <div><span>审核人员:</span><span>张三</span></div>
+            <div><span>审核时间:</span><span>2024-01-24 00:00:00</span></div>
+          </div>
+          <div class="right">
+            <img class="commonImg" src="@/assets/waitSubmit.png">
+            <div>待提交</div>
+            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+          </div>
+        </div>
+        <img class="checkImg" :src="isCheck ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
+      </div>
+
     </div>
   </div>
 
@@ -40,11 +63,12 @@ export default {
   mixins: [myMixins],
   data(){
     return{
-      tabArr: [{name: '待提交', status: 1}, {name: '已提交', status: 2},{name: '不可提交', status: 3},],
+      tabArr: [{name: '待报销', status: 1}, {name: '已报销', status: 2},{name: '报销失败', status: 3},],
       activeIndex: 0,
       pageList:[],
       pageNum:1,
       pageSize:10,
+      isCheck:false,
     }
   },
   methods:{
@@ -73,26 +97,29 @@ export default {
 .navBar{
   margin-bottom: 46px;
 }
+::v-deep .van-nav-bar__content{
+  background-color: #000000 !important;
+}
 .tab_wrap {
-  @include fontWeightSize(bolder, 15px);
-  display: flex;
-  justify-content: space-around;
-  padding: 5px 0 5px 0;
-  @include colorOpa(#737373,0.7);
+  @include fontWeightSize(500, 15px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  @include bgFontColor(#FFFFFF,#101011);
   div {
     padding-top: 8px;
+    @include colorOpa(#FFFFFF,0.5);
   }
   .active {
-    color: #3678FF;
     position: relative;
+    opacity: 1;
   }
   .active:after {
     content: '';
     display: block;
-    @include wh(50px,3px);
-    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
-    border-radius: 2px;
+    @include wh(18px,2px);
+    background: #FFFFFF;
     position: absolute;
+    border-radius: 2px;
     margin-top: 3px;
     left: 50%;
     transform: translateX(-50%);
@@ -100,25 +127,51 @@ export default {
 }
 .listWrap{
   width: 100%;
-  .listItem{
+  height: calc(100% - 86px);
+  box-sizing: border-box;
+  padding: 10px 7px 10px 8px;
+  overflow-y: auto;
+  .itemWrap{
+    position: relative;
     width: 100%;
-    //@include wh(100%,200px);
-    padding: 12px 12px;
+    //@include wh(100%,79px);
+    @include flexColBet();
     box-sizing: border-box;
-    .item{
-      @include wh(100%,100%);
-      box-sizing: border-box;
-      padding: 6px 0;
-      border-bottom: 1px solid #cccccc;
-      border-top: 1px solid #cccccc;
-      div{
-        line-height: 22px;
+    padding: 14px 12px 11px 34px;
+    box-shadow: 0px 0px 8px 0px rgba(98,107,128,0.07);
+    border-radius: 10px;
+    border: 1px solid #4C81F5;
+    margin-bottom: 10px;
+    .contentWrap{
+      width: 100%;
+      @include flexColBet();
+      @include fontWeightSize(400,12px);
+      line-height: 27px;
+      .left{
         span:first-child{
-          display: inline-block;
-          margin-right: 8px;
+          display:inline-block;
+          width: 60px;
+          opacity: .5;
         }
       }
+      .right{
+        @include flexCenter();
+        //display: flex;
+      }
+    }
+    .checkImg{
+      position: absolute;
+      top: 0;
+      left: 0;
+      @include wh(25px,27px)
     }
   }
 }
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
 </style>