refactor: replace border-box with box-border and clean up unused scss

Remove the unused box-sizing.scss stylesheet and its import from the main SCSS index file. Update all Vue component template class references from the custom border-box class to the native box-border utility class to eliminate redundant custom CSS and align with the project's utility class conventions.
2026-07-24 16:48:07 +08:00
parent 79b101978a
commit cb7054cd90
47 changed files with 103 additions and 132 deletions
--- a/src/pages-order/order/components/AmtSection/index.vue
+++ b/src/pages-order/order/components/AmtSection/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="bg-white border-box rounded-12 p-[12px] mb-12">
+  <view class="bg-white box-border rounded-12 p-[12px] mb-12">
    <view class="flex flex-items-center flex-justify-between">
      <view class="flex flex-items-center">
        <text class="font-size-16 color-171717 line-height-24 font-500">
--- a/src/pages-order/order/components/FooterSection/index.vue
+++ b/src/pages-order/order/components/FooterSection/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <view class="footer bg-white border-box flex flex-items-center flex-justify-between p-[12px]">
+  <view class="footer bg-white box-border flex flex-items-center flex-justify-between p-[12px]">
    <button v-if="['1', '2'].includes(statusCode)"
-      class="left border-none border-box bg-white rounded-10 flex flex-items-center flex-justify-center font-size-14 font-500 color-525866 mr-12"
+      class="left border-none box-border bg-white rounded-10 flex flex-items-center flex-justify-center font-size-14 font-500 color-525866 mr-12"
      @click="emit('refund', orderData)">
      申请退款
    </button>
--- a/src/pages-order/order/components/GoodsInfo/index.vue
+++ b/src/pages-order/order/components/GoodsInfo/index.vue
@@ -13,7 +13,7 @@

    <!-- 权益部分 -->
    <view class="border-box flex flex-items-center pt-[12px]">
-      <text class="bg-[#f7f7f7] border-box rounded-4 font-size-11 color-525866 mr-4 pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
+      <text class="bg-[#f7f7f7] box-border rounded-4 font-size-11 color-525866 mr-4 pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
        v-for="(item, index) in commodityFacilityList" :key="index">
        {{ item }}
      </text>
--- a/src/pages-order/order/components/OrderCard/OrderCardContent.vue
+++ b/src/pages-order/order/components/OrderCard/OrderCardContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="card-content border-box pt-[12px]">
+  <view class="card-content box-border pt-[12px]">
    <view class="flex items-center justify-between">
      <view class="left flex-full font-size-14 line-height-20 color-171717 mr-12">
        {{ orderData.commodityName }}
--- a/src/pages-order/order/components/OrderCard/index.vue
+++ b/src/pages-order/order/components/OrderCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="order-card bg-white border-box p-[12px] rounded-12 m-12" @click.stop="handleCardClick">
+  <view class="order-card bg-white box-border p-[12px] rounded-12 m-12" @click.stop="handleCardClick">
    <!-- 卡片头部 -->
    <view class="card-header flex items-center">
      <view class="status-info flex items-center flex-full">
@@ -21,7 +21,7 @@

    <view v-if="orderData.orderStatus === '0'" class="text-right">
      <button
-        class="go-pay border-box border-none font-size-14 color-white bg-[#ff3d60] rounded-5 inline-block text-center line-height-30"
+        class="go-pay box-border border-none font-size-14 color-white bg-[#ff3d60] rounded-5 inline-block text-center line-height-30"
        @click.stop="handleCardClick">
        去支付
      </button>
--- a/src/pages-order/order/components/OrderInfo/index.vue
+++ b/src/pages-order/order/components/OrderInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="bg-white border-box rounded-10 p-[12px]">
+  <view class="bg-white box-border rounded-10 p-[12px]">
    <view class="flex mb-8 font-size-12">
      <text class="w-60 color-99A0AE">订单编号</text>
      <text class="color-525866">{{ orderData.orderId }}</text>
--- a/src/pages-order/order/components/OrderQrcode/index.vue
+++ b/src/pages-order/order/components/OrderQrcode/index.vue
@@ -11,7 +11,7 @@
      </view>

      <view
