feat: 商品详情交互开发

components/FormCard/styles/index.scss

@@ -1,46 +1,146 @@
+// 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: #fff;
+$form-header-bg-color: rgba(25, 144, 255, 0.06);
+$form-border-radius: 8px;
+$form-transition: all 0.2s ease;
+
 .form-wrapper {
-  background-color: #fff;
-  border-radius: 8px;
+  display: inline-block;
+  font-size: 0;
+  border-radius: $form-border-radius;
   overflow: hidden;
+  width: 280px;
+  margin-right: 12px;
 }
 
 .form-header {
-  background-color: rgba(25, 144, 255, 0.06);
-  border: 1px solid #e5e8ef;
-  border-radius: 8px 8px 0 0;
+  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;
 
-.form-icon {
-  height: 16px;
-  width: 16px;
-  margin-right: 8px;
+  .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;
-  color: #00a6ff;
+  font-weight: 500;
+  color: $form-primary-color;
+  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;
+  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;
-  padding: 12px 24px 12px 16px;
+  width: 100%;
 }
 
 .form-label {
-  font-size: 16px;
-  color: #86909c;
-  margin-right: 10px;
+  font-size: 14px;
+  color: $form-label-color;
   width: 50px;
+  flex-shrink: 0;
+  font-weight: 500;
+  margin-right: 10px;
 }
 
 .form-input {
   flex: 1;
-  font-size: 16px;
-  color: #333;
-  border-bottom: 1px solid #ddd;
-  padding-bottom: 6px;
+  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: $form-primary-color;
+
+    &::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);
+  }
 }