一体机放大效果开发

This commit is contained in:
冯辉
2026-03-12 17:10:34 +08:00
parent 0c63175816
commit e7ef23ad5d
83 changed files with 3034 additions and 2899 deletions

View File

@@ -821,75 +821,75 @@ function getDatePickerIndexes(dateStr) {
margin-top: -30rpx
}
.content{
padding: 28rpx;
padding: 42rpx;
display: flex;
flex-direction: column;
justify-content: flex-start
height: calc(100% - 120rpx)
height: calc(100% - 180rpx)
}
.content-input
margin-bottom: 52rpx
margin-bottom: 78rpx
.input-titile
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #6A6A6A;
.input-con
font-weight: 400;
font-size: 32rpx;
font-size: 48rpx;
color: #333333;
line-height: 80rpx;
height: 80rpx;
border-bottom: 2rpx solid #EBEBEB
line-height: 120rpx;
height: 120rpx;
border-bottom: 3rpx solid #EBEBEB
position: relative;
.error-message
color: #ff4757;
font-size: 24rpx;
margin-top: 10rpx;
font-size: 36rpx;
margin-top: 15rpx;
line-height: 1.4;
.success-message
color: #2ed573;
font-size: 24rpx;
margin-top: 10rpx;
font-size: 36rpx;
margin-top: 15rpx;
line-height: 1.4;
.input-error
.input-con
border-bottom-color: #ff4757;
.triangle::before
position: absolute;
right: 20rpx;
top: calc(50% - 2rpx);
right: 30rpx;
top: calc(50% - 3rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
width: 6rpx;
height: 27rpx;
border-radius: 3rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.triangle::after
position: absolute;
right: 20rpx;
right: 30rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
width: 6rpx;
height: 27rpx;
border-radius: 3rpx
background: #697279;
transform: rotate(45deg)
.input-nx
position: relative
border-bottom: 2rpx solid #EBEBEB
padding-bottom: 30rpx
border-bottom: 3rpx solid #EBEBEB
padding-bottom: 45rpx
display: flex
flex-wrap: wrap
.nx-item
padding: 16rpx 24rpx
padding: 24rpx 36rpx
width: fit-content
border-radius: 20rpx
border: 2rpx solid #E8EAEE
border-radius: 30rpx
border: 3rpx solid #E8EAEE
background-color: #f8f9fa
margin-right: 16rpx
margin-top: 16rpx
font-size: 28rpx
margin-right: 24rpx
margin-top: 24rpx
font-size: 42rpx
color: #333333
transition: all 0.2s ease
@@ -898,63 +898,65 @@ function getDatePickerIndexes(dateStr) {
border-color: #256bfa
color: #256bfa
.content-sex
height: 110rpx;
height: 165rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
border-bottom: 3rpx solid #EBEBEB
margin-bottom: 78rpx
.sex-titile
line-height: 80rpx;
line-height: 120rpx;
font-size: 42rpx;
color: #333333;
.sext-ri
display: flex
align-items: center;
.sext-box
height: 76rpx;
width: 152rpx;
height: 114rpx;
width: 228rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx
border: 2rpx solid #E8EAEE;
margin-left: 28rpx
line-height: 120rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx
border: 3rpx solid #E8EAEE;
margin-left: 42rpx
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
.sext-boxactive
color: #256BFA
background: rgba(37,107,250,0.1);
border: 2rpx solid #256BFA;
border: 3rpx solid #256BFA;
.next-btn
width: 100%;
height: 90rpx;
height: 135rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
font-weight: 500;
font-size: 32rpx;
font-size: 48rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
line-height: 135rpx
// 技能信息样式
.content-skills
margin-bottom: 52rpx
margin-bottom: 78rpx
.skills-header
display: flex
justify-content: space-between
align-items: center
margin-bottom: 32rpx
margin-bottom: 48rpx
.input-titile
font-weight: 400
font-size: 28rpx
font-size: 42rpx
color: #6A6A6A
.add-skill-btn
padding: 16rpx 32rpx
padding: 24rpx 48rpx
background: #256BFA
color: #FFFFFF
border-radius: 8rpx
font-size: 26rpx
border-radius: 12rpx
font-size: 39rpx
font-weight: 500
transition: all 0.3s ease
@@ -974,33 +976,33 @@ function getDatePickerIndexes(dateStr) {
.skills-list
.skill-item
background: #FFFFFF
border: 2rpx solid #E8EAEE
border-radius: 12rpx
padding: 24rpx
margin-bottom: 24rpx
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05)
border: 3rpx solid #E8EAEE
border-radius: 18rpx
padding: 36rpx
margin-bottom: 36rpx
box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.05)
transition: all 0.3s ease
&:hover
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1)
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1)
border-color: #256BFA
.skill-header
display: flex
justify-content: space-between
align-items: center
margin-bottom: 20rpx
margin-bottom: 30rpx
.skill-number
font-weight: 500
font-size: 28rpx
font-size: 42rpx
color: #333333
.skill-actions
.action-btn
padding: 8rpx 16rpx
border-radius: 6rpx
font-size: 24rpx
padding: 12rpx 24rpx
border-radius: 9rpx
font-size: 36rpx
font-weight: 400
transition: all 0.2s ease
@@ -1015,24 +1017,24 @@ function getDatePickerIndexes(dateStr) {
.skill-fields
display: flex
flex-direction: column
gap: 20rpx
gap: 30rpx
.skill-field
.field-label
font-weight: 400
font-size: 26rpx
font-size: 39rpx
color: #6A6A6A
margin-bottom: 8rpx
margin-bottom: 12rpx
.field-input
font-weight: 400
font-size: 28rpx
font-size: 42rpx
color: #333333
line-height: 72rpx
height: 72rpx
border: 2rpx solid #E8EAEE
border-radius: 8rpx
padding: 0 20rpx
line-height: 108rpx
height: 108rpx
border: 3rpx solid #E8EAEE
border-radius: 12rpx
padding: 0 30rpx
background: #F8F9FA
transition: all 0.3s ease
@@ -1041,22 +1043,22 @@ function getDatePickerIndexes(dateStr) {
background: #FFFFFF
&.triangle::before
right: 30rpx
top: calc(50% - 2rpx)
right: 45rpx
top: calc(50% - 3rpx)
&.triangle::after
right: 30rpx
right: 45rpx
top: 50%
.empty-skills
text-align: center
padding: 60rpx 0
padding: 90rpx 0
background: #F8F9FA
border-radius: 12rpx
border: 2rpx dashed #E8EAEE
border-radius: 18rpx
border: 3rpx dashed #E8EAEE
.empty-text
font-size: 28rpx
font-size: 42rpx
color: #999999
font-weight: 400
</style>