一体机放大效果开发

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

@@ -576,16 +576,16 @@ function getHoursBetween(startTimeStr, endTimeStr) {
}
.btnback {
width: 64rpx;
height: 64rpx;
width: 96rpx;
height: 96rpx;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 52rpx;
height: 52rpx;
width: 78rpx;
height: 78rpx;
}
image {
@@ -599,16 +599,16 @@ image {
flex-direction: column;
.content-top {
padding: 28rpx;
padding-top: 50rpx;
padding: 42rpx;
padding-top: 75rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.companyinfo-left {
width: 96rpx;
height: 96rpx;
margin-right: 24rpx;
width: 144rpx;
height: 144rpx;
margin-right: 36rpx;
}
.companyinfo-right {
@@ -616,7 +616,7 @@ image {
.row1 {
font-weight: 500;
font-size: 32rpx;
font-size: 48rpx;
color: #333333;
font-family: "PingFangSC-Medium", "PingFang SC", "Helvetica Neue",
Helvetica, Arial, "Microsoft YaHei", sans-serif;
@@ -624,9 +624,9 @@ image {
.row2 {
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #6c7282;
line-height: 45rpx;
line-height: 68rpx;
display: flex;
justify-content: space-between;
}
@@ -634,15 +634,15 @@ image {
}
.locations {
padding: 0 28rpx;
height: 86rpx;
padding: 0 42rpx;
height: 129rpx;
position: relative;
margin-bottom: 36rpx;
margin-bottom: 54rpx;
.location-img {
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #efefef;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 3rpx solid #efefef;
}
.location-info {
@@ -654,7 +654,7 @@ image {
height: 100%;
.info {
padding: 0 60rpx;
padding: 0 90rpx;
height: 100%;
display: flex;
align-items: center;
@@ -663,16 +663,16 @@ image {
.info-title {
font-weight: 600;
font-size: 28rpx;
font-size: 42rpx;
color: #333333;
}
.info-text {
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #9b9b9b;
position: relative;
padding-right: 20rpx;
padding-right: 30rpx;
}
.info-text::before {
@@ -680,9 +680,9 @@ image {
right: 0;
top: 50%;
content: "";
width: 4rpx;
height: 16rpx;
border-radius: 2rpx;
width: 6rpx;
height: 24rpx;
border-radius: 3rpx;
background: #9b9b9b;
transform: translate(0, -75%) rotate(-45deg);
}
@@ -692,9 +692,9 @@ image {
right: 0;
top: 50%;
content: "";
width: 4rpx;
height: 16rpx;
border-radius: 2rpx;
width: 6rpx;
height: 24rpx;
border-radius: 3rpx;
background: #9b9b9b;
transform: translate(0, -25%) rotate(45deg);
}
@@ -703,42 +703,42 @@ image {
}
.conetent-info {
padding: 0 28rpx;
padding: 0 42rpx;
overflow: hidden;
max-height: 0rpx;
transition: max-height 0.3s ease;
.info-title {
font-weight: 600;
font-size: 28rpx;
font-size: 42rpx;
color: #000000;
}
.info-desirption {
margin-top: 12rpx;
margin-top: 18rpx;
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #495265;
text-align: justify;
}
.title2 {
margin-top: 48rpx;
margin-top: 72rpx;
}
}
.company-times {
padding-top: 40rpx;
padding-top: 60rpx;
.info-title {
font-weight: 600;
font-size: 28rpx;
font-size: 42rpx;
color: #000000;
}
}
.expanded {
max-height: 1000rpx; // 足够显示完整内容
max-height: 1500rpx; // 足够显示完整内容
}
.expand {
@@ -746,14 +746,14 @@ image {
flex-wrap: nowrap;
white-space: nowrap;
justify-content: center;
margin-bottom: 46rpx;
margin-bottom: 69rpx;
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #256bfa;
.expand-img {
width: 40rpx;
height: 40rpx;
width: 60rpx;
height: 60rpx;
}
.expand-img-active {
@@ -768,11 +768,11 @@ image {
background: #f4f4f4;
.views {
padding: 28rpx;
padding: 42rpx;
.Detail-title {
font-weight: 600;
font-size: 32rpx;
font-size: 48rpx;
color: #000000;
position: relative;
@@ -790,19 +790,19 @@ image {
content: "";
left: -14rpx;
bottom: 0;
height: 16rpx;
width: 108rpx;
height: 24rpx;
width: 162rpx;
background: linear-gradient(to right, #cbdeff, #ffffff);
border-radius: 8rpx;
border-radius: 12rpx;
z-index: 1;
}
.cards {
padding: 32rpx;
padding: 48rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 30rpx 30rpx 30rpx 30rpx;
margin-top: 33rpx;
.card-company {
display: flex;
@@ -811,36 +811,36 @@ image {
.company {
font-weight: 600;
font-size: 32rpx;
font-size: 48rpx;
color: #333333;
display: flex;
align-items: center;
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
width: 45rpx;
height: 45rpx;
margin-right: 15rpx;
}
}
.salary {
font-weight: 500;
font-size: 28rpx;
font-size: 42rpx;
white-space: nowrap;
line-height: 48rpx;
line-height: 72rpx;
}
.ris {
background: #53acff;
color: #fff;
padding: 7rpx 20rpx;
border-radius: 8rpx;
padding: 11rpx 30rpx;
border-radius: 12rpx;
}
}
.card-companyName {
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #6c7282;
}
@@ -850,69 +850,69 @@ image {
.tag {
width: fit-content;
height: 30rpx;
height: 45rpx;
background: #e0f0ff;
border-radius: 4rpx;
padding: 6rpx 26rpx;
line-height: 30rpx;
border-radius: 6rpx;
padding: 9rpx 39rpx;
line-height: 45rpx;
font-weight: 400;
font-size: 24rpx;
font-size: 36rpx;
color: #595959;
text-align: center;
margin-top: 14rpx;
margin-top: 21rpx;
white-space: nowrap;
display: flex;
align-items: center;
margin-right: 20rpx;
margin-right: 30rpx;
image {
width: 22rpx;
height: 22rpx;
margin-right: 8rpx;
width: 33rpx;
height: 33rpx;
margin-right: 12rpx;
}
}
}
.card-bottom {
margin-top: 15rpx;
margin-top: 23rpx;
display: flex;
justify-content: space-between;
font-size: 28rpx;
font-size: 42rpx;
color: #6c7282;
}
}
.detail-box {
padding-top: 20rpx;
padding-top: 30rpx;
box-sizing: border-box;
.company-header1 {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
margin-top: 18px;
.name1 {
font-weight: 600;
margin-right: 12px;
font-size: 18px;
margin-right: 18px;
font-size: 27px;
}
.company-icon {
width: 20px;
height: 20px;
margin-right: 15px;
width: 30px;
height: 30px;
margin-right: 23px;
}
.left {
display: flex;
align-items: center;
.header-detail {
background: #5599ff;
border-radius: 18px;
padding: 2px 16px;
border-radius: 27px;
padding: 3px 24px;
color: #fff;
font-size: 14px;
font-size: 21px;
}
}
.icon {
margin-right: 6px;
margin-right: 9px;
color: #409eff;
}
.booth-no {
@@ -921,31 +921,31 @@ image {
}
.detail-item {
margin-top: 16rpx;
margin-top: 24rpx;
background: linear-gradient(to bottom, #deecff 0%, #ffffff 100%);
box-shadow: 0 0 10rpx rgba(0, 95, 169, 0.19);
border-radius: 12rpx;
border: 2rpx solid #ffffff;
padding: 30rpx;
box-shadow: 0 0 15rpx rgba(0, 95, 169, 0.19);
border-radius: 18rpx;
border: 3rpx solid #ffffff;
padding: 45rpx;
}
.name {
font-size: 32rpx;
font-size: 48rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 10rpx;
margin-top: 15rpx;
.status {
width: 160rpx;
width: 240rpx;
text-align: center;
margin-left: 24rpx;
font-size: 24rpx;
margin-left: 36rpx;
font-size: 36rpx;
background-size: 100% 100%;
font-weight: 600;
padding: 6rpx 0;
margin: 18rpx 0;
padding: 9rpx 0;
margin: 27rpx 0;
}
.btn {
width: 100%;
@@ -954,8 +954,8 @@ image {
justify-content: flex-end;
button {
margin: 10rpx;
font-size: 24rpx;
margin: 15rpx;
font-size: 36rpx;
}
}
}
@@ -970,15 +970,15 @@ image {
width: 100%;
display: flex;
align-items: center;
gap: 16rpx;
gap: 24rpx;
flex-wrap: wrap;
.tag-item {
padding: 6rpx 30rpx;
border-radius: 6rpx;
padding: 9rpx 45rpx;
border-radius: 9rpx;
background-color: #e5f1ff;
color: #589bff;
font-size: 28rpx;
font-size: 42rpx;
&.success {
background-color: #e6f8eb;
@@ -994,7 +994,7 @@ image {
justify-content: space-between;
color: #1477f1;
font-weight: 600;
font-size: 30rpx;
font-size: 45rpx;
}
}
}
@@ -1004,7 +1004,7 @@ image {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 30rpx 10rpx 30rpx;
padding: 36rpx 45rpx 15rpx 45rpx;
.time-left,
.time-right {
@@ -1012,23 +1012,23 @@ image {
.left-date {
font-weight: 500;
font-size: 48rpx;
font-size: 72rpx;
color: #333333;
}
.left-dateDay {
font-weight: 400;
font-size: 24rpx;
font-size: 36rpx;
color: #333333;
margin-top: 12rpx;
margin-top: 18rpx;
}
}
.line {
width: 40rpx;
width: 60rpx;
height: 0rpx;
border: 2rpx solid #d4d4d4;
margin-top: 64rpx;
border: 3rpx solid #d4d4d4;
margin-top: 96rpx;
}
.time-center {
@@ -1040,45 +1040,45 @@ image {
.center-date {
font-weight: 400;
font-size: 28rpx;
font-size: 42rpx;
color: #ff881a;
}
.center-dateDay {
font-weight: 400;
font-size: 24rpx;
font-size: 36rpx;
color: #333333;
margin-top: 6rpx;
line-height: 48rpx;
width: 104rpx;
height: 48rpx;
margin-top: 9rpx;
line-height: 72rpx;
width: 156rpx;
height: 72rpx;
background: #f9f9f9;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
}
}
.footer {
background: #ffffff;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
box-shadow: 0rpx -4rpx 36rpx 0rpx rgba(11, 44, 112, 0.12);
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 40rpx 28rpx 20rpx 28rpx;
padding: 60rpx 42rpx 30rpx 42rpx;
.btn-wq {
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;
}
.btn-desbel {
background: #6697fb;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
box-shadow: 0rpx -4rpx 36rpx 0rpx rgba(11, 44, 112, 0.12);
}
}
</style>