。

src/pages/PayOrder/Card/style.less

@@ -18,6 +18,7 @@
     background-repeat: no-repeat;
     border-radius: 15px 0px 0px 15px;
     align-items: center;
+    width: 100%;
     .left-image-1-payOrder {
       width: 145px;
       height: 44px;

src/pages/PayOrder/index.jsx

@@ -4,17 +4,14 @@ import { getPackageDetail } from "@/services/home";
 import { saveOrder, getOrderSub, payOrder } from "@/services/payOrder";
 import { useState, useEffect } from "react";
 import formatPrice from "@/utils/formatPrice";
-
-import { Button, Checkbox, Input, RadioGroup, Radio } from "@tarojs/components";
+import { Button, Input, Radio, Text, View } from "@tarojs/components";
 import AuthPage from '@/components/AuthPage'
-import food from "@/assets/icons/ProCard/food.png";
-import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
 import CustomNav from "@/components/CustomNav";
 import OrderMolded from "@/components/OrderMolded";
 import Popup from "@/components/Popup";
+import Card from "./Card";
 import "./style.less";
 
-import Card from "./Card";
 
 export default withLayout((props) => {
   //#region 
@@ -188,11 +185,12 @@ export default withLayout((props) => {
     setTotalPrice(total);
   }, [list]);
 
-  //#endregion
   return (
     !person.phone ? <AuthPage /> :
       <view class='container'>
-        <CustomNav title='订单' />
+        <view className='index-navbar'>
+          <CustomNav title='订单' />
+        </view>
         <Popup show={showDialog} maskClosable={false}>
           <OrderMolded item={detail} />
           <view className='item-center-Number'>
@@ -234,10 +232,10 @@ export default withLayout((props) => {
           {/* 协议条款 */}
           <view className='Card-number-box'>
             <view className='Card-number'>
-              <text style='left:29px;position: absolute; padding-top:20px'>
+              <text>
                 手机号码:
               </text>
-              <text style='right:29px;position: absolute;padding-top:20px'>
+              <text style='right:0;position: absolute;'>
                 {person.phone}
               </text>
             </view>
@@ -263,23 +261,14 @@ export default withLayout((props) => {
 
           </view>
           {/* 支付按钮 */}
-          <view className='button-box-button-box'>
-            <view className='button-text-image'>
-              <text className='button-text-money-hot'>
-                返现￥{formatPrice(totalPrice?.cashback || 0)}
-              </text>
-              <image className='button-image' src={ProCard_hot}>
-                123123
-              </image>
-              <view className='button-text-money'>
-                门店市面价：{formatPrice(totalPrice?.standardPrice || 0)}元
-              </view>
-            </view>
-            <Button className='button-box-one' onClick={() => onShowPay()}>
-              ￥{formatPrice(totalPrice?.actualPrice || 0)}元
-              <text className='button-text-one'>支付订单</text>
-            </Button>
-          </view>
+          <Button className='payorder' onClick={() => onShowPay()}>
+            <View className='paytext'>￥{formatPrice(totalPrice?.actualPrice || 0)}元</View>
+            <View className='paycontent'>
+              <View className='paybuttontop'>返现￥{formatPrice(totalPrice?.cashback || 0)}</View>
+              <View className='paybuttonbottom'>门店市面价：{formatPrice(totalPrice?.standardPrice || 0)}元</View>
+            </View>
+            <View className='paytext'>支付订单</View>
+          </Button>
         </view>
       </view>
   );

src/pages/PayOrder/style.less

@@ -1,5 +1,4 @@
 @whiteColor: #fff;
-@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
 .container {
   width: 100%;
   //商品数量
@@ -29,7 +28,6 @@
     }
     .buy-num-add {
       display: inline-block;
-
       width: 60px;
       height: 60px;
       background: #ffffff;
@@ -40,8 +38,7 @@
   //确定按钮
   .buy-button-box {
     width: 100%;
-    margin: 40px 0 0 0;
-
+    margin-top: 40px;
     .button-Cancel {
       display: inline-block;
       width: 236px;
@@ -55,7 +52,6 @@
     }
     .button-OK {
       display: inline-block;
-
       width: 236px;
       height: 78px;
       background: #274291;
@@ -67,26 +63,20 @@
   }
   //协议条款 + 支付按钮
   .view-button {
-    position: fixed;
+    position: absolute;
     bottom: 0;
-    left: 0;
-    right: 0;
+    width: 100%;
     .Card-number-box {
-      width: calc(100% - 60px);
-      margin: auto;
       box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+      padding: 40px 30px 0;
+      margin: 0 30px;
       .Card-number {
-        width: 100%;
-        height: 96px;
-        background-color: @whiteColor;
+        position: relative;
+        font-size: 30px;
       }
       .Card-user {
-        height: 96px;
-        padding-bottom: 30px;
-        line-height: 96px;
-        background-color: @whiteColor;
+        margin: 20px 0 40px 0;
         .Radio-text {
-          padding-left: 40px;
           position: relative;
           bottom: 6px;
           color: #666666;
@@ -100,11 +90,8 @@
         font-size: 25px;
       }
       .ul-li-text {
-        padding-left: 30px;
-        /* padding-bottom: 10px; */
         position: relative;
         top: -1em;
-
         .ul-li-view {
           display: inline-block;
           margin-bottom: 3px;
@@ -120,54 +107,37 @@
         }
       }
     }
-    .button-box-button-box {
-      position: relative;
-      .button-text-image {
-        width: 144px;
-        height: 45px;
-        position: absolute;
-        top: -35px;
-        left: calc(50% - 72px);
-        z-index: 1;
-        .button-text-money-hot {
-          position: absolute;
-          width: 144px;
-          height: 43px;
-          line-height: 43px;
+    .payorder{
+      margin: 40px 30px;
+      color: #fff;
+      background-color: #274190;
+      border-radius: 12px;
+      height: 92px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .paytext{
+        font-size: 30px;
+      }
+      .paycontent{
+        margin:0 15px;
+        .paybuttontop{
+          background: url(../../assets/icons/ProCard/ProCard_hot.png) no-repeat;
+          background-size: 100% 100%;
+          padding: 5px 25px 8px 6px;
           font-size: 24px;
-          font-weight: bold;
+          height: 44.3px;
+          line-height: 44.3px;
+          box-sizing: border-box;
           color: @whiteColor;
+          font-weight: 600;
         }
-        .button-image {
-          width: 143px;
-          height: 43px;
-        }
-        .button-text-money {
-          position: absolute;
-          margin-top: -8;
-          width: 157px;
+        .paybuttonbottom{          
           font-size: 18px;
-          font-weight: 400;
           text-decoration: line-through;
-          color: @whiteColor;
-        }
-      }
-      .button-box-one {
-        font-size: 30px;
-        line-height: 92px;
-        margin-top: 3em;
-        background-color: #274190;
-        border-radius: 12px;
-        width: calc(100% - 60px);
-        height: 92px;
-        color: @whiteColor;
-        bottom: 40px;
-        .button-text-one {
-          right: 133px;
-          font-size: 30px;
-          padding-left: 220px;
+          line-height: 17px;
         }
       }
     }
   }
-}
+}