一体机放大效果开发
This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
<view class="content" v-show="!isEmptyObject(jobInfo)">
|
||||
|
||||
<view class="content-top btn-feel">
|
||||
<view style="background: #ffffff;padding: 24rpx;box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);border-radius: 20rpx 20rpx 20rpx 20rpx;position: relative;overflow: hidden;">
|
||||
<view style="background: #ffffff;padding: 36rpx;box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.04);border-radius: 30rpx 30rpx 30rpx 30rpx;position: relative;overflow: hidden;">
|
||||
<view class="top-salary">
|
||||
<Salary-Expectation
|
||||
:max-salary="jobInfo.maxSalary"
|
||||
@@ -215,7 +215,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 34px"></view>
|
||||
<view style="height: 51px"></view>
|
||||
<template #footer>
|
||||
<view class="footer">
|
||||
<view class="btn-wq button-click" @click="jobApply">{{ jobInfo.isApply === 1 ? '取消投递简历' : '投递简历' }}</view>
|
||||
@@ -365,7 +365,7 @@ function getCompanyIsAJobs(companyId) {
|
||||
|
||||
function getTextWidth(text, size = 12) {
|
||||
// 在小程序环境中,document 对象不存在,使用估算方法
|
||||
// 简单估算:每个字符大约占 8px 宽度
|
||||
// 简单估算:每个字符大约占 12px 宽度
|
||||
const estimatedWidth = text.length * 8;
|
||||
return -(estimatedWidth / 2) - 20; // 计算文字中心点
|
||||
}
|
||||
@@ -588,20 +588,20 @@ onShareTimeline(() => {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
width: 117rpx;
|
||||
height: 117rpx;
|
||||
}
|
||||
.btnshare {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 46rpx;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
margin-right: 104rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
@@ -610,28 +610,28 @@ image {
|
||||
.progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx; /* 间距 */
|
||||
margin-top: 24rpx
|
||||
gap: 18rpx; /* 间距 */
|
||||
margin-top: 54rpx
|
||||
|
||||
}
|
||||
.progress-text{
|
||||
margin-top: 8rpx
|
||||
margin-top: 18rpx
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx; /* 间距 */
|
||||
gap: 18rpx; /* 间距 */
|
||||
justify-content: space-around
|
||||
width: 100%
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
font-size: 45rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
width: 25%;
|
||||
height: 24rpx;
|
||||
height: 54rpx;
|
||||
background-color: #eee;
|
||||
border-radius: 24rpx;
|
||||
border-radius: 54rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
@@ -652,14 +652,14 @@ for i in 0..100
|
||||
bottom 0
|
||||
width 100%
|
||||
background linear-gradient(to right, #256bfa (i)%, #eaeaea (i)%)
|
||||
border-radius 24rpx
|
||||
border-radius 54rpx
|
||||
|
||||
|
||||
|
||||
.card-footer{
|
||||
.footer-title{
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@@ -668,18 +668,18 @@ for i in 0..100
|
||||
display: grid
|
||||
grid-template-columns: repeat(4, 1fr)
|
||||
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
|
||||
border-radius: 10rpx
|
||||
border-radius: 23rpx
|
||||
.line-pargrah{
|
||||
height: 20rpx;
|
||||
height: 45rpx;
|
||||
position: relative
|
||||
}
|
||||
.line-pargrah::after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 10
|
||||
right: 15
|
||||
top: 0
|
||||
width: 6rpx
|
||||
height: 20rpx
|
||||
width: 14rpx
|
||||
height: 45rpx
|
||||
background: #FFFFFF
|
||||
}
|
||||
}
|
||||
@@ -688,16 +688,16 @@ for i in 0..100
|
||||
|
||||
// 职位图片样式
|
||||
.job-images{
|
||||
margin-top: 30rpx
|
||||
margin-top: 68rpx
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 20rpx
|
||||
gap: 45rpx
|
||||
.image-item{
|
||||
width: calc(50% - 10rpx)
|
||||
height: 300rpx
|
||||
border-radius: 12rpx
|
||||
width: calc(50% - 23rpx)
|
||||
height: 675rpx
|
||||
border-radius: 27rpx
|
||||
overflow: hidden
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1)
|
||||
box-shadow: 0 5rpx 18rpx rgba(0, 0, 0, 0.1)
|
||||
image{
|
||||
width: 100%
|
||||
height: 100%
|
||||
@@ -708,27 +708,27 @@ for i in 0..100
|
||||
|
||||
// 联系人信息样式
|
||||
.contact-list{
|
||||
margin-top: 30rpx
|
||||
margin-top: 68rpx
|
||||
.contact-item{
|
||||
padding: 20rpx
|
||||
padding: 45rpx
|
||||
background-color: #f8f9fa
|
||||
border-radius: 12rpx
|
||||
border-radius: 27rpx
|
||||
.contact-info{
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-bottom: 15rpx
|
||||
margin-bottom: 22.5rpx
|
||||
&:last-child{
|
||||
margin-bottom: 0
|
||||
}
|
||||
.contact-label{
|
||||
font-weight: 500
|
||||
font-size: 28rpx
|
||||
font-size: 63rpx
|
||||
color: #333333
|
||||
width: 120rpx
|
||||
width: 270rpx
|
||||
}
|
||||
.contact-value{
|
||||
font-weight: 400
|
||||
font-size: 28rpx
|
||||
font-size: 63rpx
|
||||
color: #495265
|
||||
}
|
||||
}
|
||||
@@ -736,77 +736,77 @@ for i in 0..100
|
||||
}
|
||||
// ai
|
||||
.ai-explain{
|
||||
margin-top: 28rpx
|
||||
margin-top: 63rpx
|
||||
background-color: #FFFFFF
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||||
overflow: hidden
|
||||
.exbg{
|
||||
padding: 28rpx 40rpx;
|
||||
padding: 63rpx 90rpx;
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
background: url('@/static/icon/aibg.png') center center no-repeat;
|
||||
background-size: 100% 100%
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 9px 23px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.explain-left{
|
||||
.leftText{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
font-size: 72rpx;
|
||||
}
|
||||
.leftdownText{
|
||||
margin-top: 12rpx
|
||||
margin-top: 27rpx
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #495265;
|
||||
}
|
||||
}
|
||||
.explain-right{
|
||||
width: 168rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||||
border: 2rpx solid #E7E9ED;
|
||||
width: 378rpx;
|
||||
height: 162rpx;
|
||||
border-radius: 90rpx 90rpx 90rpx 90rpx;
|
||||
border: 5rpx solid #E7E9ED;
|
||||
text-align: center;
|
||||
line-height: 72rpx
|
||||
line-height: 162rpx
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0 28rpx
|
||||
padding: 0 63rpx
|
||||
height: 100%
|
||||
padding-top: 28rpx
|
||||
padding-top: 63rpx
|
||||
.content-top{
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
padding: 24rpx
|
||||
box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0,0,0,0.04);
|
||||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||||
padding: 54rpx
|
||||
position: relative
|
||||
overflow: hidden
|
||||
.top-salary{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
font-size: 72rpx;
|
||||
color: #4C6EFB;
|
||||
}
|
||||
.top-name{
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
font-size: 81rpx;
|
||||
color: #000000;
|
||||
margin-top: 8rpx
|
||||
margin-top: 18rpx
|
||||
}
|
||||
.top-info{
|
||||
margin-top: 22rpx
|
||||
margin-top: 50rpx
|
||||
display: flex;
|
||||
align-items: center
|
||||
.info-img{
|
||||
width: 40rpx;
|
||||
height: 40rpx
|
||||
width: 90rpx;
|
||||
height: 90rpx
|
||||
}
|
||||
.info-text{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #6C7282;
|
||||
margin-left: 10rpx
|
||||
margin-left: 23rpx
|
||||
}
|
||||
}
|
||||
.position-source{
|
||||
@@ -814,27 +814,27 @@ for i in 0..100
|
||||
top: 0
|
||||
right: 0
|
||||
width: fit-content;
|
||||
height: 65rpx;
|
||||
padding: 0 24rpx
|
||||
height: 97.5rpx;
|
||||
padding: 0 54rpx
|
||||
background: rgba(37,107,250,0.1);
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||
box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0,0,0,0.04);
|
||||
text-align: center
|
||||
line-height: 76rpx
|
||||
line-height: 171rpx
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #64779F;
|
||||
border-bottom-left-radius: 20rpx
|
||||
border-bottom-left-radius: 45rpx
|
||||
}
|
||||
}
|
||||
.content-card{
|
||||
padding: 24rpx
|
||||
margin-top: 28rpx
|
||||
padding: 54rpx
|
||||
margin-top: 63rpx
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0,0,0,0.04);
|
||||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||||
.card-title{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
font-size: 72rpx;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
display: flex
|
||||
@@ -846,56 +846,56 @@ for i in 0..100
|
||||
.btntext{
|
||||
white-space: nowrap
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #256BFA;
|
||||
}
|
||||
}
|
||||
.card-title::before{
|
||||
position: absolute
|
||||
content: '';
|
||||
left: -14rpx
|
||||
left: -21rpx
|
||||
bottom: 0
|
||||
height: 16rpx;
|
||||
width: 108rpx;
|
||||
height: 36rpx;
|
||||
width: 243rpx;
|
||||
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
|
||||
border-radius: 8rpx;
|
||||
border-radius: 18rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.description{
|
||||
margin-top: 30rpx
|
||||
margin-top: 68rpx
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #495265;
|
||||
}
|
||||
.company-info{
|
||||
padding-top: 30rpx
|
||||
padding-top: 68rpx
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: nowrap
|
||||
.companyinfo-left{
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-right: 24rpx
|
||||
width: 216rpx;
|
||||
height: 216rpx;
|
||||
margin-right: 54rpx
|
||||
}
|
||||
.companyinfo-right{
|
||||
|
||||
.row1{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
font-size: 72rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.row2{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #6C7282;
|
||||
line-height: 45rpx;
|
||||
line-height: 67.5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.company-map{
|
||||
margin-top: 28rpx
|
||||
height: 416rpx;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
margin-top: 63rpx
|
||||
height: 936rpx;
|
||||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||||
overflow: hidden
|
||||
}
|
||||
}
|
||||
@@ -905,7 +905,7 @@ for i in 0..100
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 20rpx 0!important
|
||||
padding: 45rpx 0!important
|
||||
z-index: 1000;
|
||||
.btn-wq{
|
||||
display: block;
|
||||
@@ -916,38 +916,38 @@ for i in 0..100
|
||||
/* #endif */
|
||||
.footer{
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
|
||||
box-shadow: 0rpx -6rpx 54rpx 0rpx rgba(11,44,112,0.12);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
padding: 40rpx 28rpx 20rpx 28rpx
|
||||
padding: 90rpx 63rpx 45rpx 63rpx
|
||||
.btn-wq{
|
||||
height: 90rpx;
|
||||
height: 203rpx;
|
||||
background: #256BFA;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border-radius: 27rpx 27rpx 27rpx 27rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
font-size: 72rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 90rpx
|
||||
line-height: 203rpx
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 18px;
|
||||
margin: 23px;
|
||||
padding: 22.5px;
|
||||
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 23px;
|
||||
border-bottom: 1.5px solid #eee;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-size: 41px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
@@ -955,49 +955,49 @@ for i in 0..100
|
||||
.applicant-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
gap: 22.5px;
|
||||
}
|
||||
|
||||
.applicant-item {
|
||||
padding: 15px;
|
||||
padding: 22.5px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 18px;
|
||||
border: 1.5px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between; /* 名字和右侧部分分开 */
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.right-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 23px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
max-width: 100px; /* 限制名字的最大宽度,根据你的布局调整 */
|
||||
max-width: 225px; /* 限制名字的最大宽度,根据你的布局调整 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
white-space: nowrap; /* 不换行 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
}
|
||||
|
||||
.matching-degree {
|
||||
font-size: 14px;
|
||||
font-size: 32px;
|
||||
color: #4CAF50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.resume-button {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #007aff;
|
||||
font-size: 27px;
|
||||
padding: 7.5px 23px;
|
||||
border-radius: 45px;
|
||||
border: 1.5px solid #007aff;
|
||||
color: #007aff;
|
||||
background-color: transparent;
|
||||
line-height: 1;
|
||||
@@ -1011,11 +1011,11 @@ for i in 0..100
|
||||
.item-details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
gap: 23px;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 14px;
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
/* 确保标签和值在同一行 */
|
||||
display: flex;
|
||||
@@ -1042,26 +1042,26 @@ for i in 0..100
|
||||
|
||||
.dialog-content {
|
||||
width: 80%;
|
||||
max-width: 500rpx;
|
||||
max-width: 1125rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
border-radius: 45rpx;
|
||||
padding: 90rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 72rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 68rpx;
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
color: #666;
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 90rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1069,17 +1069,17 @@ for i in 0..100
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
gap: 45rpx;
|
||||
}
|
||||
|
||||
.btn-cancel, .btn-confirm {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 27rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
font-size: 63rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user