<template>
    <scroll-view :scroll-y="true" class="nearby-scroll">
        <view class="two-head">
            <view class="head-item active">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
            <view class="head-item">市北区</view>
        </view>
        <view class="nearby-list">
            <view class="list-head" @touchmove.stop.prevent>
                <view class="tab-options">
                    <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
                        <view class="tab-op-left">
                            <view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
                            <uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
                        </view>
                    </scroll-view>
                    <view class="tab-op-right">
                        <view class="tab-recommend">推荐</view>
                        <view class="tab-filter">
                            <view class="tab-number">1000+</view>
                            <image class="image" src="/static/icon/filter.png"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="one-cards">
                <view class="card-box" v-for="(item, index) in 20" :key="index">
                    <view class="box-row mar_top0">
                        <view class="row-left">销售工程师-高级销售经理</view>
                        <view class="row-right">1万-2万</view>
                    </view>
                    <view class="box-row">
                        <view class="row-left">
                            <view class="row-tag">本科</view>
                            <view class="row-tag">1-5年</view>
                        </view>
                    </view>
                    <view class="box-row mar_top0">
                        <view class="row-item mineText">2024.1.8</view>
                        <view class="row-item mineText">8人</view>
                        <view class="row-item mineText textblue">匹配度93%</view>
                        <view class="row-item">
                            <uni-icons type="star" size="28"></uni-icons>
                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
                        </view>
                    </view>
                    <view class="box-row">
                        <view class="row-left mineText">湖南沃森电气科技有限公司</view>
                        <view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
const state = reactive({});
</script>

<style lang="stylus" scoped>
.nearby-scroll
    overflow: hidden;
    .two-head
        margin: 24rpx;
        padding: 26rpx;
        background: #FFFFFF;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 40rpx;
        grid-row-gap: 30rpx;
        border-radius: 17rpx 17rpx 17rpx 17rpx;
        .head-item
            min-width: 129rpx;
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            width: fit-content;
            background: #D9D9D9;
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            font-size: 21rpx;
            color: #606060;
        .active
            background: #4778EC;
            color: #FFFFFF;
    .nearby-list
        margin-top: 40rpx;
        background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
        .list-head
            height: 77rpx;
            background-color: #FFFFFF;
            border-radius: 17rpx 17rpx 0rpx 0rpx;
            position: relative;
            top: -17rpx;
            z-index: 9999;
    .tab-options
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 77rpx;
        background: #FFFFFF;
        border-radius: 17rpx 17rpx 0rpx 0rpx;
        padding: 0 24rpx;
        overflow: hidden;
        .tab-scroll
            height: 77rpx;
            line-height: 77rpx;
            flex: 1;
            overflow: hidden;
            padding-right: 10rpx;
            .tab-op-left
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                .tab-list
                    text-align: center;
                    white-space: nowrap;
                    margin-right: 30rpx;
                    font-size: 28rpx;
                    color: #606060;
        .tab-op-right
            display: flex;
            align-items: center;
            .tab-recommend
                white-space: nowrap;
                width: 92rpx;
                height: 42rpx;
                background: #4778EC;
                border-radius: 17rpx 17rpx 0rpx 17rpx;
                text-align: center;
                color: #FFFFFF;
                font-size: 21rpx;
                line-height: 42rpx;
                margin-right: 12rpx;
            .tab-number
                font-size: 21rpx;
                color: #606060;
                line-height: 25rpx;
                text-align: center;
            .tab-filter
                display: flex;
                .image
                    width: 28rpx;
                    height: 27rpx;

    .one-cards
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        .card-box
            width: calc(100% - 36rpx - 36rpx);
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            background: #FFFFFF;
            border-radius: 17rpx;
            padding: 15rpx 36rpx;
            margin-top: 24rpx;
            .box-row
                display: flex;
                justify-content: space-between;
                margin-top: 8rpx;
                align-items: center;
                .mineText
                    font-weight: 400;
                    font-size: 21rpx;
                    color: #606060;
                .textblue
                    color: #4778EC;
                .row-left
                    display: flex;
                    justify-content: space-between;
                    .row-tag
                        background: #13C57C;
                        border-radius: 17rpx 17rpx 17rpx 17rpx;
                        font-size: 21rpx;
                        color: #FFFFFF;
                        line-height: 25rpx;
                        text-align: center;
                        padding: 4rpx 8rpx;
                        margin-right: 23rpx;
        .card-box:first-child
            margin-top: -14rpx;
</style>
