<template>
    <div class="peditor-head-box row items-center">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/w' }">我参与的项目</el-breadcrumb-item>
            <el-breadcrumb-item>2024/09/23-18:49 黄奎创建</el-breadcrumb-item>
            <el-breadcrumb-item>行程编辑</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="col"></div>
        <el-link :underline="false">
            <IconSettingOne></IconSettingOne>
            <span style="margin-left: 5px;" class="text-small">行程信息设置</span>
        </el-link>
        <el-popover placement="bottom" trigger="click" class="pa-none">
            <template #reference>
                <el-link :underline="false" class="q-mx-lg">
                    <IconSwitch></IconSwitch>
                    <span style="margin-left: 5px;" class="text-small">导入导出</span>
                </el-link>
            </template>
            <el-menu mode="vertical" class="min-menu none-border" style="width: 100%;">
                <el-menu-item index="1">导入行程路线</el-menu-item>
                <el-menu-item index="2">导出到行程库</el-menu-item>
            </el-menu>
        </el-popover>
       
        <el-button color="#626aef" style="height: 100%;border-radius: 0;">返回</el-button>
        <div></div>
    </div>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>
<style>
.peditor-head-box{
    background-color: #000e1a;
    height: 48px;
    padding-left: 40px;
}
.peditor-head-box .el-breadcrumb__inner{
    color:#8c9398;
}
.peditor-head-box .el-breadcrumb__item:last-child .el-breadcrumb__inner,.peditor-head-box .el-link {
    color:#D9DBDC;
}
.peditor-head-box .el-link :hover {
    color: var(--el-link-hover-text-color);
}
.none-border{
    border-right: none;
}
.min-menu .el-menu-item{
    height: 40px;
    line-height: 40px;
}
</style>