100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<div class="agent-operate flex flex-center">
|
|
<el-popover placement="top" trigger="click" popper-class="agent-plus-popover">
|
|
<template #reference>
|
|
<SvgIcon name="plus" color="#0D0D0D" size="16" />
|
|
</template>
|
|
<template #default>
|
|
<div class="agent-modal flex flex-col">
|
|
<div class="file flex align-center" @click="emit('upload')">
|
|
<img src="@/assets/icons/attach.svg" class="file-icon" />
|
|
<span>Upload files</span>
|
|
</div>
|
|
<div class="gap"></div>
|
|
<div class="report flex align-center" @click="emit('toggle-report')">
|
|
<SvgIcon color="#5A5A5A" name="light" size="11" />
|
|
<span>Trending report</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
(e: 'upload'): void
|
|
(e: 'toggle-report'): void
|
|
}>()
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.agent-operate {
|
|
width: 3.2rem;
|
|
height: 3.2rem;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
|
|
&:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="less">
|
|
.agent-plus-popover {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
margin-bottom: -1rem;
|
|
width: fit-content !important;
|
|
min-width: initial !important;
|
|
|
|
.el-popper__arrow:before {
|
|
display: none;
|
|
}
|
|
|
|
.agent-modal {
|
|
row-gap: 1.2rem;
|
|
font-family: 'Medium';
|
|
font-weight: 500;
|
|
font-size: 1.3rem;
|
|
color: #222;
|
|
background-color: #fff;
|
|
border: 1px solid #d9d9d9;
|
|
box-shadow: 0px 6.53px 32.63px 0px #0000000d;
|
|
border-radius: 1rem;
|
|
padding: 1.2rem 1.4rem;
|
|
transform: translateX(calc(50% - 1.6rem));
|
|
|
|
.c-svg {
|
|
width: initial;
|
|
width: 1rem;
|
|
height: 1.3rem;
|
|
}
|
|
|
|
.file,
|
|
.report {
|
|
line-height: 1.8rem;
|
|
column-gap: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file {
|
|
.file-icon {
|
|
width: 1.1rem;
|
|
height: 1.3rem;
|
|
}
|
|
}
|
|
|
|
.gap {
|
|
height: 0.05rem;
|
|
background-color: #d4d4d4;
|
|
}
|
|
}
|
|
}
|
|
</style>
|