de-net/src/view/iframe/publish/components/give-dialog-head.vue

<template>
    <div class="head">
        <div class="left">
            <!-- 关闭按钮 -->
            <div class="close-btn" @click="close">
                <template v-if="publishType == 'TOOL_BOX'">
                    <img  class="icon-close"
                    :src="require('@/assets/svg/icon-close.svg')"
                    v-if="toolBoxPageData.activePage == 'EDITOR'"/>
                    <img class="icon-close"
                        :src="require('@/assets/svg/icon-back.svg')"
                        v-else/>
                </template>
                <template v-else>
                    <img  class="icon-close"
                    :src="require('@/assets/svg/icon-close.svg')"
                    v-if="showComType == 'default'"/>
                    <img class="icon-close"
                        :src="require('@/assets/svg/icon-back.svg')"
                        v-else/>
                </template>
            </div>
            <!-- 标题 -->
            <div class="title">
                {{title}}
            </div>
        </div>
        <div class="right">
            <!-- 更多按钮 -->
            <img :src="require('@/assets/svg/icon-more-l.svg')"
                class="more"
                @click="showMoreOption = true">
            <div class="area-option" 
                v-if="showMoreOption" 
                @click="showMoreOption = false">
                <div class="option">
                    <div class="item" @click="goTransactionsList()">
                        <img :src="require('@/assets/svg/icon-menu.svg')">
                        <span>Transaction History</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from "vue";

const props = defineProps({
    publishType: {
        type: String,
        default: 'REDPACKET'
    },
    showComType: {
        type: String,
        default: 'default'
    },
    toolBoxPageData: {
        type: Object,
        default: () => {
            return {
                activePage: 'EDITOR' //PREVIEW
            }
        }
    },
    title: {
        type: String,
        default: 'DeNet'
    },
})

const emits = defineEmits(["close"]);

// 展示更多按钮下的选项
let showMoreOption = ref(false);

const goTransactionsList = () => {
    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
}

const close = () => {
    emits('close', {})
}

</script>

<style lang="scss" scoped>
.head {
    border-bottom: 1px solid #ececec;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;

    .left {
        display: flex;
        align-items: center;
        .title {
            font-size: 16px;
            font-weight: 500;
        }

        .close-btn {
            display: flex;
            align-items: center;
            width: max-content;
            margin-right: 12px;
            cursor: pointer;
        }
    }

    .right {
        .more {
            cursor: pointer;
        }

        .area-option {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 111;

            .option {
                position: absolute;
                top: 43px;
                right: 15px;
                background: #fff;
                filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
                width: 240px;
                border-radius: 15px;
                overflow: hidden;

                .item {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    border-top: 1px solid #E9E9E9;

                    img {
                        margin-left: 15px;
                        width: 30px;
                        height: 30px;
                        margin-right: 6px;
                    }

                    span {
                        font-weight: 500;
                        font-size: 14px;
                    }
                }

                .item:first-child {
                    border-top: 0;
                }

                .item:hover {
                        background: #F5F5F5;
                }
            }
        }
    }
}
</style>