refactor(FormCard): replace scss styles with tailwind css utilities
delete the unused SCSS stylesheet and migrate all component styling to Tailwind utilities
This commit is contained in:
DEV_DSW
@@ -1,27 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="form-wrapper">
|
<div class="inline-block text-[0px] rounded-lg overflow-hidden w-70 mr-3">
|
||||||
<div class="form-header">
|
<div class="bg-sky-500/5 border border-gray-200 rounded-t-lg flex items-center px-3 py-2.5 min-h-11">
|
||||||
<uni-icons class="minus uni-color" color="opacity" size="22" type="minus" />
|
<van-icon class="minus uni-color" color="opacity" size="22" type="minus" />
|
||||||
<span class="form-title">{{ title }}</span>
|
<span class="ml-2 text-base font-medium text-[#0ccd58] flex-1 truncate">{{ title }}</span>
|
||||||
<uni-icons v-if="showDeleteIcon" class="delete uni-color" color="opacity" size="22" type="trash"
|
<van-icon v-if="showDeleteIcon" class="delete uni-color" color="opacity" size="22" type="trash"
|
||||||
@click="handleDelete" />
|
@click="handleDelete" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item-wrapper">
|
<div class="bg-gray-100 rounded-b-lg border border-t-0 border-gray-200 p-3">
|
||||||
<div class="form-item">
|
<div class="flex items-start flex-col relative mb-4">
|
||||||
<div class="form-item-row">
|
<div class="flex items-center w-full">
|
||||||
<span class="form-label">姓 名</span>
|
<span class="text-sm text-[#86909c] w-[50px] shrink-0 font-medium mr-2.5">姓 名</span>
|
||||||
<input class="form-input" :class="{ 'form-input-error': nameError }" v-model="nameValue" placeholder="请输入姓名"
|
<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" />
|
@blur="validateName" />
|
||||||
</div>
|
</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>
|
||||||
<div class="form-item">
|
<div class="flex items-start flex-col relative">
|
||||||
<div class="form-item-row">
|
<div class="flex items-center w-full">
|
||||||
<span class="form-label">手机号</span>
|
<span class="text-sm text-[#86909c] w-[50px] shrink-0 font-medium mr-2.5">手机号</span>
|
||||||
<input class="form-input" :class="{ 'form-input-error': phoneError }" v-model="phoneValue"
|
<input
|
||||||
placeholder="请输入手机号" type="tel" maxlength="11" @blur="validatePhone" />
|
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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -155,7 +159,3 @@ defineExpose({
|
|||||||
getPhoneError,
|
getPhoneError,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import "./styles/index.scss";
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user