nginx-ui/frontend/src/views/other/About.vue

<template>
    <a-card style="text-align: center">
        <div class="logo">
            <img :src="logo"  alt="logo" />
        </div>
        <h2>Nginx UI</h2>
        <p>Yet another WebUI for Nginx</p>
        <p>Version: {{ version }} ({{ build_id }})</p>
        <h3>项目组</h3>
        <p><a href="https://jackyu.cn/">@0xJacky</a></p>
        <p><a href="https://blog.kugeek.com/">@Hintay</a></p>
        <h3>技术栈</h3>
        <p>Go</p>
        <p>Gin</p>
        <p>Vue</p>
        <p>Websocket</p>
        <h3>开源协议</h3>
        <p>GNU General Public License v2.0</p>
        <p>Copyright © 2020 - {{ this_year }} Nginx UI </p>
    </a-card>
</template>

<script>
export default {
    name: 'About',
    data() {
        const date = new Date()
        return {
            logo: require('@/assets/img/logo.png'),
            this_year: date.getFullYear(),
            version: process.env.VUE_APP_VERSION,
            build_id: process.env.VUE_APP_TOTAL_BUILD ?? '开发模式',
            api_root: process.env.VUE_APP_API_ROOT
        }
    },
    methods: {
        async changeUserPower(power) {
            await this.$store.dispatch('update_mock_user', {power: power})
            await this.$api.user.info()
            await this.$message.success("修改成功")
        }
    }
}
</script>

<style lang="less" scoped>

.logo {
    img {
        max-width: 120px
    }
}
.egg {
    padding: 10px 0;
}

.ant-btn {
    margin: 10px 10px 0 0;
}
</style>