task#10094,调度app案件详情静态

src/views/caseList/caseAuditList.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="listWrap">
-      <div class="listItem">
+      <div class="listItem" @click="goPageDetail">
         <div class="line1">
           <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
           <div class="right">

src/views/caseList/caseDetail.vue

@@ -12,16 +12,57 @@
       />
     </div>
     <div class="listWrap">
-      <div class="listItem" v-for="(item,index) in 3" :key="index">
+     <div class="mapWrap">
-        <div class="line1">
+       <div>DDA2304142407036</div>
-          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
+       <div class="map">
+         <div class="title">
+           <div><span>司机姓名:</span><span>甜甜圈</span></div>
+           <div><span>车牌号:</span><span>沪A123456</span></div>
+         </div>
+       </div>
+       <div class="wiadgeWrap">
+          <div class="lineWrap">
+            <div class="left">
+              <img class="commonImg" src="@/assets/camer.png">
+              <span class="free">AB(出发段)路桥费</span>
+              <span>30公里</span>
+            </div>
             <div class="right">
-            <img class="commonImg" src="@/assets/waitSubmit.png">
+              <span>30</span>
-            <div class="yelColor">待审核</div>
+              <span>元</span>
-            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+            </div>
+          </div>
+          <div class="line"></div>
+         <div class="lineWrap">
+           <div class="left">
+             <img class="commonImg" src="@/assets/camer.png">
+             <span class="free">BC(出发段)路桥费</span>
+             <span>30公里</span>
+           </div>
+           <div class="right">
+             <span>30</span>
+             <span>元</span>
+           </div>
+         </div>
+         <div class="line"></div>
+         <div class="lineWrap">
+           <div class="left">
+             <img class="commonImg" src="@/assets/camer.png">
+             <span class="free">CA(出发段)路桥费</span>
+             <span>30公里</span>
+           </div>
+           <div class="right">
+             <span>30</span>
+             <span>元</span>
+           </div>
+         </div>
+         <div class="line"></div>
+         <div class="totalFree">
+           <span>总金额</span>
+           <span>130</span>
+           <span>元</span>
          </div>
        </div>
-        <div><span>报销金额:</span><span>1238元</span></div>
      </div>
      <div class="aduit">
         <div class="itemWrap">
@@ -69,7 +110,8 @@
           <textarea v-model="supplierRemk" class="multipleTxt" placeholder="描述"></textarea>
         </div>
      </div>
-      <common-btn class="submitBtn"></common-btn>
+      <div class="submitBtn">提交</div>
+<!--      <common-btn class="submitBtn"></common-btn>-->
    </div>
   </div>
 
@@ -77,11 +119,11 @@
 
 <script>
 import {myMixins} from "@/utils/myMixins";
-import CommonBtn from "@/components/commonBtn.vue"
+// import CommonBtn from "@/components/commonBtn.vue"
 export default {
   name: "caseDetail",
   mixins: [myMixins],
-  components:{CommonBtn},
+  // components:{CommonBtn},
   data(){
     return{
       states:'',
@@ -132,32 +174,96 @@ export default {
   box-sizing: border-box;
   padding: 10px 8px;
   position: relative;
-  .listItem{
+  .mapWrap{
-    width: 100%;
+    @include wh(100%,407px);
-    box-sizing: border-box;
-    padding: 14px 25px 13px 29px;
     background-color: #FFFFFF;
-    margin-bottom: 10px;
+    border-radius: 6px;
-    .line1{
+    margin-bottom: 15px;
-      @include flexColBet();
+    box-sizing: border-box;
-      .viewBtn{
+    padding: 9px 8px 0;
-        @include wh(48px,18px);
+    .map{
-        text-align: center;
+      @include wh(100%,204px);
-        line-height: 18px;
+      border-radius: 4px;
-        background: #354D93;
+      border: 1px solid #F0F0F0;
-        border-radius: 3px;
+      margin-top: 7px;
-        color: #FFFFFF;
+      margin-bottom: 13px;
-      }
+      .title{
-    }
+        @include wh(100%,31px);
+        line-height: 31px;
+        background: #F9FCFF;
+        border-radius: 0px 0px 6px 6px;
+        display: flex;
         div{
-      line-height: 27px;
+          width: 50%;
+          margin-left: 17px;
+          font-size: 12px;
           span:first-child{
             display: inline-block;
-        width: 60px;
+            color: #555A68;
-        opacity: 0.5;
+            margin-right: 3px;
+          }
+          span:last-child{
+            color: #3A3A3A;
+          }
+        }
+      }
+    }
+  }
+  .wiadgeWrap{
+    box-sizing: border-box;
+    padding: 0 6px;
+    .lineWrap{
+      @include flexBetCen();
+      line-height: 32px;
+      .left{
+        @include flexCenter();
+        img{
+          @include wh( 48px,31px);
+        }
+        .free{
+          margin: 0 11px;
+          @include fontWeightSize(bold,13px);
+          @include colorOpa(#000000,0.9);
+        }
+        span:last-child{
+          font-size: 12px;
+          color: #555A68;
+        }
       }
       .right{
+        span:first-child{
+          @include fontWeightSize(bold,18px);
+          @include colorOpa(#000000,0.75);
+        }
+        span:last-child{
+          @include fontWeightSize(bold,10px);
+          @include colorOpa(#000000,0.8);
+          margin-left: 4px;
+        }
+      }
+    }
+    .line{
+      width: 100%;
+      border-bottom: 1px solid #E9E9EA;
+      opacity: 0.6;
+      margin-top: 2px;
+    }
+    .totalFree{
+      width: 100%;
+      line-height: 42px;
       @include flexCenter();
+      justify-content: flex-end;
+      span:first-child{
+        @include fontWeightSize(bold,13px);
+        @include colorOpa(#000000,0.9);
+      }
+      span:nth-child(2){
+        @include fontWeightSize(600,22px);
+        color: #FF5D2E;
+      }
+      span:last-child{
+        @include fontWeightSize(bold,10px);
+        @include colorOpa(#000000,0.8);
       }
     }
   }
@@ -188,9 +294,14 @@ export default {
     }
   }
   .submitBtn{
-    margin-left: 4%;
+    //position: absolute;
-    position: absolute;
+    //bottom: 30px;
-    bottom: 10px
+    margin:20px 0 10px 6%;
+    border-radius: 5px;
+    text-align: center;
+    @include bgFontColor(#FFFFFF,#354D93);
+    @include fontWeightSize(bold,15px);
+    @include whLin(88%,48px);
   }
 }
 .greColor{