一体机放大效果开发

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

@@ -96,7 +96,7 @@ const loading = ref(false);
let debounceTimer = null;
// 滚动视图高度
const scrollViewHeight = ref('calc(100vh - 200rpx)');
const scrollViewHeight = ref('calc(100vh - 300rpx)');
// 计算滚动视图高度
const calculateScrollViewHeight = () => {
@@ -236,51 +236,51 @@ const goBack = () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
padding: 30rpx 45rpx;
background: #fff;
border-bottom: 1rpx solid #eee;
border-bottom: 2rpx solid #eee;
.header-left {
width: 60rpx;
height: 60rpx;
width: 90rpx;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
.back-arrow {
font-size: 40rpx;
font-size: 60rpx;
color: #333;
font-weight: bold;
}
}
.header-title {
font-size: 36rpx;
font-size: 54rpx;
font-weight: 600;
color: #333;
}
.header-right {
width: 60rpx;
width: 90rpx;
}
}
.search-container {
padding: 20rpx 30rpx;
padding: 30rpx 45rpx;
background: #fff;
border-bottom: 1rpx solid #eee;
border-bottom: 2rpx solid #eee;
.search-box {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 12rpx;
padding: 0 20rpx;
height: 80rpx;
border-radius: 18rpx;
padding: 0 30rpx;
height: 120rpx;
.search-icon {
font-size: 32rpx;
margin-right: 20rpx;
font-size: 48rpx;
margin-right: 30rpx;
color: #999;
}
@@ -289,7 +289,7 @@ const goBack = () => {
height: 100%;
background: transparent;
border: none;
font-size: 28rpx;
font-size: 42rpx;
color: #333;
line-height: 1.4;
display: flex;
@@ -297,21 +297,21 @@ const goBack = () => {
&::placeholder {
color: #999;
font-size: 28rpx;
font-size: 42rpx;
line-height: 1.4;
}
}
.clear-btn {
width: 32rpx;
height: 32rpx;
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20rpx;
margin-left: 30rpx;
.clear-icon {
font-size: 24rpx;
font-size: 36rpx;
color: #999;
}
}
@@ -328,10 +328,10 @@ const goBack = () => {
display: flex;
justify-content: center;
align-items: center;
height: 400rpx;
height: 600rpx;
.tip-text {
font-size: 28rpx;
font-size: 42rpx;
color: #999;
}
}
@@ -340,10 +340,10 @@ const goBack = () => {
display: flex;
justify-content: center;
align-items: center;
height: 200rpx;
height: 300rpx;
.loading-text {
font-size: 28rpx;
font-size: 42rpx;
color: #666;
}
}
@@ -355,8 +355,8 @@ const goBack = () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
padding: 45rpx;
border-bottom: 2rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
@@ -370,25 +370,25 @@ const goBack = () => {
flex: 1;
.company-name {
font-size: 30rpx;
font-size: 45rpx;
color: #333;
font-weight: 500;
margin-bottom: 15rpx;
margin-bottom: 23rpx;
line-height: 1.4;
}
.company-location {
display: flex;
align-items: center;
margin-bottom: 10rpx;
margin-bottom: 15rpx;
.location-icon {
font-size: 20rpx;
margin-right: 8rpx;
font-size: 30rpx;
margin-right: 12rpx;
}
.location-text {
font-size: 24rpx;
font-size: 36rpx;
color: #666;
flex: 1;
}
@@ -397,25 +397,25 @@ const goBack = () => {
.company-scale, .company-nature {
display: flex;
align-items: center;
margin-bottom: 8rpx;
margin-bottom: 12rpx;
.scale-label, .nature-label {
font-size: 22rpx;
font-size: 33rpx;
color: #999;
margin-right: 8rpx;
margin-right: 12rpx;
}
.scale-text, .nature-text {
font-size: 22rpx;
font-size: 33rpx;
color: #666;
}
}
.company-description {
margin-top: 10rpx;
margin-top: 15rpx;
.desc-text {
font-size: 22rpx;
font-size: 33rpx;
color: #888;
line-height: 1.4;
display: -webkit-box;
@@ -429,14 +429,14 @@ const goBack = () => {
}
.select-icon {
width: 40rpx;
height: 40rpx;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
.arrow-icon {
font-size: 24rpx;
font-size: 36rpx;
color: #999;
}
}
@@ -448,27 +448,27 @@ const goBack = () => {
flex-direction: column;
align-items: center;
justify-content: center;
height: 400rpx;
height: 600rpx;
.empty-icon {
font-size: 120rpx;
margin-bottom: 30rpx;
font-size: 180rpx;
margin-bottom: 45rpx;
}
.no-result-text {
font-size: 28rpx;
font-size: 42rpx;
color: #666;
margin-bottom: 10rpx;
margin-bottom: 15rpx;
}
.no-result-tip {
font-size: 24rpx;
font-size: 36rpx;
color: #999;
}
}
.bottom-safe-area {
height: 120rpx;
height: 180rpx;
background: transparent;
}
</style>

View File

@@ -11,7 +11,7 @@
<view class="form-block">
<view class="form-group" v-if="userType === 0">
<view class="label">招聘公司</view>
<view-text style="color: #333;font-size: 38rpx;padding: 16rpx 0;display: inline-block;">{{formData.companyName}}</view-text>
<view-text style="color: #333;font-size: 57rpx;padding: 24rpx 0;display: inline-block;">{{formData.companyName}}</view-text>
</view>
<view class="form-group">
<view class="label">岗位名称</view>
@@ -352,7 +352,7 @@ const selectedJobTypeIds = ref(''); // 新增岗位类型ID多个用逗号
const selectedStaffType = ref(''); // 新增:人员类型显示文本
// 滚动视图高度
const scrollViewHeight = ref('calc(100vh - 200rpx)');
const scrollViewHeight = ref('calc(100vh - 300rpx)');
// 岗位类型选择器引用
const jobTypeSelector = ref(null);
@@ -914,19 +914,19 @@ const validateForm = () => {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
padding: 30rpx 45rpx;
background: #fff;
border-bottom: 1rpx solid #eee;
border-bottom: 2rpx solid #eee;
.header-title {
font-size: 36rpx;
font-size: 54rpx;
font-weight: 600;
color: #333;
}
.header-right {
width: 60rpx;
width: 90rpx;
}
}
@@ -938,50 +938,50 @@ const validateForm = () => {
.form-block {
background: #fff;
margin-bottom: 20rpx;
margin-bottom: 30rpx;
width: 100%;
position: relative;
padding-bottom: 10rpx;
padding-bottom: 15rpx;
&:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 32rpx;
font-size: 48rpx;
font-weight: 600;
color: #333;
margin-bottom: 30rpx;
padding: 30rpx 30rpx 20rpx 30rpx;
border-bottom: 2rpx solid #f0f0f0;
margin-bottom: 45rpx;
padding: 45rpx 45rpx 30rpx 45rpx;
border-bottom: 3rpx solid #f0f0f0;
}
}
.form-group {
margin-bottom: 0;
padding: 0 30rpx;
border-bottom: 2rpx solid #f0f0f0;
padding: 0 45rpx;
border-bottom: 3rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
padding-bottom: 30rpx;
padding-bottom: 45rpx;
}
.label {
font-size: 28rpx;
font-size: 42rpx;
color: #000;
margin-bottom: 15rpx;
margin-bottom: 23rpx;
font-weight: 400;
padding-top: 30rpx;
padding-top: 45rpx;
}
.input {
width: 100%;
height: 80rpx;
height: 120rpx;
background: #fff;
border: none;
border-radius: 0;
padding: 0 0 20rpx 0;
font-size: 28rpx;
padding: 0 0 30rpx 0;
font-size: 42rpx;
color: #333;
position: relative;
z-index: 1;
@@ -992,7 +992,7 @@ const validateForm = () => {
&::placeholder {
color: #999;
font-size: 28rpx;
font-size: 42rpx;
line-height: 1.4;
}
@@ -1005,12 +1005,12 @@ const validateForm = () => {
.textarea {
width: 100%;
min-height: 120rpx;
min-height: 180rpx;
background: #fff;
border: none;
border-radius: 0;
padding: 0 0 20rpx 0;
font-size: 28rpx;
padding: 0 0 30rpx 0;
font-size: 42rpx;
color: #333;
position: relative;
z-index: 1;
@@ -1019,7 +1019,7 @@ const validateForm = () => {
&::placeholder {
color: #999;
font-size: 28rpx;
font-size: 42rpx;
line-height: 1.4;
}
@@ -1032,24 +1032,24 @@ const validateForm = () => {
.picker {
width: 100%;
height: 80rpx;
height: 120rpx;
background: #fff;
border: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 20rpx 0;
padding: 0 0 30rpx 0;
box-sizing: border-box;
.picker-text {
font-size: 28rpx;
font-size: 42rpx;
color: #333;
&:empty::before {
content: attr(data-placeholder);
color: #999;
font-size: 24rpx;
font-size: 36rpx;
}
}
@@ -1057,27 +1057,27 @@ const validateForm = () => {
content: '';
width: 0;
height: 0;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 8rpx solid #999;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-top: 12rpx solid #999;
}
}
// 工作地点文字按钮样式
.location-text-btn {
width: 100%;
height: 80rpx;
height: 120rpx;
background: #256BFA;
border: none;
border-radius: 12rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
margin-top: 30rpx;
transition: all 0.3s ease;
.location-btn-text {
font-size: 28rpx;
font-size: 42rpx;
color: #fff;
font-weight: 500;
}
@@ -1094,32 +1094,32 @@ const validateForm = () => {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
height: 120rpx;
background: #fff;
border: none;
border-radius: 0;
padding: 0 0 20rpx 0;
padding: 0 0 30rpx 0;
box-sizing: border-box;
.selector-text {
font-size: 28rpx;
font-size: 42rpx;
color: #333;
&.placeholder {
color: #999;
font-size: 24rpx;
font-size: 36rpx;
}
}
.selector-arrow {
width: 40rpx;
height: 40rpx;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
.arrow-icon {
font-size: 24rpx;
font-size: 36rpx;
color: #999;
}
}
@@ -1133,18 +1133,18 @@ const validateForm = () => {
.company-display {
display: flex;
flex-direction: column;
padding: 0 0 20rpx 0;
padding: 0 0 30rpx 0;
box-sizing: border-box;
.company-name {
font-size: 28rpx;
font-size: 42rpx;
color: #333;
font-weight: 500;
margin-bottom: 8rpx;
margin-bottom: 12rpx;
}
.readonly-tip {
font-size: 24rpx;
font-size: 36rpx;
color: #999;
font-style: italic;
}
@@ -1153,10 +1153,10 @@ const validateForm = () => {
// 联系人管理样式
.contacts-container {
.contact-item {
margin-bottom: 30rpx;
padding: 0 30rpx;
margin-bottom: 45rpx;
padding: 0 45rpx;
background: #fff;
border-radius: 12rpx;
border-radius: 18rpx;
&:last-child {
margin-bottom: 0;
@@ -1166,23 +1166,23 @@ const validateForm = () => {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0 10rpx 0;
border-bottom: 1rpx solid #eee;
margin-bottom: 20rpx;
padding: 30rpx 0 15rpx 0;
border-bottom: 2rpx solid #eee;
margin-bottom: 30rpx;
.contact-title {
font-size: 28rpx;
font-size: 42rpx;
font-weight: 600;
color: #333;
}
.delete-btn {
font-size: 24rpx;
font-size: 36rpx;
color: #ff4757;
padding: 8rpx 16rpx;
padding: 12rpx 24rpx;
background: #fff;
border: 1rpx solid #ff4757;
border-radius: 6rpx;
border: 2rpx solid #ff4757;
border-radius: 9rpx;
&:active {
background: #ff4757;
@@ -1193,7 +1193,7 @@ const validateForm = () => {
.form-group {
background: transparent;
border-bottom: 1rpx solid #eee;
border-bottom: 2rpx solid #eee;
margin-bottom: 0;
&:last-child {
@@ -1201,19 +1201,19 @@ const validateForm = () => {
}
.label {
font-size: 26rpx;
font-size: 39rpx;
color: #666;
margin-bottom: 10rpx;
padding-top: 20rpx;
margin-bottom: 15rpx;
padding-top: 30rpx;
}
.input {
font-size: 26rpx;
padding-bottom: 15rpx;
font-size: 39rpx;
padding-bottom: 23rpx;
line-height: 1.4;
&::placeholder {
font-size: 26rpx;
font-size: 39rpx;
line-height: 1.4;
}
}
@@ -1225,21 +1225,21 @@ const validateForm = () => {
display: flex;
align-items: center;
justify-content: center;
margin: 20rpx 30rpx 30rpx 30rpx;
padding: 20rpx;
margin: 30rpx 45rpx 45rpx 45rpx;
padding: 30rpx;
background: #fff;
border: 2rpx dashed #ddd;
border-radius: 12rpx;
border: 3rpx dashed #ddd;
border-radius: 18rpx;
.add-icon {
font-size: 32rpx;
font-size: 48rpx;
color: #256BFA;
margin-right: 10rpx;
margin-right: 15rpx;
font-weight: bold;
}
.add-text {
font-size: 28rpx;
font-size: 42rpx;
color: #256BFA;
font-weight: 500;
}
@@ -1251,18 +1251,18 @@ const validateForm = () => {
}
.bottom-safe-area {
height: 250rpx;
height: 375rpx;
background: transparent;
}
.footer {
position: fixed;
bottom: 140rpx;
bottom: 210rpx;
left: 0;
right: 0;
background: #fff;
padding: 25rpx 30rpx;
border-top: 1rpx solid #eee;
padding: 38rpx 45rpx;
border-top: 2rpx solid #eee;
z-index: 100;
.btn-group {
@@ -1270,9 +1270,9 @@ const validateForm = () => {
.btn {
flex: 1;
height: 80rpx;
border-radius: 12rpx;
font-size: 32rpx;
height: 120rpx;
border-radius: 18rpx;
font-size: 48rpx;
font-weight: 500;
border: none;
@@ -1302,21 +1302,21 @@ const validateForm = () => {
.upload-container {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
padding: 20rpx 0;
gap: 30rpx;
padding: 30rpx 0;
}
.upload-item {
width: 200rpx;
height: 200rpx;
border-radius: 12rpx;
width: 300rpx;
height: 300rpx;
border-radius: 18rpx;
position: relative;
box-sizing: border-box;
}
.upload-btn {
background-color: #f5f5f5;
border: 2rpx dashed #ddd;
border: 3rpx dashed #ddd;
display: flex;
flex-direction: column;
align-items: center;
@@ -1330,14 +1330,14 @@ const validateForm = () => {
}
.upload-icon {
font-size: 60rpx;
font-size: 90rpx;
color: #999;
margin-bottom: 10rpx;
margin-bottom: 15rpx;
font-weight: 500;
}
.upload-text {
font-size: 24rpx;
font-size: 36rpx;
color: #999;
}
@@ -1354,10 +1354,10 @@ const validateForm = () => {
.delete-img-btn {
position: absolute;
top: 10rpx;
right: 10rpx;
width: 40rpx;
height: 40rpx;
top: 15rpx;
right: 15rpx;
width: 60rpx;
height: 60rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
@@ -1372,7 +1372,7 @@ const validateForm = () => {
}
.delete-icon {
font-size: 32rpx;
font-size: 48rpx;
color: #fff;
font-weight: bold;
}