refactor(SumCard): replace SCSS with Tailwind, clean up files

remove unused SCSS stylesheet and associated image asset, convert component styles to Tailwind utilities, fix invalid #333-grey color value, and remove the deprecated style import from the vue SFC

src/components/SumCard/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="sum-wrapper">
-    <div class="sum-item">
-      <span class="sum-label">价格</span>
-      <span class="sum-value">¥{{ referencePrice }}</span>
+  <div class="rounded-lg bg-[#f5f5f5] px-3">
+    <div class="flex justify-between items-center py-3 border-b border-[#ddd]">
+      <span class="text-[15px] text-[#333]">价格</span>
+      <span class="text-[14px] text-[#333]">¥{{ referencePrice }}</span>
     </div>
-    <div class="sum-item">
-      <span class="sum-label">折扣优惠</span>
-      <span class="sum-discount">-¥{{ discount }}</span>
+    <div class="flex justify-between items-center py-3">
+      <span class="text-[15px] text-[#333]">折扣优惠</span>
+      <span class="text-[14px] text-[#ff5722]">-¥{{ discount }}</span>
     </div>
   </div>
 </template>
@@ -23,7 +23,3 @@ defineProps({
   },
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/components/SumCard/styles/index.scss

@@ -1,33 +0,0 @@
-.sum-wrapper {
-  border-radius: 8px;
-  background-color: #f5f5f5;
-  padding: 0 12px;
-  box-sizing: border-box;
-}
-
-.sum-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #ddd;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.sum-label {
-  font-size: 15px;
-  color: #333;
-}
-
-.sum-value {
-  font-size: 14px;
-  color: #333-grey;
-}
-
-.sum-discount {
-  font-size: 14px;
-  color: #ff5722;
-}