Files
ks-app-employment-service/pages/index/components/index-one.vue
2025-10-16 16:44:30 +08:00

1172 lines
56 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="app-container">
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': isScrollingDown }">
<view class="container-search">
<view class="search-input button-click" @click="navTo('/pages/search/search')">
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
<text class="inpute">职位名称薪资要求等</text>
</view>
<!-- <view class="chart button-click">职业图谱</view> -->
</view>
<view class="cards" v-if="userInfo.userType !== 0">
<view class="card press-button" @click="navTo('/pages/nearby/nearby')">
<view class="card-title">附近工作</view>
<view class="card-text">好岗职等你来</view>
</view>
<!-- <view class="card press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
<view class="card-title">精选企业</view>
<view class="card-text">优选职得信赖</view>
</view> -->
</view>
<!-- 用户类型切换器测试用 -->
<UserTypeSwitcher v-if="showUserTypeSwitcher" />
<!-- 服务功能网格 -->
<view class="service-grid" v-if="userInfo.userType !== 0">
<view class="service-item press-button" @click="navToService('service-guidance')">
<view class="service-icon service-icon-1">
<uni-icons type="auth-filled" size="32" color="#FFFFFF"></uni-icons>
</view>
<view class="service-title">服务指导</view>
</view>
<view class="service-item press-button" @click="navToService('public-recruitment')">
<view class="service-icon service-icon-2">
<svg t="1760592459382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4717" width="32" height="32">
<path d="M652.4 934.1H91.9V110.2c0-26.7 21.7-48.3 48.3-48.3H604c26.7 0 48.3 21.7 48.3 48.3v823.9z m-513-47.4H605V110.2c0-0.5-0.4-0.9-0.9-0.9H140.3c-0.5 0-0.9 0.4-0.9 0.9v776.5z" fill="#FFFFFF" p-id="4718"></path>
<path d="M929.9 934.5l-325.7-4.8V412.3c0-26.7 21.7-48.3 48.3-48.3h229.1c26.7 0 48.3 21.7 48.3 48.3v522.2z m-278.3-51.6l230.8 3.4v-474c0-0.5-0.4-0.9-0.9-0.9h-229c-0.5 0-0.9 0.4-0.9 0.9v470.6zM340.9 319.9c0 1.3-1.1 2.4-2.4 2.4H236.8c-1.3 0-2.4-1.1-2.5-2.4V218.2c0-1.3 1.1-2.4 2.5-2.4h101.7c1.3 0 2.4 1.1 2.4 2.4v101.7zM510 319.9c0 1.3-1.1 2.4-2.4 2.4H405.9c-1.3 0-2.4-1.1-2.4-2.4V218.2c0-1.3 1.1-2.4 2.4-2.4h101.7c1.3 0 2.4 1.1 2.4 2.4v101.7zM340.9 475.1c0 1.3-1.1 2.4-2.4 2.4H236.8c-1.3 0-2.4-1.1-2.5-2.4V373.4c0-1.4 1.1-2.4 2.5-2.5h101.7c1.3 0 2.4 1.1 2.4 2.5v101.7zM510 475.1c0 1.3-1.1 2.4-2.4 2.4H405.9c-1.3 0-2.4-1.1-2.4-2.4V373.4c0-1.4 1.1-2.4 2.4-2.5h101.7c1.3 0 2.4 1.1 2.4 2.5v101.7zM340.9 630.3c0 1.3-1.1 2.4-2.4 2.4H236.8c-1.3 0-2.4-1.1-2.5-2.4V528.6c0-1.4 1.1-2.4 2.5-2.4h101.7c1.3 0 2.4 1.1 2.4 2.4v101.7zM510 630.3c0 1.3-1.1 2.4-2.4 2.4H405.9c-1.3 0-2.4-1.1-2.4-2.4V528.6c0-1.4 1.1-2.4 2.4-2.4h101.7c1.3 0 2.4 1.1 2.4 2.4v101.7zM340.9 785.5c0 1.4-1.1 2.4-2.4 2.5H236.8c-1.3 0-2.4-1.1-2.5-2.5V683.9c0-1.4 1.1-2.4 2.5-2.5h101.7c1.3 0 2.4 1.1 2.4 2.5v101.6zM510 785.5c0 1.4-1.1 2.4-2.4 2.5H405.9c-1.3 0-2.4-1.1-2.4-2.5V683.9c0-1.4 1.1-2.4 2.4-2.5h101.7c1.3 0 2.4 1.1 2.4 2.5v101.6z" fill="#FFFFFF" p-id="4719"></path>
<path d="M820.3 598.8c0 1.3-1.1 2.4-2.4 2.4H716.2c-1.4 0-2.4-1.1-2.4-2.4V497.1c0-1.3 1.1-2.4 2.4-2.4h101.7c1.3 0 2.4 1.1 2.4 2.4v101.7z m0 0M820.3 754c0 1.3-1.1 2.4-2.4 2.5H716.2c-1.4 0-2.4-1.1-2.4-2.5V652.3c0-1.3 1.1-2.4 2.4-2.4h101.7c1.3 0 2.4 1.1 2.4 2.4V754z m0 0M998.1 934.1H23.7C10.6 934.1 0 923.5 0 910.4s10.6-23.7 23.7-23.7h974.4c13.1 0 23.7 10.6 23.7 23.7s-10.6 23.7-23.7 23.7z" fill="#FFFFFF" p-id="4720"></path>
</svg>
</view>
<view class="service-title">事业单位招录</view>
</view>
<view class="service-item press-button" @click="navToService('resume-creation')">
<view class="service-icon service-icon-3">
<svg t="1760592325364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2765" width="32" height="32">
<path d="M294.56 128.48a8 8 0 0 1 8 8v96a8 8 0 0 0 8 8h403.23a8 8 0 0 0 8-8v-96a8 8 0 0 1 8-8h99.71c17.673 0 32 14.327 32 32v744.65c0 17.673-14.327 32-32 32h-635c-17.673 0-32-14.327-32-32V160.48c0-17.673 14.327-32 32-32h100.06zM366.5 351c-28.443 0-51.5 23.057-51.5 51.5 0 18.94 10.224 35.491 25.453 44.435C313.845 457.44 295 483.562 295 514.125c0 39.833 143 39.833 143 0 0-30.563-18.845-56.686-45.454-67.188C407.776 437.991 418 421.44 418 402.5c0-28.443-23.057-51.5-51.5-51.5zM721 479H520a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h201a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8z m0-128H520a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h201a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8zM677.36 65.87c4.418 0 8 2.583 8 5.77V186.1c0 1.53-0.843 2.998-2.343 4.08-1.5 1.082-3.535 1.69-5.657 1.69H351.65c-4.418 0-8-2.583-8-5.77V71.64c0-3.187 3.582-5.77 8-5.77h325.71z" fill="#FFFFFF" p-id="2766"></path>
</svg>
</view>
<view class="service-title">简历制作</view>
</view>
<view class="service-item press-button" @click="navToService('labor-policy')">
<view class="service-icon service-icon-4">
<svg t="1760592549133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6704" width="32" height="32">
<path d="M907.295876 1023.702H192.2831A107.635966 107.635966 0 0 1 76.960136 908.378036v-184.519942a38.441988 38.441988 0 0 1 38.440988-38.440988 38.441988 38.441988 0 0 1 38.441988 38.441988v184.518942c0 23.064993 0 38.440988 38.440988 38.440988h715.012776a38.441988 38.441988 0 0 1 0 76.882976z" fill="#FFFFFF" p-id="6705"></path>
<path d="M822.723903 893.001041H115.400124A38.441988 38.441988 0 0 1 76.960136 854.560053V116.482284A115.324964 115.324964 0 0 1 192.2831 1.15832h630.440803a107.635966 107.635966 0 0 1 123.012961 115.323964v661.194793A123.012962 123.012962 0 0 1 822.723903 893.000041z m-668.881791-76.882976h668.881791c15.376995 0 46.129986-7.687998 46.129985-38.440988V116.482284c0-30.75299-15.376995-38.440988-46.129985-38.440988h-630.439803a38.441988 38.441988 0 0 0-38.441988 38.440988z" fill="#FFFFFF" p-id="6706"></path>
<path d="M392.180037 708.482099h-30.75399a69.194978 69.194978 0 0 1-30.75299-61.505981l23.064992-107.636967-76.882976-76.882976a61.505981 61.505981 0 0 1-15.376995-61.50598 61.505981 61.505981 0 0 1 53.817983-38.441988l99.947969-15.375995 46.129986-99.947969a61.505981 61.505981 0 0 1 107.635966 0l46.129986 92.259971 99.947969 15.375995a61.505981 61.505981 0 0 1 38.440988 38.440988 61.505981 61.505981 0 0 1-7.687998 61.506981l-76.882976 76.882976 15.376995 107.635966a61.505981 61.505981 0 0 1-23.064993 61.506981 61.505981 61.505981 0 0 1-61.50698 0l-92.259972-46.129986-84.569973 46.129986z m123.011962-61.505981z m-130.700959-15.376995z m123.012961-53.817984h23.064993l76.882976 38.440988-15.376995-76.882976a61.505981 61.505981 0 0 1 15.376995-53.817983l61.505981-61.505981h-84.570974c-7.688998-7.688998-30.75299-15.376995-38.441988-38.441987l-30.75299-76.882976-38.441988 69.194978c-15.375995 23.064993-30.75299 38.440988-46.129986 38.440988h-76.881976l53.817984 61.506981a53.817983 53.817983 0 0 1 23.064992 46.129985l-15.376995 92.259971 69.194979-30.75399z m-146.077954-30.75299zM615.139968 347.132212z m-192.20794-7.688998z m76.882976-61.505981z m30.75399 0z" fill="#FFFFFF" p-id="6707"></path>
</svg>
</view>
<view class="service-title">劳动政策指引</view>
</view>
<view class="service-item press-button" @click="navToService('skill-training')">
<view class="service-icon service-icon-5">
<svg t="1760592652548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9602" width="32" height="32">
<path d="M938.1888 34.2016H87.8592C50.3808 34.2016 20.48 64.7168 20.48 101.5808v522.4448c0 37.4784 30.5152 67.1744 67.1744 67.1744h97.0752v-167.3216c0-72.2944 58.9824-131.2768 131.2768-131.2768h65.9456c44.2368 0 85.6064 22.9376 109.568 59.5968l159.744-158.5152c12.6976-14.1312 23.9616-15.7696 30.5152-9.4208 6.3488 6.3488 6.3488 17.8176-5.5296 31.744L514.048 522.0352v169.1648h424.3456c37.4784 0 67.1744-30.5152 67.1744-67.1744V101.5808c-0.2048-36.864-30.1056-67.3792-67.3792-67.3792z m-589.824 346.9312c-50.7904 0-91.3408-41.3696-91.3408-91.3408 0-50.7904 41.3696-91.3408 91.3408-91.3408 50.7904 0 91.3408 41.3696 91.3408 91.3408v0.6144c0 49.9712-40.7552 90.7264-91.3408 90.7264zM129.6384 761.0368h54.4768c60.416 0 109.568 48.9472 109.568 109.568V989.184H19.8656v-119.1936c0.6144-60.0064 49.5616-108.9536 109.7728-108.9536z m711.2704 0h54.4768c60.416 0 109.568 48.9472 109.568 109.568V989.184H731.3408v-119.1936c0.6144-60.0064 49.5616-108.9536 109.568-108.9536z m-356.352 0h54.4768c60.416 0 109.568 48.9472 109.568 109.568V989.184H375.6032v-119.1936c0-60.0064 48.9472-108.9536 108.9536-108.9536z" fill="#FFFFFF" p-id="9603"></path>
</svg>
</view>
<view class="service-title">技能培训信息</view>
</view>
<view class="service-item press-button" @click="navToService('skill-evaluation')">
<view class="service-icon service-icon-6">
<svg t="1760592781996" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11602" width="32" height="32">
<path d="M857.414449 459.839013c-11.227716 0-19.427468 8.609075-19.427468 20.708648l0 366.92895c0 40.951691-32.461319 74.631768-71.780837 74.631768L189.751157 922.108379c-19.48682 0-41.531905-8.202822-57.936527-21.98778-18.148335-14.71719-28.503171-34.088376-28.503171-53.108568L103.311459 269.045619c0-19.428491 10.354835-40.137139 28.503171-56.94699 17.276479-16.403598 38.915311-26.350135 58.34278-26.350135l310.738184 0c11.634991 0 20.708648-8.201799 20.708648-19.428491 0-11.168364-9.073656-18.962887-20.708648-18.962887L190.157409 147.357116c-69.976748 0-124.888382 53.514821-124.888382 121.689527l0 577.965387c0 32.80822 12.505825 61.774949 36.297694 82.426291 22.453385 20.300348 53.980425 31.119765 88.590688 31.119765l576.918545 0c33.739429 0 61.8343-10.819416 81.261769-30.655184 19.429515-20.300348 29.375028-48.802496 29.375028-82.890872l-0.871857-366.463346C876.841917 468.913693 868.639095 459.839013 857.414449 459.839013zM935.650301 182.722578l-94.234221-94.52484c-12.970406-13.3214-32.397874-21.1149-53.166897-21.1149-19.834744 0-39.320541 7.794523-53.106522 20.707624l-76.550467 90.627067L250.245949 569.08002l-26.409486 228.720192 7.388271 6.515391 222.961024-30.248931 390.255215-408.752498 91.208305-73.816193C964.151425 262.588557 964.561771 211.224726 935.650301 182.722578zM273.97949 754.638179l8.260128-134.660956 124.422777 124.308167L273.97949 754.638179zM812.041052 344.199273 439.062316 719.679993l-134.370337-134.661979 376.410905-374.666168 132.217301 132.101667L812.041052 344.199273zM907.089825 260.029268l-59.622936 59.506279-143.03774-143.270031 59.214636-59.564607c6.459109-6.458085 15.124466-9.946536 24.605398-9.946536 9.540284 0 18.150382 3.489474 24.665773 9.946536l94.174869 94.116541C920.526859 224.197178 920.526859 246.64954 907.089825 260.029268z" fill="#FFFFFF" p-id="11603"></path>
</svg>
</view>
<view class="service-title">技能评价指引</view>
</view>
<view class="service-item press-button" @click="navToService('question-bank')">
<view class="service-icon service-icon-7">
<svg t="1760592856482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12615" width="32" height="32">
<path d="M847.644444 1024H150.755556c-48.355556-5.688889-88.177778-42.666667-93.866667-93.866667V93.866667C62.577778 45.511111 102.4 5.688889 150.755556 0h466.488888l327.111112 327.111111v605.866667c-8.533333 48.355556-48.355556 85.333333-96.711112 91.022222z m0-389.688889V327.111111h-184.888888c-25.6-2.844444-45.511111-22.755556-45.511112-45.511111V93.866667H196.266667c-25.6-2.844444-45.511111 17.066667-45.511111 42.666666v748.088889c5.688889 22.755556 22.755556 42.666667 45.511111 45.511111h605.866666c25.6-2.844444 45.511111-22.755556 45.511111-45.511111v-250.311111zM554.666667 824.888889c-17.066667 17.066667-48.355556 17.066667-65.422223 0-17.066667-17.066667-17.066667-48.355556 0-65.422222l233.244445-233.244445c17.066667-17.066667 48.355556-17.066667 65.422222 0 17.066667 17.066667 17.066667 48.355556 0 65.422222L554.666667 824.888889z m76.8-312.888889h-341.333334c-25.6 0-45.511111-19.911111-45.511111-45.511111 0-25.6 19.911111-45.511111 45.511111-45.511111h418.133334c8.533333 0 17.066667 2.844444 22.755555 8.533333-17.066667 5.688889-31.288889 14.222222-42.666666 28.444445l-56.888889 54.044444z m-341.333334 45.511111h292.977778l-93.866667 93.866667h-201.955555c-25.6 0-45.511111-19.911111-45.511111-45.511111 0-25.6 22.755556-48.355556 48.355555-48.355556z m0 139.377778h153.6l-25.6 25.6c-17.066667 17.066667-28.444444 39.822222-34.133333 65.422222h-93.866667c-25.6 0-45.511111-19.911111-45.511111-45.511111-2.844444-22.755556 19.911111-45.511111 45.511111-45.511111z m463.644445 48.355555c0 25.6-19.911111 45.511111-45.511111 45.511112h-17.066667l62.577778-62.577778v17.066666z" fill="#FFFFFF" p-id="12616"></path>
</svg>
</view>
<view class="service-title">题库和考试</view>
</view>
<view class="service-item press-button" @click="navToService('quality-assessment')">
<view class="service-icon service-icon-8">
<svg t="1760594375550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14087" width="32" height="32">
<path d="M815.542857 73.142857c58.514286 0 106.057143 47.542857 106.057143 106.057143v636.342857c0 58.514286-47.542857 106.057143-106.057143 106.057143h-636.342857c-58.514286 0-106.057143-47.542857-106.057143-106.057143v-636.342857C73.142857 120.685714 120.685714 73.142857 179.2 73.142857z m0 79.506286h-636.342857c-14.628571 0-26.550857 11.922286-26.550857 26.550857v636.342857c0 14.628571 11.922286 26.477714 26.550857 26.477714h636.342857c14.628571 0 26.477714-11.849143 26.477714-26.477714v-636.342857c0-14.628571-11.849143-26.550857-26.477714-26.550857zM362.788571 497.371429a120.173714 120.173714 0 1 1 0 240.420571 120.173714 120.173714 0 0 1 0-240.420571z m373.248 95.451428c20.48 0 37.083429 16.603429 37.083429 37.156572a42.422857 42.422857 0 0 1-37.156571 42.422857H594.651429a42.422857 42.422857 0 0 1-37.083429-42.422857c0-20.48 16.603429-37.156571 37.083429-37.156572z m-373.321142-19.017143a43.739429 43.739429 0 1 0 0 87.478857 43.739429 43.739429 0 0 0 0-87.405714z m64.365714-291.693714a37.083429 37.083429 0 0 1 48.493714 3.437714 37.302857 37.302857 0 0 1 2.486857 49.664L366.592 446.610286a37.156571 37.156571 0 0 1-52.004571-0.073143l-75.264-75.337143a37.083429 37.083429 0 0 1 3.510857-48.566857 37.376 37.376 0 0 1 49.956571-2.121143l45.494857 50.102857z m308.882286 45.568a37.156571 37.156571 0 0 1 0 74.24H594.651429a37.083429 37.083429 0 0 1 0-74.24z" fill="#FFFFFF" p-id="14088"></path>
</svg>
</view>
<view class="service-title">素质测评</view>
</view>
<view class="service-item press-button" @click="navToService('ai-interview')">
<view class="service-icon service-icon-9">
<svg t="1760594523105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18134" width="32" height="32">
<path d="M826.368 325.632c0-7.168 2.048-10.24 10.24-10.24h123.904c7.168 0 10.24 2.048 10.24 10.24v621.568c0 7.168-2.048 10.24-10.24 10.24h-122.88c-8.192 0-10.24-4.096-10.24-10.24l-1.024-621.568z m-8.192-178.176c0-50.176 35.84-79.872 79.872-79.872 48.128 0 79.872 32.768 79.872 79.872 0 52.224-33.792 79.872-81.92 79.872-46.08 1.024-77.824-27.648-77.824-79.872zM462.848 584.704C441.344 497.664 389.12 307.2 368.64 215.04h-2.048c-16.384 92.16-58.368 247.808-92.16 369.664h188.416zM243.712 712.704l-62.464 236.544c-2.048 7.168-4.096 8.192-12.288 8.192H54.272c-8.192 0-10.24-2.048-8.192-12.288l224.256-783.36c4.096-13.312 7.168-26.624 8.192-65.536 0-6.144 2.048-8.192 7.168-8.192H450.56c6.144 0 8.192 2.048 10.24 8.192l250.88 849.92c2.048 7.168 0 10.24-7.168 10.24H573.44c-7.168 0-10.24-2.048-12.288-7.168l-65.536-236.544c1.024 1.024-251.904 0-251.904 0z" fill="#FFFFFF" p-id="18135"></path>
</svg>
</view>
<view class="service-title">AI智能面试</view>
</view>
</view>
</view>
<view class="nav-filter" v-if="userInfo.userType !== 0">
<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('/packageA/pages/addPosition/addPosition')">
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
<text>添加</text>
</view>
</view>
<view class="filter-bottom">
<view class="btm-left">
<view
class="button-click filterbtm"
:class="{ active: pageState.search.order === item.value }"
v-for="item in rangeOptions"
@click="handelHostestSearch(item)"
:key="item.value"
>
{{ item.text }}
</view>
</view>
<view class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</view>
</view>
</view>
<view class="table-list">
<scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
<view class="falls" v-if="list.length">
<custom-waterfalls-flow
:column="columnCount"
:columnSpace="columnSpace"
ref="waterfallsFlowRef"
:value="list"
>
<template v-slot:default="job">
<view class="item btn-feel" v-if="!job.recommend">
<view class="falls-card" @click="nextDetail(job)">
<view class="falls-card-pay">
<view class="pay-text">
<Salary-Expectation
:max-salary="job.maxSalary"
:min-salary="job.minSalary"
:is-month="true"
></Salary-Expectation>
</view>
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
</view>
<view class="falls-card-title">{{ job.jobTitle }}</view>
<view class="fl_box fl_warp">
<view class="falls-card-education mar_ri10" v-if="job.education">
<dict-Label dictType="education" :value="job.education"></dict-Label>
</view>
<view class="falls-card-experience" v-if="job.experience">
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
</view>
</view>
<view class="falls-card-company" v-show="isShowJw !== 3">
{{ config.appInfo.areaName }}
<!-- {{ job.jobLocation }} -->
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
</view>
<view class="falls-card-pepleNumber">
<view>
<image class="point2" src="/static/icon/pintDate.png"></image>
<view class="fl_1">
{{ job.postingDate || '发布日期' }}
</view>
</view>
<view>
<image class="point3" src="/static/icon/pointpeople.png"></image>
<view class="fl_1">
{{ vacanciesTo(job.vacancies) }}
</view>
</view>
</view>
<view class="falls-card-company2">
<image class="point3" src="/static/icon/point3.png"></image>
<view class="fl_1">
{{ job.companyName }}
</view>
</view>
<!-- <view class="falls-card-matchingrate">
<view class=""><matchingDegree :job="job"></matchingDegree></view>
<uni-icons type="star" size="30"></uni-icons>
</view> -->
</view>
</view>
<view class="item" :class="{ isBut: job.isBut }" v-else>
<view class="recommend-card">
<view class="card-content">
<view class="recommend-card-title">在找{{ job.jobCategory }}工作吗</view>
<view class="recommend-card-tip">{{ job.tip }}</view>
<view class="recommend-card-line"></view>
<view class="recommend-card-controll">
<view class="controll-no" @click="clearfindJob(job)">不是</view>
<view class="controll-yes" @click="findJob(job)">是的</view>
</view>
</view>
</view>
</view>
</template>
</custom-waterfalls-flow>
<loadmore ref="loadmoreRef"></loadmore>
</view>
<empty v-else pdTop="200"></empty>
</scroll-view>
</view>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
<!-- <view class="maskFristEntry" v-if="maskFristEntry">
<view class="entry-content">
<text class="text1">左滑查看视频</text>
<text class="text2">左滑查看视频</text>
<view class="goExperience">去体验</view>
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
</view>
</view> -->
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
import img from '@/static/icon/filter.png';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo, vacanciesTo, formatTotal, config } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { userInfo } = storeToRefs(useUserStore());
import useDictStore from '@/stores/useDictStore';
const { getTransformChildren, oneDictData } = useDictStore();
import useLocationStore from '@/stores/useLocationStore';
import selectFilter from '@/components/selectFilter/selectFilter.vue';
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
import { useScrollDirection } from '@/hook/useScrollDirection';
import { useColumnCount } from '@/hook/useColumnCount';
import UserTypeSwitcher from '@/components/UserTypeSwitcher/UserTypeSwitcher.vue';
const { isScrollingDown, handleScroll } = useScrollDirection();
const recommedIndexDb = useRecommedIndexedDBStore();
const emits = defineEmits(['onShowTabbar']);
console.log(userInfo.value);
const waterfallsFlowRef = ref(null);
const loadmoreRef = ref(null);
const conditionSearch = ref({});
const waterfallcolumn = ref(2);
const maskFristEntry = ref(false);
const state = reactive({
tabIndex: 'all',
});
const list = ref([]);
const pageState = reactive({
page: 0,
total: 0,
maxPage: 2,
pageSize: 10,
search: {
order: 0,
},
});
const inputText = ref('');
const showFilter = ref(false);
const selectFilterModel = ref(null);
const showModel = ref(false);
const rangeOptions = ref([
{ value: 0, text: '推荐' },
{ value: 1, text: '最热' },
{ value: 2, text: '最新发布' },
{ value: 3, text: '疆外' },
]);
const isLoaded = ref(false);
// 控制用户类型切换器显示(测试用)
const showUserTypeSwitcher = ref(true);
const { columnCount, columnSpace } = useColumnCount(() => {
pageState.pageSize = 10 * (columnCount.value - 1);
getJobRecommend('refresh');
nextTick(() => {
waterfallsFlowRef.value?.refresh?.();
useLocationStore().getLocation();
});
});
async function loadData() {
try {
if (isLoaded.value) return;
isLoaded.value = true;
} catch (err) {
isLoaded.value = false; // 重置状态允许重试
throw err;
}
}
function scrollBottom() {
loadmoreRef.value.change('loading');
if (state.tabIndex === 'all') {
getJobRecommend();
} else {
getJobList();
}
}
function findJob(job) {
if (job.isBut) {
$api.msg('已确认');
} else {
list.value = list.value.map((item) => {
if (item.recommend && item.jobCategory === job.jobCategory) {
return {
...item,
isBut: true,
};
}
return item;
});
const jobstr = job.jobCategory;
const jobsObj = {
地区: 'area',
岗位: 'jobTitle',
经验: 'experience',
};
const [name, value] = jobstr.split(':');
const nameAttr = jobsObj[name];
if (name === '岗位') {
conditionSearch.value[nameAttr] = value;
} else {
const valueAttr = oneDictData(nameAttr).filter((item) => item.label === value);
if (valueAttr.length) {
const val = valueAttr[0].value;
conditionSearch.value[nameAttr] = val;
}
}
}
}
function clearfindJob(job) {
if (job.isBut) {
$api.msg('已确认');
} else {
list.value = list.value.map((item) => {
if (item.recommend && item.jobCategory === job.jobCategory) {
return {
...item,
isBut: true,
};
}
return item;
});
recommedIndexDb.deleteRecords(job);
}
}
function nextDetail(job) {
// 记录岗位类型,用作数据分析
if (job.jobCategory) {
const recordData = recommedIndexDb.JobParameter(job);
recommedIndexDb.addRecord(recordData);
}
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
}
function navToService(serviceType) {
// 根据服务类型跳转到不同页面
const serviceRoutes = {
'service-guidance': '/pages/service/guidance',
'public-recruitment': '/pages/service/public-recruitment',
'resume-creation': '/packageA/pages/myResume/myResume',
'labor-policy': '/pages/service/labor-policy',
'skill-training': '/pages/service/skill-training',
'skill-evaluation': '/pages/service/skill-evaluation',
'question-bank': '/pages/service/question-bank',
'quality-assessment': '/pages/service/quality-assessment',
'ai-interview': '/pages/chat/chat',
'job-search': '/pages/search/search',
'career-planning': '/pages/service/career-planning',
'salary-query': '/pages/service/salary-query',
'company-info': '/pages/service/company-info',
'interview-tips': '/pages/service/interview-tips',
'employment-news': '/pages/service/employment-news',
'more-services': '/pages/service/more-services'
};
const route = serviceRoutes[serviceType];
if (route) {
navTo(route);
} else {
$api.msg('功能开发中,敬请期待');
}
}
function openFilter() {
showFilter.value = true;
emits('onShowTabbar', false);
selectFilterModel.value?.open({
title: '筛选',
maskClick: true,
success: (values) => {
console.log('---', values);
pageState.search = {
...pageState.search,
};
for (const [key, value] of Object.entries(values)) {
pageState.search[key] = value.join(',');
}
showFilter.value = false;
getJobList('refresh');
},
cancel: () => {
showFilter.value = false;
emits('onShowTabbar', true);
},
});
}
function handleFilterConfirm(e) {
console.log(e);
}
function choosePosition(index) {
state.tabIndex = index;
list.value = [];
if (index === 'all') {
pageState.search = {
order: pageState.search.order,
};
inputText.value = '';
getJobRecommend('refresh');
} else {
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
pageState.search.jobTitle = userInfo.value.jobTitle[index];
inputText.value = '';
getJobList('refresh');
}
}
const isShowJw = ref(0);
function handelHostestSearch(val) {
console.log(val.value);
isShowJw.value = val.value;
pageState.search.order = val.value;
pageState.search.jobType = val.value === 3 ? 1 : 0;
if (state.tabIndex === 'all') {
getJobRecommend('refresh');
} else {
getJobList('refresh');
}
}
function getJobRecommend(type = 'add') {
if (type === 'refresh') {
list.value = [];
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
}
let params = {
pageSize: pageState.pageSize,
sessionId: useUserStore().seesionId,
...pageState.search,
...conditionSearch.value,
};
let comd = { recommend: true, jobCategory: '', tip: '确认你的兴趣,为您推荐更多合适的岗位' };
$api.createRequest('/app/job/recommend', params).then((resData) => {
const { data, total } = resData;
pageState.total = 0;
if (type === 'add') {
// 记录系统
recommedIndexDb.getRecord().then((res) => {
if (res.length) {
// 数据分析系统
const resultData = recommedIndexDb.analyzer(res);
const { sort, result } = resultData;
// 岗位询问系统
const conditionCounts = Object.fromEntries(
sort.filter((item) => item[1] > 1) // 过滤掉次数为 1 的项
);
jobRecommender.updateConditions(conditionCounts);
const question = jobRecommender.getNextQuestion();
if (question) {
comd.jobCategory = question;
data.unshift(comd);
}
}
const reslist = dataToImg(data);
list.value.push(...reslist);
});
} else {
list.value = dataToImg(data);
}
// 切换状态
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
if (data.length < pageState.pageSize) {
loadmoreRef.value.change('noMore');
} else {
loadmoreRef.value.change('more');
}
}
// 当没有岗位刷新sessionId重新啦
if (!data.length) {
useUserStore().initSeesionId();
}
});
}
function getJobList(type = 'add') {
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
if (type === 'refresh') {
list.value = [];
pageState.page = 1;
pageState.maxPage = 2;
// waterfallsFlowRef.value.refresh();
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
}
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
...pageState.search,
// ...conditionSearch.value,
};
$api.createRequest('/app/job/list', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = list.value.length;
const reslist = dataToImg(rows);
list.value.splice(str, end, ...reslist);
} else {
list.value = dataToImg(rows);
}
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
// 切换状态
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
if (rows.length < pageState.pageSize) {
loadmoreRef.value?.change('noMore');
} else {
loadmoreRef.value?.change('more');
}
}
});
}
function dataToImg(data) {
return data.map((item) => ({
...item,
image: img,
hide: true,
}));
}
defineExpose({ loadData });
</script>
<style lang="stylus" scoped>
// .maskFristEntry
// position: fixed;
// // right: 20rpx;
// // bottom: calc(50% - 200rpx);
// height: 100vh
// width: 100vw
// background: rgba(0,0,0,0.3)
// .entry-content
// display: flex;
// align-items: center
// position: absolute
// left: 50%
// top: 40%
// transform: translate(-50%, -50%)
// flex-direction: column
// background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
// background-size: 100% 100%;
// width: 480rpx
// height: 584rpx
// // padding-left: 80rpx
// .text1
// margin-top: 370rpx
// font-size: 36rpx
// background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
// background-clip: text; /* 有些浏览器兼容用 */
// text-fill-color: transparent;
// padding-left: 28rpx
// .text2
// padding-left: 28rpx
// margin-top: 8rpx
// font-size: 20rpx;
// color: #666666;
// text-align: center;
// .indicateArrow
// height: 76rpx
// width: 68rpx
// .indicatefristEntry
// width: 244rpx
// height: 244rpx
// .goExperience
// margin-left: 28rpx
// margin-top: 28rpx
// width: 160rpx;
// height: 60rpx;
// background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
// border-radius: 12rpx 12rpx 12rpx 12rpx;
// font-size: 28rpx;
// color: #FFFFFF;
// text-align: center;
// line-height: 60rpx
// .maskFristEntry-Close
// position: absolute;
// left: calc(50% - 10rpx);
// bottom: -130rpx
// width: 42rpx
// height: 42rpx
// background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
// border-radius: 50%;
// .maskFristEntry-Close::before
// position: absolute;
// left: calc( 50% - 2rpx)
// top: calc( 50% - 10rpx)
// transform: rotate(45deg);
// content: ''
// background: #FFFFFF
// width: 4rpx
// height: 20rpx
// .maskFristEntry-Close::after
// position: absolute;
// left: calc( 50% - 2rpx)
// top: calc( 50% - 10rpx)
// transform: rotate(-45deg);
// content: ''
// background: #FFFFFF
// width: 4rpx
// height: 20rpx
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: url('@/static/icon/background2.png') 0 0 no-repeat;
background-size: 100% 728rpx;
background-color: #FFFFFF;
display: flex;
flex-direction: column
.hidden-animation
max-height: 1000px;
transition: all 0.3s ease;
overflow: hidden;
.hidden-height
max-height: 0;
padding-top: 0;
padding-bottom: 0;
.container-search
padding: 16rpx 24rpx
display: flex
justify-content: space-between
.search-input
display: flex
align-items: center;
width: 100%
height: 80rpx;
line-height: 80rpx
margin-right: 24rpx
background: #FFFFFF;
border-radius: 75rpx 75rpx 75rpx 75rpx;
.iconsearch
padding-left: 36rpx
.inpute
margin-left: 20rpx
font-weight: 400;
font-size: 28rpx;
color: #B5B5B5;
width: 100%
.chart
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
width: 170rpx;
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%);
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
border-radius: 80rpx 80rpx 80rpx 80rpx;
border: 2rpx solid #FFFFFF;
text-align: center
font-weight: 500;
font-size: 28rpx;
height: 36rpx;
color: #000000;
padding: 20rpx 30rpx
.cards
padding: 10rpx 28rpx
display: grid
grid-gap: 38rpx;
grid-template-columns: 1fr;
.card
height: calc(158rpx - 40rpx);
padding: 22rpx 26rpx
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #FFFFFF;
.card-title
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 600;
font-size: 32rpx;
color: #000000;
.card-text
font-weight: 400;
font-size: 24rpx;
color: #9E9E9E;
margin-top: 4rpx
.card:first-child
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
url('@/static/icon/fujin.png');
background-size: 100%, 100%
.card:last-child
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
url('@/static/icon/jinxuan.png');
background-size: 100%, 100%
background-size: cover;
background-position: center;
// 服务功能网格样式
.service-grid
padding: 20rpx 28rpx
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr
grid-gap: 20rpx
.service-item
display: flex
flex-direction: column
align-items: center
justify-content: center
height: 120rpx
background: transparent
padding: 10px 0px
.service-icon
width: 88rpx
height: 88rpx
border-radius: 12rpx
margin-bottom: 8rpx
flex-shrink: 0
.service-icon-1
background: linear-gradient(180deg, #FF8E8E 0%, #E53E3E 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-2
background: linear-gradient(180deg, #6ED5CE 0%, #38B2AC 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-3
background: linear-gradient(180deg, #6BC5D8 0%, #3182CE 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-4
background: linear-gradient(180deg, #FFB74D 0%, #ED8936 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-5
background: linear-gradient(180deg, #F06292 0%, #C2185B 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-6
background: linear-gradient(180deg, #FFB74D 0%, #ED8936 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-7
background: linear-gradient(180deg, #6BC5D8 0%, #3182CE 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-8
background: linear-gradient(180deg, #81C784 0%, #4CAF50 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-9
background: linear-gradient(180deg, #6BC5D8 0%, #3182CE 100%)
position: relative
display: flex
align-items: center
justify-content: center
.service-icon-10
background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%)
position: relative
&::before
content: '🔍'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-icon-11
background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%)
position: relative
&::before
content: '📈'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-icon-12
background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%)
position: relative
&::before
content: '💰'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-icon-13
background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%)
position: relative
&::before
content: '🏢'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-icon-14
background: linear-gradient(135deg, #E91E63 0%, #F06292 100%)
position: relative
&::before
content: '💡'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-icon-15
background: linear-gradient(135deg, #795548 0%, #A1887F 100%)
position: relative
&::before
content: '📰'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-icon-16
background: linear-gradient(135deg, #424242 0%, #757575 100%)
position: relative
&::before
content: '⚙️'
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-size: 32rpx
.service-title
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif
font-weight: 500
font-size: 24rpx
color: #333333
text-align: center
line-height: 1.2
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
width: 100%
max-width: 100%
.nav-filter
padding: 16rpx 28rpx 0 28rpx
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
.filter-top
display: flex
justify-content: space-between;
.tab-scroll
flex: 1;
overflow: hidden;
margin-right: 20rpx
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
mask-image: linear-gradient(to right, black 60%, transparent);
.jobs-left
display: flex
flex-wrap: nowrap
.job
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: flex
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
line-height: 38rpx;
.filter-bottom
display: flex
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
.filterbtm
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
margin-right: 24rpx
padding: 0rpx 16rpx
.active
font-weight: 500;
font-size: 32rpx;
color: #256BFA;
.btm-right
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 32rpx;
color: #6C7282;
.right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
.table-list
background: #F4F4F4
flex: 1
overflow: hidden
.falls-scroll
width: 100%
height: 100%
.falls
padding: 28rpx 28rpx;
.item
position: relative;
// background: linear-gradient( 180deg, rgba(19, 197, 124, 0.4) 0%, rgba(255, 255, 255, 0) 30%), rgba(255, 255, 255, 0);
.falls-card
padding: 30rpx;
.falls-card-title
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
color: #606060;
text-align: left;
word-break:break-all
font-weight: 500;
font-size: 32rpx;
color: #333333;
margin-top: 10rpx
.falls-card-pay
// height: 50rpx;
word-break:break-all
color: #002979;
text-align: left;
display: flex;
align-items: end;
position: relative
.pay-text
font-family: DIN-Medium;
color: #4C6EFB;
padding-right: 10rpx
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
line-height: 45rpx;
text-align: left;
.flame
position: absolute
bottom: 0
right: -10rpx
transform: translate(0, -30%)
width: 24rpx
height: 31rpx
.falls-card-education,.falls-card-experience
width: fit-content;
height: 30rpx;
background: #F4F4F4;
border-radius: 4rpx;
padding: 6rpx 20rpx;
line-height: 30rpx;
font-weight: 400;
font-size: 24rpx;
color: #6C7282;
text-align: center;
margin-top: 20rpx;
white-space: nowrap
.falls-card-company,.falls-card-pepleNumber
margin-top: 20rpx;
font-size: 24rpx;
color: #999999;
line-height: 25rpx;
text-align: left;
.falls-card-pepleNumber
display: flex;
justify-content: space-between;
flex-wrap: wrap
margin-top: 10rpx;
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 46rpx
view
display:flex
align-items: center
white-space: nowrap;
.point2
margin: 0rpx 6rpx 0 2rpx
height: 22rpx
width: 22rpx
.point3
margin: 0rpx 4rpx 0 0
height: 28rpx
width: 28rpx
.falls-card-matchingrate
margin-top: 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 21rpx;
color: #4778EC;
text-align: left;
.falls-card-company2
margin-top: 4rpx;
font-size: 24rpx;
color: #999999;
text-align: left;
display: flex
.point3
margin: 4rpx 4rpx 0 0
height: 26rpx
width: 26rpx
// 推荐卡片
.recommend-card::before
position: absolute
left: 0
top: 0
content: ''
height: 60rpx
width: 100%
height: 8rpx;
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,54,170,0.15);
.recommend-card::after
content ''
position absolute
z-index 0
left 50%
top 40%
transform: translate(-50%, -50%)
width 250rpx
height 250rpx
background url('@/static/icon/backAI.png') no-repeat center center
opacity 0.6
background-size contain
pointer-events none
filter: blur(3rpx)
.recommend-card
padding 36rpx 24rpx
background: linear-gradient( 360deg, #DFE9FF 0%, #FFFFFF 52%, #FFFFFF 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
position relative
box-shadow 0rpx 4rpx 8rpx 0rpx rgba(72, 89, 123, 0.3)
.card-content
position: relative;
z-index: 2;
.recommend-card-title
font-weight: 500;
font-size: 28rpx;
color: #333333;
.recommend-card-tip
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
margin-top: 28rpx
.recommend-card-line
width: calc(100%);
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx dashed rgba(0,0,0,0.14);
margin-top: 50rpx
position: relative
// .recommend-card-line::before
// position: absolute
// content: ''
// left: 0
// top: 0
// transform: translate(-50% - 90rpx, -50%)
// width: 28rpx;
// height: 28rpx;
// background: #F4F4F4;
// border-radius: 50%;
// .recommend-card-line::after
// position: absolute
// content: ''
// right: 0
// top: 0
// transform: translate(50% + 90rpx, -50%)
// width: 28rpx;
// height: 28rpx;
// background: #F4F4F4;
// border-radius: 50%;
.recommend-card-controll
display: flex
align-items: center
justify-content: space-between
margin-top: 40rpx
padding: 0 6rpx;
.controll-yes
width: 124rpx;
height: 60rpx;
background: rgba(37,107,250,0.1);
border-radius: 12rpx 12rpx 12rpx 12rpx;
text-align: center;
line-height: 60rpx
color: #256BFA
.controll-no
width: 124rpx;
height: 56rpx;
line-height: 56rpx
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #DEDEDE;
font-weight: 400;
font-size: 28rpx;
color: #333333;
text-align: center;
.controll-yes:active, .controll-no:active
width: 120rpx;
height: 66rpx;
line-height: 66rpx
background: #e8e8e8
border: 2rpx solid #e8e8e8
.isBut{
filter: grayscale(100%);
}
</style>