feat: 订单详情样式调整

src/pages-order/order/components/OrderStatusInfo/index.vue

@@ -1,18 +1,8 @@
 <template>
-  <view class="order-status">
+  <view
-    <view class="status-header">
+    class="border-box font-size-24 color-171717 line-height-32 font-500 pt-12 pb-12"
-      <uni-icons
-        class="status-icon"
-        fontFamily="ZhiNian"
-        size="20"
-        color="#fff"
   >
-        {{ "&#xe600;" }}
+    {{ statusText }}
-      </uni-icons>
-      <!-- 订单状态 -->
-      <text class="status-text">{{ statusText }}</text>
-    </view>
-    <view class="status-description">{{ statusDescription }}</view>
   </view>
 </template>
 

src/pages-order/order/components/OrderStatusInfo/styles/index.scss

@@ -1,28 +0,0 @@
-.order-status {
-  color: #fff;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.status-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.status-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-}
-
-.status-text {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.status-description {
-  font-size: $uni-font-size-sm;
-}

src/pages-order/order/detail.vue

@@ -3,14 +3,10 @@
     <TopNavBar
       titleAlign="center"
       :backgroundColor="backgroundColor"
-      :backIconColor="backIconColor"
       :shadow="shadow"
+      title="订单详情"
       fixed
-    >
+    />
-      <template #title>
-        {{ title }}
-      </template>
-    </TopNavBar>
 
     <view class="order-detail-wrapper">
       <OrderStatusInfo :orderData="orderData" />
@@ -66,20 +62,16 @@ const getOrderDetail = async (orderId) => {
 
 // 监听页面滚动事件
 const backgroundColor = ref("transparent");
-const backIconColor = ref("#fff");
+
-const title = ref("");
 const shadow = ref(false);
 onPageScroll(({ scrollTop }) => {
+  console.log("🚀 ~ scrollTop:", scrollTop);
   // 当滚动到顶部时，显示返回按钮
   if (scrollTop <= 0) {
     backgroundColor.value = "transparent";
-    backIconColor.value = "#fff";
-    title.value = "";
     shadow.value = false;
   } else {
     backgroundColor.value = "#ffffff";
-    backIconColor.value = "#333333";
-    title.value = "订单详情";
     shadow.value = true;
   }
 });

src/pages-order/order/styles/detail.scss

@@ -1,7 +1,4 @@
 .order-detail-wrapper {
-  background: url("./images/header_bg.png");
+  background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%);
-  background-position: 0 0;
+  padding: 88px 15px;
-  background-size: 100% 242px;
-  background-repeat: no-repeat;
-  padding: 60px 15px;
 }

src/pages/goods/index.vue

@@ -81,7 +81,6 @@ import { DateUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
 import GoodInfo from "./components/GoodInfo/index.vue";
-import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
 import LocationCard from "@/components/LocationCard/index.vue";
 import DateSelector from "./components/DateSelector/index.vue";

src/static/scss/font-size.scss

@@ -38,3 +38,7 @@
 .font-size-20 {
   font-size: 20px;
 }
+
+.font-size-24 {
+  font-size: 24px;
+}

src/static/scss/line-height.scss

@@ -26,3 +26,7 @@
 .line-height-24 {
   line-height: 24px;
 }
+
+.line-height-32 {
+  line-height: 32px;
+}