foster-pc-vue/src/components/navigation.vue

<template>
    <div class="navigation yes-events">
        <el-select class="select" v-model="value" size="large" popper-class="focus-farm-select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="tabs" v-for="(ele, idx) in list" :key="idx">
            <div
                class="tab-item"
                @click="handleTab(item)"
                :class="{ active: active === item.id }"
                v-for="(item, index) in ele"
                :key="index"
            >
                {{ item.name }}
            </div>
        </div>
        <el-checkbox-group
            v-show="childrenData.length"
            class="checkbox-group"
            v-model="checkedChildren"
            @change="handleCheckedChange"
        >
            <el-checkbox v-for="item in childrenData" :key="item" :label="item" :value="item">
                {{ item }}
            </el-checkbox>
        </el-checkbox-group>
        <!-- <div class="btn" @click="toPage">农场确权</div> -->
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();

const value = ref("Option1");

const options = [
    {
        value: "Option1",
        label: "2区",
    }
];

const emit = defineEmits(["handleTab","handleTabItem"])

const checkedChildren = ref([]);
const childrenData = ref([]);
const handleCheckedChange = (e) => {
    checkedChildren.value = [e[e.length -1]];
    emit('handleTabItem',checkedChildren.value[0])
};

const active = ref(0);
const handleTab = ({ id, name,children }) => {
    active.value = id;
    childrenData.value = []
    if(children){
        childrenData.value = children;
        checkedChildren.value = [children[0]];
    }
    emit('handleTab',{name,id})
};

const list = ref([
    [
        {
            name: "异常总览",
            id: 0,
        },
        {
            name: "基本指标",
            id: 1,
            children: ["树高", "冠幅"],
        },
        {
            name: "物候指标",
            id: 2,
            children: ["花穗长度", "单数华穗率"],
        },
        {
            name: "生态指标",
            id: 3,
            children: ["通风率", "清园程度","益草覆盖度"],
        },
        {
            name: "生长指标",
            id: 4,
        },
        {
            name: "病虫指标",
            id: 5,
        },
    ],
    [
        {
            name: "处方图",
            id: 6,
        },
    ],
]);

const toPage = () => {
    router.push("/authentic");
};
</script>

<style lang="scss" scoped>
.navigation {
    position: fixed;
    top: 34px;
    left: calc(50% - 470px);
    width: calc(100% - 430px * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    .select{
        width: 120px;
        height: 50px;
        margin-right: 21px;
        ::v-deep{
            .el-select__wrapper{
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                box-shadow: 0 0 0 1px #F7BE5A;
                border-radius: 2px;
                text-align: center;
            }
            .el-select__placeholder{
                color: #F7BE5A;
                font-size: 20px;
                font-family: "PangMenZhengDao";
            }
            .el-select__caret{
                color: #F7BE5A;
                font-size: 20px;
            }
        }
    }
    .tabs {
        background: rgba(35, 35, 35, 0.8);
        border: 1px solid #555555;
        padding: 8px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        .tab-item {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            padding: 7px 12px 9px 12px;
            font-family: "PangMenZhengDao";
            cursor: pointer;
            &.active {
                background: #ffd489;
                color: #1d1d1d;
                border-radius: 4px;
            }
        }
        .tab-item + .tab-item {
            margin-left: 25px;
        }
    }
    .tabs + .tabs {
        margin-left: 12px;
    }

    .checkbox-group {
        position: absolute;
        top: 74px;
        right: 30px;
        background: rgba(35, 35, 35, 0.8);
        border-radius: 8px;
        border: 1px solid #555555;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        ::v-deep {
            .el-checkbox {
                margin-right: 0;
            }
            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #ffd489;
            }
            .el-checkbox__input.is-checked .el-checkbox__inner {
                background-color: #ffd489;
                border-color: #ffd489;
                &::after {
                    border-color: #1d1d1d;
                }
            }
            .el-checkbox__label {
                color: #fff;
            }
        }
    }

    .btn {
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 28px;
        border-radius: 5px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.5);
    }
}
</style>