317 lines
11 KiB
Vue
317 lines
11 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view :style="{ height: statusBarHeight + 'px' }"></view>
|
|
<tabcontrolVue :current="tabCurrent">
|
|
<!-- tab0 -->
|
|
<template v-slot:tab0>
|
|
<view class="login-content">
|
|
<image class="logo" src="../../static/logo.png"></image>
|
|
<view class="logo-title">就业</view>
|
|
</view>
|
|
<view class="btns">
|
|
<button open-type="getUserInfo" @getuserinfo="getuserinfo" class="wxlogin">微信登录</button>
|
|
<view class="wxaddress">青岛市公共就业和人才服务中心</view>
|
|
</view>
|
|
</template>
|
|
<!-- tab1 -->
|
|
<template v-slot:tab1>
|
|
<view class="tabtwo">
|
|
<view class="tabtwo-top">
|
|
<view class="color_FFFFFF fs_30">选择您的性别1/6</view>
|
|
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
|
</view>
|
|
<view class="fl_box fl_justmiddle">
|
|
<view class="tabtwo-sex">
|
|
<image class="sex-img" src="../../static/icon/woman.png"></image>
|
|
<view class="mar_top5">女</view>
|
|
<view class="dot"></view>
|
|
</view>
|
|
<view class="tabtwo-sex">
|
|
<image class="sex-img" src="../../static/icon/man.png"></image>
|
|
<view class="mar_top5">男</view>
|
|
<view class="dot doted"></view>
|
|
</view>
|
|
</view>
|
|
<view class="nextstep" @tap="nextStep">下一步</view>
|
|
</view>
|
|
</template>
|
|
<!-- tab2 -->
|
|
<template v-slot:tab2>
|
|
<view class="tabtwo">
|
|
<view class="tabtwo-top">
|
|
<view class="color_FFFFFF fs_30">选择您的年龄断段2/6</view>
|
|
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
|
</view>
|
|
<view class="fl_box fl_deri fl_almiddle">
|
|
<view class="agebtn agebtned">30岁以下</view>
|
|
<view class="agebtn">31-40岁</view>
|
|
<view class="agebtn">41-50岁</view>
|
|
<view class="agebtn">51岁以上</view>
|
|
</view>
|
|
<view class="fl_box fl_justmiddle"></view>
|
|
<view class="nextstep" @tap="nextStep">下一步</view>
|
|
</view>
|
|
</template>
|
|
<!-- tab3 -->
|
|
<template v-slot:tab3>
|
|
<view class="tabtwo">
|
|
<view class="tabtwo-top">
|
|
<view class="color_FFFFFF fs_30">选择您的学历3/6</view>
|
|
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
|
</view>
|
|
<view class="eduction-content">
|
|
<view class="eductionbtn eductionbtned">初中及以下</view>
|
|
<view class="eductionbtn">中专/中技</view>
|
|
<view class="eductionbtn">高中</view>
|
|
<view class="eductionbtn">大专</view>
|
|
<view class="eductionbtn">本科</view>
|
|
<view class="eductionbtn">硕士</view>
|
|
<view class="eductionbtn">博士</view>
|
|
<view class="eductionbtn">MBA/EMBA</view>
|
|
<view class="eductionbtn">留学-学士</view>
|
|
<view class="eductionbtn">留学-硕士</view>
|
|
<view class="eductionbtn">留学-博士</view>
|
|
</view>
|
|
<view class="fl_box fl_justmiddle"></view>
|
|
<view class="nextstep" @tap="nextStep">下一步</view>
|
|
</view>
|
|
</template>
|
|
<!-- tab4 -->
|
|
<template v-slot:tab4>
|
|
<view class="tabtwo">
|
|
<view class="tabtwo-top">
|
|
<view class="color_FFFFFF fs_30">您期望的薪资范围4/6</view>
|
|
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
|
</view>
|
|
<view class="salary">
|
|
<scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
|
|
<view class="salary-content-item">不限</view>
|
|
<view class="salary-content-item">2k</view>
|
|
<view class="salary-content-item">5k</view>
|
|
<view class="salary-content-item">10k</view>
|
|
<view class="salary-content-item">15k</view>
|
|
</scroll-view>
|
|
<view class="center-text">至</view>
|
|
<scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
|
|
<view class="salary-content-item">不限</view>
|
|
<view class="salary-content-item">2k</view>
|
|
<view class="salary-content-item">5k</view>
|
|
<view class="salary-content-item">10k</view>
|
|
<view class="salary-content-item">15k</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="fl_box fl_justmiddle"></view>
|
|
<view class="nextstep" @tap="nextStep">下一步</view>
|
|
</view>
|
|
</template>
|
|
<!-- tab5 -->
|
|
<template v-slot:tab5>
|
|
<view class="tabtwo">
|
|
<view class="tabtwo-top">
|
|
<view class="color_FFFFFF fs_30">您期望的求职区域5/6</view>
|
|
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
|
</view>
|
|
<view class="fl_box fl_justmiddle"></view>
|
|
<view class="nextstep" @tap="nextStep">下一步</view>
|
|
</view>
|
|
</template>
|
|
<!-- tab6 -->
|
|
<template v-slot:tab6>
|
|
<view class="tabtwo">
|
|
<view class="tabtwo-top">
|
|
<view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
|
|
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
|
|
</view>
|
|
<view class="fl_box fl_justmiddle"></view>
|
|
<!-- <view class="nextstep" @tap="complate">完成</view> -->
|
|
<navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
|
|
<button class="nextstep" @tap="complate">完成</button>
|
|
</navigator>
|
|
</view>
|
|
</template>
|
|
</tabcontrolVue>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import tabcontrolVue from './components/tabcontrol.vue';
|
|
import { reactive, inject, watch, ref } from 'vue';
|
|
const { statusBarHeight } = inject('deviceInfo');
|
|
const { $api, navTo } = inject('globalFunction');
|
|
const tabCurrent = ref(4);
|
|
const state = reactive({
|
|
sex: 1,
|
|
});
|
|
|
|
setTimeout(() => {
|
|
console.log('gg');
|
|
}, 4000);
|
|
const getuserinfo = (e) => {
|
|
console.log(e);
|
|
};
|
|
|
|
function nextStep() {
|
|
tabCurrent.value += 1;
|
|
}
|
|
function handleScroll(event) {
|
|
console.log('滚动条滚动', event.detail.scrollTop);
|
|
console.log(Math.round(event.detail.scrollTop / 75));
|
|
// this.activeIndex = Math.round(event.detail.scrollTop / 75);
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.container
|
|
width: 100%;
|
|
height: 100%
|
|
background: linear-gradient(#4778EC, #002979);
|
|
position: relative;
|
|
|
|
.login-content
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 40%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: nowrap;
|
|
.logo
|
|
width: 266rpx;
|
|
height: 182rpx;
|
|
.logo-title
|
|
font-size: 88rpx;
|
|
color: #FFFFFF;
|
|
width: 180rpx;
|
|
.btns
|
|
position: absolute;
|
|
top: 70%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0)
|
|
.wxlogin
|
|
width: 562rpx;
|
|
height: 140rpx;
|
|
border-radius: 70rpx;
|
|
background-color: #13C57C;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 140rpx;
|
|
font-size: 70rpx;
|
|
.wxaddress
|
|
color: #BBBBBB;
|
|
margin-top: 70rpx;
|
|
text-align: center;
|
|
// 2
|
|
.tabtwo
|
|
padding: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.tabtwo-top
|
|
margin: 222rpx 0 0 0;
|
|
width: 100%;
|
|
.tabtwo-sex
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
font-size: 40rpx;
|
|
margin: 200rpx 60rpx 0 60rpx;
|
|
.sex-img
|
|
width: 184rpx;
|
|
height: 184rpx;
|
|
.dot
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 50%;
|
|
background: #d1d1d6;
|
|
position: relative;
|
|
.dot:before
|
|
content: '';
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
background: #1e4baa;
|
|
.doted
|
|
background: #13C57C;
|
|
.doted:after{
|
|
content: '';
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%
|
|
background: #13C57C;
|
|
}
|
|
.agebtn
|
|
width: 630rpx;
|
|
height: 108rpx;
|
|
border-radius: 20rpx;
|
|
background: #d9d9d9;
|
|
text-align: center;
|
|
line-height: 108rpx;
|
|
font-size: 40rpx;
|
|
margin-top: 50rpx;
|
|
color: #606060;
|
|
.agebtned
|
|
background: #13C57C;
|
|
color: #FFFFFF;
|
|
.nextstep
|
|
position: absolute;
|
|
top: 80%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0)
|
|
width: 630rpx;
|
|
height: 98rpx;
|
|
border-radius: 20rpx;
|
|
background: #13C57C;
|
|
text-align: center;
|
|
line-height: 98rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
.eduction-content
|
|
width: fit-content;
|
|
display: grid;
|
|
grid-template-columns: 300rpx 300rpx;
|
|
grid-gap: 20rpx;
|
|
margin-top: 50rpx;
|
|
.eductionbtn
|
|
width: 300rpx;
|
|
height: 108rpx;
|
|
border-radius: 20rpx;
|
|
background: #d9d9d9;
|
|
text-align: center;
|
|
line-height: 108rpx;
|
|
font-size: 36rpx;
|
|
color: #606060;
|
|
.eductionbtned
|
|
background: #13C57C;
|
|
color: #FFFFFF;
|
|
.salary
|
|
width: fit-content;
|
|
display: grid;
|
|
grid-template-columns: 300rpx auto 300rpx;
|
|
// grid-gap: 20rpx;
|
|
margin-top: 50rpx;
|
|
.center-text
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 400rpx;
|
|
.salary-content
|
|
width: 300rpx;
|
|
height: 380rpx;
|
|
.salary-content-item
|
|
height: 104rpx;
|
|
line-height: 104rpx;
|
|
margin: 20rpx 10rpx 20rpx 10rpx;
|
|
border-radius: 20rpx;
|
|
background: #d9d9d9;
|
|
text-align: center;
|
|
</style>
|