-        class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-[12px] mb-12 mx-12">
+        class="bg-white box-border rounded-12 flex flex-col flex-items-center flex-justify-center p-[12px] mb-12 mx-12">

        <view class="flex w-full flex-row flex-items-center flex-justify-between py-[4px]">
          <view>
@@ -31,8 +31,8 @@
        </view>

        <view
-          class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-[16px] pb-[32px] mt-12">
-          <view class="flex flex-row flex-justify-between border-box w-full px-[12px]">
+          class="flex flex-col w-full flex-items-center flex-justify-center box-border rounded-8 border pt-[16px] pb-[32px] mt-12">
+          <view class="flex flex-row flex-justify-between box-border w-full px-[12px]">
            <view class="bg-[#F0F8F3] theme-color-500 font-size-14 px-[12px] line-height-24 rounded-12">凭证{{
              selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
            <view class="text-color-500 font-size-14 px-[12px] line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count
--- a/src/pages-order/order/components/UserInfo/index.vue
+++ b/src/pages-order/order/components/UserInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="bg-white border-box rounded-10 p-[12px] mb-12" v-if="hasConsumerData">
+  <view class="bg-white box-border rounded-10 p-[12px] mb-12" v-if="hasConsumerData">
    <view v-for="(item, index) in consumerList" :key="index">
      <view class="flex mb-8 font-size-12">
        <text class="w-60 color-99A0AE">住客姓名</text>
--- a/src/pages-order/order/components/VoucherList/index.vue
+++ b/src/pages-order/order/components/VoucherList/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="bg-white border-box rounded-12 px-[12px] pt-[12px] mb-12">
+  <view class="bg-white box-border rounded-12 px-[12px] pt-[12px] mb-12">
    <text class="font-size-16 color-171717 line-height-24 font-500">
      核销凭证列表
    </text>
--- a/src/pages-order/order/detail.vue
+++ b/src/pages-order/order/detail.vue
@@ -1,11 +1,12 @@
 <template>
  <view class="order-detail-page flex flex-col h-screen">
-    <TopNavBar titleAlign="center" :background="$theme-color-100" title="订单详情" />
+    <TopNavBar titleAlign="center" :background="$theme - color - 100" title="订单详情" />

-    <view class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y">
+    <view class="order-detail-wrapper box-border flex-full overflow-hidden scroll-y">
      <OrderStatusInfo :orderData="orderData" />

-      <VoucherList v-if="orderData.orderType != 0 && orderData.orderStatus === '2'" :orderData="orderData" @selected="handleSelectedVoucher" />
+      <VoucherList v-if="orderData.orderType != 0 && orderData.orderStatus === '2'" :orderData="orderData"
+        @selected="handleSelectedVoucher" />

      <AmtSection :orderData="orderData" @click="refundVisible = true" />

@@ -16,19 +17,12 @@
      <OrderInfo :orderData="orderData" />
    </view>

-    <FooterSection :orderData="orderData" @refund="handleRefundConfirm" @refresh="handlePaySuccess" />   
+    <FooterSection :orderData="orderData" @refund="handleRefundConfirm" @refresh="handlePaySuccess" />
  </view>

  <!-- 核销凭证 二维码 -->
-  <OrderQrcode
-    v-if="orderData.orderStatus === '2'"
-    v-show="visbleQrcode"
-    v-model="visbleQrcode"
-    :orderData="orderData"
-    :selectedVoucher="selectedVoucher"
-    :selectedVoucherIndex="selectedVoucherIndex"
-    @close="handleClose"
-  />
+  <OrderQrcode v-if="orderData.orderStatus === '2'" v-show="visbleQrcode" v-model="visbleQrcode" :orderData="orderData"
+    :selectedVoucher="selectedVoucher" :selectedVoucherIndex="selectedVoucherIndex" @close="handleClose" />

  <!-- 退款状态显示 -->
  <RefundPopup v-model="refundVisible" :orderData="orderData" />