一体机放大效果开发

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

@@ -1,6 +1,6 @@
<template>
<view style="display: flex; justify-content: center; padding: 0px 0">
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 450px; height: 375px"></canvas>
</view>
</template>
@@ -162,7 +162,7 @@ function rawRadarChart(labels, data) {
//标题
ctx.setFillStyle('#000');
ctx.setFontSize(12);
ctx.font = 'bold 12px sans-serif';
ctx.font = 'bold 18px sans-serif';
ctx.fillText(label, x, y);
// ctx.setFillStyle('#A2A4A2');

View File

@@ -77,7 +77,7 @@ const handleTouchMove = (e) => {
const newY = e.touches[0].clientY - startPos.y;
// 边界检测
const maxX = window.innerWidth - videoWidth.value / 2; // 300rpx换算后的值
const maxX = window.innerWidth - videoWidth.value / 2; // 450rpx换算后的值
const maxY = window.innerHeight - videoHeight.value / 2;
position.x = Math.max(0, Math.min(newX, maxX));
@@ -165,9 +165,9 @@ defineExpose({ open });
position: fixed;
z-index: 999;
background: #000;
border-radius: 8rpx;
border-radius: 12rpx;
overflow: hidden;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.3);
}
.controls {
@@ -175,16 +175,16 @@ defineExpose({ open });
top: 0;
right: 0;
/* background: rgba(0, 0, 0, 0.7); */
padding: 10rpx;
padding: 15rpx;
display: flex;
justify-content: space-around;
}
.controls .control-text {
color: #fff;
font-size: 24rpx;
padding: 8rpx 16rpx;
font-size: 36rpx;
padding: 12rpx 24rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
border-radius: 6rpx;
}
</style>

View File

@@ -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;
}