|
|
@@ -0,0 +1,711 @@
|
|
|
+<template>
|
|
|
+ <view class="welcome-page">
|
|
|
+ <view class="welcome-content">
|
|
|
+ <swiper
|
|
|
+ class="custom-swiper"
|
|
|
+ :autoplay="false"
|
|
|
+ :current="currentIndex"
|
|
|
+ @change="onSwiperChange"
|
|
|
+ >
|
|
|
+ <!-- circular -->
|
|
|
+ <swiper-item>
|
|
|
+ <view class="swiper-content">
|
|
|
+ <view class="bg-img">
|
|
|
+ <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-img">
|
|
|
+ <image
|
|
|
+ src="@/static/images/jobApplicant/delivery_bro.svg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ class="bro-img"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-txt">
|
|
|
+ <view class="content-title"
|
|
|
+ >了解多一点 <br />
|
|
|
+ 推荐更准确</view
|
|
|
+ >
|
|
|
+ <view class="content-desc"
|
|
|
+ >亿职赞，专为跨境行业提供人才服务 <br />
|
|
|
+ 请您完成求职引导</view
|
|
|
+ >
|
|
|
+ <view class="next-page" @click="switchBanner(1)"
|
|
|
+ >下一步
|
|
|
+ <image src="@/static/images/jobApplicant/next.svg" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item>
|
|
|
+ <view class="swiper-content">
|
|
|
+ <view class="bg-img">
|
|
|
+ <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-img">
|
|
|
+ <image
|
|
|
+ src="@/static/images/jobApplicant/delivery-address_bro.png"
|
|
|
+ mode="aspectFix"
|
|
|
+ class="address-img"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-txt" style="height: 1004rpx">
|
|
|
+ <!-- 表单内容 -->
|
|
|
+ <view class="form-container">
|
|
|
+ <!-- 工作城市 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">期望工作的城市</text>
|
|
|
+ <view class="form-input" @click="selectCity">
|
|
|
+ <text class="input-text">{{ city || "请选择" }}</text>
|
|
|
+ <u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 工作职位 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">期望的职位</text>
|
|
|
+ <view class="form-input" @click="selectJob">
|
|
|
+ <text class="input-text">{{ jobTitle || "请选择" }}</text>
|
|
|
+ <u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 期望薪酬 -->
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">期望的薪酬</text>
|
|
|
+ <view class="salary-container">
|
|
|
+ <view class="salary-inputs">
|
|
|
+ <view class="salary-input">
|
|
|
+ <text class="currency">¥</text>
|
|
|
+ <input
|
|
|
+ v-model="minSalary"
|
|
|
+ type="number"
|
|
|
+ placeholder="8000"
|
|
|
+ class="salary-field"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="salary-input">
|
|
|
+ <text class="currency">¥</text>
|
|
|
+ <input
|
|
|
+ v-model="maxSalary"
|
|
|
+ type="number"
|
|
|
+ placeholder="10000"
|
|
|
+ class="salary-field"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 范围滑块 -->
|
|
|
+ <view class="range-slider-container">
|
|
|
+ <view class="range-slider-track" @click="onTrackClick">
|
|
|
+ <view class="range-slider-progress" :style="progressStyle"></view>
|
|
|
+ <view
|
|
|
+ class="range-slider-thumb range-slider-thumb-left"
|
|
|
+ :style="leftThumbStyle"
|
|
|
+ @touchstart.stop="onLeftThumbStart"
|
|
|
+ @touchmove.stop="onLeftThumbMove"
|
|
|
+ @touchend.stop="onLeftThumbEnd"
|
|
|
+ ></view>
|
|
|
+ <view
|
|
|
+ class="range-slider-thumb range-slider-thumb-right"
|
|
|
+ :style="rightThumbStyle"
|
|
|
+ @touchstart.stop="onRightThumbStart"
|
|
|
+ @touchmove.stop="onRightThumbMove"
|
|
|
+ @touchend.stop="onRightThumbEnd"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="next-page" @click="switchBanner(2)"
|
|
|
+ >下一步
|
|
|
+ <image src="@/static/images/jobApplicant/next.svg" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item>
|
|
|
+ <view class="swiper-content">
|
|
|
+ <view class="bg-img">
|
|
|
+ <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-img">
|
|
|
+ <image
|
|
|
+ src="@/static/images/jobApplicant/bangongyuansu.svg"
|
|
|
+ mode="aspectFix"
|
|
|
+ class="people-img"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="swiper-txt">
|
|
|
+ <view class="content-title">跨境电商工作经验？</view>
|
|
|
+ <view class="content-desc"
|
|
|
+ >请根据过往经验进行选择 <br />
|
|
|
+ 届时我们将为您提供更为准确的服务</view
|
|
|
+ >
|
|
|
+ <view class="check-box">
|
|
|
+ <view class="check-item" @click="checkWork(1)">
|
|
|
+ <image
|
|
|
+ v-if="check == 1"
|
|
|
+ src="@/static/images/jobApplicant/check.svg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ v-else
|
|
|
+ src="@/static/images/jobApplicant/border.svg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ 有跨境电商工作经验
|
|
|
+ </view>
|
|
|
+ <view class="check-item" @click="checkWork(2)">
|
|
|
+ <image
|
|
|
+ v-if="check == 2"
|
|
|
+ src="@/static/images/jobApplicant/check.svg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ v-else
|
|
|
+ src="@/static/images/jobApplicant/border.svg"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ 有跨境电商工作经验
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="next-page" @click="goWord"
|
|
|
+ >下一步
|
|
|
+ <image src="@/static/images/jobApplicant/next.svg" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 自定义指示器 -->
|
|
|
+ <view class="custom-indicator">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in 3"
|
|
|
+ :key="index"
|
|
|
+ class="indicator-dot"
|
|
|
+ :class="{ active: currentIndex === index }"
|
|
|
+ @click="switchBanner(index)"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentIndex: 0,
|
|
|
+ check: 1,
|
|
|
+ jobTitle: "",
|
|
|
+ city: "",
|
|
|
+ minSalary: "8000",
|
|
|
+ maxSalary: "10000",
|
|
|
+ jobType: "fulltime",
|
|
|
+ industry: "",
|
|
|
+ // 范围滑块相关数据
|
|
|
+ minValue: 8000,
|
|
|
+ maxValue: 10000,
|
|
|
+ sliderMin: 5000,
|
|
|
+ sliderMax: 50000,
|
|
|
+ step: 1000,
|
|
|
+ trackWidth: 0,
|
|
|
+ draggingThumb: null, // 'left' 或 'right' 或 null
|
|
|
+ startX: 0,
|
|
|
+ startValue: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 左侧滑块位置百分比
|
|
|
+ leftPercent() {
|
|
|
+ return ((this.minValue - this.sliderMin) / (this.sliderMax - this.sliderMin)) * 100;
|
|
|
+ },
|
|
|
+ // 右侧滑块位置百分比
|
|
|
+ rightPercent() {
|
|
|
+ return ((this.maxValue - this.sliderMin) / (this.sliderMax - this.sliderMin)) * 100;
|
|
|
+ },
|
|
|
+ // 进度条样式
|
|
|
+ progressStyle() {
|
|
|
+ return {
|
|
|
+ left: this.leftPercent + "%",
|
|
|
+ width: this.rightPercent - this.leftPercent + "%",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 左侧滑块样式
|
|
|
+ leftThumbStyle() {
|
|
|
+ return {
|
|
|
+ left: this.leftPercent + "%",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 右侧滑块样式
|
|
|
+ rightThumbStyle() {
|
|
|
+ return {
|
|
|
+ left: this.rightPercent + "%",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkWork(value) {
|
|
|
+ this.check = value;
|
|
|
+ },
|
|
|
+ // 轮播图切换事件
|
|
|
+ onSwiperChange(e) {
|
|
|
+ this.currentIndex = e.detail.current;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换轮播图
|
|
|
+ switchBanner(index) {
|
|
|
+ this.currentIndex = index;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击轮播图
|
|
|
+ handleBannerClick(item) {
|
|
|
+ if (item.link) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.link,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 暂停自动播放
|
|
|
+ pauseAutoplay() {
|
|
|
+ this.autoplay = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 开始自动播放
|
|
|
+ startAutoplay() {
|
|
|
+ this.autoplay = true;
|
|
|
+ },
|
|
|
+ selectJob() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/package/jobIntention/jobList",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectCity() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/package/jobIntention/city",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectJobType(type) {
|
|
|
+ this.jobType = type;
|
|
|
+ },
|
|
|
+ // 获取滑块轨道宽度
|
|
|
+ getTrackWidth() {
|
|
|
+ uni
|
|
|
+ .createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select(".range-slider-track")
|
|
|
+ .boundingClientRect((data) => {
|
|
|
+ this.trackWidth = data.width;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ },
|
|
|
+ // 将像素位置转换为数值
|
|
|
+ pixelToValue(pixel) {
|
|
|
+ const percent = (pixel / this.trackWidth) * 100;
|
|
|
+ const value = this.sliderMin + (percent / 100) * (this.sliderMax - this.sliderMin);
|
|
|
+ return Math.round(value / this.step) * this.step;
|
|
|
+ },
|
|
|
+ // 左侧滑块开始拖拽
|
|
|
+ onLeftThumbStart(e) {
|
|
|
+ this.draggingThumb = "left";
|
|
|
+ this.startX = e.touches[0].clientX;
|
|
|
+ this.startValue = this.minValue;
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ // 左侧滑块拖拽中
|
|
|
+ onLeftThumbMove(e) {
|
|
|
+ if (this.draggingThumb !== "left") return;
|
|
|
+
|
|
|
+ const deltaX = e.touches[0].clientX - this.startX;
|
|
|
+ const deltaPercent = (deltaX / this.trackWidth) * 100;
|
|
|
+ const deltaValue = (deltaPercent / 100) * (this.sliderMax - this.sliderMin);
|
|
|
+ let newValue = this.startValue + deltaValue;
|
|
|
+
|
|
|
+ // 限制范围
|
|
|
+ newValue = Math.max(this.sliderMin, Math.min(newValue, this.maxValue - this.step));
|
|
|
+ newValue = Math.round(newValue / this.step) * this.step;
|
|
|
+
|
|
|
+ this.minValue = newValue;
|
|
|
+ this.minSalary = newValue.toString();
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ // 左侧滑块结束拖拽
|
|
|
+ onLeftThumbEnd(e) {
|
|
|
+ this.draggingThumb = null;
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ // 右侧滑块开始拖拽
|
|
|
+ onRightThumbStart(e) {
|
|
|
+ this.draggingThumb = "right";
|
|
|
+ this.startX = e.touches[0].clientX;
|
|
|
+ this.startValue = this.maxValue;
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ // 右侧滑块拖拽中
|
|
|
+ onRightThumbMove(e) {
|
|
|
+ if (this.draggingThumb !== "right") return;
|
|
|
+
|
|
|
+ const deltaX = e.touches[0].clientX - this.startX;
|
|
|
+ const deltaPercent = (deltaX / this.trackWidth) * 100;
|
|
|
+ const deltaValue = (deltaPercent / 100) * (this.sliderMax - this.sliderMin);
|
|
|
+ let newValue = this.startValue + deltaValue;
|
|
|
+
|
|
|
+ // 限制范围
|
|
|
+ newValue = Math.max(this.minValue + this.step, Math.min(newValue, this.sliderMax));
|
|
|
+ newValue = Math.round(newValue / this.step) * this.step;
|
|
|
+
|
|
|
+ this.maxValue = newValue;
|
|
|
+ this.maxSalary = newValue.toString();
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ // 右侧滑块结束拖拽
|
|
|
+ onRightThumbEnd(e) {
|
|
|
+ this.draggingThumb = null;
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ // 点击轨道
|
|
|
+ onTrackClick(e) {
|
|
|
+ if (this.draggingThumb) return;
|
|
|
+
|
|
|
+ const rect = e.currentTarget.getBoundingClientRect();
|
|
|
+ const clickX = e.detail.x - rect.left;
|
|
|
+ const clickPercent = (clickX / rect.width) * 100;
|
|
|
+ const clickValue =
|
|
|
+ this.sliderMin + (clickPercent / 100) * (this.sliderMax - this.sliderMin);
|
|
|
+
|
|
|
+ // 判断点击位置更靠近哪个滑块
|
|
|
+ const distanceToLeft = Math.abs(clickValue - this.minValue);
|
|
|
+ const distanceToRight = Math.abs(clickValue - this.maxValue);
|
|
|
+
|
|
|
+ if (distanceToLeft < distanceToRight) {
|
|
|
+ // 更靠近左侧滑块
|
|
|
+ let newValue = Math.round(clickValue / this.step) * this.step;
|
|
|
+ newValue = Math.max(
|
|
|
+ this.sliderMin,
|
|
|
+ Math.min(newValue, this.maxValue - this.step)
|
|
|
+ );
|
|
|
+ this.minValue = newValue;
|
|
|
+ this.minSalary = newValue.toString();
|
|
|
+ } else {
|
|
|
+ // 更靠近右侧滑块
|
|
|
+ let newValue = Math.round(clickValue / this.step) * this.step;
|
|
|
+ newValue = Math.max(
|
|
|
+ this.minValue + this.step,
|
|
|
+ Math.min(newValue, this.sliderMax)
|
|
|
+ );
|
|
|
+ this.maxValue = newValue;
|
|
|
+ this.maxSalary = newValue.toString();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goWord(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/my/jobApplicant/workProgress'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ // 页面隐藏时暂停自动播放
|
|
|
+ this.pauseAutoplay();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始化滑块轨道宽度
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getTrackWidth();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 页面显示时恢复自动播放
|
|
|
+ this.startAutoplay();
|
|
|
+ // 监听选择结果
|
|
|
+ uni.$on("jobSelected", (data) => {
|
|
|
+ this.jobTitle = data.name;
|
|
|
+ });
|
|
|
+ uni.$on("citySelected", (data) => {
|
|
|
+ this.city = data.name;
|
|
|
+ });
|
|
|
+ uni.$on("industrySelected", (data) => {
|
|
|
+ this.industry = data.name;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ // 移除监听
|
|
|
+ uni.$off("jobSelected");
|
|
|
+ uni.$off("citySelected");
|
|
|
+ uni.$off("industrySelected");
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.welcome-page {
|
|
|
+ background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .bg-img {
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ top: 26rpx;
|
|
|
+ left: -240rpx;
|
|
|
+ width: 1680rpx;
|
|
|
+ height: 1570rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-box {
|
|
|
+ .check-item {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 46rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 26rpx;
|
|
|
+ image {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .welcome-content {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .custom-swiper {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .custom-indicator {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: -186rpx;
|
|
|
+ gap: 16rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ .indicator-dot {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background: #1be5df;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ width: 48rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background: #016bf6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .swiper-img {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .bro-img {
|
|
|
+ width: 640rpx;
|
|
|
+ height: 436rpx;
|
|
|
+ }
|
|
|
+ .address-img {
|
|
|
+ width: 714rpx;
|
|
|
+ height: 298rpx;
|
|
|
+ }
|
|
|
+ .people-img {
|
|
|
+ width: 586rpx;
|
|
|
+ height: 586rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-txt {
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #fff;
|
|
|
+ border-top-left-radius: 48rpx;
|
|
|
+ border-top-right-radius: 48rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 782rpx;
|
|
|
+ padding: 56rpx 40rpx;
|
|
|
+ padding-bottom: 160rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .next-page {
|
|
|
+ color: #016bf6;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 36rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ position: absolute;
|
|
|
+ right: 34rpx;
|
|
|
+ bottom: 46rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-title {
|
|
|
+ color: #016bf6;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 68rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 88rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .content-desc {
|
|
|
+ color: #016bf6;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ .form-container {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-label {
|
|
|
+ color: rgba(58, 57, 67, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ height: 108rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 48rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ box-shadow: 0px 8px 150px 0px rgba(0, 0, 0, 0.06);
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .input-text {
|
|
|
+ color: rgba(97, 110, 124, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .salary-container {
|
|
|
+ .salary-inputs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20rpx 0 30rpx 0;
|
|
|
+ gap: 50rpx;
|
|
|
+
|
|
|
+ .salary-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ box-shadow: 0px 8px 150px 0px rgba(0, 0, 0, 0.06);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .currency,
|
|
|
+ .salary-field {
|
|
|
+ color: rgba(97, 110, 124, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .salary-separator {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-slider-container {
|
|
|
+ padding: 20rpx 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-slider-track {
|
|
|
+ position: relative;
|
|
|
+ height: 6rpx;
|
|
|
+ background-color: #e5e5ea;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-slider-progress {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #007aff;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ transition: all 0.1s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-slider-thumb {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #007aff;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 4rpx solid #ffffff;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.1s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-slider-thumb:active {
|
|
|
+ transform: translate(-50%, -50%) scale(1.1);
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .job-type-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 50rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
