From 2417c79bd3a336ca91671cfc21fb93f93340a8bf Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 17:07:25 +0800
Subject: [PATCH] refactor(FormCard): replace scss styles with tailwind css
 utilities

delete the unused SCSS stylesheet and migrate all component styling to Tailwind utilities
---
 src/components/FormCard/index.vue         |  42 +++---
 src/components/FormCard/styles/index.scss | 152 ----------------------
 2 files changed, 21 insertions(+), 173 deletions(-)
 delete mode 100644 src/components/FormCard/styles/index.scss

diff --git a/src/components/FormCard/index.vue b/src/components/FormCard/index.vue
index 5c96c46..a88e0f4 100644
--- a/src/components/FormCard/index.vue
+++ b/src/components/FormCard/index.vue
@@ -1,27 +1,31 @@
 <template>
-  <div class="form-wrapper">
-    <div class="form-header">
-      <uni-icons class="minus uni-color" color="opacity" size="22" type="minus" />
-      <span class="form-title">{{ title }}</span>
-      <uni-icons v-if="showDeleteIcon" class="delete uni-color" color="opacity" size="22" type="trash"
+  <div class="inline-block text-[0px] rounded-lg overflow-hidden w-70 mr-3">
+    <div class="bg-sky-500/5 border border-gray-200 rounded-t-lg flex items-center px-3 py-2.5 min-h-11">
+      <van-icon class="minus uni-color" color="opacity" size="22" type="minus" />
+      <span class="ml-2 text-base font-medium text-[#0ccd58] flex-1 truncate">{{ title }}</span>
+      <van-icon v-if="showDeleteIcon" class="delete uni-color" color="opacity" size="22" type="trash"
         @click="handleDelete" />
     </div>
-    <div class="form-item-wrapper">
-      <div class="form-item">
-        <div class="form-item-row">
-          <span class="form-label">姓 名</span>
-          <input class="form-input" :class="{ 'form-input-error': nameError }" v-model="nameValue" placeholder="请输入姓名"
+    <div class="bg-gray-100 rounded-b-lg border border-t-0 border-gray-200 p-3">
+      <div class="flex items-start flex-col relative mb-4">
+        <div class="flex items-center w-full">
+          <span class="text-sm text-[#86909c] w-[50px] shrink-0 font-medium mr-2.5">姓 名</span>
+          <input
+            class="flex-1 text-sm text-gray-800 border-none border-b border-gray-200 bg-transparent outline-none transition-all duration-200 ease-in-out min-h-5 placeholder:text-[#86909c] placeholder:opacity-80 focus:border-b focus:border-gray-200"
+            :class="{ 'border-b border-[#ff4d4f]': nameError }" v-model="nameValue" placeholder="请输入姓名"
             @blur="validateName" />
         </div>
-        <span v-if="nameError" class="form-error">{{ nameError }}</span>
+        <span v-if="nameError" class="text-xs text-[#ff4d4f] mt-1.5 ml-[60px] leading-relaxed">{{ nameError }}</span>
       </div>
-      <div class="form-item">
-        <div class="form-item-row">
-          <span class="form-label">手机号</span>
-          <input class="form-input" :class="{ 'form-input-error': phoneError }" v-model="phoneValue"
-            placeholder="请输入手机号" type="tel" maxlength="11" @blur="validatePhone" />
+      <div class="flex items-start flex-col relative">
+        <div class="flex items-center w-full">
+          <span class="text-sm text-[#86909c] w-[50px] shrink-0 font-medium mr-2.5">手机号</span>
+          <input
+            class="flex-1 text-sm text-gray-800 border-none border-b border-gray-200 bg-transparent outline-none transition-all duration-200 ease-in-out min-h-5 placeholder:text-[#86909c] placeholder:opacity-80 focus:border-b focus:border-gray-200"
+            :class="{ 'border-b border-[#ff4d4f]': phoneError }" v-model="phoneValue" placeholder="请输入手机号" type="tel"
+            maxlength="11" @blur="validatePhone" />
         </div>
-        <span v-if="phoneError" class="form-error">{{ phoneError }}</span>
+        <span v-if="phoneError" class="text-xs text-[#ff4d4f] mt-1.5 ml-[60px] leading-relaxed">{{ phoneError }}</span>
       </div>
     </div>
   </div>
@@ -155,7 +159,3 @@ defineExpose({
   getPhoneError,
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/components/FormCard/styles/index.scss b/src/components/FormCard/styles/index.scss
deleted file mode 100644
index 5d8ea0a..0000000
--- a/src/components/FormCard/styles/index.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-// SASS 变量定义
-$form-primary-color: #00a6ff;
-$form-error-color: #ff4d4f;
-$form-text-color: #333;
-$form-label-color: #86909c;
-$form-border-color: #ddd;
-$form-input-border-color: #ddd;
-$form-bg-color: #f5f5f5;
-$form-header-bg-color: rgba(25, 144, 255, 0.06);
-$form-border-radius: 8px;
-$form-transition: all 0.2s ease;
-
-.form-wrapper {
-  display: inline-block;
-  font-size: 0;
-  border-radius: $form-border-radius;
-  overflow: hidden;
-  width: 280px;
-  margin-right: 12px;
-}
-
-.form-header {
-  background-color: $form-header-bg-color;
-  box-sizing: border-box;
-  border: 1px solid $form-border-color;
-  border-radius: $form-border-radius $form-border-radius 0 0;
-  display: flex;
-  align-items: center;
-  padding: 10px 12px;
-  min-height: 44px;
-
-  .uni-color {
-    color: #0ccd58;
-  }
-
-  .minus,
-  .delete {
-    height: 22px;
-    width: 22px;
-    cursor: pointer;
-    transition: $form-transition;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-  }
-
-  .delete {
-    margin-left: auto;
-  }
-}
-
-.form-title {
-  margin-left: 8px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #0ccd58;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.form-item-wrapper {
-  background-color: $form-bg-color;
-  border-radius: 0 0 $form-border-radius $form-border-radius;
-  box-sizing: border-box;
-  border: 1px solid $form-border-color;
-  border-top: none;
-  padding: 12px;
-}
-
-.form-item {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  position: relative;
-  margin-bottom: 16px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.form-item-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.form-label {
-  font-size: 14px;
-  color: $form-label-color;
-  width: 50px;
-  flex-shrink: 0;
-  font-weight: 500;
-  margin-right: 10px;
-}
-
-.form-input {
-  flex: 1;
-  font-size: 14px;
-  color: $form-text-color;
-  border: none;
-  border-bottom: 1px solid $form-input-border-color;
-  background: transparent;
-  outline: none;
-  transition: $form-transition;
-  min-height: 20px;
-
-  &::placeholder {
-    color: $form-label-color;
-    opacity: 0.8;
-  }
-
-  &:focus {
-    border-bottom-color: #0ccd58;
-
-    &::placeholder {
-      opacity: 0.5;
-    }
-  }
-
-  &.form-input-error {
-    border-bottom-color: $form-error-color;
-
-    &:focus {
-      border-bottom-color: $form-error-color;
-    }
-  }
-}
-
-.form-error {
-  font-size: 12px;
-  color: $form-error-color;
-  margin-top: 6px;
-  margin-left: 60px;
-  line-height: 1.4;
-  animation: fadeInError 0.3s ease-in-out;
-}
-
-// 错误信息淡入动画
-@keyframes fadeInError {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}