ks-app-employment-service/pages/login/login.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 fl_1 fl_alstart">
                        <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="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 salary-content-item-selected">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 salary-content-item-selected">2k</view>
                            <view class="salary-content-item">5k</view>
                            <view class="salary-content-item">10k</view>
                            <view class="salary-content-item">15k</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="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">胶州市</view>
                        <view class="eductionbtn">平度市</view>
                        <view class="eductionbtn">莱西市</view>
                        <view class="eductionbtn">不限区域</view>
                    </view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab6 -->
            <template v-slot:tab6>
                <view class="tabtwo sex-two">
                    <view class="tabtwo-top mar_top25 mar_le25">
                        <view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="sex-search">
                        <uni-icons class="iconsearch" type="search" size="20"></uni-icons>
                        <input class="uni-input searchinput" confirm-type="search" />
                    </view>
                    <view class="sex-content fl_1">
                        <scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-left">
                            <view
                                v-for="item in state.station"
                                :key="item.value"
                                class="left-list-btn"
                                :class="{ 'left-list-btned': item.value === state.stationCateLog }"
                                @click="changeStationLog(item)"
                            >
                                {{ item.label }}
                            </view>
                        </scroll-view>
                        <scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-right">
                            <view class="grid-sex">
                                <view class="sex-right-btn sex-right-btned">客户经理</view>
                                <view class="sex-right-btn">客户经理</view>
                                <view class="sex-right-btn">客户经理</view>
                                <view class="sex-right-btn">客户经理</view>
                                <view class="sex-right-btn">客户经理</view>
                                <view class="sex-right-btn">客户经理</view>
                                <view class="sex-right-btn">客户经理</view>
                            </view>
                        </scroll-view>
                    </view>
                    <navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
                        <button class="nextstep confirmStep">完成</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 station = [
    { label: '销售/商务拓展', value: 1 },
    { label: '人事/行政/财务/法务', value: 2 },
    { label: '互联网/通信及硬件', value: 3 },
    { label: '运维/测试', value: 4 },
    { label: '销售/商务拓展', value: 5 },
    { label: '人事/行政/财务/法务', value: 6 },
    { label: '互联网/通信及硬件', value: 7 },
    { label: '运维/测试', value: 8 },
    { label: '销售/商务拓展', value: 9 },
    { label: '人事/行政/财务/法务', value: 10 },
    { label: '互联网/通信及硬件', value: 11 },
    { label: '销售/商务拓展', value: 12 },
    { label: '人事/行政/财务/法务', value: 13 },
    { label: '互联网/通信及硬件', value: 14 },
];
// status
const tabCurrent = ref(0);
const state = reactive({
    station: station,
    stationCateLog: 1,
});
const fromValue = reactive({
    sex: 1,
});

setTimeout(() => {
    console.log('gg');
}, 4000);
const getuserinfo = (e) => {
    console.log(e);
};
// 行为
function changeStationLog(item) {
    state.stationCateLog = item.value;
}
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" scoped>
.container
    background: linear-gradient(#4778EC, #002979);
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    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;
    justify-content: space-between;
    height: calc(100% - 40rpx);
.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
    width: 630rpx;
    height: 98rpx;
    border-radius: 20rpx;
    background: #13C57C;
    text-align: center;
    line-height: 98rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    margin-bottom: 150rpx;
.confirmStep
    margin-bottom: 50rpx;
.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 40rpx 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;
            font-size: 38rpx;
        .salary-content-item-selected
            margin: 10rpx 5rpx 10rpx 5rpx;
            background: #13C57C;
            color: #FFFFFF;
.sex-two
    padding-left: 0;
    padding-right: 0;
    background: #4678ec;
.sex-search
    width: calc(100% - 28rpx - 28rpx);
    padding: 10rpx 28rpx;
    display: grid;
    // grid-template-columns: 50rpx auto;
    position: relative;
    .iconsearch
        position: absolute;
        left: 40rpx;
        top: 20rpx;
    .searchinput
        border-radius: 10rpx;
        background: #FFFFFF;
        padding: 10rpx 0 10rpx 58rpx;
.sex-content
    background: #FFFFFF;
    border-radius: 20rpx;
    width: 100%;
    margin-top: 20rpx;
    margin-bottom: 40rpx;
    display: flex;
    border-bottom: 2px solid #D9D9D9;
    overflow: hidden
    .sex-content-left
        width: 250rpx;
        .left-list-btn
            padding: 0 24rpx;
            display: grid;
            place-items: center;
            height: 100rpx;
            text-align: center;
            color: #606060;
            font-size: 28rpx;
        .left-list-btned
            color: #4778EC;
            position: relative;
        .left-list-btned::after
            position: absolute;
            left: 20rpx;
            content: '';
            width: 7rpx;
            height: 38rpx;
            background: #4778EC;
            border-radius: 0rpx 0rpx 0rpx 0rpx;

    .sex-content-right
        border-left: 2px solid #D9D9D9;
        flex: 1;
        .grid-sex
            display: grid;
            grid-template-columns: 50% 50%;
            place-items: center;
            .sex-right-btn
                width: 211rpx;
                height: 84rpx;
                font-size: 35rpx;
                line-height: 41rpx;
                text-align: center;
                display: grid;
                place-items: center;
                background: #D9D9D9;
                border-radius: 20rpx;
                margin-top:30rpx;
                color: #606060;
            .sex-right-btned
                color: #FFFFFF;
                background: #4778EC;
</style>