diff --git a/src/pages/quick/components/Card/index.vue b/src/pages/quick/components/Card/index.vue
index 0cc5bc0..6e67487 100644
--- a/src/pages/quick/components/Card/index.vue
+++ b/src/pages/quick/components/Card/index.vue
@@ -1,36 +1,29 @@
 <template>
-  <div
-    class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
-    @click.stop="handleClick(item)"
-  >
-    <img class="left rounded-10" :src="item.commodityPhoto" mode="aspectFill" />
-    <div class="right border-box flex-full pl-12">
-      <div class="font-size-16 line-height-24 color-171717 mb-4">
+  <div class="bg-white p-[8px] rounded-[12px] flex items-start m-[12px]" @click.stop="handleClick(item)">
+    <img class="w-[80px] h-[80px] rounded-[10px]" :src="item.commodityPhoto" />
+    <div class="max-w-[259px] flex-full pl-[12px]">
+      <div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </div>
-      <div
-        v-if="item.commodityFacility"
-        class="font-size-12 line-height-16 color-99A0AE mb-4 ellipsis-1"
-      >
+      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99A0AE] mb-4 truncate">
         {{ item.commodityFacility.join(" ") }}
       </div>
-      <div class="font-size-12 line-height-18 color-43669A">
+      <div class="text-[12px] leading-[18px] text-[#43669A]">
         {{ item.commodityTradeRuleList.join(" / ") }}
       </div>
 
-      <div class="flex flex-items-center flex-justify-end">
-        <span
-          class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
-        >
-          {{ item.specificationPrice }}
-        </span>
-        <span
-          v-if="item.stockUnitLabel"
-          class="font-size-12 line-height-16 color-99A0AE"
-        >
+      <div class="flex items-center justify-end">
+        <div class="mr-[4px]">
+          <span class="text-[12px] mr-[4px]">¥</span>
+          <span class="text-[18px] font-semibold font-family-misans-vf leading-[24px] text-[#FF3D60]">
+            {{ item.specificationPrice }}
+          </span>
+        </div>
+        <span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-[#99A0AE]">
           /{{ item.stockUnitLabel }}
         </span>
-        <span class="btn border-box rounded-10 color-white ml-16">订</span>
+        <span
+          class="p-[4px_8px] bg-linear-[90deg, #ff3d60_57%, #ff990c_100%] rounded-[10px] text-white ml-[16px]">订</span>
       </div>
     </div>
   </div>
@@ -38,6 +31,7 @@
 
 <script setup>
 import { defineProps } from "vue";
+import { useRouter } from 'vue-router'
 import { useSelectedDateStore } from "@/store";
 
 // Props
@@ -59,23 +53,20 @@ const props = defineProps({
   },
   selectedDate: {
     type: Object,
-    default: () => {},
+    default: () => { },
   },
 });
 
 const selectedDateStore = useSelectedDateStore();
 
+const router = useRouter()
 const navigateToPage = (commodityId, path) => {
   const { startDate, endDate, totalDays } = props.selectedDate;
   selectedDateStore.setData({ startDate, endDate, totalDays });
 
-  uni.navigateTo({ url: `${path}?commodityId=${commodityId}` });
+  router.push({ path, query: { commodityId } })
 };
 
 const handleClick = ({ commodityId }) =>
   navigateToPage(commodityId, "/pages/goods/index");
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/quick/components/Card/styles/index.scss b/src/pages/quick/components/Card/styles/index.scss
deleted file mode 100644
index 3f1f74d..0000000
--- a/src/pages/quick/components/Card/styles/index.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.left {
-  height: 80px;
-  width: 80px;
-}
-
-.right {
-  max-width: 259px;
-  height: 100%;
-}
-
-.amt {
-  &::before {
-    content: "¥";
-    font-size: 12px;
-    margin-right: 4px;
-  }
-}
-
-.btn {
-  background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
-  padding: 4px 8px;
-}