rt-sim-training-client/src/jmapNew/theme/beijing_01/planSchedule/titleBar.vue

<template>
    <div id="PlanTitleBar">
        <img class="logo" :src="logoImg" />
        <span> {{mapName}} &ensp;</span>
        <span v-if="runPlanName">({{runPlanName}})</span>
        <span class="system-close el-icon-close" @click="back"></span>
    </div>
</template>

<script>
    import logo_ from '@/assets/logo_.png';
    import { getPublishMapInfo } from '@/api/jmap/map';

    export default {
        name: 'PlanTitleBar',
        data() {
            return {
                mapName: '',
                logoImg: logo_
            }
        },
        computed: {
            runPlanName() {
                return this.$route.query.planName || '';
            }
        },
        mounted() {
            if (this.$route.query.mapId) {
                getPublishMapInfo(this.$route.query.mapId).then(resp => {
                    this.mapName = resp.data.name;
                })
            }
        },
        methods: {
            back() {
                this.$emit('back');
            }
        }
    }
</script>
<style scoped rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    $width: 25px;
    $height: 25px;

    #PlanTitleBar {
        z-index: 10;
        display: flex;
        position: absolute;
        width: 100%;
        height: $height;
        line-height: $height;
        background: -webkit-linear-gradient(#0055E8, #0099F8);
        background: -o-linear-gradient(#0055E8, #0099F8);
        background: -moz-linear-gradient(#0055E8, #0099F8);
        background: linear-gradient(#0055E8, #0099F8);
        color: white;
        font: bold;
        font-size: 16px;

        .logo {
            display: inline-block;
            width: $width;
            height: $height;
            padding-right: 5px;
        }

        .system-close {
            width: 25px;
            height: 25px;
            position: absolute;
            right: 1px;
        }
    }
</style>