rt-sim-training-client/src/views/planMonitor/editTool/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" />
  </div>
</template>

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

export default {
    name: 'PlanTitleBar',
    data() {
        return {
            mapName: '',
            logoImg: logo_
        };
    },
    computed: {
        runPlanName() {
            return this.$route.query.planName || '';
        }
    },
    mounted() {
        getPublishMapInfo(this.$route.query.mapId).then(resp => {
            this.mapName = resp.data.name;
        });
    },
    methods: {
        back() {
            this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
        }
    }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    @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>