duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(FormCard): replace scss styles with tailwind css utilities

Browse Source 
delete the unused SCSS stylesheet and migrate all component styling to Tailwind utilities
This commit is contained in:
DEV_DSW
2026-05-29 17:07:25 +08:00
parent d955a56cb0
commit 2417c79bd3
2 changed files with 21 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/FormCard/index.vue
View File

@@ -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>

152
src/components/FormCard/styles/index.scss
View File

@@ -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);
}
}