MiniPi/src/components/header/headerRight.vue

<template>
    <div class="headerRight">
        <div class="example headerRightDiv">
            <Example></Example>
        </div>
        <div class="headerRightDiv">
            <Labs></Labs>
        </div>
        <div class="study headerRightDiv">
            <LinkStudy></LinkStudy>
        </div>
        <div class="file headerRightDiv ">
            <File v-bind="$attrs"></File>
        </div>
        <div class="lang headerRightDiv">
            <Languare></Languare>
        </div>
        <div class="user headerRightDiv">
            <User></User>
        </div>
    </div>
</template>
<script setup>
import {ref,defineProps} from 'vue'
import User from '../headerRight/user.vue'
import Example from '../headerRight/example.vue'
import Labs from '../headerRight/labs.vue'
import Languare from '../headerRight/languareSwitch.vue'
import File from '../headerRight/fIleOperation.vue'
import LinkStudy from '../headerRight/linkStudy.vue'

</script>
<style lang="scss" scoped>
.headerRight{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .headerRightDiv{
        padding: 10px;
        cursor: pointer;
    }
    .headerRightDiv:hover{
        background: #2847B8;
    }
}
</style>