style
@@ -285,7 +285,9 @@ function deg2rad(deg) {
|
||||
}
|
||||
|
||||
function vacanciesTo(vacancies) {
|
||||
if (vacancies >= 0) {
|
||||
if(!vacancies){
|
||||
return '不限人数'
|
||||
}else if (vacancies >= 0) {
|
||||
return vacancies + "人"
|
||||
} else {
|
||||
return '不限人数'
|
||||
|
||||
@@ -151,3 +151,31 @@ const handleScrollToLower = () => {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.app-container {
|
||||
.container-header{
|
||||
height:120rpx;
|
||||
line-height: 120rpx;
|
||||
.header-btnLf{
|
||||
::v-deep *{
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
}
|
||||
.header-btnRi{
|
||||
::v-deep *{
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
}
|
||||
.header-title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -324,4 +324,21 @@ export default {
|
||||
color: #256bfa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.popup-header {
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.btn-cancel {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.btn-confirm {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -252,3 +252,32 @@ export default {
|
||||
border: 2rpx solid #256BFA;
|
||||
color: #256BFA
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.sex-content{
|
||||
.sex-content-left{
|
||||
width: 350rpx;
|
||||
.left-list-btn{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.sex-content-right{
|
||||
.grid-sex{
|
||||
grid-template-columns:repeat(6,1fr);
|
||||
.sex-right-btn{
|
||||
font-size: 36rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.secondary-title{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -355,3 +355,34 @@ ol {
|
||||
padding: 4rpx 20rpx;
|
||||
margin-right: 16rpx;
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.custom-card{
|
||||
padding: 30rpx;
|
||||
.card-title{
|
||||
.title-text{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.card-salary{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.card-company{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-info{
|
||||
font-size: 32rpx;
|
||||
.info-item{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.card-tag{
|
||||
font-size: 30rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
<text class="company line_1">{{ company.name }}</text>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<view class="fl_box fs_14">
|
||||
<view class="fl_box">
|
||||
<view class="mar_ri10">{{ company.industry }}</view>
|
||||
<view>{{ company.scale }}</view>
|
||||
</view>
|
||||
<view class="ris">
|
||||
<text class="fs_14">
|
||||
<text>
|
||||
在招职位·
|
||||
<text class="color_256BFA">{{ company.totalRecruitment || '-' }}</text>
|
||||
个
|
||||
@@ -33,12 +33,12 @@
|
||||
<text class="company line_1">{{ company.name }}</text>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<view class="fl_box fs_14">
|
||||
<view class="fl_box ">
|
||||
<view class="mar_ri10">{{ company.industry }}</view>
|
||||
<view>{{ company.scale }}</view>
|
||||
</view>
|
||||
<view class="ris">
|
||||
<text class="fs_14">
|
||||
<text>
|
||||
在招职位·
|
||||
<text class="color_256BFA">{{ company.totalRecruitment || '-' }}</text>
|
||||
个
|
||||
@@ -165,3 +165,25 @@ function nextDetail(company) {
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
<text class="company line_1">{{ job.name }}</text>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<view class="fl_box fs_14">
|
||||
<view class="fl_box">
|
||||
<dict-tree-Label class="mar_ri10" dictType="industry" :value="job.industry"></dict-tree-Label>
|
||||
<dict-Label dictType="scale" :value="job.scale"></dict-Label>
|
||||
</view>
|
||||
<view class="ris">
|
||||
<text class="fs_14">
|
||||
<text>
|
||||
在招职位·
|
||||
<text class="color_256BFA">{{ job.totalRecruitment || '-' }}</text>
|
||||
个
|
||||
@@ -130,4 +130,27 @@ function nextDetail(company) {
|
||||
.ris{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,13 +5,13 @@
|
||||
<text class="company line_1">{{ job.gsmc }}</text>
|
||||
</view>
|
||||
<view class="card-bottom" >
|
||||
<view class="fl_box fs_14" >
|
||||
<view class="fl_box" >
|
||||
<!-- <dict-tree-Label class="mar_ri10" dictType="industry" :value="job.industry"></dict-tree-Label>
|
||||
<dict-Label dictType="scale" :value="job.scale"></dict-Label> -->
|
||||
<view>{{job.gsxy}}</view>
|
||||
</view>
|
||||
<view class="ris" >
|
||||
<text class="fs_14">
|
||||
<text>
|
||||
在招职位·
|
||||
<text class="color_256BFA">{{ job.zzgwsl || '-' }}</text>
|
||||
个
|
||||
@@ -140,3 +140,26 @@ function nextDetail(company) {
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -208,3 +208,48 @@ function nextDetail(job) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.date-jobTitle{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 34rpx;
|
||||
::v-deep .texts {
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.unit {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.gap {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-companyName{
|
||||
margin-top: 14rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
margin-top: 14rpx;
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -209,3 +209,44 @@ function nextDetail(job) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 34rpx;
|
||||
::v-deep .texts {
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.unit {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.gap {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-companyName{
|
||||
margin-top: 14rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
margin-top: 14rpx;
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -208,3 +208,47 @@ function nextDetail(job) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.date-jobTitle{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 34rpx;
|
||||
::v-deep .texts {
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.unit {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.gap {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-companyName{
|
||||
margin-top: 14rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
margin-top: 14rpx;
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -147,3 +147,45 @@ function nextDetail(job) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 34rpx;
|
||||
::v-deep .texts {
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.unit {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.gap {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-companyName{
|
||||
margin-top: 14rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
margin-top: 14rpx;
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -165,3 +165,34 @@ function parseDateTime(datetimeStr) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.cards{
|
||||
.card-company{
|
||||
.company{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.card-companyName{
|
||||
margin-top: 14rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-bottom{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.card-tags{
|
||||
margin-top: 14rpx;
|
||||
.tag{
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -374,3 +374,58 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.filter-nav{
|
||||
width: 350rpx;
|
||||
.nav-item{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.active{
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
}
|
||||
.filter-content {
|
||||
.content-item {
|
||||
.item-title{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.check-content{
|
||||
margin-top: 30rpx;
|
||||
row-gap: 30rpx;
|
||||
.checkbox-item{
|
||||
.option-label {
|
||||
font-size: 34rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-header {
|
||||
padding-bottom: 25rpx;
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.btn-cancel {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.btn-confirm {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.popup-bottom {
|
||||
.btn-cancel {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.btn-confirm {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -299,3 +299,30 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.popup-header {
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.btn-cancel {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.btn-confirm {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.popup-bottom {
|
||||
.btn-cancel {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.btn-confirm {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -231,3 +231,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -81,3 +81,5 @@ function getJobList(type = 'add') {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
@@ -410,3 +410,84 @@ image {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.content{
|
||||
.content-top{
|
||||
.companyinfo-left{
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
.companyinfo-right{
|
||||
.row1{
|
||||
margin-top: 10rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.row2{
|
||||
margin-top: 10rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
.locations{
|
||||
height: 120rpx;
|
||||
.location-info{
|
||||
.info{
|
||||
.info-title{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.expand{
|
||||
font-size: 36rpx;
|
||||
.expand-img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.conetent-info{
|
||||
.info-title{
|
||||
font-size: 36rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.info-desirption{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-times{
|
||||
padding: 30rpx 90rpx;
|
||||
.left-date{
|
||||
font-size: 55rpx;
|
||||
}
|
||||
.left-dateDay{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.line{
|
||||
margin-top: 0;
|
||||
width: 80rpx;
|
||||
border-width: 4rpx;
|
||||
}
|
||||
.time-center{
|
||||
.center-date{
|
||||
font-size: 42rpx;
|
||||
}
|
||||
.center-dateDay{
|
||||
width: fit-content;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Detailscroll-view{
|
||||
.views{
|
||||
.Detail-title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -219,3 +219,29 @@ image {
|
||||
height: 100%
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.collection-search{
|
||||
.search-content{
|
||||
.header-input{
|
||||
.iconsearch{
|
||||
font-size: 50rpx !important;
|
||||
}
|
||||
.input{
|
||||
font-size: 40rpx;
|
||||
padding-left: 100rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.inputplace{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.data-all{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -272,3 +272,15 @@ function getCompanyList(type = 'add') {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.collection-content{
|
||||
.header{
|
||||
font-size: 38rpx;
|
||||
.active{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<!-- <view class="info-title title2">公司地址</view>
|
||||
<view class="locationCompany"></view> -->
|
||||
<view class="company-times">
|
||||
<view class="info-title">内容描述</view>
|
||||
<view class="info-title">举办时间</view>
|
||||
<view class="card-times">
|
||||
<view class="time-left">
|
||||
<view class="left-date">{{ parseDateTime(fairInfo.zphjbsj).time }}</view>
|
||||
@@ -590,3 +590,84 @@ image {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.app-container {
|
||||
.content-top{
|
||||
.companyinfo-left{
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
.companyinfo-right{
|
||||
.row1{
|
||||
margin-top: 10rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.row2{
|
||||
margin-top: 10rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
.locations{
|
||||
height: 120rpx;
|
||||
.location-info{
|
||||
.info{
|
||||
.info-title{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.expand{
|
||||
font-size: 36rpx;
|
||||
.expand-img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.conetent-info{
|
||||
.info-title{
|
||||
font-size: 36rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.info-desirption{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.card-times{
|
||||
padding: 30rpx 90rpx;
|
||||
.left-date{
|
||||
font-size: 55rpx;
|
||||
}
|
||||
.left-dateDay{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.line{
|
||||
margin-top: 0;
|
||||
width: 80rpx;
|
||||
border-width: 4rpx;
|
||||
}
|
||||
.time-center{
|
||||
.center-date{
|
||||
font-size: 42rpx;
|
||||
}
|
||||
.center-dateDay{
|
||||
width: fit-content;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Detailscroll-view{
|
||||
.views{
|
||||
.Detail-title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -278,3 +278,29 @@ function getFormCompletionPercent(form) {
|
||||
border: 2rpx solid #E8EAEE;
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.content{
|
||||
padding: 40rpx;
|
||||
}
|
||||
.content-input{
|
||||
.input-titile{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.input-con{
|
||||
height: 100rpx;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.input-nx{
|
||||
margin-top: 20rpx;
|
||||
.nx-item{
|
||||
padding: 12rpx 40rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
</view>
|
||||
<view class="exp-item button-click" v-for="item in userInfo.workExp" :key="item.id">
|
||||
<view class="fl_box fl_justbet mar_top15">
|
||||
<view class="fs_16">{{ item.company }}</view>
|
||||
<view >{{ item.company }}</view>
|
||||
<image
|
||||
class="icon btn-feel"
|
||||
src="@/static/icon/edit1.png"
|
||||
@@ -112,7 +112,7 @@
|
||||
></image>
|
||||
</view>
|
||||
<view class="mys-text fl_box fl_justbet">
|
||||
<text class="color_333333 fs_14">{{ item.position }}</text>
|
||||
<text class="color_333333">{{ item.position }}</text>
|
||||
<text class="datetext">{{ item.startTime }}--{{ item.endTime || '至今' }}</text>
|
||||
</view>
|
||||
<view class="mys-text">
|
||||
@@ -408,3 +408,84 @@ image{
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.notice-line{
|
||||
height: 100rpx;
|
||||
.icon{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.text{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.close{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.mys-container{
|
||||
.mys-tops{
|
||||
.tops-left{
|
||||
.name{
|
||||
font-size: 50rpx;
|
||||
.edit-icon{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.subName{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.tops-right{
|
||||
.right-imghead{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mys-info{
|
||||
.mys-h4{
|
||||
font-size: 40rpx;
|
||||
.icon{
|
||||
width: 55rpx;
|
||||
height: 55rpx;
|
||||
}
|
||||
.mys-edit-icon{
|
||||
.icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.txt{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.exp-item{
|
||||
font-size: 38rpx;
|
||||
.icon{
|
||||
width: 55rpx;
|
||||
height: 55rpx;
|
||||
}
|
||||
}
|
||||
.datetext{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.mys-text{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.mys-list{
|
||||
margin-top: 20rpx;
|
||||
.cards{
|
||||
padding: 12rpx 40rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view style="display: flex; justify-content: center; padding: 0px 0">
|
||||
<view class="radar" style="display: flex; justify-content: center; padding: 0px 0">
|
||||
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
@@ -41,6 +41,8 @@ watch(
|
||||
);
|
||||
|
||||
function rawRadarChart(labels, data) {
|
||||
let ratio = window.innerWidth / 600;
|
||||
if (ratio < 1) ratio = 1;
|
||||
const ctx = uni.createCanvasContext('radarCanvas');
|
||||
const width = 80;
|
||||
const height = 80;
|
||||
@@ -136,8 +138,8 @@ function rawRadarChart(labels, data) {
|
||||
|
||||
//标题
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.setFontSize(12);
|
||||
ctx.font = 'bold 12px sans-serif';
|
||||
ctx.setFontSize(12 * ratio);
|
||||
ctx.font = `bold ${12 * ratio}px sans-serif`;
|
||||
ctx.fillText(label, x, y);
|
||||
});
|
||||
|
||||
@@ -145,4 +147,10 @@ function rawRadarChart(labels, data) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.radar{
|
||||
padding-top: 30rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -663,3 +663,87 @@ for i in 0..100
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.content{
|
||||
.content-top{
|
||||
.position-source{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.top-salary{
|
||||
::v-deep .texts {
|
||||
.num {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
.unit {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.gap {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-name{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.top-info{
|
||||
.info-img{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.info-text{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-explain{
|
||||
.explain-left{
|
||||
.leftText{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.leftdownText{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.explain-right{
|
||||
font-size: 34rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
.content-card{
|
||||
.card-title{
|
||||
font-size: 38rpx;
|
||||
.btntext{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.description{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.company-info{
|
||||
.companyinfo-left{
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
.companyinfo-right{
|
||||
.row1{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.row2{
|
||||
font-size:32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer{
|
||||
.footer-title{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.progress-text{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="time-block">{{ days }}</div>
|
||||
<span class="colon">天</span>
|
||||
</view>
|
||||
<view style="color: #ff881a">待开始</view>
|
||||
<view class="status" style="color: #ff881a">待开始</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<span class="colon hui">:</span>
|
||||
<div class="time-block huibg">00</div>
|
||||
</view>
|
||||
<view class="hui">已结束</view>
|
||||
<view class="status hui">已结束</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<div class="time-block">{{ days }}</div>
|
||||
<span class="colon">天</span>
|
||||
</view>
|
||||
<view style="color: #18a14f">进行中</view>
|
||||
<view class="status" style="color: #18a14f">进行中</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -46,7 +46,7 @@
|
||||
<span class="colon">:</span>
|
||||
<div class="time-block">{{ seconds }}</div>
|
||||
</view>
|
||||
<view style="color: #18a14f">进行中</view>
|
||||
<view class="status" style="color: #18a14f">进行中</view>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
@@ -160,3 +160,19 @@ onUnmounted(() => {
|
||||
color: #256bfa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.colon{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.time-block{
|
||||
font-size: 40rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.status{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -207,10 +207,40 @@ function getList(type = 'add', loading = true) {
|
||||
text-align: center;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border: 2rpx solid #E8EAEE;
|
||||
margin-top: 32rpx
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.reser-content{
|
||||
.content-top{
|
||||
.top-item{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.active{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.reser-content{
|
||||
.main{
|
||||
.card{
|
||||
.card-row{
|
||||
margin-top: 20rpx;
|
||||
.rowleft{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.card-Title{
|
||||
margin-top: 20rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -336,3 +336,45 @@ function getMonthCalendarData({ year, month, selectableDates = [] }) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.content{
|
||||
.top-date{
|
||||
display: grid;
|
||||
grid-template-columns:repeat(7,1fr);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 40rpx;
|
||||
background: #f3f3f3;
|
||||
.weekText{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
.date-list{
|
||||
.list-title{
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.list-item{
|
||||
.item{
|
||||
padding: 35rpx 0;
|
||||
margin: 5rpx;
|
||||
.item-top{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.item-nong{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -264,3 +264,80 @@ image {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.mys-container{
|
||||
.info{
|
||||
padding: 40rpx;
|
||||
.avatar{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
.info-right{
|
||||
height: 170rpx;
|
||||
.name{
|
||||
font-size: 45rpx;
|
||||
}
|
||||
.des{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.phone{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-bottom{
|
||||
padding: 25rpx 50rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.des-card{
|
||||
padding: 30rpx 40rpx;
|
||||
font-size: 34rpx;
|
||||
gap:20rpx;
|
||||
}
|
||||
.empty-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.img{
|
||||
width: 600rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card{
|
||||
.title{
|
||||
.text{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skill-box{
|
||||
margin-top: 40rpx;
|
||||
.skill-item{
|
||||
font-size: 34rpx;
|
||||
padding: 15rpx 40rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.exp-box{
|
||||
margin-top: 40rpx;
|
||||
.exp-item{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-box{
|
||||
margin-top: 40rpx;
|
||||
.certificate-item{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -243,3 +243,42 @@ const changeendTime = () => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.content{
|
||||
padding: 40rpx;
|
||||
}
|
||||
.content-input{
|
||||
.input-titile{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.input-con{
|
||||
height: 100rpx;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.input-nx{
|
||||
margin-top: 20rpx;
|
||||
.nx-item{
|
||||
padding: 12rpx 40rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.flex-box{
|
||||
.input-box{
|
||||
flex: 0.4;
|
||||
}
|
||||
.gap{
|
||||
font-size: 60rpx;
|
||||
flex: 0.2;
|
||||
}
|
||||
}
|
||||
.content-input{
|
||||
.text-area{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -557,3 +557,86 @@ function getNextDates({ startDate = '', count = 6 }) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.app-container{
|
||||
.container-header{
|
||||
background-size: 100% 600rpx;
|
||||
.header-input{
|
||||
margin: 20rpx 0;
|
||||
.iconsearch{
|
||||
font-size: 60rpx !important;
|
||||
}
|
||||
.input{
|
||||
font-size: 40rpx;
|
||||
padding-left: 100rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.inputplace{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.header-date{
|
||||
.data-week{
|
||||
.weel-days{
|
||||
width: 300rpx;
|
||||
height: 200rpx;
|
||||
.label{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.day{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-all{
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards{
|
||||
.card{
|
||||
padding: 50rpx 10rpx;
|
||||
.card-title{
|
||||
font-size: 40rpx;
|
||||
padding: 0 90rpx;
|
||||
}
|
||||
.card-row{
|
||||
font-size: 34rpx;
|
||||
padding: 0 90rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.card-times{
|
||||
padding: 0 90rpx;
|
||||
.left-date{
|
||||
font-size: 55rpx;
|
||||
}
|
||||
.left-dateDay{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.line{
|
||||
margin-top: 0;
|
||||
width: 80rpx;
|
||||
border-width: 4rpx;
|
||||
}
|
||||
.time-center{
|
||||
.center-date{
|
||||
font-size: 42rpx;
|
||||
}
|
||||
.center-dateDay{
|
||||
width: fit-content;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer{
|
||||
padding: 0 90rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -348,3 +348,23 @@ footer-height = 98rpx
|
||||
height: footer-height;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.main-content{
|
||||
.head{
|
||||
height: 120rpx;
|
||||
.main-header{
|
||||
height: 120rpx;
|
||||
font-size: 40rpx;
|
||||
uni-image{
|
||||
width: 55rpx;
|
||||
height: 55rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -185,7 +185,7 @@
|
||||
<!-- btn -->
|
||||
<CollapseTransition :show="showfile">
|
||||
<view class="area-tips">
|
||||
<uni-icons type="info-filled" color="#ADADAD" size="15"></uni-icons>
|
||||
<uni-icons type="info-filled" color="#ADADAD" size="20"></uni-icons>
|
||||
上传后自动解析简历内容
|
||||
</view>
|
||||
<view class="area-file">
|
||||
@@ -1101,3 +1101,86 @@ image-margin-top = 40rpx
|
||||
-webkit-animation: ai-circle 1s linear infinite;
|
||||
animation: ai-circle 1s linear infinite;
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.chat-background{
|
||||
.back-rowTitle{
|
||||
font-size:50rpx;
|
||||
}
|
||||
.back-rowText{
|
||||
font-size:34rpx;
|
||||
}
|
||||
.back-rowh3{
|
||||
font-size:36rpx;
|
||||
}
|
||||
.back-rowmsg{
|
||||
font-size:34rpx;
|
||||
}
|
||||
}
|
||||
.areatext{
|
||||
align-items:center;
|
||||
}
|
||||
.btn-box{
|
||||
width: 90rpx;
|
||||
height:90rpx;
|
||||
.send-btn{
|
||||
width:50rpx;
|
||||
height:50rpx;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
min-height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
.input_vio{
|
||||
min-height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size:34rpx;
|
||||
}
|
||||
.inputplaceholder {
|
||||
font-size: 34rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.area-tips{
|
||||
font-size:32rpx;
|
||||
}
|
||||
.message{
|
||||
font-size: 36rpx;
|
||||
.message-markdown{
|
||||
font-size: 36rpx;
|
||||
padding:40rpx;
|
||||
.message-controll{
|
||||
margin-top:25rpx;
|
||||
.controll-left{
|
||||
.controll-icon{
|
||||
width:80rpx;
|
||||
height:80rpx;
|
||||
}
|
||||
}
|
||||
.controll-right{
|
||||
.controll-icon{
|
||||
width:80rpx;
|
||||
height:80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.markdown-body{
|
||||
font-size:36rpx;
|
||||
}
|
||||
|
||||
.area-file .file-card{
|
||||
padding:50rpx 0;
|
||||
.card-img{
|
||||
width:65rpx;
|
||||
height:65rpx;
|
||||
}
|
||||
uni-text{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<view class="container" id="pixi-box" ref="pixiContainerRef"></view>
|
||||
<view class="container" id="pixi-box" ref="pixiContainerRef"></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
|
||||
const emit = defineEmits(['tag-click']);
|
||||
import { onMounted, onUnmounted, ref, nextTick } from "vue";
|
||||
const emit = defineEmits(["tag-click"]);
|
||||
|
||||
// DOM Ref
|
||||
const pixiContainerRef = ref(null);
|
||||
@@ -16,356 +16,356 @@ let activeTagInstances = [];
|
||||
|
||||
// 配置数据
|
||||
const mockTags = [
|
||||
{ name: '医生', bgColor: 0x0069fe, fontColor: 0xffffff, size: 17, opacity: 1.0, angle: 0, radius: 0 },
|
||||
{
|
||||
name: '工程师',
|
||||
bgColor: 0x87e2ec,
|
||||
fontColor: 0xffffff,
|
||||
size: 14,
|
||||
opacity: 1,
|
||||
angle: -Math.PI / 2,
|
||||
radius: 68,
|
||||
tailRotation: Math.PI / 2,
|
||||
},
|
||||
{
|
||||
name: '建筑师',
|
||||
bgColor: 0xffebeb,
|
||||
tailColor: 0xffe1e1,
|
||||
fontColor: 0xff6969,
|
||||
size: 11.5,
|
||||
opacity: 1,
|
||||
angle: -Math.PI / 4.2,
|
||||
radius: 125,
|
||||
tailRotation: (3 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: '律师',
|
||||
bgColor: 0x21ea85,
|
||||
fontColor: 0xffffff,
|
||||
size: 15,
|
||||
opacity: 1,
|
||||
angle: -Math.PI / 10,
|
||||
radius: 130,
|
||||
tailRotation: (3 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: '记者',
|
||||
bgColor: 0xebf3ff,
|
||||
tailColor: 0xb9d3ff,
|
||||
fontColor: 0x1d71ef,
|
||||
size: 12,
|
||||
opacity: 1,
|
||||
angle: Math.PI / 120,
|
||||
radius: 130,
|
||||
tailRotation: (3 * Math.PI) / 3.4,
|
||||
},
|
||||
{
|
||||
name: '程序员',
|
||||
bgColor: 0xffd4b6,
|
||||
fontColor: 0xffffff,
|
||||
size: 14,
|
||||
opacity: 1,
|
||||
angle: Math.PI / 7,
|
||||
radius: 120,
|
||||
tailRotation: (5 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: '摄影师',
|
||||
bgColor: 0xd8e5fe,
|
||||
tailColor: 0xb9d3ff,
|
||||
fontColor: 0x1d71ef,
|
||||
size: 11,
|
||||
opacity: 1,
|
||||
angle: Math.PI / 3,
|
||||
radius: 79,
|
||||
tailRotation: (3 * Math.PI) / 2,
|
||||
},
|
||||
{
|
||||
name: '设计师',
|
||||
bgColor: 0xff9400,
|
||||
fontColor: 0xffffff,
|
||||
size: 14,
|
||||
opacity: 1,
|
||||
angle: (2 * Math.PI) / 3,
|
||||
radius: 92,
|
||||
tailRotation: (7 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: '心理咨询师',
|
||||
bgColor: 0xebf3ff,
|
||||
tailColor: 0xb9d3ff,
|
||||
fontColor: 0x1d71ef,
|
||||
size: 10.5,
|
||||
opacity: 1,
|
||||
angle: (5.4 * Math.PI) / 6,
|
||||
radius: 110,
|
||||
tailRotation:(3 * Math.PI) /1.78,
|
||||
},
|
||||
{
|
||||
name: '护士',
|
||||
bgColor: 0xff6969,
|
||||
fontColor: 0xffffff,
|
||||
size: 15,
|
||||
opacity: 1,
|
||||
angle: (6.3 * Math.PI) / 5.9,
|
||||
radius: 110,
|
||||
tailRotation: Math.PI / 4,
|
||||
},
|
||||
{
|
||||
name: '会计',
|
||||
bgColor: 0xfce9c9,
|
||||
fontColor: 0xfbc55f,
|
||||
size: 13,
|
||||
opacity: 1,
|
||||
angle: (7.2 * Math.PI) / 5.9,
|
||||
radius: 120,
|
||||
tailRotation: Math.PI / 4,
|
||||
},
|
||||
{ name: "医生", bgColor: 0x0069fe, fontColor: 0xffffff, size: 17, opacity: 1.0, angle: 0, radius: 0 },
|
||||
{
|
||||
name: "工程师",
|
||||
bgColor: 0x87e2ec,
|
||||
fontColor: 0xffffff,
|
||||
size: 14,
|
||||
opacity: 1,
|
||||
angle: -Math.PI / 2,
|
||||
radius: 68,
|
||||
tailRotation: Math.PI / 2,
|
||||
},
|
||||
{
|
||||
name: "建筑师",
|
||||
bgColor: 0xffebeb,
|
||||
tailColor: 0xffe1e1,
|
||||
fontColor: 0xff6969,
|
||||
size: 11.5,
|
||||
opacity: 1,
|
||||
angle: -Math.PI / 4.2,
|
||||
radius: 125,
|
||||
tailRotation: (3 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: "律师",
|
||||
bgColor: 0x21ea85,
|
||||
fontColor: 0xffffff,
|
||||
size: 15,
|
||||
opacity: 1,
|
||||
angle: -Math.PI / 10,
|
||||
radius: 130,
|
||||
tailRotation: (3 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: "记者",
|
||||
bgColor: 0xebf3ff,
|
||||
tailColor: 0xb9d3ff,
|
||||
fontColor: 0x1d71ef,
|
||||
size: 12,
|
||||
opacity: 1,
|
||||
angle: Math.PI / 120,
|
||||
radius: 130,
|
||||
tailRotation: (3 * Math.PI) / 3.4,
|
||||
},
|
||||
{
|
||||
name: "程序员",
|
||||
bgColor: 0xffd4b6,
|
||||
fontColor: 0xffffff,
|
||||
size: 14,
|
||||
opacity: 1,
|
||||
angle: Math.PI / 7,
|
||||
radius: 120,
|
||||
tailRotation: (5 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: "摄影师",
|
||||
bgColor: 0xd8e5fe,
|
||||
tailColor: 0xb9d3ff,
|
||||
fontColor: 0x1d71ef,
|
||||
size: 11,
|
||||
opacity: 1,
|
||||
angle: Math.PI / 3,
|
||||
radius: 79,
|
||||
tailRotation: (3 * Math.PI) / 2,
|
||||
},
|
||||
{
|
||||
name: "设计师",
|
||||
bgColor: 0xff9400,
|
||||
fontColor: 0xffffff,
|
||||
size: 14,
|
||||
opacity: 1,
|
||||
angle: (2 * Math.PI) / 3,
|
||||
radius: 92,
|
||||
tailRotation: (7 * Math.PI) / 4,
|
||||
},
|
||||
{
|
||||
name: "心理咨询师",
|
||||
bgColor: 0xebf3ff,
|
||||
tailColor: 0xb9d3ff,
|
||||
fontColor: 0x1d71ef,
|
||||
size: 10.5,
|
||||
opacity: 1,
|
||||
angle: (5.4 * Math.PI) / 6,
|
||||
radius: 110,
|
||||
tailRotation: (3 * Math.PI) / 1.78,
|
||||
},
|
||||
{
|
||||
name: "护士",
|
||||
bgColor: 0xff6969,
|
||||
fontColor: 0xffffff,
|
||||
size: 15,
|
||||
opacity: 1,
|
||||
angle: (6.3 * Math.PI) / 5.9,
|
||||
radius: 110,
|
||||
tailRotation: Math.PI / 4,
|
||||
},
|
||||
{
|
||||
name: "会计",
|
||||
bgColor: 0xfce9c9,
|
||||
fontColor: 0xfbc55f,
|
||||
size: 13,
|
||||
opacity: 1,
|
||||
angle: (7.2 * Math.PI) / 5.9,
|
||||
radius: 120,
|
||||
tailRotation: Math.PI / 4,
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
setTimeout(() => {
|
||||
initPixi();
|
||||
}, 100);
|
||||
window.addEventListener('resize', handleResize);
|
||||
await nextTick();
|
||||
setTimeout(() => {
|
||||
initPixi();
|
||||
}, 100);
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (app) {
|
||||
app.destroy(true, { children: true, texture: true, baseTexture: true });
|
||||
app = null;
|
||||
}
|
||||
window.removeEventListener("resize", handleResize);
|
||||
if (app) {
|
||||
app.destroy(true, { children: true, texture: true, baseTexture: true });
|
||||
app = null;
|
||||
}
|
||||
});
|
||||
|
||||
const getContainerDOM = () => {
|
||||
const refVal = pixiContainerRef.value;
|
||||
if (!refVal) return document.getElementById('pixi-box');
|
||||
if (refVal.$el) return refVal.$el;
|
||||
return refVal;
|
||||
const refVal = pixiContainerRef.value;
|
||||
if (!refVal) return document.getElementById("pixi-box");
|
||||
if (refVal.$el) return refVal.$el;
|
||||
return refVal;
|
||||
};
|
||||
|
||||
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
|
||||
|
||||
const initPixi = () => {
|
||||
const container = getContainerDOM();
|
||||
if (!container) return;
|
||||
const container = getContainerDOM();
|
||||
if (!container) return;
|
||||
|
||||
const width = container.clientWidth || 300;
|
||||
const height = container.clientHeight || 300;
|
||||
const width = container.clientWidth || 300;
|
||||
const height = container.clientHeight || 300;
|
||||
|
||||
if (app) return;
|
||||
if (app) return;
|
||||
|
||||
app = new PIXI.Application({
|
||||
width: width,
|
||||
height: height,
|
||||
backgroundAlpha: 0,
|
||||
backgroundColor: 0xf5f7fa,
|
||||
antialias: true,
|
||||
resolution: window.devicePixelRatio || 1,
|
||||
autoDensity: true,
|
||||
});
|
||||
app.view.style.touchAction = 'auto';
|
||||
app = new PIXI.Application({
|
||||
width: width,
|
||||
height: height,
|
||||
backgroundAlpha: 0,
|
||||
backgroundColor: 0xf5f7fa,
|
||||
antialias: true,
|
||||
resolution: window.devicePixelRatio || 1,
|
||||
autoDensity: true,
|
||||
});
|
||||
app.view.style.touchAction = "auto";
|
||||
|
||||
container.appendChild(app.view);
|
||||
container.appendChild(app.view);
|
||||
|
||||
tagsContainer = new PIXI.Container();
|
||||
app.stage.addChild(tagsContainer);
|
||||
tagsContainer = new PIXI.Container();
|
||||
app.stage.addChild(tagsContainer);
|
||||
|
||||
renderScene(width, height);
|
||||
renderScene(width, height);
|
||||
};
|
||||
|
||||
const renderScene = (sw, sh) => {
|
||||
tagsContainer.removeChildren();
|
||||
activeTagInstances = [];
|
||||
let ratio = window.innerWidth / 600;
|
||||
if (ratio < 1) ratio = 1;
|
||||
tagsContainer.removeChildren();
|
||||
activeTagInstances = [];
|
||||
|
||||
const baseSize = 375;
|
||||
const scaleFactor = (Math.min(sw, sh) / baseSize) * 0.9;
|
||||
mockTags.forEach((data, index) => {
|
||||
const scaledRadius = data.radius * ratio;
|
||||
|
||||
mockTags.forEach((data, index) => {
|
||||
const scaledRadius = data.radius * (scaleFactor < 1 ? 1 : scaleFactor * 0.8);
|
||||
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
|
||||
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
|
||||
|
||||
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
|
||||
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
|
||||
const tag = createTag(data, index, ratio);
|
||||
|
||||
const tag = createTag(data, index);
|
||||
tagsContainer.addChild(tag);
|
||||
|
||||
tagsContainer.addChild(tag);
|
||||
const safeW = tag.width / 2 + 10;
|
||||
const safeH = tag.height / 2 + 10;
|
||||
|
||||
const safeW = tag.width / 2 + 10;
|
||||
const safeH = tag.height / 2 + 10;
|
||||
// 强制修正 x 和 y,使其不超出屏幕
|
||||
x = clamp(x, safeW, sw - safeW);
|
||||
y = clamp(y, safeH, sh - safeH);
|
||||
|
||||
// 强制修正 x 和 y,使其不超出屏幕
|
||||
x = clamp(x, safeW, sw - safeW);
|
||||
y = clamp(y, safeH, sh - safeH);
|
||||
tag.x = x;
|
||||
tag.y = y;
|
||||
|
||||
tag.x = x;
|
||||
tag.y = y;
|
||||
|
||||
// 4. 保存元数据
|
||||
tag.userData = {
|
||||
originalX: x,
|
||||
originalY: y,
|
||||
angle: data.angle,
|
||||
radius: scaledRadius,
|
||||
floatOffset: Math.random() * Math.PI * 2,
|
||||
floatSpeed: 0.01 + Math.random() * 0.02,
|
||||
floatRange: 2 + Math.random() * 2,
|
||||
safeH: safeH,
|
||||
};
|
||||
|
||||
if (data.radius > 0) {
|
||||
const tail = createCometTail( data.tailColor || data.bgColor, data.tailRotation, tag.width);
|
||||
tag.addChildAt(tail, 0);
|
||||
tag.updateTail = () => tail.updateAnim();
|
||||
}
|
||||
|
||||
activeTagInstances.push(tag);
|
||||
});
|
||||
|
||||
// 动画循环
|
||||
app.ticker.add(() => {
|
||||
const screenH = app.screen.height;
|
||||
|
||||
activeTagInstances.forEach((tag) => {
|
||||
const meta = tag.userData;
|
||||
if (meta) {
|
||||
// 计算新的浮动位置
|
||||
meta.floatOffset += meta.floatSpeed;
|
||||
let nextY = meta.originalY + Math.sin(meta.floatOffset) * meta.floatRange;
|
||||
|
||||
// 再次进行边界检查
|
||||
if (nextY < meta.safeH) nextY = meta.safeH;
|
||||
if (nextY > screenH - meta.safeH) nextY = screenH - meta.safeH;
|
||||
|
||||
tag.y = nextY;
|
||||
|
||||
if (tag.updateTail) tag.updateTail();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const createTag = (tagData, index) => {
|
||||
const tagGroup = new PIXI.Container();
|
||||
tagGroup.eventMode = 'static';
|
||||
tagGroup.cursor = 'pointer';
|
||||
|
||||
tagGroup.on('pointertap', () => emit('tag-click', tagData));
|
||||
|
||||
const text = new PIXI.Text(tagData.name, {
|
||||
fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
|
||||
fontSize: tagData.size,
|
||||
fill: tagData.fontColor,
|
||||
padding: 4,
|
||||
resolution: 2,
|
||||
});
|
||||
text.anchor.set(0.5);
|
||||
|
||||
const paddingH = 26;
|
||||
const paddingV = 10;
|
||||
let bgWidth = text.width + paddingH;
|
||||
let bgHeight = text.height + paddingV;
|
||||
|
||||
if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
|
||||
|
||||
const bg = new PIXI.Graphics();
|
||||
bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
|
||||
bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
|
||||
bg.endFill();
|
||||
|
||||
tagGroup.addChild(bg);
|
||||
tagGroup.addChild(text);
|
||||
|
||||
return tagGroup;
|
||||
};
|
||||
|
||||
const createCometTail = (bgColor, tailRotation, parentWidth) => {
|
||||
const tailGroup = new PIXI.Container();
|
||||
const graphics = new PIXI.Graphics();
|
||||
tailGroup.addChild(graphics);
|
||||
|
||||
const baseLength = 45;
|
||||
const startWidth = parentWidth * 0.6;
|
||||
const endWidth = 20;
|
||||
|
||||
let breathPhase = Math.random() * Math.PI * 2;
|
||||
const breathSpeed = 0.04;
|
||||
|
||||
tailGroup.updateAnim = () => {
|
||||
breathPhase += breathSpeed;
|
||||
const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
|
||||
graphics.clear();
|
||||
const currentLength = baseLength * breathScale;
|
||||
|
||||
const cos = Math.cos(tailRotation);
|
||||
const sin = Math.sin(tailRotation);
|
||||
const perpX = -sin;
|
||||
const perpY = cos;
|
||||
|
||||
const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
|
||||
const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
|
||||
const endCX = cos * currentLength;
|
||||
const endCY = sin * currentLength;
|
||||
const p3 = { x: endCX - perpX * (endWidth / 2), y: endCY - perpY * (endWidth / 2) };
|
||||
const p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
|
||||
|
||||
const segments = 8;
|
||||
for (let i = 0; i < segments; i++) {
|
||||
const t1 = i / segments;
|
||||
const t2 = (i + 1) / segments;
|
||||
const alpha = 0.4 * (1 - t1);
|
||||
const sp1 = { x: p1.x + (p4.x - p1.x) * t1, y: p1.y + (p4.y - p1.y) * t1 };
|
||||
const sp2 = { x: p2.x + (p3.x - p2.x) * t1, y: p2.y + (p3.y - p2.y) * t1 };
|
||||
const ep1 = { x: p1.x + (p4.x - p1.x) * t2, y: p1.y + (p4.y - p1.y) * t2 };
|
||||
const ep2 = { x: p2.x + (p3.x - p2.x) * t2, y: p2.y + (p3.y - p2.y) * t2 };
|
||||
graphics.beginFill(bgColor, alpha);
|
||||
graphics.moveTo(sp1.x, sp1.y);
|
||||
graphics.lineTo(sp2.x, sp2.y);
|
||||
graphics.lineTo(ep2.x, ep2.y);
|
||||
graphics.lineTo(ep1.x, ep1.y);
|
||||
graphics.endFill();
|
||||
}
|
||||
// 4. 保存元数据
|
||||
tag.userData = {
|
||||
originalX: x,
|
||||
originalY: y,
|
||||
angle: data.angle,
|
||||
radius: scaledRadius,
|
||||
floatOffset: Math.random() * Math.PI * 2,
|
||||
floatSpeed: 0.01 + Math.random() * 0.02,
|
||||
floatRange: 2 + Math.random() * 2,
|
||||
safeH: safeH,
|
||||
};
|
||||
tailGroup.updateAnim();
|
||||
return tailGroup;
|
||||
|
||||
if (data.radius > 0) {
|
||||
const tail = createCometTail(data.tailColor || data.bgColor, data.tailRotation, tag.width, ratio);
|
||||
tag.addChildAt(tail, 0);
|
||||
tag.updateTail = () => tail.updateAnim();
|
||||
}
|
||||
|
||||
activeTagInstances.push(tag);
|
||||
});
|
||||
|
||||
// 动画循环
|
||||
app.ticker.add(() => {
|
||||
const screenH = app.screen.height;
|
||||
activeTagInstances.forEach((tag) => {
|
||||
const meta = tag.userData;
|
||||
if (meta) {
|
||||
// 计算新的浮动位置
|
||||
meta.floatOffset += meta.floatSpeed;
|
||||
let nextY = meta.originalY + Math.sin(meta.floatOffset) * meta.floatRange;
|
||||
|
||||
// 再次进行边界检查
|
||||
if (nextY < meta.safeH) nextY = meta.safeH;
|
||||
if (nextY > screenH - meta.safeH) nextY = screenH - meta.safeH;
|
||||
|
||||
tag.y = nextY;
|
||||
|
||||
if (tag.updateTail) tag.updateTail();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const createTag = (tagData, index, ratio) => {
|
||||
if (ratio > 1) ratio = ratio * 0.9;
|
||||
const tagGroup = new PIXI.Container();
|
||||
tagGroup.eventMode = "static";
|
||||
tagGroup.cursor = "pointer";
|
||||
|
||||
tagGroup.on("pointertap", () => emit("tag-click", tagData));
|
||||
|
||||
const text = new PIXI.Text(tagData.name, {
|
||||
fontFamily: ["PingFang SC", "Microsoft YaHei", "Arial"],
|
||||
fontSize: tagData.size * ratio,
|
||||
fill: tagData.fontColor,
|
||||
padding: 4 * ratio,
|
||||
resolution: 2,
|
||||
});
|
||||
text.anchor.set(0.5);
|
||||
|
||||
const paddingH = 26 * ratio;
|
||||
const paddingV = 10 * ratio;
|
||||
let bgWidth = text.width + paddingH;
|
||||
let bgHeight = text.height + paddingV;
|
||||
|
||||
if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
|
||||
|
||||
const bg = new PIXI.Graphics();
|
||||
bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
|
||||
bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
|
||||
bg.endFill();
|
||||
|
||||
tagGroup.addChild(bg);
|
||||
tagGroup.addChild(text);
|
||||
|
||||
return tagGroup;
|
||||
};
|
||||
|
||||
const createCometTail = (bgColor, tailRotation, parentWidth, ratio) => {
|
||||
if (ratio > 1) ratio = ratio * 0.9;
|
||||
const tailGroup = new PIXI.Container();
|
||||
const graphics = new PIXI.Graphics();
|
||||
tailGroup.addChild(graphics);
|
||||
|
||||
const baseLength = 45 * ratio;
|
||||
const startWidth = parentWidth * 0.6;
|
||||
const endWidth = 20 * ratio;
|
||||
|
||||
let breathPhase = Math.random() * Math.PI * 2;
|
||||
const breathSpeed = 0.04;
|
||||
|
||||
tailGroup.updateAnim = () => {
|
||||
breathPhase += breathSpeed;
|
||||
const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
|
||||
graphics.clear();
|
||||
const currentLength = baseLength * breathScale;
|
||||
|
||||
const cos = Math.cos(tailRotation);
|
||||
const sin = Math.sin(tailRotation);
|
||||
const perpX = -sin;
|
||||
const perpY = cos;
|
||||
|
||||
const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
|
||||
const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
|
||||
const endCX = cos * currentLength;
|
||||
const endCY = sin * currentLength;
|
||||
const p3 = { x: endCX - perpX * (endWidth / 2), y: endCY - perpY * (endWidth / 2) };
|
||||
const p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
|
||||
|
||||
const segments = 8;
|
||||
for (let i = 0; i < segments; i++) {
|
||||
const t1 = i / segments;
|
||||
const t2 = (i + 1) / segments;
|
||||
const alpha = 0.4 * (1 - t1);
|
||||
const sp1 = { x: p1.x + (p4.x - p1.x) * t1, y: p1.y + (p4.y - p1.y) * t1 };
|
||||
const sp2 = { x: p2.x + (p3.x - p2.x) * t1, y: p2.y + (p3.y - p2.y) * t1 };
|
||||
const ep1 = { x: p1.x + (p4.x - p1.x) * t2, y: p1.y + (p4.y - p1.y) * t2 };
|
||||
const ep2 = { x: p2.x + (p3.x - p2.x) * t2, y: p2.y + (p3.y - p2.y) * t2 };
|
||||
graphics.beginFill(bgColor, alpha);
|
||||
graphics.moveTo(sp1.x, sp1.y);
|
||||
graphics.lineTo(sp2.x, sp2.y);
|
||||
graphics.lineTo(ep2.x, ep2.y);
|
||||
graphics.lineTo(ep1.x, ep1.y);
|
||||
graphics.endFill();
|
||||
}
|
||||
};
|
||||
tailGroup.updateAnim();
|
||||
return tailGroup;
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
const container = getContainerDOM();
|
||||
if (!app || !container) return;
|
||||
const container = getContainerDOM();
|
||||
if (!app || !container) return;
|
||||
|
||||
const w = container.clientWidth || 300;
|
||||
const h = container.clientHeight || 300;
|
||||
const w = container.clientWidth || 300;
|
||||
const h = container.clientHeight || 300;
|
||||
|
||||
app.renderer.resize(w, h);
|
||||
app.renderer.resize(w, h);
|
||||
|
||||
activeTagInstances.forEach((tag) => {
|
||||
const meta = tag.userData;
|
||||
if (!meta) return;
|
||||
activeTagInstances.forEach((tag) => {
|
||||
const meta = tag.userData;
|
||||
if (!meta) return;
|
||||
|
||||
let newX = w / 2 + meta.radius * Math.cos(meta.angle);
|
||||
let newY = h / 2 + meta.radius * Math.sin(meta.angle);
|
||||
let newX = w / 2 + meta.radius * Math.cos(meta.angle);
|
||||
let newY = h / 2 + meta.radius * Math.sin(meta.angle);
|
||||
|
||||
const safeW = tag.width / 2 + 10;
|
||||
const safeH = tag.height / 2 + 10;
|
||||
const safeW = tag.width / 2 + 10;
|
||||
const safeH = tag.height / 2 + 10;
|
||||
|
||||
meta.originalX = clamp(newX, safeW, w - safeW);
|
||||
meta.originalY = clamp(newY, safeH, h - safeH);
|
||||
meta.safeH = safeH; // 更新安全高度
|
||||
meta.originalX = clamp(newX, safeW, w - safeW);
|
||||
meta.originalY = clamp(newY, safeH, h - safeH);
|
||||
meta.safeH = safeH; // 更新安全高度
|
||||
|
||||
tag.x = meta.originalX;
|
||||
});
|
||||
tag.x = meta.originalX;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #b9d3ff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #b9d3ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,84 +1,63 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<view class="nav-filter">
|
||||
<view class="filter-top" @touchmove.stop.prevent>
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="jobs-left">
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === 'all' }"
|
||||
@click="choosePosition('all')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === index }"
|
||||
v-for="(item, index) in userInfo.jobTitle"
|
||||
:key="index"
|
||||
@click="choosePosition(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="jobs-add button-click" @click="navTo('/pages/search/search')">
|
||||
<uni-icons class="iconsearch" color="#666D7F" type="search" size="18"></uni-icons>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
<view class="app-container">
|
||||
<view class="nav-filter">
|
||||
<view class="filter-top" @touchmove.stop.prevent>
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="jobs-left">
|
||||
<view class="job button-click" :class="{ active: state.tabIndex === 'all' }" @click="choosePosition('all')"> 全部 </view>
|
||||
<view class="job button-click" :class="{ active: state.tabIndex === index }" v-for="(item, index) in userInfo.jobTitle" :key="index" @click="choosePosition(index)">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="jobs-add button-click" @click="navTo('/pages/search/search')">
|
||||
<uni-icons class="iconsearch" color="#666D7F" type="search" size="18"></uni-icons>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
<view class="cards">
|
||||
<scroll-view :scroll-y="true" class="tab-scroll" @scrolltolower="scrollBottom">
|
||||
<view class="scroll-content">
|
||||
<custom-waterfalls-flow
|
||||
ref="waterfallsFlowRef"
|
||||
:column="columnCount"
|
||||
:columnSpace="columnSpace"
|
||||
:value="list"
|
||||
>
|
||||
<template v-slot:default="job">
|
||||
<view class="slot-item">
|
||||
<view class="job-image btn-feel" @click="nextVideo(job)">
|
||||
<image class="cover-image" :src="job.cover" mode="aspectFill"></image>
|
||||
<view class="cover-triangle"></view>
|
||||
</view>
|
||||
<view class="job-info" @click="nextDetail(job)">
|
||||
<view class="salary">
|
||||
<Salary-Expectation
|
||||
:max-salary="job.maxSalary"
|
||||
:min-salary="job.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||
</view>
|
||||
<view class="title">{{ job.jobTitle }}</view>
|
||||
<view class="desc">
|
||||
<image class="point3" src="/static/icon/point3.png"></image>
|
||||
<!-- <uni-icons type="location" size="14"></uni-icons> -->
|
||||
<view class="descText">{{ job.companyName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cards">
|
||||
<scroll-view :scroll-y="true" class="tab-scroll" @scrolltolower="scrollBottom">
|
||||
<view class="scroll-content">
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :column="columnCount" :columnSpace="columnSpace" :value="list">
|
||||
<template v-slot:default="job">
|
||||
<view class="slot-item">
|
||||
<view class="job-image btn-feel" @click="nextVideo(job)">
|
||||
<image class="cover-image" :src="job.cover" mode="aspectFill"></image>
|
||||
<view class="cover-triangle"></view>
|
||||
</view>
|
||||
<view class="job-info" @click="nextDetail(job)">
|
||||
<view class="salary">
|
||||
<Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary" :is-month="true"></Salary-Expectation>
|
||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||
</view>
|
||||
<view class="title">{{ job.jobTitle }}</view>
|
||||
<view class="desc">
|
||||
<image class="point3" src="/static/icon/point3.png"></image>
|
||||
<!-- <uni-icons type="location" size="14"></uni-icons> -->
|
||||
<view class="descText">{{ job.companyName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||
import { usePagination } from '@/hook/usePagination';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
import img from '@/static/icon/filter.png';
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import { useColumnCount } from '@/hook/useColumnCount';
|
||||
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from "vue";
|
||||
import { usePagination } from "@/hook/usePagination";
|
||||
const { $api, navTo } = inject("globalFunction");
|
||||
import { storeToRefs } from "pinia";
|
||||
import useUserStore from "@/stores/useUserStore";
|
||||
import img from "@/static/icon/filter.png";
|
||||
import useLocationStore from "@/stores/useLocationStore";
|
||||
import { useColumnCount } from "@/hook/useColumnCount";
|
||||
import { useRecommedIndexedDBStore, jobRecommender } from "@/stores/useRecommedIndexedDBStore.js";
|
||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||
// status
|
||||
const { userInfo } = storeToRefs(useUserStore());
|
||||
@@ -86,32 +65,38 @@ const isLoaded = ref(false);
|
||||
const waterfallsFlowRef = ref(null);
|
||||
const loadmoreRef = ref(null);
|
||||
const state = reactive({
|
||||
tabIndex: 'all',
|
||||
tabIndex: "all",
|
||||
});
|
||||
|
||||
// 响应式搜索条件(可以被修改)
|
||||
const searchParams = ref({});
|
||||
const pageSize = ref(10);
|
||||
const { list, loading, refresh, loadMore,finished } = usePagination(
|
||||
(params) => $api.createRequest('/app/job/littleVideo', params),
|
||||
dataToImg, // 转换函数
|
||||
{
|
||||
pageSize: pageSize,
|
||||
search: searchParams,
|
||||
dataKey: 'data',
|
||||
onBeforeRequest: () => {
|
||||
loadmoreRef.value?.change('loading');
|
||||
},
|
||||
}
|
||||
);
|
||||
watch(()=>finished.value, (newVal) => {
|
||||
if (newVal) {
|
||||
// 确保瀑布流组件知道数据已加载完成
|
||||
loadmoreRef.value?.change('noMore')
|
||||
}else{
|
||||
loadmoreRef.value?.change('more')
|
||||
const { list, loading, refresh, loadMore, finished } = usePagination(
|
||||
(params) => $api.createRequest("/app/job/littleVideo", params),
|
||||
dataToImg, // 转换函数
|
||||
{
|
||||
pageSize: pageSize,
|
||||
search: searchParams,
|
||||
dataKey: "data",
|
||||
onBeforeRequest: () => {
|
||||
if (!finished) {
|
||||
loadmoreRef.value?.change("loading");
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
);
|
||||
watch(
|
||||
() => finished.value,
|
||||
(newVal) => {
|
||||
console.log(newVal,'+++++')
|
||||
if (newVal) {
|
||||
// 确保瀑布流组件知道数据已加载完成
|
||||
loadmoreRef.value?.change("noMore");
|
||||
} else {
|
||||
loadmoreRef.value?.change("more");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// function imageloaded() {
|
||||
// nextTick(() => {
|
||||
@@ -125,61 +110,61 @@ watch(()=>finished.value, (newVal) => {
|
||||
// }
|
||||
|
||||
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||
pageSize.value = 10 * (columnCount.value - 1);
|
||||
nextTick(() => {
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
useLocationStore().getLocation();
|
||||
});
|
||||
pageSize.value = 10 * (columnCount.value - 1);
|
||||
nextTick(() => {
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
useLocationStore().getLocation();
|
||||
});
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
if (isLoaded.value) return;
|
||||
isLoaded.value = true;
|
||||
refresh();
|
||||
} catch (err) {
|
||||
isLoaded.value = false; // 重置状态允许重试
|
||||
throw err;
|
||||
}
|
||||
try {
|
||||
if (isLoaded.value) return;
|
||||
isLoaded.value = true;
|
||||
refresh();
|
||||
} catch (err) {
|
||||
isLoaded.value = false; // 重置状态允许重试
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
async function choosePosition(index) {
|
||||
state.tabIndex = index;
|
||||
if (index === 'all') {
|
||||
searchParams.value.jobTitle = '';
|
||||
} else {
|
||||
searchParams.value.jobTitle = userInfo.value.jobTitle[index];
|
||||
}
|
||||
console.log(searchParams.value);
|
||||
refresh('refresh');
|
||||
waterfallsFlowRef.value.refresh();
|
||||
state.tabIndex = index;
|
||||
if (index === "all") {
|
||||
searchParams.value.jobTitle = "";
|
||||
} else {
|
||||
searchParams.value.jobTitle = userInfo.value.jobTitle[index];
|
||||
}
|
||||
console.log(searchParams.value);
|
||||
refresh("refresh");
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
|
||||
function scrollBottom() {
|
||||
loadMore();
|
||||
loadMore();
|
||||
}
|
||||
|
||||
function nextDetail(job) {
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
|
||||
function nextVideo(job) {
|
||||
uni.setStorageSync(`job-Info`, job);
|
||||
navTo(`/packageA/pages/tiktok/tiktok`);
|
||||
uni.setStorageSync(`job-Info`, job);
|
||||
navTo(`/packageA/pages/tiktok/tiktok`);
|
||||
}
|
||||
|
||||
function dataToImg(data) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
// image: item.cover,
|
||||
image: img,
|
||||
hide: true,
|
||||
}));
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
// image: item.cover,
|
||||
image: img,
|
||||
hide: true,
|
||||
}));
|
||||
}
|
||||
|
||||
defineExpose({ loadData });
|
||||
@@ -345,3 +330,49 @@ defineExpose({ loadData });
|
||||
width: 26rpx
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media (min-width: 800px) {
|
||||
.nav-filter {
|
||||
padding: 30rpx 40rpx;
|
||||
.filter-top {
|
||||
.tab-scroll {
|
||||
.jobs-left {
|
||||
.job {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.active {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jobs-add {
|
||||
font-size: 36rpx;
|
||||
.iconsearch {
|
||||
font-size: 50rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slot-item{
|
||||
.job-image{
|
||||
height: 500rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.desc{
|
||||
.point3{
|
||||
width: 40rpx;
|
||||
height:40rpx ;
|
||||
}
|
||||
.descText{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -492,3 +492,52 @@ function complete() {
|
||||
text-align: center;
|
||||
line-height: 90rpx
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.content-one{
|
||||
.content-title{
|
||||
.title-lf{
|
||||
font-size: 50rpx;
|
||||
.lf-text{
|
||||
margin-top: 10rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.title-ri{
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
.content-input{
|
||||
.input-titile{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.input-con{
|
||||
font-size: 36rpx;
|
||||
padding-bottom: 20rpx;
|
||||
&::before{
|
||||
width: 5rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
&::after{
|
||||
width: 5rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-sex{
|
||||
.sex-titile{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.sext-ri{
|
||||
.sext-box{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.next-btn{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
<text class="left-text">素质测评</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<uni-icons color="#909090" type="right" size="14"></uni-icons>
|
||||
<uni-icons class="icon" color="#909090" type="right" size="14"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-row btn-feel">
|
||||
@@ -71,7 +71,7 @@
|
||||
<text class="left-text">AI面试</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<uni-icons color="#909090" type="right" size="14"></uni-icons>
|
||||
<uni-icons class="icon" color="#909090" type="right" size="14"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-row btn-feel">
|
||||
@@ -318,3 +318,89 @@ function chooseFileUploadTest(pam) {}
|
||||
background: #A2A2A2;
|
||||
transform: rotate(45deg)
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.mine-userinfo{
|
||||
&::before{
|
||||
width: 6rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
&::after{
|
||||
width: 6rpx;
|
||||
height: 50rpx;
|
||||
top: calc(50% + 6rpx);
|
||||
}
|
||||
.userindo-head{
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
.userinfo-ls{
|
||||
.userinfo-ls-name{
|
||||
font-size: 55rpx;
|
||||
}
|
||||
.userinfo-ls-resume{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mini-number{
|
||||
.numbe-item{
|
||||
.mini-num{
|
||||
font-size: 70rpx;
|
||||
}
|
||||
.mini-text{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mini-cards{
|
||||
.card-top{
|
||||
padding: 60rpx 40rpx;
|
||||
.top-title{
|
||||
font-size: 50rpx;
|
||||
}
|
||||
.top-subTitle{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.top-btn{
|
||||
top: 85rpx;
|
||||
font-size: 40rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
.card-main{
|
||||
padding: 40rpx;
|
||||
.main-title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.main-row{
|
||||
.row-left{
|
||||
.left-img{
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.left-text{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.row-right{
|
||||
font-size: 34rpx;
|
||||
.icon{
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-back{
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -244,3 +244,22 @@ function changeSwiperMsgType(e) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.app-container{
|
||||
.container-header{
|
||||
padding: 40rpx 44rpx 36rpx 50rpx;
|
||||
.header-btnLf{
|
||||
font-size: 42rpx;
|
||||
width: 250rpx;
|
||||
}
|
||||
.active{
|
||||
font-size: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -150,3 +150,26 @@ defineExpose({ loadData });
|
||||
color: #6C7282;
|
||||
margin-top: 4rpx;
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.list-card{
|
||||
padding: 40rpx;
|
||||
.card-img{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.card-info{
|
||||
.info-title{
|
||||
font-size: 38rpx;
|
||||
.card-time{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.info-text{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -136,3 +136,25 @@ defineExpose({ loadData });
|
||||
color: #6C7282;
|
||||
margin-top: 4rpx;
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.list-card{
|
||||
padding: 40rpx;
|
||||
.card-img{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.card-info{
|
||||
.info-title{
|
||||
font-size: 38rpx;
|
||||
.card-time{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
.info-text{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -68,7 +68,7 @@
|
||||
<view class="content-top">
|
||||
<view class="top-left">历史搜索</view>
|
||||
<view class="top-right button-click" @click="remove">
|
||||
<uni-icons type="trash" color="#C1C1C1" size="20"></uni-icons>
|
||||
<uni-icons class="delete" type="trash" color="#C1C1C1" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-history">
|
||||
@@ -459,3 +459,81 @@ function dataToImg(data) {
|
||||
color: #6C7282;
|
||||
margin-top: 6rpx;
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@media(min-width: 800px){
|
||||
.container{
|
||||
.top{
|
||||
.btnback{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.search-box{
|
||||
.iconsearch{
|
||||
font-size: 50rpx !important;
|
||||
}
|
||||
.inputed{
|
||||
font-size: 40rpx;
|
||||
padding-left: 100rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.inputplace{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.search-btn{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.view-top{
|
||||
padding: 10rpx 0;
|
||||
.top-item{
|
||||
font-size: 36rpx;
|
||||
&::after{
|
||||
width: 40rpx;
|
||||
height: 8rpx;
|
||||
left: calc(50% - 20rpx);
|
||||
}
|
||||
}
|
||||
.active{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
.content-top{
|
||||
.top-left{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.top-right{
|
||||
.delete{
|
||||
font-size: 60rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slot-item{
|
||||
.job-image{
|
||||
height: 500rpx;
|
||||
}
|
||||
.salary{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.desc{
|
||||
font-size: 32rpx;
|
||||
.point3{
|
||||
width: 40rpx;
|
||||
height:40rpx ;
|
||||
}
|
||||
.descText{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 35 KiB |