dev

src/components/charge/CheckoutDetail.vue

@@ -1,8 +1,14 @@
 <template>
   <Mask :height="650" :width="900" :is-show="show" title="追溯码采集" @close="show = false" :show-footer="true">
-    <el-card>
+    <template #default>
       <div class="detail">
-        <el-input placeholder="请输入追溯码" v-model="inputIdCode" clearable @keydown.enter="openAssociationIdCode()">
+        <el-input
+            placeholder="请输入追溯码"
+            v-model="inputIdCode"
+            clearable
+            @keydown.enter="openAssociationIdCode()"
+            style="height: 42px;background: #FFFFFF;border-radius: 6px;border: 1px solid #EAEAEC;"
+        >
           <template #prefix>
             <el-icon>
               <Monitor/>
@@ -36,22 +42,20 @@
             </tr>
             </tbody>
           </table>
-
         </div>
-
-      </div>
-    </el-card>
-    <template #footer>
-      <div class="bottom-btn">
-        <el-button @click="saveRetail()" type="primary">确定</el-button>
-        <el-button @click="show = false">关闭</el-button>
       </div>
     </template>
+    <template #footer>
+      <div class="bottom">
+        <div class="default-btn" @click="show = false">关闭</div>
+        <div class="default-btn" @click="saveRetail()" style="margin-left: 24px">确定</div>
+      </div>
+    </template>
+  </Mask>
   <AssociationIdCode
       ref="associationIdCodeRef"
       @addIdCode="cleanInputIdCode"
       @addTraceabilityCode="addTraceAbilityCodeHandler"></AssociationIdCode>
-  </Mask>
 </template>
 <script setup lang="ts">
 import Mask from "@/components/common/Mask.vue";
@@ -184,8 +188,18 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
 }
 
 .detail {
+  padding: 24px 24px 0;
+
   .list {
     height: 400px;
   }
 }
+
+.bottom {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 24px;
+}
 </style>

src/components/charge/TotalPrice.vue

@@ -24,13 +24,12 @@ const openSettlement =()=>{
     <div class="footer">
       <div>总金额：<span class="text icon">￥</span><span class="text">{{ totalAmount || '0' }}</span></div>
       <div class="btn-group" v-if="status">
-        <span type="primary" @click="openCheckOut">追溯码</span>
-        <span type="primary" @click="openSettlement">收费</span>
+        <span class="default-btn" @click="openCheckOut">追溯码</span>
+        <span class="default-btn" @click="openSettlement" style="margin-left: 24px">收费</span>
       </div>
     </div>
   </Panel>
 </template>
-
 <style scoped lang="scss">
 .footer {
   height: 86px;
@@ -53,14 +52,6 @@ const openSettlement =()=>{
   span{
     display: inline-block;
     width: 119px;
-    height: 48px;
-    background: #4D6DE4;
-    border-radius: 8px;
-    margin-left: 24px;
-    color: #fff;
-    line-height: 48px;
-    text-align: center;
-    cursor: pointer;
   }
 }
 </style>