PC-vote/components/Empty.vue

<template>
    <div class="empty-box-list flexcenter">
        <div class="dot-list flexacenter">
            <img class="item" src="@/assets/img/dot-yellow.svg" />
            <img class="item" src="@/assets/img/dot-yellow.svg" />
            <img class="item" src="@/assets/img/dot-yellow.svg" />
            <img class="item" src="@/assets/img/dot-gray.svg" />
            <img class="item" src="@/assets/img/dot-gray.svg" />
            <img class="item" src="@/assets/img/dot-gray.svg" />
        </div>
        <img class="empty-icon" src="@/assets/img/empty-icon.png" />

        <template v-if="isNeedIssue">
            <div class="empty-hint" style="margin-bottom: 7px;">没有找到相关结果，请更换搜索关键词</div>
            <div class="empty-hint flexacenter">
                或者
                <div class="sponsor" @click="goIssue">发起一个新投票</div>
            </div>
        </template>
        <div v-else class="empty-hint">{{ hint || "暂无内容" }}</div>
    </div>
</template>

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

let props = defineProps({
    hint: String,
    isNeedIssue: Boolean,
})

let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")

const goIssue = () => {
    if (isNeedLogin.value) {
        goLogin()
        return
    }

    // router.push(`/publish`)
    goToURL(`/publish`)
}
</script>

<style lang="less" scoped>
.empty-box-list {
    // width: 690px;
    // height: 490px;
    background-color: #ffffff;
    border-radius: 6px;
    margin: 0 auto;
    flex-direction: column;
    padding-right: 42px;

    .dot-list .item {
        width: 8px;
        height: 8px;

        &:not(:last-of-type) {
            margin-right: 5px;
        }
    }

    .empty-icon {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .empty-hint {
        font-size: 13px;
        color: #7f7f7f;
        line-height: 22px;
        .sponsor {
            text-decoration: underline;
            color: #72db86;
            margin-left: 5px;
            cursor: pointer;
        }
    }
}
</style>